BÁO cáo THỰC tập tốt NGHIỆP tên đề tài xây DỰNG WEB bán HÀNG TRỰC TUYẾN 2023

Tính cấp thiết của đề tài Trong thời đại chuyển giao công nghệ cộng với sự tác động của đại dịch mà người tiêu dùng chuyển thói quen mua hàng tại các cửa hàng siêu thị sang mua sắm onlin

TRƯỜNG ĐẠI HỌC TÀI NGUYÊN VÀ MÔI TRƯỜNG HÀ NỘI

KHOA CÔNG NGHỆ THÔNG TIN

BÁO CÁO THỰC TẬP TỐT NGHIỆP

TÊN ĐỀ TÀI

XÂY DỰNG WEB BÁN HÀNG TRỰC TUYẾN 2023

Đơn vị tập tốt nghiệp : Công ty CP Đào tạo Công nghệ và Phát triển Devmaster Cán bộ hướng dẫn : Ths.Trịnh Văn Chung

Sinh viên thực hiện : Nguyễn Hà Hoàng

LỜI CẢM ƠN 2

DANH MỤC HÌNH ẢNH 4

PHẦN MỞ ĐẦU 6

Chương 1 GIỚI THIỆU ĐỀ TÀI 9

1.1 Tên đề tài 9

1.2 Mô tả đề tài 9

1.3 Lý do chọn thiết kế Website 9

1.4 Công nghệ sử dụng 10

Chương 2 CƠ SỞ LÝ THUYẾT 11

2.1 Tổng quan về ReactJS 11

2.2 Tổng quan về Figma 11

2.3 Tổng quan về Firebase 11

Chương 3 PHÂN TÍCH ĐẶC TẢ YÊU CẦU 13

3.1 Yêu cầu chức năng 13

3.2 Yêu cầu phi chức năng 15

Chương 4 THIẾT KẾ HỆ THỐNG 16

4.1 Kiến trúc hệ thống Back-End 16

4.2 Kiến trúc hệ thống Front-End 18

Chương 5 THIẾT KẾ GIAO DIỆN 19

5.1 Giao diện trang Signup 19

5.2 Giao diện trang Login 19

5.3 Giao diện trang chủ 20

5.4 Giao diện trang cửa hàng 22

5.5 Giao diện hiển thị chi tiết sản phẩm 24

5.6 Giao diện trang Giỏ hàng 25

5.7 Giao diện chức năng Thanh toán 25

5.8 Một số hình ảnh giao diện trên màn hình mobile(I phone 12 Pro) 27

KẾT LUẬN 29

TÀI LIỆU THAM KHẢO 30

3

DANH MỤC HÌNH ẢNH

Hình 4.1 Cấu trúc hệ thống quản lý dữ liệu 16

Hình 4.2 Giao diện Authentication 16

Hình 4.3 Giao diện Cloud Firestore 17

Hình 4.4 Giao diện Storage 17

Hình 4.5 Cấu trúc và thành phần của dự án 18

Hình 5.1 Giao diện trang Signup 19

Hình 5.2 Giao diện trang Login 19

Hình 5.3 Giao diện trang chủ 21

Hình 5.4.1 Giao diện trang Cửa hàng 23

Hình 5.4.2 Giao diện chức năng lọc sản phẩm………23

Hình 5.4.3 Giao diện chức năng tìm kiếm……….24

Hình 5.5 Giao diện hiển thị chi tiết sản phẩm……… 24

Hình 5.6 Giao diện trang Giỏ hàng………

25 Hình 5.7 Giao diện chức năng thanh toán………

……….26

Hình 5.8.1 Giao diện trang chủ (mobile)……… …27

Hình 5.8.2 Giao diện trang Cửa hàng (mobile) ……… 27

Hình 5.8.3 Giao diện trang Giỏ hàng (mobile)……… 28

Hình 5.8.4 Giao diện trang Chi tiết sản phẩm (mobile )……… 28

QUÁ TRÌNH HỌC TẬP VÀ LÀM VIỆCTẠI CƠ SỞ THỰC TẬP

★ Tuần 1 (từ ngày 6/02/2023 đến ngày 11/02/2023)

- Tìm hiểu tổng quan về nền tảng web và ngôn ngữ đánh dấu HTML5,

- Tìm hiểu ngôn ngữ định kiểu CSS3;

- Làm quen với code: tìm hiểu luồng hoạt động của phần mềm đang được triển khai.

★ Tuần 2 (từ ngày 13/02/2023 đến ngày 18/02/2023)

-

★ Tuần 3 (từ ngày 20/02/2023 đến ngày 25/02/2023)

-

-

★ Tuần 4 (từ ngày 27/02/2023 đến ngày 04/03/2023)

-

-

★ Tuần 5 (từ ngày 6/03/2023 đến ngày 11/03/2023)

-

-

★ Tuần 6 (từ ngày 13/03/2023 đến ngày 16/03/2023)

-

5

PHẦN MỞ ĐẦU

1 Tính cấp thiết của đề tài

Trong thời đại chuyển giao công nghệ cộng với sự tác động của đại dịch mà người tiêu dùng chuyển thói quen mua hàng tại các cửa hàng siêu thị sang mua sắm online Bởi vì sự tiện lợi, giá cả rõ ràng, vận chuyển đơn hàng ngày càng nhanh chóng hơn, các cửa hàng kinh doanh luôn nhận thấy được tiềm năng của việc tiếp thị và bán hàng online.Đặc biệt đối với các cửa hàng bán đồ công nghệ cần phải mở rộng hơn trong việc quảng bá các mặt hàng của mình tới khách hàng Nhận thấy được nhu cầu của cửa hàng và tiềm năng trong việc kinh doanh online, em đã xây dựng "Website bán hàng trực tuyến 2023" nhằm thúc đẩy doanh thu của cửa hàng thông qua việc bán hàng online.

Phần mềm sẽ là nơi cũng cấp cho người dùng những thông tin chính xác và giá cả trực quan nhất của sản phẩm, góp phần làm cho việc mua bán các thiết bị công nghệ trong thời kì dịch bệnh trở nên dễ dàng hơn Ngoài ra còn giúp của hàng có thể quản lý kho hàng, các đơn xuất nhập hàng và doanh thu.

2 Mục tiêu đề tài:

- Nắm bắt và áp dụng được Firebase và ReactJS để xây dựng sản phẩm đề tài.

- Xây dựng được website bán hàng với nội dung 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 thương mại điện tử.

o Đối với phía website:

▪ Hiển thị danh sách sản phẩm, chi tiết sản phẩm.

Tìm hiểu về FireBase, ReactJS.

Tham khảo các website liên quan để hiểu rõ về nghiệp vụ Tìm hiểu 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 nhân viên Tiến hành triển khai và kiểm thử.

6 Công nghệ sử dụng: Backend: Firebase

7

-

Front-end: ReactJS

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 thương mại điện tử - Á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.

-

Giao diện website đẹp mắt, dễ sử dụng đối với người dùng.

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.

8 Kế hoạch thực hiện

Chuẩn bị 14/02/2023– 20/03/2023 - Tìm hiểu về Fire và ReactJS

20/03/2023 – 26/03/2023 - Thiết kế database thiết kế

- Thiết kế UI/UX

- Xây dựng website với ReactJS bao

26/03/2023 – 05/03/2023 diện quản lý dụng

- Xây dựng chức năng quản lý, thống kê

- Thực hiện kiểm tra các chức năng Kiểm thử và

05/03/2023 – 10/03/2023 - Tiến hành sửa lỗi phát sinh nếu có

website

Hoàn thiện và

Chương 1 GIỚI THIỆU ĐỀ TÀI

Website cung cấp chức năng cho 2 phía người dùng chính: Chủ cửa hàng, khách hàng Về phíaquản lý Multimart cung cấp các chức năng phục vụ cho việc quản lý phân loại sản phẩm, sản phẩm, nhậphàng hóa, quản lý các đơn hàng, người dùng trong hệ thống và cuối cùng là thống kê

Về phía đối tượng sử dụng là khách hàng thì Multimart cung cấp các tính năng như: xem danh sách sảnphẩm theo phân loại, lọc sản phẩm, sắp xếp, xem chi tiết sản phẩm, quản lý giỏ hàng, quản lý hồ sơ vàthông tin của khách hàng nếu khách hàng đăng nhập vào hệ thống

1.3 Lý do chọn thiết kế Website

-

Cuộc cách mạng khoa học và công nghệ đã và đang diễn ra vô cùng sôi động trên toàn thế giới

đã đưa thế giới bước sang một kỉ nguyên mới, kỉ nguyên của công nghệ thông tin Việc ứng dụng tin học vào đời sống nói chung và công tác quản lý nói riêng đang phát triển mạnh mẽ, nó góp vai trò không nhỏ trong việc đưa tin học trở thành một phần không thể thiếu trong tất cả mọi nghành nghề từ văn phòng, quảng cáo, tài chính

Từ khóa “e-Commerce” chắc chắn không còn xa lạ với chúng ta Các hoạt động kinh doanh mua bán đang chuyển dần từ trực tiếp sang các đơn đặt hàng online Điều đó đặt ra yêu cầu phải chuyển đổi mô hình kinh doanh của các cửa hàng, nhà bán lẻ nói chung và thị trường bán lẻ thiết bị điện tử nói riêng Để có thể triển khai tốt mô hình kinh doanh mới này các cửa hàng, nhà bán lẻ phải quản lý tốt được số lượng sản phẩm trong kho của mình cũng như quản lý các hoạt động khác trong kinh doanh online để tránh mất mát về lợi nhuận

9

-

-

Chương 2 CƠ SỞ LÝ THUYẾT

2.1 Tổng quan về ReactJS

-

React là một thư viện để xây dựng giao diện người dùng có thể kết hợp Nó khuyến khích việc tạo ra các thành phần giao diện người dùng có thể tái sử dụng, hiển thị dữ liệu thay đổi theo thời gian Rất nhiều người sử dụng React làm V trong MVC React trừu tượng hóa DOM khỏi bạn, cung cấp mô hình lập trình đơn giản hơn và hiệu suất tốt hơn React cũng có thể hiển thị trên máy chủ bằng Node và nó có thể cung cấp năng lượng cho các ứng dụng gốc bằng React Native React triển khai luồng dữ liệu phản ứng một chiều, điều này giúp giảm bớt phần soạn sẵn và dễ lý luận hơn

so với ràng buộc dữ liệu truyền thống

-

•

•

•

2.2 Tổng quan về Figma

-

Figma là phần mềm chuyên biệt được các designer dùng để thiết kế giao diện website, ứng dụng trực tuyến mà không cần phải tải về

-

•

•

•

•

•

2.3 Tổng quan về Firebase

-

11

Firebase là dịch vụ cơ sở dữ liệu hoạt động trên nền tảng đám mây Hệ thống giúp người dùng có thể lập trình ứng dụng thông qua cách đơn giản các thao tác giữ liệu

-

•

•

•

•

•

Chương 3 PHÂN TÍCH ĐẶC TẢ YÊU CẦU

3.1 Yêu cầu chức năng

Khách hàng Khách hàng có thể đăng ký tài khoản bằng email

Đăng ký tài khoản để dễ dàng sử dụng các chức năng và ưu đãi của

Chức năng đặt hàng hỗ trợ cả hai đối tượng kháchhàng đã có tài khoản và chưa có tài khoản

-

Đặt hàng cầu đặt hàng sẽ được chuyển thẳng tới cho

phía quản lý

-

Quản lý Quản lý sản phẩm Nhân viên quản lý có thể các thực hiện các chức

năng thêm, sửa, xóa sản phẩm

13

Quản lý biến thể sản Nhân viên quản lý có thể thực hiện các chức năngphẩm thêm, sửa xoá các biến thể của sản phẩm đó.

Quản lý thể loại Nhân viên quản lý có thể các thực hiện các chức

năng thêm, sửa, xóa thể loại

Quản lý thương hiệu Nhân viên quản lý có thể các thực hiện các chức

năng thêm, sửa, xóa thương hiệu

Quản lý mã giảm giá Nhân viên quản lý có thể các thực hiện các chức

năng thêm, sửa, xóa các mã giảm giá

Quản lý đơn hàng Nhân viên quản lý có thể xem và cập nhật

trạng thái của đơn hàng Nếu đơn hàng của tàikhoản chưa đăng ký thì nhân viên sẽ gọi điện xácnhận

Quản lý nhập hàng Nhân viên có thể xem, thêm hoặc xoá chi đơn nhập

hàng

Admin có thể thêm, sửa, xoá tài khoản cho nhânQuản lý tài khoản viên Ngoài ra admin có thể xem chi tiết, vô hiệu

hoá tài khoản khách hàng

Hệ thống cung cấp các biểu đồ, số liệu trực quan

Thống kê và chức năng xuất file excel giúp nhân viên quản lí

dễ dàng nắm bắt được tình hình kinh doanh củacửa hàng

Bảng 3.1 Yêu cầu chức năng

14

3.2 Yêu cầu phi chức năng

-

ngoài, kiểm soát vận hành hệ thống, giảm thiểu tối đa mức độ rủi ro, rò rỉ thông tin như các chức năng xác thực người dùng (đăng nhập, đăng ký)

-

online và quản lý của nhân viên

-

lỗi ngoại lệ

-

hành khác nhau

15

Chương 4 THIẾT KẾ HỆ THỐNG 4.1 Kiến trúc hệ thống Back-End

Hình 4.1 Cấu trúc hệ thống quản lý dữ liệu

- Authentication : Xác thực Firebase cung cấp dịch vụ phụ trợ, SDK dễ sử dụng và thư viện giao diện người dùng được tạo sẵn để xác thực người dùng với ứng dụng của bạn Nó

hỗ trợ xác thực bằng mật khẩu, số điện thoại, nhà cung cấp danh tính được liên kết phổ biến như Google, Facebook và Twitter, v.v.

Hình 4.2 Giao diện Authentication

- Firestore Database : Cloud Firestore là cơ sở dữ liệu linh hoạt, có thể mở rộng để phát triển thiết bị di động, web và máy chủ từ Firebase và Google Cloud Giống như Cơ sở dữ liệu thời gian thực của Firebase, nó giữ cho dữ liệu của bạn được đồng bộ hóa trên các ứng dụng khách thông qua trình nghe thời gian thực và cung cấp hỗ trợ ngoại tuyến cho thiết bị di động và web

để bạn có thể xây dựng các ứng dụng đáp ứng hoạt động bất kể độ

trễ của mạng hoặc kết nối Internet Cloud Firestore cũng cung cấp khả năng tích hợp liền mạch với các sản phẩm Firebase và Google Cloud khác, bao gồm cả Cloud Function.

Hình 4.3 Giao diện Cloud Firestore

- Storage: Lưu trữ đám mây cho Firebase là dịch vụ lưu trữ đối tượng mạnh mẽ, đơn giản và tiết kiệm chi phí được xây dựng cho quy mô của Google.

Hình 4.4 Giao diện Storage

17

4.2 Kiến trúc hệ thống Front-End

JS và các framework khác

-src: Chứa toàn bộ sucrose code của dự án

-admin: Giao diện và chương trình quản lý

dụng trong dự án.

-Components : Chứa các components

có khả năng tái sử dụng.

-Custom-hooks: Cấu hình sử dụng state

-Pages: Chứa các components là các màn hinh hiển thị

-Routers: Điều hướng của website

firebase

Hình 4.5 Cấu trúc và thành phần của dự án

Chương 5 THIẾT KẾ GIAO DIỆN

5.1 Giao diện trang Signup

Hình 5.6 Giao diện trang Signup

- Sau khi điền thông tin và gửi đi , dữ liệu sẽ được lưu trữ trên Cloud Firebase bao gồm: User name, Gmail, Mật khẩu và Hình ảnh.

5.2 Giao diện trang Login

19

Hình 5.7 Giao diện trang Login

-Sử dụng gmail và mật khẩu đã tạo trước đó để đăng nhập

- Lúc này Authentiction trên firebase sẽ đảm nhận chức năng hỗ trợ việc đang nhập của người dùng

5.3 Giao diện trang chủ

Hình 5.8 Giao diện trang chủ

- Trang chủ bao gồm Header và Footer luôn hiển thị khi tương tác với trang web

5.4 Giao diện trang cửa hàng

23

Hình 5.9.1 Giao diện trang Cửa hàng

- Giao diện trang trang cửa hàng bao gồm danh sách tất cả sản phẩm

- Bộ lọc phân loại sản phẩm và tìm kiếm sản phẩm theo tên

Hình 5.4.3 Giao diện chức năng tìm kiếm

5.5 Giao diện hiển thị chi tiết sản phẩm

Hình 5.5 Giao diện hiển thị chi tiết sản phẩm

25

- Trang chi tiết sản phẩm bao gồm Thông tin cơ bản cùng hình ảnh ngoài ra còn có thêm chức năng đánh giá sản phẩm.

- Hiển thị các sản phẩn cùng loại ở bên dưới

5.6 Giao diện trang Giỏ hàng

Hình 5.6 Giao diện trang Giỏ hàng

- Trang giỏ hàng gồm các thông tin các sản phẩm đã chọn bao gồm: Hình ảnh, Tên sản phẩm, Giá thành, Số lượng và lựa chọn Xóa sản phẩm

- Bên cạnh đó có hiển thị tổng tiền, Thanh toán hoặc tiếp tục mua hàng

5.7 Giao diện chức năng Thanh toán

Hình 5.7 Giao diện chức năng thanh toán

- Khi tiến hành thanh toán người dùng sẽ có 2 trường hợp là đã Đăng nhập và chưa Đăng nhập

Đã đăng nhập => Trang thanh toán

Chưa đăng nhập => Trang Login => Trang thanh toán\

- Trang thanh toán bao gồm from diền thông tin khách hàng, tổng số lượng đã mua, tổng tiền, chương trình khuyến mãi và Tổng số tiền cẩn thanh toán

- Sau khi thanh toán toàn bộ dữ liệu đơn hàng sẽ được gửi đến Cloud Firestore để lưu trữ.

27

5.8 Một số hình ảnh giao diện trên màn hình mobile(I phone 12 Pro)

Hình 5.8.1 Giao diện trang chủ (mobile) Hình 5.8.2Giao diện trang Cửa

hàng(mobile)

Hình 5.8.3Giao diện trang Giỏ hàng (mobile)

Hình 5.8.4 Giao diện hiển thị thông tin

sản

phẩm(mobile)

29

KẾT LUẬN

❖ Đánh giá

-

• Giảng viên hướng dẫn tận tình, hỗ trợ và định hướng nhóm nghiên cứu và thực hiện đề tài

• Vận dụng được các kiến thức đã được học để áp dụng vào đồ án

• Các tài liệu và hướng dẫn phong phú giúp giải quyết được các vấn đề khi thực hiện đồ án

• Lần đầu áp dụng các công nghệ ReactJS, VueJS và Spring Boot vì vậy quá trình tìm hiểu gặp nhiều khó khăn và tốn nhiều thời gian

• Gặp nhiều rắc rối trong việc thiết kế cơ sở dữ liệu cho phù hợp

• Khó khăn trong việc trả dữ liệu cho phía front-end theo đúng yêu cầu

-

• Chưa có tài liệu hướng dẫn sử dụng phía hệ thống quản lý

• Chưa cho hỗ trợ thanh toán online và chưa tích hợp được phí vận chuyển

• Website chưa tương tích được với các màn hình nhỏ

• Tốc độ truy vấn dữ liệu vẫn còn chậm

❖ Hướng phát triển

-

-

-

-

-

-

-