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

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 NEXTJS VÀ
NESTJS

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

: Zodinet
: Phạm Minh Tiến
: Võ Xuân Tú


2

TP.Hồ Chí Minh, tháng … năm 2022
LỜI MỞ ĐẦU
Trong bối cảnh ngành công nghệ thông tin đang phát
triển mạnh mẽ như hiện nay, việc ứng dụng các công nghệ vào
kinh doanh, hỗ trợ doanh nghiệp, hay chỉ đơn giản là học tập
hoặc thao tác một số công việc cá nhân đã gần như trở thành
thói quen, thậm chí là cơng cụ tương tác cơ bản mỗi ngày. Hầu
hết các nhu cầu của người dùng chúng ta đã trở nên đơn giản
hoá, nhanh hơn, và tiện lợi hơn nhờ các nền tảng cơng nghệ,
điển hình là ứng dụng web.
Việc phát triển một ứng dụng web có thể sử dụng các

cơng cụ và framework khác nhau. Ở front-end có thể kể tên
đến như ReactJS, VueJS, NextJS,.... Cịn back-end thì có
ExpressJS, Django, NestJS, Spring,…
NextJS là một framework nhỏ gọn được xây dựng dựa trên
ReactJS, Webpack và Babel giúp chúng ta xây dựng ứng dụng
Server Side Rendering kết hợp với ReactJS một cách dễ dàng
và nhanh chóng.
NestJS là một framework Node.JS cho phép xây dựng ứng
dụng phía server. Nest mở rộng các framework Node.js như
Express hay Fastify để bổ sung thêm nhiều module hay thư
viện hỗ trợ việc xử lý tác vụ. Đây là một framework mã nguồn
mở, sử dụng TypeScript và rất linh hoạt để xây dựng các hệ
thống backend.
Bên cạnh thời gian học tập trên trường, em muốn tích lũy
thêm kinh nghiệm thực tế, cũng như mong muốn được tham
gia làm việc trong một mơi trường chun nghiệp. Vì vậy, em
đã đăng ký mơn thực tập và bắt đầu tìm kiếm cơng việc. May
mắn thay, em đã vượt qua kì tuyển thực tập sinh của công ty
Zodinet và được thực tập tại công ty.

Võ Xuân Tú


3

LỜI CẢM ƠN
Trân trọng gửi lời cảm ơn Công ty Zodinet đã tạo điều
kiện cho em được thực tập tại công ty.
Chỉ trong một thời gian ngắn nhờ sự chỉ dẫn nhiệt tình của
các mentors, em đã tiếp thu được những kiến thức quan trọng

để có thể xây dựng được một ứng dụng web hoàn thiện. Chân
thanh cảm ơn các anh chị trong team đã bỏ nhiều thời gian,
công sức để hướng dẫn em hoàn thành đợt thực tập này.
Những kiến thức và kinh nghiệm đó giúp em có thể hồn thiện
bản thân hơn và có thêm kinh nghiệm trong quá trình phát
triển phần mềm.
Cũng như 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.
Võ Xuân Tú
Tp Hồ Chí Minh, …/…/2022

Võ Xuân Tú


4

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

…………………………………………………………………………………..
…………………………………………………………………………………..
…………………………………………………………………………………..
…………………………………………………………………………………..
…………………………………………………………………………………..
…………………………………………………………………………………..
…………………………………………………………………………………..
…………………………………………………………………………………..
…………………………………………………………………………………..
…………………………………………………………………………………..
…………………………………………………………………………………..
…………………………………………………………………………………..
…………………………………………………………………………………..
Võ Xuân Tú


5

MỤC LỤC
Chương 1: Giới thiệu công ty thực tập...............................6
1. Giới thiệu công ty Zodinet:...........................................6
2. Sản phẩm của công ty:..................................................7
Chương 2: Nội dung thực tập...............................................8
1. Tìm hiểu cơng ty và các kỹ năng cơ bản trong công
ty 8
2. Nghiên cứu kĩ thuật:......................................................8
3. Thực hiện Project:........................................................12
4. Lịch làm việc:................................................................13
Chương 3: Chi tiết về project.............................................14
1. Giới thiệu về ứng dụng................................................14

2. Thực hiện:......................................................................18

Hình
Hình
Hình
Hình
Hình
Hình
Hình
Hình
Hình
Hình
Hình

DANH MỤC HÌNH ẢNH

1. Logo cơng ty Zodinet....................................................6
2. Website cơng ty Zodinet...............................................6
3. Sản phẩm Vietnam Healthy Application........................7
4. Sản phẩm Skin365........................................................7
5. Sản phẩm Camly Academy...........................................8
6. Thiết bị khơng hỗ trợ...................................................14
7. Màn hình lướt tìm bạn.................................................15
8.Xem chi tiết thơng tin người dùng khác.......................16
9. Màn hình tìm bạn trên map.........................................16
10. Màn hình trang cá nhân............................................17
11. Màn hình chat...........................................................18

DANH MỤC BẢNG
Bảng 1. Lịch làm việc..............................................................13

Võ Xuân Tú


6

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

Hình 1. Logo công ty Zodinet

1. Giới thiệu công ty Zodinet:
 Tên công ty: Công ty TNHH Công Nghệ Zodinet
 Website công ty: Zodinet.com

Hình 2. Website công ty Zodinet

 Địa chỉ: 43 Đường số 3, Phường Hiệp Bình Chánh,
Quận Thủ Đức, Thành phố Hồ Chí Minh, Việt Nam
 Điện thoại: 0866090209
 Email:
 Năm thành lập: 2016
Zodinet được thành lập vào năm 2016 và có trụ sở
chính tại thành phố Hồ Chí Minh. Lĩnh vực của công
ty là phát triển phần mềm, trang web cho các dự án
thương mại điện tử, chuyển đổi kỹ thuật số, ngân

Võ Xuân Tú


7

hàng, blockchain, giáo dục, y tế và các dự án nước
ngồi khác.
2. Sản phẩm của cơng ty:
- Vietnam Healthy Application

Hình 3. Sản phẩm Vietnam Healthy Application

- Skin365

Hình 4. Sản phẩm Skin365

- Camly Academy

Võ Xuân Tú


8

Hình 5. Sản phẩm Camly Academy

Chương 2: Nội dung thực tậ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, q
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, giới thiệu các thành viên trong nhóm thực tập,
chương trình thực tập,…
Kết quả : Hiểu thêm về cơng ty Zodinet, 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:
Võ Xuân Tú


9

Thời gian: 1 ngày
Nội dung: Tìm hiểu các cơng cụ sẽ được sử dụng
trong quá trình làm việc. Trong thời gian này, cài đặt
các công cụ phục vụ công việc như: Visual studio
code, Git, Clickup – phân công công việc, PostgreSQL
– cơ sở dữ liệu, Clockify – công cụ ghi thời gian làm
công việc, Figma,…
Thực hiện: thực hành sử dụng các công cụ nêu trên.
Kết quả: làm quen được với các cơng cụ
2.2. Tìm hiểu HTML và CSS:
Thời gian: 2 ngày
Nội dung: được training các kỹ thuật về html, css,
scss
- html: cấu trúc và các thành phần của trang web,

phân chia các đoạn văn bảng, header, footer, …
- css: tạo style cho trang web như màu sắc, khoảng
cách, phông chữ,…
- scss: là tiền sử lý css, giúp việc code css giống
như ngơn ngữ lập trình, có cấu trúc rõ ràng, rành
mạch, dễ phát triển và bảo trì code.
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
Kết quả:
- Nắm được kiến thức html-css-scss cơ bản
- Nắm được kĩ thuật đặt tên BEM
- Có thể tạo ra được layout cho trang web, style
theo design và responsive
2.3. Tìm hiểu về Javascript, ES6 và RESTful API
Thời gian: 1 ngày
Nội dung : tìm hiểu các kiến thức cơ bản về
Javascript, ES6 và RESTful API
- Tìm hiểu JS DOM
- Tìm hiểu JQuery
- Tìm hiểu object, function, class, async

Võ Xuân Tú


10

- Tìm hiểu về các HTTP method của endpoint
- Các quy ước về resource và endpoint
Thực hiện:

- Tham gia đầu đủ các buổi training của công ty
- Làm các bài thực hành
Kết quả:
- Nắm được các kiến thức cơ bản liên quan tới
Javascript, ES6
- Biết cách viết ra một url theo RESTful API
2.4. Tìm hiểu về HTTP request/Session-CookieStorage/Source control
Thời gian: 1 ngày
Nội dung: tìm hiểu về HTTP request, Session-CookieStorage và Source control
- HTTP request: là thông tin được gửi tử Client lên
Server, để yêu cầu Server tìm hoặc sử lý một số
thơng tin, dữ liệu mà Client muốn. Tìm hiểu các
phương thức của HTTP request như GET, POST,
PUT, DELETE,..
- Session: là một phiên làm việc được dùng trong
lập trình web và có thể kết nối tới database
- Cookie: là một file tạm được tự động tạo trong
máy tính mỗi khi người dùng truy cập vào một
trang web nào đó, nó sẽ lưu những thông tin liên
quan đến cá nhân như tài khoản để sử dụng cho
lần đăng nhập sau.
- Local storage: là một loại lưu trữ web cho phép
các trang web và ứng dụng javascript lưu trữ và
truy cập dữ liệu ngay trong trình duyệt mà khơng
có ngày hết hạn.
- Session storage: cũng giống như local storage thì
session storage cũng được dùng để lưu trữ dữ liệu
trên trình duyệt của khách truy cập, nhưng dữ liệu

Võ Xuân Tú

11

đó sẽ biến mất khi người dùng đóng tab trình
duyệt.
- Source control: tìm hiểu về git và cách sử dụng git
với các câu lệnh
Thực hiện:
- Tham gia đầu đủ các buổi training của cơng ty
- Tìm hiểu về HTTP request, Session, Cookie,
Storage và cách sử dụng chúng
- Tìm hiểu về git và các câu lệnh thao tác với
repository
- Làm các bài thực hành
Kết quả:
- Nắm được kiến thức cơ bản về HTTP request
- Biết cách sử dụng Session, Cookie, Storage
- Biết cách tạo ra một git repository và thao tác với
repository thơng qua các câu lệnh
2.5. Tìm hiểu về ReactJS và NextJS
Thời gian: 3 ngày
Nội dung: tìm hiểu về ReactJS kết hợp với Typescript
và NextJS
- ReactJS:
 ReactJS là một thư viện Javascript dùng để xây
dựng giao diện người dùng, nó không phải là
một framework js nào hết
 React hỗ trợ việc xây dựng các thành phần
(components) UI có tính tương tác cao, có trạng

thái và có thể sử dụng lại được
- Typescript: là một dự án mã nguồn mở được phát
triển bởi Microsoft, nó có thể được coi là một
phiên bản nâng cấp của Javascript bởi việc bổ
xung tùy chọn kiểu tĩnh và lớp hướng đối tượng
mà Javascript khơng có
- NextJS: là một open-source React front-end
framework được xây dựng các tính năng như

Võ Xuân Tú


12

Server Side Rendering (SSR). NextJS được xây
dựng dựa trên React có nghĩa NextJS lấy những lợi
thế của React và bổ xung thêm các tính năng.
Thực hiện:
- Tìm hiểu về ReactJS và cách sử dụng ReactJS
- Tìm hiểu Typescript là gì và kết hợp nó với ReactJS
- Tìm hiểu NextJS và cách sử dụng NextJS với
Typescript
Kết quả:
- Biết cách tạo ra các component để tái sử dụng
chúng
- Biết cách sử dụng ReactJS và NextJS kết hợp với
Typescript để tạo ra một trang web đơn giản
2.6. Tìm hiểu về NodeJS và NestJS
Thời gian: 3 ngày
Nội dung: tìm hiểu về NodeJS và NestJS và cách tạo

Project với NodeJS và NestJS
- NodeJS: là một mơi trường runtime chạy Javascript
đa nền tảng và có mã nguồn mở, được sử dụng
chạy các ứng dụng web bên ngồi trình duyệt của
client.
- NestJS: là 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).
Thực hiện:
- Tìm hiểu về NodeJS, cách cài đặt và sử dụng
- Tìm hiều về NestJS, cách cài đặt và sử dụng
Kết quả:
- Nắm được các kiến thức cơ bản về NodeJS và có
thể tạo được một project đơn giản sử dụng NodeJS
Võ Xuân Tú


13

- Nắm được các kiến thức cơ bản về NestJS và có
thể tạo được một project đơn giản sử dụng NestJS
2.7. Tìm hiểu về SQL và NoSQL Database
Thời gian: 1 ngày
Nội dung: tìm hiểu về SQL và NoSQL Database
- SQL: là ngơn ngữ truy vấn có cấu trúc. Nó là một
ngôn ngữ, là tập hợp các lệnh để tương tác với cơ
sở dữ liệu. Dùng để lưu trữ, thao tác và truy xuất

dữ liệu được lưu trữ trong một cơ sở dữ liệu quan
hệ. Trong thực tế, SQL là ngôn ngữ chuẩn được sử
dụng hầu hết cho hệ cơ sở dữ liệu quan hệ. Tất cả
các hệ thống quản lý cơ sở dữ liệu quan hệ
(RDMS) như MySQL, MS Access, Oracle, Postgres
và SQL Server… đều sử dụng SQL làm ngôn ngữ
cơ sở dữ liệu chuẩn.
- NoSQL: tên gốc là Non SQL cung cấp một cơ chế
lưu trữ và truy xuất dữ liệu được mơ hình hóa khác
với các quan hệ bảng được sử dụng trong các cơ
sở dữ liệu quan hệ.
Thực hiện:
- Tìm hiểu về SQL và NoSQL Database, cách cài đặt
phần mềm để tương tác với các cơ sở dữ liệu trên.
Kết quả:
- Nắm được cách sử dụng các cơ sở dữ liệu SQL và
NoSQL
3. Thực hiện Project:
Sau một 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ề lập trình ứng
dụng web. Sau đó sinh viên bắt đầu kết hợp các kiến thức
đã học vào việc lập trình một ứng dụng web hồn chỉnh.
4. Lịch làm việc:
Bảng 1. Lịch làm việc

Tuầ
n

Cơng việc

Người
hướng dẫn

Mức
độ

Nhận
xét
Võ Xuân Tú


14

hoà
của
n
người
thàn hướn
h
g dẫn
1

2

3

4

HTTP
Request/SessionCookie-Storage/Sourc

e Control
HTML-Fundamental /
CSS
Coding Standards
and Convention &
Developer tool
Javascript & ES6 &
RESTful API
ReactJS Fundamental

Anh Đạt
Đới/Anh
Tuấn Lê/Chị
Ngân
Anh Long
Anh Đạt Vũ

Anh Tâm
Nguyễn
Anh Tuấn
Lê
NodeJS Fundamental Anh Đạt Đới
NodeJS Fundamental Anh Đạt Đới
SQL Database &
Anh Tuấn
NoSQL
Diệp
Kickoff final Project
Tất cả anh
chị mentors

Web Security &
Anh Cường
Hacking
Quách
Mobile development
Anh Tuấn
Lê
Performance
Anh Tiến
Optimize – Client side Phạm
– FESTACKs
System Architecture Anh Long
& Design
Đào/ Anh
Đạt Đới/
Anh Đạt Vũ
Design Database
Anh Long
Đào

Võ Xuân Tú


15

5

Design Database

Final Project

6-78
9

Final Project
Final Project
Demo Final Project

Anh Đạt
Đới/ Anh
Đạt Vũ
Tất cả anh
chị mentors
Tất cả anh
chị mentors
Tất cả anh
chị mentors

Chương 3: Chi tiết về project
1. Giới thiệu về ứng dụng
Ứng dụng Foxy là một ứng dụng web chỉ hỗ trợ cho xem
trên các thiết bị di động bao gồm các tính năng chính: Chỉ
hỗ trợ cho thiết bị di động, lướt tìm bạn, tìm bạn xung
quanh bằng map, chat với bạn, xem thông tin bạn bè,
trang thông tin cá nhân.
Framework sử dung:
- Front-end: NextJS
- Back-end: NestJS
1.1. Tính năng chỉ hỗ trợ cho thiết bị di động
Mơ tả: tính năng này chỉ cho phép người dùng
sử dụng trang web khi truy cập bằng thiết bị di động

Hình 6. Thiết bị không hỗ trợ

1.2. Tính năng lướt tìm bạn:

Võ Xn Tú


16

Mơ tả: tính năng này cho phép người dùng có
thể lướt (trái và phải) để có thể xem được một số
thơng tin cơ bản như hình ảnh mặc định, tên, tuổi và
khoảng cách so với bản thân mình của những người
chưa kết bạn với minh mà đang gần với mình
(khoảng 200 m). Khi này nếu người dùng muốn xem
thông tin của người đang hiện trên màn hình thì
nhấn vào nút có hình chữ i ở trên màn hình là sẽ
xem được các thơng tin chi tiết về người đó. Và
người dùng có thể nhấn nút hình trái tim để gửi u
cầu kết bạn hoặc nhấn nút có hình chữ X để block
người đó ln.

Hình 7. Màn hình lướt tìm bạn

1.3. Tính năng xem thơng tin chi tiết của người
dùng
Mơ tả: Tính năng này cho phép người dùng có
thể xem thêm được thơng tin chi tiết của một người
dùng nào đó đang gần mình, mà người dùng này

Võ Xuân Tú


17

không phải là bạn bè hoặc không bị block. Ở trang
này hiển thị các thơng tin như một số hình ảnh, tên ,
tuổi, sở thích,…

Hình 8.Xem chi tiết thơng tin người dùng khác

1.4. Tính năng tìm bạn xung quanh bằng map
Mơ tả: tính năng này cho phép người dùng có
thể thấy được trực quan hơn các người dùng mà
mình chưa kết bạn hay block đang ở gần mình thơng
qua map. Và ở đây cũng có thể xem được thơng tin
của người dùng khác bằng cách nhấn nút i trên màn
hình.

Võ Xuân Tú


18

Hình 9. Màn hình tìm bạn trên map

1.5. Tính năng trang cá nhân
Mô tả: ở trang cá nhân người dùng có thể thay
đổi được một số thơng tin như avatar, ảnh mặc định,
ảnh yêu thích để hiển thị cho người khác xem khi họ

lướt, thông tin cá nhân như sở thích, chiều cao, …

Võ Xuân Tú


19

Hình 10. Màn hình trang cá nhân

1.6. Tính năng chat với bạn
Mơ tả: tính năng này cho phép người dùng có
thể nhắn tin với những người họ đã kết bạn.

Hình 11. Màn hình chat

Võ Xuân Tú


20

2. Thực hiện:
Sau thời gian trau dồi kiến thức từ các buổi training
và tự nghiên cứu tài liệu. Cùng với sự giúp đỡ của các anh
chị mentor thì các thành viên trong nhóm thực tập đã
hồn thành xong dự án.

Võ Xuân Tú