Các sản phẩm này nhận được sự ủng hộ vàtiêu dùng của rất nhiều người.Trong báo cáo mới đây về ngành hàng thực phẩm - Báo cáo đánh giá Việt NamVietnam Report- cho thấy những nhu cầu về th
Cơ sở lý thuyết
ReactJS
React (Reactjs hay React.js) là một thư viện JavaScript phổ biến nhất để xây dựng giao diện người dùng hoặc các thành phần UI Được tạo ra bởi sự cộng tác giữa Facebook và Instagram Nó được duy trì bởi Facebook và một cộng đồng các nhà phát triển và công ty cá nhân Mục đích cốt lõi của ReactJS không chỉ khiến cho trang web phải thật mượt mà còn phải nhanh, khả năng mở rộng cao và đơn giản.
React có thể được sử dụng như một cơ sở để phát triển các ứng dụng trang đơn hoặc di động Một trong những đặc trưng duy nhất của React là việc render dữ liệu không những có thể thực hiện ở tầng Server mà còn ở tầng Client.
Bootstrap
Bootstrap là 1 framework gồm 3 thành phần: HTML, CSS, và JavaScript cho phép người dùng dễ dàng thiết kế website theo 1 chuẩn nhất định, tạo các website thân thiện với các thiết bị cầm tay như mobile, ipad, tablet,
Bootstrap hỗ trợ cho việc thiết kế của bạn dễ dàng, thuận tiện và nhanh chóng hơn dựa trên những thành tố cơ bản: typography, forms, buttons, tables, navigation, modals, image carousels, Bên cạnh đó, bootstrap cũng có thêm nhiều Component, Javascript để hỗ trợ cho việc thiết kế.
Bootstrap là bộ sưu tập miễn phí Trong Bootstrap quy định các thuộc tính về kích thích, màu sắc và các chiều dài, chiều rộng của các vùng website… Người dùng có thể dễ dàng thiết kế, tiết kiệm thời gian nhưng vẫn đảm bảo tính thẩm mĩ cho website
NodeJS
Nodejs được xây dựng và phát triển từ năm 2019 Đây là một nền tảng (platform) được phát triển độc lập dựa trên V8 JavaScript engine của Google Chrome- một trình thông dịch thực thi mã JavaScript cho phép tạo các ứng dụng web (video clip, diễn đàn…) Nodejs vận hành trên đa nền tảng của Server, bởi vậy nó hoàn toàn có thể chạy trên nhiều thiết bị.
Nodejs được nhiều lập trình, nhà phát triển sử dụng nhiều trong việc phát triển website bởi:
● Hầu hết viết bằng ngôn ngữ lập trình Javascript - một ngôn ngữ thông dụng
● Mang hiệu quả nhờ vào cơ chế non-blocking I/O, chạy đa nền tảng trên Server và dùng Event-driven.
● Tương thích được trên nhiều thiết bị, nền tảng khác nhau: Macbook, Window,Linux,
● Ứng dụng phát triển bởi Node.js có khả năng xử lý nhiều yêu cầu truy cập cùng lúc, ‘cứu’ website của bạn khỏi nguy cơ bị ‘sập’ khi lượng truy cập quá nhiều
Một số công ty đang sử Nodejs cho công ty có thể kể đến như: Netflix,Walmart, NASA, Paypal,
Express JS
Expressjs là một framework được xây dựng trên nền tảng của Nodejs Nó cung cấp các tính năng mạnh mẽ để phát triển web hoặc mobile Expressjs hỗ trợ các method HTTP và middleware tạo ra API vô cùng mạnh mẽ và dễ sử dụng.
Vì Expressjs chỉ yêu cầu ngôn ngữ lập trình Javascript nên việc xây dựng các ứng dụng web và API trở nên đơn giản hơn với các lập trình viên và nhà phát triển.
Expressjs cũng là một khuôn khổ của Node.js do đó hầu hết các mã code đã được viết sẵn cho các lập trình viên có thể làm việc Nhờ có Expressjs mà các nhà lập trình có thể dễ dàng tạo các ứng dụng 1 web, nhiều web hoặc kết hợp.
Tổng hợp một số chức năng chính của Expressjs như sau:
● Thiết lập các lớp trung gian để trả về các HTTP request.
● Define router cho phép sử dụng với các hành động khác nhau dựa trên phương thức HTTP và URL.
● Cho phép trả về các trang HTML dựa vào các tham số.
Mongodb
MongoDB là một database hướng tài liệu (document), một dạng NoSQL database Vì thế, MongoDB sẽ tránh cấu trúc table-based của relational database để thích ứng với các tài liệu như JSON có một schema rất linh hoạt gọi là BSON
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ác kích cỡ và các document khác nhau Các dữ liệu được lưu trữ trong document kiểu JSON nên truy vấn sẽ rất nhanh.
JSON Web Token
Token-based authentication là phương thức xác thực bằng chuỗi mã hóa Một hệ thống sử dụng Token-based authentication cho phép người dùng nhập user/password để nhận về 1 chuỗi token Chuỗi Token này được sử dụng để “xác minh” quyền truy cập vào tài nguyên mà không cần phải cung cấp lại username/password nữa.
JWT là một phương tiện đại diện cho các yêu cầu chuyển giao giữa hai bênClient – Server , các thông tin trong chuỗi JWT được định dạng bằng JSON Trong đó chuỗi Token phải có 3 phần là header , phần payload và phần signature được ngăn bằng dấu “.” Khi cả ba phần Header, Payload và Signature được kết hợp, một chuỗiJWT hoàn chỉnh bậc nhất sẽ được ra đời và trở thành phương tiện trợ giúp công việc của lập trình viên cực kỳ hiệu quả.
Phân tích thiết kế hệ thống
Sơ đồ Use case
Khách hàng được cấp các quyền sau: Đăng ký, đăng nhập, sau khi đăng nhập được có thể đăng xuất, quản lý tài khoản cá nhân, tìm kiếm sản phẩm, xem sản phẩm đặt hàng
Admin: Quản lý danh mục, quản lý khách hàng, quản lý đơn hàng, quản lý tài khoản người dùng
3.1.2 Use case quản lý danh mục sản phẩm
Hình 3.16: Use case quản lý danh mục sản phẩm
3.1.3 Use case quản lý sản phẩm
Hình 3.17: Use case quản lý sản phẩm
3.1.4 Use case quản lý đơn hàng
Hình 3.18: Use case quản lý đơn hàng
3.1.5 Use case quản lý người dùng
Hình 3.19: Use case quản lý người dùng
3.1.6 Use case quản lý admin
Hình 3.20: Use case quản lý admin
3.1.7 Danh sách các tác nhân
Bảng 3-1: Danh sách các tác nhân
TT Tác nhân Mô tả
1 Admin Nhân viên, người quản lý hệ thống website FreshLife
2 Khách hàng Người dùng, người mua hàng trên website FreshLife
3.1.8 Danh sách các Use case
TT Use case Mô tả
1 Đăng nhập Người dùng đăng nhập vào tài khoản.
Người quản trị viên, nhân viên đăng nhập vào hệ thống 2 Đăng ký Người dùng đăng ký tài khoản trên Website
3 Quản lý danh mục sản phẩm Thêm, cập nhật, tra cứu thông tin, xóa danh mục
4 Quản lý sản phẩm Thêm, cập nhật, tra cứu thông tin, xóa sản phẩm
Xem, cập nhật, tra cứu thông tin, xóa tài khoản khách hàng
6 Quản lý đơn Xem, cập nhật, tra cứu thông tin, xóa liên quan đến đơn hàng hàng 7 Quản lý admin Thêm, cập nhật, tra cứu thông tin admin, xóa nhân viên
8 Quản lý giỏ hàng Người dùng thêm, cập nhật, xóa sản phẩm trong giỏ hàng
9 Xem sản phẩm Người dùng có thể xem bất cứ sản phẩm nào khi truy cập vào website
Người dùng có thể tìm kiếm sản phẩm trên website khi truy cập vào website
11 Đặt hàng Người dùng tiến hành chọn sản phẩm trong giỏ hàng và đặt
12 Thanh toán Người dùng tiến hành chọn phương thức thanh toán và thanh toán
13 Gửi phản hồi Người dùng có thể gửi phản hồi
Bảng 3-2: Danh sách các Usecase
Sơ đồ BPMN
Hình 3.7: Sơ đồ BPMN đăng ký
Khách hàng đăng kí tài khoản bằng cách mở trang đăng nhập, điền đầy đủ thông tin (điền đúng ràng buộc về dữ liệu), khách hàng nhận được mã OTP qua số điện thoại, nếu mã OTP khách hàng nhập hợp lệ và trong thời hạn quy định, khách hàng sẽ đăng kí tài khoản thành công
Khách hàng sẽ được lựa chọn đăng nhập bằng số điện thoại hoặc bằng tài khoản Facebook hay tài khoản Google Khi đăng nhập bằng số điện thoại cần nhập đúng số điện thoại cùng mật khẩu đã đăng ký trước đó Nếu quên mật khẩu thì khách hàng cần nhập số điện thoại đã đăng ký trước đó để hệ thống tiến hành kiểm tra và cho phép khách hàng thay đổi mật khẩu nếu đạt đủ điều kiện.
Hình 3.8: Sơ đồ BPMN đăng nhập
Khách hàng thực hiện thêm vào giỏ hàng có 3 cách là thêm sản phẩm vào từ Trang chủ, thông qua tìm kiếm sản phẩm hoặc tìm theo danh mục ở trang Sản phẩm.
Khi lựa chọn được sản phẩm muốn mua, khách hàng chọn “Thêm sản phẩm” vào giỏ hàng Giỏ hàng sẽ cập nhật số lượng sản phẩm, nếu mặt hàng đã tồn tại trong giỏ thì số lượng sản phẩm sẽ được cộng dồn, nếu là một sản phẩm mới thì thực hiện thêm mới một sản phẩm vào giỏ Cuối cùng là hiển thị danh sách sản phẩm trong giỏ hàng và kết thúc quy trình.
Hình 3.9: Sơ đồ BPMN thêm giỏ hàng
Khách hàng có thể cập nhật (thêm, xóa, sửa) bất cứ sản phẩm nào trong giỏ hàng Nếu không muốn cập nhật thì sẽ chọn những sản phẩm muốn mua Khách hàng kiểm tra xem thông tin nhận hàng đã chính xác chưa rồi chọn phương thức thanh toán.
Sau khi thực hiện thanh toán thành công sẽ hiển thị mã đơn hàng và cập nhật trạng thái đơn hàng
Hình 3.10: Sơ đồ BPMN đặt hàng
3.2.5 BPMN quản lý đơn hàng
Hình 3.11: Sơ đồ BPMN quản lý đơn hàng
Khách hàng có thể có những tùy chọn trong Đơn hàng của tôi như xem tất cả đơn, đơn đang xử lý, đơn đang vận chuyển, đơn đã giao hoặc đơn đã hủy Trong Đơn hàng đang xử lý khách hàng cũng có thể Hủy đơn bằng cách điền lý do.
3.2.6 BPMN quản lý tài khoản
Khi nhấn vào biểu tượng membership, khách hàng có thể xem tổng hợp tất cả các đơn hàng của mình hoặc thiết lập lại tài khoản cũng như đăng xuất nếu muốn.
Hình 3.12: BPMN quản lý tài khoản
DFD ngữ cảnh
Gồm các database: Đơn hang, khách hang, hóa đơn, sản phẩm, admin là nơi lưu trữ thông tin để hệ thống lưu trữ và đưa ra cho hệ thống
Phân tích thiết kế cơ sở dữ liệu
Tổ chức dữ liệu - FreshLife
aboutus (title, content, thumb) blogs (blog_id, img, title, content_short) products (products_id, type, name, image_1, image_2, image_3, is_new, is_best, description, price, sale_price, quantity, corner_img) users (user_id, username, phone, email, password, birthday, gender, address, createdAt, updatedA ) orders (product_id, quantity, user_id, status, createdAt, updatedAt) admin (admin_id, fullname, password, email, address, phonenumber, createdAt, updatedAt) category (cat_id, cat_name, product_id, createdAt, updatedAt)
Mô tả các kiểu dữ liệu
Trường Kiểu dữ liệu Mô tả
Trường Kiểu dữ liệu Mô tả blog_id ObjectId Mã trang blog img string Hình ảnh title string Tiêu đề content_short string Nội dung
Trường Kiểu dữ liệu Mô tả products_id ObjectID Mã sản phẩm type string Loại sản phẩm name string Tên sản phẩm image_1 string Hình ảnh mô tả 1 image_2 string Hình ảnh mô tả 2 image_3 string Hình ảnh mô tả 3 is_new string Sản phẩm mới is_best string Sản phẩm bán chạy description string Mô tả sản phẩm price int Giá sale_price int Giảm giá quantity int Số lượng corner_img string Hình ảnh kí hiệu
Trường Kiểu dữ liệu Mô tả
Cat_id ObjectId Mã danh mục
Cat_name String Danh mục sản phẩm
Product_id String Mã sản phẩm
CreatedAt Date Thời gian được tạo
UpdatedAt Date Thời gian được cập nhật gần nhất
Trường Kiểu dữ liệu Mô tả user_id ObjectId Mã khách hàng username String Tên khách hàng email String Địa chỉ email address String Địa chỉ nơi ở phone String Số điện thoại password String Mật khẩu gender String Giới tính createdAt Date Thời gian tạo gần nhất updatedAt Date Thời gian cập nhật gần nhất
Thuộc tính Kiểu dữ liệu Mô tả
Ord_id ObjectId Mã đặt hàng user_id String Mã khách hàng product_id String Mã sản phẩm quantity string Số lượng sản phẩm status string Trạng thái tồn kho
CreatedAt Date Ngày tạo đơn hàng
Thuộc tính Kiểu dữ liệu Mô tả
Product_id ObjectId Mã sản phẩm
Cat_name String Danh mục sản phẩm
Product_name String Tên sản phẩm
Rate Number Đánh giá sản phẩm
Description String Mô tả sản phẩm
CreatedAt Date Thời gian được tạo
UpdatedAt Date Thời gian được cập nhật gần nhất
Thuộc tính Kiểu dữ liệu Mô tả
Admin_id ObjectId Mã quản trị viên
Email String Địa chỉ email
Fullname String Tên quản trị viên
Phonenumber String Số điện thoại
Address String Địa chỉ nơi ở
CreatedAt Date Thời gian được tạo
UpdatedAt Date Thời gian được cập nhật gần nhất
Thiết kế giao diện
Website người dùng
Hình 5.22: Đăng ký người dùng
Hình 5.26: Chi tiết sản phẩm
Hình 5.28: Bài viết chi tiết
Hình 5.33: Tài khoản của tôi
Hình 5.34: Đơn hàng của tôi
Website quản trị viên
Hình 5.16: Quản lý đơn hàng
Hình 5.17: Quản lý danh mục
Hình 5.18: Quản lý sản phẩm
5.2.4 Quản lý tài khoản 5.2.4.1 Khách hàng
Hình 5.19: Quản lý tài khoản khách hàng
Hình 5.20: Quản lý tài khoản admin - Thông tin tài khoản
Hình 5.21: Quản lý tài khoản admin - Danh sách admin
Đánh giá kết quả và hướng phát triển
Kết quả
Kỹ năng tự đọc và nghiên cứu tài liê ̣u và tìm kiếm phương pháp xử lý vấn đề trong suốt quá trình thực hiê ̣n đề tài.
Cải thiê ̣n và nâng cao khả năng làm viê ̣c nhóm, giao tiếp, mở rô ̣ng mối quan hê ̣ với các người đi trước để tìm kiếm giải pháp xử lý vấn đề.
Sử dụng cơ sở dữ liê ̣u mới NoSQL để quản lý dữ liê ̣u của hê ̣ thống.
Nắm được tiêu chuẩn RESTful API.
Nắm được quy trình xây dựng mô ̣t trang web từ khâu lên ý tưởng, thiết kế giao diê ̣n, phát triển đến các khâu triển khai web lên host.
Phân tích được nhu cầu và sự ưa chuộng sử dụng trang web của khách hàng.
Xây dựng một trang web với các chức năng cần thiết them, xóa, sửa, cập nhật; giao diện với các hình ảnh lớn, sự kiện theo dịp, tang khả năng tương tác với khách hàng
Hạn chế
Khi xem xét trang web, nhóm chúng tôi nhận thấy một số hạn chế mà cần được khắc phục trong tương lai:
● Tính năng cải thiện trải nghiệm người dùng: Hiện tại, các tính năng nhằm nâng cao trải nghiệm người dùng vẫn còn hạn chế Ví dụ, việc giải đáp thắc mắc của khách hàng thông qua box chat hay thông báo những ưu đãi hấp dẫn đến khách hàng chưa được triển khai Cần bổ sung các tính năng tương tác để khách hàng có thể nhận được ưu đãi cũng như hỗ trợ nhanh chóng và tạo cảm giác chăm sóc khách hàng tốt hơn.
● Phát triển ứng dụng di động: Một điểm cần xem xét là phát triển ứng dụng di động cho trang web Với sự phổ biến của điện thoại di động, việc có một ứng dụng di động sẽ mang lại trải nghiệm mua sắm thuận tiện và linh hoạt hơn cho khách hàng.
● Tương thích đa thiết bị: Trang web hiện tại chưa đạt được sự tương thích đa thiết bị Giao diện trang web chỉ được tối ưu hóa cho một số thiết bị nhất định,nhưng chưa đáp ứng được nhu cầu của người dùng trên các loại thiết bị khác nhau Điều này dẫn đến việc người dùng mất thiện cảm với trang web.
Phương hướng phát triển
Trong tương lai, nhóm có mong muốn cải thiện những hạn chế của trang web hiện tại cũng như tiếp tục hoàn thiện những tính năng đã đặt ra trước đó và đưa ra các hướng phát triển để biến nó thành một trang web được người dùng yêu thích:
● Tối ưu hóa giao diện trang web để đảm bảo tương thích với một loạt các thiết bị và kích thước màn hình khác nhau Điều này đảm bảo rằng người dùng có trải nghiệm mượt mà và thân thiện trên cả máy tính, điện thoại di động và máy tính bảng.
● Triển khai boxchat hoặc chatbot để khách hàng có thể giải đáp thắc mắc nhanh chóng và dễ dàng.
● Thông báo ưu đãi hấp dẫn đến khách hàng thông qua email hay hộp thư đến.
● Đa dạng hóa phương thức thanh toán: Cung cấp nhiều phương thức thanh toán an toàn và thuận tiện để người dùng có nhiều lựa chọn khi mua hàng.
● Tạo nội dung hấp dẫn: Cung cấp nội dung chất lượng và hấp dẫn để thu hút và giữ chân khách hàng.
● Trong tương lai, với sự phát triển ngày càng mạnh mẽ của trang web cũng đồng nghĩa với việc dữ liệu ngày càng phức vì vậy mà cũng mà cơ sở dữ liệu cũng cần được tổ chức một cách tốt nhất để quản lý trang web hiệu quả.
● Xây dựng chiến dịch tiếp thị kỹ thuật số: Sử dụng các kênh tiếp thị kỹ thuật số như email marketing, quảng cáo trực tuyến và mạng xã hội để quảng bá trang web và thu hút người dùng mới Xác định đúng đối tượng khách hàng và tạo ra nội dung và thông điệp phù hợp.
● Phân tích dữ liệu và đánh giá: Sử dụng công cụ phân tích dữ liệu để hiểu hành vi của người dùng, điều này sẽ giúp đánh giá và cải thiện hiệu suất trang web.
