Lập trình ứng dụng web với nextjs, 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, 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õ Minh Tuấn

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


2

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 mọi
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 framework đã
đượ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ư Nextjs và Nestjs.
Nextjs là một framework front-end React được phát triển dưới dạng opensource bổ sung các khả năng tối ưu hóa như render phía máy chủ (SSR) và tạo
trang web static.
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 sử dụng TypeScript để phát
triển, nhưng cũng hỗ trợ cả Javascript. Nest được lấy cảm hứng từ kiến trúc
Agular nên với các bạn đã làm việc với Agular, vì vậy nó khơng cịn xa lạ gì và
có thể dễ dàng tiếp cận đối với bất kỳ ai đã sử dụng Agular.
Với niềm đam mê về lập trình web và muốn có thêm kinh nghiệm thực tế,
em đã quyết định nộp đơn xin thực tập tại các công ty khác nhau. May mắn, em
đã được chọn làm thực tập sinh tại công ty Zodinet

Võ Minh Tuấn


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ó cơ
hội được thực tập tại công ty.
Chỉ trong thời gian ngắn, nhưng nhờ sự chỉ dẫn nhiệt tinh của nhóm
trainer, nhóm thực tập chúng em đã tiếp thu được những kiến thức quan trọng
để có thể làm được một ứng dụng web. Chân thành cảm ơn anh chị trong nhóm
trainer đã bỏ ra nhiều thời gian, công sức để hướng dẫn em hoàn thanh đợt thực
tập này.
Đặc biệt cảm ơn anh Phạm Minh Tiến và tất cả mọi người trong team đã
hướng dẫn, giúp đỡ tận tình những khó khăn trong cơng việc, đã chỉ dẫn cho em
cách lên kế hoạch và những kỹ năng cần có đới với web developer.

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 cho em làm báo cáo này.
Võ Minh Tuấn
Tp, Hồ Chí Minh, ngày … tháng … năm 2022

Võ Minh Tuấn


4

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

……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
Võ Minh Tuấn


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 về công ty Zodinet ...................................................................... 6
2. Sản phẩm của công ty .................................................................................. 6
Chương 2: Nội dung thực tập ............................................................................ 7
1. Tìm hiểu cơng ty và các kỹ năng cơ bản của công ty ................................. 7
2. Nghiên cứu kỹ thuật .................................................................................... 8
3. Thực hiện Project....................................................................................... 11
4. Lịch làm việc ............................................................................................. 11
Chương 3: Chi tiết Project ............................................................................... 13
1. Giới thiệu ứng dụng ................................................................................... 13
2. Thực hiện ................................................................................................... 18
TỔNG KẾT ....................................................................................................... 19
DANH MỤC HÌNH ẢNH
Hình 1. Logo Zodinet ............................................................................................ 6
Hình 2. Sản phẩm Skin365 ................................................................................... 6
Hình 3. Sản phẩm Vietnam Healthy Application ................................................. 7
Hình 4. Sản phẩm Goohyeah ................................................................................ 7

Hình 5. Lướt tìm bạn bè ...................................................................................... 14
Hình 6. Xem thơng tin bạn bè ............................................................................. 15
Hình 7. Tìm bạn trên bản đồ ............................................................................... 16
Hình 8. Trị chuyện với bạn bè ........................................................................... 17
Hình 9. Trang cá nhân ......................................................................................... 18

Võ Minh Tuấn


6

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

Hình 1. Logo Zodinet

1. Giới thiệu về công ty Zodinet
- Tên công ty: Công ty TNHH Công nghệ Zodinet
- Địa chỉ: 43 Số 3, P. Hiệp Bình Chánh, Q. Thủ Đức, TP. Hồ Chí Minh
- Website: />- Email:
- Số điện thoại: 0866090209
2. Sản phẩm của công ty
Lĩnh vực của Zodinet là phát triển phần mềm, website cho các dự
án thương mại điện tử, chuyển đổi kỹ thuật số, ngân hàng, blockchain,
giao dục, y tế và các dự án nước ngoài khác.
Một số sản phẩm của công ty:
- Skin365: ứng dụng mua sắm mỹ phẩm trực tuyến cho chuỗi mỹ phẩm
Shin365

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

Võ Minh Tuấn


7

- Vietnam Healthy Application: Ứng dụng được thiết kế và phát triển để
hỗ trợ và bảo vệ người Việt khỏi Covid19

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

- Goohyeah: Goohyeah Business là ứng dụng tất cả trong một, giúp bạn
có thể quản lý doanh nghiệp mọi lúc, mọi nơi

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

Chương 2: Nội dung thực tập
Đợt thực tập này giúp cho các sinh viên thực tập nắm rõ được các kiến
thức về lập trinh ứng dụng web. Đồng thời rèn luyện các kỹ năng mềm như làm
việc nhóm, giao tiếp, trao đổi với các thành viên khác trong công ty. 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 ứng dụng web chun nghiệp.
1. Tìm hiểu cơng ty và các kỹ năng cơ bản của 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 giám đốc công ty giới thiệu về cơng ty, q trình thành lập và
Võ Minh Tuấn


8

phát triể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 Zodinet, q trình thành lập và phát triển.
Có thêm hiểu biết về cách thức làm việc trong một công ty công nghệ
thống tin đồng thời thực tập sinh có ý thức hơn trong việc làm việc có kế
hoạch, trao đổi, giải thích với những thành viên khác trong công ty.
2. Nghiên cứu kỹ thuật
2.1. Tìm hiểu về các cơng cụ làm việc
Thời gian: 1 ngày
Nội dung: Tìm hiểu về các cơng cụ được sử dụng trong quá trình
làm việc.
Trong thời gian này, mentor hướng dẫn các thực tập sinh tìm hiểu
về các cơng cụ giúp ích cho q trình làm việc sau này. Một số
phần mềm trong đó như Microsoft Teams – sử dụng trong làm việc
nhóm. Clockify – theo dõi thời gian làm việc, Visual Studio Code –
text editor được sử dụng chinh trong quá trình phát triển sản phầm,
Figma, Git, ClickUP – phân chia công việc.
Thực hiện: Học lý thuyết và ứng dụng các cơng cụ trên.
Kết quả: Có thể sử dụng và kết hợp các cơng cụ kể trên.
2.2. Tìm hiểu về HTTP Request/ Sessions – Cookie – Storage/ Source
Control
Thời gian: 1 ngày
Nội dung: Được trang bị kiến thức về http request, sessions,
cookie, storage và source control
- Http request: là thông tin gửi từ client lên server, để yêu cầu
server tìm hoặc xử lý một số thông tin, dữ liệu mà client muốn.
Các phương thức của http request: get, post, put, delete, …

- Local storage: là nơi lưu trữ dữ liệu trên máy client dưới dạng
key/value trong trình duyệt web.
- Session storage: tương tự như local storage, nó cũng được dùng
để lưu trữ dữ liệu ở máy client. Nhưng dữ liệu trong session
storage sẽ biến mất khi tab trình duyệt bị đóng.
- Cookie: là các tệp được trang web người dùng truy cập tạo ra.
Nó giúp trải nghiệm trực tuyến trở nên dễ dàng hơn bằng cách
Võ Minh Tuấn


9

lưu thơng tin duyệt web. Với cookie, các website có thể duy trì
trạng thái đăng nhập của bạn, ghi nhớ tùy chọn trang web.
Thực hiện:
- Tìm hiểu về http request, các phương thức phổ biến của http
request, làm bài tập thực hành.
- Tìm hiểu về session, cookie, local storage và cách sử dụng
chúng.
- Tìm hiểu về git, các câu lệnh thao tác với git, làm bài tập thực
hanh
Kết quả:

2.3.

- Nắm được kiến thức về http request, session, cookie, local
storage, git
Tìm hiều về HTML và CSS, SCSS
Thời gian: 2 ngày
Nội dụng: Được training về kỹ thuật html, css, scss cơ bản và nâng

cao, các kiến thức giúp tạo nên giao diện responsesive
- HTML: ngôn ngữ đánh dấu siêu văn bản, dùng trong việc phân
chia các đoạn văn, heading, links, blockquotes,…
- CSS: ngôn ngữ tạo phong cách cho trang web, giúp trang web
trở nên sinh động hơn.
- SCSS: chương trình tiền xử lý CSS. Nó giúp bạn viết CSS theo
cách của một ngơn ngữ lập trinh, có cấu trúc rõ ràng, rành
mạch, dễ phát triển và bảo trì code hơn.
Thực hiện: Tham gia đầy đủ các buổi training, làm bài tập thực
hành về html, css, scss
Kết quả:

2.4.

- Nắm được kiến thức về html, css, scss
- Có thể dựng nên layout cho trang web, style theo thiết kế, tạo ra
giao diện responsive
ReactJs Fundamental & NextJs
Thời gian: 3 ngày
Nội dung: Tìm hiểu về reactjs và nextjs, sử dụng với typescript
- ReactJs:

Võ Minh Tuấn


10

▪ Là một thư viện JavaScript mã nguồn mở do Facebook
xây dựng và phát triển. Thư viện này được sử dụng để tạo
ra ứng dụng web với hiệu suất cao, tốc độ load nhanh.

▪ Khái niệm chính:
• JSX: là 1 cú pháp mở rộng cho JavaScript, là kết
hợp của JavaScript với XML. Nó chuyển đổi cú
pháp dạng gần như XML về thành JavaScript, giúp
chúng ta có thể code ReactJs bằng cú pháp của
XML thay vì phải dùng JavaScript.
• Component: nơi render ra các mã html thuần, cho
phép chia nhỏ các đoạn code UI thành các phần
độc lập với nhau, tiện cho việc quản lý và tái sử
dụng.
• Props: là nhữn thuộc tính của một component.
• State: dùng để biểu diễn trạng thái của component.
- NextJs: là một framework được xây dựng dựa trên nền của
React. Chính vì dựa trên nền của React nên Nextjs mang những
cốt lõi tương tự React. Nextjs cung cấp những ưu thế mới và
vượt trội mà React khơng có như Server side rendering. Nextjs
giúp các nhà phát triển tạo ra các ứng dụng web có hiệu xuất tốt
và web tĩnh siêu nhanh.
- Typescritp: là dự án mã nguồn mở được phát triển bởi
Microsoft, nó có thể được coi là phiên bản nâng cao của
javascript bởi việc bổ sung kiểu tĩnh và lớp hướng đối tượng mà
không có ở javascript.
Thực hiện:
- Tìm hiểu về ReactJs, các thành phần của ReactJs
- Cách sử dụng Nextjs kết hợp với typescript
- Làm bài tập thực hành liên quan đến Nextjs
Kết quả:

2.5.

- Biết cách tạo component, sử dụng props, state, redux trong
ReactJs
- Biết cách sử dụng ReactJs, Nextjs kết hợp với typescript
Nodejs & NestJs
Thời gian: 3 ngày
Võ Minh Tuấn


11

Nội dung: Tìm hiểu về Nodejs, Nestjs và tạo dự án mẫu với Nestjs
- Nodejs: là một nền tảng (Platform) phát triển độc lập được xây
dựng ở trên javascript runtime của chrome mà chúng ta có thể
xây dựng được các ứng dụng mạng một cách nhanh chóng và dễ
dàng mở rộng.
- Nestjs: là một framework Nodejs cho phép xây dựng ứng dụng
phía server. Nestjs mở rộng các framework Nodejs như Express
và 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 hệ thống backend.
Thực hiện:
- Tìm hiểu về Nodejs và cài đặt, tạo project mẫu
- Tìm hiểu về Nestjs, cách sử dụng và cách cài đặt, tạo project
mẫu
Kết quả: Biêt thêm về Nodejs, Nestjs và cách cài đặt cũng như sử
dụng chúng.
2.6.

SQL & NoSQL database
Thời gian: 1 ngày

Nội dụng: Tìm hiểu về SQL và NoSQL và cách sử dụng chúng
- 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ệ.
- NoSQL: 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 quan hệ bảng được sử dụng trong các cơ
sở dữ liệu kiểu quan hệ.
Thực hiện: Tìm hiểu về SQL và NoSQL
Kết quả: Biết về 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 kiến thức cơ bản về lập trình ứng dụng web. Sau đó sinh viên bắt
đầu thực hiện kết hợp các kiến thức đã học vào việc lập trinh tạo ra một
sản phẩm hoàn chỉnh.
4. Lịch làm việc
Võ Minh Tuấn


12

Tuần

1

2

3

Công việc

HTTP Request/ Session
– Cookie – Storage/
Source control
HTML – Fundamental
& CSS
Coding Standards and
Conventions &
Developer tool
Javascript & ES6 &
Restfull API
ReactJs Fundamental
Nodejs Fundamental
Nodejs Fundamental
Sql database & NoSql
Kick off final project

4

Web Security &
Hacking
Mobile development
Performance optimize –
Client side
System Architecture &
Design
Design database

5

Design database

Người hướng
dẫn

Nhận xét
Mức độ
của
hoàn
người
thanh
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ả các anh
chị mentor

Anh Cường
Quách
Anh Tuấn Lê
Anh Tiến
Phạm
Anh Long/
Anh Đạt Vũ/
Anh Đạt Đới
Anh Long/
Anh Đạt Vũ/
Anh Đạt Đới
Anh Long/
Anh Đạt Vũ/
Anh Đạt Đới

Võ Minh Tuấn


13

Final project
6–8

Final project

9

Final Project
Demo final project

Tất cả anh chị
mentor
Tất cả anh chị
mentor
Tất cả anh chị
mentor

Chương 3: Chi tiết Project
1. Giới thiệu ứng dụng
Ứng dụng Tinai là một ứng dụng giúp mọi người tìm được bạn bè
xung quanh vị trí hiện tại của mình, giúp họ có thể trị chuyện với nhau,
tạo nên mối quan hệ bạn bè hay tinh duyên mới. Nó bao gồm các chức
năng chính: lướt tìm bạn, tìm bạn trên bản đồ, trị chuyện nhắn tin, thay
đổi thơng tin người dùng.
1.1. Tính năng lướt tìm bạn
Mơ tả: Tại trang chủ của Tinai, người dùng có thể lướt tìm bạn
xung quanh vị trí hiện tại của bản thân. Đồng thời có thể xem được
thơng tin về người bạn đó như ảnh đại diện, họ tên, tuổi, mơ tả về
bản thân, sở thích và hình ảnh u thích của họ. Nếu người dùng
cảm thấy thích người bạn đó thì có thể nhấn nút trai tim trên màn
hình hoặc nếu muốn block người đó thì sẽ nhấn nút thùng rác trên
màn hình.

Võ Minh Tuấn


14

Hình 5. Lướt tìm bạn bè

Võ Minh Tuấn


15

Hình 6. Xem thơng tin bạn bè

1.2.

Tìm bạn bạn trên bản đồ
Mô tả: Với chức năng này, người dùng sẽ thấy được các người
dùng khác xung quan minh với vị trí của họ là các hình trai tim, và
vị trí hiện tại của bản thân là dấu chấm màu tím. Khi nhấn vào hình
trái tim nào thì thơng tin của người đó sẽ được hiển thị tại tab nhỏ
ở phía dưới màn hình. Và khi người dùng nhấn vào nút chữ i thì
ứng dụng sẽ hiển thị thơng tin của người bạn đó giống như ở phần
trang chủ.

Võ Minh Tuấn


16

Hình 7. Tìm bạn trên bản đồ

1.3.

Trò chuyện với bạn bè
Mơ tả: Sau khi 2 người đã nhấn nút thích nhau thì 2 người đó sẽ trở
thành bạn bè của nhau và lúc này họ có thể trị chuyện với nhau.

Võ Minh Tuấn


17

Hình 8. Trị chuyện với bạn bè

1.4.

Thay đổi thơng tin
Mơ tả: Người dùng sẽ chỉnh sửa các thông tin các nhân của mình
tại trang cá nhân, chọn các hình yêu thích. Các thơng tin này sẽ
được xem bởi các người dùng khác.

Võ Minh Tuấn


18

Hình 9. Trang cá nhân

2. Thực hiện
Sau hai tháng thực tập, được các anh chị mentor training các kiến
thức cơ bản và tự nghiên cứu tài liệu, công thêm sự giúp đỡ của các anh
chị trong quá trình thực hiện đồ án, sinh viên đã hoan thành xong dự án.

Võ Minh Tuấn

19

TỔNG KẾT
Như vậy, chỉ trong hai tháng ngắn ngủi, em đã trau dồi được 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 cũng đạt được các tính năng cơ bản ban đầu. Do thời gian có
hạn và kinh nghiệm chưa nhiều nên các tính năng cịn đơn giản, hình ảnh
chưa thực sự đẹp như mong đợi.
Chân thành cảm ơn các anh chị mentor đã giúp em hoàn thành thời
gian thực tập tại Zodinet.

Võ Minh Tuấn