(Đồ án tốt nghiệp) Xây dụng website bán hàng

(Đồ án tốt nghiệp) Xây dụng website bán hàng(Đồ án tốt nghiệp) Xây dụng website bán hàng(Đồ án tốt nghiệp) Xây dụng website bán hàng(Đồ án tốt nghiệp) Xây dụng website bán hàng(Đồ án tốt nghiệp) Xây dụng website bán hàng(Đồ án tốt nghiệp) Xây dụng website bán hàng(Đồ án tốt nghiệp) Xây dụng website bán hàng(Đồ án tốt nghiệp) Xây dụng website bán hàng(Đồ án tốt nghiệp) Xây dụng website bán hàng(Đồ án tốt nghiệp) Xây dụng website bán hàng(Đồ án tốt nghiệp) Xây dụng website bán hàng(Đồ án tốt nghiệp) Xây dụng website bán hàng(Đồ án tốt nghiệp) Xây dụng website bán hàng(Đồ án tốt nghiệp) Xây dụng website bán hàng(Đồ án tốt nghiệp) Xây dụng website bán hàng(Đồ án tốt nghiệp) Xây dụng website bán hàng(Đồ án tốt nghiệp) Xây dụng website bán hàng(Đồ án tốt nghiệp) Xây dụng website bán hàng

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 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 Trong khoảng hai đến ba năm trở lại đây, bán hàng qua mạng Việt Nam có phát triển vượt bậc, thể chất lượng bán hàng cải thiện, quan tâm đến hình thức mua bán người tiêu dùng ngày lớn Hiện ngành thương mại điện tử Việt Nam có mức tăng trưởng vào khoảng 25% lượng doanh nghiệp đầu tư lĩnh vực ngày nhiều Hàng loạt website thương mại điện tử mọc nhiều Gần đây, báo cáo nghiên cứu CBRE Việt Nam, thực thông qua ghi nhận ý kiến khoảng 1.000 người TP.HCM Hà Nội, cho thấy: 25% số khách hàng khảo sát dự định giảm tần suất mua sắm cửa hàng thực tế, 45 - 50% số người hỏi cho họ mua sắm trực tuyến thường xuyên tương lai Theo thống kê có từ 55% chủ shop bán hàng online tham gia đánh giá, website xếp facebook 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 Spring, React JS , Rest API, android thành phần Spring React Phân tích, thiết kế xây dựng website Thương mại điện tử với số chức sau: Đối với Guest:  Đăng nhập (JWT, Google, Facebook), đăng ký tài khoản, quên mật  Xem danh mục sản phẩm  Xem sản phẩm, tìm kiếm sản phẩm, tìm theo danh mục sản phẩm  Xem chi tiết sản phẩm  Xem vị trí chi nhánh cửa hàng toàn quốc  Xem địa cửa hàng Đối với User:  Xem thông tin tài khoản  Đặt lại mật khẩu, cập nhập Email số điện thoại  Xem danh mục sản phẩm  Xem sản phẩm, tìm kiếm sản phẩm, tìm theo danh mục sản phẩm  Xem chi tiết sản phẩm  Xem vị trí chi nhánh cửa hàng toàn quốc  Thêm sản phẩm vào giỏ hàng  Xóa sản phẩm giỏ hàng  Mua sản phẩm cần mua  Xem, viết bình luận cho sản phẩm Đối với Admin:  Xem thông tin tài khoản  Đặt lại mật khẩu, cập nhập Email số điện thoại  Xem danh sách User  Thêm, cập nhập, xóa tài khoản User  Xem danh sách danh mục  Thêm, cập nhập, xóa danh mục sản phẩm  Xem danh sách sản phẩm  Thêm, cập nhập, xóa sản phẩm  Quản lý đơn đặt hàng  Cập nhập tình trạng giao hàng  Thống kê chi tiết đơn hàng  Xem, viết bình luận cho sản phẩm Cách tiếp cận phương pháp nghiên cứu 3.1 Đối tượng nghiên cứu Website Thương mại điện tử áp dụng dành cho tất người độ tuổi có nhu cầu mua sắm thơng qua Internet 3.2 Phạm vi nghiên cứu  Tìm hiểu website Thương mại điện tử khác  Tìm hiểu thành phần Spring (Hibernate, Spring JPA, Spring security, Lombok, Rest API…) sử dụng đề tài  Tìm hiểu annotation spring boot (Repository, Service, RestController, Entity, …)  Tìm hiểu ReactJS, Material UI, Ant – design, Bootstrap  Tìm hiểu UI/UX cải thiện trải nghiệm người dùng, giúp người dùng sử dụng website cách dễ dàng thoải mái thuận tiện  Xây dựng website Thương mại điện tử phù hợp với đối tượng người dùng 3.3 Phương pháp nghiên cứu  Phương pháp tổng hợp lý thuyết: Nghiên cứu tìm hiểu tài liệu, website liên quan đến cơng nghệ tìm hiểu  Phương pháp chuyên gia: Tham khảo ý kiến Thầy hướng dẫn anh, chị bạn bè có kinh nghiệm liên quan đến vấn đề tiểu luận để tạo tính xác khoa học đề tài  Phương pháp mơ hình hóa: Mơ ứng dụng từ bước thiết kế cài đặt kết thành phẩm ứng dụng Phân tích website có liên quan Hầu hết website Thương mại điện tử mắt có nhiều tính mới, bố cục trang xếp hợp lý, sản phẩm thể rõ ràng Tuy nhiên số website có nhược điểm mà nhóm em tổng hợp được:  Một số website có giao diện chưa thu hút người dùng  Một số website rõ chi tiết sản phẩm, khơng có giỏ hàng để chứa sản phẩm cần mua, … Kết dự kiến đạt  Xây dựng sở liệu rõ ràng, liên kết chặt chẽ  Xây dựng giao diện đơn giản, dễ sử dụng  Xây dựng chức nêu phần Mục đích đề tài, đáp ứng nhu cầu đề Ý nghĩa khoa học thực tiễn Đề tài hướng đến khả tiếp thu, nâng cao kỹ lập trình, nghiên cứu cơng nghệ hết đáp ứng nhu cầu nhiều người dùng sử dụng Internet để mua sản phẩm cách tiện lợi nhà, tiết kiệm thời gian, biết giá để chọn sản phẩm ưng ý… 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 quét 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 tố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 Ngồ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à q 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 yê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 q 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 q 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 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 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