CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 1. CÁC CÔNG NGHỆ SỬ DỤNG Ở FRONTEND 1. Được ra mắt lần đầu vào năm 2013, ReactJS nhanh chóng trở thành một trong những framework phổ biến nhất cho phát triển ứng dụng web hiện đại. Đặc điểm quan trọng: - Virtual DOM: Một trong những đặc điểm quan trọng nhất của ReactJS là sử dụng Virtual DOM.
Điều này giúp tối ưu hóa hiệu suất của ứng dụng bằng cách giảm thiểu số lượng thay đổi trên DOM thực tế, thay vào đó chỉ cập nhật Virtual DOM và sau đó áp dụng những thay đổi cần thiết. 4 - Component-Based Architecture: ReactJS xây dựng trên một kiến trúc dựa trên components. Mỗi thành phần (component) có thể tái sử dụng và duy trì trạng thái riêng, tạo điều kiện thuận lợi cho phát triển và bảo trì. - Unidirectional Data Flow: React thực hiện luồng dữ liệu một chiều, giúp quản lý trạng thái của ứng dụng một cách dễ dàng và dự đoán được.
Dữ liệu di chuyển từ thành phần cha đến con, giúp theo dõi rõ ràng về tình trạng ứng dụng. - JSX (JavaScript XML): React sử dụng JSX để viết mã HTML trong JavaScript, giúp tạo ra mã nguồn dễ đọc và hiểu. JSX cũng cung cấp khả năng nhúng biểu thức JavaScript vào mã HTML. Dialogflow [2] Hình 2 : Giới thiệu về Dialogflow Dialogflow (tiền thân là API.AI) là một dịch vụ do Google cung cấp nhằm giúp các lập trình viên dễ dàng hơn khi lập trình các sản phẩm có giao tiếp giữa người dùng với sản phẩm thông qua các đoạn hội thoại bằng văn bản (text) hoặc giọng nói (voice).
Dialogflow không chỉ mạnh mẽ trong việc xử lý ngôn ngữ tự nhiên mà còn dễ dàng tích hợp với các hệ thống hiện có, giúp tối ưu hóa trải nghiệm người dùng và tự động hóa các tác vụ hỗ trợ khách hàng. Agent: 5 Agent trong Dialogflow là thực thể trung tâm chịu trách nhiệm quản lý và điều phối các hội thoại với người dùng. Một Agent có thể diễn giải và phản hồi lại ngôn ngữ tự nhiên thông qua việc sử dụng các Intent và Entity. Intent: Intent trong Dialogflow là khái niệm dùng để biểu thị mục đích hoặc yêu cầu cụ thể của người dùng trong một cuộc hội thoại.
Mỗi Intent đại diện cho một hành động mà người dùng muốn thực hiện hoặc thông tin mà họ muốn nhận được. Entity: Entity (thực thể) trong Dialogflow được sử dụng để trích xuất thông tin cụ thể từ câu hỏi của người dùng. Thông tin này thường là các danh từ hoặc cụm danh từ đại diện cho các đối tượng, khái niệm cụ thể mà người dùng đề cập đến. Các thư viện và công cụ: - Redux: Được sử dụng để quản lý trạng thái của ứng dụng trong các ứng dụng lớn, Redux giúp tạo ra một nguồn dữ liệu chung có thể được truy cập từ bất kỳ thành phần nào.
- React Router: Dùng để quản lý điều hướng trong ứng dụng React, React Router giúp tạo ra các đường dẫn tương ứng với các thành phần cụ thể. - Webpack và Babel: Sử dụng để đóng gói và biên dịch mã nguồn React thành mã JavaScript hỗ trợ trình duyệt. Ưu điểm của ReactJS: 6 Hình 3: Ưu điểm của ReactJS - Blazing Fast: ReactJS cho phép tạo ra những giao diện người dùng động và tương tác một cách nhanh chóng, nhờ vào việc sử dụng Virtual DOM và các kỹ thuật tối ưu hóa hiệu năng. - Efficient Debugging: ReactJS hỗ trợ trong việc gỡ lỗi và kiểm tra code, nhờ vào việc sử dụng JSX và các công cụ như React Developer Tools và Redux DevTools.
- SEO Friendly: ReactJS giúp cải thiện thứ hạng của website trên các công cụ tìm kiếm, nhờ vào việc tạo ra những trang web có thể được hiển thị trên máy chủ (server-side rendering) và tăng tốc độ tải trang. - DOM Virtuality: ReactJS tạo ra một bản sao của DOM trong bộ nhớ, và chỉ cập nhật những phần thay đổi trên DOM thực, giảm thiểu chi phí hiệu năng và tăng tốc độ ứng dụng. - Reusability: ReactJS sử dụng các component nhỏ và độc lập để xây dựng giao diện người dùng, giúp cho việc tái sử dụng, bảo trì và kiểm thử code dễ dàng hơn. - Easy Testing: ReactJS cho phép kiểm thử các component của ứng dụng một cách dễ dàng, nhờ vào việc sử dụng các thư viện như Jest, Enzyme, React Testing Library… 1.
Các thư viện hỗ trợ khác 7 - Axios là thư viện giúp client tương tác với server thông qua giao thức HTTP dựa trên các Promises. - Bootstrap là một framework bao gồm các HTML, CSS và JavaScript template dùng để phát triển website chuẩn responsive. - React Swiper là một thư viện linh hoạt, cho phép tạo giao diện có thể vuốt trong các ứng dụng React - React-Router là một thư viện định tuyến (routing) tiêu chuẩn trong React. Nó giữ cho giao diện của ứng dụng đồng bộ với URL trên trình duyệt - React-Scripts là một NPM package sử dụng cho create-react-app 1.
CÁC CÔNG NGHỆ SỬ DỤNG Ở BACKEND 1. Spring Boot Hình 4: Spring IO Platform Spring Boot là một Project nằm trên tầng IO Execution (Tầng thực thi) của Spring IO Framework. Spring Boot là một bước tiếp theo của Spring, để làm cho Spring dễ dàng hơn trong việc thiết lập và phát triển ứng dụng. Với Spring Boot, các cấu hình Spring được giảm thiểu 8 tối đa.
Spring Boot hỗ trợ các bộ chứa nhúng (embedded containers) điều này cho phép các ứng dụng web có thể chạy độc lập mà không cần phải trên khai lên các Web Server. Có thể dùng spring boot để tạo ứng dụng Java Web chạy bằng command line 'java - jar' hoặc xuất khẩu ra file war để triển khai lên Web Server như thông thường. Spring Boot cung cấp cho bạn một "CLI Tool" để chạy các kịch bản Spring (spring scripts). Spring Boot có thể giải thích một cách đơn giản bởi hình minh họa dưới đây: Hình 5: Tìm hiểu Spring Boot Các lợi ích của Spring Boot: - Dễ dàng để phát triển các ứng dụng dựa trên Spring với Java hoặc Groovy.
- Giảm thiểu thời gian phát triển và tăng năng xuất - Tránh việc phải viết nhiều mã nguyên mẫu (boilerplate Code), Annotations và các cấu hình XML. - Dễ dàng để tương tác các ứng dụng Spring Boot với các hệ sinh thái của Spring như Spring JDBC, Spring ORM, Spring Data, Spring Security etc. - Đi theo cách tiếp cận “Nguyên tắc cấu hình mặc định” để giảm thiểu thời gian và nỗ lực cần thiết để phát triển ứng dụng. - Cung cấp các Server nhúng (Embedded HTTP servers) như là Tomcat, Jetty.
để phát triển và test các ứng dụng web nhanh chóng và dễ dàng. - Cung cấp công cụ CLI (Command Line Interface) dể phát triển và test các ứng dụng Spring Boot (Java hoặc Groovy) từ các dòng lệnh (command prompt) rất dễ dàng và nhanh chóng. - Cung cấp rất nhiều các plugin để phát triển và test các ứng dụng Spring Boot nhanh chóng sử dụng các công cụ Build như Maven và Gradle 9 - Cung cấp nhiều plugin để làm việc với các cơ sở dữ liệu nhúng (embedded database) và các cơ sở dữ liệu lưu trữ trên bộ nhớ (in-memory Databases) một cách dễ dàng. MongoDB[3] Hình 6: Tìm hiểu MongoDB MongoDB lần đầu ra đời bởi MongoDB Inc., tại thời điểm đó là thế hệ 10, vào tháng Mười năm 2007, nó là một phần của sản phẩm PaaS (Platform as a Service) tương tự như Windows Azure và Google App Engine.
Sau đó nó đã được chuyển thành nguồn mở từ năm 2009. MongoDB đã trở thành một trong những NoSQL database nổi trội nhất bấy giờ, được dùng làm backend cho rất nhiều website như eBay, SourceForge và The New York Times. Các tính năng của MongoDB gồm có: - Các ad hoc query: hỗ trợ search bằng field, các phép search thông thường, regular expression searches, và range queries. 10 - Indexing: bất kì field nào trong BSON document cũng có thể được index.
- Replication: có ý nghĩa là “nhân bản”, là có một phiên bản giống hệt phiên bản đang tồn tại, đang sử dụng. Với cơ sở dữ liệu, nhu cầu lưu trữ lớn, đòi hỏi cơ sở dữ liệu toàn vẹn, không bị mất mát trước những sự cố ngoài dự đoán là rất cao. Vì vậy, người ta nghĩ ra khái niệm “nhân bản”, tạo một phiên bản cơ sở dữ liệu giống hệt cơ sở dữ liệu đang tồn tại, và lưu trữ ở một nơi khác, đề phòng có sự cố. - Aggregation: Các Aggregation operation xử lý các bản ghi dữ liệu và trả về kết quả đã được tính toán.
Các phép toán tập hợp nhóm các giá trị từ nhiều Document lại với nhau, và có thể thực hiện nhiều phép toán đa dạng trên dữ liệu đã được nhóm đó để trả về một kết quả duy nhất. Trong SQL, count(*) và GROUP BY là tương đương với Aggregation trong MongoDB. - Lưu trữ file: MongoDB được dùng như một hệ thống file tận dụng những function trên và hoạt động như một cách phân phối qua sharding. Ưu điểm của MongoDB: - Dữ liệu lưu trữ phi cấu trúc, không có tính ràng buộc, toàn vẹn nên tính sẵn sàng cao, hiệu suất lớn và dễ dàng mở rộng lưu trữ.
- Dữ liệu được caching (ghi đệm) lên RAM, hạn chế truy cập vào ổ cứng nên tốc độ đọc và ghi cao. RESTful API RESTful API là một tiêu chuẩn dùng trong việc thiết kế API cho các ứng dụng web (thiết kế Web services) để tiện cho việc quản lý các resource. Nó chú trọng vào tài nguyên hệ thống (tệp văn bản, ảnh, âm thanh, video, hoặc dữ liệu động…), bao gồm các trạng thái tài nguyên được định dạng và được truyền tải qua HTTP. 11 Hình 7: Phương pháp hoạt động của RESTful API REST hoạt động chủ yếu dựa vào giao thức HTTP.
Các hoạt động cơ bản nêu trên sẽ sử dụng những phương thức HTTP riêng. o GET (SELECT): Trả về một Resource hoặc một danh sách Resource. o POST (CREATE): Tạo mới một Resource. o PUT (UPDATE): Cập nhật thông tin cho Resource.
o DELETE (DELETE): Xoá một Resource. Những phương thức hay hoạt động này thường được gọi là CRUD tương ứng với Create, Read, Update, Delete. Các thư viện hỗ trợ khác 12 CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG VÀ MÔ HÌNH HÓA YÊU CẦU 2. KHẢO SÁT HIỆN TRẠNG Với mục tiêu đề tài trên nhóm đã thực hiện khảo sát các website bán hoa: 2.vn (Nguồn: https://potico.vn/) Hình 8: Khảo sát hiện trạng shop Potico.vn Bảng 1: Đánh giá shop Potico.vn Ưu điểm Nhược điểm ✓ Đáp ứng đầy đủ các yêu cầu mà một Trang chủ chứa quá nhiều thông tin website bán hoa cần phải có.
✓ Màu sắc trang web hài hòa, dễ nhìn ✓ Tất cả các thông tin cần biết đều thể hiện rõ trên website. ✓ Phân loại hoa rõ ràng, dễ tìm kiếm. ✓ Các sản phẩm tiêu biểu đều được thể hiện trên trang chủ. ✓ Có mục đề xuất sản phẩm liên quan 13 ✓ Cho phép chọn ngày giao hàng.