Khảo sát trải nghiệm người dùng - Giao diện website được thiết kế tối giản, thân thiện và dễ sử dụng, có thể sửdụng chỉ với một vài thao tác đơn giản do đó phù hợp với mọi lứa tuổi.. P
Giới thiệu chung
Giới thiệu đề tài bài tập lớn
Nhóm 2 đã chọn đề tài xây dựng một website thương mại điện tử chuyên bán các sản phẩm điện tử, bao gồm điện thoại, máy tính bảng và laptop.
Hình 1: Giao diện website bán hàng
Khảo sát, lên ý tưởng
Sau khi thực hiện tìm hiểu ban đầu và thảo luận trong nhóm, chúng tôi nhận thấy dự án này có tính thực tiễn cao và khả năng hoàn thành của nhóm là khả thi.
Khảo sát trải nghiệm người dùng
Giao diện website được thiết kế tối giản và thân thiện, dễ sử dụng với chỉ vài thao tác đơn giản, phù hợp cho mọi lứa tuổi.
- Có thể giúp người dùng mua sắm dễ dàng theo những sản phẩm mà mình thích.
Website cần phải thân thiện với người dùng và tích hợp các chức năng hỗ trợ để giúp người dùng khi gặp khó khăn hoặc cần trợ giúp trong quá trình mua sắm.
Ý tưởng lựa chọn đề tài
Dự án website thương mại điện tử ra đời nhằm đáp ứng nhu cầu mua sắm online ngày càng tăng của người tiêu dùng, đặc biệt trong lĩnh vực sản phẩm công nghệ Các cửa hàng, từ lớn như Thế giới di động, Cellphones, Clickbuy đến những cửa hàng nhỏ lẻ, đều đã thiết kế website để phục vụ nhu cầu mua sắm của khách hàng.
Website bán hàng điện thoại mang lại nhiều ứng dụng thực tế trong kinh doanh, giúp doanh nghiệp tiếp cận khách hàng tiềm năng, tăng doanh số bán hàng và giảm chi phí vận hành hiệu quả.
Lập trình web bán hàng điện thoại là một cách hiệu quả để sinh viên phát triển kỹ năng lập trình, tư duy logic, khả năng giải quyết vấn đề và làm việc nhóm.
Chức năng của dự án
- Giúp khách hàng mua sắm trực truyến tiện lợi, mà không cần phải đến trực tiếp cửa hàng, hay qua nhân viên tư vấn.
- Hiển thị đầy đủ thông tin sản phẩm (hình ảnh, giá cả, mô tả,…) để người dùng nắm bắt rõ thông tin sản phẩm
- Hỗ trợ người dùng mua hàng, thanh toán
- Giải quyết những thắc mắc, khiếu nại của người dùng
Cơ sở lý thuyết
Giới thiệu về Python Django
Python là ngôn ngữ lập trình phổ biến trong phát triển web, phần mềm, khoa học dữ liệu và máy học Các nhà phát triển ưa chuộng Python vì tính hiệu quả, dễ học và khả năng chạy trên nhiều nền tảng Phần mềm Python miễn phí, tích hợp tốt với các hệ thống và giúp tăng tốc độ phát triển.
Python là một ngôn ngữ lập trình nổi bật trong số các ngôn ngữ web như PHP, Ruby và Scheme Với hình thái sáng sủa và cấu trúc rõ ràng, Python rất phù hợp cho người mới bắt đầu học lập trình Ngôn ngữ này cho phép viết mã lệnh với số lần gõ phím tối thiểu, mang lại hiệu quả cao trong việc lập trình Hơn nữa, Python còn có tính hướng đối tượng mạnh mẽ.
- Các nhà phát triển có thể dễ dàng đọc và hiểu một chương trình Python vì ngôn ngữ này có cú pháp cơ bản giống tiếng Anh
Python nâng cao năng suất làm việc của các nhà phát triển nhờ khả năng sử dụng ít dòng mã hơn so với các ngôn ngữ lập trình khác, giúp họ viết chương trình hiệu quả hơn.
Python sở hữu một thư viện tiêu chuẩn phong phú, cung cấp nhiều đoạn mã tái sử dụng cho hầu hết các tác vụ Điều này giúp các nhà phát triển tiết kiệm thời gian và công sức, không cần phải viết mã từ đầu.
- Các nhà phát triển có thể dễ dàng sử dụng Python với các ngôn ngữ lập trình phổ biến khác như Java, C và C++.
Cộng đồng Python là một mạng lưới năng động với hàng triệu nhà phát triển nhiệt tình trên toàn cầu, sẵn sàng hỗ trợ bạn Khi gặp khó khăn, bạn có thể nhanh chóng nhận được sự trợ giúp từ những thành viên trong cộng đồng này.
Trên Internet, có vô vàn tài nguyên quý giá cho những ai muốn học Python, bao gồm video, tài liệu, chỉ dẫn và hướng dẫn dành cho nhà phát triển.
- Python có thể được sử dụng trên nhiều hệ điều hành máy tính khác nhau, chẳng hạn như Windows, macOS, Linux và Unix
Python là một ngôn ngữ lập trình thông dịch, cho phép chạy từng dòng mã một cách trực tiếp Khi gặp lỗi trong mã, chương trình sẽ dừng lại, giúp lập trình viên dễ dàng phát hiện và sửa chữa lỗi nhanh chóng.
Python là một ngôn ngữ lập trình dễ sử dụng, với cú pháp gần gũi giống như tiếng Anh Khác với nhiều ngôn ngữ lập trình khác, Python không sử dụng dấu ngoặc ôm mà thay vào đó áp dụng thụt đầu dòng để xác định cấu trúc mã.
Python là một ngôn ngữ lập trình linh hoạt, cho phép lập trình viên không cần khai báo loại biến khi viết mã Điều này giúp Python tự động xác định loại biến vào thời điểm chạy, từ đó tăng tốc độ viết chương trình.
Python là một ngôn ngữ lập trình cấp cao, gần gũi với ngôn ngữ con người, giúp lập trình viên dễ dàng hơn trong việc viết mã mà không cần lo lắng về các chức năng cơ bản như kiến trúc và quản lý bộ nhớ.
Python là một ngôn ngữ lập trình hướng đối tượng, trong đó mọi thứ đều được xem là đối tượng Ngoài ra, Python còn hỗ trợ các phương thức lập trình khác như lập trình hàm và lập trình cấu trúc.
Django là một framework web miễn phí và mã nguồn mở, được phát triển bằng ngôn ngữ Python Hiện nay, Django có một cộng đồng người dùng lớn và cung cấp nhiều tài liệu hỗ trợ cho các lập trình viên mới.
Django cung cấp cho người dùng khả năng kiểm soát toàn diện quá trình phát triển website thông qua một nền tảng duy nhất, giúp xử lý hiệu quả các thao tác phức tạp trong lập trình web.
Django, giống như các công cụ lập trình khác sử dụng ngôn ngữ Python, được đánh giá là dễ sử dụng Ngôn ngữ Python được nhiều trường đại học và cao đẳng lựa chọn giảng dạy, vì vậy việc lập trình web với Django trở nên đơn giản và người dùng chỉ cần một thời gian ngắn để làm quen.
Django được thiết kế với mô hình xác thực người dùng tối ưu, lý tưởng cho các dự án yêu cầu bảo mật cao Nó nổi bật với tài liệu hướng dẫn phong phú, tuân thủ nguyên tắc DRY và hỗ trợ ORM (Object Relational Mapping), tạo nên những ưu điểm vượt trội so với các framework lập trình web khác.
- Django là một Web framework hướng đối tượng dựa trên nền python, và theo mô hình MVC (Model – View – Controller).
Hình 2: Mô hình hoạt động của Framework Django
Các đặc trưng chính
a Ánh xạ đối tượng – quan hệ (Object-relational mapper)
Một ứng dụng web (app) là công cụ được thiết kế để thực hiện một nhiệm vụ cụ thể, chẳng hạn như thu thập ý kiến người dùng hoặc viết và hiển thị blog.
- Một project là bao gồm của cả cấu hình và các app cho một trang web cụ thể.
A project can consist of multiple apps, and conversely, a single app can belong to various projects To utilize a specific app within a project, it is necessary to declare that app in the settings.py file under the INSTALLED_APPS section For example: INSTALLED_APPS = ('your_app',).
- Để tạo một app: python manage.py startapp Thư mục tạo ra có cấu trúc như sau:
Hình 4: Cấu trúc của thư mục app được tạo trong Django
Mô hình là nguồn cung cấp định nghĩa thông tin từ cơ sở dữ liệu, bao gồm các lớp và thuộc tính của dữ liệu Thông thường, mỗi lớp mô hình tương ứng với một bảng trong cơ sở dữ liệu, và mỗi thuộc tính trong lớp sẽ tương ứng với một trường trong bảng đó.
- Model có thể được đồng bộ với cơ sở dữ liệu bằng lệnh: python manage.py syncdb
Các lớp được định nghĩa trong file models.py và kế thừa từ lớp django.db.models.Model, với mỗi lớp tương ứng với một bảng trong cơ sở dữ liệu Ví dụ, lớp Author được định nghĩa như sau: class Author(models.Model):.
Mỗi lớp (class) trong cơ sở dữ liệu có các thuộc tính riêng tương ứng với các trường của bảng Các lớp *Field xác định kiểu dữ liệu của các thuộc tính này, ví dụ như: name = models.CharField(max_length=0).
Giao diện lập trình ứng dụng truy cập cơ sở dữ liệu (Database access API)
- Khởi động API bằng lệnh: python manage.py
API cho phép truy vấn, chèn, sửa và xóa cơ sở dữ liệu nhanh chóng bằng các câu lệnh Python Ngoài ra, Python là ngôn ngữ thông dịch, giúp người dùng nhận được kết quả ngay lập tức mà không cần biên dịch.
- Các thao tác với bản ghi đều thông qua các đối tượng, điều này thể hiện tính hướng đối tượng cao của Python.
- Tuy nhiên, Django vẫn cho phép ta sử dụng các câu lệnh truy vấn SQL (Raw Query) nếu ta muốn. b Giao diện quản trị (Admin Interfaces)
Django cung cấp một giao diện quản trị tích hợp, giúp người dùng dễ dàng quản lý các đối tượng và lớp của trang web, mang lại nhiều lợi ích cho việc quản lý nội dung.
- Khi người dùng không có nhiều kiến thức về kỹ thuật, họ có thể dùng sẵn trang quản trị này để quản lý thông tin của mình.
- Kiểm tra mô hình dữ liệu (data model) một cách trực quan Cho phép quản lý dữ liệu của trang web.
- Trang giao diện với các chức năng đơn giản, dễ dùng và nhanh chóng.
Sử dụng giao diện quản trị
- Để sử dụng được giao diện quản trị, ta cần khai báo app 'django.contrib.admin' ở file settings.py tại trường INSTALLED_APPS:
- Để truy cập vào trang quản trị, ta cần khai báo đường dẫn (url) đến trang trong file urls.py: url(r'^admin/', include(admin.site.urls))
To manage classes in the admin interface, it is essential to declare these classes in the app's admin.py file For instance, you can register a class using the command: admin.site.register(your_class).
Django cho phép tùy biến các class quản lý thông qua việc kế thừa lớp ModelAdmin Trong lớp kế thừa này, người dùng có thể điều chỉnh các giá trị của tùy chọn từ lớp cha ModelAdmin hoặc định nghĩa các hàm chức năng mới.
Việc tùy biến class Author với các tùy chọn của class AuthorAdmin cho phép chúng ta điều chỉnh các thiết lập quản trị Nếu không có tùy chọn nào được chỉ định, Django sẽ tự động sử dụng các giá trị mặc định Ví dụ, chúng ta có thể sử dụng câu lệnh admin.site.register(your_class) để đăng ký class Để thiết kế các URL, cần tạo một module gọi là URLconf, được định nghĩa trong file urls.py, quy định cách ánh xạ các URL với các hàm view tương ứng Độ dài của URLconf có thể thay đổi tùy theo nhu cầu của lập trình viên và có thể tham chiếu đến các URLconf khác.
Trong file urls.py, người dùng có thể khai báo, thêm, xóa hoặc tùy chỉnh các đường dẫn (URL) theo ý muốn Mỗi URL được định nghĩa bởi đường dẫn của nó và hàm view tương ứng mà nó ánh xạ đến.
- Ta cũng có thể tạo URLconf cho từng app Django cho phép tham chiếu từ một URLconf này đến URLconf của một app khác bằng lệnh include.
Quá trình xử lý yêu cầu
Khi người dùng gửi một yêu cầu URL, quy trình trả về trang cần thiết bao gồm các bước sau: đầu tiên, xác định module URLconf; sau đó, tải các module và tìm kiếm biến urlpatterns; tiếp theo, chạy qua từng mẫu URL và dừng lại khi tìm thấy mẫu trùng khớp với yêu cầu; nếu có URL phù hợp, Django sẽ gọi hàm view tương ứng; nếu không, trang xử lý lỗi sẽ được trả về.
Template language của Django cung cấp các mẫu dễ sử dụng, cho phép tách biệt thiết kế, nội dung và mã code Python Nó cân bằng giữa tính tiện lợi và hiệu quả, giúp người dùng dễ dàng làm quen, ngay cả với những ai đã sử dụng các template language khác như Smarty hay Cheetah Template Template language này cho phép kiểm soát logic của mẫu thông qua các thẻ tag và filter có sẵn Mỗi template là một file text có thể được tạo ra từ nhiều định dạng cơ bản như HTML, XML, và CSV.
Dialogflow
Chatbot là chương trình trí tuệ nhân tạo giúp tự động trả lời câu hỏi, thường được sử dụng trong các ứng dụng nhắn tin như Facebook Messenger và WeChat Mục tiêu chính của chatbot là thu hút khách hàng và thu thập thông tin giá trị.
Hầu hết các câu hỏi từ khách hàng thường xoay quanh những vấn đề giống nhau như giờ mở cửa vào cuối tuần và loại sản phẩm được bán Mặc dù đây là những câu hỏi dễ trả lời, nhưng sự lặp lại và số lượng lớn của chúng cho thấy đã đến lúc cần tìm giải pháp để tiết kiệm thời gian cho bạn và nhân viên.
Dialogflow, trước đây gọi là API.AI, là dịch vụ của Google hỗ trợ lập trình viên trong việc phát triển sản phẩm giao tiếp với người dùng qua hội thoại bằng văn bản hoặc giọng nói Dịch vụ này ứng dụng trí tuệ nhân tạo (AI) để phân tích ngôn ngữ tự nhiên, giúp hiểu rõ hơn những gì người dùng nhập vào.
Các thành phần trong mô hình dialogflow
AGENT là khái niệm đại diện cho mô-đun NLU (Phân tích ngôn ngữ tự nhiên), giúp phân tích thông tin từ người dùng qua văn bản hoặc giọng nói AGENT chuyển đổi dữ liệu này thành định dạng có thể xử lý bằng lập trình.
- Intent: o INTENT là đại diện cho một ánh xạ giữa những gì người dùng đưa vào, và hành động sẽ được thực hiện bởi phần mềm.
ENTITY là một danh từ có nghĩa là thực thể hoặc sự tồn tại của một vật Trong dialogflow.com, ENTITIES được sử dụng để trích xuất các giá trị tham số từ ngôn ngữ tự nhiên, giúp nhận diện thông tin mà người dùng cung cấp Mỗi thông tin cần thiết từ nội dung của người dùng đều có một ENTITY tương ứng.
Hình 5: Mô hình hoạt động của Dialogflow
Thiết kế, cài đặt dự án
Cấu trúc dự án
Dự án website thương mại điện tử sẽ bao gồm cấu trúc với các file giao diện như HTML và CSS, cùng với các file phương tiện được cấu hình trong thư mục images Ngoài ra, dự án còn có các file Python như models.py, views.py, và urls.py đã được tạo sẵn khi khởi động dự án.
Hình 6: Cấu trúc các file của dự án
Thiết kế các đối tượng (class) trong dự án (Models.py)
Class "User " trong Django được sử dụng để mô tả người dùng trong hệ thống Chúng ta chỉ cần import từ thư viện django.contrib.auth.models để sử dụng class này.
Hình 7: Class User trong Models.py
- username: Tên đăng nhập vào hệ thống của người dùng
- email: Email đăng ký của người dùng
Class “Profile” mô tả các thông tin cá nhân của người dùng
Hình 8: Class Profile trong Models.py
- user: là khóa ngoại, có quan hệ 1-1 với class User
- password: Họ và tên đầy đủ của khách hàng
Class “Product” chứa các sản phẩm có trong website bán hàng
Hình 9: Class Product trong Models.py
- name: Tên sản phẩm, mặt hàng
- price: Giá tiền sản phẩm
- cost: Giá trị thực của sản phẩm
- slugName: Tên hiển thị của sản phẩm trên URL d Cart
Class “Cart” mô tả giỏ hàng của người dùng
Hình 10: Class Cart trong Models.py
- customer: Có quan hệ 1-1 với class User, nghĩa là mỗi người dùng sẽ có 1 giỏ hàng e CartItem
Class “CartItem” mô tả các sản phẩm trong giỏ hàng
Hình 11: Class CartItem trong Models.py
- product: Có quan hệ khóa ngoại đến class Product
- cart: Có quan hệ khóa ngoại đến class Cart
- dateAdded: Thời gian thêm vào giỏ hàng f Order
Class “Order” mô tả đơn hàng của người dùng
Hình 12: Class Order trong Models.py
- customer: Là khóa ngoại có quan hệ n-1 với class User nghĩa là 1 người dùng có nhiều đơn hàng
- address: Địa chỉ giao hàng
- phoneNumber: Số điện thoại liên hệ
- dateOrder: Thời gian đặt hàng
- complete: Đơn hàng đã hoàn thành hay chưa
- active: Đơn hàng có hoạt động không
- isPaid: Đơn hàng đã thanh toán chưa g OrderItem
Class “OrderItem” mô tả sản phẩm trong đơn hàng
Hình 13: Class OrderItem trong Models.py
- product: Có quan hệ khóa ngoại đến class Product
- order: Có quan hệ khóa ngoại đến class Order
- quantity: Số lượng sản phẩm trong đơn hàng
- dateAdded: Thời gian thêm vào đơn hàng h Slider
Class “Slider” chứa các hình ảnh trượt trên giao diện slider, và không có quan hệ với các class còn lại
Hình 14: Class OrderItem trong Models.py
- url: Link của ảnh đó
Định nghĩa các url và các api (urls.py)
Trong dự án, chúng ta sẽ xác định các URL để tạo ra các hàm view, từ đó render các file giao diện (HTML, CSS) Bên cạnh đó, các API sẽ đảm nhiệm vai trò giao tiếp và hoàn thiện dự án Tất cả đều được xây dựng trong file urls.py.
Hình 15: Các url và api được xây dựng trong urls.py a URL
- ''”: Đây là URL pattern cho trang chính của web và được liên kết với hàm view.home
- 'register/': URL pattern này xử lý việc đăng ký người dùng mới và nó liên kết với hàm view.register
- 'login/': URL pattern này xử lý việc đăng nhập người dùng và nó liên kết với hàm views.signIn
- 'logout/': URL pattern này xử lý việc đăng xuất người dùng và nó liên kết với hàm view.signOut
- ‘profile/’: URL pattern này xử lý hồ sơ người dùng và nó liên kết với hàm view.profile
- ‘cart/’: URL pattern này xử lý trang giỏ hàng và nó liên kết với hàm view.cart
- 'product//': URL pattern này xử lý trang chi tiết sản phẩm, nó chứa 1 slugName làm tham số và nó liên kết với hàm view.product
- ‘payment/’: URL pattern này xử lý trang thanh toán và nó liên kết với hàm view.payment
- 'update-item/': URL pattern này xử lý cập nhật giỏ hàng người dùng và nó liên kết với hàm view.updateItem
- 'search//': URL pattern này xử lý tìm kiếm sản phẩm chứa 1 query làm tham số và nó liên kết với hàm view.search
- 'filter-category/': URL pattern này xử lý việc lọc sản phẩm theo danh mục và nó liên kết với hàm view.filter-category
- 'notifications/': URL pattern này xử lý trang thông báo của người dùng và nó liên kết với hàm view.notifications
- 'order/': URL pattern này xử lý trang quản lý đơn hàng và nó liên kết với hàm view.order
- 'create-order/': URL pattern này xử lý việc tạo đơn hàng mới và nó liên kết với hàm view.createOrder
- 'confirm-payment-order/': URL pattern này xử lý việc xác nhận thanh toán đơn hàng và nó liên kết với hàm view.confirmPaymentOrder
- 'update-cart-items/': URL pattern này xử lý việc cập nhật giỏ hàng và nó liên kết với hàm view.updateCartItem
- 'confirm-order-complete/': URL pattern này xử lý việc xác nhận hoàn tất đơn hàng và nó liên kết với hàm view.confirmOrderComplete
The URL pattern 'order/details/' is designed to handle the details page of a specific order, utilizing an order_id as a parameter, and is linked to the view function orderDetails.
- 'order/payment-again/': URL pattern này xử lý việc thanh toán lại cho đơn hàng và nó liên kết với hàm view.paymentOrderAgain
- 'gurantee.html': Đây là URL pattern cho trang “Bảo hành” của web và nó liên kết với hàm view.gurantee
- 'aboutus.html': Đây là URL pattern cho trang “Về chúng tôi” của web và nó liên kết với hàm view.aboutus b API
- 'api/products/': Sử dụng để truy xuất thông tin về sản phẩm từ cơ sở dữ liệu và nó liên kết với hàm views.productsApi
- 'api/update-account/': Sử dụng để cập nhật thông tin tài khoản người dùng và nó liên kết với hàm views.updateAccount
- 'api/user-id/': Sử dụng để cung cấp ID người dùng và nó liên kết với hàm views.getIdUser
- 'api/update-avatar/': Sử dụng để cập nhật ảnh đại diện của người dùng và nó liên kết với hàm views.updateAvatar
- 'api/change-password/': Sử dụng để thay đổi mật khẩu người dùng và nó liên kết với hàm views.changePassword
- 'api/sort': Sử dụng để sắp xếp dữ liệu sản phẩm và nó liên kết với hàm views.sort
Xây dựng các hàm để trả về các api và các url (views.py)
Sau khi định nghĩa các API và URL trong tệp urls.py, chúng ta sẽ xây dựng các hàm tương ứng trong tệp views.py để thực hiện chức năng riêng của từng URL và API Lưu ý rằng tên hàm sẽ được đặt theo tên đã được định nghĩa trong urls.py.
Do khối lượng mã nguồn rất lớn, lên tới hàng nghìn dòng, nhóm 2 xin phép thầy tóm gọn các hàm trả về các API và URL chính Mã nguồn sẽ được nộp kèm theo báo cáo này.
Hình 16: Hàm trả về chức năng sắp xếp sản phẩm theo giá
Hình 17: Hàm render ra giao diện trang chủ (home.html)
Hình 18: Hàm render ra giao diện trang sản phẩm (product.html)
Hình 19: Hàm render ra giao diện trang giỏ hàng (cart.html)
Hình 20: Hàm render ra giao diện trang thanh toán (payment.html)
Chúng em xin phép trình bày các URL và API trong mã nguồn do dự án có nhiều hàm Mong thầy xem xét và châm trước cho báo cáo này ạ.
Thiết kế giao diện cho dự án
Giao diện trang web được phát triển bằng Django HTML, với mỗi file HTML tương ứng với một file CSS để tạo sự hấp dẫn cho các trang giao diện.
Hình 21: Các trang giao diện của trang web
- Trang cơ sở (base.html): là trang nền tảng cơ sở Chứa các thành phần như header, footer để các trang giao diện sau có thể kể thừa
Trang chủ (home.html) là điểm khởi đầu của dự án, nơi người dùng sẽ được chuyển đến sau khi đăng nhập thành công Tại đây, người dùng có thể khám phá và mua sắm các sản phẩm đa dạng.
Trang tìm kiếm (search.html) của dự án cho phép người dùng tìm kiếm sản phẩm một cách dễ dàng Khi người dùng nhập tên sản phẩm, hệ thống sẽ tự động lọc và hiển thị kết quả trên giao diện.
- Trang giỏ hàng (cart.html): chứa các sản phẩm trong giỏ hàng của người dùng.
- Trang thanh toán (payment.html): là trang để người dùng thanh toán các sản phẩm khi mua hàng.
- Trang thông báo (notification.html): chứa các thông báo của người dùng
- Trang đơn hàng (order.html): chứa các đơn hàng của người dùng
- Trang giới thiệu (aboutus.html): trang giới thiệu thông tin người bán
- Trang chính sách bảo hành (gurantee.html): trang mô tả chính sách bảo hành, đổi trả của cửa hàng
Mỗi trang giao diện (HTML và CSS) trong dự án đều đi kèm với các file JS (Javascript) để xử lý sự kiện cho các thành phần giao diện.
Thiết kế tính năng chatbot hỗ trợ khách hàng cho dự án
Chúng tôi đã tích hợp tính năng chatbot vào ứng dụng, sử dụng công nghệ AI và Học máy để tự động trả lời các câu hỏi của khách hàng, hỗ trợ họ khi cần tư vấn hoặc gặp khó khăn trong quá trình mua sắm trên website.
Chatbot được phát triển trên nền tảng Dialogflow, một dịch vụ của Google, giúp lập trình viên dễ dàng tạo ra các sản phẩm tương tác với người dùng thông qua hội thoại bằng văn bản hoặc giọng nói.
Hình 22: Giao diện của dialogflow Đầu tiên chúng ta cần liên kết tài khoản Google để tạo 1 agent mới (có tên là web-dien-thoai).
Chatbot hoạt động dựa trên AI và Học máy, vì vậy càng nhiều dữ liệu được tích hợp trong agent Con chatbot sẽ hoạt động càng thông minh hơn.
Sau khi tạo xong agent, chúng ta tạo các entity để định nghĩa các thực thể, các từ đồng nghĩa mà người dùng giao tiếp với chatbot.
Hình 23: Tạo các thực thể (entity) cho agent
Để người dùng có thể giao tiếp hiệu quả với chatbot, chúng ta cần tạo ra các intent nhằm xây dựng các câu hỏi và câu trả lời mà người dùng có thể đặt.
Hình 24: Tạo các intent cho agent
Dưới đây là một ví dụ về intent, bao gồm việc đào tạo chatbot để xử lý các trường hợp mà người dùng có thể đặt câu hỏi, đồng thời cung cấp câu trả lời cho những câu hỏi đó.
Hình 25: Ví dụ về một intent trong agent
Và đây là thiết kế câu trả lời cho câu hỏi “Thời gian giao hàng”.
Hình 26: Thêm câu trả lời cho intent đó
Sau khi hoàn thiện các intent và entity, chatbot của chúng ta đã sẵn sàng để trả lời các câu hỏi liên quan đến nội dung của website Bước cuối cùng là tích hợp chatbot vào trang web.
Hình 27: Kích hoạt chatbot thành công
Lấy đoạn script mà dialogflow tạo ra Sau đó nhúng code vào website, và hình dưới đây là kết quả.
Hình 28: Tích hợp chatbot vào website thành công
Vì chatbot được đào tạo bởi con người, nên không thể tránh khỏi việc gặp phải những câu hỏi nằm ngoài khả năng của nó Do đó, việc tích hợp tính năng chat qua Messenger là cần thiết để nhân viên có thể hỗ trợ khách hàng một cách hiệu quả nhất.
Hình 29: Tích hợp chatbot qua messenger để người dùng có thể trò chuyện với nhân viên
Kết quả của dự án
Sau khi xây dựng dự án thành công Chúng ta kiểm tra kết quả của dự án bằng cách runserver o python manage.py runserver
Giao diện trang chủ của website sẽ hiển thị thành công khi chúng ta chạy server, bao gồm các sản phẩm cùng với các chức năng lọc và sắp xếp sản phẩm.
Hình 30: Giao diện trang chủ website
Khi người dùng chọn một sản phẩm từ trang chủ, hệ thống sẽ cung cấp thông tin chi tiết về sản phẩm đó và đề xuất các sản phẩm liên quan.
Để thực hiện việc mua hàng, người dùng cần đăng ký và đăng nhập vào tài khoản Các sản phẩm đã thêm sẽ được hiển thị trong trang giỏ hàng.
Hình 32: Giao diện trang giỏ hàng
Nhấn nút Thanh toán để chuyển sang trang thanh toán, nơi khách hàng có thể chọn phương thức thanh toán và nhập thông tin cá nhân nhằm xác nhận đơn hàng.
Hình 33: Giao diện trang thanh toán
Sau khi thanh toán thành công, kiểm tra đơn hàng đã được đặt thành công hay chưa.
Hình 34: Giao diện trang đơn hàng
Xem chi tiết đơn hàng đó.
Hình 35: Giao diện trang chi tiết đơn hàng
Trang profile (thông tin cá nhân của người dùng) Tại đây chúng ta có thể đổi mật khẩu, cập nhật tên người dùng, avatar,…
Hình 36: Giao diện trang thông tin khách hàng
Tìm kiếm sản phẩm theo từ khóa
Hình 37: Giao diện trang tìm kiếm sản phẩm
Lọc sản phẩm theo thương hiệu
Hình 38: Lọc sản phẩm theo thương hiệu
Sắp xếp sản phẩm theo giá (tăng dần hoặc giảm dần)
Hình 39: Sắp xếp sản phẩm theo giá giảm dần
Cuối cùng là tính năng chatbot
Hình 40: Tính năng chatbot hoạt động trên website
Phương pháp – Ngôn ngữ - Công cụ
- Lập trình hướng đối tượng
- Thiết kế giao diện: HTML, CSS, JS
- Một số thư viện mở rộng của Python
- Cơ sở dữ liệu: SQLite
Hướng phát triển
Cập nhật đầy đủ thông tin sản phẩm bao gồm thông số kỹ thuật, cấu hình
Quảng cáo website rộng rãi để người PR cho cửa hàng và nâng cao doanh thu
Tích hợp thêm nhiều công nghệ AI để nâng cao trải nghiệm người dùng
