Đồ án tìm hiểu reactjs expressjs 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.4 MB, 43 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 MÔN HỌC
ĐỒ ÁN 1
TÌM HIỂU REACTJS-Expressjs
FRAMEWORK
Giảng viên hướng dẫn :
ThS. Nguyễn Cơng Hoan
Sinh viên thực hiện 1 :
Lý Sô Ly
Mã sinh viên 1
19521136
:
Sinh viên thực hiện 2 :
Nguyễn Khánh Thành
Mã sinh viên 2
19522237
:
Tp HCM, tháng 6 năm 2022
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 MÔN HỌC
ĐỒ ÁN 1
TÌM HIỂU REACTJS-Expressjs
FRAMEWORK
Giảng viên hướng dẫn :
ThS. Nguyễn Cơng Hoan
Sinh viên thực hiện 1 :
Lý Sô Ly
Mã sinh viên 1
19521136
:
Sinh viên thực hiện 2 :
Nguyễn Khánh Thành
Mã sinh viên 2
19522237
:
Tp HCM, tháng 6 năm 2022
ĐẠI HỌC QUỐC GIA TP. HỒ CHÍ MINH
CỘNG HỊA XÃ HỘI CHỦ NGHĨA VIỆT NAM
TRƯỜNG ĐẠI HỌC
Độc Lập - Tự Do - Hạnh Phúc
CÔNG NGHỆ THÔNG TIN
ĐỀ 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 05/09/2022 đến tháng 31/12/2022
Sinh viên thực hiện:
Lý Sô Ly - 19521136
Nguyễn Khánh Thành – 19522237
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 bán hàng trực tuyến.
Website cung cấp cho người dùng nhiều sự lựa chọn đáp ứng nhu cầu về điện thoại
phù hợp với nhu cầu người mua với nhiều mẫu mã khác nhau. Website cập nhật tất cả
những điện thoại mới ra mắt phù hợp trong từng nhu cầu sử dụng, mẫu mã mới nhất
nhằm đáp ứng nhu cầu của người mua.
Hệ thống này sẽ có chức năng cơ bản như hiển thị và order, upload mặt hàng mới,
gợi ý nhu cầu người dùng, chức năng tìm kiếm theo dạng text, … Về phía quản trị viên
sẽ có những chức năng chính như: quản lý mặt hàng, số lượng, thông tin đơn hàng,
quản lý tài khoản người dùng, …
2. Mục tiêu:
- Xây dựng được website mua bán trực tuyến với nhiều mặt hàng 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 E-Commerce.
- Xây dựng được website dành cho quản trị viên với các chức năng quản lý thông tin
đa dạng và tiện dụng.
3. Phạm vi:
• Phạm vi mơi trường:
o Triển khai sản phẩm đề tài trên mơi trường web.
• Phạm vi chức năng:
o Quản lý thông tin sản phẩm
o Quản lý tài khoản người dùng
o Quản lý thơng tin đơn hàng
o Tìm kiếm sản phẩm theo nhu cầu
o Phân loại sản phẩm theo thể loại, hay top lượt tìm kiếm, ...
o Cho phép thêm vào giỏ hàng trước khi quyết định thanh toán
o Cho phép upload sản phẩm
o Dễ dàng cho quản trị viên xử lý các đơn hàng
4. Đối tượng:
- Người dùng khách.
- Người dùng có tài khoản.
- Quản trị viên (Admin).
5. Phương pháp thực hiện:
- Tìm hiểu về ReactJS, NodeJS, MongoDB.
- Khảo sát các website bán điện hiện có trên thị trường, từ đó tiến hành phân tích, xác
định các yê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 người dùng và website cho quản trị viên.
- Tiến hành triển khai và kiểm thử.
6. Công nghệ:
- Front-end: ReactJS
- Back-end: NodeJS, ExpressJS
- Database: MongoDB
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 bán điện thoại trực tuyến.
- Á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 sản phẩm đề tài.
- Xây dựng được website bán điện thoại trực tuyến đá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 sản phẩm đề tài để 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
Nội dung
05/09/2022 – 16/09/2022
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.
17/09/2022 – 07/10/2022
Tìm hiểu, nghiên cứu cơng nghệ.
08/10/2022 – 17/10/2022
Phân tích và thiết kế hệ thống website.
18/10/2022 – 08/11/2022
Tìm hiểu quy trình thiết kế UX/UI và thiết kế giao diện cho
website
09/11/2022 – 06/12/2022
Cài đặt phần back-end, xử lý của hệ thống.
06/12/2022 – 24/12/2022
Kiểm thử hệ thống và hoàn thiện báo cáo.
TP. HCM, ngày 18 tháng 02 năm 2022
Xác nhận của GVHD
Sinh viên
Sinh viên
(Ký tên và ghi rõ họ tên)
(Ký tên và ghi rõ họ tên)
(Ký tên và ghi rõ họ tên)
ThS. Nguyễn Công Hoan
Lý Sô Ly
Nguyễn Khánh Thành
LỜI CẢM ƠN
Đầu tiên, nhóm thực hiện đề tài “Xây dựng website nghe mua điện thoại online” 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à hồ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 quý báu của cơ dành cho nhóm trong q 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à hồn thiện hơn, và tích luỹ thêm cho mình những kinh nghiệm
quý 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ỳ I của
năm học này.
Sinh viên thực hiện
Lý sô Ly - Nguyễn Khánh Thành
NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN
......................................................................................................................................................
......................................................................................................................................................
......................................................................................................................................................
......................................................................................................................................................
......................................................................................................................................................
......................................................................................................................................................
......................................................................................................................................................
......................................................................................................................................................
......................................................................................................................................................
......................................................................................................................................................
......................................................................................................................................................
......................................................................................................................................................
......................................................................................................................................................
......................................................................................................................................................
......................................................................................................................................................
......................................................................................................................................................
......................................................................................................................................................
......................................................................................................................................................
......................................................................................................................................................
......................................................................................................................................................
......................................................................................................................................................
Tp.HCM, ngày … tháng 6 năm 2022
GVHD
ThS. Nguyễn Công Hoan
MỤC LỤC
LỜI CẢM ƠN ............................................................................................................................ 5
NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN .................................................................... 6
Chương 1: GIỚI THIỆU ĐỀ TÀI ............................................................................................. 3
1.1. Tên đề tài: ..................................................................................................................... 3
1.2. Mô tả đề tài: .................................................................................................................. 3
1.3. Lý do chọn đề tài: ......................................................................................................... 3
1.4. Khảo sát hiện trạng: ...................................................................................................... 4
1.5. Công nghệ sử dụng: ...................................................................................................... 4
1.6. Môi trường thiết kế: ...................................................................................................... 4
1.7. Công cụ hỗ trợ: ............................................................................................................. 4
Chương 2: CƠ SỞ LÝ THUYẾT .............................................................................................. 5
2.1. Tổng quan về ReactJS: ................................................................................................. 5
2.1.1. Giới thiệu về ReactJS: .................................................................................................. 5
2.1.2. Khái niệm cơ bản trong ReactJS: ................................................................................. 5
2.1.2.1.
Virtual DOM: ......................................................................................................... 5
2.1.2.2.
JSX: ...................................................................... Error! Bookmark not defined.
2.1.3. Cách ReactJS hoạt động: .............................................................................................. 6
2.1.4. Ưu điểm của ReactJS: .................................................................................................. 6
2.2. NodeJS: ......................................................................................................................... 6
2.2.1. NodeJS là gì? ................................................................................................................ 6
2.2.2. Cách NodeJS hoạt động: .............................................................................................. 8
2.2.3. Ưu điểm của NodeJS: ................................................................................................... 8
2.3. ExpressJS:..................................................................................................................... 8
2.3.1. ExpressJS là gì? ............................................................................................................ 8
2.3.2. Tính năng của ExpressJS: ............................................................................................. 9
2.4. MongoDB: .................................................................................................................... 9
2.4.1. MongoDB là gì: ............................................................................................................ 9
2.4.2. Một số câu lệnh cơ bản: .............................................................................................. 10
2.4.3. Ưu điểm của MongoDB: ............................................................................................ 10
Chương 3: PHÂN TÍCH THIẾT KẾ HỆ THỐNG ................................................................. 12
3.1. Sơ đồ Use-case: .......................................................................................................... 12
3.1.1. Đăng nhập: .................................................................................................................. 12
3.1.2. Đăng xuất:................................................................................................................... 13
3.1.3. Đăng ký thành viên:.................................................................................................... 14
3.1.4. Giỏ hàng: .................................................................................................................... 15
3.1.5. Thay đổi thông tin các nhân: ...................................................................................... 15
3.1.6. Quản lý thơng tin cá nhân:.......................................................................................... 17
3.1.7. Tìm kiếm: ................................................................................................................... 19
3.1.8. Xem thông tin sản phẩm: ............................................................................................ 19
Chương 4: THIẾT KẾ GIAO DIỆN ....................................................................................... 21
4.1. Trang đăng nhập, đăng ký: ......................................................................................... 21
4.1.1. Giao diện: ................................................................... Error! Bookmark not defined.
4.1.2. Mô tả: .......................................................................................................................... 21
4.2. Trang chủ: ................................................................................................................... 22
4.2.1. Giao diện: ................................................................................................................... 22
4.2.2. Mô tả: .......................................................................................................................... 23
4.3. Trang thông tin sản phẩm: .......................................................................................... 24
4.3.1. Giao diện: ................................................................................................................... 24
4.3.2. Mơ tả: .......................................................................................................................... 24
4.4. Trang tìm kiếm: .......................................................................................................... 24
4.4.1. Giao diện: ................................................................................................................... 24
4.4.2. Mô tả: .......................................................................................................................... 25
4.5. Trang thông tin giỏ hàng: ........................................................................................... 27
4.5.1. Giao diện: ................................................................................................................... 27
4.5.2. Mô tả: .......................................................................................................................... 27
4.6. Trang thông tin vận chuyển: ....................................................................................... 28
4.6.1. Giao diện: ................................................................................................................... 28
4.6.2. Mô tả: .......................................................................................................................... 28
Chương 5: KẾT LUẬN ........................................................................................................... 29
5.1. Nhận xét:..................................................................................................................... 29
5.1.1. Thuận lợi:.................................................................................................................... 29
5.1.2. Khó khăn: ................................................................................................................... 29
5.2. Đánh giá:..................................................................................................................... 29
5.2.1. Ưu điểm của đồ án: ..................................................................................................... 29
5.2.2. Nhược điểm của đồ án: ............................................................................................... 29
5.3. Hướng phát triển của đồ án: ....................................................................................... 29
TÀI LIỆU THAM KHẢO........................................................................................................ 30
MỤC LỤC HÌNH ẢNH
Hình 2.1: Mơ tả cách Virtual DOM hoạt động. ......................................................................... 5
Hình 2.2: Ví dụ về tạo một element trong React. ...................................................................... 6
Hình 2.3: Ví dụ về React được viết bằng JSX. .......................................................................... 6
Hình 2.4: Express js cung cấp cơ chế định tuyến giúp duy trì trạng thái của website............... 9
Hình 3.1: Sơ đồ use-case tổng quát .......................................................................................... 12
Hình 3.2: Sơ đồ use-case đăng nhập. ....................................................................................... 12
Hình 3.3: Sơ đồ use-case đăng xuất. ........................................................................................ 13
Hình 3.4: Sơ đồ use-case đăng ký thành viên. ......................................................................... 14
Hình 3.5: Sơ đồ use-case mua sản phẩm.................................................................................. 15
Hình 3.6: Sơ đồ use-case thay đổi thơng tin cá nhân. .............................................................. 17
Hình 3.7: Sơ đồ use-case quản giỏ hàng cá nhân..................................................................... 17
Hình 3.8: Sơ đồ use-case tìm kiếm. ......................................................................................... 19
Hình 3.9: Sơ đồ use-case xem thơng tin sản phẩm.. ................................................................ 20
Hình 4.1. Giao diện nút đăng nhập sau khi click log in. .......... Error! Bookmark not defined.
Hình 4.2. Giao diện nút trang đăng nhập sau khi click Log in. ............................................... 21
Hình 4.3. Giao diện nút trang đăng ký sau khi click Sign up. ................................................. 22
Hình 4.4. Giao diện trang chủ. ................................................................................................. 23
Hình 4.5. Thanh setting sau khi mở rộng. ................................................................................ 23
Hình 4.6: Giao diện trang thơng tin sản phẩm. ........................ Error! Bookmark not defined.
Hình 4.7: Giao diện trang tìm kiếm khi tìm kiếm theo từ khóa. .............................................. 24
Hình 4.8: Giao diện kết quả sau khi tìm kiếm điện thoại. ....................................................... 25
Hình 4.9: Giao diện kết quả sau tìm kiếm với từ khố “Samsung A20”. ................................ 26
Hình 4.10: Giao diện thơng tin giỏ hàng. ................................................................................. 27
Hình 4.11: Giao diện thơng tin nhận hàng. .............................................................................. 28
Hình 4.12: Giao diện trang thông tin vận chuyển. ................................................................... 28
DANH MỤC BẢNG
Bảng 3.1: Đặc tả đăng nhập: .................................................................................................... 12
Bảng 3.2: Đặc tả đăng xuất: ..................................................................................................... 13
Bảng 3.3: Đặc tả đăng ký thành viên: ...................................................................................... 14
Bảng 3.4: Đặc tả chọn máy: ..................................................................................................... 15
Bảng 3.5: Đặc tả đề xuất điện thoại: ........................................................................................ 15
Bảng 3.6: Đặc tả hiển thị thông tin sản phẩm: ......................................................................... 16
Bảng 3.7: Đặc tả thông tin cá nhân: ......................................................................................... 17
Bảng 3.8: Đặc tả thêm sản phẩm: ............................................................................................ 17
Bảng 3.9: Đặc tả xoá sản phẩm: ............................................................................................... 18
Bảng 3.10: Đặc tả tìm kiếm: .................................................... Error! Bookmark not defined.
Bảng 3.11: Đặc tả xem thông tin đơn hàng: ............................ Error! Bookmark not defined.
1
DANH MỤC VIẾT TẮT
STT
Ký hiệu chữ viết tắt
Chữ viết đầy đủ
1
CSDL
Cơ sở dữ liệu
2
API
Application program interface
3
DOM
Document Object Model
4
RDBMS
Relational Database Management System
Chương 1:
GIỚI THIỆU ĐỀ TÀI
1.1. Tên đề tài:
XÂY DỰNG WEBSITE BÁN ĐIỆN THOẠI ONLINE
1.2. Mô tả đề tài:
Mua sắm một chiêc điện thoại mời là làm đẹp “tinh thần” gắn liền với cuộc sống của
chúng ta. Nó mang lại sự giải trí, thư giãn cho con người sau những mệt nhọc của cuộc sống
hằng ngày, làm tăng thêm sự hung phấn, vui vẻ cho mọi người trong những lúc đi mua sắm,
là phần thưởng sau những ngày tháng cần mẫn làm việc, …
Với sự phát triển nhanh chóng của internet, việc mua sắm đã được đưa lên không gian
mạng qua những website mua điện thoại trực tuyến. Điều này khiến chúng ta tận hưởng âm
thời gian làm đẹp cho bản thân một cách dễ dàng và thoải mái hơn trước đây.
Website mua điện thọau trực tuyến với mục tiêu mang lại trải nghiệm tốt cho người
dùng, chúng em xây dựng website cung cấp đầy đủ các chức năng cơ bản hiện có của một
website mua bán hàng. Người dùng tiếp cận các mẫu mã thời trang đa dạng theo sở thích
riêng của mình, …
Website bán hàng E-commerce được xây dựng bằng ReactJS kết hợp với các thư viện
hỗ trợ khác.
1.3 Lý do chọn đề tài:
Với sự phát triển của Internet, nhu mua sắm trên không gian mạng tăng vượt trội bởi
vì sự đơn giản, dễ sử dụng, sự tiếp cận nhanh chóng đến kho đến nguồn sản phẩm khổng lồ
của các website mua bán trực tuyến.
Trước đây, chúng ta luôn bị gị bó khi mua sắm bởi vì thời gian hạn chế. Một cửa
hàng, hay một trung tâm thương mại như địa điểm đơn lẻ, có khơng gian trưng bày hạng chế,
… chỉ cho phép chúng ta chưng bày được vài mười mấy, hay vài chục bộ. Thậm chí góc
khuất còn bị bỏ qua. Muốn bổ sung các các sản phẩm mới đều phải mới đều phải đi tìm các
nguồn khác từ các nguồn khác, điều này gây mất nhiều thời gian, và chỉ những ai có nhiều
thời gian rảnh rỗi hay có vị chí đi lại thuận lợi. Mỗi lần thay đổi địa điểm mua hàng cũng như
mỗi lần tới một chân trời mới, vô cùng bất tiện. Chi phí cho những chuyến đi cũng như thời
gian là vơ cùng bất tiện.
Tốc độ phát triển “chóng mặt” của Internet đã mang lại nhiều thay đổi lớn cho con
người, trong đó bao gồm cả việc thay đổi cách thức và thói mua sắm trước đây của chúng ta
vì đã xuất hiện các website mua bán trực tuyến.
Chúng em quyết định chọn đề tài “Xây dựng website mua điện thoại trực tuyến” bởi
vì tính ứng dụng cao, nhu cầu thực tế lớn và muốn vận dụng khả năng của mình ở nhiều loại
đề tài khác nhau để xây dựng các sản phẩm cho chúng và cái tên đề tài cũng khá thú vị vì
chúng em chưa từng nghĩ tới sẽ thực hiện đề tài này.
1.3. Khảo sát hiện trạng:
Hiện nay, thị trường đã có rất nhiều website mua sắm trực tuyến nổi tiếng được mọi
người biết đến như thegioididong, SellPhoneS, hay những website cửa hàng lớn, … Với giao
diện bắt mắt, dễ sử dụng, cùng với số lượng sản phầm khổng lồ, chúng nhanh chóng trở thành
những website mua bán trực tuyến hàng đầu. Các chức năng của những website này đều tập
trung vào trải nghiệm tìm kiếm một chiếc điện thoại thoải mái ưng ý nhất cho người dùng.
Chúng em cũng sẽ xây dựng một website mua điện thoại trực tuyến với những tính
năng mua sắm cơ bản nhằm mang lại trải nghiệm dễ sử dụng và tiện dụng cho người dùng.
1.4. Công nghệ sử dụng:
-
ReactJS
-
NodeJS
-
ExpressJS
-
MongoDB
1.5. Môi trường thiết kế:
-
Visual Studio Code.
1.6. Cơng cụ hỗ trợ:
-
Trình duyệt Cốc Cốc, Chrome, FireFox.
Chương 2:
CƠ SỞ LÝ THUYẾT
2.1. Tổng quan về ReactJS:
2.1.1.
Giới thiệu về ReactJS:
ReactJS là một thư viện javascript mã nguồn mở được phát triển bởi Facebook, ra
mắt vào 2013. ReactJS hỗ trợ việc xây dựng những thành phần trên website có tính tương tác
cao, có trạng thái và có thể sử dụng lại được.
Một trong những điểm nổi bật nhất của ReactJS đó là việc render dữ liệu khơng chỉ
thực hiện được trên tầng server mà còn ở dưới client. React so sánh sự thay đổi giữa các giá
trị của lần render này với lần render trước và cập nhật ít thay đổi nhất trên DOM (Document
Object Model).
2.1.2.
Khái niệm cơ bản trong ReactJS:
2.1.2.1.
Virtual DOM:
Công nghệ DOM ảo giúp tăng hiệu năng cho ứng dụng. Việc chỉ node gốc mới có
trạng thái và khi nó thay đổi sẽ tái cấu trúc lại toàn bộ, đồng nghĩa với việc DOM tree cũng sẽ
phải thay đổi một phần, điều này sẽ ảnh hưởng đến tốc độ xử lý.
React JS sử dụng Virtual DOM (DOM ảo) để cải thiện vấn đề này. Virtual DOM là
một object Javascript, mỗi object chứa đầy đủ thông tin cần thiết để tạo ra một DOM, khi dữ
liệu thay đổi nó sẽ tính tốn sự thay đổi giữa object và tree thật, điều này sẽ giúp tối ưu hoá
việc re-render DOM tree thật.
Hình 2.1: Mơ tả cách Virtual DOM hoạt động.
2.1.2.2.
-
Props và State:
Props: giúp các component tương tác với nhau, component nhận input gọi là props, và
trả thuộc tính mơ tả những gì component con sẽ render. Prop là bất biến.
-
State: thể hiện trạng thái của ứng dụng, khi state thay đồi thì component đồng thời
render lại để cập nhật UI.
2.1.3. Cách ReactJS hoạt động:
-
Tạo đại diện của nút DOM thông qua tạo hàm Element trong React. Đây là một ví dụ:
Hình 2.3: Ví dụ về tạo một element trong React.
-
Cú pháp trong HTML code ở trên rất giống với XML components. Tuy nhiên, thay vì
sử dụng DOM class truyền thống, React sử dụng className.
-
Thẻ JSX có tên thẻ, con và thuộc tính. Dấu ngoặc kép trong các thuộc tính JSX đại
diện cho chuỗi. Yếu tố này tương tự như JavaScript.
-
Ngoài ra, các giá trị số và biểu thức phải được viết bên trong dấu ngoặc nhọn.
Hình 2.4: Ví dụ về React được viết bằng JSX.
• <MyCounter> được gọi là Số đếm, hiển thị biểu thức số là giá trị của nó.
• GameScores là một đối tượng theo nghĩa đen có hai cặp giá trị prop.
• <DashboardUnit> là khối XML được render trên trang.
• scores={GameScores}}: thuộc tính điểm nhận được giá trị từ GameScores, đã
được xác định trước đó.
2.1.4. Ưu điểm của ReactJS:
-
Phù hợp với đa dạng thể loại website.
-
Tái sử dụng các Component.
-
Có thể sử dụng cho cả Mobile application.
-
Thân thiện với SEO.
-
Debug dễ dàng.
-
Công cụ phát triển web hot nhất hiện nay.
2.2. NodeJS:
2.2.1.
NodeJS là gì?
Nodejs là một nền tảng (Platform) phát triển độc lập được xây dựng trên V8
JavaScript Engine – trình thơng dịch thực thi mã JavaScript giúp chúng ta có thể xây dựng
được các ứng dụng web như các trang video clip, các forum và đặc biệt là trang mạng xã hội
phạm vi hẹp một cách nhanh chóng và dễ dàng mở rộng.
NodeJS có thể chạy trên nhiều nền tảng hệ điều hành khác nhau từ Window cho tới
Linux, OS X nên đó cũng là một lợi thế. NodeJS cung cấp các thư viện phong phú ở dạng
Javascript Module khác nhau giúp đơn giản hóa việc lập trình và giảm thời gian ở mức thấp
nhất.
Node.js được xây dựng và phát triển từ năm 2009, bảo trợ bởi công ty Joyent, trụ sở
tại California, Hoa Kỳ.
2.2.2.
Cách NodeJS hoạt động:
Ý tưởng chính của Node js là sử dụng non-blocking, hướng sự vào ra dữ liệu
thông qua các tác vụ thời gian thực một cách nhanh chóng. Bởi vì, Node js có khả năng
mở rộng nhanh chóng, khả năng xử lý một số lượng lớn các kết nối đồng thời bằng
thông lượng cao.
Nếu như các ứng dụng web truyền thống, các request tạo ra một luồng xử lý yêu
cầu mới và chiếm RAM của hệ thống thì việc tài nguyên của hệ thống sẽ được sử dụng
không hiệu quả. Chính vì lẽ đó giải pháp mà Node js đưa ra là sử dụng luồng đơn
(Single-Threaded), kết hợp với non-blocking I/O để thực thi các request, cho phép hỗ
trợ hàng chục ngàn kết nối đồng thời.
2.2.3. Ưu điểm của NodeJS:
-
Tốc độ cực nhanh: Được xây dựng dựa trên engine JavaScript V8 của Google
Chrome, do đó các thư viện của nó có khả năng thực thi code chỉ rất nhanh.
-
NPM: Với hơn 50,000 package khác nhau, các developer có thể dễ dàng lựa chọn bất
kỳ tính năng nào để xây dựng cho ứng dụng của mình.
-
Lập trình khơng đồng bộ: Mọi API của Node.JS đều có tính khơng đồng bộ (nonblocking), do đó một server dựa trên Node.JS khơng cần phải đợi API trả về dữ liệu.
-
Khơng có buffering: Node.JS giúp tiết kiệm thời gian xử lý file khi cần upload âm
thanh hoặc video vì các ứng dụng này không bao giờ buffer dữ liệu mà chỉ xuất dữ
liệu theo từng phần (chunk).
-
Đơn luồng: Node.JS sử dụng mơ hình đơn luồng với vịng lặp sự kiện. Do đó các ứng
dụng có thể xử lý số lượng request lớn hơn rất nhiều so với các server truyền thống
như Apache HTTP Server.
-
Khả năng mở rộng cao: Server NodeJS phản hồi theo hướng non-blocking, do đó nó
có thể mở rộng vơ cùng dễ dàng, tạo ra các luồng giới hạn để xử lý request.
2.3. ExpressJS:
2.3.1.
ExpressJS là gì?
Express.js là một framework mã nguồn mở miễn phí cho Node.js. Express.js được
sử dụng trong thiết kế và xây dựng các ứng dụng web một cách đơn giản và nhanh chóng.
Express hỗ rợ các phương thức HTTP và midleware tạo ra môt API vô cùng mạnh
mẽ và dễ sử dụng.
2.3.2. Tính năng của ExpressJS:
-
Phát triển máy chủ nhanh chóng: Expressjs cung cấp nhiều tính năng dưới dạng các
hàm để dễ dàng sử dụng ở bất kỳ đâu trong chương trình. Điều này đã loại bỏ nhu cầu
viết mã từ đó tiết kiệm được thời gian.
-
Phần mềm trung gian Middleware: Đây là phần mềm trung gian có quyền truy cập vào
cơ sở dữ liệu, yêu cầu của khách hàng và những phần mềm trung gian khác. Phần
mềm Middleware này chịu trách nhiệm chính cho việc tổ chức có hệ thống các chức
năng của Express.js.
-
Định tuyến - Routing: Express js cung cấp cơ chế định tuyến giúp duy trì trạng thái
của website với sự trợ giúp của URL.
-
Tạo mẫu - Templating: Các công cụ tạo khuôn mẫu được Express.js cung cấp cho
phép các nhà xây dựng nội dung động trên các website bằng cách tạo dựng các mẫu
HTML ở phía máy chủ.
-
Gỡ lỗi - Debugging: Để phát triển thành công các ứng dụng web không thể thiết đi
việc gỡ lỗi. Giờ đây với Expressjs việc gỡ lỗi đã trở nên dễ dàng hơn nhờ khả năng
xác định chính xác các phần ứng dụng web có lỗi.
Hình 2.5: Express js cung cấp cơ chế định tuyến giúp duy trì trạng thái của website.
2.4. MongoDB:
2.4.1.
-
MongoDB là gì:
MongoDB là một hệ quản trị cơ sở dữ liệu mã nguồn mở, là CSDL thuộc NoSql và
được hàng triệu người sử dụng.
-
MongoDB là một database hướng tài liệu (document), các dữ liệu được lưu trữ trong
document kiểu JSON thay vì dạng bảng như CSDL quan hệ nên truy vấn sẽ rất nhanh.
-
Với CSDL quan hệ chúng ta có khái niệm bảng, các cơ sở dữ liệu quan hệ (như
MySQL hay SQL Server...) sử dụng các bảng để lưu dữ liệu thì với MongoDB chúng
ta sẽ dùng khái niệm là collection thay vì bảng
-
So với RDBMS thì trong MongoDB collection ứng với table, còn document sẽ ứng
với row , MongoDB sẽ dùng các document thay cho row trong RDBMS.
-
Các collection trong MongoDB được cấu trúc rất linh hoạt, cho phép các dữ liệu lưu
trữ không cần tuân theo một cấu trúc nhất định.
-
Thông tin liên quan được lưu trữ cùng nhau để truy cập truy vấn nhanh thông qua
ngôn ngữ truy vấn MongoDB
2.4.2.
Một số câu lệnh cơ bản:
CSDL
Tạo csdl
use test;
Tạo bảng
db.createCollection('students');
Tạo bản ghi
db.students.insert({ name:huy, gender: 'male'});
Cập nhật
db.students.update({ _id: 1 },{$set:{ name: huy update' }});
Xóa bản ghi
db.students.remove({ _id: 1});
Tìm kiếm all
db.students.find({});
Tìm kiếm
db.students.find({ name: huy });
2.4.3.
-
MongoDB
Ưu điểm của MongoDB:
Do MongoDB sử dụng lưu trữ dữ liệu dưới dạng Document JSON nên mỗi một
collection sẽ có các kích cỡ và các document khác nhau, linh hoạt trong việc lưu trữ
dữ liệu, nên bạn muốn gì thì cứ insert vào thoải mái.
-
Dữ liệu trong MongoDB khơng có sự ràng buộc lẫn nhau, khơng có join như trong
RDBMS nên khi insert, xóa hay update nó khơng cần phải mất thời gian kiểm tra xem
có thỏa mãn các ràng buộc dữ liệu như trong RDBMS.
-
MongoDB rất dễ mở rộng (Horizontal Scalability). Trong MongoDB có một khái niệm
cluster là cụm các node chứa dữ liệu giao tiếp với nhau, khi muốn mở rộng hệ thống ta
chỉ cần thêm một node với vào cluster:
-
Trường dữ liệu “_id” luôn được tự động đánh index (chỉ mục) để tốc độ truy vấn
thông tin đạt hiệu suất cao nhất.
-
Khi có một truy vấn dữ liệu, bản ghi được cached lên bộ nhớ Ram, để phục vụ lượt
truy vấn sau diễn ra nhanh hơn mà không cần phải đọc từ ổ cứng.
-
Hiệu năng cao: Tốc độ truy vấn (find, update, insert, delete) của MongoDB nhanh hơn
hẳn so với các hệ quản trị cơ sở dữ liệu quan hệ (RDBMS). Với một lượng dữ liệu đủ
lớn thì thử nghiệm cho thấy tốc độ insert của MongoDB có thể nhanh tới gấp 100 lần
so với MySQL.
Chương 3:
PHÂN TÍCH THIẾT KẾ HỆ THỐNG
3.1. Sơ đồ Use-case:
Hình 3.1: Sơ đồ use-case tổng quát
3.1.1. Đăng nhập:
Hình 3.2: Sơ đồ use-case đăng nhập.
Bảng 3.1: Đặc tả đăng nhập:
Use – Case
Tên Use – Case
Mô tả
Nội Dung
Đăng nhập
Use-Case cho phép người dùng đăng nhập vào hệ thống
