BỘ GIÁO DỤC VÀ ĐÀO TẠO
TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP. HỒ CHÍ MINH
KHOA CÔNG NGHỆ THÔNG TIN
BỘ MÔN HỆ THỐNG THÔNG TIN


KHÓA LUẬN TỐT NGHIỆP
XÂY DỰNG EMENU BẰNG NEXT.JS
NHÓM SINH VIÊN THỰC HIỆN:
PHAN MINH HOÀNG
MSSV: 18110286
NGUYỄN ĐỨC MINH QUỐC MSSV: 18110346
GIÁO VIÊN HƯỚNG DẪN:
TS. NGUYỄN THÀNH SƠN

TP. HỒ CHÍ MINH – 2022

BỘ GIÁO DỤC VÀ ĐÀO TẠO
TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP. HỒ CHÍ MINH
KHOA CÔNG NGHỆ THÔNG TIN
BỘ MÔN HỆ THỐNG THÔNG TIN


KHÓA LUẬN TỐT NGHIỆP
XÂY DỰNG EMENU BẰNG NEXT.JS
NHÓM SINH VIÊN THỰC HIỆN:
PHAN MINH HOÀNG
MSSV: 18110286
NGUYỄN ĐỨC MINH QUỐC MSSV: 18110346
GIÁO VIÊN HƯỚNG DẪN:
TS. NGUYỄN THÀNH SƠN

TP.HỒ CHÍ MINH – 2022

2

ĐH SƯ PHẠM KỸ THUẬT TP.HCM XÃ HỘI CHỦ NGHĨA VIỆT NAM
KHOA CNTT

Độc lập – Tự do – Hạnh Phúc

*******

*******

PHIẾU NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN
Họ và tên Sinh viên 1: PHAN MINH HOÀNG

MSSV 1: 18110286

Họ và tên Sinh viên 2: NGUYỄN ĐỨC MINH QUỐC

MSSV 2: 18110346

Ngành: Công nghệ Thông tin
Tên đề tài: XÂY DỰNG EMENU BẰNG NEXT.JS
Họ và tên Giáo viên hướng dẫn: TS. NGUYỄN THÀNH SƠN
NHẬN XÉT
1. Về nội dung đề tài &amp khối lượng thực hiện:
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
2. Ưu điểm:
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
3. Khuyết điểm:
.......................................................................................................................................
.....................................................................
...

...
yarn –g”.
Bước 3: Cài đặt Firebase (Đã được hướng dẫn cài đặt ở mục 1.3.5).
Bước 4: Lấy Google Maps API Key ở https://www.magetop.com/blog/cach-laygoogle-maps-api-key/.
Bước 5: Lấy Paypal Client ID (Cần có tài khoản paypal, nếu chưa có tài khoản có thể
xem cách tạo tài khoản paypal ở https://www.thegioididong.com/game-app/huongdan-cach-dang-ky-tao-tai-khoan-paypal-an-toan-nhanh-1313393). Sau khi bạn đã có
tài khoản PayPal và đăng nhập vào hệ thống dành riêng cho các developer
(https://developer.paypal.com/home), bạn nhìn vào thanh menu chính và vào trang
Applications. Tiếp tục nhìn sang menu bên trái và bạn sẽ thấy menu Sandbox
accounts, hãy vào đó và nhấn vào nút Account để tạo thêm tài khoản mới.
Sau khi tạo xong, về lại trang Applications, nhấn vào nút App để tạo Client
ID cho ứng dụng. Nhấn vào app vừa được tạo mới, bạn sẽ thấy Client ID.
Bước 6: Lấy Rapid API Key để sử dụng API Detoxify (Vào trang
https://rapidapi.com/auth?referral=/developer để đăng nhập). Sau khi đăng nhập xong
sẽ vào trang Dashboard, bạn nhìn vào thanh menu bên trái sẽ có mục Add New App
để tạo app mới hoặc bạn có thể sử dụng app mặc định đã được tạo sẵn của trang web.
Nhấn vào app và chọn mục Security, ở đó bạn sẽ thấy RAPID API Key. Trên thanh
tìm kiếm, bạn nhập tìm kiếm Detoxify, ở mục Header Parameters bạn sẽ thấy RAPID
API HOST.
Bước 7: Lấy NEXT_PUBLIC_CRYPTO_COMPARE_API_KEY tại trang
https://www.cryptocompare.com/
Bước 8: Sau khi đã hoàn thành các bước trên, tạo 1 file có tên là .env trong thư mục
của source code đã clone về. Điền vào các biến như sau:

104

NEXT_PUBLIC_FIREBASE_API_KEY= Lấy ở Bước 3
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN= Lấy ở Bước 3
NEXT_PUBLIC_FIREBASE_DATABASE_URL= Lấy ở Bước 3
NEXT_PUBLIC_FIREBASE_PROJECT_ID= Lấy ở Bước 3
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET= Lấy ở Bước 3
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID= Lấy ở Bước 3
NEXT_PUBLIC_FIREBASE_APP_ID= Lấy ở Bước 3
FIREBASE_CLIENT_EMAIL= Lấy ở Bước 3
FIREBASE_PRIVATE_KEY= Lấy ở Bước 3
NEXT_PUBLIC_GOOGLE_API_KEY= Lấy ở Bước 4
NEXT_PUBLIC_PAYPAL_CLIENT_ID= Lấy ở Bước 5
NEXT_PUBLIC_RAPID_API_HOST= Lấy ở Bước 6
NEXT_PUBLIC_RAPID_API_KEY= Lấy ở Bước 6
NEXT_PUBLIC_CRYPTO_COMPARE_API_KEY = Lấy ở Bước 7
Bước 7: Lên Firebase để tạo các collection:
− Location
− Place
− Review
− User
− Cart
− Bill
− Admin
Bước 8: Sau khi đã hoàn thành 7 bước trên, mở source code lên. Chạy lệnh “yarn
install” để cài đặt các thư viện. Sau đó chạy lệnh “yarn dev” để chạy ứng dụng trên
localhost.

105