Đề tài tạo webview với reactjs và mobx

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH
ĐẠI HỌC CÔNG NGHỆ THÔNG TIN
KHOA CÔNG NGHỆ PHẦN MỀM

THỰC TẬP TỐT NGHIỆP
ĐỀ TÀI: Tạo Webview với ReactJs và MobX

Công ty thực tập: Vitalify Asia Co., Ltd.
Lớp: SE501.N11
Sinh viên thực hiện: Nguyễn Yến Nhi – 19520205

TP. Hồ Chí Minh, ngày 20 tháng 12 năm 2022


Nguyễn Yến Nhi

Thực tập tốt nghiệp

NHẬN XÉT
(Của giảng viên)

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

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

1


Nguyễn Yến Nhi

Thực tập tốt nghiệp

MỤC LỤC
CHƯƠNG 1: GIỚI THIỆU CƠNG TY THỰC TẬP
I. Giới thiệu chung về cơng ty
II. Cơ cấu tổ chức
III. Tổng quan việc kinh doanh
 CHƯƠNG 2: NỘI DUNG THỰC TẬP
I. Công nghệ, giải pháp và quy trình áp dụng 
1. Giới thiệu về Git
2. Giới thiệu về VSCode
3. Giới thiệu về mơ hình làm việc Agile – Scrum
4. Tìm hiểu về RESTful API

5. Tìm hiểu về ReactJS
6. Vịng đời ReactJS
7. Tìm hiểu về SCSS, BEM naming convention
8. Tìm hiểu về Atomic Design
9. Tìm hiểu về quản lý state với MobX
10. Tìm hiểu về thư viện Axios

6
6
7
7
11
11
11
14
16
20
21
22
24
25
26
26

11. Tìm hiểu về Framework 7
26
II. Dự án Webview kết nối ứng dụng với công cụ vật lý thực tế để theo dõi chỉ số cơ
thể
27
1. Bối cảnh ra đời của dự án

27
2. Nhiệm vụ của sinh viên được giao
27
 CHƯƠNG 3: NHẬT KÝ THỰC TẬP

28

CHƯƠNG 4: KẾT QUẢ ĐẠT ĐƯỢC QUA ĐỢT THỰC TẬP
I. Kết quả thu được
II. Các điểm yếu của bản thân

30
30
31

III. Gợi ý cho chương trình học

31

IV. Cảm nhận về công ty

31

DANH MỤC TÀI LIỆU THAM KHẢO

32

2

Nguyễn Yến Nhi

Thực tập tốt nghiệp

LỜI NÓI ĐẦU
Ngày nay, ngành công nghiệp phát triển ứng dụng web là một bộ phận không thể
thiếu của ngành công nghiệp phần mềm. Với tốc độ phát triển vô cùng mạnh mẽ, ngành
phát triển ứng dụng web đã và đang là nhân tố kích thích sự phát triển của cơng nghệ
thơng tin thế giới, cả về phần cứng và phần mềm.
Cùng với xu thế phát triển của thế giới, Việt Nam cũng không phải ngoại lệ.
Ngành công nghiệp phát triển web non trẻ Việt Nam đã và đang phát triển mạnh mẽ, để
hòa nhập với những công ty hàng đầu về xây dựng nền tảng web trên thế giới. Bên cạnh
sự phát triển của web thì những ngành nghề được tiếp cận người dùng một cách nhanh
chóng như những gì ta có thể thấy là mạng xã hội hay những website bán hàng trực tuyến
cũng đang rất thịnh hành trên cả thế giới lẫn Việt Nam.
Sau ba năm học tập trên trường, do mong muốn có thêm kinh nghiệm thực tế,
cũng như muốn được tìm hiểu, bổ sung kiến thức trong một mơi trường chuyên nghiệp,
em có dự định là sẽ thực tập trong học kì. Vì vậy, em quyết định chọn Cơng Ty TNHH
Vitalify Asia - một môi trường lý tưởng, hiện đại, chuyên nghiệp - là nơi sẽ giúp em thực
hiện được dự định này.

3


Nguyễn Yến Nhi

Thực tập tốt nghiệp

LỜI CẢM ƠN
Em xin chân thành cảm ơn ban giám hiệu và quý thầy cô trường Đại học Công

nghệ Thông tin đã cung cấp và bồi dưỡng cho em những kiến thức cơ bản trong suốt 4
năm ngồi trên giảng đường đại học, để từ đó em có nền tảng áp dụng vào đợt thực tập
một cách hiệu quả nhất có thể.
Em xin gửi lời cảm ơn quý Công Ty TNHH Vitalify Asia đã tạo điều kiện cho em
thực tập tại công ty cũng như cung cấp, bổ sung cho em những kiến thức mà em cịn thiếu
sót. Q cơng ty đã hỗ trợ em rất nhiều trong suốt thời gian thực tập vừa qua, dạy em
những kỹ năng cần thiết, truyền đạt cho em những kinh nghiệm mà các anh chị đã trải
qua trong quá trình làm việc, trao đổi với khách hàng, tác phong và tinh thần trách nhiệm
trước công việc được giao, những suy nghĩ tích cực. Các anh chị cũng đã tạo cho em
nhiều điều kiện để ứng dụng những kiến thức đã học vào thực tế để xây dựng những dự
án thực tiễn đi từ lúc ban đầu, nâng cao trình độ, cũng như tốc độ lập trình và trí thức
thêm một bậc. Em xin chân thành cảm ơn.
Vì kiến thức bản thân còn hạn chế cũng như là lần đầu tiên được va chạm và tiếp
xúc với thực tế, áp dụng lý thuyết vào công việc nên bản thân cịn bỡ ngỡ và lúng túng,
khơng tránh khỏi những thiếu sót, mong q Thầy (Cơ) có thể đóng góp ý kiến để em có
thể hồn thiện hơn.
Em xin chân thành cảm ơn!

Nguyễn Yến Nhi
TP. Hồ Chí Minh, ngày 20 tháng 12 năm 2022

4


Nguyễn Yến Nhi

Thực tập tốt nghiệp

DANH MỤC CÁC CỤM TỪ VIẾT TẮT
TNHH

:

Trách nhiệm Hữu hạn

5


Nguyễn Yến Nhi

Thực tập tốt nghiệp

CHƯƠNG 1: GIỚI THIỆU CÔNG TY THỰC TẬP
I.
-

Giới thiệu chung về công ty
Tên đơn vị: CÔNG TY TNHH VITALIFY Á CHÂU (VITALIFY ASIA CO.,
LTD)
Lĩnh vực hoạt động: Xuất bản phần mềm
Địa chỉ: 224A-224B Điện Biên Phủ, Phường Võ Thị Sáu, Quận 3, Thành phố Hồ
Chí Minh, Việt Nam
Trang web: a/
Email:
Điện thoại:  +84 (028) 3932 6293
Thời gian làm việc: Thứ 2 đến thứ 6: 08h30 - 17h35
Vision: “Delivering Happiness Through the Internet”
Value: Providing Value to User

Hình 1.1: Logo Cơng ty TNHH Vitalify Asia

-

-

Vitalify Asia là một công ty phát triển ứng dụng web và di động. Công ty cung cấp
dịch vụ phát triển và cải tiến sản phẩm nhanh chóng trên cơ sở DevOps với nhóm
cam kết cung cấp giá trị cho người dùng; sẽ giải quyết mọi thứ, từ lập kế hoạch
đến triển khai dịch vụ nhanh chóng, cải tiến và tăng trưởng cho các doanh nghiệp
doanh nghiệp.
Kể từ khi thành lập vào năm 2008, Vitalify Asia đã tham gia phát triển phần mềm
tập trung vào thiết bị di động để đạt được tầm nhìn "Mang lại hạnh phúc thơng qua
Internet”. Với mục tiêu trở thành một nhóm chuyên nghiệp thực sự có thể cạnh
tranh trên phạm vi toàn cầu, mỗi kỹ sư/thành viên/PM đều mở rộng vai trò và
phạm vi trách nhiệm của cá nhân và cam kết cung cấp giá trị cho người dùng với
cấu trúc chia nhóm nhỏ ưu tú. Bây giờ, hơn 10 năm sau khi thành lập, Vitalify
Asia sắp thử thách một giai đoạn mới để nâng cao hơn nữa giá trị năng lực kỹ
6


Nguyễn Yến Nhi

Thực tập tốt nghiệp

thuật của họ tại Việt Nam. Công ty sẽ tạo ra nhiều sản phẩm "Made In Vietnam"
và bán chúng trên khắp thế giới. Để đạt được mục tiêu này, Vitalify Asia sẽ tiếp
tục nỗ lực cải tiến hàng ngày.
II.

Cơ cấu tổ chức

Vitalify Asia phát triển các ứng dụng web và di động để phù hợp với nhu cầu kinh
doanh của bạn. Nhóm đa quốc gia của cơng ty tại Thành phố Hồ Chí Minh, Việt Nam,
sẽ tham gia nhóm của khách hàng từ xa và cam kết mang lại giá trị cho người dùng
cuối cũng như phát triển dịch vụ của khách hàng để đảm bảo triển khai dịch vụ nhanh
chóng và những cải tiến tiếp theo.
Với kinh nghiệm phát triển hệ thống cho nhiều ngành công nghiệp sử dụng các
công nghệ mới nổi, Vitalify Asia chuyên về các hệ thống có khả năng di động và thời
gian thực. Cơng ty cũng có thể linh hoạt hỗ trợ trong giai đoạn lập kế hoạch, bàn giao
hoạt động và phát triển dịch vụ.
Vitalify Asia được chia ra thành nhiều lab, mỗi lab bao gồm nhiều nhóm dự án và
mỗi nhóm dự án sẽ được tổ chức theo mơ hình Agile Scrum.
Về một số ngun tắc trong công việc:
-

Mỗi sprint sẽ kéo dài từ 1-2 tuần tuỳ vào dự án.
Ngày bắt đầu của sprint sẽ là thứ 2.
Mỗi ngày developer sẽ gửi lại bản báo cáo công việc cho các BPM quản lý
trước 16h45
Sprint retrospective sẽ được tổ chức linh hoạt sau khi hoàn thành xong mỗi
phase
Internal weekly meeting sẽ gồm có
- Code review
- Sprint review
- Sprint retrospective
- Estimate cho spr

III. Tổng quan việc kinh doanh
Một số đặc điểm của Vitalify Asia:
- Sự phát triển của công ty tập trung vào sự phát triển của sản phẩm và cung

cấp giá trị cho người dùng của khách hàng. Với suy nghĩ này, đảm bảo chất
lượng và cải thiện hiệu suất ln được ưu tiên - từ phân tích kinh doanh đến
7


Nguyễn Yến Nhi

Thực tập tốt nghiệp

ra mắt sản phẩm thông qua xác định và triển khai yêu cầu. Ngoài ra, để tiếp
tục tăng trưởng sản phẩm sau khi phát hành, công ty sẽ giới thiệu một loạt
các biện pháp để tăng hiệu quả đồng thời đáp ứng nhanh chóng và linh hoạt
nhu cầu thị trường và phản hồi của người dùng.
Vitalify Asia chuyên về hiệu suất di động, thời gian thực và phát triển hệ thống di
động cho một số ngành:
- Chăm sóc sức khỏe (Telemedicine)
- Fintech
- VR/AR/MR, Metaverse
- Startup (from MVP)
- Mobile / Hyper-casual Games
Trong 13 năm qua, công ty có hơn 400 sản phẩm thành cơng. Mặc dù nhiều thành
tựu trong số này bị hạn chế bởi các thỏa thuận bảo mật, đây là một sản phẩm được
sự cho phép nhắc đến của khách hàng của công ty:
1. Hankyou Baizou Kun 反響倍増くん
Visit site: />
8


Nguyễn Yến Nhi

Thực tập tốt nghiệp

Hình 1.2. Hankyou Baizou Kun 反響倍増くん
2. Silly Walkers
Visit site: />Và một số game In house khác:
/>
9


Nguyễn Yến Nhi

Thực tập tốt nghiệp

Hình 1.3. Silly Walkers
3. MAL Smart HRM

Hình 1.4. MAL Smart HRM - Ứng dụng check in chấm công
4. MAL Face Emotion
Visit site: a/en/index.html

10


Nguyễn Yến Nhi

Thực tập tốt nghiệp

Hình 1.5. MAL Face Emotion

11

Nguyễn Yến Nhi

Thực tập tốt nghiệp

  CHƯƠNG 2: NỘI DUNG THỰC TẬP

I.

Cơng nghệ, giải pháp và quy trình áp dụng 

1. Giới thiệu về Git

Hình 2.1: Mơ hình cơng cụ Git.
Git là tên gọi của một Hệ thống quản lý phiên bản phân tán (Distributed Version
Control System – DVCS) là một trong những hệ thống quản lý phiên bản phân tán phổ
biến nhất hiện nay. DVCS nghĩa là hệ thống giúp mỗi máy tính có thể lưu trữ nhiều phiên
bản khác nhau của một mã nguồn được nhân bản (clone) từ một kho chứa mã nguồn
(repository), mỗi thay đổi vào mã nguồn trên máy tính sẽ có thể ủy thác (commit) rồi
đưa lên máy chủ nơi đặt kho chứa chính. Và một máy tính khác (nếu họ có quyền truy
cập) cũng có thể clone lại mã nguồn từ kho chứa hoặc clone lại một tập hợp các thay đổi
mới nhất trên máy tính kia. Trong Git, thư mục làm việc trên máy tính gọi là Working
Tree.

12


Nguyễn Yến Nhi

Thực tập tốt nghiệp

Hình 2.2: Sơ đồ liên hệ giữa các máy tính.
Ngồi ra, có một cách hiểu khác về Git đơn giản hơn đó là nó sẽ giúp bạn lưu lại
các phiên bản của những lần thay đổi vào mã nguồn và có thể dễ dàng khơi phục lại dễ
dàng mà không cần copy lại mã nguồn rồi cất vào đâu đó. Và một người khác có thể xem
các thay đổi của bạn ở từng phiên bản,  họ cũng có thể đối chiếu các thay đổi của bạn rồi
13


Nguyễn Yến Nhi

Thực tập tốt nghiệp

gộp phiên bản của bạn vào phiên bản của họ. Cuối cùng là tất cả có thể đưa các thay đổi
vào mã nguồn của mình lên một kho chứa mã nguồn.
Cơ chế lưu trữ phiên bản của Git là nó sẽ tạo ra một “ảnh chụp” (snapshot) trên
mỗi tập tin và thư mục sau khi commit, từ đó nó có thể cho phép bạn tái sử dụng lại một
ảnh chụp nào đó mà bạn có thể hiểu đó là một phiên bản. Đây cũng chính là lợi thế của
Git so với các DVCS khác khi nó khơng “lưu cứng” dữ liệu mà sẽ lưu với dạng snapshot.

Hình 2.3: Sơ đồ cơ cấu của Git.
-

Master: là nhánh chính, run trên production.

-

Dev: là nhánh replica cho nhánh master cộng với các nhánh feature đang được
phát triển.

-

Feature: được tách từ nhánh dev, chức năng sau khi được phát triển sẽ được merge
vào dev trước khi merge vào master.

14


Nguyễn Yến Nhi

Thực tập tốt nghiệp

Hình 2.4: Git branching. 
2. Giới thiệu về VSCode

Hình 2.5: Chương trình VSCode
Visual Studio Code là sản phẩm của Microsoft, ra mắt vào tháng 4 năm 2015 ở hội nghị
Build. Đặc điểm nổi bật là đơn giản, gọn nhẹ, dễ dàng cài đặt. 
15


Nguyễn Yến Nhi

Thực tập tốt nghiệp

Visual Studio Code có thể cài đặt được trên cả Windows, Linux và Mac OS và hỗ trợ
nhiều ngơn ngữ khác nhau.
Hình ảnh giao diện ban đầu của VSCode như sau:

Hình 2.6: Giao diện ban đầu của VSCode.
Nhìn sang thanh sidebar ta thấy 4 biểu tượng, đầu tiên là hai tờ giấy xếp chồng lên
nhau, đây là cây thư mục chứ những file mà chúng ta đang làm việc. Hình chiếc kính lúp
hỗ trợ chức năng tìm kiếm. Một điểm đặc biệt là Visual Studio Code được tính hợp ln
git, rất tiện cho việc quản lý code của chúng ta. 
Biểu tượng thứ 4 là diệt con bọ, chính là chức năng hỗ trợ chúng ta fix bug. Hình
vng cuối cùng là nơi cho phép chúng ta cài thêm các phần extensions mà Microsoft và
cộng đồng viết thêm cho chúng ta, hỗ trợ quá trình code.

16


Nguyễn Yến Nhi

Thực tập tốt nghiệp

3. Giới thiệu về mô hình làm việc Agile – Scrum
●

Tại sao cần Agile?

Sự khác nhau giữa phương pháp làm việc truyền thống-Waterfall và Agile có thể
tổng kết trong 2 từ: cứng nhắc và linh hoạt. Trong khi Waterfall là 1 process khá cứng
nhắc và ngun tắc, thì Agile lại rất linh hoạt và khơng ngừng thay đổi sao cho phù hợp
với thời đại và ý kiến của khách hàng . Chi tiết hơn về sự khác nhau như sau:
-

-

Waterfall là quy trình có cấu trúc, bạn không thể bắt đầu công đoạn mới cho

đến khi cơng đoạn trước đấy được hồn thành. Agile là quy trình linh hoạt, cho
phép bạn chạy dự án theo cách mà bạn muốn. Waterfall là tuần tự, và Agile thì
khơng ép buộc vào 1 quy trình tuần tự nào.
Các dự án theo quy trình Waterfall thường cần define cụ thể yêu cầu của dự án,
trong khi các yêu cầu trong các dự án Agile có thể thay đổi và phát triển.
Trong các dự án Waterfall, bạn không thể thay đổi những thứ bạn đã làm trong
những công đoạn trước, tuy nhiên Agile rất phù hợp và có thể đáp ứng được các
thay đổi.

Hình 2.7: Mơ hình Agile và Waterfall.
Một cách tổng quát, khi một sản phẩm được xây dựng theo mơ hình Waterfall, thì các
cơng việc trong dự án được xác định theo nguyên tắc lúc ban đầu, và không tiếp thu được
17


Nguyễn Yến Nhi

Thực tập tốt nghiệp

ý kiến của người sử dụng trong quá trình hình thành sản phẩm. Việc giành quá nhiều thời
gian cho một sản phẩm mà không biết được rằng mức độ khả thi cũng như những điều
mà người sử dụng quan tâm sẽ gây ảnh hưởng rất nhiều đến chất lượng sản phẩm.
Trong khi đó, Agile giúp các nhà phát triển có thể nhận dạng, điều chỉnh các vấn đề và
khiếm khuyết một cách nhanh chóng. Các điểm mạnh của Agile là:
-

-

-

-

-

Thực hiện thay đổi dễ dàng: Bởi vì dự án được chia thành các phần nhỏ,
riêng biệt, không phụ thuộc lẫn nhau, nên những thay đổi được thực hiện rất
dễ dàng, ở bất kỳ giai đoạn nào của dự án.
Không cần phải nắm mọi thông tin ngay từ đầu: Phù hợp với những dự án
chưa xác định được mục tiêu cuối cùng rõ ràng, vì việc này không quá cần
thiết trong giai đoạn đầu. 
Bàn giao nhanh hơn: Việc chia nhỏ dự án cho phép đội ngũ có thể tiến hành
kiểm tra theo từng phần, xác định và sửa chữa vấn đề nhanh hơn, nhờ đó việc
bàn giao công việc sẽ nhất quán và thành công hơn.
Chú ý đến phản hồi của khách hàng và người dùng: Cả khách hàng và
người dùng cuối đều có cơ hội để đóng góp các ý kiến và phản hồi, từ đó họ sẽ
có ảnh hưởng một cách mạnh mẽ và tích cực tới sản phẩm cuối cùng.
Cải tiến liên tục: Agile khuyến khích thành viên trong đội ngũ làm việc và
khách hàng cung cấp phản hồi của mình, khi đó các giai đoạn khác nhau của
sản phẩm cuối có thể được kiểm tra và cải thiện lại nhiều lần nếu cần.

Trong ngành công nghiệp phần mềm, phương thức sản xuất phần mềm có một vai trị
vơ cùng quan trọng, nó quyết định cấu trúc tổ chức, qui trình phát triển, khả năng thành
công của các dự án. Trong những năm gần đây Agile- Scrum nổi lên và thay thế mô hình
thác nước (Waterfall) truyền thống như một phương thức tổ chức sản xuất ưu việt được
nhiều công ty phần mềm áp dụng và thành công. Quản lý dự án theo nguyên tắc Agile nổi
lên như một sự thay thế tối ưu cho bất kì dự án nào.

18

Nguyễn Yến Nhi

Thực tập tốt nghiệp

Hình 2.8: Quy trình Agile.

●

Định nghĩa mơ hình Agile.

Khái niệm Agile (viết tắt của Agile Software Development) có nghĩa là phương thức
phát triển phần mềm linh hoạt, được ứng dụng trong quy trình phát triển phần mềm với
mục tiêu là đưa sản phẩm đến tay người dùng càng nhanh càng tốt. Nguyên tắc phát
triển mô hình là phân đoạn lặp (iterative) và tăng trưởng (incremental), theo đó nhu
cầu và giải pháp tiến hóa thơng qua sự hợp tác giữa các nhóm tự quản và liên chức năng.
Rất nhiều nơi định nghĩa Agile như một phương pháp. Thực chất, Agile giống như
một phương pháp luận, một triết lý dựa trên hơn nguyên tắc phân đoạn vòng lặp
(iterative) và tăng trưởng (incremental). 
Ngày nay, triết lí Agile đã vượt xa khỏi khu vực truyền thống của mình là phát triển
phần mềm để đóng góp sự thay đổi trong cách thức làm việc, quản lí, sản xuất ở các
ngành khác như sản xuất, dịch vụ, sales, marketing, giáo dục... và trở thành một phương
thức quản lý dự án phổ biến nhất hiện nay với nhiều đại diện được gọi là các phương
pháp “họ Agile”.

19