Xây dụng website bán hàng

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT THÀNH PHỐ HỒ CHÍ MINH KHĨA LUẬN TỐT NGHIỆP NGÀNH CÔNG NGHỆ THÔNG TIN XÂY DỰNG WEBSITE BÁN HÀNG GVHD : SVTH : ThS NGUYỄN MINH ĐẠO PHAN VĂN TRÍ PHAN THỊ THÙY DƯƠNG SKL007103 Tp Hồ Chí Minh, tháng 02/2020 TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HỒ CHÍ MINH KHOA CƠNG NGHỆ THƠNG TIN BỘ MÔN CÔNG NGHỆ PHẦN MỀM - - PHAN VĂN TRÍ – 16110496 PHAN THỊ THÙY DƯƠNG- 16110303 Đề Tài: XÂY DỰNG WEBSITE BÁN HÀNG KHÓA LUẬN TỐT NGHIỆP KỸ SƯ CNTT GIÁO VIÊN HƯỚNG DẪN ThS NGUYỄN MINH ĐẠO KHÓA 2016 - 2020 TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HỒ CHÍ MINH KHOA CƠNG NGHỆ THÔNG TIN BỘ MÔN CÔNG NGHỆ PHẦN MỀM - - PHAN VĂN TRÍ – 16110496 PHAN THỊ THÙY DƯƠNG- 16110303 Đề Tài: XÂY DỰNG WEBSITE BÁN HÀNG KHÓA LUẬN TỐT NGHIỆP KỸ SƯ CNTT GIÁO VIÊN HƯỚNG DẪN ThS NGUYỄN MINH ĐẠO KHÓA 2016 – 2020 ĐH SƯ PHẠM KỸ THUẬT TP HCM CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM KHOA CNTT Độc lập – Tự – Hạnh Phúc ******* ******* PHIẾU NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN Họ tên Sinh viên 1: Phan Văn Trí Họ tên Sinh viên 2: Phan Thị Thùy Dương Ngành: Công nghệ Thông tin Tên đề tài: MSSV 1: 16110496 MSSV 2: 16110303 Xây dựng website bán hàng Họ tên Giáo viên hướng dẫn: ThS Nguyễn Minh Đạo NHẬN XÉT Về nội dung đề tài & khối lượng thực hiện: Ưu điểm: Khuyết điểm: Đề nghị cho bảo vệ hay không? Đánh giá loại: Điểm: Tp Hồ Chí Minh, ngày tháng năm 2019 Giáo viên hướng dẫn (Ký & ghi rõ họ tên) ĐH SƯ PHẠM KỸ THUẬT TP HCM CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM KHOA CNTT Độc lập – Tự – Hạnh Phúc ******* ******* PHIẾU NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN Họ tên Sinh viên 1: Phan Văn Trí Họ tên Sinh viên 2: Phan Thị Thùy Dương Ngành: Công nghệ Thông tin Tên đề tài: MSSV 1: 16110496 MSSV 2: 16110303 Xây dựng website bán hàng Họ tên Giáo viên hướng dẫn: NHẬN XÉT Về nội dung đề tài & khối lượng thực hiện: Ưu điểm: Khuyết điểm: Đề nghị cho bảo vệ hay không? Đánh giá loại: Điểm: Tp Hồ Chí Minh, ngày tháng năm 2019 Giáo viên phản biện (Ký & ghi rõ họ tên) LỜI CẢM ƠN Trong suốt trình học tập trường Đại Học Sư Phạm Kỹ Thuật Thành Phố Hồ Chí Minh, chúng em học nhiều kiến thức, lời khuyên, bảo, giúp đỡ từ thầy cô khoa Công Nghệ Thông Tin để hôm chúng em tạo sản phẩm tốt từ trước đến chúng em thể thông qua đề tài – Khóa Luận Tốt Nghiệp Đầu tiên, nhóm em xin chân thành gửi lời cảm ơn đến Khoa Công nghệ thông tin, trường trường Đại Học Sư Phạm Kỹ Thuật Thành Phố Hồ Chí Minh tạo điều kiện cho nhóm em thực đề tài Thứ hai, nhóm em xin kính gửi đến thầy Nguyễn Minh Đạo lời cảm ơn sâu sắc Trong trình thực đề tài, Thầy hướng dẫn, bảo, giúp đỡ giải đáp thắc mắc chúng em cách tận tình Cuối cùng, nhóm em xin chân thành cảm ơn tập thể Giáo viên Khoa Công nghệ thông tin, trường Đại học Sư phạm kỹ thuật Thành phố Hồ Chí Minh giảng suốt khóa học, kiến thức tảng kiến thức chuyên ngành giúp cho nhóm em hồn thành tốt đề tài Trong q trình thực đề tài, ln có thuận lợi khó khăn, chúng em ln cố gắng giải theo hướng tối ưu chắn khơng thể tránh sai xót Chúng em kính mong nhận ý kiến đóng góp quý báu cảm thông Thầy Cô để chúng em học hỏi thêm nhiều học kinh nghiệm hoàn thành tốt tương lai Một lần nhóm em xin chân thành cảm ơn! Sinh viên 1: Phan Văn Trí Sinh viên 2: Phan Thị Thùy Dương ĐH SƯ PHẠM KỸ THUẬT TP.HCM KHOA CNTT ******* XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự – Hạnh Phúc ******* NHIỆM VỤ THỰC HIỆN KHÓA LUẬN CHUYÊN NGÀNH Họ tên sinh viên : Phan Văn Trí MSSV : 16110496 Họ tên sinh viên : Phan Thị Thùy Dương MSSV : 16110303 Chuyên ngành : Công nghệ phần mềm Giáo viên hướng dẫn: ThS Nguyễn Minh Đạo Tên đề tài : Tìm hiểu Spring boot, Reactjs, Google Firebase, MySQL Xây dựng website bán hàng trực tuyến Nội dung thực : - Lý thuyết: Tìm hiểu Spring Boot, Reactjs, Google Firebase, MySQL, RESTful APIs - Thực hành: Ứng dụng viết website bán hàng trực tuyến Thời gian thực hiên : 03.2020 – 7.2020 Chữ ký sinh viên : Chữ ký sinh viên : TRƯỞNG KHOA CNTT (Ký ghi rõ họ tên) TP.HCM, Ngày Tháng năm 2020 GIẢNG VIÊN HƯỚNG DẪN (Ký ghi rõ họ tên) Kế hoạch thực STT Ngày Nhiệm vụ (Công việc dự kiến) Sản phẩm Tuần - Xác định chức website phác thảo ý tưởng - Prototype workflows - Tham khảo số website website đề tài có Tuần - Tìm hiểu MySQL, FireBase - Cơ sở liệu (.sql) - Thiết kế sở liệu - Thêm sở liệu - Tìm hiểu thành Spring: Spring JPA, Spring Security, Rest API Tuần 3,4 - Tìm hiểu ReactJS (Hooks) - Xây dựng chức lấy Sản Phẩm, Sản phẩm mới, Danh mục sản phẩm, Chi tiết sản phẩm - Tìm hiểu Google, Facebook Authentication, JWT Xây dựng chức Tài khoản, Đăng nhập, Đăng ký, Đổi mật - Xây dựng chức Giỏ hàng local Storage (có thể tăng số lượng, xóa sản phẩm) - Cơ hoàn thành chức Tài khoản - Có chức giở hàng - Xây dựng chức Cập nhập địa chỉ, số điện thoại giao hàng - Tìm hiểu Spring Email, xây dựng chức gửi Email thông báo cho User đặt hàng thành cơng - Upload Image lên FireBase - Cơ hồn thành chức cho phép User cập nhập địa chỉ, số điện thoại giao hàng - Cơ hoàn thành chức gửi Email thông báo cho User - Upload hình ảnh FireBase Tuần 5,6,7,8 Tuần 9,10,11 - Cơ sở liệu đầy đủ - UI ứng dụng - Cơ hoàn thành chức lấy Sản phẩm, Sản phẩm mới, Danh mục sản phẩm, Chi tiết sản phẩm Ghi - Cơ hoàn thành chức cho Admin - Có địa cửa hàng - Website hoàn thành - Test case - Xây dựng chức thêm, sữa, xóa Danh mục, Sản phẩm, User cho Admin Tuần - Áp dụng Google Map để 12,13,14 tìm địa cửa hàng - Kiểm thử tồn chương trình Tuần 15 - Tổng hợp, viết báo cáo - Trao đổi với GVHD báo cáo chương trình - Báo cáo - Website kiểm thử sửa lỗi Tuần 16 - Hồn tất chương trình - Báo cáo hồn chỉnh Tp Hồ Chí Minh, ngày tháng năm 2019 Người viết đề cương (Ký ghi rõ họ tên) Giáo viên hướng dẫn (Ký ghi rõ họ tên) PHẦN MỞ ĐẦU Tính cấp thiết đề tài Cuộc cách mạng khoa học kỹ thuật đem lại chuyển biến mạnh mẽ toàn giới Với phát triển nhanh vũ bão Việc áp dụng công nghệ thông tin hoạt động kinh tế đem lại lợi ích to lớn cho tồn xã hội Cùng với phát triển cơng nghệ thơng tin Thương mại điện tử trở thành lĩnh vực hoạt động kinh tế khơng cịn xa lạ với nhiều quốc gia toàn giới Con người tiết kiệm thời gian, công sức, tiền bạc việc mua sắm giao dịch kinh tế so với trước Việc áp dụng thương mại điện tử hoạt động kinh doanh xu tất yếu thời đại Và Việt Nam – đất nước phát triển trình hội nhập khơng nằm ngồi xu hướng phát triển Tuy vấn đề mẻ thu hút quan tâm doanh nghiệp nước muốn tìm hiểu áp dụng từ lợi ích to lớn mà mang lại Cơ hội có, khó khăn doanh nghiệp có thương mại điện tử thực cách mang phương thức bán hang mà biết cách áp dụng doanh nghiệp thành cơng mong đợi việc đưa sản phẩm đến tay người tiêu dùng Trong năm gần đây, kinh tế Việt Nam hội nhập vào kinh tế giới với phát triển tương đối ổn định Thu nhập trung bình người dân Việt Nam dần đuợc cải thiện Với điều kiện thuận lợi nhu cầu tiêu dùng người dân ngày tăng, đòi hỏi hình thức phục vụ, tiện lợi mua bán toán người dân Việt Nam ý đến Đi xu đó, bán hàng qua mạng giải pháp hoàn toàn phù hợp với đòi hỏi người tiêu dùng.Với mạnh mình, bán hàng qua mạng trở thành hình thức bán hàng phổ biến giới 4.1.26.1 Thiết kế giao diện 4.1.26.2 Danh sách xử lý Bảng 58 Danh sách xử lý xem cửa hàng map STT Tên xử lý Điều kiện gọi thực Xem địa cửa hàng Nhấn vào (1) Xem chi tiết tên cửa hàng vị trí Nhấn vào (2) 4.1.27 Trang thơng tin người dùng 4.1.27.1 Thiết kế giao diện Ghi chú 4.1.27.2 Danh sách xử lý Bảng 59 Danh sách xử lý xem cửa hàng map STT Tên xử lý Điều kiện gọi thực Xem địa cửa hàng Nhấn vào (1) Xem chi tiết tên cửa hàng vị trí 4.1.28 Trang qt mã QR 4.1.28.1 Thiết kế giao diện 4.1.28.2 Danh sách xử lý Nhấn vào (2) Ghi chú Bảng 60 Danh sách xử lý xem cửa hàng map STT Tên xử lý Điều kiện gọi thực Xem địa cửa hàng Nhấn vào (1) Xem chi tiết tên cửa hàng vị trí Nhấn vào (2) 4.2.Trích dẫn thuật tốn hay - Thuật toán gửi Mail xác nhận đơn hàng : Hình 79 Thuật tốn Send Email - Config cho Firebase cho ReactJS Ghi chú Hình 80 Config Firebase - Upload Image lên Firebase Hình 81 Upload Image to Firebase - Tích hợp Google Map : Hình 82 Tích hợp Google Map CHƯƠNG 5: CÀI ĐẶT VÀ KIỂM THỬ 5.1 SƠ ĐỒ LỚP 5.2 Cài đặt - Cài đặt java JDK 1.8 trở lên: Link: https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads2133151.html - Cài đặt node.JS: Link: https://nodejs.org/en/ - Thêm thư viện datatable vào front-end hổ trợ giao diện phân trang search table:  npm install bootstrap@4.0.0-beta.2 save save-exact  npm install datatables.net –save  npm install datatables.net-bs4 –save  npm install jquery –save  npm install @types/jquery save-de - Thêm thư viện Ckeditor vào front-end hổ trợ viết văn bản: npm i -S ngx-ckeditor - Thêm thư viên moment vào front-end hổ trợ định dạng ngày tháng: npm install moment save 5.3 Kiểm thử 5.3.1 Kế hoạch kiểm thử Nhận dạng chiến lược để kiểm tra đảm bảo sản phẩm thỏa mãn đặc tả thiết kế, yêu cầu phần mềm khách hàng Ngoài nhận dạng tính chất, mức độ rủi ro, yếu tố bất ngờ để chọn phượng pháp kiểm thử hợp lý Hiệu chỉnh suốt chu kỳ kiểm thử để phản ánh thay đổi Nhóm dựa vào testcase viết để phân chia công việc thành viên Và trình kiểm thử dựa vào mẫu excel có sẵn, người tester điền tên testcase vào, quy trình thực kết nhận pass hay fail Chuẩn bị kế hoạch theo dõi, báo cáo, sửa lỗi kiểm thử không đạt yêu cầu Với kết nhận được, nhóm phân chia lỗi cấp độ nghiêm trọng định phân chia công việc cho thành viên tiến hành sửa lỗi Các lỗi nghiêm trọng ưu tiên sửa trước Và trình lặp lặp lại chương trình hồn thiện, khơng cịn lỗi Hình 83 Mẫu testplan Hình 84 Mẫu testcase cover Hình 85 Mẫu testcase chi tiết Hình 86 Mẫu báo cáo TestCase 5.3.3 Tiến hành kiểm thử 5.3.2 Quy trình kiểm thử Quy trình kiểm thử phần mềm thực theo trình tự bước sau: Hình 87 Quy trình kiểm thử  Phân tích u cầu – Analysis Requirement Đọc thật kỹ nắm rõ yêu cầu đặt phần mềm chuẩn bị lập kế hoạch kiểm thử để đảm bảo testcase bao trùm trường hợp lỗi xảy  Lập kế hoạch kiểm thử - Test Planning Xác định phạm vi kiểm thử, chiến lược kiểm thử Sẽ sử dụng loại test nào? Test phạm vi, vấn đề nào? Như đạt? Là lỗi? Ngày bắt đầu kiểm thử? Nhận dạng, xác định rủi ro trình kiểm thử kế hoạch đối phó  Phát triển kiểm thử - Testcase Development Thiết kế danh sách testcase từ yêu cầu chức phi chức theo kế hoạch kiểm thử làm trước Đảm bảo testcase bao phủ yêu cầu Danh sách testcase kiểm định đánh giá lại nhà phân tích nghiệp vụ (Business Analyst) Các đánh giá trả lại cho nhóm tester để tiến hành điều chỉnh, bổ sung cần thiết Nhóm tester tiến hành điều chỉnh testcase  Thực thi kiểm thử - Test Execution Khi testcase phê duyệt, phần mềm đáp ứng đầy đủ tiến hành thực kiểm thử theo testcase làm trước Lưu lại kết trình thực thi kiểm thử  Báo cáo kiểm thử - Test Report Các tester chạy testcase, gặp testcase không pass phải ghi lại Với trường hợp test thất bại, việc ghi chép liệu, tester phải chụp ảnh hình để làm chứng lỗi Viết báo cáo lỗi tìm được, tạo bảng tổng kết đánh giá hoạt động kiểm lỗi Xác định testcase có đạt tiêu chí thành cơng hay khơng? Hồn thành hay chưa? Tester phải liên tục trì báo cáo tài liệu lưu vết trình thực kiểm thử  Phân tích kết kiểm thử - Test Result Analysis Phân tích kết báo cáo kiểm thử Nếu có testcase lỗi tiến hành sửa lỗi Có thể tiến hành chỉnh sửa bổ sung testcase  Kiểm thử lại lỗi – Repeat Testing Tiến hành thực lại kiểm thử lỗi tìm trước testcase phát sinh Nếu lỗi lại thực kiểm thử lại khơng tìm thấy lỗi  Kết thúc kiểm thử - Finish Testing Khi tất testcase pass, khơng cịn testcase phát sinh, thỏa mãn yêu cầu phần mềm Thì trình kiểm thử kết thúc KẾT LUẬN NHỮNG KẾT QUẢ ĐẠT ĐƯỢC Tuy thời gian thực đề tài khơng thực dài nhóm tích lũy nhiều kinh nghiệm quý báu làm hành trang cho sau Nhờ giúp đỡ nhiệt tình Giáo viên hướng dẫn, Thầy Cô môn q trình học tập với cố gắng, nhóm đạt điểm đáng ý:  Xây dựng thành công website Thương mại điện tử sử dụng Spring boot, ReactJS, dùng sở liệu MySQL kết hợp với Firebase, tích hợp thêm Google Map  Đáp ứng thực yêu cầu công việc giao hạn  Nâng cao khả nghiên cứu, bổ sung kiến thức công nghệ NHỮNG KHÓ KHĂN VÀ CÁCH KHẮC PHỤC KHI THỰC HIỆN ĐỀ TÀI 1.1 Khó khăn: Khó khăn việc thiết kế sở kiệu phân chia công việc cho hợp lý việc chúng em khơng thể tránh khỏi Ngồi công nghệ mà tụi em vừa tiếp xúc nên nhiều điều bở ngỡ mà cần tốn khoảng thời gian định để làm quen 1.2 Cách khắc phục: Bản thân trang bị kiến thức liên quan thiết kế website Đã có kinh nghiệm việc tìm hiểu, phân tích thiết kế hệ thống thơng tin Được giúp đỡ tận tình Giáo viên hướng dẫn: Nguyễn Minh Đạo trợ giúp kiến thức từ Internet Chúng em hiểu áp dụng thành công mản kiến thức spring boot AngularJS cách kết nối chúng lại với để thành website hoàn chỉnh ƯU ĐIỂM - Spring boot hỗ trợ hoàn hảo giúp cho thao tác trở nên minh bạch dễ dàng sử dụng - Hệ thống sở liệu xây dựng linh hoạt, ràng buộc chặt chẽ - Khi gặp lỗi thông báo cách rõ ràng, dễ hiểu - Chức hệ thống đáp ứng gần đầy đủ nhu cầu người dùng - Giao diện thông minh, dễ dàng xây dựng thân thiện với người dùng - Thường xuyên mua sản phẩm trang web thương mại điện tử khác giúp nhóm có nhìn tổng quan tiếp thu điểm mạnh trang web kia, qua áp dụng vào đề tài - Đề tài thực phần lớn máy tính giúp tiết kiệm chi phí đầu tư, lưu trữ thơng tin dễ dàng gọn nhẹ HẠN CHẾ - Còn thiếu số chức định - Hiện chưa áp dụng vào thực tế - Chưa thể sử dụng đầy đủ chức Google Map KINH NGHIỆM ĐẠT ĐƯỢC Sau trình làm việc chăm với hướng dẫn tận tâm thầy, tụi em hoàn thành website demo cơng nghệ nghiên cứu Và chúng em nắm rõ tảng cách vận hành công nghệ Cũng chúng em xây dựng chương trình hồn chỉnh có khả áp dụng vào thực tế HƯỚNG PHÁT TRIỂN TRONG TƯƠNG LAI: - Cãi thiện giao diện để ngày gần gũi dễ sử dụng cho người dùng người quản trị - Thêm chức để đáp ứng nhu cầu người dùng - Kiểm tra trình giao nhận hàng - Kiểm thử thành cách nghiêm túc chặt chẽ Tình cách để đưa sản phẩm áp dụng vào thực tế TÀI LIỆU THAM KHẢO [1] https://reactjs.org/ [2] https://reactjs.org/docs/hooks-intro.html [3] https://spring.io/ [4] https://firebase.google.com/docs/android/setup [5] https://o7planning.org/vi/10865/vi-du-crud-don-gian-voi-spring-mvc-restfulweb-service [6] https://medium.com/better-programming/building-a-spring-boot-rest-api-part-iiiintegrating-mysql-database-and-jpa-81391404046a [7] https://www.callicoder.com/spring-boot-spring-security-jwt-mysql-react-apppart-2/ [8] https://dzone.com/articles/secure-spring-rest-with-spring-security-and-oauth2 [9] https://material-ui.com/ [10] https://ant.design/docs/react/introduce [11] https://www.robinwieruch.de/react-hooks-fetch-data ... Firebase, MySQL Xây dựng website bán hàng trực tuyến Nội dung thực : - Lý thuyết: Tìm hiểu Spring Boot, Reactjs, Google Firebase, MySQL, RESTful APIs - Thực hành: Ứng dụng viết website bán hàng trực... tiện lợi mua bán toán người dân Việt Nam ý đến Đi xu đó, bán hàng qua mạng giải pháp hồn tồn phù hợp với địi hỏi người tiêu dùng.Với mạnh mình, bán hàng qua mạng trở thành hình thức bán hàng phổ... chiếm 51% sàn thương mại điện tử chiếm 20% Website Facebook kênh bán hàng shop online Nhận thực tiềm phát triển nhóm mạnh dạn chọn việc xây dựng website bán hàng Mục đích đề tài Tìm hiểu tài liệu