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

<span class="text_page_counter">Trang 1</span><div class="page_container" data-page="1">

<b>BỘ GIÁO DỤC VÀ ĐÀO TẠO</b>

<b>TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TINKHOA CÔNG NGHỆ PHẦN MỀM</b>

<b>Lớp : SE122.O11.PMCL</b>

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

</div><span class="text_page_counter">Trang 2</span><div class="page_container" data-page="2">

<b>NHẬN XÉT </b>

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

</div><span class="text_page_counter">Trang 3</span><div class="page_container" data-page="3">

<b>LỜI CẢM ƠN</b>

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ể hồ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 q trình làm đồ án. Qua những lời góp ý, chỉ bảocủa thầy mà nhóm có thể hồ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 q trình nhóm hồn thành đồ án.Trong q trình học tập và hồ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ể hồn thiện hơn.

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

</div><span class="text_page_counter">Trang 4</span><div class="page_container" data-page="4">

<small>1.5 Phương pháp nghiên cứu...</small>

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

<small>1.7 Khảo sát, đánh giá các website cạnh tranh...</small>

<b>CHƯƠNG 2: CƠ SỞ LÝ THUYẾT VÀ CÔNG NGHỆ...</b>

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...

</div><span class="text_page_counter">Trang 5</span><div class="page_container" data-page="5">

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

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

<b>CHƯƠNG 4. THIẾT KẾ VÀ TRIỂN KHAI HỆ THỐNG...</b>

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

4.4.18 Manage Category Product...

4.4.19 Manage Coupon Code...

</div><span class="text_page_counter">Trang 6</span><div class="page_container" data-page="6">

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.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.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ệ...

</div><span class="text_page_counter">Trang 7</span><div class="page_container" data-page="7">

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

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

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

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

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

</div><span class="text_page_counter">Trang 8</span><div class="page_container" data-page="8">

<b>CHƯƠNG 1: TỔNG QUAN</b>

<b>1.1 Lý do chọn đề tài</b>

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ệndễ 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ảnlý mọi cơng việc mua bán hàng hóa của mình trên mọi thiết bị.

Ngồ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

<i><b>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 </b></i>

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.

<b>1.2 Mục tiêu</b>

● 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.

</div><span class="text_page_counter">Trang 9</span><div class="page_container" data-page="9">

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

<b>Quản lý</b>

- 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 tốn

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

<b>1.4 Người dùng</b>

- 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

<b>1.5 Phương pháp nghiên cứu</b>

- 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 đề.

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

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:

</div><span class="text_page_counter">Trang 10</span><div class="page_container" data-page="10">

- 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 tố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

</div><span class="text_page_counter">Trang 11</span><div class="page_container" data-page="11">

+ 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

<b>1.7 Khảo sát, đánh giá các website cạnh tranh</b>

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

</div><span class="text_page_counter">Trang 12</span><div class="page_container" data-page="12">

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

Drake Chatbot Maison Website Chatbot

</div><span class="text_page_counter">Trang 13</span><div class="page_container" data-page="13">

Tư vấn chọn size tự độngLiê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

</div><span class="text_page_counter">Trang 14</span><div class="page_container" data-page="14">

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

<b>2.1 Giới thiệu về ReactJS</b>

<b>2.1.1 Khái niệm</b>

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ệu1 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.

- Giới thiệu về JSX:

JSX là một dạng ngôn ngữ cho phép viết các mã HTML trong Javascript. Đặc điểm: Faster: Nhanh hơn. JSX thực hiện tối ưu hóa trong khi biên dịch sang mã Javascript. 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. Safer: an toàn hơn. 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 q trình biên dịch. Ngồi ra, nó cũng cung cấp tính năng gỡ lỗi khi biên dịch rất tốt. Easier: Dễ dàng hơn. JSX kế thừa dựa trên

</div><span class="text_page_counter">Trang 15</span><div class="page_container" data-page="15">

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 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.

<b>2.1.2 Ưu điểm</b>

● 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.

</div><span class="text_page_counter">Trang 16</span><div class="page_container" data-page="16">

● 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 ở ngồ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.

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.

<b>2.1.3 Nhược điểm</b>

● Reactjs chỉ phục vụ cho tầng View. React chỉ là View Library nó khơng phải là một MVC framework như những framework khác. Đây chỉ là thư viện của Facebook giúp render ra phần view. Vì thế React sẽ khơng có phần Model và Controller, mà phải kết hợp với các thư viện khác. React cũng sẽ không có 2-way binding hay là Ajax

● 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 hồn chỉnh

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

<b>2.2 Giới thiệu về MongoDB</b>

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

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.

</div><span class="text_page_counter">Trang 17</span><div class="page_container" data-page="17">

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.

<b>2.2.2 Ưu điểm </b>

Ư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 q 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.

</div><span class="text_page_counter">Trang 18</span><div class="page_container" data-page="18">

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:

</div><span class="text_page_counter">Trang 19</span><div class="page_container" data-page="19">

<b>2.3 Giới thiệu về NodeJS</b>

<b>2.3.1 Khái niệm</b>

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ể.

<b>2.3.2 Ưu điểm</b>

● 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 q 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ạngxã hội …

</div><span class="text_page_counter">Trang 20</span><div class="page_container" data-page="20">

<b>2.2.3 Nhược điểm</b>

● 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 ngun 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.

<b>2.4 Express Framework2.4.1 Khái niệm</b>

Express là một framework phát triển ứng dụng web trong Node.js. Nó giúp đơn giản hóa việc xây dựng các ứng dụng web bằng cách cung cấp các phương thức và công cụ cần thiết để xử lý các yêu cầu HTTP, quản lý định tuyến (routing), và tạo các ứng dụng web động.

<b>2.4.2 Ưu điểm</b>

● Dễ học và sử dụng: Express có cú pháp đơn giản và dễ hiểu, giúp người phát triển nhanh chóng làm quen và bắt đầu xây dựng ứng dụng. Nó giúp giảm thiểu độ phứctạp của việc phát triển ứng dụng web và tập trung vào việc xây dựng các tính năngchính.

● 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ã.

</div><span class="text_page_counter">Trang 21</span><div class="page_container" data-page="21">

● 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.

<b>2.4.3 Nhược điểm</b>

● 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.

<b>2.5 Chatbot - DialogFlow 2.5.1 Khái niệm</b>

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. Ngồi ra Dialogflow

</div><span class="text_page_counter">Trang 22</span><div class="page_container" data-page="22">

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.

<b>2.5.2 Quy trình hoạt động 2.5.2.1 Về Agent Bot </b>

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 q rõ ràng vì Agent Bot có thể tự học trong q 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 số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 q 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.

<b>2.5.2.2 Về Intent </b>

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 hồ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ụmtừ 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

</div><span class="text_page_counter">Trang 23</span><div class="page_container" data-page="23">

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, Dialogflowsử 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.

<b>2.5.2.3 Về Entity </b>

Mỗi Parameter của Intent có một kiểu Entity, cho biết chính xác kiểu dữ liệu của cụm từ được trích xuất từ thoại người dùng nhập vào. Dialogflow Chatbot cung cấp nhiều Entity mà có thể cùng đối sánh trùng hợp với dữ liệu lời thoại. Entity có thể được tạo tùy chỉnh, với mỗi mục đích riêng.

</div><span class="text_page_counter">Trang 24</span><div class="page_container" data-page="24">

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

Đầ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.

<b>2.6 Kommunicate</b>

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ụngdi độ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àohệ 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ạnhmẽ để 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.

</div><span class="text_page_counter">Trang 25</span><div class="page_container" data-page="25">

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 qtrì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ạnhmẽ 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ả.

</div><span class="text_page_counter">Trang 26</span><div class="page_container" data-page="26">

<b>CHƯƠNG 3: PHÂN TÍCH HỆ THỐNG</b>

<b>3.1 Kiến trúc hệ thống </b>

<b>- Trang web được xây dựng trên nền MERN STACK. </b>

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

<i><b>3.2 Mơ hình kiến trúc hệ thống </b></i>

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

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

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

<b>+ 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 </b>

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

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

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

<b>3.3 Mơ tả chi tiết hệ thống</b>

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à

<b>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ò</b>

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

<b>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óichung. 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ữ </b>

tài nguyên.

</div><span class="text_page_counter">Trang 27</span><div class="page_container" data-page="27">

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ànhmộ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.

<b>● Client </b>

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).

<b>● Sever </b>

Tương tự như vậy, khi nói đến Server thì nó có nghĩa là một máy chủ hay mộtphươ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àocá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 trongcơ sở dữ liệu.

<b>3.4 Mơ hình thiết kế hệ thống Backend</b>

<i>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ở</i>

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ệusẽ được lưu dữ trên database.

<i>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</i>

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

</div><span class="text_page_counter">Trang 28</span><div class="page_container" data-page="28">

<i>Controller: xử lý yêu cầu từ người dùng thơng qua View. Từ đó, Controller gửi</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

<b>CHƯƠNG 4. THIẾT KẾ VÀ TRIỂN KHAI HỆ THỐNG </b>

<b>4.1 Tổng quan sơ đồ Use-case</b>

<b>4.2 Danh sách các Actor</b>

</div><span class="text_page_counter">Trang 29</span><div class="page_container" data-page="29">

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.

<b>4.3 Danh sách Use-case</b>

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

cơ bản để đăng ký

ra khỏi hệ thống4 View Product List User, Admin Có thể xem được

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

</div><span class="text_page_counter">Trang 30</span><div class="page_container" data-page="30">

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 khoản Admin

sách các khách hàng

sách các sản phẩm18 Manage Category Product Admin Quản lý danh mục

sản phẩm

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

thông tin đơn hàng mà Khách hàng đã mua

</div><span class="text_page_counter">Trang 31</span><div class="page_container" data-page="31">

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)

</div><span class="text_page_counter">Trang 32</span><div class="page_container" data-page="32">

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

<b>4.4.1. Login</b>

Use-case name <b>^Login</b>

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 InternetTà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 thanh}_Header2. 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 hướng đến trang chủ

2. Nếu loại tài khoản là tài khoản Admin, hệ thống sẽ chuyển hướng đến trang quản lý dành cho Admin

Exception flow Khơng có

</div><span class="text_page_counter">Trang 33</span><div class="page_container" data-page="33">

<b>Login for User</b>

</div><span class="text_page_counter">Trang 34</span><div class="page_container" data-page="34">

<b>Login for Admin</b>

<b>4.4.2. Sign up for User</b>

Use-case name <b>^{Sign up}</b>

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”

</div><span class="text_page_counter">Trang 35</span><div class="page_container" data-page="35">

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ý

</div><span class="text_page_counter">Trang 36</span><div class="page_container" data-page="36">

<b>4.4.3. Logout</b>

Use-case name <b>^Logout</b>

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.}

</div><span class="text_page_counter">Trang 37</span><div class="page_container" data-page="37">

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

<b>4.4.4. View Product List</b>

Use-case name <b>^{View Product List}</b>

</div><span class="text_page_counter">Trang 38</span><div class="page_container" data-page="38">

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

</div><span class="text_page_counter">Trang 39</span><div class="page_container" data-page="39">

<b>4.4.5. Search Product</b>

Use-case name <b>^{Search Product}</b>

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.}

</div><span class="text_page_counter">Trang 40</span><div class="page_container" data-page="40">

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ập3. 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

</div>