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

: Zodinet Technology

Người phụ trách

: Phạm Minh Tiến

Thực tập sinh

: Võ Xuân Tú

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


2

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

DANH MỤC HÌNH ẢNH
Hình 1. Logo cơng ty Zodinet ............................................................................. 6
Hình 2. Website cơng ty Zodinet ......................................................................... 6
Hình 3. Sản phẩm Vietnam Healthy Application ................................................ 7

Hình 4. Sản phẩm Skin365 .................................................................................. 7
Hình 5. Sản phẩm Camly Academy .................................................................... 8
Hình 6. Thiết bị khơng hỗ trợ ............................................................................ 14
Hình 7. Màn hình lướt tìm bạn .......................................................................... 15
Hình 8.Xem chi tiết thơng tin người dùng khác ................................................ 16
Hình 9. Màn hình tìm bạn trên map................................................................... 16
Hình 10. Màn hình trang cá nhân ...................................................................... 17
Hình 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 hàng, blockchain, giáo dục, y tế và các dự án nước
ngoài khác.

Võ Xuân Tú


7

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, 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, 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:
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,

Võ Xuân Tú


9

2.2.

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ụ
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ả:

2.3.

- 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
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
- 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ả:
Võ Xuân Tú


10

2.4.

- 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
Tìm hiểu về HTTP request/Session-Cookie-Storage/Source
control
Thời gian: 1 ngày
Nội dung: tìm hiểu về HTTP request, Session-Cookie-Storage 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 đó 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
Võ Xuân Tú


11

2.5.

- 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
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ư 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ả:

2.6.

- 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
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.
Võ Xuân Tú


12

- NestJS: là một NodeJS framework dùng để phát triển serverside 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ả:

2.7.

- 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
- 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
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:

Võ Xuân Tú


13

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 hoàn chỉnh.
4. Lịch làm việc:
Bảng 1. Lịch làm việc

Tuần

1

2

3

Công việc

HTTP Request/SessionCookie-Storage/Source
Control
HTML-Fundamental /
CSS
Coding Standards and
Convention & Developer
tool
Javascript & ES6 &
RESTful API
ReactJS Fundamental
NodeJS Fundamental
NodeJS Fundamental
SQL Database & NoSQL
Kickoff final Project
Web Security & Hacking

4

Mobile development
Performance Optimize –
Client side – FESTACKs
System Architecture &
Design

Người hướng
dẫn

Mức
độ
hoàn
thành

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

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

Anh Tâm
Nguyễn
Anh Tuấn Lê
Anh Đạt Đới
Anh Đạt Đới
Anh Tuấn
Diệp
Tất cả anh chị
mentors

Anh Cường
Quách
Anh Tuấn Lê
Anh Tiến
Phạm
Anh Long
Đào/ Anh Đạt

Võ Xuân Tú


14

5

Design Database
Design Database
Final Project

6-7-8 Final Project
9

Final Project
Demo Final Project

Đới/ Anh Đạt
Vũ
Anh Long Đào
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õ Xuân Tú


15

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 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,…

Võ Xuân Tú


16

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.

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

Võ Xuân Tú


17

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, …

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.

Võ Xuân Tú


18

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

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 đã hoàn thành xong dự án.

Võ Xuân Tú


19

TỔNG KẾT
Như vậy, chỉ trong hai tháng ngắn ngủi, em đã tiếp thu được rất
nhiều kiến thức cũng như trải nghiệm thực tế về lập trình ứng dụng web.
Ứng dụng demo đạt được các tính năng cơ bản như dự tính ban đầu.
Nhưng do thời gian có hạn nên một số tính năng vẫn chưa được hồn
thiện như mong đợi.
Chân thành cảm ơn các anh chị mentor trong công ty Zodinet đã
giúp em hồn thành kì thực tập tại Zodinet.

Võ Xuân Tú