Báo cáo thực tập lập trình website với nextjs

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 NEXTJS

Cơng ty thực tập

: CÔNG TY TNHH AIOZ VIỆT NAM

Người phụ trách

: Lê Minh Quang

Thực tập sinh

: Nguyễn Thành Đạt

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


LỜI MỞ ĐẦU

Ngày nay, lập trình website là một bộ phận không thể thiếu của ngành công nghiệp
phần mềm. Với tốc độ phát triển vô cùng mạnh mẽ, ngành lập trình web đã và đang là nhân
tố kích thích sự phát triển của công nghệ thông tin thế giới, cả về phần cứng và phần mềm.
Bên cạnh đó là sự phát triển mạnh mẽ của Blockchain và sự xuất hiện của Dapp đã làm thay
đổi mạnh mẽ mảng lập trình website. Vì muốn tìm hiểu sâu về blockchain và Dapp, em
quyết định chọn lập trình website làm định hướng cho việc học tập cũng như việc làm sau
này của mình.

Sau ba năm học tập trên trường, do mong muốn có thêm kinh nghiệm thực tế, cũng
như muốn được tham gia làm việc trong một mơi trường chun nghiệp, em có dự định là sẽ
thực tập vào khoảng thời gian cuối kì học thứ 5 và đầu kì học thứ 6. Vì vậy, sau khi tham
gia phỏng vấn ở một số công ty, em quyết định chọn công ty TNHH AIOZ VIỆT NAM một
môi trường lý tưởng, hiện đại, chuyên nghiệp, trẻ trung là nơi sẽ giúp em thực hiện được dự
định này.


LỜI CẢM ƠN
Trân trọng gửi lời cảm on đến Công Ty TNHH AIOZ VIỆT NAM đã tạo điều kiện
cho em có cơ hội được thực tập tại cơng ty.
Nhờ sự giúp đỡ nhiệu tình của các thành viên trong nhóm Front-end em đã tiếp thu
được rất nhiều kiến thức về quá trình phát triển và xây dựng một website thực tế và những
kiến thức mới mẻ về blockchain.
Đặt biệt cảm ơn anh Lê Minh Quang đã hỗ trợ, giúp đỡ, hướng dẫn em rất nhiều thứ
để em có thể làm nên một sản phẩm hoàn thiện.

Nguyễn Thành Đạt
TP.HCM, ngày 04 tháng 07 năm 2023


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

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


Mục lục
Chương 1. Giới thiệu công ty thực tập..........................................................................6
1.1.

Giới thiệu công ty TNHH AIOZ VIỆT NAM.......................................................6

1.2.

Sản phẩm của công ty...........................................................................................6

Chương 2. Nội dung thực tập.........................................................................................7
2.1.

Tìm hiểu cơng ty và các kỹ năng cơ bản trong công ty.........................................7

2.2.

Nghiên cứu kỹ thuật..............................................................................................7

2.3.

Thực hiện Project..................................................................................................9

2.4.

Lịch làm việc........................................................................................................9

Chương 3. Chi tiết về dự án.........................................................................................12
3.1.

Giới thiệu về dự án.............................................................................................12

3.2.

Thực hiện............................................................................................................12

3.3.

Kế hoạch và triển khai........................................................................................12

Chương 4. Tổng kết......................................................................................................16
Tài Liệu Tham Khảo......................................................................................................17


Chương 1.Giới thiệu công ty thực tập
1.1. Giới thiệu công ty TNHH AIOZ VIỆT NAM
Là một công ty về Blockchain giải quyết các vấn đề phức tạp trong đời sống bằng
cách áp dụng các công nghệ tiên tiến nhất trong lĩnh vực Blockchain và Trí tuệ
nhân tạo (AI)

1.2. Sản phẩm của công ty
-

Blockchain AIOZ Network là một Blockchain Media Web3 Cơ sở hạ tầng, sử
dụng tài nguyên dư thừa của tất cả các máy tính trên tồn thế giới để xây dựng
một DCDN hiệu quả với tốc độ giao hàng tối ưu, chi phí thấp và chất lượng phát
trực tuyến cao nhất.

-

DCDN và AIOZ Node App

-

AIOZ Network Blockchain Explorer: khám phá các giao dịch, khối và dữ liệu cho
AIOZ Network Blockchain.

-

AIOZ Tube: Nền tảng video phi tập trung được xây dựng trên AIOZ Blockchain.


Chương 2.Nội dung thực tập
Đợt thực tập với chủ đề “Lập trình website với Nextjs” nhằm mục đích giúp sinh
viên thực tập được đào tạo về kiến thức cơ bản về blockchain và xây dựng nên một
website hoàn chỉnh tương tác với blockchain cụ thể ở đây là một website NFT
Marketplace, đồng thời rèn luyện những kỹ năng mềm như làm việc nhóm, giao tiếp.
2.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
o Đượ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.
o 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…
o Ngồi ra sinh viên còn được giới thiệu định hướng phát triển của công ty
trong tương lai.

-

Kết quả: Hiểu thêm về công ty AIOZ, 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.2. Nghiên cứu kỹ thuật
2.2.1. 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ụ sẽ được sử dụng trong quá trình làm việc
Trong thời gian này, sinh viên được hướng dẫn tìm hiểu về các cơng cụ sẽ

giúp ích cho cơng việc sau này. Một số phần mềm trong số đó như IDE Visual Studio
Code – là trình soạn thảo, biên tập lập trình mã nguồn miễn phí, Git – hệ thống quản
lý phiên bản phân tán, Slack – là một công cụ hỗ trợ nhắn tin, trao đổi, chia sẻ tài

liệu.
-

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

2.2.2. Tìm hiểu về BlockChain


-

Thời gian: 2 ngày

-

Nội dung: Tìm hiểu về các khái niệm cơ bản về blockchain như là:
o Khái niệm về blockchain
o Các tính chất
o Cách hoạt động
o Cơ chế đồng thuận Proof of Word, Proof of Stake
o Tìm hiểu về Ethereum
o Cách hoạt động của Ethereum
o Tìm hiểu về SmartContract
o Khái niệm về Web3
o Cấu trúc và cách hoạt động của Web3

-

Thực hiện: Tìm hiểu cách mục đã nêu trên, thực hành trên SmartContract thực tế
trên các mạng như Etherum, Aioz Network.

-

Kết quả: Hiểu và nắm rõ các kiến thức về blockchain, thực hiện được các tương
tác trên blockchain.

2.2.3. Tìm hiểu về Nextjs và thư viện Material UI, Etherjs
-

Thời gian: 5 ngày

-

Nội dung: Tìm hiểu các kiến thức cơ bản về Nextjs để tạo nên một website, đồng
thời sử dụng thư viện Material UI để tinh chỉnh giao diện.
o Các khái niệm cơ bản về Nextjs: cấu trúc của một project Nextjs, các khái
niệm về React Hooks, State Management (Redux), Form (React Hook
Form), validation (Yup, Zod) …
o Cách sử dụng Material UI như là: cách thiết lập project với Material UI, sử
dụng các thành phần có sẵn như: Box, Stack, TextField, cách tinh chỉnh
các thành phần…
o Cách sử dụng Etherjs: cách thiết project với Etherjs, sử dụng cách hàm có
sẵn như gọi các kết nối với ví, lấy providers, gọi transaction…

-

Thực hiện: Tìm hiểu và thực hành các nội dung nêu trên

-

Kết quả: Nắm rõ các kiến thức được nêu trên, thực hành và tạo nên một mini
project áp dụng những kiến thức nêu trên.

2.3. Thực hiện dự án


-

Sau các buổi training và thực hành, thực tập sinh được tham gia vào dự án
Website buôn bán NFT của công ty.

-

Chi tiết về các project sẽ được nêu ở phần bên dưới

2.4. Lịch làm việc
Tuầ

Cơng việc

n

Người

Mức

Nhận xét

hướn

độ

của

g dẫn

hồn

người

thành

hướng
dẫn

1

2

3

- Tìm hiểu về công ty, cách tổ chức của công ty

Lê

100%

- Làm quen với các công cụ làm việc

Minh

- Học cách trao đổi và làm việc qua mail, slack.
- Tìm hiểu các kiến thức về blockchain, dapp,

Quang
Lê
100%

ethereum, smartcontract.

Minh

- Tìm hiểu về Nextjs, thư viện Material UI,

Quang

Etherjs
- Tham gia vào dự án xây dựng website buôn

Lê

bán NFT sử dụng Nextjs, Material UI

Minh

- Xây dựng cấu trúc dự án, cài đặt những thư

Quang

100%

viện cần thiết
- Thiết kế xây dựng các thành phần giao diện cơ
bản có trong bản thiết kế như: Button, Input,
4

5

6

7

Container, …
- Xây dựng giao diện trang kết nối ví

Lê

- Phát triển chức năng hỗ trợ kết nối Metamask,

Minh

Coinbase wallet, Walletconnect.
- Xây dựng giao diện và chức năng trang tạo

Quang
Lê

100%

NFT

Minh

- Xây dựng giao diện và chức năng trang của

Quang
Lê
100%

người dùng khi đã kết nối ví

Minh

- Xây dựng giao diện và chức năng trang chi tiết

Quang
Lê
100%

NFT

Minh

100%


8

9

- Xây dựng giao diện và chức năng trang chủ và

Quang
Lê
100%

tìm kiếm

Minh

- Phát triển chức năng mua, bán NFT

Quang
Lê
100%
Minh

10

- Reponsive website

Quang
Lê
100%
Minh

11

12

- Được người hướng dẫn xem xét và yêu cầu

Quang
Lê
100%

chỉnh sửa các phần chưa được tốt.

Minh

- Kiểm thử và sửa lỗi tồn bộ webiste bao gồm

Quang

giao diện và tính năng.
- Báo cáo dự án.

Lê
Minh
Quang

100%


Chương 3.Chi tiết về dự án
3.1. Giới thiệu về dự án
Nhận thấy tiềm năng của các NFT (Non-fungible token) trong tương lai và một website

buôn bán NFT cũng là bàn đạp cho sự phát triển sau này. Nên công ty đã quyết định xây
dựng một NFT Marketplace.
3.2. Thực hiện
Thành viên thực hiện bao gồm:
-

Nguyễn Thành Đạt (thực tập sinh)

-

Lê Minh Quang (người hỗ trợ và giám sát)

Và sự giúp đỡ tận tình của các anh chị khác trong cơng ty AIOZ VIỆT NAM
3.3. Kế hoạch và triển khai
3.3.1. Giai đoạn lên ý tưởng và đề xuất tính năng
-

Nội dung:
o Tìm hiểu tham khảo các website tương tự, tìm hiểu cơng nghệ.
o Đề xuất các tính năng cốt lõi của website và trình bày, giải thích.

-

Kết quả:
o Hình dung luồng hoạt động của website.
o Đề xuất được đầy đủ tính năng cơ bản của một NFT Marketplace trên thị
trường.
o Biết được nên sử dụng công nghệ nào vào website và hướng phát triển.

3.3.2. Giai đoạn dựng khung sườn

-

Nội dung:
o Xây dựng khung sườn cho dự án như cấu trúc thư mục, các file mẫu, …
o Cài đặt và thiết lập các library cần thiết như (etherjs, materialui, redux…).
o Xây dựng khung các thành phần giao diện dựa trên bản thiết kế có sẵn.
o Xây dựng trang chứa các thành phần giao diện đã tạo.

-

Kết quả:
o Hoàn thành dựng nên khung sườn dữ án, cài đặt các library cần thiết và
thiết lập chúng.


o Xây dựng toàn bộ các thành phần giao diện cần thiết dựa trên bản thiết kế
giao diện như các Button (disabled, hover), Container, Input, …
3.3.3. Giai đoạn phát triển giao diện và tính năng
STT
1

Nội dung
- Được hướng dẫn bước đầu xây dựng giao diện

Kết quả
- Hoàn thành giao diện và

trang kết nối ví như: cách clean code, cách tổ

tính năng kết nối ví

chức component, xây dựng các services, hook, … - Hiểu được cách tổ chức
- Sau khi được hướng dẫn tiến hành xây dựng

và code trên dự án thực tế.

giao diện trang kết nối ví

- Biết được cách đọc hiểu

- Được hướng dẫn đọc hiểu các SDK hỗ trợ kết

và sử dụng các SDK

nối các ví
- Sau khi được hướng dẫn tiến hành phát triển
chức năng kết nối các ví như Metamask,
CoinbaseWallet, WalletConnect.
2

- Xây dựng giao diện trang tạo NFT

- Hoàn thành giao diện và

- Được hướng dẫn rõ về các dạng SmartContract

tính năng trang tạo NFT

Erc721 và Erc1155

- Hiểu được các chuẩn

- Được hướng dẫn tìm hiểu kiến thức về đưa các

SmartContract, hệ thống

file lên một hệ thống tập tin phân tán ngang hàng. tập tin phân tán ngang
- Phát triển chức năng tạo hỗ trợ chuẩn Erc721 và hàng.

3

Erc1155

- Biết cách sử dụng các thư

- Được hướng dẫn tìm hiểu validate form bằng

viện validate form

các thư viện như: yup, react-hook-form, …

- Biết cách gọi các

- Được hướng dẫn cách gọi các SmartContract từ

SmartContract

blockchain
- Xây dựng giao diện trang cá nhân của một địa

- Hoàn thành việc xây dựng

chỉ ví

giao diện và phát triển tính

- Được hướng dẫn cách gọi lấy thông tin từ

năng trang cá nhân của một

blockchain

địa chỉ ví

- Phát triển chức năng của trang cá nhân của một
địa chỉ ví gồm:
o Xem các NFT của địa chỉ ví


4

o Thơng tin địa chỉ ví, NFT, …
- Xây dựng giao diện trang xem thơng tin chi tiết

- Hồn thành việc xây dựng

một NFT

giao diện và phát triển tính

- Phát triển tính năng của trang gồm một số tính

năng trang xem thông tin

năng như sau:

chi tiết NFT

o Xem thông tin NFT (tên, địa chỉ Contract,
hình ảnh, mơ tả, chủ sở hữu …)
o Lịch sử giao dịch
5

o …
- Xây dựng giao diện trang tìm kiếm và trang chủ

- Hồn thành việc xây dựng

- Phát triển tính năng của trang gồm một số tính

giao diện và phát triển tính

năng như sau:

năng trang tìm kiếm và

o Tìm kiếm danh sách NFT

trang chủ

o Tìm kiếm địa chỉ ví
o Tìm kiếm Collection
o Trang chủ hiển thị các thông tin NFT nổi
6

bật và các thông tin khác
- Được hướng dẫn rõ một số kiến thức cần thiết

- Hoàn thành phát triển

trước khi bắt đầu phát triển chức năng mua bán.

chức năng mua bán

- Sau khi được hướng dẫn tiến hành phát triển
7

8

9

chức năng mua bán các NFT.
- Được hướng dẫn các kiến thức cần thiết về

- Hoàn thành reponsive

responsive website

website

- Sau khi được hướng dẫn tiến hành reponsive

- Biết được cách responsive

website
- Build website và gửi cho người hướng dẫn.

website
- Ghi chú lại toàn bộ những

- Được người hướng dẫn preview toàn bộ và thực

đánh giá của người hướng

tập sinh ghi chú lại tất cả những chỗ cần được

dẫn

sửa chữa
- Tiến hành sửa lỗi và cải thiện những tính năng

- Hồn thành kiểm thử và

đã được yêu cầu cải thiện.

cải thiện những chỗ chưa

- Kiểm thử và sửa lại lại toàn bộ website cả giao

hoàn thiện.

diện và tính năng


3.3.4. Giai đoạn nghiệm thu kết quả và báo cáo
-

Dựa trên các yêu cầu mà dự án đề ra và sự giúp đỡ của mọi người thực tập sinh
đã hoàn thành được một website NFT Marketplace cơ bản với giao diện tương đối
tốt và đầy đủ các tính năng cốt lõi đã đề ra.

-

Ngoài ra thực tập sinh trong quá trình phát triển đã đề ra một số tính năng phù
hợp với quá trình phát triển trong tương lai của dự án.

-

Sau quá trình 3 tháng thực tập, thực tập sinh đã có một buổi trình bày về q trình
thực tập, về dự án đã thực hiện trong quá trình thực tập với các anh chị cấp trên.


Chương 4.Tổng kết
-

Như vậy, chỉ trong vòng hơn một tháng ngắn ngủi, thực tập sinh đã kịp hoàn
thành một website tương đối hồn chỉnh. Website đã có khá đầy đủ các tính năng
đã đề ra ban đầu. Do thời gian có hạn nên giao diện website cịn đơn giản, hình
ảnh chưa được đẹp như mong đợi. Nhưng do website phát triển theo kiến trúc có
tính kế thừa, dễ dàng mở rộng nên sau này khi có thời gian sẽ có thể phát triển lên

mức cao hơn.

-

Chân thành cảm ơn sự giúp đỡ của các anh chị trong công ty AIOZ VIỆT NAM
trong q trình thực tập để có thể hồn thành dự án.


Tài Liệu Tham Khảo
[1] Vercel, "Next.js documentation," [Online]. Available: />[2] MarterialUI, "Material UI - Overview," [Online]. Available: />[3] W3Schools, "W3Schools Online Web Tutorials," [Online]. Available:
/>[4] Ethers, "Documentation - Ethers.js," [Online]. Available: />[5] Binance, "Binance Academy," [Online]. Available:
/>[6] Coin98, "Coin98 Insights," [Online]. Available: />[7] Solidity, "Solidity Document," [Online]. Available:
/>[8] U. Bob, "The Clean Architecture," 13 08 2022. [Online]. Available:
/>[9] TypeScript, "TypeScript Document," [Online]. Available:
/>[10] ReactJs, "React Document," [Online]. Available: />[11] Ethereum, "Ethersan," [Online]. Available: />[12] Ethereum, "Ethereum Document Developer," [Online]. Available:
/>