Hướng dẫn xây dựng website kinh doanh thực phẩm trực tuyến với ReactJS

Hành vi mua sắm trực tuyến 1. Tần suất mua sắm

Giao diện trang mua sắm 1. Kiểu giao diện

Các vấn đề gặp phải khi mua sắm trên sàn thương mại điện tử

Điều này có thể gây ra các vấn đề về định dạng, hiển thị sai hoặc khó khăn trong việc tương tác với giao diện. Thiếu tính năng cần thiết: 51,9% người dùng đã gặp vấn đề với việc thiếu các tính năng quan trọng mà họ mong muốn trong giao diện trang web. Việc thiếu tính năng có thể gây khó khăn trong việc tìm kiếm, xem thông tin và mua hàng.

Điều này cản trở quá trình mua sắm và có thể làm mất lòng tin của người dùng. Giao diện không thân thiện và khó điều hướng: 70,4% người dùng cho biết rằng giao diện trang web mua thực phẩm không thân thiện và khó điều hướng. Điều này có thể gây khó khăn trong việc tìm kiếm và duyệt sản phẩm, làm mất thời gian của người dùng và gây sự không hài lòng.

Các tính năng quan trọng

39,1% muốn nhận thông báo về trạng thái đơn hàng và cập nhật khuyến mãi mới, giỳp họ theo dừi đơn hàng và khụng bỏ lỡ thụng tin quan trọng. 30,4% quan tâm đến khả năng tìm kiếm sản phẩm theo danh mục và bộ lọc nâng cao, giúp họ tìm thấy sản phẩm một cách thuận tiện và nhanh chóng. 30,4% muốn có hỗ trợ trực tuyến qua chat trực tiếp hoặc điện thoại, giúp họ có sự hỗ trợ nhanh chóng và thuận tiện khi cần giải đáp thắc mắc.

Bảo mật và thanh toán

66,7% nhấn mạnh việc cung cấp thông tin chi tiết về nguồn gốc và chất lượng sản phẩm, cho phép người dùng có đầy đủ thông tin để đưa ra quyết định mua hàng. An toàn và độ tin cậy của sản phẩm là yếu tố quyết định quan trọng trong quá trình mua sắm.

Các tiện ích mà khách hàng mong muốn 1. Thanh toán và vận chuyển

Giới thiệu về Freshlife

Giao diện thân thiện và dễ sử dụng, FreshLife giúp bạn dễ dàng duyệt qua các danh mục sản phẩm, tìm kiếm những sản phẩm mà bạn quan tâm và thực hiện các thao tác mua hàng một cách thuận tiện. Chúng tôi cam kết giao hàng nhanh chóng và tin cậy, đảm bảo rằng những sản phẩm tươi ngon và chất lượng sẽ đến tay bạn trong thời gian ngắn nhất. FreshLife nhắm đến đối tượng là khách hàng quan tâm đến sức khỏe, lựa chọn thực phẩm tươi ngon và có nhu cầu tìm kiếm các lựa chọn thực phẩm tươi mới.

Họ có nhu cầu tìm kiếm một nền tảng trực tuyến để mua các sản phẩm tươi ngon một cách thuận tiện và đáng tin cậy đồng thời giúp giảm bớt gánh nặng và tiết kiệm thời gian. FreshLife chú trọng đến nhu cầu của cả nam và nữ, từ các đối tượng tuổi 18-45, đặc biệt là nhóm 23-32 tuổi - nhóm người chủ chốt trong hành vi mua sắm trực tuyến. Bằng cách cung cấp trải nghiệm người dùng tốt hơn và giúp họ tìm được sản phẩm chất lượng và phù hợp với túi tiền, FreshLife đóng góp vào việc tăng cường sự hài lòng của khách hàng và khả năng quay lại trang web, từ đó xây dựng mối quan hệ khách hàng thân thiết.

Cơ sở lý thuyết 2.1. ReactJS

Đâ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…). ● Ứ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. 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.

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. 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ên Client – Server , các thông tin trong chuỗi JWT được định dạng bằng JSON. Khi cả ba phần Header, Payload và Signature được kết hợp, một chuỗi JWT 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 3.1. Sơ đồ Use case

• Sơ đồ BPMN

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. 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. 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ỏ.

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. 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. 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ố.

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.

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. 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ỏ. 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.

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. 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. 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.

Thiết kế giao diện 5.1. Website người dùng