đồ án 2 tìm hiểu về mern stack và xây dựng website e commerce

CHƯƠNG 1: TỔNG QUAN1.1 Lý do chọn đề tài Ngày nay, ứng dụng công nghệ thông tin và việc tin học hóa được xem là mộttrong những yếu tố mang tính quyết định trong hoạt động của các chính p

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

KHOA CÔNG NGHỆ PHẦN MỀM

BÁO CÁO ĐỒ ÁN 2 TÌM HIỂU VỀ MERN STACK VÀ XÂY DỰNG

WEBSITE E-COMMERCE

Giảng viên hướng dẫn : Thầy Huỳnh Tuấn Anh

Sinh viên thực hiện 1 : Lê Quang Huy - 20521396

Sinh viên thực hiện 2 : Nguyễn Tấn Huệ - 20521359

Lớp : SE122.O11.PMCL

Thành phố Hồ Chí Minh, tháng 12 năm 2023

NHẬN XÉT

(Của cán bộ giảng viên)

LỜI CẢM ƠN

Sau quá trình học tập và rèn luyện tại khoa Công nghệ Phần mềm trường Đại họcCông nghệ Thông tin – ĐHQG TP.HCM, chúng em đã được trang bị những kiến thức vànhững kỹ năng cơ bản để có thể hoàn thành các đồ án môn học Môn Đồ Án 2 là môn họcmang lại cho sinh viên cái nhìn mới trong việc áp dụng những kiến thức đã có để giảiquyết các vấn đề thực tế Môn học cũng như là một thử thách và cơ hội để sinh viên cóthể rèn luyện và hoàn thiện bản thân qua những kinh nghiệm, kỹ năng khi làm đồ án

Chúng em xin gửi lời cảm ơn đến thầy Huỳnh Tuấn Anh đã tận tình quan tâm,giúp đỡ và hướng dẫn nhóm trong suốt quá trình làm đồ án Qua những lời góp ý, chỉ bảocủa thầy mà nhóm có thể hoàn thành đồ án tốt hơn Nhóm cũng xin cảm ơn tất cả cácthầy cô, anh chị, bạn bè đã giúp đỡ, hỗ trợ trong suốt quá trình nhóm hoàn thành đồ án.Trong quá trình học tập và hoàn thiện đồ án còn gặp nhiều sai sót, chúng em mong nhậnđược sự góp ý của quý thầy cô và các bạn để có thể hoàn thiện hơn

Chúng em xin chân thành cảm ơn!

MỤC LỤC

NHẬN XÉT

(Của cán bộ giảng viên)

LỜI CẢM ƠN

CHƯƠNG 1: TỔNG QUAN

1.1 Lý do chọn đề tài

1.2 Mục tiêu

1.3 Phạm vi

1.4 Người dùng

1.5 Phương pháp nghiên cứu

1.6 Khảo sát nhu cầu người dùng bằng form

1.7 Khảo sát, đánh giá các website cạnh tranh

CHƯƠNG 2: CƠ SỞ LÝ THUYẾT VÀ CÔNG NGHỆ

2.1 Giới thiệu về ReactJS

2.1.1 Khái niệm

2.1.2 Ưu điểm

2.1.3 Nhược điểm

2.2 Giới thiệu về MongoDB

2.2.1 Các đặc điểm cơ bản của MongoDB

2.2.2 Ưu điểm

2.2.3 Nhược điểm

2.3 Giới thiệu về NodeJS

2.3.1 Khái niệm

2.3.2 Ưu điểm

2.2.3 Nhược điểm

2.4 Express Framework

2.4.1 Khái niệm

2.4.2 Ưu điểm

2.4.3 Nhược điểm

2.5 Chatbot - DialogFlow

2.5.1 Khái niệm

2.5.2 Quy trình hoạt động

2.5.2.1 Về Agent Bot

2.5.2.2 Về Intent

2.5.2.3 Về Entity

2.5.2.4 Cách Bot xử lý input để đưa ra output

2.6 Kommunicate

CHƯƠNG 3: PHÂN TÍCH HỆ THỐNG

3.1 Kiến trúc hệ thống

3.2 Mô hình kiến trúc hệ thống

3.3 Mô tả chi tiết hệ thống

CHƯƠNG 4 THIẾT KẾ VÀ TRIỂN KHAI HỆ THỐNG

4.1 Tổng quan sơ đồ Use-case

4.2 Danh sách các Actor

4.3 Danh sách Use-case

4.4 Đặc tả Use-case và Sơ đồ Hoạt động

4.4.1 Login

4.4.2 Sign up for User

4.4.3 Logout

4.4.4 View Product List

4.4.5 Search Product

4.4.6 Filter Product

4.4.7 Detail Product

4.4.8 Add to Cart

4.4.9 View Cart

4.4.10 View Coupon Code

4.4.11 Purchase

4.4.12 View Order

4.4.13 Review Product

4.4.14 View statistic

4.4.15 Manage profile Admin

4.4.16 Manage customer

4.4.17 Manage product

4.4.18 Manage Category Product

4.4.19 Manage Coupon Code

4.4.20 Manage Order

4.4.21 Reply to Review

4.4.22 Compare Product

4.5 Sơ đồ tuần tự

4.5.1 Login

4.5.2 Sign up

4.5.3 View Product List

4.5.4 Search Product

4.5.5 Filter Product

4.5.6 Detail Product

4.5.7 Add to Cart

4.5.8 Purchase

4.5.9 Review Product

4.5.10 Manage customer

4.5.11 Manage product

4.5.12 Manage Category Product

4.5.13 Mange Coupon Code

4.5.14 Manage Order

4.5.16 Replay to Review

4.5.17 Compare Product

4.6 Thiết kế cơ sở dữ liệu

4.6.1 Các bảng dữ liệu

4.6.2 Danh sách các quan hệ

4.6.2.1 Bảng users: Thông tin tài khoản

4.6.2.2 Bảng products: Sản phẩm

4.6.2.3 Bảng type Products: Loại sản phẩm

4.6.2.4 Bảng questions: Câu hỏi

4.6.2.5 Bảng coupons: Mã giảm giá

4.6.2.6 Bảng comments: Nhận xét và đánh giá

4.6.2.7 Bảng invoices: Đơn hàng

4.7 Thiết kế giao diện người dùng

4.7.1 Giao diện cho User

4.7.2 Giao diện cho Admin

4.7.3 Danh sách các màn hình

4.7.3.1 Màn hình Đăng nhập

4.7.3.2 Màn hình Đăng ký

4.7.3.3 Màn hình Trang chủ

4.7.3.4 Màn hình Sản phẩm

4.7.3.5 Màn hình chi tiết sản phẩm

4.7.3.6 Màn hình So sánh 2 sản phẩm

4.7.3.7 Màn hình Giỏ hàng

4.7.3.8 Màn hình Thanh toán

4.7.3.9 Màn hình Thông tin tài khoản

4.7.3.10 Màn hình Thông tin Liên hệ

4.7.3.11 Màn hình Chatbot

4.7.3.12 Màn hình Quản lý thống kê cho Admin

4.7.3.13 Màn hình Quản lý Loại sản phẩm

4.7.3.14 Màn hình Quản lý Sản phẩm

4.7.3.15 Màn hình Quản lý Khách hàng

4.7.3.16 Màn hình Quản lý Đơn đặt hàng

4.7.3.17 Màn hình Quản lý Mã giảm giá

CHƯƠNG 5: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN

5.1 Thành quả đạt được

5.2 Ưu và nhược điểm

5.3 Hướng phát triển đồ án

CHƯƠNG 1: TỔNG QUAN

1.1 Lý do chọn đề tài

Ngày nay, ứng dụng công nghệ thông tin và việc tin học hóa được xem là mộttrong những yếu tố mang tính quyết định trong hoạt động của các chính phủ, tổ chức,cũng như các công ty, cửa hàng, nó đóng vai trò hết sức quan trọng có thể tạo ra nhữngbước đột phá mạnh mẽ

Trong đó thương mại điện tử cũng đã trở nên phổ biến với các doanh nghiệp vàhầu hết người dân tại các nước phát triển và đang phát triển Không thể phủ nhận nhữnglợi ích to lớn mà nó mang lại, từ đó giúp cho thương mại điện tử trở thành một phầnkhông thể tách rời trong chiến lược phát triển kinh doanh của các doanh nghiệp

Nắm bắt được tiềm năng phát triển của thương mại điện tử từ sau khi COVID-9bùng nổ, các doanh nghiệp đã nắm bắt tình hình và tập trung đẩy mạnh phát triển cáchình thức quảng cáo, mua bán dựa trên thương mại điện tử để mang lại nhiều lợi íchcũng như tiếp cận Việc xây dựng các trang web để phục vụ cho các nhu cầu riêng củacác tổ chức, công ty thậm chí các cá nhân, ngày nay, không lấy gì làm xa lạ Khách hàngngày càng có nhiều nhu cầu mua sắm và buôn bán những đồ dùng đã qua sử dụng củamình tuy nhiên để tìm kiếm một địa điểm và giả thành hợp lý xong không phải là chuyện

dễ dàng dẫn đến mất quá nhiều công sức và thời gian mà hiệu quả lại không cao

Vì vậy ứng dụng công nghệ vào lĩnh vực này ngày càng phổ biến Với một vài thao tác đơn giản, nhanh chóng, một người hoặc doanh nghiệp bất kì có thể dễ dàng quản

lý mọi công việc mua bán hàng hóa của mình trên mọi thiết bị

Ngoài ra Chatbot được xây dựng nhằm hỗ trợ tư vấn bán hàng, chăm sóc khách hàng giúp giảm chi phí, tăng hiệu quả bán hàng Theo báo cáo của Business Insider 2021 [2], tại Mỹ hàng năm có thể tiết kiệm 20 tỷ USD chi phí tiền lương cho ngành bán bảo hiểm,

22 tỷ cho dịch vụ tài chính, bán hàng và 31 tỷ cho dịch vụ khách hàng

Dựa vào kiến thức đã được học và sự tìm hiểu về MERN Stack, sự cần thiết của

vấn đề chúng em đã “Xây dựng Website bán giày tích hợp Chatbot” Tuy việc xây dựng

website còn nhiều khó khăn và thiếu sót nhưng đã giúp chúng em có thêm nhiều kiến thức và sự học hỏi, tạo bước phát triển cho sau này

1.2 Mục tiêu

● Nghiên cứu tổng quan về các nghiệp vụ cửa hàng và bán hàng

● Nghiên cứu trên cơ sở lý thuyết việc phát triển hệ thống thông tin quản lý và thương mại điện tử Website mua bán giày

● Xây dựng hệ thống thương mại điện tử và quản lý Website mua bán giày giúp cho việc quản lý và buôn bán trở nên đơn giản hơn

● Chatbot thuận tiện cho việc tư vấn bán hàng và tăng doanh số

- Nghiệp vụ bán hàng và thanh toán

- Theo dõi, quản lý lịch sử mua hàng và bán hàng, lịch sử theo dõi của người dùng

- Thêm, xóa, sửa và tra cứu tìm kiếm thông tin của sản phẩm Từ đó tiến hành xây dựng cơ sở dữ liệu và khai thác dữ liệu phục vụ công tác quản lý và buôn bán trên website

- Quản lý sản phẩm theo từng danh mục

- Quản lý tài khoản, thông tin khách hàng

- Quản lý giỏ hàng, thanh toán

- Quản lý, tra cứu thông tin đơn hàng

1.4 Người dùng

- Người bán có nhu cầu bán sản phẩm

- Khách hàng có nhu cầu mua sản phẩm: tiết kiệm được nhiều rủi ro, chi phí và thời gian tìm kiếm đồng thời tạo độ tin cậy và chính xác cao

1.5 Phương pháp nghiên cứu

- Phương pháp hệ thống, phương pháp tư duy

- Phương pháp phân tích, tổng hợp

- Phương pháp tin học hóa bằng công cụ lập trình để giải quyết vấn đề

1.6 Khảo sát nhu cầu người dùng bằng form

Phương pháp: Dựa trên bảng phân thống kê kết quả khảo sát quy mô nhỏ và nhậnđược khoảng 70 responses

Lợi ích mà người đặt hàng mong muốn từ website:

- 79% người tham gia thấy giúp họ tiết kiệm thời gian

- 65% người thấy tiện lợi hơn khi đi làm

- 64% người cảm thấy hứng thú khi mua hàng online

Khi được hỏi rằng liệu người dùng có thích đặt các sản phẩm trên website haykhông?

- 90% người tham gia thích

- 10% người tham gia không thích vì lý do sợ lộ thông tin cá nhân

Phân tích kết quả khảo sát :

+ Các tính năng cần thiết cho người quản lý: Quản lý sản phẩm, Quản lý thông tin khách hàng, Quản lý đơn hàng, Phân tích báo cáo, Quản lý doanh thu

+ Các tính năng cần thiết khách hàng: Tìm kiếm sản phẩm,Xem thông tin sản

phẩm,Thêm sản phẩm vào giỏ hàng,Nhận hỗ trợ tư vấn thông qua chatbot,

Đặt hàng, Thanh toán online, Xem tiến trình đơn hàng, Feedback sau khi

mua sản phẩm, Quản lý tài khoản cá nhân

+ Nhóm đối tượng khách hàng hướng đến chủ yếu : Khách hàng độ tuổi từ

dưới 18 đến 40 tuổi

1.7 Khảo sát, đánh giá các website cạnh tranh

Dựa vào form khảo sát ta có thể thấy lượt truy cập và sử dụng của 3 website hàng đầu là: Adidas, Nike, Converse

Phân tích và đánh giá nghiệp vụ của 3 website này

Tư vấn chọn size tự động

Liên hệ nhân viên hỗ trợ tư vấn

Tư vấn phối đồ tự động

Chức năng Quản lý thông tin khách hàng Quản lý

Chức năng Thêm sản phẩm vào giỏ hàng Khách hàngChức năng Nhận hỗ trợ tư vấn thông qua chatbot Khách hàng

Chức năng Feedback sau khi mua sản phẩm Khách hàngChức năng Quản lý tài khoản cá nhân Khách hàng

CHƯƠNG 2: CƠ SỞ LÝ THUYẾT VÀ CÔNG NGHỆ

2.1 Giới thiệu về ReactJS

2.1.1 Khái niệm

ReactJS là một opensource được phát triển bởi Facebook, ra mắt vào năm 2013, bản thân nó là một thư viện Javascript được dùng để để xây dựng các tương tác với các thành phần trên website Một trong những điểm nổi bật nhất của ReactJS đó là việc render dữ liệu không chỉ thực hiện được trên tầng Server mà còn ở dưới Client Một trongnhững điểm hấp dẫn của React là thư viện này không chỉ hoạt động trên phía client, mà còn được render trên server và có thể kết nối với nhau React so sánh sự thay đổi giữa cácgiá trị của lần render này với lần render trước và cập nhật ít thay đổi nhất trên DOM Trước khi đến cài đặt và cấu hình, chúng ta sẽ đi đến một số khái niệm cơ bản:

- Virtual DOM:

Công nghệ DOM ảo giúp tăng hiệu năng cho ứng dụng 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 React sử dụng cơ chế one-way data binding – luồng dữ liệu

1 chiều Dữ liệu được truyền từ parent đến child thông qua props Luồng dữ liệu đơn giảngiúp chúng ta dễ dàng kiểm soát cũng như sửa lỗi

Javascript, vì vậy rất dễ dàng để cho các lập trình viên Javascript có thể sử dụng (tham khảo tại https://jsx.github.io/)

- Giới thiệu về Components:

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ầnkhác Mỗi component trong React có một trạng thái riêng, có thể thay đổi, và React sẽ thực hiện cập nhật component dựa trên những thay đổi của trạng thái Mọi thứ React đều

là component Chúng giúp bảo trì mã code khi làm việc với các dự án lớn Một react component đơn giản chỉ cần một method render Có rất nhiều methods khả dụng khác, nhưng render là method chủ đạo

- Props và State:

Props: giúp các component tương tác với nhau, component nhận input gọi là props, và trả thuộc tính mô tả những gì component con sẽ render Prop là bất biến State: thể hiện trạng thái của ứng dụng, khi state thay đồi thì component đồng thời render lại để cập nhật UI

- React Redux Redux là một predictable state management tool cho các ứng dụng

Javascript Nó giúp bạn viết các ứng dụng hoạt động một cách nhất quán, chạy trong các môi trường khác nhau (client, server, and native) và dễ dàng để test Redux ra đời lấy cảm hứng từ tư tưởng của ngôn ngữ Elm và kiến trúc Flux của Facebook Do vậy Redux thường dùng kết hợp với React

2.1.2 Ưu điểm

● Reactjs cực kì hiệu quả: Reactjs tạo ra cho chính nó DOM ảo – nơi mà các

component thực sự tồn tại trên đó Điều này sẽ giúp cải thiện hiệu suất rất nhiều Reactjs cũng tính toán những thay đổi nào cần cập nhật lên DOM và chỉ thực hiện chúng Điều này giúp Reactjs tránh những thao tác cần trên DOM mà nhiều chi phí

● 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ể thêm 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

● Nó có 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 dùng sẽ phải chờ cho trang được khởi tạo và hiển thị lên 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 serving tại đây

● Tích hợp vào các framework MVC truyền thống yêu cầu cần phải cấu hình lại

● React khá nặng nếu so với các framework khác React có kích thước tương tương với Angular (Khoảng 35kb so với 39kb của Angular) Trong khi đó Angular là một framework hoàn chỉnh

● Khó tiếp cận cho người mới học Web

2.2 Giới thiệu về MongoDB

2.2.1 Các đặc điểm cơ bản của MongoDB

Mỗi cơ sở dữ liệu bao gồm nhiều collection, mỗi collection lại chứa nhiều

Document Mỗi Document có thể khác nhau về số lượng các trường dữ liệu Kích thước

và nội dung của mỗi Document đều có thể khác nhau

Cấu trúc của Document phù hợp với việc các nhà phát triển xây dựng các class và object bằng các ngôn ngữ lập trình tương ứng Các nhà phát triển sẽ thường phát biểu rằng cấu trúc của họ không có các hàng và các cột nhưng vẫn có một cấu trúc dữ liệu rõ ràng với các cặp key-value

Nếu như các bạn đã biết trước về NoSQL , các hàng (hay có thể là documents được gọi trong MongoDB) không cần phải định nghĩa schema Thay vào đó, các trường

có thể được tạo linh hoạt

Mô hình dữ liệu có sẵn trong MongoDB cho phép bạn biểu diễn quan hệ phân cấp,lưu trữ các mảng, và các cấu trúc phức tạp dễ dàng hơn

2.2.2 Ưu điểm

Ưu điểm Open Source:

● MongoDB là phần mềm mã nguồn mở miễn phí, có cộng đồng phát triển rất lớn Hiệu năng cao:

● Tốc độ truy vấn (find, update, insert, delete) của MongoDB nhanh hơn hẳn so với các hệ quản trị cơ sở dữ liệu quan hệ (RDBMS)

● Thử nghiệm cho thấy tốc độ insert, tốc độ insert của MongoDB có thể nhanh tới gấp 100 lần so với MySQL (So sánh hiệu suất của MongoDB với MySQL) Tại sao MongoDB có hiệu năng cao như thế? có các lý do sau:

● MongoDB lưu dữ liệu dạng JSON, khi bạn insert nhiều đối tượng thì nó sẽ là insert một mảng JSON gần như với trường hợp insert 1 đối tượng

● Dữ liệu trong MongoDB không có sự ràng buộc lẫn nhau như trong RDBMS, khi insert, xóa hay update nó không cần phải mất thời gian kiểm tra xem có thỏa mãn các bảng liên quan như trong RDBMS

● Dữ liệu trong MongoDB được đánh chỉ mục (đánh index) nên khi truy vấn nó sẽ tìm rất nhanh

● Khi thực hiện insert, find… MongoDB sẽ khóa các thao tác khác lại, ví dụ khi nó thực hiện find(), trong quá trình find mà có thêm thao tác insert, update thì nó sẽ dừng hếtlại để chờ find() xong đã

Dữ liệu linh hoạt:

● MongoDB là document database, dữ liệu lưu dưới dạng JSON, không bị bó buộc

về số lượng field, kiểu dữ liệu… bạn có thể insert thoải mái dữ liệu mà mình muốn

Là Rich Query Language:

● MongoDB là một rich query language tức là nó có sẵn các method để thực hiện create, read, update, delete dữ liệu (CRUD)

Tính sẵn có:

● MongoDB hỗ trợ replica set nhằm đảm bảo việc sao lưu và khôi phục dữ liệu

Khả năng mở rộng Horizontal Scalability:

● Trong MongoDB có một khái niệm cluster là cụm các node chứa dữ liệu giao tiếp với nhau, khi muốn mở rộng hệ thống ta chỉ cần thêm một node với vào cluster:

● Sử dụng nhiều bộ nhớ: do dữ liệu lưu dưới dạng key-value, các collection chỉ khác

về value do đó key sẽ bị lặp lại Không hỗ trợ join nên sẽ bị dư thừa dữ liệu (trong

RDBMS thì ta chỉ cần lưu 1 bản ghi rồi các bản ghi khác tham chiếu tới còn trong

MongoDB thì không)

● Bị giới hạn kích thước bản ghi: mỗi document không được có kích thước > 16Mb

và không mức độ các document con trong 1 document không được > 100

2.3 Giới thiệu về NodeJS

2.3.1 Khái niệm

Node.js là một nền tảng (Platform) phát triển độc lập được xây dựng ở trên

Javascript Runtime của Chrome mà chúng ta có thể xây dựng được các ứng dụng web một cách nhanh chóng và dễ dàng mở rộng Node.js bao gồm có V8 JavaScript engine của Google, libUV, và vài thư viện khác Node.js được xây dựng và phát triển bởi Ryan Dahl từ năm 2009, bảo trợ bởi công ty Joyent, trụ sở tại California, Hoa Kỳ Mục tiêu banđầu của Dahl là làm cho trang web có khả năng push như trong một số ứng dụng web nhưGmail Sau khi thử với vài ngôn ngữ Dahl chọn Javascript vì API nhập/xuất không đầy

đủ Điều này cho phép ông có thể định nghĩa một quy ước nhập/xuất điểu khiển theo sự kiện, non-blocking

Node.js có kiến trúc hướng sự kiện có khả năng nhập/xuất không đồng bộ Thiết

kế này nhằm mục đích tối ưu hóa thông lượng và khả năng mở rộng trong các ứng dụng web với nhiều hoạt động đầu vào / đầu ra, cũng như cho các ứng dụng web thời gian thực Nodejs áp dụng cho các sản phẩm có lượng truy cập lớn, cần mở rộng nhanh, cần đổi mới công nghệ, hoặc tạo ra các dự án Startup nhanh nhất có thể

2.3.2 Ưu điểm

● Có tốc độ xử lý nhanh nhờ cơ chế xử lý bất đồng bộ (non-blocking) Bạn có thể dễdàng xử lý hàng ngàn kết nối trong khoảng thời gian ngắn nhất

● Giúp bạn dễ dàng mở rộng khi có nhu cầu phát triển website

● Nhận và xử lý nhiều kết nối chỉ với một single-thread Nhờ đó, hệ thống xử lý sẽ

sử dụng ít lượng RAM nhất và giúp quá trình xử Nodejs lý nhanh hơn rất nhiều

● Có khả năng xử lý nhiều Request/s cùng một lúc trong thời gian ngắn nhất

● Có khả năng xử lý hàng ngàn Process cho hiệu suất đạt mức tối ưu nhất

● Phù hợp để xây dựng những ứng dụng thời gian thực như các ứng dụng chat, mạng

xã hội …

2.2.3 Nhược điểm

● Nodejs gây hao tốn tài nguyên và thời gian Nodejs được viết bằng C++ và

JavaScript nên khi xử lý cần phải trải qua một quá trình biên dịch Nếu bạn cần xử lý những ứng dụng tốn tài nguyên CPU thì không nên sử dụng Nodejs

● Nodejs so với các ngôn ngữ khác như PHP, Ruby và Python sẽ không có sự chênh lệch quá nhiều Nodejs có thể sẽ phù hợp với việc phát triển ứng dụng mới

● Linh hoạt: Express cho phép bạn tổ chức ứng dụng theo cách bạn muốn Bạn có thể chọn các module hỗ trợ mở rộng Express hoặc tạo các middleware tùy chỉnh

để mở rộng chức năng của nó Điều này cho phép bạn tùy chỉnh ứng dụng của mình theo nhu cầu cụ thể

● Hỗ trợ middleware: Express hỗ trợ sử dụng middleware, cho phép bạn xử lý các yêu cầu HTTP một cách linh hoạt Bạn có thể thêm, xóa hoặc sửa đổi các

middleware để thực hiện các tác vụ như xác thực, ghi log, nén dữ liệu và nhiều hơn nữa Điều này giúp tăng tính mở rộng và tái sử dụng của mã

● Cộng đồng mạnh mẽ: Express có một cộng đồng phát triển lớn và năng động, với nhiều tài liệu, ví dụ và các module hỗ trợ có sẵn Điều này giúp bạn tìm kiếm và giải quyết các vấn đề trong quá trình phát triển ứng dụng của mình.

2.4.3 Nhược điểm

● Quản lý routing phức tạp: Khi ứng dụng của bạn trở nên lớn và phức tạp, quản lý định tuyến trong Express có thể trở nên khó khăn Việc theo dõi và duy trì các đường dẫn và xử lý các yêu cầu có thể trở nên phức tạp và dễ gây lỗi

● Thiếu các tính năng tích hợp sẵn: So với các framework web khác như Django hoặc Ruby on Rails, Express không đi kèm với nhiều tính năng tích hợp sẵn Điều này có thể yêu cầu bạn phải triển khai các module bên thứ ba hoặc viết mã tùy chỉnh để đáp ứng các yêu cầu cụ thể của ứng dụng

● Cần có kiến thức Node.js: Để sử dụng hiệu quả Express, bạn cần có kiến thức cơ bản về Node.js Điều này có nghĩa là bạn cần phải đầu tư thời gian để học và làm quen với Node.js trước khi sử dụng Express

2.5 Chatbot - DialogFlow

2.5.1 Khái niệm

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 sử dụng trí tuệ nhân tạo (AI) giúp phân tích ngôn ngữ tự nhiên để hiểu được những gì người dùng đưa vào và sử dụng công nghệ NLP (Natural Language

Processing - Xử lý ngôn ngữ tự nhiên) để hiểu và tương tác tự nhiên với người dùng

Dialogflow hiện có sẵn các kịch bản và Dialogflow cũng được dạy khá tốt với lượng dữ liệu khá đồ sộ Chỉ tiết là đa phần Dialogflow làm việc tốt hơn với Tiếng Anh

và một số tiếng của các nước đông dân khác trong đó có tiếng Việt Ngoài ra Dialogflow

còn cho phép bạn liên kết Chatbot của bạn với Messenger hay Skype hay Slack… một cách rất đơn giản

2.5.2 Quy trình hoạt động

2.5.2.1 Về Agent Bot

Dialogflow Agent là một Chatbot ảo xử lý các cuộc trò chuyện, đối thoại với người dùng Agent là một mô-đun hiểu được ngôn ngữ tự nhiên, từ đó đọc được những sắc cảm, ngữ cảnh trong cuộc đối thoại

Dialogflow Agent Bot có thể hiểu được văn bản, hoặc giọng nói và phản hồi lại hình thức tương tự đến với người dùng Người lập trình viên có thể tạo và thiết kế một Agent để xử lý các đoạn hội thoại trong ứng dụng một cách dễ dàng Dialogflow Agent tương tự như một người hỗ trợ cuộc gọi trong các trung tâm, được đào tạo để xử lý các tình huống hội thoại dự kiến Và đặc biệt, việc đào tạo này không cần quá rõ ràng vì Agent Bot có thể tự học trong quá trình xử lý thông tin

Một Agent bao gồm:

- Agent Setting: cài đặt tùy chỉnh Bot Người lập trình có thể tùy chọn gói ngôn ngữ,cài đặt chương trình Học máy, kiểm soát hành vi của Bot thông qua cài đặt tùy chỉnh này

- Intents: Phân loại thoại người dùng có thể sử dụng trong quá trình trò chuyện - Entities: Xác định và rút trích dữ liệu cụ thể từ thoại người dùng sử dụng -

Knowledge: Phân tích tài liệu và tìm câu trả lời tự động

- Integrations: Tích hợp cho các ứng dụng hoặc dịch vụ tương tác khác (ví dụ: Google Assistant) - Fulfillment: Thực hiện kết nối với dịch vụ tích hợp khác

2.5.2.2 Về Intent

Intent (Intention) được sử dụng để phân loại thoại người dùng nhập vào trong một cuộc nói chuyện Mỗi Bot sẽ có thể được định nghĩa nhiều Intent, cũng như có thể kết hợp và phân cấp các Intent để tạo thành một cuộc trò chuyện hoàn chỉnh Khi người dùngnhập vào một lời thoại, ChatBot DialogFlow sẽ thực hiện đối sánh lời thoại đó, tìm ra Intent phù hợp nhất rồi gửi phản hồi trở lại Việc thực hiện đối sánh lời thoại này còn được gọi là phân loại Intent (Intent classification)

Một Intent cơ bản bao gồm những phần như sau:

- Training phrases: Cụm từ đào tạo trong Intent Đây là những cụm từ mà người dùng có thể nói khi trò chuyện cùng Chatbot Khi lời thoại nhập vào tương đối giống với một cụm

từ nào trong Training phrases, Dialogflow ChatBot sẽ truy cập vào Intent đấy, thực hiện nội dung Action và phản hồi phần Responses của Intent Nhờ vào khả năng học hỏi bằng

trí tuệ nhân tạo, Dialogflow có thể tự mở rộng cụm từ học được tương tự cụm từ bạn đã nhập vào Training phrases, từ đó tăng khả năng phân loại Intent và giúp giảm thiểu thời gian cho người lập trình - Action: Hành động của một Intent, có thể điều chỉnh tùy ý Khi một Intent được đối sánh trùng khớp với thoại người dùng nhập vào, Chatbot sẽ cungcấp phần Action cho hoạt động của Intent để kích hoạt một số hành động nhất định do người tạo quy định

- Parameters: Tham số trong Intent Khi một Intent được đối sánh trùng khớp, Dialogflow

sử dụng Parameters để cung cấp các giá trị được trích xuất từ lời thoại người dùng Mỗi tham số có một kiểu, được gọi theo kiểu của Entity mà đã thể hiện đúng bản chất của tham số Không giống như lời thoại đầu vào thô của người dùng cuối, các tham số là dữ liệu có cấu trúc có thể dễ dàng được sử dụng để thực hiện một số logic hoặc tạo phản hồi

- Responses: Thoại phản hồi của Intent, có thể là kiểu văn bản, kiểu giọng nói hoặc hình ảnh Dialogflow Chatbot có thể cung cấp đa dạng thoại phản hồi, như là trả lời câu hỏi, đặt câu hỏi, hoặc chấm dứt cuộc trò chuyện

Một Intent phức tạp còn có thể có thêm những phần sau:

- Contexts: Ngữ cảnh của Intent Tương tự trong thực tế, khi giao tiếp, chúng ta cần phải

có ngữ cảnh để hiểu người đó đang đề cập đến điều gì Như vậy, để Dialogflow Chatbot hiểu được thoại của người dùng nhập vào, thì cần xác định được những ngữ cảnh khớp chính xác Contexts trong Intent sẽ bao gồm Lifespan, tương ứng với số thoại tiếp theo

mà Chatbot nhận được, là sẽ ngầm hiểu được đó vẫn nằm trong ngữ cảnh của Intent Một cách đơn giản, Lifespan là vòng đời của ngữ cảnh, khi tồn tại Lifespan, Chatbot sẽ ngàm hiểu thoại người dùng vẫn thuộc về Intent đó

- Events: Sự kiện trong Intent Intent có thể được hoạt động khi một sự kiện cụ thể xảy

ra, thay vì phải nhận thoại của người dùng cuối nhập vào

2.5.2.4 Cách Bot xử lý input để đưa ra output

Đầu tiên, người dùng nhập vào lời thoại, và gửi đến Dialogflow Chatbot thông qua Google Cloud

Sau khi nhận được lời thoại, Agent Bot đối sách với các cụm từ Training phrases Intent

đã được tạo, lấy ra Intent trùng khớp

Tiếp theo, Bot truy cập vào Intent đó và thực hiện những phần bên trong (Contexts, Action and parameters, Response )

Cuối cùng, Bot trả về lời thoại trong Response và thể hiện phản hồi đến với người dùng

2.6 Kommunicate

Kommunicate là một nền tảng dịch vụ chat và hỗ trợ khách hàng được xây dựngtrên cơ sở của công nghệ trí tuệ nhân tạo Nó cung cấp các công cụ và tính năng cho phépdoanh nghiệp tạo và quản lý các trò chuyện trực tuyến, chatbot và hệ thống hỗ trợ kháchhàng một cách dễ dàng và hiệu quả

Với Kommunicate, bạn có thể tích hợp các chức năng chat trực tiếp vào ứng dụng

di động, trang web hoặc ứng dụng tin nhắn khác, giúp cung cấp trải nghiệm tương táctrực tiếp và tiện lợi cho khách hàng của bạn Các tính năng chính của Kommunicate baogồm:

1 Tích hợp chatbot: Kommunicate cho phép bạn xây dựng và tích hợp chatbot vào

hệ thống của mình Chatbot có thể tự động trả lời các câu hỏi phổ biến, cung cấp thôngtin và hướng dẫn, giúp giảm thiểu thời gian và công sức của nhân viên hỗ trợ

2 Quản lý trò chuyện: Kommunicate cung cấp các công cụ quản lý trò chuyện mạnh

mẽ để giúp bạn theo dõi và quản lý các cuộc trò chuyện của khách hàng Bạn có thể xemlịch sử trò chuyện, phân loại và đánh giá trò chuyện, gửi tin nhắn mẫu và nhiều hơn nữa

3 Tích hợp nền tảng: Kommunicate cho phép tích hợp với nhiều nền tảng và ứngdụng khác nhau như iOS, Android, web, Facebook Messenger, Slack, v.v Điều này giúpbạn mở rộng phạm vi tương tác với khách hàng trên nhiều kênh và nền tảng khác nhau.

4 Hỗ trợ nhiều ngôn ngữ: Kommunicate hỗ trợ đa ngôn ngữ, cho phép bạn tương tácvới khách hàng trên toàn cầu và cung cấp dịch vụ hỗ trợ trong ngôn ngữ mà họ hiểu

5 Hệ thống nhận diện và phân loại ngữ cảnh: Kommunicate sử dụng công nghệ xử

lý ngôn ngữ tự nhiên (NLP) để nhận diện và phân loại ngữ cảnh của cuộc trò chuyện.Điều này giúp cung cấp phản hồi chính xác và phù hợp dựa trên nhu cầu và yêu cầu củakhách hàng

6 Tích hợp công cụ bên thứ ba: Kommunicate cho phép bạn tích hợp các công cụ vàdịch vụ bên thứ ba như CRM, Helpdesk, và nhiều hơn nữa Điều này giúp tối ưu hóa quátrình làm việc và tăng cường khả năng quản lý thông tin của doanh nghiệp

7 Giao diện tùy chỉnh: Kommunicate cung cấp khả năng tùy chỉnh giao diện ngườidùng, cho phép bạn thiết kế trải nghiệm chat theo ý muốn và tương thích với thương hiệucủa bạn

8 Thống kê và báo cáo: Kommunicate cung cấp các báo cáo và thống kê chi tiết vềhoạt động chatbot và trò chuyện của khách hàng Bạn có thể theo dõi hiệu suất, đánh giá

và cải thiện trải nghiệm khách hàng dựa trên các dữ liệu này

Liên kết giữa Dialogflow và Kommunicate cho phép bạn tận dụng các tính năng mạnh

mẽ của cả hai nền tảng Bạn có thể sử dụng Dialogflow để xây dựng và huấn luyệnchatbot thông qua việc định nghĩa các intent và entity, sau đó tích hợp chatbot vàoKommunicate để cung cấp trải nghiệm chat trực tuyến và hỗ trợ khách hàng

Kết hợp giữa Dialogflow và Kommunicate giúp bạn tạo ra một hệ thống chatbot và hỗ trợkhách hàng mạnh mẽ và toàn diện, cho phép tương tác tự nhiên với người dùng và cungcấp trợ giúp và hỗ trợ khách hàng một cách hiệu quả

CHƯƠNG 3: PHÂN TÍCH HỆ THỐNG

3.1 Kiến trúc hệ thống

- Trang web được xây dựng trên nền MERN STACK

- Sử dụng API để kết nối với MongoDB

3.2 Mô hình kiến trúc hệ thống

Kiến trúc hệ thống theo mô hình Client – Server

+ Tầng Client (là một máy tính (Host)): Tầng có khả năng nhận thông tin hoặc

sử dụng một dịch vụ cụ thể từ các nhà cung cấp dịch vụ (Server)

+ Tầng Server: Tầng cung cấp các thông tin (dữ liệu) hoặc quyền truy cập vào

các dịch vụ cụ thể

+ Tầng Web (sẽ kết nối với tầng Server & Client): Thành phần giao diện của

chương trình tương tác với người sử dụng

3.3 Mô tả chi tiết hệ thống

Mô hình client-server là một mô hình nổi tiếng trong mạng máy tính, được áp dụng rất rộng rãi và là mô hình của mọi trang web hiện có Ý tưởng của mô hình này là

máy con (đóng vai trò là máy khách) gửi một yêu cầu (request) để máy chủ (đóng vai trò

người cung ứng dịch vụ), máy chủ sẽ xử lý và trả kết quả về cho máy khách

Trong mô hình này, chương trình ứng dụng được chia thành 2 thành phần: Server và Client Client hay còn gọi là máy khách, nó bao gồm máy tính và các thiết bị điện tử nói chung Server hay còn gọi là máy chủ, là nơi cài đặt các chương trình dịch vụ và lưu trữ

tài nguyên

Việc yêu cầu của máy khách, đáp ứng, xử lý, và phản hồi của máy chủ tạo thành

một dịch vụ Dịch vụ này hoạt động trên nền web nên nó được gọi là dịch vụ web

(hay web service)

Ngoài ra, việc giao tiếp giữa Client với Server phải dựa trên các giao thức chuẩn

Các giao thức chuẩn được sử dụng phổ biến nhất hiện nay là : giao thức TCP/IP,

giao thức SNA của IBM, OSI, ISDN, X.25 hay giao thức LAN-to-LAN NetBIOS

● Client

Khi nói đến Client (khách hàng), thì nó có nghĩa là một người hay một tổ chức sử

dụng một dịch vụ cụ thể nào đó Trong thế giới kỹ thuật số cũng tương tự như

vậy Client là một máy tính (Host), tức là có khả năng nhận thông tin hoặc sử

dụng một dịch vụ cụ thể từ các nhà cung cấp dịch vụ (Server)

● Sever

Tương tự như vậy, khi nói đến Server thì nó có nghĩa là một máy chủ hay một

phương tiện phục vụ các dịch vụ nào đó Trong lĩnh vực công nghệ thì Server là

một máy tính từ xa Nó cung cấp các thông tin (dữ liệu) hoặc quyền truy cập vào

các dịch vụ cụ thể Vì vậy, về cơ bản thì trong mô hình Client và Server, Client là

đối tượng yêu cầu một thứ gì đó Server thì phục vụ nó, miễn là nó có mặt trong

cơ sở dữ liệu

3.4 Mô hình thiết kế hệ thống Backend

Model: Lưu trữ tất cả dữ liệu của ứng dụng Bộ phận này là cầu nối giữa cơ sở

dữ liệu quản lý cả nhân và trình bày giao diện người dùng Cho phép người dùng có thểnhập và xuất đến các cơ sở dữ liệu lần lượt theo quyền của họ khi cần thiết và dữ liệu

sẽ được lưu dữ trên database

View: giao diện người dùng, nơi người dùng có thể lấy được thông tin dữ liệu

của MVC thông qua các công thức truy vấn và ghi lại hoạt động của người dùng để

tương tác với Controller

Controller: xử lý yêu cầu từ người dùng thông qua View Từ đó, Controller gửi

dữ liệu hợp lý đến người dùng bằng các kết nối đến Models và trưng bày nó trên Viewcho người dùng

CHƯƠNG 4 THIẾT KẾ VÀ TRIỂN KHAI HỆ THỐNG 4.1 Tổng quan sơ đồ Use-case

4.2 Danh sách các Actor

1 User Bắt buộc phải có tài khoản để đăng nhập vào ứng

dụng để sử dụng chức năng

2 Admin Người dùng sở hữu tài khoản nội bộ, quản lý toàn

hoạt động của ứng dụng và cửa hàng

4.3 Danh sách Use-case

email, mật khẩu để truy cập vào hệ thống

tin chi tiết của sản phẩm

thêm sản phẩm cần mua vào giỏ hàng

sản phẩm có trong giỏ hàng

10 View Coupon Code User, Admin Nhấn để xem các

mã giảm giá được hiển thị

xác nhận các thông tin của đơn hàng

có thể xem các sản phẩm đã đặt mua

sản phẩm khi đã giao hàng thành công

thống kê sản phẩm theo khoảng thời gian

15 Manage Profile Admin Admin Có thể quản lý tài

các mã giảm giá chođơn hàng

thông tin đơn hàng

mà Khách hàng đã mua

21 Reply to Review Admin Khi Khách hàng có

câu hỏi về sản phẩm, Admin có thểphản hồi lại

22 Compare Product User, Admin Khách hàng có thể

chọn 2 sản phẩm khác nhau để so sánh(tên, giá, chi tiết sản phẩm)

4.4 Đặc tả Use-case và Sơ đồ Hoạt động

4.4.1 Login

Use-case name Login

Description Sử dụng email, mật khẩu để đăng nhập vào hệ thống

Trigger User nhấn vào nút “Login”

Pre-condition Hệ thống cần phải kết nối với Internet

Tài khoản phải đăng ký trước đó

Post-condition Hệ thống vẫn có sẵn cho mục đích sử dụng khác.

Basic flow 1 Người dùng nhấn vào nút “Login” tài khoản trên thanhHeader

2 Hệ thống điều hướng người dùng đến trang Login

3 Người dùng điền đầy đủ thông tin tài khoản

4 Hệ thống thông báo đăng nhập thành công vào website và chuyển hướng người dùng đến màn hình trang chủ

Alternative flow 1 Nếu loại tài khoản là của Khách hàng, hệ thống sẽ chuyển

Login for User

Login for Admin

4.4.2 Sign up for User

Use-case name Sign up

Description User nhập các thông tin cơ bản để đăng ký tài khoản

Trigger User nhấn vào nút “Create Account”

Pre-condition Hệ thống cần phải kết nối với Internet

Post-condition Hệ thống vẫn có sẵn cho mục đích sử dụng khác.

Basic flow Người dùng bấm biểu tượng tài khoản trên Header

2 Hệ thống điều hướng người dùng đến trang Login

3 Người dùng chọn nút nút “Create Account”

4 Người dùng điền đầy đủ các thông tin cần thiết

5 Hệ thống sẽ thông báo người dùng đăng ký thành công và thêm tài khoản vào database

Alternative flow Không

Exception flow Thêm phần xác minh email và số điện thoại đăng ký

4.4.3 Logout

Use-case name Logout

Description User đăng xuất khỏi tài khoản hiện tại

Trigger User nhấn vào nút “Log out”

Pre-condition Hệ thống cần phải kết nối với Internet

Đã đăng nhập vào hệ thống

Post-condition Hệ thống vẫn có sẵn cho mục đích sử dụng khác.

Basic flow Người dùng bấm biểu tượng tài khoản trên Header

2 Hệ thống điều hướng người dùng đến trang Login

3 Người dùng chọn nút nút “Log out”

Alternative flow Không

Exception flow Không

4.4.4 View Product List

Use-case name View Product List

Description User xem danh sách sản phẩm

Trigger User nhấn vào trang “Product”

Pre-condition Hệ thống cần phải kết nối với Internet

Đã đăng nhập vào hệ thống

Post-condition Hệ thống vẫn có sẵn cho mục đích sử dụng khác.

Basic flow 1 Người dùng bấm biểu tượng tài khoản trên Header

2 Hệ thống điều hướng người dùng đến trang Login

3 Người dùng nhấn vào trang “Product”

Alternative flow Không

Exception flow Không

4.4.5 Search Product

Use-case name Search Product

Description User tìm kiếm sản phẩm theo tên

Trigger User nhấn vào icon “search”

Pre-condition Hệ thống cần phải kết nối với Internet

Đã đăng nhập vào hệ thống

Post-condition Hệ thống vẫn có sẵn cho mục đích sử dụng khác.

Basic flow 1 Người dùng bấm biểu tượng tài khoản trên Header

2 Hệ thống điều hướng người dùng đến trang Đăng nhập

3 Người dùng điền đầy đủ thông tin tài khoản

4 Hệ thống thông báo đăng nhập thành công vào website và chuyển hướng người dùng đến màn hình thích hợp

5 Người dùng nhập tên sản phẩm và nhấn tìm kiếm

6 Hệ thống điều hướng người dùng đến trang Danh sách sản phẩm

Alternative flow Không

Exception flow Không