MỞ ĐẦU 1.1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI Trong bối cảnh khoa học và công nghệ đang phát triển với tốc độ nhanh chóng, đặc biệt là lĩnh vực công nghệ thông tin, việc nghiên cứu và triển khai đề tài "Xây dựng website bán hàng điện thoại di động" trở nên cấp thiết. Công nghệ thông tin đã và đang đóng vai trò quan trọng, không thể phủ nhận, trong mọi lĩnh vực của đời sống và nghiên cứu khoa học. Công nghệ website, như một phần của lĩnh vực này, đang trở thành xu hướng phổ biến với nhiều ưu điểm đáng kể. Việc xây dựng một trang web để bán điện thoại di động không chỉ giúp quảng cáo và phổ biến tên tuổi doanh nghiệp trên môi trường mạng toàn cầu mà còn mang lại nhiều lợi ích khác như giảm chi phí và tăng khả năng nhận phản hồi từ khách hàng.
Đối với doanh nghiệp bán điện thoại di động, việc có một website bán hàng không chỉ là cách để cung cấp cho khách hàng những lựa chọn điện thoại và tiện lợi, mà còn là một cách hiệu quả để quản lý thông tin sản phẩm. Khả năng hiển thị chi tiết và rõ ràng về sản phẩm cùng với giá niêm yết giúp khách hàng có cái nhìn tổng quát, đồng thời giúp họ đưa ra quyết định mua sắm dễ dàng hơn. Do đó, đề tài này không chỉ đáp ứng nhu cầu thực tế của doanh nghiệp mà còn phản ánh sự chủ động, linh hoạt của người nghiên cứu trong việc áp dụng công nghệ mới nhằm tối ưu hóa quản lý kinh doanh và tạo ra trải nghiệm mua sắm thuận lợi cho khách hàng.2 MỤC ĐÍCH CỦA ĐỀ TÀI Xây dựng một trang web bán điện thoại di động vừa và nhỏ với mục đích hỗ trợ công ty hoặc doanh nghiệp phát triển. Mục đích của website bán hàng điện thoại là: - Tăng chuyển đổi thành khách hàng tiềm năng, hấp dẫn nhiều khách hàng mới.
- Giao tiếp thuận lợi giữa khách hàng mua điện thoại và cửa hàng. - Khách hàng có thể mua sản phẩm với vài thao tác cơ bản trên website mà không cần đến tận nơi để mua hàng. - Cung cấp các thông tin của khách hàng về sản phẩm, đối tác, liên hệ cửa hàng, công ty. - Trong đề tài này, em sẽ tìm hiểu và áp dụng những công nghệ sau : 8 o Front-end: ReactJS o Back-end: Spring FrameWork o Database: MySQL o Tích hợp các API bên ngoài như VnPay API, Cloudinary API, Tawk,… o Một số công nghệ hỗ trợ khác như: Bootstrap,… 1.3 ĐỐI TƯỢNG NGHIÊN CỨU - Đối với đề tài này, đối tượng nghiên cứu dựa trên nhu cầu sử dụng của các cửa hàng bán điện thoại di động vừa và nhỏ, giúp các tổ chức quản lý sản phẩm, doanh thu và tiếp cận với khách hàng một cách dể dàng, hiệu quả, nhanh chóng.
Đồng thời giúp cửa hàng đưa các thông tin khuyến mãi một cách nhanh chóng đến khách hàng mà không cần gặp trực tiếp để quảng cáo. Website có có những tính năng cơ bản như, xem chi tiết sản phẩm, mua hàng, thanh toán, quản lý người dùng, thống kê doanh thu. - Các công nghệ mới: Spring framework, ReactJS,. - Các mô hình: Mô hình ba lớp , Spring JWT.4 PHẠM VI NGHIÊN CỨU VÀ PHƯƠNG PHÁP NGHIÊN CỨU - Phạm vi nghiên cứu: Tiểu luận sẽ tập trung trình bày kết quả nghiên cứu của nhóm về Spring FrameWork và ReactJS.
Mỗi phần nhóm sẽ giới thiệu sơ lược và trình bày những nội dung cơ bản nhất, những điểm mạnh hay lợi ích mà nó mang lại cho các nhà phát triển phần mềm. Sau khi tìm hiểu nhóm sẽ vận dụng kết quả tìm hiểu được vào việc xây dựng một website nhằm mục đích minh họa cho phần lý thuyết đã trình bày. - Phương pháp nghiên cứu Khảo sát hiện trạng các website bán hàng online hiện có. Thu thập và tìm hiểu thông tin từ mạng internet.
Phân tích và xây dựng, thiết kế hệ thống theo yêu cầu phù hợp của người dùng. Nghiên cứu các công cụ và thuộc tính để thiết kế và xây dựng.5 KHẢO SÁT MỘT SỐ WEB TƯƠNG TỰ 1.1 Di động việt: https://didongviet. 1 Website Didongviet + Ưu điểm Bố cục dễ nhìn Màu sắc giản dị, hài hòa, dễ nhìn Dễ sử dụng + Nhược điểm Tốc độ load còn chậm 10 1.2 CellphoneS: https://cellphones. 2 Website CellphoneS + Ưu điểm Thông tin liên hệ nhiều hình thức.
Giao diện đẹp, dễ nhìn. +Nhược điểm Quảng cáo quá nhiều. Một số sản phẩm giảm giá chưa rõ ràng.3 Shopee: https://banhang. 3 Website quản lý bán hàng của Shopee - Ưu điểm: + Giao diện dễ sử dụng.
+ Phân loại, sắp sếp sản phẩm hợp lý. + Đầy đủ các tính năng cho người bán. - Nhược điểm: Không.4 Haravan: https://support.com/support/solutions/ Hình P1. 4 Website quản lý bán hàng của Haravan + Ưu điểm Tone màu dễ nhìn , dễ sử dụng Tốc độ cập nhật dữ liệu cực kì nhanh.
Giao diện đẹp, đơn giản , dễ sử dụng + Nhược điểm: Chương trình khuyến mãi gây khó hiểu cho người tham khảo. 13 PHẦN 2: NỘI DUNG CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 1.1 MÔ HÌNH THIẾT KẾ VÀ CÔNG NGHỆ SỬ DỤNG Spring Boot Server Hình 1. 1 Mô hình hoạt động của Spring Boot Server Phương thức hoạt động của Spring Boot Server (Back-end): Khi nhận được request (yêu cầu) từ ReactJS (Front End) , tương ứng với Rest Controller được xây dựng bởi Spring Boot. Spring Boot map dữ liệu được gửi theo request thành các class tương ứng với các Form Object hoặc DTO(Data Tranform Object).
Sau đó controller gọi đến service (Business) để tiếp tục xử lý Object và gọi Spring Data JPA để thực hiện các thao tác với cơ sở dữ liệu(MySQL). Sau khi thực hiện truy vấn và lấy được dữ liệu thì dữ liệu sẽ được trả lại service, service trả đến controller. Và cuối cùng sẽ trả về dữ liệu dạng JSON cho ReactJS. ReactJS sẽ nhận lấy dữ liệu từ Spring Boot và render ra giao diện website.
ReactJS Client 14 Hình 1. 2 Mô hình hoạt động của ReactJS Client Phương thức hoạt động của ReactJS Client (front-end) : Như hình ảnh minh họa ở trên thì Service là nhưng chứa những phương thức gọi đến API thông qua axios. Trong các components (function component) hiển thị giao diện và gọi đến các phương thức đã tạo sẵn ở Service. Route là những đường dẫn, điều hướng trong trong web.
Khái quát về công nghệ ứng dụng sử dụng trong đề tài Java Spring là một trong những công nghệ phổ biến nhất hiện nay để dùng cho lập tình Back End cho website và server. Công nghệ đang hot hiện nay không thể không nói đến spring boot. Spring Boot được đóng gói với rất nhiều thư viện phụ thuộc các module nền tảng của Spring Framework nhưng được giảm thiểu đi các mã nguồn dài dòng, phức tạp nhằm cung cấp sự thuận tiện và phù hợp với từng mục đích khi phát triển ứng dụng. Spring Boot Framework được sử dụng rộng rãi để phát triển các REST APIs.
ReactJS sử dụng để xây dựng giao diện cho web theo đúng xu hướng Single Page Applications (Ứng dụng nhiều trang). ReactJS cho phép nhúng code Html vào code Javascript nhờ vào JSX để xây dựng giao diện, với việc sử dụng ngôn ngữ Javascript giúp cho việc tiếp cận cũng như triển khai một cách dễ dàng hơn. Trong khi những framework khác cố gắng hướng đến một mô hình MVC hoàn thiện thì React nổi bật với sự đơn giản và dễ dàng phối hợp với những thư viện Javascript khác. Nó cho phép những nhà phát triển website tạo ra giao diện người dung nhanh chóng, đặc biệt là tốc độ nhanh và nguồn tài nguyên phong phú trên mạng.
Spring boot dùng ở phần Back End để viết nên API. Và React dùng ở Front End, nhận các 15 API mà Back End trả về để hiển thị dữ liệu lên giao diện người dùng.1 Lịch sử Vào tháng 10 năm 2012, Mike Youngstrom đã tạo một yêu cầu tính năng trong spring yêu cầu hỗ trợ cho các kiến trúc ứng dụng web không chứa vùng chứa trong spring framework. Yêu cầu này dẫn đến sự phát triển của dự án spring boot bắt đầu vào khoảng đầu năm 2013. Vào tháng 4 năm 2014, phiên bản spring boot 1.0 được phát hành.
Kể từ đó cho đến nay rất nhiều phiên bản spring boot đã ra đời. Một số phiên bản mới nhất hiện nay là v2. và mới nhất gần đây nhất là v2.2 Giới thiệu Spring là một Framwork nền tảng Java nó được tạo ra để thay thế cho các công nghệ cũ cồng kềnh như EJB, dựa trên 2 nguyên tắc chính là Dependency Injection và Aspect Oriented Programing và dựa trên mô hình sử dụng POJO Spring trở nên gon nhẹ và linh hoạt cho các dự án. Spring Framework cung cấp rất nhiều tính năng giúp xây dựng sản phẩm một cách thuận tiện và nhanh chóng hơn.
Nó đóng gói một tính năng đặc biệt như Dependency Injecttion và các module như spring jdbc, spring mvc, spring aop,. Một điểm hạn chế với Spring là các bước cấu hình rất phức tạp, các bạn có thể mất hàng tá thời gian để ứng dụng có thể chạy được. Với những hạn chế của spring, spring boot ra đời. Nó cung cấp giao diện (interface) và khả năng phát triển các ứng dụng độc lập với rất ít các bước cấu hình rườm rà hoặc gần như bằng không.
Ta có thể nói Spring boot là một dự án bổ sung của Spring nhằm đơn giản hóa việc phát triển ứng dụng Spring. Trong Spring boot, IoC Container có trọng lượng nhẹ. Điều này có lợi cho việc phát triển và triển khai các ứng dụng trên các máy tính có bộ nhớ và tài nguyên CPU hạn chế. Spring boot hỗ trợ cấu hình tự động cho các chức năng của spring, cung cấp số liệu, kiểm tra và cho phép cấu hình ứng dụng từ bên ngoài.
Spring Boot JPA là một phần trong hệ sinh thái Spring Data, nó tạo ra một layer ở giữa tầng service và database, giúp chúng ta thao tác với database một cách dễ dàng hơn, tự động config và giảm thiểu code thừa thãi. Để sử dụng spring boot Jpa chúng ta cần tạo class và extend interface JpaRepository<T,ID> 16 Hình 1. 3 Sử dụng Spring Boot JPA Khi đó sẽ tận dụng được những hàm có sẵn giúp tiết kiệm thời gian, giảm thiểu code thừa thải và tránh được những sai sót khi tự xây dựng hàm.3 Phát triển ứng dụng web với spring boot Cấu trúc source code của Spring Boot được dựa trên hai mô hình là mô hình MVC và mô hình 3 lớp. Mô hình ba lớp (three tier) Đây là mô hình tổ chức source code rất phổ biến trong Spring Boot.
Cụ thể, ứng dụng được chia làm 3 tầng (tier hoặc layer) như sau: Presentation layer: tầng này tương tác với người dùng, bằng View, Controller (trong MVC) hoặc API (nếu có).