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

REACTJS, CÁC CÔNG CỤ KIỂM THỬ VÀ
QUẢN LÝ MONO REPO

Công ty thực tập: TNHH Công nghệ và Giải pháp Citynow
Người phụ trách: Trương Tấn Thuận
Thực tập sinh: Huỳnh Thị Kim Thảo

Trương Tấn Thuận

Huỳnh Thị Kim Thảo


2

TP. Hồ Chí Minh, tháng 12 năm 2021

Trương Tấn Thuận

Huỳnh Thị Kim Thảo


3

LỜI MỞ ĐẦU

Ngày nay, công nghệ 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ẽ, công nghệ Web đang được sử dụng rất nhiều và
được phổ biến rộng rãi.
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ệ. Công nghệ
Web đang là sản phẩm chính của hầu hết các cơng ty. Đặc biệt với sự ra đời của React đã đưa
công nghệ Web phát triển thêm tầm cao mới.
Công nghệ Web hiện nay vẫn đang được phát triển mạnh và đầu tư nhiều trong phần mềm.
Với sự hỗ trợ đa nền tảng, dường như Web đang dần thay thế các phần mềm desktop vì những
lợi ích mà nó đem lại. Vì lý do này, em quyết định chọn lập trình Web làm định hướng cho việc
học tập của mình.
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 tham gia làm web trong một mơi trường chun nghiệp, em có dự định là sẽ thực đi
thực tập. Vì vậy, em quyết định chọn Citynow - 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.

Trương Tấn Thuận

Huỳnh Thị Kim Thảo


4

LỜI CẢM ƠN

Em xin trân trọng gửi lời cảm ơn Công ty TNHH Công nghệ và Giải pháp Citynow đã tạo
điều kiện cho em có cơ hội được thực tập tại công ty.
Chỉ trong một thời gian ngắn, nhưng nhờ sự chỉ dẫn nhiệt tình của anh hướng dẫn, em đã
tiếp thu được những kiến thức quan trọng về ReactJS, NextJS với Javascript và Typescirpt, các
công cụ để xây dựng Mono Repo như Bazel, Nx Workspace, Lerna, Yarn Workspace, các công

cụ kiểm thử như Cypress, . Em xin chân thành cảm ơn anh Trương Tấn Thuận đã bỏ ra nhiều thời
gian, cơng sức để hướng dẫn em hồn thành đợt thực tập này. Đồng thời em cũng cảm ơn anh
Song Văn Cẩm cũng đã giúp đỡ em rất nhiều trong việc tìm hiểu những cơng nghệ mới.
Em cũng xin cảm ơn thầy cô trong khoa Công nghệ Phần mềm đã nhiệt tình hỗ trợ, tạo
điều kiện cho em làm bài báo cáo này.
Huỳnh Thị Kim Thảo
TP.Hồ Chí Minh, ngày 23 tháng 12 năm 2021

Trương Tấn Thuận

Huỳnh Thị Kim Thảo


5

NHẬN XÉT CỦA KHOA

Trương Tấn Thuận

Huỳnh Thị Kim Thảo


6

MỤC LỤC

LỜI MỞ ĐẦU

3


LỜI CẢM ƠN

4

NHẬN XÉT CỦA KHOA

5

MỤC LỤC

6

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

7

1. Giới thiệu Công ty TNHH Công nghệ và Giải pháp Citynow

7

2. Một số sản phẩm công nghệ của công ty

8

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

9

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


9

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

9

2.1 Các cơng cụ làm việc

9

2.2 Tìm hiểu ngơn ngữ ReactJS và Javascript, Storybook và Atomic design

10

2.3 Lập trình web clone – Zing MP3 với ReactJS và Javascript

10

2.4 Tìm hiểu cơng cụ quản lý Mono repo - Bazel và Nx workspace

11

2.5

Tìm hiểu về NextJS, typescript kết hợp công cụ kiểm thử Cypress

11

3. Thực hiện project


12

4. Lịch làm việc

12

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

15

1. Giới thiệu về dự án

15

2. Thực hiện

15

3. Các công việc đã làm trong dự án:

15

4. Kết quả đạt được:

15

TÀI LIỆU THAM KHẢO

16


TỔNG KẾT

17

Trương Tấn Thuận

Huỳnh Thị Kim Thảo


7

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

1. Giới thiệu Công ty TNHH Công nghệ và Giải pháp Citynow
Công ty TNHH Citynow được thành lập bởi CEO Phan Tuấn Tài và đi vào hoạt động từ
tháng 07/2016. Anh là cựu sinh viên Khoa Công Nghệ Thông Tin thuộc Trường ĐH Khoa
Học Tự Nhiên, hơn 8 năm du học và 4 năm làm việc tại Nhật bản, từng làm việc trong
những cơng ty game hàng đầu ở Nhật, có rất nhiều kinh nghiệm làm việc vận hành platform
game, phát triển game, dịch vụ web, mobile application.
Với nền tảng kinh nghiệm đã có và niềm tin của người Nhật anh quyết định thành lập
Cơng ty TNHH Citynow tại Tp.Hồ Chí Minh, Việt Nam và Công ty Cổ phần Citynow Asia
tại Tp.Tokyo, Nhật Bản. Cùng với tâm huyết giảm khoảng cách nền Công Nghệ Thông
Tin giữa Việt Nam với các nước trên thế giới đồng thời tạo ra nhiều cơ hội học tập và làm
việc cho các bạn trẻ ở Việt Nam.

Trương Tấn Thuận

Huỳnh Thị Kim Thảo



8

2. Một số sản phẩm công nghệ của công ty
-

HRSol : là hệ thống hỗ trợ việc đăng ký, quản lý ca làm việc, chấm công và quản
lý giờ công, hỗ trợ giải quyết một số thủ tục công việc đơn giản như cập nhật
chỉnh sửa giờ công, xin nghỉ phép,...

-

Rocket.Chat: Phần mềm trao đổi thông tin, giải quyết công việc

Trương Tấn Thuận

Huỳnh Thị Kim Thảo


9

Chương 2: Nội dung thực tập
Đợt thực tập với chủ đề “Các công nghệ Front-end Web, các công cụ kiểm thử và quản lý
Mono Repo” nhằm mục đích giúp sinh viên thực tập được đào tạo về lập trình web bằng ReactJS,
NextJS với Javascript và Typescript, cùng với đó tìm hiểu được các công cụ kiểm thử như
Cypress, và công cụ quản lý Mono Repo như Bazel, Lerna, Nx workspace, Yarn workspace đồ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 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, q trình thành lập cơng ty, các cơng ty con và văn hóa
doanh nghiệp
- Thực hiện : Thực hành sử dụng các phần mềm đã nêu trên.
Đượ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, văn
hóa doanh nghiệp ( cách ứng xử, trách nhiệm, …)
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, sử dụng driver trong
công việc…
- Kết quả : Hiểu thêm về công ty TNHH Cơng nghệ và Giải pháp Citynow, 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 email trong 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 Các công cụ làm việc
- Thời gian : 4 ngày
- Nội dung : Tìm hiểu về các cơng cụ sẽ được sử dụng trong quá trình làm việc.

Trương Tấn Thuận

Huỳnh Thị Kim Thảo


10

Trong thời gian này, người hướng dẫn đã hướng dẫn thực tập sinh tìm hiểu về các
cơng cụ sẽ giúp ích cho trong công việc sau này. Một số phần mềm trong số đó như
Github - sử dụng trong quản lý code, viết code trên Visual Studio Code, Trello quản lý
công việc, quản lý tiến độ, nhận task, sử dụng Rocket.Chat để trao đổi nội dung công
việc, và họp, báo cáo công việc qua Skype

- Thực hiện : Thực hành sử dụng các phần mềm đã nêu trên.
- Kết quả : Có khả năng ứng dụng các cơng cụ trên vào cơng việc được giao trong thời
gian thực tập
2.2 Tìm hiểu ngôn ngữ ReactJS và Javascript, Storybook và Atomic design
- Thời gian : 2 tuần
- Nội dung : Tìm hiểu về Storybook, setup source với các công cụ như eslint, prettier,
lint-staged, husky. Vận dụng Atomic design để xây dựng page, củng cố kiến thức về
React. Setup github page cho đồ án
- Thực hiện :
-

Tự học theo tài liệu được gợi ý để tham khảo.

-

Làm các task được giao

-Kết quả :
-

Có kiến thức tồn diện hơn về ReactJS, storybook

-

Có kiến thức về Atomic design

-

Config source code với các công cụ hỗ trợ như trên


2.3 Lập trình web clone – Zing MP3 với ReactJS và Javascript
- Thời gian : 2 tuần
- Nội dung: Hoàn thiện giao diện đồ án. Thực hiện xử lý đa ngôn ngữ và chuyển theme
với context. Xử lý dữ liệu mock với Redux và redux thunk. Thực hiện các chức năng
liên quan đến event trong Javascript
- Thực hiện :
-

Tự học các tài liệu liên quan và hỏi người hướng dẫn khi có thắc mắc.

Trương Tấn Thuận

Huỳnh Thị Kim Thảo


11

-

Áp dụng kiến thức vào quá trình thực hiện

-Kết quả :
-

Nắm được các kiến thức về context, redux, hook và custom hook

-

Nắm được cách xử lý các event trong javascript với các use hook


2.4 Tìm hiểu cơng cụ quản lý Mono repo - Bazel và Nx workspace
- Thời gian : 1 tuần

.

- Nội dung: Tìm hiểu về mono repo, tìm hiểu các công cụ về main concept, tạo case
study và demo
- Thực hiện :
-

Đọc tài liệu được gửi, xem cái tutorial để tìm hiểu thêm

-

Setup các cơng cụ, config với husky, eslint, lint-staged,..

-

Đề ra một case study về mono repo và demo code

- Kết quả :
-

Nắm được cách setup các cơng cụ

-

Nắm được q trình, cách thức quản lý, share package của bazel và nx workspace

2.5

.

Tìm hiểu về NextJS, typescript kết hợp công cụ kiểm thử Cypress
- Thời gian : 2 tuần
- Nội dung: Tìm hiểu về NextJS và typescript, tìm hiểu testing end-to-end bằng Cypress
- Thực hiện :
-

Đọc tài liệu về NextJS và typecsript

-

Tiến hành code một page đơn giản

-

Đọc tài liệu về Cypress, setup, config với husky, eslint, lint-staged,..

-

Tìm hiểu các viết test và run test

- Kết quả :
-

Nắm được kiến thức cơ bản về NextJS, typescript

-

Tạo page, xử lý context, use hook


-

Biết cách viết test và sử dụng cypress

Trương Tấn Thuận

Huỳnh Thị Kim Thảo


12

3. Thực hiện project
Sau gần hai tháng được training và thực hành, thực tập sinh đã nắm được những kiến thức
cơ bản về ReactJS, NextJS với Javascript và Typescript, cùng với đó tìm hiểu được các
cơng cụ kiểm thử như Cypress, và công cụ quản lý Mono Repo như Bazel, Lerna, Nx
workspace, yarn workspace. Trong tháng đầu, người phụ trách đã hướng dẫn
thực tập sinh áp dụng những kiến thức đã học để thực hiện clone trang web ZingMp3.
Chi tiết đồ án sẽ được nói ở phần sau.
4. Lịch làm việc
Mức
Tuần

Cơng việc

Người hướng

độ

dẫn


hồn
thành

-

Nhận xét của
người hướng
dẫn

Tìm hiểu về cơng Chị Đồng Thiên
ty, cách tổ chức Thanh
của cơng ty.

-

Dương

Tìm hiểu về văn Thùy Linh
doanh Anh

hóa
nghiệp,

1

Chị

Trương


trách Tấn Thuận

nhiệm và bổn
phận trong cơng
ty
-

Tìm hiểu về cách
làm

việc,

các

công cụ hỗ trợ

Trương Tấn Thuận

Huỳnh Thị Kim Thảo


13

Tìm

-

hiểu

về Anh


Trương

Tấn Thuận

Storybook
Setup source với

-

các cơng cụ như
eslint, prettier, lint2+3

staged, husky.
- Vận dụng Atomic
design để xây dựng
page
- Củng cố kiến thức
về React
-Thực hiện xử lý đa Anh

Trương

ngôn ngữ và chuyển Tấn Thuận
theme với context.
- Xử lý dữ liệu mock
với Redux và redux
4+5

thunk.

- Tìm hiểu event
trong Javascript
-

Hồn

thành

ZingMP3 Clone
- Tìm hiểu về mono Anh

Trương

repo, tìm hiểu các Tấn Thuận
6

cơng cụ quản lý như Anh Song Văn
Bazel

và

nx Cẩm

workspace

Trương Tấn Thuận

Huỳnh Thị Kim Thảo



14

- Tìm hiểu về NextJS, Anh
7+8

Trương

Tấn Thuận

typescript
- Tìm hiểu cơng cụ
kiểm thử Cypress

-Tạo 1 landing page Anh
9+10+11+12

giới về sản phẩm mới Tấn Thuận
của

công

(CloudLocker)

Trương Tấn Thuận

Trương

ty Anh Song Văn
Cẩm


Huỳnh Thị Kim Thảo


15

Chương 3: Chi tiết về project
1. Giới thiệu về dự án
Clone Trang chủ của Zing MP3 kết hợp với team thực hiện mono repo, quản lý và
testing
2. Thực hiện
Huỳnh Thị Kim Thảo
Với sự giúp đỡ tận tình của các anh phụ trách
3. Các công việc đã làm trong dự án:
-

Thực hiện code page

-

Tìm hiểu và Seminar về các cơng cụ quản lý mono repo Bazel, nx workspace

-

Tìm hiểu, viết test sử dụng Cypress

4. Kết quả đạt được:

Link: React App (kimthaohuynhthi.github.io)

Trương Tấn Thuận


Huỳnh Thị Kim Thảo


16

TÀI LIỆU THAM KHẢO
-

/>
-

/>
-

o/events

-

/>
-

ld/

-

/>
-

/>

-

/>
Trương Tấn Thuận

Huỳnh Thị Kim Thảo


17

TỔNG KẾT
Như vậy, sau sáu tháng thực tập tại công ty TNHH Cơng nghệ và Giải pháp Citynow, em
đã có được các kiến thức về ReactJS, Javascript, typescript, đồng thời cũng học thêm được nhiều
về các công cụ kiểm thử như cypress và các công cụ quản lý mono repo như Bazel, nc workspace,
cùng các kỹ năng mềm như thuyết trình,…. Đồng thời, em cũng đã áp dụng được các kiến thức
trên để thực hiện task và đang tiến hành thực hiện dự án mới của công ty. Chân thành cảm ơn các
anh chị đã hỗ trợ, đặc biệt là anh Trương Tấn Thuận đã giúp đỡ và chỉ dạy em rất nhiều.

Trương Tấn Thuận

Huỳnh Thị Kim Thảo