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

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TINKHOA 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

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

LỜI MỞ ĐẦU

Website có thể được coi là mảng lập trình phổ biến nhất trên thế giới hiện nay Hầu hết các doanh nghiệp hay tổ chức đều cần cho mình một website, tham gia vào lĩnh vực này công việc chủ yếu của bạn sẽ làm lập trình và tạo lập ra website thông qua các công cụ lập trình như Python, PHP, Java, Linux,… cùng vô số các công cụ phổ biến khác

Sau khoảng thời gian trau dồi các kiến thức và kỹ năng trên ghế nhà trường, với mong muốn được thử sức với môi trường doanh nghiệp để có thêm những kinh nghiệm từ dự án thực

tế và tiếp xúc với văn hóa làm việc trong lĩnh vực công nghệ, em đã quyết định tìm kiếm một nơi phù hợp để thực tập Sau khoảng thời gian cân nhắc cũng như trao đổi cùng đại diện của doanh nghiệp, em đã tham gia vào đội ngũ nhân sự của Công ty Cổ phần Zigvy – một doanh nghiệp trẻ, đầy năng động và chuyên nghiệp, luôn tạo điều kiện cho các bạn trẻ như em có cơ hội học tập và thử sức

LỜI CẢM ƠN

Trong quá trình học tập, trau dồi kiến thức tại khoa Công nghệ Phần mềm, trường Đại học Công nghệ Thông tin, các thầy cô trong khoa nói chung và các thầy cô trực tiếp giảng dạy em nói riêng, đã tận tình chỉ dạy, truyền đạt những kiến thức quý báu cả về chuyên ngành lẫn các kiến thức xã hội Nhờ đó mà

em được học tập, tiếp thu các kiến thức về kỹ thuật, công nghệ cơ bản phù hợp với nhu cầu xã hội Đồng thời, thầy cô đã giúp em trau dồi được kỹ năng, nền tảng kiến thức cơ bản làm hành trang cần

thiết trong quá trình thực hiện kế hoạch đào tạo của trường, thể hiện qua đợt Thực tập doanh nghiệp lần này

Em xin chân thành cảm ơn các quý thầy cô trong khoa Công nghệ Phần mềm luôn nhiệt tình truyền đạt các kiến thức, kinh nghiệm nghề nghiệp, truyền cảm hứng để em được tiếp thu một cách dễ dàng nhất Đặ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 và quá trình viết báo cáo thực tập Thầy đã giúp em định hướng được hướng đi của mình và tạo động lực để em được học tập dễ dàng nhất

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 tập – Công ty Cổ phần Zigvy cùng các anh chị nhân viên trong công ty đã hướng dẫn, chỉ bảo em rất nhiệt tình Ở đây, em học hỏi được rất nhiều kinh nghiệm thực tiễn khi được trải nghiệm một phần của 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 trong suốt quá trình thực tập vừa rồi Bên cạnh đó, em cũng xin gửi lời cảm ơn đến gia đình và bạn

bè, những người luôn bên cạnh cổ vũ để em hoàn thành tốt lần thực tập này

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

NHẬN XÉT CỦA KHOA

MỤC LỤC

MỤC LỤC 5

Chương 1: Giới thiêu công ty thực tập 6

1 Giới thiệu Công ty Cổ phần Zigvy 6

2 Sản phẩm của công ty 6

Chương 2: Nội dung thực tập 8

1 Tìm hiểu công ty và các kỹ năng cơ bản trong công ty 8

2 Nghiên cứu kỹ thuật 8

3 Thực hiện project 10

4 Lịch làm việc 10

Chương 3: Chi tiết về project 12

1 Tổng quan về project 12

2 Thực hiện 15

3 Kế hoạch 15

TÀI LIỆU THAM KHẢO 16

TỔNG KẾT 17

1 Kiến thức được tiếp thu 17

2 Rút kinh nghiệm bản thân 17

3 Định hướng công việc 17

Chương 1: Giới thiêu công ty thực tập

1 Giới thiệu Công ty Cổ phần Zigvy

- ZigVy Corporation là công ty phát triển phần mềm chung giữa Hoa Kỳ và Việt Nam, được tọa lạc tại quận Bình Thạnh, thành phố Hồ Chí Minh Được thành lập vào năm 2016 với 3 thành viên đồng sáng lập là Nguyễn Lê Trung Hậu (CEO & Founder), Gilman và Nguyễn Phương (Co-founder) Với trên 7 năm kinh nghiệm về phát triển Website và ứng dụng di động, các thành viên đồng sáng lập dần mở rộng và phát triển công ty cho đến ngày hôm nay

- Công ty phát triển về lĩnh vực thiết kế Website và ứng dụng di động với trình độ chuyên môn về Javascript, Node.js, Meteor.js, React.js, Angular.js, thiết kế UI/UX Trong suốt quá trình hoạt động, công ty đã tiếp nhận các dự án lớn nhỏ, quy mô trong và ngoài nước và đã hoàn thành hiệu quả các đơn đặt hàng Hầu hết các dự án của công ty đến từ Hoa Kỳ và châu Âu với nhiều loại hình kinh doanh khác nhau

- Với sự phát triển nhanh chóng, kể từ khi thành lập đến nay công ty đã mở rộng quy mô từ 11 đến 50 lập trình viên, nắm vững các chuyên môn về front-end, back-end hoặc fullstack

Website, truy cập trang web công ty với link https://zigvy.com/

Email, địa chỉ mail info@zigvy.com

Số điện thoại, +84 93301 3306.

2 Sản phẩm của công ty

- Website thuộc lĩnh vực y tế của AMILI - một tổ chức chăm sóc sức khỏe có trụ sở tại Singapore nghiên cứu về hệ vi sinh vật dựa trên nền tảng khoa học giải quyết các nhu cầu quan trọng và chưa được đáp ứng trong chăm sóc sức khỏe với tiềm năng tác động tích cực đến hàng triệu cuộc sống, đặc biệt là những người bị bệnh đường ruột

Link website: https://amili.asia/

- Website cho HRFORCE – doanh nghiệp có trụ sở tại Australia chuyên cung cấp các dịch

vụ về tổ chức, chuyên môn và kỹ thuật phát sinh trong khuôn khổ của một dự án SAP ERP HCM

Link website: https://www.hrforce.at/en

- Chatchilla - Hệ thống nâng cao và hợp lý hóa các tương tác với khách hàng thông qua nhiều kênh giao tiếp và vô số cấu hình phù hợp với nhu cầu kinh doanh của bạn

Link website: https://chatchilladev.com/

- Cube - Hệ thống tương tác và quản lý tài nguyên, nhân lực của doanh nghiệp tích hợp email, doc và các tiện ích khác

Link website: https://cube.wellshade.com/

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 được đào tạo chuyên sâu về JavaScript, React Js và Metor, đồng thời rèn luyện những kỹ năng mềm như làm việc nhóm, thuyết trình, giao tiếp Tại công ty, sinh viên có cơ hội được học tập, khám phá và làm việc trong một môi trường phát triển Website chuyên nghiệp

1 Tìm hiểu công ty và các kỹ năng cơ bản trong công ty

Thời gian: 1 ngày

Nội dung: Giới thiệu về công ty, cách tổ chức của công ty

 Được nghe người phụ trách giới thiệu về công ty, quá trình thành lập và 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ủa công ty

 Ngoài ra, thực tập sinh còn được giới thiệu về cách thức làm việc trong công ty như thời gian đi làm, các quy định cần phải tuân thủ, cách sử dụng email và một

số phần mềm nội bộ trong công việc…

Kết quả: Hiểu thêm về công ty Zigvy, quá trình thành lập và phát triển Có thêm các kỹ

năng về việc sử dụng các ứ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 hơn

2 Nghiên cứu kỹ thuật

2.1 Tìm hiểu chuyên sâu về React JS

Thời gian: 3 tuần

Nội dung: Tìm hiểu và làm bài tập của bài Training về JavaScript nói chung và React

JS nói riêng:

• Training 1 - Introduction: React

• Training 2 - Basic React: React State, Props and R

• Training 3 - Basic React: React Life Cycle

• Training 4 - Intermediate React: Calling API with Axios, Fetch API

• Training 5 - Advanced React: Redux and React Redux

• Training 6 - Advanced React: Redux Middleware

Kết quả: Hoàn thành 6 bài traning và nắm được các kiến thức về JavaScipt, React JS,

Redux và làm việc với Node JS cơ bản

2.2 Tìm hiểu về Meteor

Thời gian: 3 tuần

Nội dung:

Meteor là gì?

Meteor là một Javacript framework mã nguồn mở, được xây dựng trên môi trường Node.js cho phép tạo ra các Web Application với real-time Đồng thời đảm bảo việc đồng bộ thông tin giữa database của ứng dụng và UI, xây dựng web ở cả 2 side, server-side và client-side Bên cạnh đó, Meteor còn cho phép người dùng có thể xây dựng apps cross-platform code, build trên các nền tảng mobile như iOS, android và thậm chí là cả Desktop Framework này cung cấp “gần như” toàn bộ những thứ cần thiết để làm một Web Application/ Mobile:

• Front-end sử dụng framework Blaze để bind dữ liệu

• Back-end sử dụng NodeJS và Express để làm server, MongoDB là database chính

• Một hệ thống thư viện/module tương tự npm, Maven, Nuget

• Một số tool để build/deploy web site và mobile app

Tại sao 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 đã và đang được các developer ưa chuộng Thật vậy, framework có nhiều ưu điểm nổi bật và được ưa chuộng:

• Việc cài đặt đơn giản, không yêu cầu các ứng dụng đặc biệt Nhanh chóng tạo ra sản phẩm

• Chỉ cần có kiến thức về HTML, CSS và Javascript là có thể sử dụng

• Mọi thao tác tới database đều thông qua các API của Meteor, viết bằng Javascript

• Xây dựng được các ứng dụng đa nền tảng như web, moible (android)

• Có nguồn các gói thư viện phong phú, bản thân meteor đã có 1 repository để chứa các package của Meteor

• Sử dụng NoSQL để lưu trữ và trao đổi dữ liệu giữa client và server (2 database, 1

ở server và 1 ở client sử dụng MiniMongo) Việc sử dụng 2 cơ sở dữ liệu ở 2 phía giúp cho client có 1 trải nghiệm tốt hơn khi dữ liệu tương tác được lưu ngay tại client

và sau đó sẽ cập nhật phía server và các client khác

• Deploy rất nhanh do Meteor có package hỗ trợ, chỉ cần gọi đúng lệnh là sử dụng được

• Tài liệu học tập, nghiên cứu phong phú đa dạng

Mặc dù framework này có nhiều ưu điểm khiến các developer lựa chọn sử dụng nhưng còn tồn tại một số hạn chế:

• Module nhiều nhưng documents không rõ ràng

• Chỉ mới hỗ trợ MongoDB làm database engine

Tóm lại, Meteor framework xây dựng để phục vụ cho các ứng dụng Single-Page, với việc kết hợp các front-end framework có thể xây dựng nhanh các ứng dụng Single-Page Việc sử dụng giao thức DDP và Websocket, Meteor có thể xây dựng được các ứng dụng Real-time phục vụ cho việc cập nhật dữ liệu liên tục và các ứng dụng đòi hỏi push notifications cho người dùng

Cài đặt và sử dụng React trong Meteor như thế nào?

Để cài cặt framework Meteor, trước tiên phải cài đặt Chocolatey, sau khi cài đặt xong tiến hành chạy câu lệnh bên dưới với tư cách người quản trị - Administrator

choco install meteor

Lúc này Meteor sẽ được cài đặt Một số thông tin cần biết khi cài đặt framework trên:

• Meteor hỗ trợ cài đặt đối với hệ điều hành Windows 7/ Windows Server 2008 R2 trở lên

• Việc cài đặt Chocolatey là bắt buộc (tham khảo các bước cài đặt tại https://chocolatey.org/install)

• Việc phát triển iOS không được hỗ trợ

• Vô hiệu hóa phần mềm antivirus sẽ cải thiện hiệu suất

Để tạo một project Meteor, gõ lệnh:

meteor create <project-name>

Sau khi lệnh tạo chạy xong, tiến hành cài đặt React bên trong Meteor, sử dụng thư viện npm gõ lệnh:

meteor npm install save react react-dom

Đợi thư viện được cài đặt thành công, lúc này chỉ cần dùng lệnh để import react vào project là có thể bắt đầu một dự án React bên trong Meteor

3 Thực hiện project

Sau 6 tuần được training và thực hành, thực tập sinh đã nắm được những kiến về JavaScript, React Js và Meteor Trong 4 tuần tiếp theo, trainer đã hướng dẫn thực tập sinh áp dụng những kiến thức đã học để tham gia vào project thực tế

Chi tiết đồ án sẽ được nói ở phần sau

4 Lịch làm việc

Tuần Công việc Người hướng dẫn Mức độ Nhận xét của

hoàn thành

người hướng dẫn

1

- Tìm hiểu về công

ty, cách tổ chức của công ty

- Làm quen với các công cụ làm việc trong công ty

Anh Bùi Thanh Vân

2

- Tìm hiểu về React

Js và thực hiện 6 bài training ứng dụng

Anh Bùi Thanh Vân

3

- Tìm hiểu về Meteor

và thực hiện Todo App fullstack

Anh Bùi Thanh Vân

5

Giai đoạn thực hiện Project:

- Set up project Cube trên môi trường Dev

- Thực hiện chức năng mới cho project

- Deploy lên product

Anh Bùi Thanh Vân

Chương 3: Chi tiết về project

1 Tổng quan về project

1.1 Giới thiệu

Cube là hệ thống quản lý tài nguyên của 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 và dịch vụ được quản lý có trụ sở chính ở khu vực Raleigh, NC

Hệ thống web application sử dụng công nghệ chính là Meteor viết trên ngôn ngữ JavaScript

để xây dựng cả front end và back end, ngoài ra ứng dụng còn tích hợp thêm Elastic search, Firebase và một số thư viện, module khác Một số chức năng chính của ứng dụng:

• Quản lý dữ liệu thông tin tài nguyên, khách hàng, đối tác, nhân viên

• Cho phép các team nhân sự làm việc với nhau và làm việc với khách hàng thông qua các project, ticket

• Tích hợp hệ thống email đồng bộ hóa dữ liệu từ outlook

• Tích hợp hê thống doc studio cho phép các thao tác văn bản trên tài liệu tương tự như google doc

1.2 Danh sách các trang

- Trang Workspace với detail ticket

- Trang calendar

- Trang Project

- Trang Email

- Trang Cài đặt

2 Thực hiện

3 thành viên của 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

3 Kế hoạch

Vấn dề được giao giải quyết: Hệ thống data lớn với cách xử lý React Select hiện tại gây hiện

tượng giật lag cho người dung Cần tạo AdvancedSelect mới bằng việc custom React Select và áp dụng cho tất cả các pub-sub của 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 mới bằng cách sử dụng thành phần chức năng

 Tất cả các props sẽ giống nhau với Custom Select và hiển thị Select khi trả về

 Thêm searchValue & setSearchValue bằng useState

 Sửa đổi CustomSelect cho phép đưa hai props ở trên truy cập vào thành phần React-select mới

 Tạo CustomAdvanceSelect theo liên kết giao diện CustomAdvancedSelect

 Sử dụng useTracker trên CustomAdvancedSelect và gọi đến publication chính xác tùy thuộc vào entity value

 Chuẩn bị các params chính xác phụ thuộc vào params props params & searchValue & setSearchValue trên useState

 Thêm input type mới trong thành phần InputField "AdvanceSelect"

 Áp dụng Advanced Select mới cho toàn bộ 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/

TỔNG KẾT

1 Kiến thức được tiếp thu

Nhờ sự đào tạo nhiệt tình, chuyên nghiệp, đúng trọng tâm tại công ty mà em đã học được rất nhiều điều,

mở mang kiến nhiều kiến thức chuyên sâu về React cũng như các thư viện bổ trợ cho React như Ant Design, moment, Cloudinary Làm quen với Meteor, vận dụng những kiến thức đó áp dụng vào dự án training của công ty khá tốt Và điều đặc biệt là em cải thiện hơn trong việc chủ động tìm kiếm thông tin, tài liệu học tập trên internet hơn

2 Rút kinh nghiệm bản thân

Trong quá trình làm việc và học tập tại công ty, từ những anh chị nhân viên của công ty góp phần giúp

em có được một số kinh nghiệm bổ ích làm hành trang cho công việc trong tương lai gần Bên cạnh đó,

em cũng khắc phục một số lỗi thường gặp trong quá trình viết code Những điều này em rất trân trọng

và biết ơn

3 Định hướng công việc

Công ty đã đào tạo cho em rất nhiều kiến thức và định hướng đúng chuyên ngành mà em xác định đi trong tương lai Qua đợt thực tập này, em sẽ tiếp tục củng cố thêm nhiều kiến thức chuyên sâu cho bản thân và tạo cơ hội trở thành một thành viên tại công ty mà em đã thực tập