Nó được sử dụng để xây dựng các ứng dụng web động, đặc biệt là cácứng dụng đơn trang Single Page Applications - SPA, bằng cách cập nhật cácthành phần của trang web mà không cần tải lại t
Tên đề tài
Sử dụng Framework ReactJS kết hợp Fisebase xây dựng website thương mại điện tử Eshop.
Lí do chọn
Hiện nay, ngành Công nghệ thông tin đã có những bước phát triển nhanh chóng về ứng dụng của nó trong mọi lĩnh vực trong cuộc sống trên phạm vi toàn thế giới nói chung và việt nam nói riêng Công nghệ thông tin là một phần không thể thiếu của cuộc sống văn minh, góp phần đẩy mạnh công cuộc công nghiệp hóa hiện đại hóa đất nước Việc ứng dụng những thành quả của khoa học công nghệ vào trong đời sống, trong công tác là hết sức thiết yếu Ứng dụng của công nghệ thông tin kết hợp với truyền thông hóa được xem là một trong những yếu tố mang tính quyết định trong hoạt động của công ty, các tổ chức… nó đóng vai trò quan trọng và không thể thiếu Công nghệ thông tin và truyền thông hóa góp phần làm thay đổi suy nghĩ, lối mòn tư duy của mỗi con người, nó giúp con người năng động hơn, kết nối nhanh hơn ở mọi lúc mọi nơi làm tăng mức độ hiệu quả, năng suất của công việc.
TÌM HIỂU CÁC CÔNG NGHỆ SỬ DỤNG TRONG DỰ ÁN
Tìm hiểu về NodeJs
Nodejs là một framework mạnh mẽ được phát triển trên engine JavaScript V8 của Chrome, một trong những engine JavaScript nhanh nhất hiện có trên thị trường Nó biên dịch JavaScript trực tiếp vào code của máy, điều này dẫn đến hiệu quả cao hơn của các ứng dụng được xây dựng bằng Nodejs Nó là một framework nhẹ và được sử dụng nhiều để phát triển các ứng dụng web ở phía máy chủ Nó mở rộng API JavaScript để cung cấp các chức năng thông thường phía máy chủ.
Do thông lượng tốt hơn và tính nhất quán cao hơn, nó được sử dụng để phát triển ứng dụng quy mô lớn như các trang web streaming video, ứng dụng một trang và các ứng dụng web khác Nodejs sử dụng mô hình event-driven và non-blockingI/O, điều này làm cho nó trở thành một lựa chọn đúng đắn cho các ứng dụng thời gian thực sử dụng nhiều dữ liệu.
Nodejs được xây dựng trên V8 engine của Google Nó là công cụ javascript nhanh nhất V8 engine chuyển đổi code javascript thành mã máy mà máy tính thực sự hiểu được Kết quả sau đó được tạo và trả về nodejs Nodejs không thể hiểu mã javascript mà chúng ta viết mà không có V8 Bên cạnh javascript, V8 cũng sử dụng
C ++. Đầu vào-đầu ra không đồng bộ:
I/O không đồng bộ cho phép các ứng dụng xử lý chồng chéo với các hoạt động I/O Nói cách đơn giản, mục tiêu là chương trình không bao giờ bị nghẽn lại Trong I/O đồng bộ, thread - Luồng (một luồng chỉ là một chuỗi các lệnh) sẽ đợi cho đến khi toàn bộ hoạt động kết thúc Mặt khác trong I/O không đồng bộ, luồng không đợi trong các hoạt động Thao tác I/O sẽ chạy ở chế độ nền và nó sẽ được gọi khi kết thúc Tính năng I/O không đồng bộ cho phép ứng dụng có thêm thời gian để thực hiện các xử lý khác trong khi I/O đang diễn ra.
LIBUV là một thư viện mã nguồn mở tập trung vào I/O không đồng bộ, được viết bằng C++, cung cấp cho Node.js quyền truy cập vào các tài nguyên hệ thống như hệ điều hành, mạng và hệ thống tệp Một trong những tính năng quan trọng của LIBUV là event loop, giúp xử lý các sự kiện không đồng bộ hiệu quả Ngoài ra, LIBUV còn triển khai thread pool để phân công các tác vụ một cách hiệu quả, tối ưu hóa hiệu suất cho các ứng dụng Node.js.
Event Loop chịu trách nhiệm xử lý các tác vụ đơn giản hơn và Thread pool quản lý các tác vụ nặng.
Khi chúng ta sử dụng Nodejs trên máy tính, có nghĩa là có một tiến trình Node đang chạy trên máy tính đó Quá trình này chỉ là một chương trình đang được thực thi Bây giờ trong quá trình đó, Nodejs chạy trong một thread (luồng) duy nhất Một thread về cơ bản chỉ là một chuỗi các hướng dẫn và không cần thiết phải hiểu sâu về thread hoặc quy trình là gì Chỉ cần tưởng tượng thread là một hộp nơi mã của chúng ta được thực thi trong bộ xử lý của máy tính Bây giờ, điều cần thiết để hiểu ở đây là thực tế là Node chạy trong single thread,
Thread pool gồm 4 luồng bổ sung hoàn toàn độc lập với luồng đơn trong vòng lặp sự kiện Có thể cấu hình thread pool lên tới 128 luồng nhưng thông thường 4 luồng này là đủ 4 luồng này cùng nhau tạo thành một thread pool Vòng lặp sự kiện sẽ tự động chia sẻ các tác vụ nặng vào thread pool Người phát triển không cần quyết định đưa tác vụ nào vào thread pool và không được đưa Một số tác vụ tốn kém được chia sẻ gồm: tất cả thao tác xử lý tệp, mọi tác vụ liên quan đến mật mã, như lưu mật khẩu vào bộ nhớ đệm, sau đó là tất cả hoạt động liên quan đến nén, tra cứu DNS (ghép nối tên miền với địa chỉ IP thực tương ứng) và hơn thế nữa Đây là những tác vụ dễ gây tắc nghẽn luồng chính nhất nên Node sẽ tự động xử lý chúng bằng cách tải vào thread pool.
Các thư viện quan trọng khác:
Các thư viện quan trọng nhất cho Nodejs là LIBUV và V8 Tuy nhiên, Node không chỉ hoạt động dựa trên V8 và LIBUV mà còn dựa trên một số thư viện khác như HTTP parser for parsing HTTP, C-ARES for DNS queries, OpenSSL for cryptography, and Zlib for file compression Khi tất cả các thành phần này kết hợp hoàn hảo với nhau, NodeJS sẵn sàng được sử dụng ở phía máy chủ cho tất cả các ứng dụng.
Kiến trúc hướng sự kiện - Event-Driven Architecture:
Hầu hết các mô-đun cốt lõi của Node, như HTTP, Hệ thống tệp được xây dựng dựa trên kiến trúc hướng sự kiện Khái niệm này thực sự khá đơn giản Trong Node, có một số đối tượng nhất định được gọi là bộ phát sự kiện phát ra các sự kiện được đặt tên ngay khi có điều gì đó quan trọng xảy ra trong ứng dụng, chẳng hạn như yêu cầu truy cập máy chủ hoặc tệp hoàn tất để đọc Sau đó, các sự kiện này được chọn bởi các trình nghe sự kiện đã thiết lập, điều này sẽ kích hoạt các chức năng (hàm gọi lại) được gắn với mỗi trình nghe.
NPM là viết tắt của Node package manager là một công cụ tạo và quản lý các thư viện lập trình Javascript cho Node.js
NPM cung cấp 2 chức năng chính bao gồm:
Là kho lưu trữ trực tuyến cho các package/module Chúng ta có thể tìm kiếm các package trên search.nodejs.org.
Quản lý các module javascript và phiên bản của chúng trong các dự án của chúng ta đơn giản hơn, dễ dàng hơn, tiết kiệm thời gian hơn.
NPM hoạt động như thế nào?
Nó hoạt động dựa trên hai vai trò:
Nó là repository được sử dụng rộng rãi để publish project Node.js nguồn mở Nghĩa là đây là nền tảng trực tuyến – nơi mọi người có thể publish và chia sẻ công cụ được viết bằng JavaScript. npm là công cụ dòng lệnh giúp tương tác với các nền tảng trực tuyến, như trình duyệt và máy chủ Tiện ích này hỗ trợ cài đặt và gỡ cài đặt gói, quản lý phiên bản và quản lý dependency cần thiết để chạy dự án.
Express là 1 framework nodejs để tạo web application, bao gồm nhiều tính năng mạnh mẽ để xây dựng các ứng dụng web và mobile Bản thân express framework khá tối giản, tuy nhiên các nhà phát triển đã tạo ra rất nhiều thư viện giúp giải quyết hầu hết các vấn đề trong lập trình web, bao gồm thư viện để làm việc với cookies, sessions, URL parameters, POST data, security headers, …Cài đặt và xây dựng web application bằng express khá đơn giản, nhanh chóng, đòi hỏi ít kỹ năng vì chỉ sử dụng javascript.
Route Handlers quyết định ứng dụng sẽ đáp ứng các request từ phía client như thế nào Route là 1 URI (hoặc đường dẫn) và method (POST, GET, PUT, …), mỗi route có thể có 1 hoặc nhiều functions, các function này sẽ được thực thi khi route khớp Về mặt cơ bản, tất cả route đều có thể được định nghĩa trong file js chính của application.
Function Middleware là các function có thể truy xuất object request (req), object response (res), và function middleware kế tiếp trong chu k¤ request- response của ứng dụng Các function Middleware có thể:
- Thay đổi các object request response.
- Kết thúc chu k¤ request-response.
- Gọi function middleware kế tiếp.
Express application có thể sử dụng các loại middleware sau:
Template Engine cho phép ta sử dụng các file view template trong ứng dụng,tại thời điểm thực thi, template engine sẽ thay thế các biến trong file template bằng giá trị được truyền, và chuyển đổi template đó thành file HTML để trả về phía client Các template engine được sử dụng phổ biến trong Express là Pug,Mustache, EJS, Jade, …
Tìm hiểu về ReactJs
ReactJS là một thư viện JavaScript mã nguồn mở được phát triển bởi Facebook Nó được sử dụng để xây dựng các ứng dụng web động, đặc biệt là các ứng dụng đơn trang (Single Page Applications - SPA), bằng cách cập nhật các thành phần của trang web mà không cần tải lại toàn bộ trang.
Hình 2.4 Hình ảnh minh họa ReactJS
ReactJS sử dụng một mô hình lập trình khá đơn giản được gọi là
"Component-based architecture", cho phép phát triển và tái sử dụng các thành phần
UI (User Interface) của ứng dụng một cách dễ dàng và hiệu quả Điều này giúp cho quá trình phát triển ứng dụng web trở nên đơn giản, dễ dàng quản lý và bảo trì hơn.
ReactJS cũng được hỗ trợ bởi một cộng đồng rộng lớn, cung cấp nhiều thư viện và công cụ hỗ trợ để tăng tốc quá trình phát triển.
ReactJS ra mắt vào năm 2013, bản thân nó là một thư viện Javascript được dùng để để xây dựng các tương tác với các thành phần trên website 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 nữa.
React-Redux là một thư viện JavaScript dùng để quản lý trạng thái (state) cho các ứng dụng React Thư viện này giúp các ứng dụng React của bạn hoạt động hiệu quả hơn bằng cách tách biệt các thành phần UI và logic xử lý dữ liệu. React-Redux sử dụng mô hình Flux để quản lý trạng thái của ứng dụng Mô hình này bao gồm một "store" lưu trữ toàn bộ trạng thái của ứng dụng, và các
"action" để thay đổi trạng thái đó React-Redux cũng cung cấp các "middleware" để thực hiện các xử lý bổ sung khi có các action được gửi đến.
Việc sử dụng React-Redux giúp quản lý trạng thái trong ứng dụng React trở nên đơn giản hơn, tách biệt rõ ràng phần giao diện người dùng và logic xử lý dữ liệu, từ đó giúp ứng dụng dễ dàng bảo trì và mở rộng.
Hình 2.5 Hình ảnh minh họa React-Redux
React-router-dom là một thư viện JavaScript được sử dụng để điều hướng (routing) trong ứng dụng web React Nó cho phép bạn định nghĩa các tuyến đường (routes) trong ứng dụng của mình và điều hướng người dùng giữa các trang web và các phần khác nhau của ứng dụng của bạn một cách dễ dàng.
Thư viện react-router-dom cung cấp một số thành phần chính, bao gồm Router, Route và Link, giúp bạn xác định các tuyến đường và điều hướng người dùng giữa các tuyến đường khác nhau Nó cũng hỗ trợ các tính năng như tham số trên tuyến đường, bảo mật tuyến đường và các chức năng khác để giúp quản lý các tuyến đường của bạn.
Hình 2.6 Hình ảnh minh họa React-Router DOM
"React-Toastify" là một thư viện mã nguồn mở cho ReactJS được sử dụng để hiển thị các thông báo cho người dùng Nó cung cấp các thông báo cảnh báo,thông tin, lỗi và thành công trong một cửa sổ nhỏ (toast) ở góc màn hình React- toastify rất dễ sử dụng và có thể tùy chỉnh với nhiều kiểu dáng khác nhau để phù hợp với giao diện của ứng dụng Thư viện này đã được phát triển và bảo trì bởi một cộng đồng lớn các nhà phát triển.
Hình 2.7 Hình ảnh minh họa React-Toastify
ReactJS có hiệu suất nhanh và khả năng tự cập nhật tốt, giúp cho ứng dụng chạy mượt mà hơn.
ReactJS cung cấp cách tiếp cận component-based development, giúp bạn tập trung xây dựng thành phần cụ thể và quản lý chúng dễ dàng hơn.
ReactJS có thể tái sử dụng thành phần được phát triển cho các dự án khác nhau, giúp tiết kiệm thời gian phát triển và giảm chi phí.
ReactJS đòi hỏi bạn phải học JSX, một cú pháp mới và khá khó học đối với một số người mới học ReactJS.
Một số nhà phát triển tin rằng ReactJS không phù hợp với các ứng dụng lớn do tính phức tạp tiềm ẩn và khó khăn trong việc bảo trì khi ứng dụng được phát triển.
2.2.5.2 React-outer-DOM Ưu điểm:
React-Router-DOM giúp xây dựng ứng dụng đơn trang (single-page application) dễ dàng và một cách tự nhiên.
React-Router-DOM có thể tạo chuyển đổi trang nhanh hơn mà không cần tải lại toàn bộ trang.
React-Router-DOM có nhiều tính năng hỗ trợ khác nhau, cho phép bạn tăng cường trải nghiệm người dùng và đầy đủ hơn.
React-Router-DOM có thể trở nên khó khăn nếu bạn không quản lý quá nhiều Route, có thể dẫn đến bug hoặc khó khăn trong việc bảo trì kéo dài. Việc tạo và xử lý URL của React-Router-DOM là trọng tâm của việc phát triển của một ứng dụng, do đó sẽ có một số khó khăn về cấu trúc và bảo trì.
React-Redux giúp quản lý state của ứng dụng dễ dàng hơn, đảm bảo tính nhất quán trong toàn bộ ứng dụng.
React-Redux giúp bạn tổ chức và quản lý code một cách tốt hơn, giúp bạn tập trung vào việc lập trình trực tiếp hơn là lo lắng về data.
React-Redux là một thư viện phổ biến trong cộng đồng React, cung cấp cho bạn nhiều tài liệu và hỗ trợ.
Thể hiện bằng cách bọc trong Wrapper Component gây ra độ phức tạp không cần thiết, làm cho một số người mới học Redux cảm thấy khó khăn hơn.
Với các ứng dụng đơn giản, React-Redux có thể làm cho code của bạn trở nên phức tạp hơn đối với các tính năng nhỏ.
Tìm hiểu về FiseBase
Firebase là một nền tảng dịch vụ đám mây của Google cung cấp cho các nhà phát triển các công cụ để xây dựng và triển khai ứng dụng di động và web Nền tảng này cung cấp nhiều tính năng như cơ sở dữ liệu thời gian thực, phân tích, lưu trữ, xác thực người dùng, push notification và nhiều hơn nữa Với Firebase, các nhà phát triển không cần phải tự xây dựng các phần mềm phức tạp để quản lý cơ sở dữ liệu và hạ tầng, mà có thể tập trung vào việc phát triển ứng dụng của mình. Firebase được sử dụng rộng rãi trong cộng đồng phát triển ứng dụng và web hiện nay.
Hình 2.8 Hình ảnh minh họa Fisebase
2.3.2 Firebase hoạt động với chức năng như thế nào?
Chức năng hoạt động của Firebase là gì? Kể từ sau khi Google chính thức mua lại và tiếp tục phát triển, cho đến nay Firebase gồm có các hoạt động điển hình như sau:
Hoạt động nổi trội nhất của Firebase chính là xây dựng những bước xác dụng người dùng thông qua Email, Facebook, Twitter, GitHub hay Google Ngoài ra, hoạt động Firebase Authentication cũng hỗ trợ xác thực nặc danh cho những ứng dụng Hoạt động xác thực của Firebase có thể giúp cho thông tin cá nhân của những người sử dụng được an toàn hơn Điều này cũng đảm bảo tài khoản và các thông tin cá nhân của người dùng không bị đánh cắp.
Cách thức hoạt động tiếp theo được nhắc đến là Firebase Hosting Đây là một hoạt động được phân phối thông qua tiêu chuẩn công nghệ bảo mật SSl từ hệ thống mạng CDN.
CDN chính là cụm từ viết tắt của Content Delivery Network chính là một mạng lưới máy chủ giúp lưu giữ lại các bản sao của các nội dung tĩnh, Những nội dung tĩnh này nằm ở bên trong website và trực tiếp phân phối đến các máy chủ PoP khác Mạng lưới của máy chủ CDN được thiết đặt ở khắp nơi trên thế giới.
Từ máy chủ Pop – Points of Presence, nguồn dữ liệu sẽ được gửi đi đến những người dùng cuối cùng.
Cơ sở dữ liệu thời gian thực Firebase Realtime Database là một dạng JSON được đồng bộ theo thời gian thực tới tất cả các giao diện người dùng kết nối Để sử dụng dịch vụ này, các lập trình viên cần tạo tài khoản trên Firebase Khi ứng dụng được phát triển, dữ liệu trong cơ sở dữ liệu sẽ tự động cập nhật liên tục Sau khi cập nhật, dữ liệu sẽ được truyền qua các kết nối SSL 2048 bit.
2.3.3 Ưu nhược điểm của Firebase
Sử dụng dễ dàng: Những người dùng có thể đăng ký một tài khoản
Firebase thông qua tài khoản Google Đồng thời, người cùng cũng có thể sử dụng nền tảng này trong quá trình phát triển ứng dụng một cách đơn giản nhất.
Tốc độ phát triển nhanh: Ưu điểm tiếp theo chính là Firebase hỗ trợ cho việc phát triển ứng dụng rất nhanh chóng Điều này sẽ giúp lập trình viên giảm bớt được thời gian để phát triển cũng như tiếp thị ứng dụng.
Cung cấp nhiều dịch vụ: Firebase còn cung cấp đa dịch vụ cho mục đích phát triển trang web Người dùng có thể lựa chọn database Firestore hoặcRealtime theo đúng ý muốn của mình.
Nền tảng cho Google phát triển: google firebase là gì? Firebase được
Google mua lại và trở thành một phần của Google Ứng dụng này sẽ khai thác được triệt để sức mạnh cũng như các dịch vụ hiện đang sẵn có của Google.
Giao diện người dùng được chú trọng: Firebase sẽ cho phép các lập trình viên tập trung hơn vào việc phát triển giao diện của người dùng thông qua kho Backend mẫu vô cùng đa dạng.
Firebase app không có máy chủ: Chính điều này sẽ giúp cho Firebase có được khả năng tối ưu hóa nhất về hiệu suất làm việc nhờ vào việc mở rộng cụm database.
Học máy: Ứng dụng Firebase sẽ cung cấp học máy cho các lập trình viên để hỗ trợ tốt nhất cho việc phát triển ứng dụng.
Tạo lưu lượng truy cập: Firebase App sẽ hỗ trợ việc tạo lập các chỉ mục. Đồng thời, Firebase cũng sẽ giúp nâng cao thứ hạng của ứng dụng ở trên bảng xếp hạng của Google Nhờ vậy mà lượt traffic sẽ tăng lên.
Theo dõi lỗi: Đây là một công cụ để phát triển cũng như khắc phục lỗi vô cùng tuyệt vời Nhờ vậy khi sử dụng, bạn không cần lo lắng mình sẽ để sót lỗi.
Chức năng sao lưu: cách sử dụng firebase sao lưu một cách thường xuyên và đảm bảo tính sẵn có Đồng thời, chức năng này cũng giúp cho thông tin và dữ liệu được bảo mật một cách an toàn nhất.
PHÂN TÍCH, THIẾT KẾ, PHÁT TRIỂN DỰ ÁN
Khảo sát sơ bộ
Một website cần có những chức năng chính như sau:
Cung cấp thông tin về các loại sản phẩm, tên sản phẩm, loại sản phẩm, hình ảnh, giá cả, mô tả,
Cung chấp chức năng mua hàng trực tuyến, thanh toán online,… Cung cấp thông tin liên hệ, hướng dấn mua hàng,…
Người được hỏi : Nguyễn Văn Quân Người phỏng vấn : Đinh Văn Phúc Địa chỉ : Quán cafe đối diện cổng Thời gian phỏng vấn : 28/11/2023 chính trường Đại học công nghiệp Hà
Thời gian bắt đầu : 14h30 Thời gian kết thúc : 15h30 Đối tượng : Người đang muốn xây dựng một website thương mại điện tử
Các yêu cầu đòi hỏi
Chương trính Ước lượng thời gian
Tổng quan về dự án 5 phút
Tổng quan về phỏng vấn 3 phút
Chủ đề sẽ đề cập Xin phép được ghi âm
Tổng hợp các nội dung chính, ý kiến của người được hỏi
Dự kiến tổng thời lượng : 1 tiếng
Dự án : Xây dựng website thương mại điện tử EShop
Người được hỏi : Nguyễn Văn Quân Người hỏi : Đinh Văn Phúc
Câu 1 Bạn muốn xây dựng một website thương mại điện tử cho mục đích gì?
Câu 2 Bạn đã nghiên cứu thị trường và đối thủ cạnh tranh của mình chưa?
Câu 3 Bạn đã xác định các tính năng và hiệu suất cần thiết cho website của mình chưa?
Câu 4 Bạn đã nghĩ về thiết kế và trải nghiệm người dùng của website chưa
Câu 5 Bạn đã chọn các công nghệ và ngôn ngữ lập trình phù hợp để xây dựng website chưa?
Câu 6 Bạn đã đảm bảo rằng website của bạn tuân thủ các quy định bảo mật và bảo vệ thông tin người dùng chưa?
Câu 7 Bạn đã đánh giá chiến lược marketing của mình để giới thiệu website đến khách hàng tiềm năng chưa? Đánh giá chung
Phiếu khảo sát hoạt động của Website thương mại điện tử Eshop
1 Vui lòng cho biết tên của bạn?
2 Bạn đang ở độ tuổi nào? a Dưới 18 tuổi b Từ 18-25 tuổi c Từ 26-35 tuổi d Từ 36-45 tuổi e Từ 46-55 tuổi f Trên 55 tuổi
3 Bạn là nam hay nữ? a Nam b Nữ
4 Bạn có sản phẩm nào từ trang web của chúng tôi chưa? a Có b Không
5 Nếu có, sản phẩm đó có đáp ứng nhu cầu của bạn không? a Rất đáp ứng b Đáp ứng c Không rõ d Không đáp ứng e Hoàn toàn không đáp ứng
6 Bạn sử dụng dịch vụ giao hàng của chúng tôi không? a Có b Không
7 Nếu có, bạn có hài lòng với dịch vụ giao hàng không? a Rất hài lòng b Hài lòng c Không rõ d Không hài lòng e Hoàn toàn không hài lòng
8 Bạn sẵn sàng giới thiệu trang web của chúng tôi cho người khác không? a Rất sẵn sàng b Sẵn sàng c Không chắc chắn d Không sẵn sàng e Hoàn toàn không sẵn sàng
9 Bạn có bất k¤ đề xuất hoặc ý kiến gì để cải thiện trang web của chúng tôi không?
10.Bạn có thể cho chúng tôi biết email của bạn để chúng tôi có thể liên hệ với bạn được không?
Cảm ơn bạn đã dành thời gian để hoàn thành bảng khảo sát của chúng tôi Ý kiến của bạn rất quan trọng đối với chúng tôi để cải thiện trải nghiệm của khách hàng trên trang web của chúng tôi. được cập nhật trong cơ sở dữ liệu. Điểm mở rộng:
3.2.2.10 Mô tả use case Quản lý đơn hàng (Đặng Quốc Việt)
Use case cho phép người quản trị xem, sửa trạng thái đơn hàng trong bảng ORDERS.
Luồng sự kiện o Luồng cơ bản
1 Use case này bắt đầu khi người quản trị kích vào nút “View orders” trên thanh menu quản trị Hệ thống lấy thông tin chi tiết của đơn hàng gồm: mã đơn hàng, ngày đặt hàng, tổng tiền, trạng thái đơn hàng từ bảng ORDERS trong cơ sở dữ liệu và hiển thị danh sách các đơn hàng lên màn hình.
2 Sửa đơn hàng a Người quản trị kích vào “Order status” trên một dòng đơn hàng.
Hệ thống sẽ lấy thông tin cũ của đơn hàng được chọn như mã đơn hàng, tổng tiền, trạng thái đơn hàng, địa chỉ từ bảng ORDERS rồi hiển thị lên màn hình Sau đó, người quản trị sẽ chọn một trạng thái đơn hàng và kích vào nút.
“Update status” Hệ thống sẽ sửa thông tin của đơn hàng được chọn trong bảng ORDERS và hiển thị danh sách đơn hàng đã cập nhật.
Use case kết thúc. o Luồng rẽ nhánh
1 Tại bất k¤ thời điểm nào trong quá trình thực hiện use case nếu không kết nối được với cơ sử dữ liệu thì hệ thống sẽ hiển thị một thông báo lỗi và use case kết thúc.
Các yêu cầu đặc biệt
Use case này chỉ cho phép một số vai trò như người quản trị thực hiện
Người quản trị cần đăng nhập với vai trò quản trị hệ thống trước khi có thể thực hiện use case.
Nếu use case kết thúc thành công thì thông tin về đơn hàng sẽ được cập nhật trong cơ sở dữ liệu. Điểm mở rộng
3.3 Thiết kế, xây dựng, phát triển dự án
3.3.1 Tìm hiểu cách hoạt động của ReactJS
3.3.1.1 Cách hoạt động của ReactJS
ReactJS là một thư viện JavaScript được sử dụng để xây dựng giao diện người dùng (User Interface - UI) cho các ứng dụng web ReactJS được tạo ra bởi Facebook và được phát hành như một mã nguồn mở.
ReactJS sử dụng một khái niệm gọi là "virtual DOM" (Document ObjectModel - Mô hình đối tượng tài liệu) để tối ưu hóa hiệu suất và đáp ứng nhanh hơn cho các ứng dụng web Khi trạng thái của ứng dụng thay đổi, ReactJS sẽ tạo ra một bản sao của trang web gốc và so sánh nó với bản cập nhật mới nhất Sau đó,
ReactJS chỉ cập nhật những phần thay đổi thực sự trên trang web thay vì cập nhật toàn bộ trang web Việc này giúp giảm thiểu việc tải lại toàn bộ trang web và tăng tốc độ hiển thị dữ liệu mới.
ReactJS cũng sử dụng một cấu trúc gọi là "component" (thành phần) để tách biệt các phần của ứng dụng web Các thành phần này có thể được tái sử dụng trong nhiều ứng dụng khác nhau, giúp tiết kiệm thời gian và nỗ lực trong quá trình phát triển ứng dụng. Để sử dụng ReactJS, bạn cần cài đặt các gói phụ thuộc và sử dụng trình biên dịch (compiler) như Babel để biên dịch mã JavaScript của bạn Sau đó, bạn có thể sử dụng các thành phần và thư viện của ReactJS để xây dựng giao diện người dùng cho ứng dụng web của mình.
3.3.1.2 Các build 1 dự án ReactJS đơn giản Để xây dựng một dự án đơn giản với ReactJS, cần thực hiện các bước sau:
1 Tạo một thư mục mới cho dự án của bạn.
2 Mở terminal và chạy lệnh sau để tạo một file package.json:
3 Cài đặt ReactJS và các thư viện phụ thuộc bằng cách chạy lệnh:
4 Tạo một file index.html trong thư mục gốc của dự án và thêm mã HTML cơ bản sau:
1 Tạo thư mục "src" và trong đó tạo một file index.js Trong file index.js, thêm mã sau để hiển thị một "Hello World" message:
2 Chạy lệnh sau trong terminal để biên dịch mã ReactJS thành mãJavaScript:
3 Mở file index.html và bạn sẽ thấy "Hello World" message được hiển thị trên trang web.
3.3.2 Sử dụng Mockup thiết kế giao diện các màn hình trang web Trang đăng nhập (Phúc)
Trang chủ (Nguyễn Đức Thắng)
Trang xem sản phẩm theo danh mục (Nguyễn Đức Thắng)
Trang thêm sản phẩm (Nguyễn Đức Thắng)
Trang giỏ hàng (Ngô Đình Việt)
Trang tìm kiếm sản phẩm theo tên (Ngô Đình Việt)
Trang xem chi tiết sản phẩm (Ngô Đình Việt)
Trang quản lý sản phẩm (Đặng Quốc Việt)
Trang xóa sản phẩm(Đặng Quốc Việt)
Trang sửa sản phẩm (Đặng Quốc Việt)
Trang quản lý đơn hàng (Nhật)
Trang chi tiết đặt hàng (Nhật)
Link github sản phẩm: https://github.com/NuV00/BTL_Nhom5_PMMNM.git Một số hình ảnh trang web khi được hoàn thiện: Trang thanh toán
Trang quản lý đơn hàng
Trang chi tiết sản phẩm
Trang thông tin thanh toán
Trang quản lý giỏ hàng
Trang chủ xem tất cả sản phẩm
Qua bài tập lớn đã giúp sinh viên có cái nhìn tổng thể hơn về một dự án hoàn chỉnh và những kĩ năng như làm việc nhóm, kĩ năng đọc hiểu document để sử dụng các công nghệ mới nhất Giúp sinh viên tiếp cận được với quy trình cơ bản để tạo ra sản phẩm. Đến đây cũng đã kết thúc bài báo cáo bài tập lớn của nhóm về đề tài " Sử dụng Framework ReactJS kết hợp Fisebase xây dựng website thương mại điện tử EShop" với sự đóng góp của các thành viên trong nhóm thực hiện Nhìn lại quá trình thực hiện bài báo cáo này, nhóm thấy được những điểm mạnh và điểm yếu còn vướng mắc về kiến thức cũng như kỹ năng trình bày và tìm hiểu các tài liệu liên quan Để rút kinh nghiệm cho những lần thực hiện sau và cải thiện chất lượng của bài báo cáo sau sửa đổi, nhóm đi đến vạch ra những ưu nhược điểm của cá nhân cũng như tập thể nhóm thực hiện đề tài về những gì nhóm làm, những gì nhóm đã đạt được, những gì còn thiếu sót và định hướng sẽ thực hiện trong tương lai.
Những điều nhóm còn thiếu sót, chưa thực hiện được Tuy có những đóng góp tích cực nhằm hoàn thiện báo cáo, tuy nhiên không thể tránh khỏi những thiếu sót, hạn chế Bên cạnh đó, việc thiếu dữ liệu là điều nhóm còn hạn chế Bởi các thành viên nhóm còn đang là sinh viên, không đủ nguồn lực để xây dựng một bộ dữ liệu hoàn chỉnh, đảm bảo chất lượng
Cuối cùng với những đóng góp, cố gắng để hoàn thiện báo cáo, nhóm rất mong được sự góp ý chân thành, quý báu từ quý thầy cô và các bạn đọc Nhóm xin chân thành cảm ơn!
Nhóm thực hiện đề tài!
Thiết kế, xây dựng, phát triển dự án
3.3.1 Tìm hiểu cách hoạt động của ReactJS
3.3.1.1 Cách hoạt động của ReactJS
ReactJS là một thư viện JavaScript được sử dụng để xây dựng giao diện người dùng (User Interface - UI) cho các ứng dụng web ReactJS được tạo ra bởi Facebook và được phát hành như một mã nguồn mở.
ReactJS sử dụng một khái niệm gọi là "virtual DOM" (Document ObjectModel - Mô hình đối tượng tài liệu) để tối ưu hóa hiệu suất và đáp ứng nhanh hơn cho các ứng dụng web Khi trạng thái của ứng dụng thay đổi, ReactJS sẽ tạo ra một bản sao của trang web gốc và so sánh nó với bản cập nhật mới nhất Sau đó,
ReactJS chỉ cập nhật những phần thay đổi thực sự trên trang web thay vì cập nhật toàn bộ trang web Việc này giúp giảm thiểu việc tải lại toàn bộ trang web và tăng tốc độ hiển thị dữ liệu mới.
ReactJS cũng sử dụng một cấu trúc gọi là "component" (thành phần) để tách biệt các phần của ứng dụng web Các thành phần này có thể được tái sử dụng trong nhiều ứng dụng khác nhau, giúp tiết kiệm thời gian và nỗ lực trong quá trình phát triển ứng dụng. Để sử dụng ReactJS, bạn cần cài đặt các gói phụ thuộc và sử dụng trình biên dịch (compiler) như Babel để biên dịch mã JavaScript của bạn Sau đó, bạn có thể sử dụng các thành phần và thư viện của ReactJS để xây dựng giao diện người dùng cho ứng dụng web của mình.
3.3.1.2 Các build 1 dự án ReactJS đơn giản Để xây dựng một dự án đơn giản với ReactJS, cần thực hiện các bước sau:
1 Tạo một thư mục mới cho dự án của bạn.
2 Mở terminal và chạy lệnh sau để tạo một file package.json:
3 Cài đặt ReactJS và các thư viện phụ thuộc bằng cách chạy lệnh:
4 Tạo một file index.html trong thư mục gốc của dự án và thêm mã HTML cơ bản sau:
1 Tạo thư mục "src" và trong đó tạo một file index.js Trong file index.js, thêm mã sau để hiển thị một "Hello World" message:
2 Chạy lệnh sau trong terminal để biên dịch mã ReactJS thành mãJavaScript:
3 Mở file index.html và bạn sẽ thấy "Hello World" message được hiển thị trên trang web.
3.3.2 Sử dụng Mockup thiết kế giao diện các màn hình trang web Trang đăng nhập (Phúc)
Trang chủ (Nguyễn Đức Thắng)
Trang xem sản phẩm theo danh mục (Nguyễn Đức Thắng)
Trang thêm sản phẩm (Nguyễn Đức Thắng)
Trang giỏ hàng (Ngô Đình Việt)
Trang tìm kiếm sản phẩm theo tên (Ngô Đình Việt)
Trang xem chi tiết sản phẩm (Ngô Đình Việt)
Trang quản lý sản phẩm (Đặng Quốc Việt)
Trang xóa sản phẩm(Đặng Quốc Việt)
Trang sửa sản phẩm (Đặng Quốc Việt)
Trang quản lý đơn hàng (Nhật)
Trang chi tiết đặt hàng (Nhật)
Link github sản phẩm: https://github.com/NuV00/BTL_Nhom5_PMMNM.git Một số hình ảnh trang web khi được hoàn thiện: Trang thanh toán
Trang quản lý đơn hàng
Trang chi tiết sản phẩm
Trang thông tin thanh toán
Trang quản lý giỏ hàng
Trang chủ xem tất cả sản phẩm
Qua bài tập lớn đã giúp sinh viên có cái nhìn tổng thể hơn về một dự án hoàn chỉnh và những kĩ năng như làm việc nhóm, kĩ năng đọc hiểu document để sử dụng các công nghệ mới nhất Giúp sinh viên tiếp cận được với quy trình cơ bản để tạo ra sản phẩm. Đến đây cũng đã kết thúc bài báo cáo bài tập lớn của nhóm về đề tài " Sử dụng Framework ReactJS kết hợp Fisebase xây dựng website thương mại điện tử EShop" với sự đóng góp của các thành viên trong nhóm thực hiện Nhìn lại quá trình thực hiện bài báo cáo này, nhóm thấy được những điểm mạnh và điểm yếu còn vướng mắc về kiến thức cũng như kỹ năng trình bày và tìm hiểu các tài liệu liên quan Để rút kinh nghiệm cho những lần thực hiện sau và cải thiện chất lượng của bài báo cáo sau sửa đổi, nhóm đi đến vạch ra những ưu nhược điểm của cá nhân cũng như tập thể nhóm thực hiện đề tài về những gì nhóm làm, những gì nhóm đã đạt được, những gì còn thiếu sót và định hướng sẽ thực hiện trong tương lai.
Mặc dù nhóm đã có nhiều đóng góp giá trị để hoàn thành báo cáo, song không thể tránh khỏi một số thiếu sót và hạn chế Một trong những yếu tố chính khiến báo cáo chưa đạt được hiệu quả mong muốn là thiếu dữ liệu Do là sinh viên, các thành viên trong nhóm không có đủ nguồn lực để xây dựng một bộ dữ liệu toàn diện và đảm bảo chất lượng Điều này ảnh hưởng đáng kể đến khả năng phân tích và đưa ra các kết luận hợp lý của báo cáo.
Nhóm rất mong nhận được những lời góp ý quý báu từ các thầy cô giáo và bạn đọc để hoàn thiện bài báo cáo hơn nữa Đóng góp của các bạn sẽ giúp nhóm cải thiện chất lượng bài viết, đem lại nhiều thông tin hữu ích hơn cho người đọc Nhóm xin gửi lời cảm ơn sâu sắc đến sự hỗ trợ của các bạn.
Nhóm thực hiện đề tài!
