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

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ệ Phát triển Devmaster Cán hướng dẫn : Ths.Trịnh Văn Chung Sinh viên thực : Nguyễn Hà Hoàng Lớp : ĐH9C4 Hệ Đại học : Chính qui Khóa học : 2019 - 2023 Hà Nội, tháng 03/2023 LỜI CẢM ƠN Em xin gửi lời cảm ơn chân thành đến thầy, cô giảng viên khoa Công nghệ thông tin, trường Đại học Tài Nguyên Môi Trường giám đốc anh chị công ty Viện công nghệ Devmaster giúp em có trải nghiệm quý báu, có nhìn trực quan lĩnh vực phát triển phần mềm Contents LỜI CẢM ƠN DANH MỤC HÌNH ẢNH PHẦN MỞ ĐẦU .6 Chương GIỚI THIỆU ĐỀ TÀI 1.1 Tên đề tài 1.2 Mô tả đề tài 1.3 Lý chọn thiết kế Website .9 1.4 Công nghệ sử dụng 10 Chương CƠ SỞ LÝ THUYẾT 11 2.1 Tổng quan ReactJS 11 2.2 Tổng quan Figma .11 2.3 Tổng quan Firebase 11 Chương PHÂN TÍCH ĐẶC TẢ YÊU CẦU .13 3.1 Yêu cầu chức 13 3.2 Yêu cầu phi chức 15 Chương 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 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 Thanh toán 25 5.8 Một số hình ảnh giao diệ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ý 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 thành phần 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 lọc sản phẩm……………………………………………………………………23 Hình 5.4.3 Giao diện chức 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 tố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 (từ ngày 6/02/2023 đến ngày 11/02/2023) - Tìm hiểu tổng quan tảng web 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 phần mềm triển khai ★ Tuần (từ ngày 13/02/2023 đến ngày 18/02/2023) - Tìm hiểu ngơn ngữ lập trình kịch javascrip - Tìm hiểu thư viện Jquery ★ Tuần (từ ngày 20/02/2023 đến ngày 25/02/2023) - Tìm hiểu Framework Bootstrap - Cắt ghép giao diện web(.psd, ai… => html) ★ Tuần (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 (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 viết, thông tin liên hệ cho dự án ★ Tuần (từ ngày 13/03/2023 đến ngày 16/03/2023) - Hoàn thành giao diện website PHẦN MỞ ĐẦU Tính cấp thiết đề tài Trong thời đại chuyển giao công nghệ cộng với tác động đại dịch mà người tiêu dùng chuyển thói quen mua hàng cửa hàng siêu thị sang mua sắm online Bởi tiện lợi, giá rõ ràng, vận chuyển đơn hàng ngày nhanh chóng hơn, cửa hàng kinh doanh nhận thấy tiềm việc tiếp thị bán hàng online.Đặc biệt cửa hàng bán đồ công nghệ cần phải mở rộng việc quảng bá mặt hàng tới khách hàng Nhận thấy nhu cầu cửa hàng tiềm 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 hàng thông qua việc bán hàng online Phần mềm nơi cấp cho người dùng thơng tin xác giá trực quan sản phẩm, góp phần làm cho việc mua bán thiết bị công nghệ thời kì dịch bệnh trở nên dễ dàng Ngồi cịn giúp hàng quản lý kho hàng, đơn xuất nhập hàng doanh thu Mục tiêu đề tài: - Nắm bắt áp dụng Firebase ReactJS để xây dựng sản phẩm đề tài - Xây dựng 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 chức cần thiết website thương mại điện tử Phạm vi đề tài: - Phạm vi môi trường: o Triển khai sản phẩm môi trường web - Phạm vi chức năng: o Đối với phía admin: ▪ Quản lý sản phẩm ▪ Quản lý đơn hàng ▪ 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 kiếm sản phẩm ▪ Bộ lọc chi tiết sản phẩm ▪ Chức giỏ hàng ▪ Chức đặt hàng ▪ Lịch sử mua hàng Đối tượng sử dụng: - Chủ sở bán hàng Người mua hàng, khách hàng có nhu cầu Phương pháp thực hiện: - Tìm hiểu FireBase, ReactJS - Tham khảo website liên quan để hiểu rõ nghiệp vụ - Tìm hiểu UX/UI tiến hành thiết kế giao diện cho website - Xây dựng website cho người dùng website cho nhân viên - Tiến hành triển khai kiểm thử Công nghệ sử dụng: - Backend: Firebase - Front-end: ReactJS Kết mong đợi: - Nắm bắt áp dụng công nghệ để xây dựng sản phẩm đề tài - Hiểu rõ nghiệp vụ, chức website thương mại điện tử - Áp dụng kiến thức học phân tích thiết kế hệ thống phần mềm, quy trình phát triển phần mềm, quản lý 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 người dùng Có thể thay đổi giao diện cách linh động mở rộng thêm chức cho website sản phẩm đề tài để phù hợp với nhu cầu thực tiễn tương lai Kế hoạch thực Giai đoạn Thời gian Chuẩn bị 14/02/2023– 20/03/2023 Phân tích thiết kế Cơng việc - Tìm hiểu Fire ReactJS - Phân tích, xác định chức 20/03/2023 – 26/03/2023 - Thiết kế database - Thiết kế UI/UX - Xây dựng website với ReactJS bao Xây dựng ứng dụng gôm giao diện người dùng giao 26/03/2023 – 05/03/2023 diện quản lý - Xây dựng chức quản lý, thống kê - Thực kiểm tra chức Kiểm thử sửa lỗi 05/03/2023 – 10/03/2023 - Tiến hành sửa lỗi phát sinh có - Cải thiện giao diện hoàn thành website Hoàn thiện báo cáo 10/03/2023 – 12/03/2023 - Viết báo cáo Chương GIỚI THIỆU ĐỀ TÀI 1.1 Tên đề tài - Tên đề tài “Xây dựng bán hàng trực tuyến 2023 ” 1.2 Mô tả đề tài Tên gọi website đề tài Multimart Multimart website hỗ trợ quản lý hàng hóa cung cấp giải pháp bán hàng online cho cửa hàng công nghệ Ở Multimảt nơi cung cấp sản phẩm nội thất chí đồ cơng nghệ số Website cung cấp chức cho 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 chức 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ý đơn hàng, người dùng hệ thống cuối thống kê Về phía đối tượng sử dụng khách hàng Multimart cung cấp tính như: xem danh sách sản phẩm theo phân loại, lọc sản phẩm, xếp, xem chi tiết sản phẩm, quản lý giỏ hàng, quản lý hồ sơ thông tin khách hàng khách hàng đăng nhập vào hệ thống 1.3 Lý chọn thiết kế Website - Lý khách quan: Cuộc cách mạng khoa học công nghệ diễn vô sơi động tồn giới đưa giới bước sang kỉ nguyên mới, kỉ nguyên công nghệ thông tin Việc ứng dụng tin học vào đời sống nói chung cơng tác quản lý nói riêng phát triển mạnh mẽ, góp vai trị khơng nhỏ việc đưa tin học trở thành phần thiếu tất nghành nghề từ văn phịng, quảng cáo, tài Từ khóa “e-Commerce” chắn khơng cịn xa lạ với Các hoạt động kinh doanh mua bán chuyển dần từ trực tiếp sang đơn đặt hàng online Điều đặt u cầu phải chuyển đổi mơ hình kinh doanh cửa hàng, nhà bán lẻ nói chung thị trường bán lẻ thiết bị điện tử nói riêng Để triển khai tốt mơ hình kinh doanh cửa hàng, nhà bán lẻ phải quản lý tốt số lượng sản phẩm kho quản lý hoạt động khác kinh doanh online để tránh mát lợi nhuận - Lý chủ quan: Bản thân nhóm chúng em muốn xây dựng ứng dụng gần với ứng dụng thực tế, giải vấn đề việc xây dựng cửa hàng kinh doanh online mà cửa hàng bán đồ công nghệ mắc phải Cùng với nhu cầu sử dụng phần mềm thành viên nhóm, tụi em cố gắng phát triển thêm để đưa phần mềm vào sử dụng thực tế 1.4 Công nghệ sử dụng - Front-End: • UI/UX: Figma • Framework: ReactJS - Back-End: • Storage: Firebase • Database: Cloud Firebase - Mơi trường thiết kế: • Visual Studio Code • Figma - Cơng cụ hỗ trợ: • Chrome 10 trễ mạng kết nối Internet. Cloud Firestore cung cấp khả tích hợp liền mạch với sản phẩm Firebase Google Cloud khác, bao gồm Cloud Function Hình 4.3 Giao diện Cloud Firestore - Storage: Lưu trữ đám mây cho Firebase dịch vụ lưu trữ đối tượng mạnh mẽ, đơn giản tiết kiệm chi phí xây dựng cho quy mơ Google Hình 4.4 Giao diện Storage 17 4.2 Kiến trúc hệ thống Front-End - node_modules, public: file cài đặt React JS framework khác -src: Chứa toàn sucrose code dự án -admin: Giao diện chương trình quản lý - assets: Bao gồm tất tài nguyên sử dụng dự án -Components : Chứa components có khả tái sử dụng -Custom-hooks: Cấu hình sử dụng state -Pages: Chứa components hinh hiển thị -Routers: Điều hướng website - firebase.config.js File cầu hình sử dụng cho firebase Hình 4.5 Cấu trúc thành phần dự án 18 Chương THIẾT KẾ GIAO DIỆN 5.1 Giao diện trang Signup Hình 5.6 Giao diện trang Signup - Sau điền thông tin gửi , liệu lưu trữ Cloud Firebase bao gồm: User name, Gmail, Mật Hình ảnh 5.2 Giao diện trang Login 19 Hình 5.7 Giao diện trang Login -Sử dụng gmail mật tạo trước để đăng nhập - Lúc Authentiction firebase đảm nhận chức hỗ trợ việc nhập người dùng 5.3 Giao diện trang chủ 20 21 Hình 5.8 Giao diện trang chủ - Trang chủ bao gồm Header Footer hiển thị tương tác với trang web - Phần layout bao gồm ưu đãi cửa hàng Các sản phẩm Trending Product, Best Sales, Sản phẩm giới hạn, Sản phẩm 22 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 sản phẩm - Bộ lọc phân loại sản phẩm tìm kiếm sản phẩm theo tên Hình 5.4.2 Giao diện chức lọc sản phẩm 24 Hình 5.4.3 Giao diện chức 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 hình ảnh ngồi cịn có thêm chức đánh giá sản phẩm - Hiển thị sản phẩn loại bên 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 thông tin sản phẩm chọn bao gồm: Hình ảnh, Tên sản phẩm, Giá thành, Số lượng 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 tiếp tục mua hàng 5.7 Giao diện chức Thanh tốn 26 Hình 5.7 Giao diện chức toán - Khi tiến hành toán người dùng có trường hợp Đăng nhập chưa Đăng nhập  Đã đăng nhập => Trang toán  Chưa đăng nhập => Trang Login => Trang toán\ - Trang 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 Tổng số tiền cẩn tốn - Sau tốn tồn liệu đơn hàng gửi đến Cloud Firestore để lưu trữ 27 5.8 Một số hình ảnh giao diệ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) 28 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á - Thuận lợi: Giảng viên hướng dẫn tận tình, hỗ trợ định hướng nhóm nghiên cứu thực đề tài Vận dụng kiến thức học để áp dụng vào đồ án Các tài liệu hướng dẫn phong phú giúp giải vấn đề thực đồ án - Khó khăn: • Lần đầu áp dụng cơng nghệ ReactJS, VueJS Spring Boot q trình tìm hiểu gặp nhiều khó khăn tốn nhiều thời gian • Gặp nhiều rắc rối việc thiết kế sở liệu cho phù hợp • Khó khăn việc trả liệu cho phía front-end theo yêu cầu • • • ❖ Kết đạt - Ưu điểm: Hoàn thành đầy đủ yêu cầu tính cần thiết hệ thống quản lý website bán đồ cơng nghệ • Website ưa nhìn, xem sản phẩm đầy đủ chi tiết cấu hình • Sinh viên nắm cơng nghệ phổ biến ReactJS, VueJS Spring Boot • Dữ liệu đầy đủ, phù hợp với nhu cầu người dùng - 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ợ tốn online chưa tích hợp phí vận chuyển • Website chưa tương tích với hình nhỏ • Tốc độ truy vấn liệu cịn chậm • ❖ Hướng phát triển - Cải thiện UI/UX Tích hợp tốn online Thêm tính cho phép so sánh sản phẩm thể loại Thêm tính 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 chức gợi ý sản phẩm, chatbot hỗ trợ tư vấn Hoàn thiện chức có Tối ưu hố code để tăng tốc độ truy vấn liệu để dễ dàng mở rộng sau 30 TÀI LIỆU THAM KHẢO [1] Trần Thị Hồng Yến (2021), Slide giảng môn Internet Công nghệ Web, Khoa Khoa Học Kỹ Thuật Thông Tin, Trường ĐH Công Nghệ Thông Tin [2] Firebase: https://firebase.google.com/docs/firestore [3] Vuettify Web Docs: https://vuetifyjs.com/en/ [4] Vue Web Docs: https://vuejs.org/ [5] Ant Design Web Docs: https://ant.design/ [6] W3Schools Online Web Tutorials: https://www.w3schools.com/ [7] Tìm hiểu Json Web Token https://viblo.asia/p/tim-hieu-ve-json-web-tokenjwt-7rVRqp73v4bP [8] Khoá học HTML-CSS: https://www.youtube.com/watch? v=R6plN3FvzFY&list=PL_VfJajZj0U9nEXa4qyf B4U5ZIYCMPlz [9] Khoá học ReactJS: https://www.youtube.com/watch?v=w7ejDZ8SWv8 [10] Khoá học VueJS: https://www.youtube.com/c/HenryWebDev 31