Khóa Luận Xây Dựng Website Thương Mại Điện Tử Với Chatbot

Khóa luận trình bày cách xây dựng website thương mại điện tử tích hợp chatbot, nâng cao trải nghiệm khách hàng và tối ưu hóa quy trình bán hàng.

• Tác giả: Trần Đoàn Phương
• Người hướng dẫn: Th.S Trần Thị Hồng Yến
• Trường học: Đại học Quốc gia TP. Hồ Chí Minh
• Chuyên ngành: Kỹ sư ngành kỹ thuật phần mềm
• Đề tài: Xây dựng website thương mại điện tử với chatbot
• Loại tài liệu: khóa luận tốt nghiệp
• Năm xuất bản: 2023
• Địa điểm: Thành phố Hồ Chí Minh

Mục lục chi tiết

• 1. CHƯƠNG 1: GIỚI THIỆU ĐỀ TÀI
• 1.1. Lí do chọn đề tài
• 1.2. Mô tả sản phẩm
• 1.3. Chức năng chính
• 1.4. Công nghệ sử dụng
• 1.5. Thông tin nhóm
• 2. CHƯƠNG 2: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG
• 2.1. Mô hình hệ thống
• 2.2. Danh sách các use-case
• 2.3. Đặc tả use-case
• 2.3.1. Use-case “Đăng nhập”
• 2.3.2. Use-case “Đăng ký”
• 2.3.3. Use-case “Đăng xuất”
• 2.3.4. Use-case “Quản lý thông tin cá nhân”
• 2.3.5. Use-case “Mua hàng”
• 2.3.6. Use-case “Tra cứu đơn hàng”
• 2.3.7. Use-case “Chat với người bán”
• 2.3.8. Use-case “Bán hàng”
• 2.3.9. Use-case “Tra cứu đơn bán”
• 2.3.10. Use-case “Quản lý thông tin sản phẩm”
• 2.3.11. Use-case “Quản lý kho hàng”
• 2.3.12. Use-case “Thống kê”
• 2.3.13. Use-case “Quản lý mã giảm giá”
• 2.4. Thiết kế dữ liệu
• 3. CHƯƠNG 3: XÂY DỰNG WEBSITE
• 3.1. Thiết kế giao diện
• 3.1.1. Danh sách màn hình
• 3.1.2. Màn hình “Đăng nhập”
• 3.1.3. Màn hình “Đăng ký”
• 3.1.4. Màn hình “Trang chủ”
• 3.1.5. Màn hình “Danh sách sản phẩm”
• 3.1.6. Màn hình “Chi tiết sản phẩm”
• 3.1.7. Màn hình “Giỏ hàng”
• 3.1.8. Màn hình “Yêu thích”
• 3.1.9. Màn hình “Yêu cầu đăng nhập”
• 3.1.10. Màn hình “Hồ sơ”
• 3.1.11. Màn hình “Cửa hàng”
• 3.1.12. Màn hình “Đơn mua”
• 3.1.14. Màn hình “Tài khoản”
• 3.1.15. Màn hình “Thêm sản phẩm”
• 3.1.16. Màn hình “Mã giảm giá”
• 3.1.17. Màn hình “Chi tiết đơn mua”
• 3.1.18. Màn hình “Chi tiết đơn bán”
• 3.1.19. Màn hình “Sửa sản phẩm”
• 3.1.20. Màn hình “Thêm mã giảm giá”
• 3.1.21. Màn hình “Cập nhật mã giảm giá”
• 3.2. Chatbot hỗ trợ
• 3.2.1. Giới thiệu về chat bot FPT
• 3.2.2. Danh sách chức năng sử dụng
• 3.2.3. Chi tiết chức năng
• 3.2.4. Một số kịch bản đã xây dựng
• TÀI LIỆU THAM KHẢO

Tóm tắt

I. Giới thiệu về Xây Dựng Website Thương Mại Điện Tử Kết Hợp Chatbot

Trong thời đại số hóa hiện nay, xây dựng website thương mại điện tử đã trở thành một xu hướng tất yếu. Việc tích hợp chatbot cho website không chỉ giúp nâng cao trải nghiệm người dùng mà còn tối ưu hóa quy trình bán hàng. Chatbot, với khả năng tương tác tự động, giúp doanh nghiệp tiết kiệm thời gian và nguồn lực trong việc chăm sóc khách hàng.

1.1. Tại sao cần xây dựng website thương mại điện tử

Sự phát triển của thương mại điện tử đã mở ra nhiều cơ hội cho doanh nghiệp. Website thương mại điện tử giúp tiếp cận khách hàng một cách nhanh chóng và hiệu quả hơn. Theo thống kê, doanh thu từ thương mại điện tử đã tăng trưởng mạnh mẽ trong những năm qua.

1.2. Lợi ích của việc tích hợp chatbot vào website

Chatbot giúp cải thiện trải nghiệm người dùng bằng cách cung cấp thông tin nhanh chóng và chính xác. Nó cũng hỗ trợ trong việc tăng doanh thu trực tuyến thông qua việc tư vấn và giải đáp thắc mắc cho khách hàng ngay lập tức.

II. Thách thức trong việc xây dựng website thương mại điện tử

Mặc dù có nhiều lợi ích, việc xây dựng website thương mại điện tử cũng gặp phải không ít thách thức. Các vấn đề như bảo mật thông tin, tối ưu hóa website và khả năng tương tác của chatbot là những yếu tố cần được chú trọng.

2.1. Vấn đề bảo mật thông tin khách hàng

Bảo mật thông tin là một trong những thách thức lớn nhất trong thương mại điện tử. Doanh nghiệp cần đảm bảo rằng dữ liệu của khách hàng được bảo vệ an toàn trước các mối đe dọa từ hacker.

2.2. Tối ưu hóa website cho trải nghiệm người dùng

Một website không được tối ưu hóa có thể dẫn đến việc khách hàng rời bỏ trang. Việc sử dụng công nghệ mới và thiết kế giao diện thân thiện là rất quan trọng để giữ chân khách hàng.

III. Phương pháp xây dựng website thương mại điện tử hiệu quả

Để xây dựng một website thương mại điện tử thành công, cần áp dụng các phương pháp và công nghệ hiện đại. Việc sử dụng công nghệ chatbot là một trong những giải pháp hiệu quả nhất.

3.1. Sử dụng công nghệ hiện đại trong xây dựng website

Việc áp dụng các công nghệ như HTML, CSS, JavaScript và các framework như ReactJS giúp tạo ra một website hiện đại và dễ sử dụng. Điều này không chỉ giúp cải thiện hiệu suất mà còn nâng cao trải nghiệm người dùng.

3.2. Tích hợp chatbot vào quy trình bán hàng

Chatbot có thể được tích hợp vào website để hỗ trợ khách hàng trong việc tìm kiếm sản phẩm, đặt hàng và giải đáp thắc mắc. Điều này giúp tăng cường sự hài lòng của khách hàng và tăng doanh thu trực tuyến.

IV. Ứng dụng thực tiễn của website thương mại điện tử kết hợp chatbot

Nhiều doanh nghiệp đã áp dụng mô hình này và đạt được những kết quả tích cực. Việc tích hợp chatbot không chỉ giúp cải thiện dịch vụ khách hàng mà còn tối ưu hóa quy trình bán hàng.

4.1. Các doanh nghiệp thành công với mô hình này

Nhiều doanh nghiệp lớn như Shopee và Lazada đã áp dụng chatbot để nâng cao trải nghiệm khách hàng. Họ đã ghi nhận sự gia tăng đáng kể trong doanh thu và sự hài lòng của khách hàng.

4.2. Kết quả nghiên cứu về hiệu quả của chatbot

Nghiên cứu cho thấy rằng việc sử dụng chatbot có thể giảm thiểu thời gian phản hồi và tăng cường sự tương tác với khách hàng, từ đó nâng cao tỷ lệ chuyển đổi.

V. Kết luận và tương lai của website thương mại điện tử kết hợp chatbot

Tương lai của thương mại điện tử sẽ ngày càng phát triển mạnh mẽ với sự hỗ trợ của công nghệ. Việc xây dựng website kết hợp với chatbot sẽ trở thành xu hướng tất yếu trong ngành thương mại điện tử.

5.1. Xu hướng phát triển của thương mại điện tử

Dự báo rằng thương mại điện tử sẽ tiếp tục tăng trưởng trong những năm tới, với sự gia tăng của các công nghệ mới và sự thay đổi trong hành vi tiêu dùng.

5.2. Tương lai của chatbot trong thương mại điện tử

Chatbot sẽ ngày càng trở nên thông minh hơn nhờ vào sự phát triển của trí tuệ nhân tạo, giúp cải thiện hơn nữa trải nghiệm người dùng và tối ưu hóa quy trình bán hàng.

Trích đoạn nội dung tài liệu

Chương 1. Giới thiệu đề tài: giới thiệu tổng quan về đề tài. Cơ sở lý thuyết: tóm tắt lý thuyết về các công nghệ được sử dụng trong sản phẩm đề tài. Phân tích và thiết kế hệ thống: mô tả mô hình hệ thống, các sơ đồ use-case ứng với mỗi tính năng, phân tích và thiết kế dữ liệu chi tiết.

Xây dựng website: trình bày bản thiết kế giao diện chi tiết và triển khai chatbot trong ứng dụng. - Kết luận: nhận xét về ưu điểm, khuyết điểm, và hướng phát triển trong tương lai. GIỚI THIỆU ĐỀ TÀI 1.1 Tên đề tài - Xây dựng website thương mại điện tử với chatbot. - Building an e-commerce website with a chatbot.2 Lí do chọn đề tài Với sự phát triển nhanh chóng của ngành thương mại điện tử, mua sắm online dần trở nên quen thuộc với tất cả mọi người, ở mọi lứa tuổi.

Các sàn thương mại điện tử lớn hiện nay như Shopee, Lazada, Tiki đều có phát triển ứng dụng trên mobile để dễ dàng truy cập trên điện thoại. Tuy nhiên, ứng dụng di động không thể thay thế hoàn toàn được website, bởi tính thuận tiện của nó. Trang web có thể truy cập ở bất cứ đâu một cách dễ dàng mà không cần cài đặt gì cả, chỉ cần một trình duyệt và có kết nối Internet. Mong muốn của chúng em là tự tạo nên một website thương mại điện tử dành riêng cho mình, có tích hợp chatbot tương tác tự động với khách hàng và giúp khách hàng dễ dàng tra cứu thông tin.

Đó là lí do nhóm em chọn đề tài này.3 Mô tả sản phẩm - Ứng dụng hỗ trợ người dùng mua hàng, bán hàng trực tuyến. - Triển khai trên môi trường web.4 Chức năng chính - Quản lý tài khoản: Đăng nhập, đăng ký, đổi mật khẩu. - Quản lý sản phẩm theo danh mục. - Rao bán sản phẩm.

- Quản lý thông tin sản phẩm. - Mua sản phẩm. - Đánh dấu yêu thích để mua sau. - Quản lý đơn hàng đã mua, đã bán.

- Hệ thống đánh giá sản phẩm. 2 - Quản lý thông tin cá nhân. - Quản lý mã giảm giá. - Chat với người bán.

- Quản lý kho hàng. - Hỗ trợ thanh toán online. - Chatbot hỗ trợ.5 Công nghệ sử dụng - Figma: lên bản thiết kế giao diện. - HTML, CSS, JavaScript với thư viện React.JS: cài đặt front-end.js với framework Express.JS: cài đặt back-end.io: cung cấp khả năng chat real-time.

- MongoDB: cơ sở dữ liệu. - Github: quản lý mã nguồn.6 Thông tin nhóm Bảng 1.1 Thông tin thành viên nhóm STT Tên thành viên Mã sinh viên Email 1 Trần Đoàn Phương 19520230 [e-mail] 2 Đỗ Đức Tâm 19520253 [e-mail] 3 Chương 2.1 HTML - HTML là viết tắt của cụm tử Hyper Text Markup Language 5 – ngôn ngữ đánh dấu siêu văn bản. - HTML dùng để xây dựng nội dung của trang web, bao gồm các thành phần hình ảnh, văn bản, âm thanh, … - HTML được tạo ra bởi một nhà vật lý học thuộc trung tâm nghiên cứu CERN của Thuỵ Sỹ, Tim Berners Lee. Hiện nay HTML đã trở thành một chuẩn Internet để phát triển website.

- Phiên bản đầu tiên của HTML được công bố lần đầu tiên vào năm 1991, bao gồm 18 thẻ cơ bản. - Các phiên bản tiếp theo của HTML lần lượt được phát hành: HTML2, HTML3, HTML4, và mới nhất là HTML5. Qua mỗi phiên bản, các tính năng được bổ sung và hoàn thiện hơn. Hiện nay HTML5 bao gồm khoảng 140 thẻ.1 Cấu trúc file HTML căn bản 4 2.2 CSS - CSS là viết tắt của cụm từ Cascading Style Sheets.

- CSS được sử dụng để định dạng cho các phần tử HTML, giúp các thành phần trên trang web được hiển thị rõ ràng, hợp lý và đẹp mắt hơn. - CSS được tạo ra bởi Håkon Wium Lie và Bert Bos, ra mắt lần đầu tiên vào ngày 10 tháng 10 năm 1994. Vào thời điểm đó, Lie đang làm việc với Tim Berners-Lee (cha đẻ của HTML) tại CERN. Một số ngôn ngữ định dạng cho trang web cũng được đề xuất cùng với CSS, nên đến năm 1996, phiên bản CSS1 mới chính thức được phát hành.

- Qua các năm, CSS được phát triển lần lượt các phiên bản CSS2, CSS2.1, CSS3 và mới nhất là CSS4. Qua các phiên bản, CSS có nhiều nâng cấp về sự đa dạng thuộc tính, phân chia module. - Ví dụ một đoạn mã CSS đơn giản để thiết lập màu chữ và kích thước chữ cho thẻ <body> Hình 2.2 Cấu trúc CSS cơ bản 2.3 JavaScript - JavaScript là một ngôn ngữ lập trình thông dịch được sử dụng ở cả phía máy chủ và máy khách, được xây dựng dựa trên cú pháp của Java. Cú pháp của JavaScript có nhiều điểm tương đồng với Java.

- JavaScript chủ yếu được sử dụng cho các website nhằm cung cấp cho người dùng trải nghiệm tốt hơn, bao gồm các chức năng: tự động cập nhật trang web, thay đổi nội dung trên trang web, thông báo, xử lý sự kiện, … 5 - Phiên bản đầu tiên của JavaScrip tên là Mocha, ra mắt vào tháng 5 năm 1995, đổi tên thành LiveScript vào tháng 9 năm 1995, và được đổi tên thành JavaScript vào tháng 12 năm 1995. - Ngày nay, JavaScript trở nên vô cùng phổ biến. Hàng loạt các framework và thư viện được xây dựng dựa trên ngôn ngữ JavaScript ra đời, được sử dụng rộng rãi để phát triển các ứng dụng web trên máy khách, điển hình gồm ReactJS, AngularJS, VueJS. - Cách hoạt động của JavaScript: Hình 2.3 Phương thức hoạt động của JavaScript - Khi trình duyệt tải một trang web, HTML parser bắt đầu phân tích cú pháp và tạo DOM.

Khi trình phân tích cú pháp gặp một lệnh, JavaScript engine sẽ đảm nhận việc thực thi lệnh đó. - JavaScript engine tải các tệp JavaScript và các lệnh được nhúng trong mã HTML, nhưng không chạy ngay lập tức, mà đợi HTML và CSS được phân tích hoàn tất, sau đó JavaScript mới được thực thi theo trình tự chúng được 6 tìm thấy trên trang web. Sau khi thực thi, DOM sẽ được cập nhật bởi JavaScript và hiển thị lên trình duyệt. - Trong đồ án, nhóm em đã sử dụng thư viện của JavaScript là ReactJS để xây dựng giao diện ứng dụng.4 Thư viện React.JS - ReactJS là thư viện JavaScript phổ biến nhất hiện nay để xây dựng giao diện người dùng (UI).

Các ứng dụng được xây dựng bằng ReactJS cho tốc độ phản hồi và trải nghiệm tuyệt vời, nhờ cơ chế render linh hoạt. - Thư viện ReactJS được phát triển bởi Facebook, ra mắt năm 2013, có mã nguồn mở và hoàn toàn miễn phí. Hiện nay có nhiều framework để xây dựng UI như Angular, VueJS, tuy nhiên ReactJS vẫn được tin dùng trong các ứng dụng lớn và phức tạp. - Ví dụ sử dụng ReactJS khai báo một component sử dụng cú pháp JSX: Hình 2.4 Một đoạn code trong trong ứng dụng sử dụng React - Ưu điểm của ReactJS: o Dễ sử dụng:  ReactJS có nguồn tài liệu phong phú, nên rất dễ tiếp cận đối với những người có kiến thức cơ bản về JavaScript.

 ReactJS sử dụng cú pháp JSX, cho phép người dùng viết mã HTML ngay bên trong cấu trúc. o Tái sử dụng code: 7  Các thành phần trong dự án được đóng gói theo từng phần riêng, dễ dàng trong việc quản lý cũng như tái sử dụng code.5 Một vài file components trong ứng dụng o Hiệu suất tốt hơn với Virtual DOM:  React sử dụng Virtual DOM (DOM ảo) để thực hiện việc render các components. Khi một component thay đổi hoặc thêm vào trang web, Virtual DOM sẽ nạp component vào như một node trên cây hiển thị, sau đó tự động thực hiện việc thêm vào DOM thực sao cho tối ưu nhất. Virtual DOM giúp giảm các thao tác trên DOM thực, điều này giúp hiệu suất của ứng dụng được tăng lên.

 Hạn chế việc tải lại trang, nâng cao trải nghiệm người dùng.JS - NodeJS là một nền tảng cung cấp môi trường runtime để thực thi JavaScript, được sử dụng để chạy các ứng dụng web bên ngoài trình duyệt. - NodeJS được phát triển bởi Ryan Dahl, ra mắt vào năm 2009. Nền tảng được xem là một giải pháp tuyệt vời cho các ứng dụng sử dụng nhiều dữ liệu nhờ vào mô hình hướng sự kiện bất đồng bộ. - Để sử dụng NodeJS, người dùng cần có những kiến thức nhất định về một số giao thức, JavaScript, … - Ưu điểm: o Hướng sự kiện bất đồng bộ, cho phép xử lý nhiều yêu cầu đồng thời.

8 o Sử dụng JavaScript – một ngôn ngữ lập trình phổ biến và dễ làm quen. o Chia sẻ mã nguồn ở cả phía client và server. o NPM (Node Package Manager) phát triển, giúp quản lý package, module dễ dàng. o Cộng đồng sử dụng đông đảo, dễ dàng tìm kiếm thông tin và tài liệu.

o Cho phép stream các file có kích thước lớn. - Nhược điểm: o Không có khả năng mở rộng, vì vậy không thể tận dụng lợi thế mô hình multi core trong các phần cứng của server hiện nay. o Khó thao tác với cơ sử dữ liệu quan hệ. o Yêu cầu nắm vững kiến thức về JavaScript.

o Không phù hợp với các ứng dụng đòi hỏi nhiều tài nguyên CPU.JS hay còn được viết là ExpressJS, là một framework mã nguồn mở miễn phí cho NodeJS. ExpressJS giúp việc thiết kế và xây dựng các ứng dụng web trở nên dễ dàng, tiện lợi. - ExpressJS sử dụng ngôn ngữ JavaScript để xây dựng nên các API (Application Programming Interface), được coi là cầu nối kết nối giữa client và server. - Trong ứng dụng của nhóm em xây dựng, ExpressJS được sử dụng để tạo các routers.

Việc định tuyến bằng Router giúp việc phân chia API theo đối tượng rất dễ dàng.6 Một đoạn code gọi router từ các tệp định tuyến được định nghĩa 9 Hình 2.7 Một đoạn code sử dụng phương thức định tuyến 2.7 MongoDB - MongoDB là một hệ quản trị cơ sở dữ liệu theo dạng NoSQL, có mã nguồn mở, được phát triển bởi công ty MongoDB. MongoDB cho phép lưu trữ và truy xuất dữ liệu dưới dạng JSON Document một cách linh hoạt. - Vởi khả năng mở rộng cao và các tính năng mạnh mẽ như replica set, sharding, index phân tán, map-reduce, MongoDB cho phép xử lý các tác vụ lưu trữ và truy vấn dữ liệu lớn. - Trong ứng dụng, nhóm em sử dụng MongoDB để lưu trữ dữ liệu chính.8 Một đoạn code đối tượng tài khoản trong cơ sở dữ liệu 10 - Các hàm truy vấn dữ liệu được định nghĩa sẵn trong thư viện mongoose, việc truy cập cũng như xử lý được thực hiện rất dễ dàng.9 Một đoạn code gọi hàm xử lý cơ sở dữ liệu 11 Chương 3.

PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 3.1 Mô hình hệ thống Hình 3.