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


2

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.

Thầy Huỳnh Tuấn Anh

Sinh viên Lương Kim Phượng


3

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 ln 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 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 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 q 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

Thầy Huỳnh Tuấn Anh

Sinh viên Lương Kim Phượng


4

NHẬN XÉT CỦA KHOA

..........................................................................................................................................................
..........................................................................................................................................................
..........................................................................................................................................................
..........................................................................................................................................................
..........................................................................................................................................................
..........................................................................................................................................................
..........................................................................................................................................................
..........................................................................................................................................................
..........................................................................................................................................................
..........................................................................................................................................................
..........................................................................................................................................................
..........................................................................................................................................................
..........................................................................................................................................................

..........................................................................................................................................................
..........................................................................................................................................................
..........................................................................................................................................................
..........................................................................................................................................................
..........................................................................................................................................................

Thầy Huỳnh Tuấn Anh

Sinh viên Lương Kim Phượng


5

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

Thầy Huỳnh Tuấn Anh

Sinh viên Lương Kim Phượng


6

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 độ chun 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à ngồi nước và đã hồ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 chun mơn về front-end, back-end hoặc fullstack.

Website, truy cập trang web công ty với link .
Email, địa chỉ mail .
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: a/

Thầy Huỳnh Tuấn Anh

Sinh viên Lương Kim Phượng


7

-

-

-


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: />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: />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: />
Thầy Huỳnh Tuấn Anh

Sinh viên Lương Kim Phượng


8

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 chun
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, q 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.
 Ngồ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, q 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

Thầy Huỳnh Tuấn Anh

Sinh viên Lương Kim Phượng


9

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.


Thầy Huỳnh Tuấn Anh

Sinh viên Lương Kim Phượng


10

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 SinglePage. 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
.
• 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
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

Thầy Huỳnh Tuấn Anh

Công việc

Người hướng dẫn

Mức độ

Nhận xét của

Sinh viên Lương Kim Phượng


11

hồn

thành
-

1

-

người hướng dẫn

Tìm hiểu về cơng Anh Bùi Thanh Vân
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.

Tìm hiểu về React Anh Bùi Thanh Vân
Js và thực hiện 6 bài
training ứng dụng
- Tìm hiểu về Meteor Anh Bùi Thanh Vân
và thực hiện Todo
App fullstack
Giai đoạn thực hiện Anh Bùi Thanh Vâ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
-

2

3

5

Thầy Huỳnh Tuấn Anh

Sinh viên Lương Kim Phượng


12

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 ngun, 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

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

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

Thầy Huỳnh Tuấn Anh

Sinh viên Lương Kim Phượng


16

 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
/>React Select
/>MongoDB
/>
Thầy Huỳnh Tuấn Anh

Sinh viên Lương Kim Phượng

17

TỔNG KẾT
1. Kiến thức được tiếp thu
Nhờ sự đào tạo nhiệt tình, chun 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.

Thầy Huỳnh Tuấn Anh

Sinh viên Lương Kim Phượng