CHƯƠNG I: GIỚI THIỆU CHUNG 1. Đề tài - Tên đề tài: Xây dựng website cung cấp các dịch vụ về thú cưng - tích hợp ChatBot. - Công nghệ sử dụng: ReactJs, Nestjs. - Cơ sở dữ liệu sử dụng: Firebase Storage, MySQL.
Lý do chọn đề tài Hiện nay, chúng ta đang sống trong một xã hội ngày càng phát triển, điều này làm cho việc tiếp cận công nghệ thông tin ngày căng tang, cùng với việc ngày càng có nhiều người muốn sở hữu cho mình thú cưng dẫn đến các vấn đề về bán và cung cấp các dịch vụ cho thú cưng ngày một nhiều sau mỗi năm. Với phát triển của thời đại công nghệ 4.0 thì việc quản lý, lưu trữ, bán,… thú cưng theo cách cổ điển đang gây ra rất nhiều bất lợi và tốn nhiều thời gian và công sức. Và khi sự bùng nổ các dịch vụ trên Internet ở nước ta ngày càng lớn, thì việc có sự xuất hiện một website bán và cung cấp các dịch vụ về thú cưng để giúp giảm thiểu thời gian và công sức của chủ cửa hàng cũng như giúp chủ cửa hàng, khách hàng có thể theo dõi, truy xuất nhanh chóng, chính xác thông tin, tình trạng đơn hàng, thú cưng một cách dễ dàng là một việc rất cần thiết và khả thi vào lúc này. Dựa theo khảo sát thực trạng, thì có thế nhận thấy rằng tồn tại những công việc tốn rất nhiều thời gian nhưng vẫn lặp đi lặp lại như: Tiếp nhận tin nhắn mua hàng, phân chia các loại thú cưng, tổng kết thống kê doanh thu, kiểm tra thú cưng tồn kho, … Thông thường thì những công việc này chỉ dừng lại ở mức độ dùng Excel hay một số công cụ khác để thực thi và lưu trữ.
Vì vậy việc xây dựng lên một website bán và cung cấp các dịch vụ về thú cưng là một vấn đề cực kì cần thiết. Tóm tắt đề tài Những phần mềm thú cưng trên thị trường hiện nay mặc dù có những tính năng rất tiện ích tuy nhiên chúng vẫn còn rất phức tạp đối với một số người không hoàn toàn rành về công nghệ. Bên cạnh đó, còn có vẫn có những tính năng hoàn toàn không cần thiết tại một số nơi nhất định, đồng thời giao diện thiết kễ đã cũ, lạc hậu. Do đó, chúng tôi đã tiến hành thu thập những ý kiến người dùng để từ đó xây dựng một phần mềm có giao diện dễ sử dụng hơn và những tính năng phù hợp hơn.
Mục tiêu đề tài - Xây dựng website dịch vụ thú cưng có tính năng: Đăng nhập, đăng ký, quản lý danh mục thú cưng, sản phẩm, dịch vụ, quản lý giỏ hàng, quản lý đơn hàng, quản lý tài khoản, thống kê doanh thu, mặt hàng, chatbot hỗ trợ,. - Tìm hiểu được công nghệ thích hợp xây dựng ứng dụng. - Hoàn thành được báo cáo môn học. Phương pháp nghiên cứu - Nghiên cứu các ứng dụng có sẵn trên thị trường, nhận xét được ưu khuyết điểm của các ứng dụng đó.
- Nghiên cứu các tài liệu đặc tả về các phần mềm tương tự như quản lý bán hàng, chat app,. - Tìm hiểu các công nghệ mới trên thị trường, nhận xét và chọn ra phần mềm thích hợp nhất. Ý nghĩa và hướng của đề tài 6. Về mặt tài liệu - Sử dụng nguồn tài liệu tham khảo ReactJs, NestJs, Firebase.
- Có tài liệu đặc tả use-case, sơ đồ lớp, tuần tự, mô hình thiết kế giao diện. Về mặt sản phẩm - Tạo ra ứng dụng Website cung cấp các dịch vụ về thú cưng, tích hợp Chatbot. - Xử lý các vấn đề về hiệu suất của ứng dụng 1 cách hiệu quả. - Chức năng phù hợp với tình hình thực tế và dễ sử dụng.
CHƯƠNG II: CÔNG NGHỆ LIÊN QUAN 1. 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).
React 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-sourced) tại JSConf US tháng 5 năm 2013. Về cơ bản, việc xây dựng một ứng dụng MVC phía client với giàng buộc dữ liệu 2 chiều (2 way data-binding) là khá đơn giản. Tuy nhiên nếu dự án ngày càng mở rộng, nhiều tính năng hơn, làm cho việc bảo trì dự án gặp khó khăn, đồng thời hiệu năng cũng bị giảm.
Bạn cũng có thể giải quyết vấn đề đó bằng các thư viện khác như Backbone.js hay Angular.js, tuy nhiên bạn sẽ thấy các hạn chế của chúng khi dự án của bạn ngày càng lớn. React ra đời sau AngularJS, nó sinh ra để dành cho các ứng dụng lớn dễ dàng quản lý và mở rộng. Mục tiêu chính của React là nhanh, đơn giản, hiệu năng cao và dễ dàng mở rộng. Hình 1: Giới thiệu về React Tính năng nổi bật của React: - Sử dụng JSX, trích dẫn HTML để render các subcomponent.
- Single-way data flow (Luồng dữ liệu một chiều) - Virtual Dom nên khi state thay đổi chúng ta không cần thao tác trực tiếp với DOM. - Hiệu năng nhanh với những ứng dụng có dữ liệu thay đổi liên tục. Lý do sử dụng Reactjs giúp việc viết các đoạn code JS dễ dàng hơn: Nó dùng cú pháp đặc biệt là JSX (Javascript mở rộng) cho phép ta trộn giữa code HTML và Javascript. Ta có thể them vào các đoạn HTML vào trong hàm render mà không cần phải nối chuỗi.
Đây là đặc tính thú vị của Reactjs. Nó sẽ chuyển đổi các đoạn HTML thành các hàm khởi tạo đối tượng HTML bằng bộ biến đổi JSX. Nhiều công cụ phát triển: Khi bạn bắt đầu Reactjs, đừng quên cài đặt ứng dụng mở rộng của Chrome dành cho Reactjs. Nó giúp bạn debug code dễ dàng hơn.
Sau khi bạn cài đặt ứng dụng này, bạn sẽ có cái nhìn trực tiếp vào virtual DOM như thể bạn đang xem cây DOM thông thường. Render tầng server: Một trong những vấn đề với các ứng dụng đơn trang là tối ưu SEO và thời gian tải trang. Nếu tất cả việc xây dựng và hiển thị trang đều thực hiện ở client, thì người dung sẽ phải chờ cho trang được khởi tạo và hiển thị lên. Điều này thực tế là chậm.
Hoặc nếu giả sử người dung vô hiệu hóa Javascript thì sao? Reactjs là một thư viện component, nó có thể vừa render ở ngoài trình duyệt sử dụng DOM và cũng có thể render bằng các chuỗi HTML mà server trả về. Bạn có thể tham khảo cách render side servering tại đây. Làm việc với vấn đề test giao diện: Nó cực kì dễ để viết các test case giao diện vì virtual DOM được cài đặt hoàn toàn bằng JS. Hiệu năng cao đối với các ứng dụng có dữ liệu thay đổi liên tục, dễ dàng cho bảo trì và sửa lỗi.
Giới thiệu Nest (NestJS) là một framework để xây dựng ứng dụng NodeJS phía máy chủ hiệu quả và có thể mở rộng, được cải tiến từ JavaScript, được xây dựng và hỗ trợ đầy đủ TypeScript (nhưng vẫn cho phép nhà phát triển viết bằng JavaScript thuần) và kết hợp các yếu tố của OOP (Lập trình hướng đối tượng), FP (Lập trình hàm) và FRP (Lập trình phản ứng hàm). Nest cung cấp mức độ trừu tượng cao hơn các Node.js frameworks phổ biến (Express/Fastify), nhưng cũng hiển thị trực tiếp các APIs của họ cho các nhà phát triển. Điều này cho phép các nhà phát triển tự do sử dụng vô số mô-đun của bên thứ ba có sẵn cho nền tảng cơ bản. Hình 2: Giới thiệu về NestJs Tính năng nổi bật của NestJs: NestJS là một dự án mà tác giả muốn wapper lại mã nguồn, tối ưu và sắp xếp mã nguồn dựa trên NodeJS và ExpressJS.
Nhờ đó mà mã nguồn dự án của bạn gọn gàng hơn, dễ bảo trì và tốc độ phát triển, xây dựng ứng dụng cũng nhanh hơn. CHƯƠNG III: PHÂN TÍCH HỆ THỐNG 1. Yêu cầu phần mềm 1. Yêu cầu nghiệp vụ Đảm bảo được các chức năng cần phải có đối với website cung cấp các dịch vụ về thú cưng - tích hợp ChatBot.
Chia làm 3 danh mục bán hàng chính là thú cưng, sản phẩm, dịch vụ: ● Thú cưng: Với mỗi loại thú cưng chỉ có duy nhất một con, nên số lượng chỉ được tính tối đa là một. ● Sản phẩm: Gồm các danh mục sản phẩm, sản phẩm phụ, số lượng hàng tồn kho. ● Dịch vụ: Bao gồm chọn nhân viên làm dịch vụ, đặt lịch hẹn.2 Yêu cầu chất lượng Yêu cầu về tính hiệu quả, đúng đắn: ● Đảm bảo tính toàn vẹn dữ liệu. ● Các thông báo phản hồi ngay lập tức khi người dùng thao tác.
● Các thông số được tính toán, cập nhật và hiển thị ngay lập tức. Yêu cầu về bảo mật: Các dữ liệu quan trọng như mật khẩu được mã hóa. Yêu cầu về tương thích: Tương thích trên nhiều thiết bị.1 Sơ đồ Use-case mức tổng quát Hình 3: Sơ đồ usecase mức tổng quát 2.2 Danh sách các actor STT Tên Actor Ý nghĩa / ghi chú 1 Người dùng Khách hàng, người sử dụng 2 Admin Người quản lý Bảng 1: Danh sách các actor 2.3 Danh sách Use-case STT Tên Usecase Ý nghĩa / ghi chú 1 Tạo tài khoản khách hàng Tạo tài khoản cá nhân cho app 2 Đăng nhập khách hàng Đăng nhập vào ứng dụng 3 Đăng nhập admin Đăng nhập tài khoản admin 4 Thay đổi thông tin Thay đổi thông tin tài khoản cá nhân 5 Tạo thú cưng Tạo thú cưng 6 Sửa thú cưng Cập nhật thú cưng 8 Tạo sản phẩm Tạo sản phẩm 9 Sửa sản phẩm Cập nhật sản phẩm 10 Tạo dịch vụ Thêm mới dịch vụ 11 Sửa dịch vụ Cập nhật dịch vụ 12 Đặt lịch Đặt lịch hẹn 13 Xem thông tin đơn hàng Xem thông tin đơn hàng 14 Chỉnh sửa đơn hàng Chỉnh sửa đơn hàng 15 Đặt đơn hàng Đặt đơn hàng 16 Tra cứu đơn hàng Tra cứu theo tên, số điện thoại, link 17 ChatBot Chatbot hỗ trợ 18 Quản lý nhân viên Thêm xóa sửa nhân viên 19 Quản lý khách hàng Chỉnh sửa, vô hiệu hóa tài khoản Bảng 2: Danh sách use-case 2.4 Đặc tả Use-case 2.1 Đặc tả Use-case “Tạo tài khoản khách hàng” Mô tả Người dùng tạo tài khoản mới để sử dụng website. Tác nhân Người dùng Hành vi của tác nhân Hành vi của hệ thống 1 - Người dùng mở trang web.
2 - Chọn vào nút Đăng ký tài khoản. Luồng chính 3 - Điền đầy đủ thông tin cá nhân được yêu cầu. 4 - Nhấn vào nút Đăng ký. 5 - Phần mềm kiểm tra thông tin tài khoản.
6 - Nếu thông tin hợp lệ, hiện thông báo tạo tài khoản thành công, tự động đăng nhập vào ứng dụng.