Báo cáo Đồ án: Xây dựng website thương mại điện tử với Chatbot tư vấn

Tham khảo báo cáo đồ án xây dựng website thương mại điện tử tích hợp chatbot tư vấn. Tài liệu phân tích và triển khai chi tiết bằng MERN Stack.

• Tác giả: Trần Đoàn Phương
• Người hướng dẫn: ThS. Trần Thị Hồng Yến
• Trường học: Trường Đại Học Công Nghệ Thông Tin
• Chuyên ngành: Công Nghệ Phần Mềm
• Đề tài: Xây Dựng Website Thương Mại Điện Tử Với Chatbot Tư Vấn
• Loại tài liệu: Đồ án
• Năm xuất bản: 2022
• Địa điểm: Thành Phố Hồ Chí Minh

Tóm tắt

I. Giới thiệu về Đồ án Website TMĐT tích hợp Chatbot tư vấn thông minh

Website thương mại điện tử đã trở thành một phần không thể thiếu trong cuộc sống hiện đại. Nhu cầu mua sắm online ngày càng gia tăng, đặc biệt ở giới trẻ Việt Nam. Đồ án này nhằm xây dựng một nền tảng TMĐT hoàn chỉnh với giao diện thân thiện, các tính năng quản lý sản phẩm, thanh toán online và đặc biệt là tích hợp chatbot tư vấn thông minh. Mục tiêu chính là nâng cao trải nghiệm khách hàng thông qua một giải pháp công nghệ tiên tiến. Sự kết hợp giữa website TMĐT và chatbot AI sẽ giúp tối ưu hóa dịch vụ khách hàng, giảm thời gian tra cứu thông tin và tăng tỷ lệ chuyển đổi bán hàng.

1.1. Ưu điểm của mua sắm online

Mua sắm online mang lại nhiều lợi ích vượt trội: nhanh chóng chỉ với vài thao tác, tiện lợi mua ở bất cứ nơi nào bất cứ lúc nào, đa dạng mặt hàng với lựa chọn phong phú, dễ dàng so sánh giá cả dựa trên đánh giá người dùng. Điều này giải thích lý do thương mại điện tử tăng trưởng nhanh chóng tại Việt Nam với các nền tảng như Shopee, Tiki, Lazada.

1.2. Vai trò của Chatbot tư vấn

Chatbot tư vấn thông minh là giải pháp hỗ trợ khách hàng 24/7 trên website TMĐT. Nó giúp tra cứu thông tin sản phẩm, trả lời câu hỏi thường gặp và cải thiện trải nghiệm mua sắm. Tích hợp AI chatbot vào nền tảng thương mại điện tử giúp giảm chi phí nhân sự hỗ trợ và tăng hiệu quả dịch vụ khách hàng.

II. Mục tiêu và Phạm vi của Đồ án

Đồ án website TMĐT với chatbot tư vấn được xây dựng với mục tiêu rõ ràng: tạo ra một nền tảng thương mại điện tử hoàn chỉnh, hiện đại và dễ sử dụng. Phạm vi thực hiện bao gồm các tính năng quản lý sản phẩm, quản lý tài khoản khách hàng, hệ thống giỏ hàng, thanh toán online và quan trọng nhất là chatbot tư vấn thông minh. Đối tượng sử dụng gồm hai nhóm: người bán muốn bán sản phẩm và khách hàng có nhu cầu mua sắm. Toàn bộ ứng dụng được triển khai trên môi trường web, đảm bảo tính tiến hoá và có thể phát triển thêm các tính năng mới trong tương lai.

2.1. Các tính năng chính của Website TMĐT

Website thương mại điện tử cần cung cấp: quản lý sản phẩm theo danh mục, tìm kiếm nâng cao, quản lý giỏ hàng và thanh toán online, quản lý tài khoản khách hàng, tra cứu thông tin đơn hàng, quản lý mã giảm giá. Mỗi tính năng được thiết kế với giao diện thân thiện, dễ sử dụng để nâng cao trải nghiệm người dùng trên nền tảng TMĐT.

2.2. Tích hợp Chatbot tư vấn thông minh

Chatbot tư vấn là tâm điểm của đồ án này, hỗ trợ khách hàng tra cứu thông tin sản phẩm, hướng dẫn mua hàng và giải đáp thắc mắc. Chatbot AI được nâng cấp từ đồ án trước để có khả năng hỗ trợ tra cứu tốt hơn. Tính năng này góp phần nâng cao dịch vụ khách hàng trên website TMĐT một cách tự động và hiệu quả.

III. Công nghệ và Phương pháp Thực hiện

Đồ án sử dụng MERN Stack - công nghệ phổ biến cho phát triển web hiện đại: MongoDB cho cơ sở dữ liệu, ExpressJS cho back-end, ReactJS cho front-end và NodeJS cho server. Phương pháp thực hiện bắt đầu từ việc phân tích các website TMĐT hiện có, từ đó xác định tính năng cần triển khai. Nhóm thực hiện nâng cấp sản phẩm từ đồ án 1, lập kế hoạch chi tiết, phân công công việc rõ ràng cho các thành viên. Quá trình phát triển bao gồm tìm hiểu công nghệ, thiết kế giao diện, triển khai front-end và back-end, ghép nối các phần công việc, kiểm thử và sửa lỗi. Mỗi giai đoạn được thực hiện tuần tự và đúng tiến độ.

3.1. MERN Stack Công nghệ cơ bản

MERN Stack bao gồm bốn công nghệ chính: MongoDB lưu trữ dữ liệu linh hoạt, ExpressJS xử lý logic back-end, ReactJS tạo giao diện tương tác, NodeJS chạy server. Stack này cho phép xây dựng website TMĐT scalable, hiện đại với hiệu suất cao. Lựa chọn công nghệ này đảm bảo tính ổn định và dễ bảo trì cho nền tảng thương mại điện tử.

3.2. Quy trình phát triển từng giai đoạn

Quá trình thực hiện đồ án TMĐT diễn ra theo lịch trình rõ ràng từ tháng 9 đến tháng 12. Đầu tiên, thiết lập cơ sở dữ liệu và xác định quy trình. Tiếp theo triển khai các màn hình đăng nhập, đăng ký và trang chủ. Sau đó xây dựng tính năng quản lý sản phẩm, giỏ hàng, thanh toán. Cuối cùng tích hợp chatbot tư vấn và hoàn thiện toàn bộ hệ thống.

IV. Kết quả mong đợi và Tiến lộ Phát triển

Đồ án website TMĐT tích hợp chatbot tư vấn kỳ vọng tạo ra một sản phẩm hoàn chỉnh với giao diện hiện đại, thân thiện và dễ sử dụng. Kết quả chính bao gồm một nền tảng thương mại điện tử đầy đủ chức năng, trải nghiệm người dùng được nâng cao nhờ chatbot AI thông minh, các tính năng hữu ích bổ sung, và khả năng phát triển mở rộng trong tương lai. Website TMĐT được thiết kế với tính tiến hoá cao, cho phép thêm các module mới như thanh toán đa cách, khuyến mãi nâng cao, hoặc các tính năng AI tiên tiến khác. Đặc biệt, chatbot tư vấn được nâng cấp từ đồ án trước để hoạt động hiệu quả hơn. Toàn bộ quá trình thực hiện tuân thủ đúng tiến độ đề ra.

4.1. Kết quả sản phẩm mong đợi

Sản phẩm cuối cùng là một website TMĐT chuyên nghiệp với giao diện hiện đại, responsive trên mọi thiết bị. Chatbot tư vấn thông minh hoạt động liên tục hỗ trợ khách hàng. Các tính năng quản lý sản phẩm, thanh toán online, tra cứu đơn hàng được tối ưu hóa. Nền tảng này có thể mở rộng dễ dàng, chuẩn bị sẵn sàng cho các nâng cấp trong tương lai.

4.2. Tiềm năng phát triển sau đồ án

Website TMĐT được xây dựng với tính tiến hoá cao, cho phép phát triển thêm các tính năng mới: tích hợp nhiều cách thanh toán, hệ thống đánh giá sản phẩm nâng cao, phân tích hành vi người dùng, chatbot hỗ trợ đa ngôn ngữ. Nền tảng này có thể trở thành một giải pháp thương mại điện tử toàn diện cho các doanh nghiệp nhỏ và vừa ở Việt Nam.

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

Chương 1. 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 tư vấn. - Building an E-Commerce website with consulting 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, mobile app không thể thay thế hoàn toàn được website, bởi tính thuận tiện của nó. Website 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ư vấn để 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.

- Quản lý thông tin cá nhân. - Quản lý mã giảm giá 14 - Hỗ trợ thanh toán online. - Chat Bot tư vấn.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.

- MongoDB: cơ sở dữ liệu. - Github: quản lý mã nguồn.6 Thông tin 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] Bảng GIỚI THIỆU ĐỀ TÀI.1 Thông tin thành viên nhóm 16 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 được coi như bộ khung của một trang web, được cấu thành từ những thẻ được cung cấp, từ đó hiển thị ra cho người dùng nội dung thô. - Mô tả HTML công khai đầu tiên là một tài liệu có tên "HTML Tags", lần đầu tiên được đề cập trên Internet bởi Tim Berners-Lee – một nhà vật lý vào cuối năm 1991.

Nó mô tả 18 phần tử bao gồm thiết kế ban đầu, tương đối đơn giản của HTML. Ngoại trừ thẻ siêu liên kết, chúng bị ảnh hưởng mạnh bởi SGMLguid, một định dạng tài liệu dựa trên Standard Generalized Markup Language (SGML) tại CERN. - 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, nó dần được cải tiến và bổ sung những tính năng cần thiết để hỗ trợ tốt hơn trong việc xây dựng một trang web tĩnh.

Hình CƠ SỞ LÝ THUYẾT.1 Cấu trúc file html căn bản 17 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 style cho các phần tử được tạo ra bởi HTML. Hiểu đơn giản thì HTML tạo nên bộ khung và CSS trang trí để tạo nên một trang web đẹp mắt. - CSS lần đầu tiên được đề xuất bởi Håkon Wium Lie 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 kiểu khác cho web đã được đề xuất cùng lúc và các cuộc thảo luận về danh sách gửi thư cộng đồng cũng như đồng thuận trong World Wide Web Consortium dẫn đến CSS W3C đầu tiên (CSS1) được phát hành vào năm 1996. Đặc biệt, một đề nghị của Bert Bos có ảnh hưởng hơn đó là ông trở thành đồng tác giả của CSS1 và được coi là đồng sáng tạo CSS. - Qua các năm, CSS được phát triển lên các phiên bản CSS2, CSS2.1, CSS3 và mới nhất là CSS4, với việc chia thành các mô đun riêng biệt, được dựa trên các mô đun từ CSS3.

- Dưới đây là 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 CƠ SỞ LÝ THUYẾT.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 ở phía máy khách và phía máy chủ, cho phép tạo các trang web có các hình động chuyên nghiệp. JavaScript được hỗ trợ bởi hầu hết các trình duyệt web: Chrome, Firefox, Safari, Internet Explorer, Edge, Opera,. Hầu hết các trình duyệt di động cho điện thoại thông minh đều hỗ trợ JavaScript. 18 - 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 thân thiện hơn, bao gồm các chức năng: tự động cập nhật các trang web, cải tiến giao diện người dùng như menu và hộp thoại, animations, đồ họa 2D và 3D, bản đồ tương tác, trình phát video.

Chế độ sử dụng JavaScript này trong trình duyệt web cũng được gọi là javascript phía máy khách. - Phiên bản đầu tiên của ngôn ngữ này được đặt tên là Mocha 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. Năm 1996, JavaScript đã được gửi đến ECMA International để hoàn thiện trở thành, một đặc tính kỹ thuật tiêu chuẩn. Vào tháng 6 năm 1997, đặc tính kỹ thuật chính thức đầu tiên cho ngôn ngữ được phát hành là ECMA-262.

Phiên bản mới nhất của ngôn ngữ là ECMAScript 2017 được phát hành vào tháng 6 năm 2017. - Cách hoạt động của JavaScript: Hình CƠ SỞ LÝ THUYẾT.3 Phương thức hoạt động của JavaScript 19 - Khi web browser tải một web page, HTML parser bắt đầu phân tích cú pháp HTML code và tạo DOM. Bất cứ khi nào trình phân tích cú pháp gặp một chỉ thị CSS hoặc JavaScript (inline hoặc externally loaded), nó sẽ được chuyển giao cho CSS parser hoặc JavaScript engine theo yêu cầu. - JavaScript engine tải các tệp JavaScript bên ngoài và inline code, nhưng không chạy mã ngay lập tức, mà đợi HTML và CSS phân tích hoàn tất.

Khi điều này được thực hiện, JavaScript được thực thi theo thứ tự chúng được tìm thấy trên trang web: các biến và hàm được xác định, các lời gọi hàm được thực thi, trình xử lý sự kiện được kích hoạt,. Các hoạt động này dẫn đến việc DOM được cập nhật bởi JavaScript và được hiển thị ngay lập tức bởi trình duyệt. - Trong đồ án, nhóm em đã sử dụng thư viện của JavaScript là React để thực hiện giao diện trang web.4 Thư viện React.JS - React là thư viện JavaScript phổ biến nhất để xây dựng giao diện người dùng (UI). Nó cho tốc độ phản hồi tuyệt vời khi user nhập liệu bằng cách sử dụng phương pháp mới để render trang web.

- Components của công cụ này được phát triển bởi Facebook. Nó được ra mắt như một công cụ JavaScript mã nguồn mở vào năm 2013. Hiện tại, nó đã đi trước các đối thủ chính như Angular và Bootstrap, hai thư viện JavaScript bán chạy nhất thời bấy giờ. - Cách React hoạt động: Code HTML bằng Javascript Hình CƠ SỞ LÝ THUYẾT.4 Một đoạn code trong trong ứng dụng sử dụng React 20 - Ưu điểm của React: o Dễ sử dụng:  React là một thư viện GUI nguồn mở JavaScript tập trung vào một điều cụ thể; hoàn thành nhiệm vụ UI hiệu quả.

Nó được phân loại thành kiểu “V” trong mô hình MVC (Model-View- Controller).  Là lập trình viên JavaScript, bạn sẽ dễ dàng hiểu được những điều cơ bản về React. Bạn thậm chí có thể bắt đầu phát triển các ứng dụng dựa trên web bằng cách sử dụng react chỉ trong vài ngày. o Tái sử dụng code:  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.

Hình CƠ SỞ LÝ THUYẾT.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ẽ cập nhật hiệu quả quá trình DOM (Document Object Model – Mô hình đối tượng tài liệu). Như bạn có thể biết, quá trình này có thể gây ra nhiều thất vọng trong các dự án ứng dụng dựa trên web. May mắn là React sử dụng virtual DOMs, vì vậy bạn có thể tránh được vấn đề này.  Công cụ cho phép bạn xây dựng các virtual DOMs và host chúng trong bộ nhớ.

Nhờ vậy, mỗi khi có sự thay đổi trong DOM thực tế, thì virtual sẽ thay đổi ngay lập tức. 21  Hệ thống này sẽ ngăn DOM thực tế để buộc các bản cập nhật được liên tục. Do đó, tốc độ của ứng dụng sẽ không bị gián đoạn.  React cho phép tạo giao diện người dùng có thể được truy cập trên các công cụ tìm kiếm khác nhau.

Tính năng này là một lợi thế rất lớn vì không phải tất cả các khung JavaScript đều thân thiện với SEO.  Ngoài ra, vì React có thể tăng tốc quá trình của ứng dụng nên có thể cải thiện kết quả SEO. Cuối cùng tốc độ web đóng một vai trò quan trọng trong tối ưu hóa SEO.JS - NodeJS là một môi trường runtime chạy JavaScript đa nền tảng và có mã nguồn mở, được sử dụng để chạy các ứng dụng web bên ngoài trình duyệt của client. Nền tảng này được phát triển bởi Ryan Dahl vào năm 2009, được xem là một giải pháp hoàn hảo 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 (event-driven) không đồng bộ.

- NodeJS là một nền tảng (platform) chứ không phải một web framework như một số người thường nhầm lẫn.JS cũng không phải là một ngôn ngữ lập trình mà là một môi trường runtime dùng để chạy JavaScript bên ngoài trình duyệt. Vì vậy để học và sử dụng NodeJS thì người dùng cần có những kiến thức nhất định về một số giao thức, JavaScript hay kỹ thuật lập trình,… - Và cuối cùng, một câu hỏi phổ biến của người dùng là: Node.JS là backend hay frontend? Thật ra Node.JS có thể được sử dụng như một frontend lẫn backend nhờ vào các framework như Express.js hay Meteor. Trong đồ án này, nhóm em sử dụng Node.JS để sử dụng làm backend với framework là Express. - Ưu điểm: 22 o IO hướng sự kiện không đồng bộ, cho phép xử lý nhiều yêu cầu đồng thời.

o Sử dụng JavaScript – một ngôn ngữ lập trình dễ học. o Chia sẻ cùng code ở cả phía client và server. o NPM(Node Package Manager) và module Node đang ngày càng phát triển mạnh mẽ. o Cộng đồng hỗ trợ tích cực.

o Cho phép stream các file có kích thước lớn.