Báo cáo đồ án 1 đề tài xây dựng website bán thực phẩm nông nghiệp

LỜI CẢM ƠNSau quá trình học tập và rèn luyện tại khoa Công nghệ phần mềm trường Đạihọc Công nghệ Thông tin – ĐHQG TP.HCM, em đã được trang bị các kiến thức cơbản, các kỹ năng thực tế để

BÁO CÁO ĐỒ ÁN 1

ĐỀ TÀI:

XÂY DỰNG WEBSITE BÁN THỰC PHẨM NÔNG NGHIỆP

Giảng viên: ThS Huỳnh Tuấn Anh

Sinh viên thực hiện: Trần Linh Khuê Lam 19520137

Thành phố Hồ Chí Minh, năm 2022

ĐẠI HỌC QUỐC GIA THÀNH PHỐ

HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG

NGHỆ THÔNG TIN KHOA CÔNG NGHỆ

PHẦN MỀM

BÁO CÁO ĐỒ ÁN 1

ĐỀ TÀI:

XÂY DỰNG WEBSITE BÁN THỰC PHẨM NÔNG NGHIỆP

Giảng viên: ThS Huỳnh Tuấn Anh

Sinh viên thực hiện: Trần Linh Khuê Lam 19520137

Thành phố Hồ Chí Minh, năm 2022

MỤC LỤC

ĐẠI HỌC QUỐC GIA THÀNH PHỐ

HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG

NGHỆ THÔNG TIN KHOA CÔNG NGHỆ

PHẦN MỀM

CHƯƠNG 1: GIỚI THIỆU CHUNG 12

CHƯƠNG 6: THIẾT KẾ GIAO DIỆN NGƯỜI DÙNG 47

Báo cáo đồ án

1

DANH MỤC TỪ VIẾT TẮT

ST

1 MVC Model – View –Controller Mô hình lập trình

2 CSDL Cơ sở dữ liệu Cơ sở dữ liệu cho ứngdụng

3 API ProgrammingApplication

Interface

Giao diện lập trình ứng

dụng

LỜI CẢM ƠN

Sau quá trình học tập và rèn luyện tại khoa Công nghệ phần mềm trường Đạihọc Công nghệ Thông tin – ĐHQG TP.HCM, em đã được trang bị các kiến thức cơbản, các kỹ năng thực tế để có thể lần đầu thực hiện Đồ án 1 của mình

Để hoàn thành Đồ án này, em xin gửi lời cảm ơn chân thành đến:

Ban Giám hiệu trường Đại học Công nghệ Thông tin – ĐHQG TP.HCM vì đãtạo điều kiện về cơ sở vật chất với hệ thống thư viện hiện đại, đa dạng các loại sách,tài liệu thuận lợi cho việc tìm kiếm, nghiên cứu thông tin

Em xin gửi lời cảm ơn chân thành đến thầy Huỳnh Tuấn Anh đã tận tình giúp

đỡ, định hướng cách tư duy và cách làm việc khoa học Đó là những góp ý hết sức quýbáu không chỉ trong quá trình thực hiện luận văn này mà còn là hành trang tiếp bướccho em trong quá trình học tập và lập nghiệp sau này

Và cuối cùng, em xin gửi lời cảm ơn đến gia đình, tất cả thầy cô trong khoa,bạn bè, tập thể lớp PMCL2019.1 là những người luôn sẵn sàng sẻ chia và giúp đỡtrong học tập và cuộc sống Mong rằng, chúng ta sẽ mãi mãi gắn bó với nhau

Trong quá trình làm Đồ án này em không tránh khỏi được những sai sót, emkính mong nhận được sự chỉ dẫn và góp ý của quý thầy cô để hoàn thiện và phát triển

đồ án hơn cũng như trong Khóa luận tốt nghiệp trong tương lai

Em xin chân thành cảm ơn Xin chúc những điều tốt đẹp nhất sẽ luôn đồnghành cùng mọi người

Thành phố Hồ Chí Minh, … tháng … năm 2022

Sinh viênTRẦN LINH KHUÊ LAM

ĐẠI HỌC QUỐC GIA TP HỒ CHÍ

MINH TRƯỜNG ĐẠI HỌC

CÔNG NGHỆ THÔNG TIN

CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT

NAM Độc Lập - Tự Do - Hạnh Phúc

TP HCM, ngày 20 tháng 12 năm 2022

ĐỀ CƯƠNG CHI TIẾTTÊN ĐỀ TÀI: Ứng dụng đi chợ trực tuyến tích hợp gợi ý món ăn

Cán bộ hướng dẫn: ThS Huỳnh Tuấn Anh

Thời gian thực hiện: Từ ngày 12/09/2022 đến ngày 27/12/2022

Sinh viên thực hiện:

Trần Linh Khuê Lam – 19520137

Nội dung đề tài

1 Lý do chọn đề tài:

Trước tình hình diễn biến phức tạp hiện nay, đặc biệt là ở các thành phố lớn nhiều dân cư sinh sống, người dân được yêu cầu hạn chế ra ngoài để tránh sự lây lan dịch bệnh Nhưng để đáp ứng các nhu cầu sinh hoạt hàng ngày, đặc biệt là việc bổ sung thực phẩm cho cơ thể cũng như là làm tăng sức đề kháng, sức khoẻ mỗi người là điều cực kì quan trọng Vì vậy mà, nhu cầu cần được đi chợ để cung cấp thực phẩm cho bản thân, gia đình là một vấn đề thiết yếu đang được tất cả mọi người quan tâm đến Đồng thời, bên cạnh đó, cũng có nhiều người không có

đủ thời gian để đi chợ và không biết lộ trình học tiếp theo Để đáp ứng những nhu cầu đó, để phù hợp với điều kiện sống mới nhiều người đã tìm đến các dịch vụ đi chợ online nhằm đảm bảo giãn cách xã hội mà vẫn đảm bảo vấn đề lương thực cho cuộc sống, một ứng dụng có chức năng kết nối giữa các nhà cung cấp và

người dùng có nhu cầu cho mua thực thẩm là vô cùng cần thiết Từ những vấn đề trên, nhóm em quyết định chọn đề tài này làm đồ án, phát triển một ứng dụng

cung cấp dịch vụ đi chợ online nhanh chóng kết hợp gợi ý món ăn để tiể kiệm thời gian, tiện lợi nhanh chóng, hạn chế đến những nơi đông người, giúp người dùng thân thiện hơn với công nghệ

● Tích hợp cổng thanh toán trong trang web.

● Xây dựng trang web quản lý sản phẩm, người dùng, đơn hàng để thống kê vàquản lý số liệu

● Tổng hợp kết quả và viết báo cáo

3 Tính mới/ Khác biệt của chức năng:

● Xậy dựng chức năng hỗ trợ gợi ý các sản phẩm giúp đề xuất các sản phẩm hợp lí đến cho người dùng

● Giao diện tối ưu đơn giản

4 Phạm vi và đối tượng sử dụng:

● Tất cả mọi người có nhu cầu đi chợ mua thực phẩm

● Quản trị viên quản lý hệ thống

● Phạm vi môi trường: Trang web truy cập

● Phạm vi địa lý: Trang web sử dụng tại Thành phố Hồ Chí Minh

● Phạm vi chức năng:

o Chức năng quản lý sản phẩm

o Chức năng đăng ký, đăng nhập và đăng xuất

o Chức năng quản lý đơn hàng

o Chức năng thanh toán

o Chức năng tìm kiếm, lọc, sắp xếp thực phẩm.

o Chức năng mua, thêm vào giỏ hàng các sản phẩm

o Chức năng quản lý người dùng

5 Phương pháp thực hiện:

● Phương pháp làm việc:

o Làm việc nhóm 1 thành viên thông qua phương thức online dưới sự hướng dẫn của giảng viên hướng dẫn

● Phương pháp nghiên cứu:

o Khảo sát các trang web đi chợ trực tuyến đã có trên thị trường

o Phân tích yêu cầu sử dụng của người dùng

o Nghiên cứu tài liệu các công nghệ liên quan

o Đánh giá ưu khuyết điểm của các nền tảng

o Xây dựng giao diện webiste để tương tác với người dùng

o Quản lý source code thông qua Github

o Sử dụng Notion, Google doc,… để quản lý tiến trình và tài liệu

6 Nền tảng công nghệ:

● React JS

● MongoDB

● Node JS

● Express JS

● Javascript

7 Kết quả mong đợi:

● Hoàn thiện website cho phép người dùng truy cập sử dụng các chức năng để mua thực phẩm

● Hoàn thiện website quản lý nội bộ dành cho quản trị viên

● Xây dựng giao diện thân thiện, dễ sử dụng

8 Hướng phát triển của đề tài:

● Sử dụng được đa dạng ngôn ngữ.

● Mở rộng thị trường ra khắp nước Việt Nam.

● Triển khai thêm phiên bản ứng dụng di động để dễ dàng phục vụ tốt hơn cho

nhu cầu của người dùng

9 Kế hoạch làm việc và phân công công việc:

● Thời gian thực hiện từ ngày 12/09/2022 đến ngày kết thúc môn Đồ án 1 27/12/2022 Nhóm chia thành 3 giai đoạn cụ thể:

● Giai đoạn 1: Nghiên cứu các nền tảng công nghệ và hoàn thiện giao diện người dùng với các tính năng cơ bản (12/09/2022 – 31/10/2022)

● Giai đoạn 2: Xây dựng cơ sở dữ liệu và các chức năng của ứng dụng

chợ trực tuyến có mặt trên

thị trường2

Nghiên cứu về các côngnghệ được sử dụng:

MongoDB, Node JS, React

JS, Figma, Javascript,…

Lam

3 Viết đặc tả hệ thống, vẽ

các sơ đồ Use Case Lam

4 Thiết kế UI/UX cho

website bằng Figma Lam5

Xây dựng ứng dụng cơ bảntheo kiến trúc Client –Server với ReactJS tạiClient và Node JS tại

Server

Lam

Giai đoạn 2: 01/10/2022 – 30/11/2022

6 Xây dựng cơ sở dữ liệu

cho website Lam

7 Xây dựng API cho các

chức năng của website Lam8

Xây dựng giao diện ngườidùng theo mẫu thiết kế từ

giai đoạn 1

Lam

Giai đoạn 3: 01/11/2022 – 27/12/2022

9 Hoàn thành các chức năng

và giao diện website Lam

10 Tổng hợp và viết báo cáo Lam

Xác nhận của CBHD

(Ký tên và ghi rõ họ tên)

ThS Huỳnh Tuấn Anh

TPHCM, ngày 18 tháng 09 năm 2022

Sinh viên

(Ký tên và ghi rõ họ tên)

Trần Linh Khuê Lam

NỘI DUNG CHƯƠNG 1: GIỚI THIỆU CHUNG1.1 Tổng quan đề tài

án, phát triển một trang web cung cấp thực phẩm nông nghiệp online để tiể kiệm thờigian, tiện lợi nhanh chóng, hạn chế đến những nơi đông người, giúp người dùng thânthiện hơn với công nghệ

1.3 Đối tượng sử dụng

Tất cả mọi người muốn đi chợ mua thực phẩm trực tuyến một cách tiết kiệmthời gian và nhanh chóng, tiện lợi hoặc hạn chế về việc đến và tiếp xúc ở nơi đôngngười để tránh lây nhiễm bệnh

Quản trị viên phía cửa hàng muốn cung cấp thông tin (về sản phẩm, về nguồngốc xuất xứ, về các chương trình giảm giá khuyến mãi…) đến mọi người truy cập sửdụng trang web

- Chức năng đăng ký, đăng nhập và đăng xuất.

- Chức năng quản lý đơn hàng

- Chức năng thanh toán

- Chức năng tìm kiếm, lọc, sắp xếp thực phẩm

- Chức năng mua, thêm vào giỏ hàng các sản phẩm

- Chức năng quản lý người dùng

CHƯƠNG 2: CƠ SỞ LÝ THUYẾT1.1 React JS

Hình 2.1-1 React JS

React JS là một thư viện chứa nhiều JavaScript mã nguồn mở được Facebookxây dựng và phát triển Thư viện này được sử dụng để tạo ra các ứng dụng trang webhấp dẫn với hiệu quả cao, tốc độ load nhanh và mã tối thiểu Mỗi website sử dụngReactJS phải chạy nhanh, mượt và có khả năng mở rộng cao, thao tác thực hiện đơngiản

Có thể nói, hầu hết các tính năng hay sức mạnh của ReactJS thường bắt đầu từviệc tập trung vào các phần riêng lẻ Do đó thay vì làm việc trên toàn bộ ứng dụng củawebsite thì ReactJS lại cho phép các Developer phá vỡ giao diện phức tạp của ngườidùng trở nên đơn giản hơn nhiều Điều này có nghĩa là các Render dữ liệu không chỉđược thực hiện ở vị trí server mà còn có thể thực hiện ở vị trí Client khi sử dụngReactJS

1.2 MongoDB

Hình 2.2-1: MongoDB

MongoDB là một cơ sở dữ liệu mã nguồn mở và là cơ sở dữ liệu NoSQL(*)hàng đầu, được hàng triệu người sử dụng MongoDB được viết bằng C++ Ngoài ra,MongoDB là một cơ sở dữ liệu đa nền tảng, hoạt động trên các khái niệm Collection

và Document, nó cung cấp hiệu suất cao, tính khả dụng cao và khả năng mở rộng dễdàng

1.3 Node JS

Hình 2.3-1: Node JS

NodeJS là một môi trường runtime chạy JavaScript đa nền tảng và có mã nguồn

mở, được sử dụng để chạy các ứng dụng web bên ngoài trình duyệt của client Nềntảng này được phát triển bởi Ryan Dahl vào năm 2009, được xem là một giải pháphoàn hảo cho các ứng dụng sử dụng nhiều dữ liệu nhờ vào mô hình hướng sự kiện(event-driven) không đồng bộ

1.4 Javascript

Hình 2.4-1: Javascript

Javascript là ngôn ngữ lập trình webiste phổ biến hiện nay, nó được tích hợp vànhúng vào HTML giúp website trở nên sống động hơn Javascript đóng vai trò như làmột phần của trang web, thực thi cho phép Client-side script từ phía người dùng cũngnhư phía máy chủ (NodeJS) tạo ra các trang web động

1.5 Express JS

Hình 2.5-1: Express JS

Express JS là một framework nhỏ, nhưng linh hoạt được xây dựng trên nềntả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

Về c.ác package hỗ trợ: Expressjs có vô số các package hỗ trợ nên các bạn không phải

lo lắng khi làm việc với Framework này Về performance: Express cung cấp thêm vềcác tính năng (feature) để dev lập trình tốt hơn Chứ không làm giảm tốc độ củaNodeJS Và hơn hết, các Framework nổi tiếng của NodeJS hiện nay đều sử dụngExpressJS như một core function, chẳng hạn: Sails JS, MEAN,…

1.6 GitHub

Hình 2.8-1: Hệ thống quản lý mã nguồn GitHub

GitHub là một hệ thống quản lý dự án và phiên bản code, hoạt động giống nhưmột mạng xã hội cho lập trình viên Các lập trình viên có thể clone lại mã nguồn từmột repository và nó chính là một dịch vụ máy chủ repository công cộng, mỗi người

có thể tạo tài khoản trên đó để tạo ra các kho chứa của riêng mình để có thể làm việc.Github có đầy đủ những tính năng của Git, ngoài ra nó còn bổ sung những tính năng

về social để các developer tương tác với nhau Github cung cấp các tính năng socialnetworking như feeds, followers, và network graph để các developer học hỏi kinhnghiệm của nhau thông qua lịch sử commit

CHƯƠNG 2: THIẾT KẾ HỆ THỐNG1.1 Kiến trúc hệ thống: Mô hình MVC

Model: Lưu trữ tất cả dữ liệu của ứng dụng Bộ phận này là cầu nối giữa cơ sở

dữ liệu quản lý cả nhân và trình bày giao diện người dùng Cho phép người dùng cóthể nhập và xuất đến các cơ sở dữ liệu lần lượt theo quyền của họ khi cần thiết và dữliệu sẽ được lưu dữ trên database

View: giao diện người dùng, nơi người dùng có thể lấy được thông tin dữ liệucủa MVC thông qua các công thức truy vấn và ghi lại hoạt động của người dùng đểtương tác với Controller

Controller: xử lý yêu cầu từ người dùng thông qua View Từ đó, Controller gửi

dữ liệu hợp lý đến người dùng bằng các kết nối đến Model và trưng bày nó trên Viewcho người dùng

Hình 3.1-1: Sơ đồ mô hình MVC

1.2 Chi tiết các thành phần trong hệ thống

S

T

T

Thành phần Chi tiết

1 Giao diện ngườidùng

Cung cấp một giao diện cho ngườidùng thực hiện các thao tác nhập/xuất

dữ liệu Đồng thời, trong lúc sử dụng,thông báo cho người dùng nếu có lỗi

xảy ra

2 Mô hình MVC

Tiếp nhận yêu cầu từ giao diệnngười dùng, kiểm tra tính đúng đắntheo ràng buộc và thực thi yêu cầunếu điều kiện được đáp ứng

3 Cơ sở dữ liệu Lưu trữ toàn bộ dữ liệu liên quanđến thông tin trung tâm.

CHƯƠNG 2: ĐẶC TẢ USE CASE1.1 Sơ đồ Use Case

o Use case Quản lý người dùng

Hình 4.1-1: Sơ đồ Use Case Quản lý người dùng

o Use case Quản lý tài khoản

Hình 4.1-2: Sơ đồ Use Case Quản lý tài khoản

o Use case Quản lý sản phẩm

Hình 4.1-3: Sơ đồ Use Case Quản lý sản phẩm

o Use case Quản lý đặt hàng

Hình 4.1-4: Sơ đồ Use Case Quản lý đặt hàng

o Use case Quản lý đơn hàng

Hình 4.1-5: Sơ đồ Use Case Quản lý đơn hàng

Admin Quản trị viên của website, là người quản lý của hệthống

3 TechnicalAdmin – Nhà phát triển ứng dụng, có thể truy cập và bảotrì website khi cần thiết

4 Ban lãnh đạo Các bên đầu tư liên quan và phát triển website

5 Database Hệ thống lưu trữ dữ liệu của website

1.3 Danh sách Use Case

ST

T

1 Đăng ký Dành cho người dùng mới, cho phép tựđăng ký tài khoản

2 Đăng nhập Dành cho người dùng đã có tài khoản,chức năng cho phép người dùng

đăng nhập vào ứng dụng

3 CRUD sản phẩm Hỗ trợ thao tác thêm, xem, sửa, xoá

thông tin sản phẩm

4 Tìm kiếm sản phẩm Chức năng cho phép người dùng tìm

kiếm sản phẩm theo tên

5 Đánh giá sản phẩm Chức năng cho phép người dùng đánhgiá về trải nghiệm chất lượng của sản

phẩm

6 Thêm mục yêu thích

Chức năng cho phép người dùng thêmsản phẩm vào mục yêu thích và có thểxem lại các sản phẩm đó vào những lần

truy cập sau

7 CRUD người dùng Chức năng cho admin truy cập các

thông tin và địa chỉ của người dùng

12 Đặt hàng hàng và thanh toán những sản phẩm đãChức năng cho phép người dùng đặt

có trong giỏ hàng

13 CRUD đơn hàng Hỗ trợ thao tác thêm, xem, sửa, xoá

thông tin đơn hàng

14 CRUD địa chỉ nhận hàng Hỗ trợ thao tác thêm, xem, sửa, xoá

thông tin địa chỉ nhận hàng

15 Thêm vào giỏ Chức năng cho phép người dùng thêm

vào giỏ hàng những sản phẩm cần mua

16 Cập nhật thông tin cá nhân Chức năng cho phép người dùng chỉnh

sửa thông tin cá nhân

17 Xác nhận đơn hàng Cập nhật trạng thái xác nhận và chuẩn

bị đơn hàng

18 Đăng xuất Dành cho người dùng và admin khi

muốn thoát ra khỏi tài khoản

19 Xác nhận đã giao Cập nhật trạng thái đã giao thành công

đơn hàng

20 Huỷ đơn hàng Hỗ trợ admin thao tác huỷ đơn hàng

khi cần thiết

1.4 Mô tả chi tiết Use Case

Mô tả chi tiết tính năng “Đăng ký”

Mô tả chi tiết Người dùng chưa có tài khoản, tạo tàikhoản mới để truy cập vào website

4 Hệ thống xác thực tài khoản trongDatabase thành công, được điềuhướng đến Trang chủ

3 Không đăng ký được tài khoản,

hiển thị thông báo lỗi

Yêu cầu đặcbiệt

Không

Điều kiệntrước

Người dùng truy cập vào website Điều kiện sau Không

Mở rộng Không

Mô tả chi tiết tính năng “Đăng nhập”

Mô tả chi tiết

Người dùng đã có tài khoản, sử dụngtài khoản để truy cập vào website

3 Hệ thống xác thực tài khoản trongDatabase thành công, được điềuhướng đến Trang chủ

Mô tả chi tiết tính năng “CRUD sản phẩm”

Mô tả chi tiết Admin theo dõi, chỉnh sửa và quản lý

thông tin của tất cả sản phẩm

Luồng sự kiện

Luồng chính

1 Admin bấm mục Sản phẩm, đượcđiều hướng đến trang Sản phẩm

2 Admin lựa chọn các chức năng:Thêm, Xoá, Sửa và nhập các thôngtin cần thiết của các sản phẩm

3 Hệ thống cập nhật thông tin sảnphẩm trong Database thành công

Luồng phụ

1 Thực hiện theo bước 1và 2 ở luồng

chính

2 Hệ thống cập nhật thông tin nhà cung

cấp trong Database thất bại

3 Không cập nhật và chỉnh sửa đượcthông tin sản phẩm, hiển thị thông

Mô tả chi tiết tính năng “Tìm kiếm sản phẩm”

Mô tả chi tiết Người dùng muốn tìm kiếm các sảnphẩm để phục vụ nhu cầu