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

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 ngồi 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 ý… PHẦN NỘI DUNG CHƯƠNG I: CƠ SỞ LÝ THUYẾT 1.1 TỔNG QUAN SPRING FRAMEWORK Sơ lược Spring Spring framework phát triển ứng dụng java sử dụng phổ biến Giúp tạo ứng dụng có hiệu cao, dể kiểm thử, dể sử dụng lại code Spring có kích thước nhỏ, version khoảng 2MB hoạt động cách suốt với lập trình viên Spring có mã nguồn mở, phát triển chia sẻ có cộng đồng người dùng lớn Được xây dựng dựa nguyên tắc design là: Dependency, Injection Aspect Oriendted Programming Spring sử dụng để phát triển Java, Desktop, ứng dụng Mobile, Java web Mục tiêu giúp phát triển ứng dụng J2EE cách dể dàng dựa mơ hình POJO (Plain Old Java Object) Giới thiệu Spring Framework Spring FrameWork khung ứng dụng chứa đảo ngược điều khiển cho tảng JAVA Chức khung áp dụng cho ứng dụng JAVA Spring Framework trở nên phổ biến cộng đồng JAVA phương án song hành, thay thế, chí bổ sung cho mơ hình Enterprise JavaBeans (EJB) Spring Framework phát triển ứng dụng Java sử dụng hàng triệu lập trình viên Nó giúp tạo ứng dụng có hiệu cao, dễ kiểm thử, sử dụng lại code… Lịch sử phát triển Spring Framework Vào năm 2002, Spring Framework phát hành phiên Rod Johnson Phần viết vào năm 2000 Vào năm 2001, mơ hình lập trình cho ứng dụng web đại đa số sử dụng JAVA Servlet API Enterprise JavaBeans cung cấp Năm 2003 thành lập dự án Sourceforge để phát triển Spring Sau Khi phát triên nàn tảng ban đầu năm họ phát triển phiên (1.0) vào tháng năm 2004 Kiến trúc Spring Framework mắt lần vào tháng năm 2003 giấy phép Apache – phiên 2.0 Phiên 1.0 đánh dấu mốc thành đạt xuất vào tháng năm 2004 tiếp tháng năm 2004 tháng năm 2005 Spring Framework làm cho kỹ thuật trước chưa trở thành kỹ thuật nhiều người ưa chuộng thời gian ngắn ngủi Một kỹ thuật tiếng kỹ thuật “Đảo ngược quyền điều khiển” Năm 2005 cho thấy mức độ hưởng ứng nâng cao năm trước, nguyên nhân phiên giới thiệu với cột mốc đáng kể tính thêm vào Diễn đàn Spring (Spring Forum) đời cuối năm 2004 góp phần khơng nhỏ việc nâng cao tính phổ biến framework từ đến sinh trưởng phát triển trờ thành nguồn thông tin quan trọng, giúp đỡ cho người sử dụng Năm 2005 cho thấy mức độ hưởng ứng nâng cao năm trước, nguyên nhân phiên giới thiệu với cột mốc đáng kể tính thêm vào Diễn đàn Spring (Spring Forum) đời cuối năm 2004 góp phần khơng nhỏ việc nâng cao tính phổ biến framework từ đến sinh trưởng phát triển trờ thành nguồn thông tin quan trọng, giúp đỡ cho người sử dụng Hình Logo Spring Framework Đặc điểm Spring Framework Spring chia làm nhiều module khác nhau, tùy theo mục đich phát triển mà dùng cách module Dưới kiến trúc tổng thể Spring Framework Hình 2.Hệ thống Spring Framework Hai phần chủ chốt tảng tạo nên sức mạnh Spring Framework IoC DI  Test: Tầng cung cấp khả hỗ trợ kiểm thử với JUnit TestNG  Spring core Container Bao gồm module spring core, beans, context expression languate (EL)  Spring core, bean cung cấp tính IOC Dependency Injection  Spring Context hỗ trợ đa ngôn ngữ (internationalization), tính Java EE EJB, JMX  Expression Language mở rộng từ Expresion Language JSP Nó cung cấp hỗ trợ việc setting/getting giá trị, method cải tiến cho phép truy cập collections, index, toán tử logic…  AOP, Aspect and Instrumentation Những module hỗ trợ cài đặt lập trình hướng khía cạnh (Aspect Oriented Programming), hỗ trợ tích hợp với AspectJ  Data Access / Integration Nhóm bao gồm JDBC, ORM, OXM, JMS module Transaction Những module cung cấp khả giao tiếp với database  Web Nhóm gồm Web, Web-Servlet… hỗ trợ việc tạo ứng dụng web Ưu nhược điểm Spring Framework Ưu điểm  Spring cho phép lập trình viên sử dụng POJOs Việc sử dụng POJOs giúp bạn làm việc với EJB, ứng dụng, luồng chạy, cấu hình… đơn giản nhiều  Spring tổ chức theo kiểu module Số lượng gói lớp nhiều, bạn quan tâm đến bạn cần khơng cần quan tâm đến phần lại  Spring hổ trợ sử dụng nhiều công nghệ nhu ORM Framework, logging framework, JEE, thư viện tạo lịch trình  Module Web Spring thiết kế theo mơ hình MVC nên cung cấp đầy đủ tính giúp thay web framework khác Struts Nhược điểm  Các nhà phát triển phải tham khảo nhiều tập tin theo cách hệ thống thực  Dependency injection thường đòi hỏi nhiều dòng code để thực code thừa kế  Dependency injection tang khớp nối cách yêu cầu người sử dụng hệ thống để cung cấp cho nhu cầu hệ thống  Spring đơn giản hóa việc sử dụng Dependency Injection cách cung cấp cấu hình quản lý tài liệu tham khảo cho đôi tượng tạo Một số dự án khác Spring Framework Cũng dựa nguyên tắc thiết kế spring core Spring phát triển nhiều project như:  Spring MVC Spring MVC thiết kế dành cho việc xây dựng ứng dụng tảng web  Spring Security Cung cấp chế xác thực (authentication) phân quyền (authorization) cho ứng dụng bạn  Spring boot Spring Boot framework giúp phát triển chạy ứng dụng cách nhanh chóng  Spring Bacth Dự án giúp dễ dàng tạo lịch trình (scheduling) tiến trình (processing) cho công việc xử lý theo mẻ (batch job)  Spring Social 4.1.25 Đăng nhập App 4.1.25.1 Thiết kế giao diện 4.1.25.2 Danh sách xử lý Bảng 57 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.26 Trang chủ app Ghi chú 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 toá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 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à 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 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 q 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 ... 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... giúp, thông báo, kênh người bán  Nội dung: Website xây dựng nhằm giúp cho người dùng mua đặt hàng trực tuyến Người dùng tạo kênh bán hàng riêng Nhược điểm:  Số lượng hàng hóa trưng bày trang... sử dụng, có hỗ trợ người dùng thắc mắc  Đa dạng mặt hàng hóa chia loại hàng hóa hợp lý  Nội dung: Website xây dựng nhằm giúp cho người dùng mua hàng hóa nhanh tiện lợi tốn thời gian Giúp hàng