Báo cáo thực tập lớp se501 n11 vị trí front end developer

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

BBÁO CÁO THỰC TẬP – LỚP SE501.N11
Vị trí: Front-end Developer

Cơng ty thực tập
Người phụ trách
Thực tập sinh

CƠNG TY TNHH Dịch vụ Cơng nghệ Bản
Việt (Zinisoft)
Võ Thiên Hòa
Phạm Nguyễn Minh Thắng
MSSV: 19522216

Tp. Hồ Chí Minh, tháng 12 năm 2022

1


Lời mở đầu
Ngày nay, ngành công nghiệp phần mềm đã và đang là một trong những ngành
nghề có sức phát triển vô cùng mạnh mẽ, chiếm tỉ trọng lớn trong nền kinh tế tồn cầu
và khơng hề có dấu hiệu chậm lại. Nhu cầu thị trường cho một sản phẩm phần mềm
hiện nay là cao hơn bao giờ hết. Đứng trước đà phát triển này, cùng với nhu cầu vô
cùng lớn, đã có nhiều cơng ty ra đời nhằm đáp ứng thị trường.
Một trong những cơng ty đó là Zinisoft. Đây là một công ty dịch vụ Oursourcing
chuyên làm những trang web và phần mềm mobile nhằm số hóa các nghiệp vụ kinh
doanh, quản lý của khách hàng.

Là một sinh viên thuộc khoa Cơng nghệ phần mềm, em muốn mình được tiếp
cận với nhiều khía cạnh của cơng nghiệp phần mềm, đồng thời nhận ra các mục tiêu
và định hướng của công ty rất phù hợp với bản thân nên em đã chọn Zinisoft là nơi bắt
đầu thực tập, để có cơ hội trải nghiệm, học tập những kiến thức để làm hành trang cho
những dự định sắp tới.

2


Lời cảm ơn
Trân trọng gửi lời cảm ơn đến Công ty Zinisoft đã tạo điều kiện cho em có cơ
hội được thực tập tại công ty.
Em đã học được rất nhiều từ sự chỉ dẫn nhiệt tình của các anh trong công ty.
Không chỉ những kỹ thuật, kiến thức căn bản, mà còn được cơ hội tham gia xây
dựng trong các dự án thực tế. Bên cạnh đó cịn được học cách sử dụng thêm các thư
viện tiên tiến nhằm nâng cao hiệu suất của sản phẩm. Ngoài ra em còn được cải
thiện thêm các kĩ năng mềm.

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.
Phạm Nguyễn Minh Thắng
Tp. Hồ Chí Minh, ngày 23 tháng 12 năm 2022

3


Nhận xét của khoa
…………………………………………………………………………………………
…………………………………………………………………………………………
…………………………………………………………………………………………

…………………………………………………………………………………………
…………………………………………………………………………………………
…………………………………………………………………………………………
…………………………………………………………………………………………
…………………………………………………………………………………………
…………………………………………………………………………………………
…………………………………………………………………………………………
…………………………………………………………………………………………
…………………………………………………………………………………………

4


MỤC LỤC
GIỚI THIỆU CƠNG TY THỰC TẬP...........................................................................6
Giới thiệu về cơng ty CodeLink..................................................................................6
Một số dự án của công ty............................................................................................7
NỘI DUNG THỰC TẬP................................................................................................9
Tổng quan kế hoạch thực tập......................................................................................9
Nội dung chi tiết:.......................................................................................................10
Tuần 1: Làm quen với cơng ty và văn hóa của cơng ty, học cách sử dụng các công
cụ cần thiết mà cơng ty sử dụng.............................................................................10
Tuần 2: Tìm hiểu về HTML, CSS, Javascript.......................................................10
Tuần 3: Tìm hiểu về ReactJS.................................................................................11
Tuần 4: Tìm hiểu về Redux Toolkit – AsyncThunk..............................................11
Tuần 5: Tìm hiểu về Redux Toolkit Query............................................................12
Tuần 6: Tìm hiểu về các component chính sẽ sử dụng của thư viện component
Antd.......................................................................................................................12
Tuần 7: Học cách xây dựng cấu trúc của một dự án ReactJS với thư viện Antd và
Less........................................................................................................................12

Tuần 8: Xây dựng một ứng dụng mẫu...................................................................13
Tuần 9: Xây dựng Module quản lý Category của dự án Idrink.............................13
Tuần 10: Xây dựng Module quản lý Product của dự án Idrink.............................13
GIỚI THIỆU VỀ DỰ ÁN.............................................................................................15
Tổng quan..................................................................................................................15
Thực hiện...................................................................................................................15
Kết quả......................................................................................................................15
TÀI LIỆU THAM KHẢO............................................................................................16

5


GIỚI THIỆU CƠNG TY THỰC TẬP
Giới thiệu về cơng ty CodeLink

Zinisoft là công ty phần mềm chuyên về phát triển sản phẩm cho các công ty
startup. Zinisoft sử dụng NodeJS, Nestjs, SailJS, Medusa, ReactJS, ReactNative cho
ứng dụng trên web và mobile.
Khách hàng của CodeLink đến từ Pháp, Úc, Singapore và Việt Nam. Các kỹ
sư sẽ làm việc trực tiếp với những CEO,... Yêu cầu công việc khá cao nhưng các
bạn nhân viên sẽ phát triển rất nhanh từ những dự án này.
Zinisoft tạo ra những sản phẩm cho khách hàng đến từ nhiều lĩnh vực khác
nhau. Các tính năng chính của những sản phẩm Zinisoft là CMS, E-commerce.

6


Một số dự án của công ty
Kindie.io

Dự án phát triển ứng dụng mobile dành cho ban quản lý trường mẫu giáo và phụ
huynh (IOS và ANDROID).
ACBS.com.vn

7


Dự án phát triển website cho ngân hàng ACB dành cho việc quản lý CMS và chăm
sóc khách hàng.
Sacombank-SBJ.com

Dự án phát triển website dành cho Sacombank-SBJ – Thành viên của Sacombank.
Website dành cho việc quản lý mua bán Trang sức, đồ phong thủy, vàng, …

8


NỘI DUNG THỰC TẬP
Trong 3 tháng thực tập em được training và tham gia vào một dự án chính thức
của Zinisoft mang tên “IDRINK”, một ứng dụng quản lý việc bán rượu cho đối tác tại
Pháp. Ngồi việc thanh tốn qua các cơng thanh tốn điện tử quốc tế, ứng dụng cịn
cho phép thanh tốn qua đồng tiền ảo của ứng dụng.
Tổng quan kế hoạch thực tập
Kéo dài 10 tuần từ ngày 19/09/2022 đến ngày 25/11/2022.
Tuần

Công việc

Người hướng dẫn

1

Làm quen với cơng ty và văn hóa của

Anh Hịa

cơng ty, học cách sử dụng các công cụ cần
thiết mà công ty sử dụng
2

Tìm hiểu về HTML, CSS, Javascript,

Anh Hịa

Typescript
3

Tìm hiểu về ReactJS

Anh Hịa

4

Tìm hiểu về Redux Toolkit - AsyncThunk

Anh Hịa

5

Tìm hiểu về Redux Toolkit Query

Anh Hịa

6

Tìm hiểu về các component chính sẽ sử

Anh Hòa

dụng của thư viện component Antd
7

Học cách xây dựng cấu trúc của một dự án Anh Hòa
ReactJS với thư viện Antd và Less

8

Xây dựng một ứng dụng mẫu

Anh Hòa

9

Xây dựng Module quản lý Category của

Anh Hòa

dự án Idrink
10

Xây dựng Module quản lý Product của dự
án Idrink

9

Anh Hòa


Nội dung chi tiết:
Tuần 1: Làm quen với công ty và văn hóa của cơng ty, học
cách sử dụng các công cụ cần thiết mà công ty sử dụng.
Nội dung chi tiết:
- Được nghe anh Huy giới thiệu về lịch sử của công ty, các đối tác mà
công ty đã, đang và sẽ hợp tác, các tính năng thế mạnh và văn hóa làm việc của
cơng ty.
- Thực tập sinh được hướng dẫn về các công cụ cần thiết sắp tới (Gitlab,
Opentask, email công ty, …).
- Phổ biến nội dung chuẩn bị cho tuần tới.
Tuần 2: Tìm hiểu về HTML, CSS, Javascript.
Nội dung chi tiết:
- Tìm hiểu căn bản về HTML, các thẻ phổ biến. Xây dựng một màn hình
đơn giản.
- Tìm hiểu về CSS – CSS3, một số thư viện phổ biến như Sass, Less, …
- Áp dụng CSS vào bài tập HTML.
- Tìm hiểu về ngơn ngữ Javascript, hướng đối tượng trong Javascript. Sử
dụng Javascript để tương tác với trang web.
- Các bài tập lập trình, thuật tốn viết bằng Javascript.
- Ứng dụng Javascript để viết sự kiện cho các thẻ HTML.
- Tìm hiểu về Promise, Async, Await, ES6 trong Javascript và áp dụng
vào bài tập.

- Làm quen với Typescript.
- Sử dụng Typescript thay vì Javascript để xây dựng dự án.

10


Tuần 3: Tìm hiểu về ReactJS.
Nội dung chi tiết:
- JSX, TSX trong React.
- Rendering phần tử trong React.
- Component và Props trong React.
- State và LifeCycle trong React.
- Handling event trong React.
- Conditional Rendering trong React.
- Lists và Keys trong React.
- Form trong React.
- Functional Component trong React.
- Hook với Component trong React.
Tuần 4: Tìm hiểu về Redux Toolkit – AsyncThunk.
Nội dung chi tiết:
- Khái niệm về Redux.
- Dựng cấu trúc và cấu hình cần thiết để sử dụng Redux Toolkit với
Typescript.
- Cài đặt và học cách sử dụng Redux dev tool.
- Các thành phần của Slice trong Redux Toolkit.
- Selector và Dispatch trong Redux Toolkit
- Cách quản lý trạng thái sử dụng Redux Toolkit.
- Quản lý trạng thái bất đồng bộ với AsyncThunk trong Redux Toolkit.
- Sử dụng CreateAsyncThunk để tạo hành động bất đồng bộ.
- Quản lý trạng thái của hành động bất đồng bộ với ExtraReducers.

11


Tuần 5: Tìm hiểu về Redux Toolkit Query.
Nội dung chi tiết:
- Lý do sử dụng Redux Toolkit Query thay vì quản lý các hành động bất
đồng bộ bên trong AsyncThunk của Redux Toolkit.
- Mở rộng cấu trúc và cấu hình để sử dụng Redux Toolkit Query.
- Các thành phần của ApiSlice trong Redux Toolkit Query.
- Get và Post (Restful API) trong Redux Toolkit Query.
- Update và Delete (Restful API) trong Redux Toolkit Query.
- Quản lý vòng đời của dữ liệu trong Redux Toolkit Query.
- Tự động gọi api cập nhật dữ liệu khi có thay đổi với Redux Toolkit
Query.
- Quản lý lỗi trong Redux Toolkit Query.
- Phân trang dữ liệu trong Redux Toolkit Query.
Tuần 6: Tìm hiểu về các component chính sẽ sử dụng của thư
viện component Antd.
- Tìm hiểu cách sử dụng các component của thư viện Antd tại Ant Design
- The world's second most popular React UI framework.
Tuần 7: Học cách xây dựng cấu trúc của một dự án ReactJS
với thư viện Antd và Less.
Nội dung chi tiết:
- Làm quen với React Route Dom.
- Các điều hướng và áp dụng route trên giao diện.
- Cấu trúc dự án để sự dụng và chỉnh sử route.
- Sử dụng route trong việc phân quyền người dùng trên giao diện.

12

- Áp dụng các component của Antd để xây dựng các layout chính của ứng
dụng.
- Sử dụng các thư viện CSS để tùy chỉnh trên giao diện.
Tuần 8: Xây dựng một ứng dụng mẫu.
Nội dung chi tiết:
- Áp dụng các kiến thức đã học trong các tuần qua để xây dựng một ứng
dụng đơn giản với các trang HOME, ABOUT, LOGIN.
- Được các anh điều chỉnh convention code cho phù hợp và các tổ chức
code trong ứng dụng.
Tuần 9: Xây dựng Module quản lý Category của dự án Idrink.
Nội dung chi tiết:
- Tạo giao diện của Module Category bằng React, áp dụng những kiến
thức đã được training từ Design trên Figma.
- Tích hợp đa ngơn ngữ sử dụng thư viên I18n.
- Sử dụng Redux Toolkit Query để thực hiện những hành động gọi api từ
backend.
- Quản lý các trạng thái trên màn hình (thành cơng, thất bại, đang tải, …).
- Tạo Form cho việc thêm mới, chỉnh sửa Category.
- Validate form.
- Góp ý và chỉnh sửa theo hướng dẫn của anh Hòa.
Tuần 10: Xây dựng Module quản lý Product của dự án Idrink.
Nội dung chi tiết:
- Tạo giao diện của Module Product bằng React, áp dụng những kiến thức
đã được training từ Design trên Figma.

13

- Tích hợp đa ngơn ngữ sử dụng thư viên I18n.
- Sử dụng Redux Toolkit Query để thực hiện những hành động gọi api từ
backend.
- Quản lý các trạng thái trên màn hình (thành cơng, thất bại, đang tải, …).
- Tạo Form cho việc thêm mới, chỉnh sửa Product.
- Validate form.
-

Góp ý và chỉnh sửa theo hướng dẫn của anh Hòa.

14


GIỚI THIỆU VỀ DỰ ÁN
Tổng quan
Dự án là một ứng dụng Quản lý việc bán rượu của một đối tác đến từ Pháp, trong
đó ứng dụng có thể tạo các Event để thúc đẩy việc marketing cho khách hàng, cũng
như rút ngắn quá trình mua hàng cho khách hàng nhằm gia tăng trải nghiệm mà vẫn
giữ được các yêu cầu về bảo mật, thanh toán bằng ứng dụng React Native Mobile.
Ngồi ra dự án cịn tạo đồng tiền ảo riêng để sử dụng cho việc thanh toán bằng Near
Protocol. Hiện dự án vẫn còn trong giai đoạn phát triển các tính năng khác trên cả
Mobile và Web.
Thực hiện
Trước khi em tham gia thực tập. Team đã xây dựng cấu trúc dự án gần như hoàn
chỉnh. Bản Mobile đã hoàn thiện theo yêu cầu hiện tại của khách hàng. Bản web đang
trong quá trình xây dựng thêm. Em đã may mắn được tham gia để thực hiện 2 Module
quản lý Category và Product của dự án tại bản web. Dưới sự hỗ trợ nhiệt tình và tận
tụy từ anh Hịa thì 2 tính năng của em cũng đã tương đối ổn. Và được chấp nhận để
tích hợp vào nhánh chính của dự án. Vì thời gian thực tập khơng q dài nên em chưa
được thử sức với blockchain và smart contract – là 2 cơng nghệ được tích hợp thêm

cho việc thanh toán và tạo đồng tiền ảo mới cho dự án.
Kết quả
Hoàn thiện được 2 Module Category và Product của dự án. Vì một số lý do về chính
sách của cơng ty mà em khơng thể trình bày kết quả trong tài liệu báo cáo.

15


TÀI LIỆU THAM KHẢO
[1].

Gettings Start - React

[2].

Gettings Started - Redux Toolkit

[3].

RTK - Redux Toolkit Query

[4].

Ant Design

[5].

Home v6.6.1 | React Router

16