Chương 1. GIỚI THIỆU CHUNG. Lý do chọn đề tài. Tổng quan về chức năng.
Các khái niệm chính trong React (ReactJs). Cách hoạt động. Nhược điểm. Ưu điểm và Tại sao nên dùng ReactJs.
Các framework-package liên quan đến ReactJs. Nhược điểm của Spring Boot. Ưu điểm của Spring Boot. Các thư viện được sử dụng trong Spring Boot.
Xây dựng back-end cho đồ án bằng Spring Boot. Tổng quan Python. Độ phổ biến trong năm 2022. Ứng dụng của Python.
Nhược điểm. Frameworks và tools khác. Visual Studio Code. Microsoft SQL Server.
Ngôn ngữ Java. Ngôn ngữ thiết kế Web HTML-CSS-Javascript. XÂY DỰNG HỆ THỐNG. Xây dựng kiến trúc hệ thống.
Cơ sở dữ liệu. Thiết kế giao diện. Giao diện ứng dụng. Giao diện quản lý.
Kết quả đạt được. Nhược điểm và giải pháp.89 DANH MỤC HÌNH Hình 2-1 Mô hình DOM trong ứng dụng ReactJs_____________________4 Hình 2-2 Ví dụ về JSX__________________________________________5 Hình 2-3 Component___________________________________________6 Hình 2-4 Ví dụ props___________________________________________7 Hình 2-5 Component Lifecycle___________________________________8 Hình 2-6 Dữ liệu số người dùng các Framework____________________12 Hình 2-7 Ví dụ useState________________________________________13 Hình 2-8 Ví dụ useEffect_______________________________________13 Hình 2-9 Thiết lập một bộ chuyển trang bằng React Router____________15 Hình 2-10 Ví dụ về cách dùng useNavigate_________________________16 Hình 2-11 Ví dụ cách dùng useLocation___________________________16 Hình 2-12 Ví dụ cách lấy params_________________________________17 Hình 2-13 Cách dùng thẻ Link___________________________________18 Hình 2-14 Mô hình Redux______________________________________19 Hình 2-15 Các thành phần Slice, AsyncThunk trong ReduxToolkit______20 Hình 2-16 Hibernate: các hàm tương ứng sẽ có các anotation query và câu lệnh query tương ứng____________________________________________23 Hình 2-17 Ví dụ về việc sử dụng anotation_________________________24 Hình 2-18 Cấu trúc Backend đồ án.______________________________26 Hình 2-19 Python_____________________________________________28 Hình 2-20 Python Google Trend_________________________________29 Hình 2-21 Python TIOBE______________________________________29 Hình 2-22 Thư viện Python hỗ trợ Web____________________________30 Hình 2-23 Tổng quan ứng dụng Python____________________________30 Hình 2-24 Python và Machine Learning___________________________31 Hình 2-25 Jinja2 template______________________________________34 Hình 2-26 Cấu trúc Flask project_________________________________35 Hình 2-27 Flask Routing_______________________________________36 Hình 2-28 Flask static_________________________________________37 Hình 2-29 Flask secret key______________________________________37 Hình 2-30 Cấu trúc Flask API project_____________________________39 Hình 2-31 Khởi tạo Flask API Project_____________________________40 Hình 2-32 Ví dụ cho việc thực hiện API model______________________40 Hình 2-33 Load model mẫu_____________________________________41 Hình 2-34 Content – based ý tưởng_______________________________44 Hình 2-35 Collaborative – filtering ý tưởng________________________45 Hình 2-36 Intellij_____________________________________________46 Hình 2-37 Víual Studio Code____________________________________46 Hình 2-38 Postman____________________________________________47 Hình 2-39 SQL Server_________________________________________47 Hình 2-40 Github_____________________________________________48 Hình 2-41 Java_______________________________________________49 Hình 2-42 HTML-CSS-Javascript________________________________50 Hình 2-43 Bootstrap___________________________________________51 Hình 3-1 Sơ đồ kiến trúc hệ thống________________________________52 Hình 3-2 Sơ đồ use cases người dùng_____________________________53 Hình 3-3 Sơ đồ use cases hệ thống_______________________________54 Hình 3-4 Sơ đồ lớp____________________________________________55 Hình 3-5 Sơ đồ tuần tự đăng nhập________________________________56 Hình 3-6 Sơ đồ tuần tự đăng ký__________________________________57 Hình 3-7 Sơ đồ tuần tự chỉnh sửa thông tin_________________________58 Hình 3-8 Sơ đồ tuần tự xóa tài khoản_____________________________59 Hình 3-9 Sơ đồ tuần tự tạo tài khoản nhân viên______________________60 Hình 3-10 Sơ đồ tuần tự tạo phân loại_____________________________61 Hình 3-11 Sơ đồ tuần tự sửa phân loại_____________________________62 Hình 3-12 Sơ đồ tuần tự xóa phân loại____________________________63 Hình 3-13 Sơ đồ tuần tự tạo phim________________________________64 Hình 3-14 Sơ đồ tuần tự sửa thông tin phim________________________65 Hình 3-15 Sơ đồ tuần tự xóa phim________________________________66 Hình 3-16 Sơ đồ tuần tự mua hàng_______________________________67 Hình 3-17 Sơ đồ tuần tự tình trạng đơn hàng________________________68 Hình 3-18 Sơ đồ tuần tự thêm hàng vào giỏ________________________69 Hình 3-19 Sơ đồ tuần tự xóa hàng khỏi giỏ_________________________70 Hình 3-20 Sơ đồ Database______________________________________71 Hình 3-21 Trang chủ và slider___________________________________75 Hình 3-22 Giao diện thanh đầu trang______________________________75 Hình 3-23 Giao diện trang chủ với các phim bán chạy________________76 Hình 3-24 Trang chủ và các phim phổ biến_________________________76 Hình 3-25 Giao diện danh sách phim______________________________77 Hình 3-26 Giao diện chi tiết sản phẩm thông tin_____________________78 Hình 3-27 Giao diện chi tiết sản phẩm gợi_________________________79 Hình 3-28 Giao diện giỏ hàng___________________________________80 Hình 3-29 Giao diện thông tin khách______________________________80 Hình 3-30 Giao diện đặt hàng___________________________________81 Hình 3-31 Giao diện đăng nhập__________________________________82 Hình 3-32 Giao diện đăng ký____________________________________82 Hình 3-33 Dashboard 1________________________________________83 Hình 3-34 Dashboard 2________________________________________83 Hình 3-35 Dashboard 3________________________________________84 Hình 3-36 Giao diện sản phẩm___________________________________84 Hình 3-37 Giao diện tạo mới sản phẩm phim_______________________85 Hình 3-38 Giao diện chỉnh sửa sản phẩm__________________________85 Hình 3-39 Giao diện phân loại___________________________________86 Hình 3-40 Giao diện đơn hàng___________________________________86 Hình 3-41 Giao diện chi tiết đơn hàng_____________________________87 Hình 3-42 Giao diệ khách hàng__________________________________87 Hình 3-43 Giao diện nhân viên__________________________________88 Hình 3-44 Giao diện tạo nhân viên_______________________________88 DANH MỤC BẢNG DANH MỤC TỪ VIẾT TẮT Bảng 3-1 Users_______________________________________________72 Bảng 3-2 Roles_______________________________________________72 Bảng 3-3 Cart________________________________________________73 Bảng 3-4 CartInfo____________________________________________73 Bảng 3-5 Product_____________________________________________74 Bảng 3-6 Category____________________________________________75 TÓM TẮT ĐỒ ÁN Việc để tạo ra một trang Web bán hàng bắt mắt, tiện lợi cho người mua là một trong những vấn đề đang được quan tâm hàng đầu. Có rất nhiều cách để tạo ra một trang Web như thông qua các phần mềm thứ ba để tạo với những người thích thiết kế giao diện nhưng không có hiểu biết sâu rộng về lập trình hay lập trình với các ngôn ngữ, framework hỗ trợ phát triển ứng dụng Web : .NET, HTML-CSS, Javascript, Bootsrap, Vue.js, Angular… Trong đó nhóm đã chọn ReactJs cho phần thiết kế giao diện người dùng (front-end) và framework Java SpringBoot cho phần xử lý tác vụ logic, kết nối Database, để xây dựng một ứng dụng Web bán quần áo online. Ngoài ra nhóm còn kết hợp ứng dụng Machine Learning cho website thông qua việc sử dụng Framework Flask Python hỗ trợ cho model Recommender System qua API về Recommender System sẽ giúp tăng cao trải nghiệm người dùng với những khuyến nghị sản phẩm liên quan (nổi bật, mua nhiều,…) dựa trên CSDL về các đơn hàng, lịch sử mua hàng của người dùng khác.
Từ đó việc mua hàng của người dùng sẽ dễ dàng hơn trong việc chọn lựa cũng như giúp cửa hàng có thể tăng số lượng bán hàng và làm hài lòng khách hàng. GIỚI THIỆU CHUNG 1. Lý do chọn đề tài Với sự phát triển nhảy vọt của công nghệ thông tin hiện nay, Internet ngày càng giữ vai trò quan trọng trong các lĩnh vực khoa học kĩ thuật và đời sống. Internet là tập hợp kết nối giữa các máy tính, là một mạng máy tính toàn cầu mà bất kì ai cũng có thể truy cập bằng latop, PC, các thiết bị di dộng, thiết bị gia dụng thông minh,….
Vì thế cùng với sự lớn mạnh của Internet thì hàng loạt các sản phẩm mang tính thương mại ra đời với quy mô từ nhỏ đến lớn ở các ngành nghề, lĩnh vực liên quan và phổ biến,thông dụng ở mọi lĩnh vực khác. Internet đã tạo ra một cuộc cách mạng trao đổi thông tin trong mọi lĩnh vực văn hóa, y tế, xã hội, giáo dục,… nhờ đó góp phần thúc đẩy sự phát triển cảu thế giới. Trong đó nổi bật là các sản phẩm, thiết bị thương mại điện tử mà mọi người đều có thể sử dụng dễ dàng và hữu ích. Việc mua bán bây giờ không chỉ thông qua xem hàng – mua hàng trực tiếp mà còn có thể giao dịch qua các trang Web thương mại điện tử một cách tiện lợi nhưng vẫn đảm bảo được sự uy tín, chất lượng từ sản phẩm mà các doanh nghiệp, cửa hàng, siêu thị, cá nhân… cung cấp cho khách hàng cũng như sự hỗ trợ và chính sách bán hàng cần thiết.
Vì thế nhóm đã quyết định chọn đề tài đểt tạo nên một trang Web bán hàng để có thể đáp ứng nhu cầu người dùng cũng như người bán với các chức năng cần thiết nhất của một cửa hàng. Thêm vào đó các công nghệ như AI,Blockchain,IoT cũng đang ngày càng phát triển cho hầu hết các lĩnh vực đời sống và tất nhiên việc bán hàng cũng là một thị trường tiềm năng. Bởi với lượng người dùng càng tăng và lượng dữ liệu có được sẽ là một tài nguyên cho việc nghiên cứu. áp dụng các công nghệ trên.
Tổng quan về chức năng 2 Chương 2. Giới thiệu React (hay ReactJs, React.js) là một thư viện Javascript mã nguồn mở để xây dựng các thành phần giao diện có thể tái sử dụng. Nó được tạo ra bởi Jordan Walke, một kỹ sư phần mềm tại Facebook. Người bị ảnh hưởng bởi XHP ( Một nền tảng thành phần HTML cho PHP ).
ReactJs lần đầu tiên được triển khai cho ứng dụng Newsfeed của Facebook năm 2011, sau đó được triển khai cho Instagram.Nó được mở mã nguồn ( open-souced) tại JSConf US tháng 5 2013 ReactJs đang nổi lên trong những năm gần đây với xu hướng Single Page Application (SPA). 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ếu như AngularJS là một Framework cho phép nhúng code Javasscript trong code HTML thông qua các attribute như ng- model, ng-repeat.thì với React là một library cho phép nhúng code HTML trong code Javascript nhờ vào JSX, bạn có thể dễ dàng lồng các đoạn HTML vào trong JS. Tích hợp giữa Javascript và HTML vào trong JSX làm cho các component dễ hiểu hơn.
Các khái niệm chính trong React (ReactJs) 2. Virtual DOM Virtual DOM chỉ là một đại diện ảo của DOM, Virtual DOM ra đời đã tăng hiệu suất các ứng dụng ReactJS một cách đáng kể. 3 Hình GIỚI THIỆU CHUNG-1 Mô hình DOM trong ứng dụng ReactJs Việc chỉ node gốc mới có trạng thái và khi nó thay đổi sẽ tái cấu trúc lại toàn bộ, đồng nghĩa với việc DOM tree cũng sẽ phải thay đổi một phần, điều này sẽ ảnh hưởng đến tốc độ xử lý. React JS sử dụng Virtual DOM (DOM ảo) để cải thiện vấn đề này.
Virtual DOM là một object Javascript, mỗi object chứa đầy đủ thông tin cần thiết để tạo ra một DOM, khi dữ liệu thay đổi nó sẽ tính toán sự thay đổi giữa object và tree thật, điều này sẽ giúp tối ưu hoá việc re-render DOM tree thật. Cách hoạt động cũng tựa như commit bracnh trên Github, Virtual DOM chỉ ghi nhận những thay đổi trên các component xảy ra từ đó chỉ thực việc render lại các component đó trên DOM thật. JSX JSX là một dạng ngôn ngữ cho phép viết các mã HTML trong Javascript. 4 Đặc điểm: Nhanh hơn: JSX thực hiện tối ưu hóa trong khi biên dịch sang mã Javacsript.
Các mã này cho thời gian thực hiện nhanh hơn nhiều so với một mã tương đương viết trực tiếp bằng Javascript. Ngược với Javascript, JSX là kiểu statically typed, nghĩa là nó được biên dịch trước khi chạy, giống như Java, C++. Vì thế các lỗi sẽ được phát hiện ngay trong quá trình biên dịch. Ngoài ra, nó cũng cung cấp tính năng gỡ lỗi khi biên dịch rất tốt.
JSX kế thừa dựa trên Javascript, vì vậy rất dễ dàng để cho các lập trình viên Javascripts có thể sử dụng. Như hình trên ta có thể thấy việc viết trực tiếp HTML vào function Javascript mà không có lỗi hay cần các dấu “” như xưa. HìnhGIỚI Hình GIỚITHIỆU THIỆUCHUNG-2 CHUNG-1VíVídụdụvềvềJSX JSX 2. Component Component có cú pháp như một function.
React được xây dựng xung quanh các component, chứ không dùng template như các framework khác. Trong React, chúng ta xây dựng trang web sử dụng những thành phần (component) nhỏ. Chúng ta có thể tái sử dụng một component ở nhiều nơi, với các trạng thái hoặc các thuộc tính khác nhau, trong một component lại có thể chứa thành phần khác.
