Báo cáo thực tập lập trình ứng dụng web với reactjs

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 REACTJS

Cơng ty thực tập

:Telio

Người phụ trách

:Nguyễn Đức Bảo

Thực tập sinh

: Nguyễn Cao Cường

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


1

LỜI MỞ ĐẦU

Ứng dụng web ngày nay có sức lan tỏa mạnh mẽ trong cuộc sống của con người. Nó đã
trở thành một phần tất yếu của họ. Mọi người sử dụng nó để giải trí, mua sắm, chia sẻ ảnh, v.v.
Ngồi ra, các cơng ty, doanh nghiệp sử dụng nó để quảng cáo thương hiệu, sản phẩm, dịch vụ,
hỗ trợ hoạt động kinh doanh và thúc đẩy bán hàng. Do nhu cầu tương đối cao đối với các ứng
dụng web, nhiều thư viện đã được phát triển để hỗ trợ phát triển web nhanh hơn và dễ dàng hơn,

chẳng hạn như Reactjs.
Ngày nay, ứng dụng web đóng vai trị tất yếu trong cuộc sống con người. Mọi người có
thể sử dụng web để kết nối với người khác, mua sắm, giải trí. Bên cạnh đó, các doanh nghiệp
cũng dần lựa chọn môi trường web để phát triển phần mềm theo nhu cầu của họ. Và với nhu cầu
ngày một tăng cao, nhiều thư viện đã được ra đời để giúp việc phát triển web nhanh chóng và
hiệu quả hơn, trong đó có một thư viện khá là phổ biến, nhu cầu việc làm cao, đó là Reactjs.
Reactjs là một thư viện javascript giúp xây dựng UI cho website, với các ưu điểm về hỗ
trợ xây dựng giao diện nhanh, cải thiện hiệu năng, hạn chế lỗi trong quá trình code, tái sử dụng
các component, Reactjs đã nhanh chóng trở thành công cụ phát triển web hot nhất hiện nay,
được nhiều công ty ưa dùng.
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ư
cố nâng cao kiến thức của mình trong một môi trường chuyên nghiệp, em đã quyết định thực
tập trong kì này. Vì vậy, em quyết định chọn Telio - 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.

Nguyễn Cao Cường


2

LỜI CẢM ƠN

Trân trọng gửi lời cảm ơn Công ty TNHH Telio Việt Nam đã 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 team, em đã tiếp thu được
những kiến thức quan trọng để có thể làm việc trong thực tế. Chân thành cảm ơn các anh chị
trong team đã 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.
Đặc biệt cảm ơn anh Nguyễn Đức Bảo, đã training các kiến thức nền tảng về backend
bao gồm Nestjs,Graphql , hướng dẫn, giúp đỡ cho chúng em tận tình cả những khó khăn trong
cơng việc, đến những khó khăn việc làm quen với mơi trường mới; cảm ơn anh Hà Quý Anh và

anh Vũ Xuân Bách, đã training kiến thức về frontend bao gồm Reactjs và các cơng cụ liên quan,
để có thể áp dụng vào làm sản phẩm trong thời gian qua.
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 em làm bài báo cáo này.
Nguyễn Cao Cường
TPHCM, ngày … tháng … năm 2022

Nguyễn Cao Cường


3

NHẬN XÉT CỦA KHOA

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

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

Nguyễn Cao Cường


4

MỤC LỤC
MỤC LỤC ..................................................................................................................................... 4
Chương 1: Giới thiêu công ty thực tập .......................................................................................... 5
Chương 2: Nội dung thực tập......................................................................................................... 6
1. Tìm hiểu cơng ty và các kỹ năng cơ bản trong công ty ....................................................... 6
2. Nghiên cứu kỹ thuật ............................................................................................................. 6
3. Thực hiện project .................................................................................................................... 9
4. Lịch làm việc ........................................................................................................................ 10
Chương 3: Chi tiết về project ....................................................................................................... 12
1. Giới thiệu về WMS, OMS ................................................................................................... 12
2. Các tính năng chính đã làm ................................................................................................. 12
TÀI LIỆU THAM KHẢO ........................................................................................................... 17
TỔNG KẾT .................................................................................................................................. 18

Nguyễn Cao Cường


5

Chương 1: Giới thiêu công ty thực tập
Tổng quan: TELIO (Nền tảng thương mại điện tử B2B đầu tiên của Việt Nam) là công ty
sử dụng công nghệ dữ liệu để xây dựng nền tảng thương mại B2B lớn nhất Việt Nam, Telio kết

nối các nhà bán lẻ truyền thống nhỏ với các thương hiệu và nhà bán buôn trên một nền tảng tập
trung. Bằng cách tổng hợp nhu cầu, Telio có thể cung cấp cho các nhà bán lẻ nhỏ nhiều lựa
chọn hơn, giá cả tốt hơn và hậu cần hiệu quả hơn thông qua lợi thế kinh tế theo quy mô.
Dịch vụ của Telio: cung cấp một nền tảng di động giúp các nhà bán lẻ tìm kiếm, lựa chọn
và đặt hàng sản phẩm từ nhiều nhà phân phối. Startup cũng đang xây dựng hệ thống kho bãi để
đảm bảo giao hàng trong vịng 24 giờ, từ đó giúp đối tác quản lý dòng tiền tốt nhất.
Thành tựu: Telio là nền tảng thương mại điện tử B2B tiên phong của Việt Nam huy động
thành công 25 triệu đô la Mỹ trong vòng gọi vốn Series-A với sự tham gia của nhà đầu tư lớn
Tiger Global Fund và sự tham gia của các quỹ đầu tư nổi tiếng khác: Sequoia India, GGV
Capital và RTP Global.
Vị trí: Telio có văn phòng riêng tại địa chỉ tòa An Phong 518b, Điện Biên Phủ, Bình
Thạnh, thành phố Hồ Chí Minh.
Đợt thực tập: Đây cũng là đợt thực tập đầu tiên mà công ty tổ chức với mong muốn tìm
kiếm những tài năng và tạo mọi điều kiện, môi trường phát triển cho thế hệ trẻ của Việt Nam.

Nguyễn Cao Cường


6

Chương 2: Nội dung thực tập
Đợt thực tập với chủ đề “Phát triển giao diện phần mềm” nhằm mục đích giúp sinh viên
thực tập được đào tạo toàn diện về lập trình Frontend, đồ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 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 .
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 trong công
việc…
Kết quả : Hiểu thêm về cơng ty Telio, 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
1.1.

1.2.

Các công cụ làm việc
Thời gian : 2 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.
Trong thời gian này, supervisor đã 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ư Jira sử dụng trong làm việc nhóm, Bitbucket – dùng để quản lý mã nguồn, Mattermost –
phần mềm để giao tiếp nội bộ - 1Office -sử dụng để chấm công, xem bảng lương,
quản lý nhân sự.
Thực hiện : Thực hành sử dụng các phần mềm đã nêu trên.
Kết quả : Lập trình sử dụng các cơng cụ miễn phí, giúp dễ dàng kết hợp các cơng cụ
với nhau.
Tìm hiểu Javascript, ESLint, Prettier
Thời gian : 5 ngày (1 tuần)

Nguyễn Cao Cường

7

Nội dung : Được training về các kỹ thuật Javascript nâng cao, các công cụ giúp làm
việc code chung hiệu quả hơn như ESLint và Prettier những kiến thức quan trọng và
nền tảng cho việc học các framework.
- Asynchoronus
Hiểu rõ về lập trình bất đồng bộ trong javascript, cách vận hành sâu bên trong
- ESLint và Prettier:
Học được cách setup ESLint và Prettier vào trong dự án javascript giúp cho
coding convention hiệu quả hơn, format dễ nhìn và dễ dàng phát hiện các bug
tiềm ẩn.
Thực hiện :
- Tham gia đầy đủ các buổi training của công ty.
- Làm các bài thực hành, kiểm tra về kiến thức đã học.
Kết quả :
-

1.3.

Nâng cao kỹ năng lập trình với ngơn ngữ Javascript.
Có được những kiến thức quan trọng cho việc lập trình frontend sau này.
Ngồi ra cịn được biết thêm một số quy tắc trong việc viết code sao cho đúng
chuẩn, dễ đọc, dễ hiểu.

Nodejs, Nestjs và Graphql
Nội dung: Các kiến thức cơ bản về Nodejs runtime và framework khá là phổ biến của
nó là Nestjs cũng như Graphql –là ngơn ngữ truy vấn và xử lý dữ liệu nguồn mở cho
những API, giúp khách hàng dễ dàng để đặt hàng chính xác những gì họ muốn để có
thể làm ra một backend server đơn giản.
-

Khái niệm cơ bản về Nestjs.
Nắm được các khái niệm cơ bản về Nestjs, một NodeJS framework dùng để phát
triển server-side applications hiệu quả và có thể mở rộng. NestJS là sự kết hợp bởi
OOP(Object
Oriented
Programming),
FP(Functional
Programming),
FRP(Functional Reactive Programming). NestJS sử dụng TypeScript để phát triển
nhưng nó cũng hỗ trợ cả Javascript.
Ngồi ra trainer cịn cung cấp một số từ khóa để thực tập sinh có thể về tìm hiểu
bao gồm Dataloader, N+1 query.

-

Khái niệm cơ bản về Graphql:

Nguyễn Cao Cường


8

Nắm được các khái niệm cơ bản của Graphql bao gồm Mutation, Query, cách
định nghĩa Schema và Types cho dữ liệu. Thấy được ưu điểm và nhược điểm của
Graphql so với Restful api.
-

Graphql trong Nestjs
Graphql được hỗ trợ rất là tốt trong Nestjs và cũng rất dễ dàng để setup một server

dùng cả 2 công nghệ này.

Thực hiện :
-

Tham gia đầy đủ các buổi trainning.
Tìm kiếm tài liệu trên mạng để tìm hiểu thêm.

Kết quả :
1.4.

Hiểu được những khái niệm cơ bản trong lập trình backend với Nestjs và Graphql.
Đã xây dựng được một backend server với api graphql đơn giản.

Git, Docker
Nội dung: Cách sử dụng git cơ bản trong quá trình làm việc của team cũng như các
quy chuẩn để sử dụng git trong team sao cho đúng, cơ bản về Docker.
-

Học các lệnh git cơ bản:
Được các trainer hướng dẫn dùng các lệnh cơ bản cho việc làm nhóm như
commit, pull, push, status, clone.

-

Học các lệnh git nâng cao, fix conflict:
Được các trainner hướng dẫn dùng các lệnh nâng cao như reset, rebase, force push
tùy vào từng trường hợp cụ thể, hướng dẫn fix conflict đúng cách.

-

Docker:
Sử dụng docker khởi động backend và database trên container và kết nối với
chúng.

Thực hiện :
-

Tham gia đầy đủ các buổi training.
Tìm hiểu thêm tài liệu ở trang chủ của docker cũng như git.

Nguyễn Cao Cường


9

Kết quả:
-

Đã có thể sử dụng git hiệu quả theo chuẩn của team, cũng như hiểu và sử dụng docker một
cách cơ bản.
1.5.

Reactjs, redux, redux-saga
Nội dung: Cách sử dụng Reactjs để xây dựng frontend, dùng redux để quản lý state,
redux-saga để xử lý gọi api.
-

Học cơ bản về Reactjs:
Reactjs là một thư viện UI của javascript giúp xây dựng website với tốc độ nhanh

chóng cũng như cộng đồng hỗ trợ cao.

-

Quản lý state với redux
Được các trainner hướng dẫn dùng redux để quản lý các state hiệu quả trong
Reactjs, tránh việc phải truyền nhiều lần cũng như tối ưu về hiệu năng.

-

Sử dụng redux-saga để xử lý api:
Vì một mình redux không thể xử lý các middleware như gọi api được, nên redux
đã giới thiệu thêm một thư viện redux-saga để hỗ trợ việc này.

Thực hiện :
-

Tham gia đầy đủ các buổi training.
Tham khảo tài liệu trên trang chủ Reactjs, cũng như các diễn đàn.

Kết quả:
-

Vì đã có kiến thức nền tảng từ trước nên việc học thành thạo khá là nhanh.

3. Thực hiện project
Sau 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ề techstack của công ty bao gồm Nestjs, Graphql, Reactjs, Git, Docker. Kể từ tháng
thứ ba, trainer đã hướng dẫn thực tập sinh áp dụng những kiến thức đã học để làm task
trên hệ thống của công ty.

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

Nguyễn Cao Cường


10

4. Lịch làm việc
Cơng việc

Người hướng dẫn

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.
- Học cách trao đổi,
làm việc qua email.
- Tìm hiểu ngơn ngữ
Javascript nâng cao
- ESLint.
- Prettier.
- Tìm
hiểu
về
Nodejs,
Nestjs,
Graphql.

- Tìm hiểu về Git,
Docker.

Anh Nguyễn Đức
Bảo, Chị Nguyễn
Thị Giàu

Tuần
-

1

2

3, 4

5, 6

Mức
độ
hoàn
thành

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

Anh Hà Quý Anh

Anh Nguyễn Đức
Bảo

Anh Nguyễn Đức
Bảo

Tìm hiểu về Reactjs, Anh Vũ Xuân
Redux, Redux-saga Bách, Anh Hà Quý
Anh
- Xây dựng thanh lọc Anh Hà Quý Anh
người dùng theo kho và
vai trò trong hệ thống
quản lý vận hành của
công ty.
- Đọc codebase của hệ
thống.
- Tiếp tục đọc codebase Anh Hà Quý Anh
của hệ thống quản lý
vận hành cũng như quản
lý kho hàng của công ty.
- Theo dõi, fix một số
bug nhỏ.
- Xây dựng trang điều Anh Hà Quý Anh
chỉnh lô hàng trên
hệ thống quản lý
-

7, 8

9, 10

11, 12,
13, 14

15, 16

Nguyễn Cao Cường


11

17, 18

19, 20

21, 22,
23, 24

kho hàng.
- Tiếp tục đọc codebase
của hệ thống quản lý
vận hành cũng như quản
lý kho hàng của công ty.
- Theo dõi, fix một số
bug nhỏ.
- Xây dựng bộ giao diện
mới cho hệ thống quản
lý kho hàng cũng như
hệ thống quản lý vận
hành từ figma.
- Tích hợp bộ giao diện
mới vào trang quản lý
kho trong hệ thống quản

lý vận hàng.
- Theo dõi và fix các
bug liên quan.

Anh
Bách

Vũ

Xuân

Anh
Bách

Vũ

Xuân

Nguyễn Cao Cường


12

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

1. Giới thiệu về WMS, OMS
WMS là viết tắt của Warehouse Management System là một phần mềm ứng dụng
được thiết kế để hỗ trợ việc quản lý kho hàng.
OMS là viết tắt của Operation Management System là một phần mềm ứng dụng
được thiết kế để hỗ trợ việc quản lý vận hành.

Đây là 2 phần mềm khá phổ biến trong các công ty thương mại điện tử, và team
em là downstream nên sẽ làm việc phục vụ chủ yếu cho 2 phần mềm này.
2. Các tính năng chính đã làm
1.1. Xây dựng 2 thanh lọc người dùng theo kho và vai trò trong OMS

Thực hiện: 2 thành viên của team intern Reactjs
o Nguyễn Cao Cường
o Nguyễn Ngọc Phương Nam
Vì đây là task đầu tiên được giao nên việc đọc codebase và code theo tiêu chuẩn
của codebase tốn khá là nhiều thời gian, và 2 thành viên đã làm task theo phương
pháp pair programming, với sự trợ giúp của anh Hà Quý Anh thì task đã được
hồn thành tốt và người dùng có thể sử dụng một cách hiệu quả.
1.2. Xây dựng trang lô hàng trong WMS

Nguyễn Cao Cường


13

Vì ở kho muốn quản lý sâu hơn ở tầng lơ hàng, nên team đã được u cầu làm
tính năng này.
Sau khi đã quen thuộc với codebase cũng như học hỏi thêm thì việc xây dựng
trang lơ hàng cũng dễ dàng hơn.
Thực hiện: Nguyễn Cao Cường
Mentor: Anh Hà Quý Anh
1.3. Xây dựng giao diện mới cho trang quản lý kho trong OMS
Giao diện mới:

Nguyễn Cao Cường

14

Giao diện cũ:

Nguyễn Cao Cường


15

-

Cơng việc chính:
o Tái cấu trúc giao diện trang kho của hệ thống quản lí kho hàng
o Thay đổi tồn bộ giao diện của trang kho. Tập trung vào việctheiest kế lại
logic chọn vị trí kho thân thiện và phân cấp rõ rang hơn cho người dùng.
o Tạo, chỉnh sửa và tái cấu trúc trình xử lý lỗi nội và ngoại trang kho.

Nguyễn Cao Cường


16

o Tạo và nâng cấp các core component.
o Cùng với một số công việc sửa bug nhỏ.
-

Thực hiện: 2 thành viên của team intern Reactjs
o Nguyễn Cao Cường
o Nguyễn Ngọc Phương Nam

-

Mentor: Anh Vũ Xuân Bách

Nguyễn Cao Cường


17

TÀI LIỆU THAM KHẢO

For ESLint
/>For Prettier
/>For Nestjs
https:/nestjs.com/
For Graphql
/>For Docker
/>For Reactjs
/>For Redux
/>For Redux-Saga
/>
Nguyễn Cao Cường


18

TỔNG KẾT
Như vậy, sau 6 tháng thực tập tại Telio, em đã học hỏi được techstack của công ty, đặc
biệt là việc sử dụng Reactjs để xây dựng website. Bên cạnh đó, trong q trình làm việc với mọi

người trong team đã giúp bản thân em nâng cao khả năng làm việc nhóm, cũng như biết được
cách mà một team làm việc trên thực tế là như thế nào. Và với đặc thù là công ty thương mại
điện tử nên em đã học hỏi được cách vận hành cơ bản của công ty thương mại điện tử là như thế
nào.
Chân thành cảm ơn sự giúp đỡ của các anh chị cũng như các bạn thực tập sinh ở Telio,
với sự nỗ lực để giúp em đạt được kết quả như thế này.

Nguyễn Cao Cường