BÁO cáo THỰC tập lập TRÌNH WEBSITE với REACTJS

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 WEBSITE VỚI REACTJS

Cơng ty thực tập:

TEGO GLOBAL

Người phụ trách:

Trần Phương Nam

Thực tập sinh:

Lê Trung Hiếu

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

Trần Phương Nam
Lê Trung Hiếu


2

LỜI MỞ ĐẦU
Ngày nay, với sự phát triển của lĩnh vực Công nghệ Thông tin cùng với nhu cầu tiện

dụng của con người đối với các sản phẩm của lĩnh vực đang rất phát triển này thì Website chính
là một giải pháp vô cùng hiệu quả để giải quyết các nhu cầu trên.
Cùng với xu hướng phát triển của các phương tiện truyền thơng như Báo, Radio… thì
việc sử dụng Internet ngày càng phổ biến. Truy cập Internet, chúng ta có được một kho thơng
tin khổng lồ phục vụ mọi nhu cầu, mục đích của chúng ta chỉ bằng một cái nhấp chuột. Nhận
thức được nhu cầu tìm hiểu thơng tin, giải trí của xã hội, là sự ra đời của hàng loạt website cho
các mục đích thương mại, giải trí, tin tức… Để đáp ứng với việc cập nhật thơng tin hàng ngày,
tình hình xã hội, chính trị, thời sự, và sức khỏe… thì website tin tức ra đời là một nhu cầu tất
yếu.
Sau bốn năm đào tạo ở trường, em muốn tìm hiểu quy trình làm việc thực tế và thử sức
với các dự án thực tế nên em quyết định chọn Công ty Cổ phần Giải pháp Công nghệ TEGO
GLOBAL để tiếp xúc và làm việc với một đội ngũ và quy trình chuyên nghiệp.

Trần Phương Nam
Lê Trung Hiếu


3

LỜI CẢM ƠN
Trân trọng gửi lời cảm ơn Công ty TEGO đã 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 và giảng giải của các anh trainer,
leader ở công ty, em đã làm quen và đã hồn thành một vài dự án của cơng ty.
Đặc biệt cảm ơn anh ???????, đã training kiến thức Javascript cũng như các framework,,
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 chị ???????, đã training VueJS cũng như
ReactJS, giúp em làm quen và thuần thục các thư viện mới như Redux, VueX,… và các quy
trình phát triển phần mềm như Agile, Scrum … để có thể hồn thành các dự án của cơng ty. Em
xin chân thành cảm ơn tồn thể công ty đã tạo cho em một môi trường làm việc chuyên nghiệp

cũng như giúp em phát triển được bản thân mình.
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.
Lê Trung Hiếu
Hồ Chí Minh, ngày 24 tháng 12 năm 2021

Trần Phương Nam
Lê Trung Hiếu


4

NHẬN XÉT CỦA KHOA
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................

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

Trần Phương Nam
Lê Trung Hiếu


5

MỤC LỤC

LỜI MỞ ĐẦU.................................................................................................................................................2
LỜI CẢM ƠN.................................................................................................................................................3
NHẬN XÉT CỦA KHOA.............................................................................................................................4
MỤC LỤC......................................................................................................................................................5
CHƯƠNG 2: NỘI DUNG THỰC TẬP......................................................................................................7
TÀI LIỆU THAM KHẢO..........................................................................................................................17
TỔNG KẾT..................................................................................................................................................18

Trần Phương Nam
Lê Trung Hiếu


6

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

1. Giới thiệu công ty TEGO
Tego Global là một công ty công nghệ Outsource có trụ sở chính tại Thành phố
Hồ Chí Minh, Việt Nam. Kể từ năm 2015, công ty đã giúp các cơng ty tồn cầu và
các thương hiệu lâu đời phát triển hoạt động kinh doanh của họ bằng cách xây dựng

các giải pháp hiệu quả được hỗ trợ bởi các công nghệ mới nhất.
Sứ mệnh của công ty là ứng dụng công nghệ kỹ thuật số cho khách hàng của
mình bằng cách tập hợp tài năng kỹ thuật hàng đầu, chuyên môn sâu trong ngành và
sự cống hiến cá nhân để đáp ứng nhu cầu kinh doanh riêng của từng khách hàng.

2. Sản phẩm của công ty
Công ty chúng tôi nhận các dịch vụ phát triển web và di động ở mọi nơi. Chúng
tôi cung cấp dịch vụ quản lý dự án kỹ lưỡng và quy trình phát triển sản phẩm chuyên
nghiệp cùng với đội ngũ phát triển nhiều kinh nghiệm và QA để đảm bảo chất lượng
sản phẩm tốt nhất.
Một số đối tác của công ty: CoverGo, BCMS Tech, ADORA, Golden Gate, …

Trần Phương Nam
Lê Trung Hiếu


7

CHƯƠNG 2: NỘI DUNG THỰC TẬP
Đợt thực tập với chủ đề “Lập trình Website giao hàng quốc tế” nhằm mục đích giúp sinh
viên học tập thêm cơng nghệ mới như ReactJS, Redux, VueJS, VueX, quy trình phát triển phần
mềm Agile/Scrum, giao tiếp với khách hàng nước ngồi.

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 người phụ trách giới thiệu về cơng ty, q trình thành lập, phát triển của
cơng ty, quy trình làm việc, các mentor, leader, làm quen với mọi người ở công ty.
Thực tập sinh được hướng dẫn sử dụng các email, các dịch vụ của công ty để phục
vụ công việc.

Kết quả : Hiểu thêm về cơng ty TEGO, 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.

2.2.

Các công cụ làm việc
Thời gian : 3 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, mentor sẽ 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ố công cụ cơ bản để phát triển phần mềm
như Visual Studio Code, Git, Figma, npm, yarn, …
Ứng viên sẽ được mentor hướng dẫn sử dụng các công cụ quản lý quy trình phổ
biến như Jira, Trello, Open Project…
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, so với việc dung các IDE.
Tìm hiểu các hàm, các kỹ thuật cơ bản của Javascript
Thời gian : 10 ngày (2 tuần)
Nội dung : Được training về các kỹ thuật JAVASCRIPT nâng cao, những kiến thức
quan trọng cho việc tối ưu trên ReactJS.
- Lập trình hướng đối tượng
Các kiến thức cơ bản về lập trình hướng đối tượng như khái niêm, các đặc tính
như tính kế thừa, tính đóng gói, tính ảo hóa, tính đa hình.
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.

Trần Phương Nam
Lê Trung Hiếu


8

-

Sử dụng kiến thức của VueJS để chuyển design từ FIGMA sang HTML/CSS kết
hợp với Javascript

Kết quả :
-

2.3.

Nâng cao kỹ năng lập trình với ngơn ngữ Javascript, cũng như thư ReactJS
Có được những kiến thức quan trọng cho việc lập trình website 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.

Lập trình website với ReactJS và Redux
Nội dung: Các kiến thức cơ bản về ReactJS
-

Khái niệm cơ bản về ReactJS: React Js là một thư viện viết bằng javascript, dùng
để xây dựng giao diện người dùng (UI). React được sử dụng rộng rãi và có hệ sinh
thái đa dạng phong phú. UI tất nhiên là quan trọng, nhưng khơng phải là tất cả.

-

Phần chính của ReactJS là gì?
o Redux: Đây có thể gọi là một phần cực kỳ quan trọng đối với ReactJS và
không một ai sử dụng mà không biết đến redux. Trong một reactJS không
bao gồm những module chuyên dụng để xử lý dữ liệu vì thế ReactJS được
thiết lập một cách độc lập bằng việc chia nhỏ view thành các component
nhỏ để chúng liên kết chặt chẽ với nhau hơn.
o Sự liên kết và mối quan hệ giữa các component trong ReactJS cần được
quan tâm đặc biệt là vì luồng dữ liệu một chiều từ cha xuống con là luồng
dữ liệu duy nhất trong một reactJS việc sử dụng luồng dữ liệu một chiều
này có một chút khó khăn cho những người mới tìm hiểu sử dụng và ứng
dụng vô các dự án tuy nhiên bên cạnh mặt hạn chế vẫn có mặt nổi trội đó
chính là ReactJS sẽ phát huy được hết tất cả chức năng vai trị của mình khi
sử dụng cơ chế một chiều này vì nó sẽ làm cho các chức năng của view trở
nên phức tạp hơn.
o Virtual Dom: đây là phần mà hầu như những Framework đều sử dụng
Virtual dom và sử dụng nó như một ReactJS khi mà virtual dom thay đổi,
điều đặc biệt ở đây là chúng ta không cần thao tác trực tiếp trên dom mà
vẫn có thể thấy được view và thấy được những thay đổi đó.

Trần Phương Nam
Lê Trung Hiếu


9

Thực hiện :
-

Thực hiện các công việc chuyển design từ mockup sang HTML/CSS – JS.
Tìm kiếm tài liệu trên mạng để tìm hiểu thêm.

Kết quả :
-

2.4.

Hiểu được những khái niệm cơ bản trong lập trình website với ReactJS và Redux
để quản lý store, state.

Lập trình trên ReactJS
Nội dung : Các kỹ thuật tạo ra một website cơ bản, sử dụng ReactJS.
-

Định nghĩa về Website:
o Website là một tập hợp các trang web (web pages) bao gồm văn bản, hình
ảnh, video, flash v.v... thường chỉ nằm trong một tên miền (domain name)
hoặc tên miền phụ (subdomain) trên World Wide Web của Internet. Trang
web được lưu trữ (web hosting) trên máy chủ web (web server) có thể truy
cập thơng qua Internet.
o Một trang web là tập tin HTML hoặc XHTML có thể truy nhập dùng giao
thức HTTP hoặc HTTPS. Website có thể được xây dựng từ các tệp tin
HTML (website tĩnh) hoặc vận hành bằng các CMS chạy trên máy chủ
(website động). Website có thể được xây dựng bằng nhiều ngơn ngữ lập
trình khác nhau (PHP,.NET, Java, Ruby on Rails...).

-

Tạo project ReactJS: Được các mentor hướng dẫn tạo ra một project cơ bản, cấu

hình redux cho project.

Thực hiện :
-

Tìm hiểu và tự config được một project sử dụng thư viện ReactJs và Redux

Kết quả:
-

Đã có thể tạo ra được một project sử dụng thư viện ReactJs và Redux, kết hợp với
một số thư viện design như Ant design, SCSS/SASS, Tailwind CSS.

3. Thực hiện project
Trần Phương Nam
Lê Trung Hiếu


10

Sau 2 tuần đượ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ề Javascript, ReactJS và Redux
Chi tiết đồ án sẽ được nói ở phần sau.
4. Lịch làm việc

Tuần

Cơng việc

-

1

3-4

5-8
9-12

13-14
15-16

-

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ữ
lập trình Javascript
Tìm hiểu ReactJS,
Redux, Rest API,
Easy-peasy
Convert mockup to
Html/css – JS
Integrate API
Test during

implementing, fix
bugs
UAT version
Test during
implementing, fix
bugs
Fix UAT issues
Release project

Người hướng dẫn

Mức độ
hoàn
thành

Chị Nguyễn Thị Mỹ Duyên
Anh Nguyễn Duy Tuấn Quang

100%

Anh Trần Phương Nam

100%

Anh Trần Phương Nam

100%

Anh Trần Phương Nam

100%

Anh Trần Phương Nam

100%

Anh Trần Phương Nam
Anh Nguyễn Duy Tuấn Quang

100%

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

CHƯƠNG 3: CHI TIẾT DỰ ÁN – TEGO FINANCE

Trần Phương Nam
Lê Trung Hiếu


11

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

Tego Finance là một dự án về quản lý tiền lương, ứng lương của nhân viên,

giúp nhân viên có thể gửi yêu cầu ứng lương đến cơng ty chủ quản, từ đó,
cơng ty có thể xác nhận/từ chối yêu cầu đó, giúp nhân viên có thể giải quyết
vấn đề tài chính hiện tại nếu cần thiết. Từ số lương được ứng, sẽ trích ra một
phần hoa hồng cho công ty chủ quản

-

Dự án sẽ phát triển theo hướng quản lý toàn bộ chi tiêu cho người sử dụng,
người sử dụng có thể dùng tiền lương để thanh tốn hóa đơn, trả các khoản
nợ được đặt lịch trước, nạp thẻ điện thoại …

2. Kế hoạch
2.1 Vai trò trong dự án: Front-end engineer, nhận yêu cầu từ anh Mentor (Trần
Phương Nam), design, và endpoint của api để tiến hành tích hợp theo yêu cầu.
2.2 Giai đoạn phát triển dự án:
2.2.1 Giai đoạn 1: Chuyển design từ Figma sang HTML/CSS:
- Hoàn thành toàn bộ UI cho dự án (UI chính ở mục 3.).
- Kết quả: Hồn thành toàn bộ UI cho dự án (Mức hoàn thiện: 99%, dựa theo
design/mockup ở figma).
2.2.2 Giai đoạn 2: API Integration:
- Tìm hiểu các phương thức, config của axios.
- Tích hợp API được cung cấp bởi backend, tích hợp Easy-peasy để quản lý
state cho dự án.
- Kết quả: Tích hợp tồn bộ API cho dự án, đồng thời kiểm thử dự án trong
q trình tích hợp.
2.2.3 Giai đoạn 3: UAT
- Deploy web demo để tiến hành giai đoạn UAT.
- Kết quả: Tiến hành sửa chữa các bugs có trong q trình kiểm thử, cuối cùng sẽ
release phiên bản hoàn thiện

3. Giao diện chính:

Trần Phương Nam
Lê Trung Hiếu


12

3.1 Màn hình đăng nhập:
3.1.1 Nhập mã nhân viên

3.1.2 Nhập mã pin:

Trần Phương Nam
Lê Trung Hiếu


13

3.2 Màn hình qn mật khẩu:

3.3 Màn hình chính:

Trần Phương Nam
Lê Trung Hiếu


14

3.4 Màn hình thơng tin nhân viên:

3.4.1 Thơng tin cơ bản:

3.4.2 Thông tin tài khoản ngân hàng:

Trần Phương Nam
Lê Trung Hiếu


15

3.5 Màn hình nhập số lương muốn ứng:

3.6 Màn hình xác nhận thông tin:

Trần Phương Nam
Lê Trung Hiếu


16

3.7 Màn hình báo thành cơng (ứng lương):

Trần Phương Nam
Lê Trung Hiếu


17

TÀI LIỆU THAM KHẢO
For Main concepts of ReactJS, Redux:

- ReactJS
- Redux
- Easy-peasy
For API Integration:
- Axios
For design pattern:
- Ant design
- Chakra-UI
For css libraries:
- Tailwind css

Trần Phương Nam
Lê Trung Hiếu


18

TỔNG KẾT
Như vậy, sau thời gian thực tập ở vai trị Front-end intern ở cơng ty Tego, em đã học hỏi
được một quy trình phát triển sản phẩm một cách hoàn thiện với sự giúp đỡ của anh Trần
Phương Nam và anh Nguyễn Duy Tuấn Quang đã giúp đỡ team để hồn thành dự án.
Qua q trình thực tập trên, em đã được tiếp xúc với môi trường làm việc thực tế, tiếp
xúc với các dự án thực tế, từ đó giúp nâng cao khả năng giao tiếp với khách hàng, nâng cao khả
năng ngoại ngữ, khả năng quản lý cơng việc cũng như kỹ thuật lập trình.
Em xin cảm ơn các thầy/cô khoa Công nghệ Phần mềm đã giúp em hoàn thành bài báo
cáo này.
Em xin chân thành cảm ơn.

Trần Phương Nam
Lê Trung Hiếu