BÁO cáo THỰC tập lập TRÌNH ỨNG DỤNG WEB với METEOR

1 TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM BÁO CÁO THỰC TẬP LẬP TRÌNH ỨNG DỤNG WEB VỚI METEOR Công ty thực tập : Công ty Cổ phần Zigvy Người phụ trách : Thầy Huỳnh Tuấn Anh Thực tập sinh : Lương Kim Phượng TP Hồ Chí Minh, tháng 12 năm 2021 Thầy Huỳnh Tuấn Anh Sinh viên Lương Kim Phượng LỜI MỞ ĐẦU Website coi mảng lập trình phổ biến giới Hầu hết doanh nghiệp hay tổ chức cần cho website, tham gia vào lĩnh vực công việc chủ yếu bạn làm lập trình tạo lập website thơng qua cơng cụ lập trình Python, PHP, Java, Linux,… vô số công cụ phổ biến khác Sau khoảng thời gian trau dồi kiến thức kỹ ghế nhà trường, với mong muốn thử sức với môi trường doanh nghiệp để có thêm kinh nghiệm từ dự án thực tế tiếp xúc với văn hóa làm việc lĩnh vực cơng nghệ, em định tìm kiếm nơi phù hợp để thực tập Sau khoảng thời gian cân nhắc trao đổi đại diện doanh nghiệp, em tham gia vào đội ngũ nhân Công ty Cổ phần Zigvy – doanh nghiệp trẻ, đầy động chuyên nghiệp, tạo điều kiện cho bạn trẻ em có hội học tập thử sức Thầy Huỳnh Tuấn Anh Sinh viên Lương Kim Phượng LỜI CẢM ƠN Trong trình học tập, trau dồi kiến thức khoa Công nghệ Phần mềm, trường Đại học Công nghệ Thơng tin, thầy khoa nói chung thầy trực tiếp giảng dạy em nói riêng, tận tình dạy, truyền đạt kiến thức quý báu chuyên ngành lẫn kiến thức xã hội Nhờ mà em học tập, tiếp thu kiến thức kỹ thuật, công nghệ phù hợp với nhu cầu xã hội Đồng thời, thầy cô giúp em trau dồi kỹ năng, tảng kiến thức làm hành trang cần thiết trình thực kế hoạch đào tạo trường, thể qua đợt Thực tập doanh nghiệp lần Em xin chân thành cảm ơn quý thầy cô khoa Công nghệ Phần mềm nhiệt tình truyền đạt kiến thức, kinh nghiệm nghề nghiệp, truyền cảm hứng để em tiếp thu cách dễ dàng Đặc biệt, em xin gửi lời cảm ơn sâu sắc đến Thầy Huỳnh Tuấn Anh, người thầy nhiệt tình hướng dẫn em xuyên suốt thời gian thực tập trình viết báo cáo thực tập Thầy giúp em định hướng hướng tạo động lực để em học tập dễ dàng Cuối cùng, em xin gửi lời cảm ơn đến q cơng ty, nơi mà em vừa hồn thành kế hoạch thực tập – Công ty Cổ phần Zigvy anh chị nhân viên công ty hướng dẫn, bảo em nhiệt tình Ở đây, em học hỏi nhiều kinh nghiệm thực tiễn trải nghiệm phần dự án thực tế Đặc biệt, em xin gửi lời cảm ơn chân thành đến anh leader team Bùi Thanh Vân, hướng dẫn em suốt trình thực tập vừa Bên cạnh đó, em xin gửi lời cảm ơn đến gia đình bạn bè, người ln bên cạnh cổ vũ để em hoàn thành tốt lần thực tập Em xin chân thành cảm ơn! Lương Kim Phượng Tp.HCM, ngày 14 tháng 12 năm 2021 Thầy Huỳnh Tuấn Anh Sinh viên Lương Kim Phượng NHẬN XÉT CỦA KHOA Thầy Huỳnh Tuấn Anh Sinh viên Lương Kim Phượng MỤC LỤC MỤC LỤC Chương 1: Giới thiêu công ty thực tập Giới thiệu Công ty Cổ phần Zigvy Sản phẩm công ty Chương 2: Nội dung thực tập Tìm hiểu cơng ty kỹ công ty Nghiên cứu kỹ thuật Thực project 10 Lịch làm việc 10 Chương 3: Chi tiết project 12 Tổng quan project 12 Thực 15 Kế hoạch 15 TÀI LIỆU THAM KHẢO 16 TỔNG KẾT 17 Kiến thức tiếp thu 17 Rút kinh nghiệm thân 17 Định hướng công việc 17 Thầy Huỳnh Tuấn Anh Sinh viên Lương Kim Phượng Chương 1: Giới thiêu công ty thực tập Giới thiệu Công ty Cổ phần Zigvy - ZigVy Corporation công ty phát triển phần mềm chung Hoa Kỳ Việt Nam, tọa lạc quận Bình Thạnh, thành phố Hồ Chí Minh Được thành lập vào năm 2016 với thành viên đồng sáng lập Nguyễn Lê Trung Hậu (CEO & Founder), Gilman Nguyễn Phương (Co-founder) Với năm kinh nghiệm phát triển Website ứng dụng di động, thành viên đồng sáng lập dần mở rộng phát triển công ty ngày hôm - Công ty phát triển lĩnh vực thiết kế Website ứng dụng di động với trình độ chun mơn Javascript, Node.js, Meteor.js, React.js, Angular.js, thiết kế UI/UX Trong suốt trình hoạt động, cơng ty tiếp nhận dự án lớn nhỏ, quy mơ ngồi nước hoàn thành hiệu đơn đặt hàng Hầu hết dự án công ty đến từ Hoa Kỳ châu Âu với nhiều loại hình kinh doanh khác - Với phát triển nhanh chóng, kể từ thành lập đến công ty mở rộng quy mơ từ 11 đến 50 lập trình viên, nắm vững chuyên môn front-end, back-end fullstack Website, truy cập trang web công ty với link https://zigvy.com/ Email, địa mail info@zigvy.com Số điện thoại, +84 93301 3306 Sản phẩm công ty - Website thuộc lĩnh vực y tế AMILI - tổ chức chăm sóc sức khỏe có trụ sở Singapore nghiên cứu hệ vi sinh vật dựa tảng khoa học giải nhu cầu quan trọng chưa đáp ứng chăm sóc sức khỏe với tiềm tác động tích cực đến hàng triệu sống, đặc biệt người bị bệnh đường ruột Link website: https://amili.asia/ Thầy Huỳnh Tuấn Anh Sinh viên Lương Kim Phượng - - - Website cho HRFORCE – doanh nghiệp có trụ sở Australia chuyên cung cấp dịch vụ tổ chức, chuyên môn kỹ thuật phát sinh khuôn khổ dự án SAP ERP HCM Link website: https://www.hrforce.at/en Chatchilla - Hệ thống nâng cao hợp lý hóa tương tác với khách hàng thông qua nhiều kênh giao tiếp vơ số cấu hình phù hợp với nhu cầu kinh doanh bạn Link website: https://chatchilladev.com/ Cube - Hệ thống tương tác quản lý tài nguyên, nhân lực doanh nghiệp tích hợp email, doc tiện ích khác Link website: https://cube.wellshade.com/ Thầy Huỳnh Tuấn Anh Sinh viên Lương Kim Phượng Chương 2: Nội dung thực tập Đợt thực tập với chủ đề “Lập trình Ứng dụng web với Meteor” nhằm mục đích giúp sinh viên thực tập đào tạo chuyên sâu JavaScript, React Js Metor, đồng thời rèn luyện kỹ mềm làm việc nhóm, thuyết trình, giao tiếp Tại cơng ty, sinh viên có hội học tập, khám phá làm việc môi trường phát triển Website chun nghiệp Tìm hiểu cơng ty kỹ công ty Thời gian: ngày Nội dung: Giới thiệu công ty, cách tổ chức công ty  Được nghe người phụ trách giới thiệu cơng ty, q trình thành lập phát triên (như nhắc đến trên), quy trình làm việc từ cao xuống thấp, cách thức tổ chức cơng ty  Ngồi ra, thực tập sinh giới thiệu cách thức làm việc công ty thời gian làm, quy định cần phải tuân thủ, cách sử dụng email số phần mềm nội công việc… Kết quả: Hiểu thêm cơng ty Zigvy, q trình thành lập phát triển Có thêm kỹ việc sử dụng ứng dụng quản lý công việc, làm việc có kế hoạch, có kỷ luật, có trách nhiệm Nghiên cứu kỹ thuật 2.1 Tìm hiểu chuyên sâu React JS Thời gian: tuần Nội dung: Tìm hiểu làm tập Training JavaScript nói chung React JS nói riêng: • Training - Introduction: React • Training - Basic React: React State, Props and R • Training - Basic React: React Life Cycle • Training - Intermediate React: Calling API with Axios, Fetch API • Training - Advanced React: Redux and React Redux • Training - Advanced React: Redux Middleware Thầy Huỳnh Tuấn Anh Sinh viên Lương Kim Phượng Kết quả: Hoàn thành traning nắm kiến thức JavaScipt, React JS, Redux làm việc với Node JS 2.2 Tìm hiểu Meteor Thời gian: tuần Nội dung: Meteor gì? Meteor Javacript framework mã nguồn mở, xây dựng môi trường Node.js cho phép tạo Web Application với real-time Đồng thời đảm bảo việc đồng thông tin database ứng dụng UI, xây dựng web side, server-side client-side Bên cạnh đó, Meteor cịn cho phép người dùng xây dựng apps cross-platform code, build tảng mobile iOS, android chí Desktop Framework cung cấp “gần như” toàn thứ cần thiết để làm Web Application/ Mobile: • Front-end sử dụng framework Blaze để bind liệu • Back-end sử dụng NodeJS Express để làm server, MongoDB database • Một hệ thống thư viện/module tương tự npm, Maven, Nuget • Một số tool để build/deploy web site mobile app Tại nên sử dụng Meteor để lập trình ứng dụng Web? Việc lựa chọn Meteor làm framework để phát triển phần mềm developer ưa chuộng Thật vậy, framework có nhiều ưu điểm bật ưa chuộng: • Việc cài đặt đơn giản, khơng yêu cầu ứng dụng đặc biệt Nhanh chóng tạo sản phẩm • Chỉ cần có kiến thức HTML, CSS Javascript sử dụng • Mọi thao tác tới database thông qua API Meteor, viết Javascript • Xây dựng ứng dụng đa tảng web, moible (android) • Có nguồn gói thư viện phong phú, thân meteor có repository để chứa package Meteor • Sử dụng NoSQL để lưu trữ trao đổi liệu client server (2 database, server client sử dụng MiniMongo) Việc sử dụng sở liệu phía giúp cho client có trải nghiệm tốt liệu tương tác lưu client sau cập nhật phía server client khác • Deploy nhanh Meteor có package hỗ trợ, cần gọi lệnh sử dụng • Tài liệu học tập, nghiên cứu phong phú đa dạng Thầy Huỳnh Tuấn Anh Sinh viên Lương Kim Phượng 10 Mặc dù framework có nhiều ưu điểm khiến developer lựa chọn sử dụng tồn số hạn chế: • Module nhiều documents khơng rõ ràng • Chỉ hỗ trợ MongoDB làm database engine Tóm lại, Meteor framework xây dựng để phục vụ cho ứng dụng Single-Page, với việc kết hợp front-end framework xây dựng nhanh ứng dụng SinglePage Việc sử dụng giao thức DDP Websocket, Meteor xây dựng ứng dụng Real-time phục vụ cho việc cập nhật liệu liên tục ứng dụng đòi hỏi push notifications cho người dùng Cài đặt sử dụng React Meteor nào? Để cài cặt framework Meteor, trước tiên phải cài đặt Chocolatey, sau cài đặt xong tiến hành chạy câu lệnh bên với tư cách người quản trị - Administrator choco install meteor Lúc Meteor cài đặt Một số thông tin cần biết cài đặt framework trên: • Meteor hỗ trợ cài đặt hệ điều hành Windows 7/ Windows Server 2008 R2 trở lên • Việc cài đặt Chocolatey bắt buộc (tham khảo bước cài đặt https://chocolatey.org/install) • Việc phát triển iOS khơng hỗ trợ • Vơ hiệu hóa phần mềm antivirus cải thiện hiệu suất Để tạo project Meteor, gõ lệnh: meteor create Sau lệnh tạo chạy xong, tiến hành cài đặt React bên Meteor, sử dụng thư viện npm gõ lệnh: meteor npm install save react react-dom Đợi thư viện cài đặt thành công, lúc cần dùng lệnh để import react vào project bắt đầu dự án React bên Meteor Thực project Sau tuần training thực hành, thực tập sinh nắm kiến JavaScript, React Js Meteor Trong tuần tiếp theo, trainer hướng dẫn thực tập sinh áp dụng kiến thức học để tham gia vào project thực tế Chi tiết đồ án nói phần sau Lịch làm việc Tuần Thầy Huỳnh Tuấn Anh Công việc Người hướng dẫn Mức độ Nhận xét Sinh viên Lương Kim Phượng 11 hoàn thành - - người hướng dẫn Tìm hiểu cơng Anh Bùi Thanh Vân ty, cách tổ chức công ty Làm quen với công cụ làm việc công ty Tìm hiểu React Anh Bùi Thanh Vân Js thực training ứng dụng - Tìm hiểu Meteor Anh Bùi Thanh Vân thực Todo App fullstack Giai đoạn thực Anh Bùi Thanh Vân Project: - Set up project Cube môi trường Dev - Thực chức cho project - Deploy lên product - Thầy Huỳnh Tuấn Anh Sinh viên Lương Kim Phượng 12 Chương 3: Chi tiết project Tổng quan project 1.1 Giới thiệu Cube hệ thống quản lý tài nguyên doanh nghiệp Wellshade – đơn vị cung cấp nhiều dịch vụ công nghệ bao gồm tư vấn, giải pháp đám mây dịch vụ quản lý có trụ sở khu vực Raleigh, NC Hệ thống web application sử dụng cơng nghệ Meteor viết ngơn ngữ JavaScript để xây dựng front end back end, ngồi ứng dụng cịn tích hợp thêm Elastic search, Firebase số thư viện, module khác Một số chức ứng dụng: • Quản lý liệu thông tin tài nguyên, khách hàng, đối tác, nhân viên • Cho phép team nhân làm việc với làm việc với khách hàng thông qua project, ticket • Tích hợp hệ thống email đồng hóa liệu từ outlook • Tích hợp thống doc studio cho phép thao tác văn tài liệu tương tự google doc 1.2 Danh sách trang Thầy Huỳnh Tuấn Anh Sinh viên Lương Kim Phượng 13 - Trang Workspace với detail ticket - Trang calendar Thầy Huỳnh Tuấn Anh Sinh viên Lương Kim Phượng 14 - Trang Project - Trang Email Thầy Huỳnh Tuấn Anh Sinh viên Lương Kim Phượng 15 - Trang Cài đặt Thực thành viên team Cube Web Appliation:  Anh Bùi Thanh Vân  Anh Lê Minh Hiếu  Thực tập sinh Lương Kim Phượng Kế hoạch Vấn dề giao giải quyết: Hệ thống data lớn với cách xử lý React Select gây tượng giật lag cho người dung Cần tạo AdvancedSelect việc custom React Select áp dụng cho tất pub-sub hệ thống để cải tiến performance cho Web App Các công việc cần xử lý:  Tạo thành phần CustomAdvancedSelect cách sử dụng thành phần chức  Tất props giống với Custom Select hiển thị Select trả  Thêm searchValue & setSearchValue useState  Sửa đổi CustomSelect cho phép đưa hai props truy cập vào thành phần React-select  Tạo CustomAdvanceSelect theo liên kết giao diện CustomAdvancedSelect Thầy Huỳnh Tuấn Anh Sinh viên Lương Kim Phượng 16  Sử dụng useTracker CustomAdvancedSelect gọi đến publication xác tùy thuộc vào entity value  Chuẩn bị params xác phụ thuộc vào params props params & searchValue & setSearchValue useState  Thêm input type thành phần InputField "AdvanceSelect"  Áp dụng Advanced Select cho tồn project TÀI LIỆU THAM KHẢO Cơng nghệ Meteor https://www.meteor.com/o React Select https://react-select.com/ MongoDB https://www.mongodb.com/ Thầy Huỳnh Tuấn Anh Sinh viên Lương Kim Phượng 17 TỔNG KẾT Kiến thức tiếp thu Nhờ đào tạo nhiệt tình, chun nghiệp, trọng tâm cơng ty mà em học nhiều điều, mở mang kiến nhiều kiến thức chuyên sâu React thư viện bổ trợ cho React Ant Design, moment, Cloudinary Làm quen với Meteor, vận dụng kiến thức áp dụng vào dự án training cơng ty tốt Và điều đặc biệt em cải thiện việc chủ động tìm kiếm thơng tin, tài liệu học tập internet Rút kinh nghiệm thân Trong trình làm việc học tập công ty, từ anh chị nhân viên cơng ty góp phần giúp em có số kinh nghiệm bổ ích làm hành trang cho cơng việc tương lai gần Bên cạnh đó, em khắc phục số lỗi thường gặp trình viết code Những điều em trân trọng biết ơn Định hướng công việc Công ty đào tạo cho em nhiều kiến thức định hướng chuyên ngành mà em xác định tương lai Qua đợt thực tập này, em tiếp tục củng cố thêm nhiều kiến thức chuyên sâu cho thân tạo hội trở thành thành viên công ty mà em thực tập Thầy Huỳnh Tuấn Anh Sinh viên Lương Kim Phượng ... ích khác Link website: https://cube.wellshade.com/ Thầy Huỳnh Tuấn Anh Sinh viên Lương Kim Phượng Chương 2: Nội dung thực tập Đợt thực tập với chủ đề ? ?Lập trình Ứng dụng web với Meteor? ?? nhằm mục... ĐẦU Website coi mảng lập trình phổ biến giới Hầu hết doanh nghiệp hay tổ chức cần cho website, tham gia vào lĩnh vực công việc chủ yếu bạn làm lập trình tạo lập website thơng qua cơng cụ lập trình. .. gian thực tập trình viết báo cáo thực tập Thầy giúp em định hướng hướng tạo động lực để em học tập dễ dàng Cuối cùng, em xin gửi lời cảm ơn đến quý công ty, nơi mà em vừa hoàn thành kế hoạch thực