Tìm hiểu reactjs express framework
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (1.11 MB, 44 trang )
BỘ GIÁO DỤC VÀ ĐÀO TẠO
TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THƠNG TIN KHOA CƠNG
NGHỆ PHẦN MỀM
ĐỒ ÁN 1
TÌM HIỂU REACTJS -EXPRESS
FRAMEWORK
Giảng viên hướng dẫn : ThS. Nguyễn Công Hoan
Sinh viên thực hiện 1 : Lê Quang Trung
Mã sinh viên 1 : 20520333
Sinh viên thực hiện 2 : Hà Phi Hùng
Mã sinh viên 2 : 20520526
Tp HCM, tháng 7 năm 2023
1
ĐỀ CƯƠNG CHI TIẾT
TÊN ĐỀ TÀI:
Tìm hiểu ReactJS – Express Framework
Tên đề tài tiếng Anh:
Learn ReactJS – Express Framework
Cán bộ hướng dẫn: ThS. Nguyễn Công Hoan
Thời gian thực hiện: Từ ngày 18/03/2023 đến tháng 05/07/2023
Sinh viên thực hiện:
Lê Quang Trung- 20520333
Hà Phi Hùng – 20520526
2
Nội dung đề tài:
1. Giới thiệu:
Javascript là một ngôn ngữ lập trình được sử dụng rộng rãi hiện nay,
dễ đọc và được hỗ trợ ở mọi nơi. Mà Expressjs lại hỗ trợ Javascript, do đó
nếu bạn đã biết đến Javascript thì chắc chắn việc lập trình bằng Express.js
là vơ cùng đơn giản. Ngay cả những người mới bắt đầu tham gia vào lĩnh
vực phát triển web này cũng có thể sử dụng Expressjs.
Javascript là ngơn ngữ lập trình dễ học với cả những người khơng có
bất kỳ kiến thức gì về ngơn ngữ lập trình khác. Chính vì tính phổ biến, dễ
học và dễ sử dụng này mà Express.js cho phép các tài năng trẻ tham gia và
đạt được nhiều thành công trong phát triển ứng dụng web.
Thông qua đề tài này, nhóm sẽ xây dựng website review phim.
Website review phim sẽ giúp người dùng xem được các lời
đánh giá và điểm số của một bộ phim từ cả khán giả và nhà phê bình chuyên
nghiệp nhằm chọn ra những bộ phim ưng ý nhất khi mua vé. Ngoài ra, website
cịn giúp người dùng chia sẻ đánh giá của chính mình cũng như lưu lại danh
sách các phim đã xem.
Website review phim được xây dựng bằng React, Express,
cùng với một vài thư viện hỗ trợ khác.
2. Mục tiêu:
- Xây dựng được website review phim với số lượng phim phong phú,
giao diện thân thiện, màu sắc hài hòa, bố cục hợp lý, đáp ứng các
chức năng cần thiết của một website review phim.
3. Phạm vi:
• Phạm vi mơi trường:
3
5. Phương pháp thực hiện:
- Tìm hiểu về ReactJS, ExpressJs.
- Khảo sát các website review phim có trên thị trường, từ đó tiến
hành phân tích, xác định các u cầu, tính năng cụ thể cho đề tài.
- Phân tích và thiết kế hệ thống website.
- Tìm hiểu quy trình thiết kế UX/UI và tiến hành thiết kế giao diện
cho website.
- Xây dựng website cho từng loại người dùng.
- Tiến hành triển khai và kiểm thử.
6. Công nghệ:
React và Next.js
Express.js
PostgreSQL với Prisma ORM
Firebase Authentication
Docker
AWS Lightsail, S3
7. Kết quả mong đợi
- Nắm bắt và áp dụng được các công nghệ mới để xây dựng sản
phẩm đề tài.
- Hiểu rõ các nghiệp vụ, chức năng của một website review phim.
- Áp dụng được các kiến thức đã học về phân tích và thiết kế hệ
thống phần mềm, quy trình phát triển phần mềm, cũng như quản lý và triển
khai dự án phần mềm để xây dựng website review phim.
4
- Xây dựng được website review phim đáp ứng được các yêu
cầu về giao diện và chức năng đã đề ra.
- Có thể thay đổi giao diện một cách linh động và mở rộng thêm
các chức năng mới cho website review phim để phù hợp với nhu cầu thực tiễn
trong tương lai.
Kế hoạch thực hiện:
Thời gian
18/03/2023 – 28/03/2023
Nội dung
Tìm hiểu đề tài, đánh giá thị trường, xác định các
chức năng của hệ thống.
28/03/2023 – 24/04/2023
Tìm hiểu, nghiên cứu cơng nghệ.
25/04/2023 – 15/05/2023
Phân tích và thiết kế hệ thống website.
16/05/2022 – 31/05/2023
Tìm hiểu quy trình thiết kế UX/UI và thiết kế giao
diện cho website
01/06/2023 – 22/06/2023
Cài đặt phần back-end, xử lý của hệ thống.
23/06/2023 – 05/07/2023
Kiểm thử hệ thống và hoàn thiện báo cáo.
Xác nhận của GVHD
(Ký tên và ghi rõ họ tên)
ThS. Nguyễn Công Hoang
5
TP. HCM, ngày 5 tháng 07 năm 2023
Sinh viên
Sinh viên
(Ký tên và ghi rõ họ tên) (Ký tên và ghi rõ họ tên)
Lê Quang Trung
6
Hà Phi Hùng
LỜI CẢM ƠN
Đầu tiên, nhóm thực hiện đề tài “Xây dựng website review phim” xin gửi lời
cảm ơn đến quý thầy cô đã đang giảng dạy chúng em ở ngôi trường Đại học Công
nghệ thông tin – Đại học quốc gia thành phố Hồ Chí Minh những kiến thức nền
tảng vững chắc để nhóm có thể tự tìm hiểu và hoàn thiện đề tài này một cách tốt
nhất.
Đặc biệt, chúng em xin gửi lời cảm ơn tới cô Nguyễn Công Hoan vì sự tận
tình hướng dẫn cũng như những góp ý, đề xuất q báu của cơ dành cho nhóm
trong quá trình thực hiện đồ án.
Trong suốt thời gian qua, nhóm đã tự tìm hiểu các cơng nghệ mới và kết hợp
với những kiến thức nền tảng trong quá trình học tập, nghiên cứu và vận dụng để
thực hiện đề tài này. Với quỹ thời gian có hạn cũng như kinh nghiệm xây dựng sản
phẩm còn thiếu, sản phẩm đồ án cuối cùng có thể sẽ mắc phải một số sai sót và
chúng em rất mong sẽ nhận được những góp ý của cơ để bổ sung, cải tiến sản phẩm
cũng như nâng cao kiến thức để xây dựng các sản phẩm tiếp theo sẽ chỉn chu và
hoàn thiện hơn, và tích luỹ thêm cho mình những kinh nghiệm q giá để đáp ứng
tốt cho những công việc thực tế trong tương lai.
Một lần nữa, xin cảm ơn cơ vì đã đồng hành cùng chúng em trong suốt học
kỳ II của năm học này.
Sinh viên thực hiện
7
Lê Quang Trung – Hà Phi Hùng
NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
..................
Tp.HCM, ngày … tháng 7 năm 2023
GVHD
8
ThS. Nguyễn Công Hoan
MỤC LỤC
CHƯƠNG 1: GIỚI THIỆU ĐỀ TÀI........................................................................................7
1.1. Tên đề tài tài............................................................................................................................................................................................
1.2. Mô tả đề tài đề tài tài........................................................................................................................................................................................
1.3 Lý do chọn đề tàin đề tài tài...............................................................................................................................................................................
1.4. Khả đề tàio sát hiện trạngn trạngng........................................................................................................................................................................
1.5. Công nghện trạng sử dụng dụngng.........................................................................................................................................................................
1.6. Môi trường thiết kếng thiết kết kết kế........................................................................................................................................................................
1.7. Công cụng hỗ trợ trợ..................................................................................................................................................................................
CHƯƠNG 2: CƠ SỞ LÝ THUYẾT........................................................................................9
2.1. Tổng quan về ReactJS:ng quan về tài ReactJS:...................................................................................................................................................................
2.1.1. Giới thiệu về ReactJS:i thiệu về ReactJS:u về ReactJS: ReactJS:.................................................................................................................................................. 9
2.1.2. Khái niệu về ReactJS:m cơ bản trong ReactJS: bản trong ReactJS:n trong ReactJS:............................................................................................................................. 9
2.1.3. Ưu điểm, nhược điểm:u điểm, nhược điểm:m, nhược điểm:c điểm, nhược điểm:m:............................................................................................................................................. 15
2.2 Tổng quan về ReactJS:ng quan về tài Express.js................................................................................................................................................................
2.2.1 Giới thiệu về ReactJS:i thiệu về ReactJS:u......................................................................................................................................................................... 15
2.2.2 Các khái niệu về ReactJS:m cơ bản trong ReactJS: bản trong ReactJS:n và cách thức hoạt độngc hoạt độngt độngng............................................................................................... 16
2.2.3 Ưu điểm, nhược điểm:u điểm, nhược điểm:m, nhược điểm:c điểm, nhược điểm:m............................................................................................................................................... 18
CHƯƠNG 3: PHÂN TÍCH THIẾT KẾ HỆ THỐNG.................................................................19
3.1. Sơ đồ Use-case: đồ Use-case: Use-case:.................................................................................................................................................................................
3.1.1. Đăng nhập:p:.................................................................................................................................................................... 19
3.1.2. Đăng xuất:t:...................................................................................................................................................................... 21
3.1.3. Đăng ký thành viên:.................................................................................................................................................... 23
3.1.4. Tạt độngo review:................................................................................................................................................................... 24
3.1.5. Hiểm, nhược điểm:n thị thông tin phim:........................................................................................................................................... 25
3.1.7. Tìm kiếmm, lọcc:............................................................................................................................................................... 27
CHƯƠNG 4: THIẾT KẾ GIAO DIỆN...................................................................................28
4.1. Trang đăng nhập, đăng ký:p, đăng ký:...........................................................................................................................................................
4.1.1. Giao diệu về ReactJS:n:....................................................................................................................................................................... 28
4.1.2. Mô tản trong ReactJS::............................................................................................................................................................................... 29
9
4.2. Trang chủ::..........................................................................................................................................................................................
4.2.1. Giao diệu về ReactJS:n:....................................................................................................................................................................... 29
4.2.2. Mô tản trong ReactJS::............................................................................................................................................................................... 30
4.3. Trang thông tin phim:....................................................................................................................................................................
4.3.1. Giao diệu về ReactJS:n:....................................................................................................................................................................... 31
4.3.2. Mô tản trong ReactJS::............................................................................................................................................................................... 32
4.4. Trang danh sách phim:..................................................................................................................................................................
4.4.1. Giao diệu về ReactJS:n:....................................................................................................................................................................... 32
4.4.2. Mô tản trong ReactJS::............................................................................................................................................................................... 33
4.5. Trang thông tin review:.................................................................................................................................................................
4.5.1. Giao diệu về ReactJS:n:....................................................................................................................................................................... 33
4.5.2. Mô tản trong ReactJS::............................................................................................................................................................................... 33
4.6. Trang danh sách ngường thiết kếi dùng:.....................................................................................................................................................
4.6.1. Giao diệu về ReactJS:n:....................................................................................................................................................................... 34
4.6.2. Mô tản trong ReactJS::............................................................................................................................................................................... 34
4.7. Trang thông tin ngường thiết kếi dùng:.......................................................................................................................................................
4.7.1. Giao diệu về ReactJS:n:....................................................................................................................................................................... 35
4.7.2. Mô tản trong ReactJS::............................................................................................................................................................................... 35
4.8. Trang thông tin cá nhân:...............................................................................................................................................................
4.8.1. Giao diệu về ReactJS:n:....................................................................................................................................................................... 36
4.8.2. Mô tản trong ReactJS::............................................................................................................................................................................... 36
CHƯƠNG 5: KẾT LUẬN...................................................................................................37
5.1. Nhập, đăng ký:n xét:.............................................................................................................................................................................................
5.1.1. Thuập:n lợc điểm:i:....................................................................................................................................................................... 37
5.1.2. Khó khăn:....................................................................................................................................................................... 37
5.1.3. Ưu điểm, nhược điểm:u điểm, nhược điểm:m của đồ án:a đồ án: án:................................................................................................................................................... 37
5.1.4. Nhược điểm:c điểm, nhược điểm:m của đồ án:a đồ án: án:............................................................................................................................................ 38
5.2. Hướng phát triển của đồ án:ng phát triển của đồ án:n củ:a đồ Use-case: án:.......................................................................................................................................................
TÀI LIỆU THAM KHẢO.....................................................................................................39
10
MỤC LỤC HÌNH ẢNH
HÌNH 2.1: VIẾT MỘT COMPONENT DÙNG JSX..............................................................................
HÌNH 2.2: DOM ẢO VÀ DOM THẬT....................................................................................................
HÌNH 2.3: FUNCTIONAL COMPONENT CHO MỘT NÚT BẤM....................................................
HÌNH 2.4: KHAI BÁO VÀ SỬ DỤNG PROPS COUNT VÀ ONCLICK Ở
FUNCTIONAL COMPONENT...............................................................................................................
HÌNH 2.5: MƠ HÌNH UNIDIRECTIONAL DATA FLOW..................................................................
HÌNH 2.6: KHAI BÁO VÀ SỬ DỤNG MỘT MIDDLEWARE TRẢ VỀ CHỮ
HELLO WORLD Ở ROUTE GET /........................................................................................................
HÌNH 2.7: REQUEST ĐƯỢC XỬ LÝ Ở MIDDLEWARE MYLOGGER TRƯỚC
KHI CHUYỂN TỚI MIDDLEWARE Ở ROUTE GET /......................................................................
HÌNH 2.8: TẠO VÀ DÙNG ROUTER....................................................................................................
HÌNH 3.1: SƠ ĐỒ USE-CASE TỔNG QUÁT........................................................................................
HÌNH 3.2: SƠ ĐỒ USE-CASE ĐĂNG NHẬP........................................................................................
HÌNH 3.3: SƠ ĐỒ USE-CASE ĐĂNG XUẤT........................................................................................
HÌNH 3.4: SƠ ĐỒ USE-CASE ĐĂNG KÝ THÀNH VIÊN...................................................................
11
HÌNH 3.5: SƠ ĐỒ USE-CASE TẠO REVIEW......................................................................................
HÌNH 3.6: SƠ ĐỒ USE-CASE HIỂN THỊ THƠNG TIN PHIM..........................................................
HÌNH 3.7: SƠ ĐỒ USE-CASE TÌM KIẾM, LỌC..................................................................................
HÌNH 4.1: GIAO DIỆN ĐĂNG NHẬP....................................................................................................
HÌNH 4.2: GIAO DIỆN ĐĂNG KÝ.........................................................................................................
HÌNH 4.3. GIAO DIỆN TRANG CHỦ....................................................................................................
HÌNH 4.4: GIAO DIỆN TRANG THƠNG TIN CHI TIẾT PHIM.......................................................
HÌNH 4.5. GIAO DIỆN TRANG THƠNG TIN CHI TIẾT PHIM.......................................................
HÌNH 4.6: GIAO DIỆN TRANG DANH SÁCH PHIM.........................................................................
HÌNH 4.7: GIAO DIỆN THƠNG TIN REVIEW...................................................................................
12
DANH MỤC BẢNG
BẢNG 3.1: ĐẶC TẢ ĐĂNG NHẬP:........................................................................................................
BẢNG 3.2: ĐẶC TẢ ĐĂNG XUẤT:........................................................................................................
BẢNG 3.3: ĐẶC TẢ ĐĂNG KÝ THÀNH VIÊN:...................................................................................
BẢNG 3.4: ĐẶC TẢ TẠO REVIEW:......................................................................................................
BẢNG 3.5: ĐẶC TẢ HIỂN THỊ THƠNG TIN PHIM:..........................................................................
BẢNG 3.6: ĐẶC TẢ TÌM KIẾM, LỌC...................................................................................................
13
Chương 1: GIỚI THIỆU ĐỀ TÀI
1.1. Tên đề tài
XÂY DỰNG WEBSITE REVIEW PHIM
1.2. Mô tả đề tài
Ngày nay, xem phim là một nhu cầu giải trí rất lớn của người dân. Một
bộ phim có thể giúp ta thư giãn sau một thời gian làm việc vất vả. Phim là
ngành công nghiệp rất nhiều tiền nên có rất nhiều bộ phim được sản xuất hàng
năm ở nhiều mức chất lượng khác nhau. Nhiều người có nhu cầu chọn lọc các
bộ phim thật sự hay và đáng tiền để xem.
Website review phim Cinerate sẽ giúp người dùng xem được các lời
đánh giá và điểm số của một bộ phim từ cả khán giả và nhà phê bình chuyên
nghiệp nhằm chọn ra những bộ phim ưng ý nhất khi mua vé. Ngoài ra, website
cịn giúp người dùng chia sẻ đánh giá của chính mình cũng như lưu lại danh
sách các phim đã xem.
Website review phim được xây dựng bằng React, Express, cùng với
một vài thư viện hỗ trợ khác.
1.3 Lý do chọn đề tài
Hiện nay, việc sử dụng các trang web đánh giá review phim là một
việc vô cùng phổ biến của người dùng online. Với sự phát triển của công
nghệ, hệ thống đánh giá review ngày càng chính xác và khiến cho xu hướng
coi các bài đánh giá, điểm số trên các trang web review phim trước khi ra
phòng vé đặc biệt tăng cao ở mọi lứa tuổi .
Do đó, Chúng em quyết định chọn đề tài “Xây dựng website review
phim” bởi vì tính ứng dụng cao, nhu cầu thực tế lớn và chúng em cũng thử
7
thách bản thân bằng những loại đề tài mới hơn so với những đề tài chúng em
đã làm để có thể tăng sự hiểu biết của bản thân ở nhiều mặt hơn.
1.4. Khảo sát hiện trạng
Hiện nay, thị trường đã có rất nhiều website review phim nổi tiếng
được mọi người biết đến như letterboxd, IMDb, Rotten Tomatoes… Với
giao diện bắt mắt, dễ sử dụng, cùng với số lượng phim khổng lồ, chúng
nhanh chóng trở thành những website review phim hàng đầu. Các chức năng
của những website này đều tập trung vào thống kê, tổng hợp thông tin của bộ
phim để giúp người dùng xác định được có nên bộ phim hay không.
Chúng em cũng sẽ xây dựng một website review phim với những tính
năng tóm tắt thơng tin bộ phim và tổng hợp các đánh giá, điểm số của các
chuyên gia, người dùng khác để cung cấp trải nghiệm dễ sử dụng và tiện
dụng cho người dùng.
1.5. Công nghệ sử dụng
React và Next.js
Express.js
PostgreSQL với Prisma ORM
Firebase Authentication
Docker
AWS Lightsail, S3
1.6. Môi trường thiết kế
Visual Studio Code.
1.7. Công cụ hỗ trợ
Figma
StarUML
8
Google Chrome
Chương 2: CƠ SỞ LÝ THUYẾT
2.1. Tổng quan về ReactJS:
2.1.1. Giới thiệu về ReactJS:
React là một thư viện JavaScript front-end miễn phí và mã nguồn
mở nhằm giúp ta xây dựng UI theo hướng dễ tái sử dụng bằng component
(thành phần). React được phát triển bởi Meta và cộng đồng các nhà phát triển
và cơng ty bên ngồi từ năm 2013.
React có thể được dùng để xây dựng ứng dụng single-page,
mobile, hay kết hợp rendering trên server qua các framework như Next.js.
React hiếm khi được dùng đơn lẻ. Nó hay được dùng với các thư viện và
framework hỗ trợ khác. Hiện React là một trong các thư viện front-end phổ
biến nhất thế giới cho web. Các ứng dụng lớn như Facebook, Discord,
Reddit,…
2.1.2. Khái niệm cơ bản trong ReactJS:
2.1.2.1. Component và Virtual DOM:
Ta xây dựng UI trong React bằng cách tạo ra và sử dụng các
component. Mỗi component sẽ chứa code HTML và các code logic liên quan
cho một thành phần nào đó của UI. Một component cũng chứa được các
component khác. Ta lồng ghép các component lại để xây dựng nên một UI
phức tạp. Code React được viết bằng ngôn ngữ JSX để ta dễ dàng viết
JavaScript, HTML, và component ở cùng một file. Với JSX, ta có thể dùng
các biến và hàm ngay trong code HTML.
9
Hình 2.1: Viết một component dùng JSX.
Khi chạy ứng dụng, React sẽ xây dựng một mơ hình DOM ảo
(Virtual DOM) từ các component ta có. React sau đó sẽ chuyển DOM ảo
thành DOM thật cho trình duyệt render. Khi có thay đổi trong UI (Vd: cập
nhật giá trị), React sẽ tính tốn các thay đổi giữa DOM ảo và DOM thật để
chỉ cập nhật phần UI bị thay đổi mà khơng cần cập nhật lại cả trang. Ngồi
ra, việc một component được render lần đầu vào DOM thật khi ta cần xem
UI của nó được gọi là mount. Khi một component được gỡ ra khỏi DOM thật
vì UI đã đóng được gọi là unmount.
10
Hình 2.2: DOM ảo và DOM thật
2.1.2.2. Functional Component và Class Component:
Có 2 cách để viết một component. Trong cách Functional
Component, ta viết một hàm trả về JSX mô tả UI của component. Đây là
cách hiện đại và nên dùng nhất ngày nay. Ngồi ra, cịn cách cũ là Class
Component. Ta viết một class kế thừa từ React.Component và cài đặt
phương thức render trả về JSX của UI. Mỗi khi React cần render một
component, nó sẽ gọi hàm Functional Component hay phương thức render
của Class Component để lấy JSX và render UI từ nó.
11
Hình 2.3: Functional Component cho một nút bấm
2.1.2.3. Props
Một component có thể nhận tham số từ ngồi gọi là Props. Tham
số này có thể là tên người dùng, ngày sinh, ID để hiện. Ta khai báo props ở
tham số hàm của Functional Component và có thể dùng nó ngay trong code
HTML.
Hình 2.4: Khai báo và sử dụng props count và onClick ở Functional Component
2.1.2.4. State
Nếu một component chứa dữ liệu có thể thay đổi bởi người dùng,
ta chứa nó trong State. Dùng hàm useState để khai báo một state. Hàm này
trả về một hằng chứa giá trị state và hàm để đặt giá trị state đó. Mỗi khi
setState được gọi, React sẽ render lại component với giá trị state mới. Ta
dùng state trong code HTML y hệt như với props.
12
2.1.2.5. Unidirectional Data Flow
Trong React, ta nên chứa các state được dùng chung bởi nhiều
component ở component cha của các component này. Ta truyền state từ
component cha vào các component con cần nó qua props. Nếu component
con cần cập nhật state này, ta truyền hàm setState vào nó qua props. Mơ hình
này được gọi là mơ hình Dịng dữ liệu Một chiều (Unidirectional Data Flow).
Dữ liệu đi từ component cha xuống con và con có thể đặt state của cha. Mơ
hình này giúp ta dễ đồng bộ dữ liệu giữa các thành phần trong UI và giúp
code dễ bảo trì hơn.
13
