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

- 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ử... Có th

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

Hà Nội, tháng 03/2023

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

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)

- Tìm hiểu về thư viện Jquery

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

- Tìm hiểu về Framework Bootstrap

- Cắt ghép giao diện web(.psd, ai… => html)

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

- Xây dựng giao diện trang chủ cho dự án

- Xây dựng giao diện trang giới thiệu cho dự án

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

- Xây dựng giao diện trang sản phẩm, chi tiết sản phẩm

- Xây dựng trang tin tức bài viết, các thông tin liên hệ cho dự án

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

- Hoàn thành giao diện website

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

▪ Quản lý tài khoản

▪ Thống kê

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

▪ Đăng nhập, đăng ký tài khoản

▪ 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

- 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

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

Kiểm thử và

- Thực hiện kiểm tra các chức năng

- Tiến hành sửa lỗi phát sinh nếu có

- Cải thiện giao diện và hoàn thành 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ía quả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ập hà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ản phẩ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

- Lý do khách quan:

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ànhnghề 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ảiquả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

• Database: Cloud Firebase

- Môi trường thiết kế:

• Visual Studio Code

• Figma

- Công cụ hỗ trợ:

• Chrome

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

2.1 Tổng quan về ReactJS

- Tổng quan:

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

- Ưu điểm nổi bật:

• Sử dụng DOM ảo là một đối tượng JavaScript Điều này sẽ cải thiện hiệu suất ứngdụng, vì DOM ảo JavaScript nhanh hơn DOM thông thường

• Có thể được sử dụng trên máy khách và máy chủ cũng như với các khuôn khổ khác

• Các mẫu thành phần và dữ liệu cải thiện khả năng đọc, giúp duy trì các ứng dụnglớn hơn

2.2 Tổng quan về Figma

- Tổng quan:

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ề

- Ưu điểm nổi bật:

• Tương thích với nhiều hệ điều hành

• Phù hợp với làm việc nhóm

• Có thể chia sẻ và hoàn toàn public

• Các thiết kế được lưu trữ trên đám mây

• Cung cấp cho người dùng một kho plugin đa dạng

2.3 Tổng quan về Firebase

- Tổng quan:

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ườidù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

- Ưu điểm nổi bật:

• Dễ sử dụng

• Hỗ trợ phát triển ứng dụng 1 cách nhanh chóng

• Cung cấp dịch vụ: Database of Realtime

• Khai thác triệt để sức mạnh cũng như dịch vụ của Google

• Kho back-end mẫu vô cùng đa dạng

• Sao lưu dữ liệu thường xuyên và đảm bảo tính bảo mật

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

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

Nhóm chức năng Chức năng Mô tả

Khách hàng

Đăng ký tài khoản

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

để dễ dàng sử dụng các chức năng và ưu đãi của website

Đăng nhập Khách hàng sau khi đăng ký có thể sử dụng tài khoản để đăng nhập

Xem lịch sử mua hàng Khách hàng có thể theo dõi chi tiết danh sách chi tiết các đơn hàng mình đã đặt

Giỏ hàng

Khách hàng có thể chọn các sản phẩm và đưa vào giỏ hàng để thuận tiện cho việc mua sắm

- Đối với các khách hàng chưa có tài khoản:khách hàng phải nhập đầy đủ thông tin như sốđiện thoại, địa chỉ… Nhân viên sẽ gọi điện vàxác nhận

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

Quản lý biến thể sản

phẩm

Nhân viên quản lý có thể thực hiện các chức năng 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ài khoản chưa đăng ký thì nhân viên sẽ gọi điện xác nhận

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

Quản lý tài khoản Admin có thể thêm, sửa, xoá tài khoản cho nhâ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

Thống kê

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

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ủa cửa hàng

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

- Tính bảo mật: Phải đảm bảo an toàn dữ liệu người dùng, ngăn chặn các tấn công từ bên

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ý)

- Tính tiện dụng: Phần mềm có giao diện đẹp mắt, dễ sử dụng và tiện lợi trong việc mua sắm

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

- Tính hiệu quả: Đảm bảo tốc độ xử lý ổn định, có thể lưu một lượng lớn dữ liệu, tránh xảy ra

lỗi ngoại lệ

- Tính tương thích: Ứng dụng có thể chạy ổn định và tương thích với nhiều nền tảng hệ điều

hành khác nhau

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

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

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

- firebase.config.js File cầu hình sử dụng cho 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

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ủ

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

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

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

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)

KẾT LUẬN

❖ Đánh giá

- Thuận lợi:

• 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

- Khó khă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ểugặ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

- Nhược điểm:

• 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

- Cải thiện UI/UX

- Tích hợp thanh toán online

- Thêm tính năng cho phép so sánh các sản phẩm cùng thể loại

- Thêm tính năng cho phép người dùng bình luận, đánh giá sản phẩm

- Xây dựng mở rộng thêm các chức năng như gợi ý sản phẩm, chatbot hỗ trợ tư vấn

- Hoàn thiện hơn các chức năng đã có

- Tối ưu hoá code để tăng tốc độ truy vấn dữ liệu và để dễ dàng mở rộng sau này