Để giải quyết vấn đề khi người dùng gửi những tin nhắn mang tính chất tự nhiên đến cho chatbot mà chatbot phải trả lời một cách nhanh chóng thì em đề xuất xây dựng một công cụ cho phép người quản trị viên có thể xây dựng chatbot sử dụng từ khóa kết hợp với ElasticSearch để tìm ra câu trả lời phù hợp nhất. Đề xuất này em sẽ trình bày chi tiết trong Chương 5.
Giới thiệu đề tài
Đặt vấn đề
Ngày nay để ứng phó với tình hình dịch Covid-19 thì chính phủ đã đưa ra chỉ thị như cách ly xã hội đóng cửa các cửa hàng không cần thiết Để tồn tại trong mùa dịch các doanh nghiệp đang dần chuyển hướng từ kinh doanh “offline” sang kinh doanh “online” và kinh doanh nền tảng mạng xã hội như Zalo, Facebook… là một lựa chọn không thể bỏ qua Một vấn đề đáng để các doanh nghiệp và các tổ chức quan tâm đó là chatbot Định nghĩa một cách đơn giản, chatbot là một chương trình máy tính mô phỏng và xử lý cuộc hội thoại của con người (bằng văn bản hoặc lời nói), cho phép con người tương tác, trao đổi thông tin với các thiết bị kỹ thuật số một cách hiệu quả và nhanh gọn Được áp dụng những công nghệ hàng đầu như: trí tuệ nhân tạo (Artificial Intelligence - AI), xử lí ngôn ngữ tự nhiên (Natural Language Processing - NLP), chatbot có thể trả lời tự động từ những kiến thức học được trong quá trình giao tiếp với con người Chatbot giúp giảm tải một phần khối lượng công việc mà người quản lí phải làm Việc tích hợp chatbot với một số nền tảng mạng xã hội hiện nay Zalo, Facebook hay bất kì một webchat nào sẽ đa dạng hóa và đưa chatbot đến gần hơn với người dùng Có thể kể đến 1 số nền tảng xây dựng chatbot nổi tiếng như Chatfuel, Dialogflow, Messnow…
Trong thực tế, việc tích hợp một hệ thống chatbot với những công nghệ hàng đầu như AI, NLP đối với các doanh nghiệp nhỏ cũng gặp nhiều bất cập về chi phí và yêu cầu người quản lí có phải có hiểu biết về chuyên môn kĩ thuật Ngược lại những chatbot được sử dụng hiện nay thì thường yêu cầu người dùng thao tác một cách cứng nhắc với các nút bấm trong cửa sổ chat Việc bấm nút này giống như người dùng đang sử dụng một chương trình máy tính, mất đi tính tương tác của người dùng và hệ thống Khảo sát trên một ứng dụng mạng xã hội của người Việt là Zalo, hiện nay chỉ có Messnow là cung cấp các chức năng để người dùng xây dựng chatbot Tuy nghiên nền tảng này vẫn còn nhiều hạn chế trong việc cải thiện trải nghiệm người dùng cũng như tối ưu hóa câu trả lời cho chatbot
Chương 1 Giới thiệu đề tài
Vì vậy để giải quyết những vấn đề đã nêu ở trên em đã thực hiện đề tài xây dựng “Nền tảng xây dựng chatbot cho Zalo”.
Mục tiêu và phạm vi đề tài
Mục tiêu của đề tài là xây dựng một hệ thống có giao diện trực quan, thân thiện với người dùng Hệ thống giúp người quản lí có thể cài đặt, tích hợp những chatbot, tạo dữ liệu cho chatbot đó một cách dễ dàng, đơn giản Sau khi được cài đặt và có dữ liệu mẫu, hệ thống có khả năng phân tích và đưa ra câu trả lời cho người dùng thông qua các API mà Zalo cung cấp Để xây dựng được một hệ thống như trên, em cần tìm hiểu, lựa chọn và thiết kế một kiến trúc đáp ứng được những mục tiêu đã đề ra Nền tảng sau khi được hoàn thành sẽ cung cấp các chức năng: quản lí chatbot, tích hợp chatbot với Zalo, quản lí câu trả lời mẫu, trả lời tự động, quản lí thông tin người sử dụng và một số chức năng thống kê cơ bản Bên cạnh đó, nền tảng cũng cần có giao diện thân thiện với người dùng, tối ưu trải nghiệm người dùng Cuối cùng hệ thống cần được thiết kế để đáp ứng được khả năng sửa chữa, nâng cấp cũng như mở rộng trong tương lai.
Định hướng giải pháp
Để giải quyết vấn đề khi người dùng gửi những tin nhắn mang tính chất tự nhiên đến cho chatbot mà chatbot phải trả lời một cách nhanh chóng thì em đề xuất xây dựng một công cụ cho phép người quản trị viên có thể xây dựng chatbot sử dụng từ khóa kết hợp với ElasticSearch để tìm ra câu trả lời phù hợp nhất Đề xuất này em sẽ trình bày chi tiết trong Chương 5
Zalo hay những nền tảng mạng xã hội sẽ hỗ trợ các nhà phát triển cho phép nền tảng bên thứ 3 có thể trả về nhiều loại tin nhắn Mỗi một loại tin nhắn lại của mỗi một nền tảng có những đặc điểm riêng và cấu trúc riêng Chính vì vậy, em đã thiết kế một cơ sở dữ liệu sử dụng linh hoạt những kĩ thuật mô hình hóa hợp để có thể lưu trữ toàn bộ những loại tin nhắn của Zalo cung cấp và cơ sở dữ liệu này cũng có thể mở rộng thêm nhiều loại khác khi phát triển nền tảng ra nhiều nền tảng khác
Việc quán lí và xây dựng các luật, hành động yêu cầu thao tác với nhiều dữ liệu, các trường hợp, khả năng có thể xảy ra khi người dùng sử dụng ứng dụng nên em đề xuất phát triển hệ thống thành gồm 2 phần là front-end và back-end Phía front-end, ReactJs là một thư viện tập trung chủ yếu phát triển vào giao diện ReactJs phân chia mọi thứ thành các thành phần (Components) để thuận lợi cho việc tái sử dụng, mở rộng Phía back-end, đồ án
3 sử dụng Expressjs là một framework được xây dựng trên nền tảng của NodeJs, hỗ trợ các method HTTP và middleware tạo ra API vô cùng mạnh mẽ và dễ sử dụng Cơ sở dữ liệu được chọn là Mongodb – cơ sở dữ liệu phân tán, phi cấu trúc, cho phép thực hiện các truy vấn đặc biệt, tích hợp thời gian thực và đánh index hiệu quả Nó phù hợp với việc thay đổi dữ liệu thường xuyên và cung cấp xác thực dữ liệu bên phía server MongoDB với Nodejs sẽ tạo nên một sự kết hợp tốt cho việc xây dựng ứng dụng web.
Bố cục đồ án
Phần còn lại của báo cáo đồ án tốt nghiệp này được tổ chức như sau
Trong Chương 2, em sẽ đưa ra một vài hệ thống tương tự hiện đang có trên thị trường, so sánh với sản phẩm của mình Tiếp theo đó, em sẽ đưa ra tổng quan các chức năng của hệ thống mà em xây dựng thông qua biểu đồ use case và đặc tả một số chức năng chính của hệ thống cũng như các yêu cầu phi chức năng
Trong Chương 3, em sẽ đưa ra công nghệ sử dụng, nguyên lý làm việc, ưu nhược điểm của các công nghệ sử dụng và đưa ra lý do tại sao lại lựa chọn công nghệ đó vào việc xây dựng hệ thống
Trong Chương 4, dựa vào các công nghệ lựa chọn sử dụng đã trình bày ở Chương 3, em sẽ phân tích, lựa chọn các giải pháp thiết kế kiến trúc sao cho hợp lý Sau đó đưa ra các kết quả đạt được và minh hoạ các chức năng xây dựng được
Tiếp đến ở Chương 5, em sẽ trình bày các nội dung mà mình thấy tâm đắc nhất cùng với đóng góp nổi bật trong suốt quá trình làm ĐATN
Cuối cùng là Chương 6, em sẽ trình bày kết luận về toàn bộ ĐATN, những điều làm được và chưa làm được, định hướng phát triển sản phẩm trong tương lai
Sau đây em sẽ đi vào chi tiết từng phần của đồ án
Chương 2 này đưa ra khảo sát các phần mềm, công cụ, quy trình nghiệp vụ trong việc tạo chatbot trong những sản phầm phổ biến hiện nay Từ đó đưa ra tổng quan chức năng của hệ thống phát triển và đi vào chi tiết làm rõ các chức năng
Hiện nay trên thị trường cũng đã có những nền tảng cho phép người dùng tạo ra những chatbot sử dụng luật Trong đó nền tảng nổi tiếng bậc nhất phải kể đến là Chatfuel Còn với thị trường trong nước, ta có một nền tảng mang thương hiệu Việt Nam đó là Messnow Hai nền tảng này đều có những ưu nhược điểm riêng Em sẽ trình bày chi tiết cũng như đưa ra những so sánh trong các mục ngay sau đây
Hình 1 Các hoạt động của chatbot 2.1.1 Hệ thống Chatfuel
Chatfuel [19] là một nền tảng được tạo ra nhằm để hỗ trợ người dùng tạo các chatbot Chatfuel tập trung hướng đến nền tảng Facebook Messenger Chatfuel cho phép người dùng có thể tạo chuỗi các hành động dưới dạng các khối Ngoài ra Chatfuel cũng hỗ trợ người quản lí xây dựng một kịch bản trả lời tin nhắn tự động với khách hàng dựa trên những dữ liệu dưới dạng các luật Nhưng Chatfuel chỉ hỗ trợ trả lời đối với những tin nhắn đơn giản Với những tin nhắn có độ phức tạp thì Chatfuel vẫn chưa thể trả lời.
Phân tích yêu cầu
Khảo sát hiện trạng
Hiện nay trên thị trường cũng đã có những nền tảng cho phép người dùng tạo ra những chatbot sử dụng luật Trong đó nền tảng nổi tiếng bậc nhất phải kể đến là Chatfuel Còn với thị trường trong nước, ta có một nền tảng mang thương hiệu Việt Nam đó là Messnow Hai nền tảng này đều có những ưu nhược điểm riêng Em sẽ trình bày chi tiết cũng như đưa ra những so sánh trong các mục ngay sau đây
Hình 1 Các hoạt động của chatbot 2.1.1 Hệ thống Chatfuel
Chatfuel [19] là một nền tảng được tạo ra nhằm để hỗ trợ người dùng tạo các chatbot Chatfuel tập trung hướng đến nền tảng Facebook Messenger Chatfuel cho phép người dùng có thể tạo chuỗi các hành động dưới dạng các khối Ngoài ra Chatfuel cũng hỗ trợ người quản lí xây dựng một kịch bản trả lời tin nhắn tự động với khách hàng dựa trên những dữ liệu dưới dạng các luật Nhưng Chatfuel chỉ hỗ trợ trả lời đối với những tin nhắn đơn giản Với những tin nhắn có độ phức tạp thì Chatfuel vẫn chưa thể trả lời
Chương 2 Phân tích yêu cầu
Hình 2 Giao diện nền tảng Chatfuel 2.1.2 Hệ thống Messnow
Hình 3 Giao diện nền tảng Messnow
Messnow [20] là nền tảng trực tuyến của Việt Nam Tương tự như đối với Chatfuel thì Messnow cũng cho phép người dùng có thể tạo ra các câu trả lời mẫu dưới dạng các thẻ
Nền tảng này hỗ trợ người sử dụng tích hợp cả Facebook và Zalo Không được như Chatfuel, Messnow cũng một giao diện và quy trình tạo dữ liệu, quản lí bao gồm rất nhiều bước, người dùng sẽ mất một khoảng thời gian để có thể làm quen và sử dụng một cách thành thạo Messnow cũng cung cấp chức năng trả lời tin nhắn tự động dựa trên các kịch bản nhưng Messnow chỉ có thể phân tích đối với những tin nhắn ngắn Messnow cũng không cho phép người quản trị viên tạo ra những tin nhắn cho nhiều người cùng một lúc
Bảng 1 sau đây em sẽ so sánh những ưu nhược điểm của từng nền tảng để ta có thể đưa ra những kết luận khi bắt đầu vào xây dựng và phát triển ĐATN
Bảng 1 So sánh 2 nền tảng Chatfuel và Messnow
Nền tảng Ưu điểm Nhược điểm
Chatfuel − Giao diện trực quan
− Dễ làm quen và sử dụng
− Hỗ trợ nhiều chức năng liên quan như: thống kê, live chat
− Chỉ hỗ trợ nền tảng Facebook
− Chỉ phân tích và xử lí với những tin nhắn đơn giản (thỏa mãn từ khóa của 1 luật)
Messnow − Hỗ trợ nhiều nền tảng
− Là sản phẩm của người Việt
− Giao diện khó sử dụng
− Chỉ xử lí được với những tin nhắn ngắn và đơn giản
− Chức năng thống kê vẫn còn hạn chế
− Quy trình các bước tích hợp rườm rà
− Không cho phép xem thông tin người dùng cung cấp
− Không cho phép người dùng gửi tin nhắn cho nhiều người Đối với tính năng chính là xây dựng chatbot dựa trên các luật thiết lập sẵn thì nhược điểm chung của cả 2 nền tảng là chỉ có thể phân tích những tin những tin nhắn có độ phức tạp thấp (tin nhắn thỏa mãn 1 luật) Messnow còn chỉ hỗ trợ tin nhắn ngắn Đối với những tin
7 nhắn thỏa mãn nhiều hơn 1 luật thì Chatfuel và Messnow đều chưa xử lí được và thường trả ra kết quả của luật đầu tiên thỏa mãn hoặc trả ra kết quả thông báo lỗi mặc định
Từ những khảo sát từ 2 nền tảng, em sẽ xây dựng một nền tảng xây dựng chatbot với giao diện trực quan, đơn giản hóa các bước tích hợp, nâng cao trải nghiệm người dùng Nền tảng cũng cung cấp đầy đủ các chức năng cần thiết để người quản trị viên không những có thể tạo ra chatbot mà còn có thể sử dụng những thông tin từ chatbot đó cho mục đích phân tích thống kê Cuối cùng một phần quan trọng mà hệ thống của em cần phải làm là tối ưu câu trả lời của chatbot.
Tổng quan chức năng
2.2.1 Biểu đồ use case tổng quan
Hình 4 Biểu đồ use case tổng quan
Hệ thống bao gồm 3 tác nhân chính, đó là: Người dùng chưa đăng nhập, Quản trị viên và Ứng dụng bên thứ 3 Trong đó người dùng chưa đăng nhập có thể đăng nhập hoặc đăng kí
1 tài khoản mới để sử dụng hệ thống Quản trị viên sẽ là tác nhân chính sử dụng các chức năng của hệ thống như: quản lí chuỗi hành động, quản lí luật, CRUD chatbot… Còn Ứng
8 dụng bên thứ 3 cụ thể là Zalo đóng vai trò kết nối giữa hệ thống và người dùng của ứng dụng đó (người nhắn tin) Zalo sẽ gửi tin nhắn đến hệ thống, khi đó hệ thống sẽ nhắn tin ngược trở lại cho người dùng thông qua API mà Zalo cung cấp
2.2.2 Biểu đồ use case phân rã Quản lí chuỗi hành động
Hình 5 trình bày về phân rã use case Quản lí chuỗi hành động Theo đó người quản trị viên có thể xem, sửa tên, xóa những chuỗi hành động mà chatbot đang có Ngoài ra quản trị viên có thể xem và tùy chỉnh nội dung của mỗi chuỗi hành động bằng việc thêm, sửa, xóa các hành động con bên trong 1 chuỗi hành động
Hình 5 Biểu đồ use case phân rã Quản lí chuỗi hành động 2.2.3 Biểu đồ use case phân rã Quản lí luật
Hình 6 trình bày về biểu đồ phân rã use case Quản lí luật Mỗi một luật sẽ có cấu trúc gồm
1 chuỗi từ khóa và 1 danh sách các chuỗi hành động có thể trả về Theo đó người quản trị viên có thể xem, tìm kiếm luật dựa vào từ khóa có chứa trong chuỗi từ khóa của luật, xóa
9 luật mà chatbot đang có Người dùng có thể tùy chỉnh thêm, sửa xóa từ khóa trong chuỗi từ khóa cũng như các chuỗi hành động có chứa trong luật đó
2.2.4 Biểu đồ use case phân rã Nhắn tin
Hình 6 Biểu đồ phân rã Use case Quản lí luật
Hình 7 Biển đồ phân rã Use case Nhắn tin
Hình 7 biểu diễn phân rã use case nhắn tin Theo hình thì bên thứ 3 cụ thể là Zalo có thể sử dụng các chức năng yêu cầu trả lời tin nhắn với các loại hành động con mà nền tảng xây dựng cung cấp Cụ thể thì nền tảng có thể nhắn tin trả lời dưới dạng văn bản, hình ảnh với tiêu đề, thẻ chọn cho phép điều hướng người dùng, đường dẫn url đến file âm thanh hoặc video và cuối cùng là nhắn tin dạng câu hỏi lưu trữ dữ liệu Dữ liệu người dùng trả lời thông qua ứng dụng thứ 3 sẽ được lưu lại phục vụ cho mục đích thống kê Người dùng sẽ thực hiện việc nhắn tin, giao tiếp với chatbot thông qua ứng dụng thứ 3, trong phạm vi đồ án thì sẽ là Zalo.
Đặc tả chức năng
Bảng 2 dưới đây sẽ liệt kê các use case đã được thiết kế Nền tảng xây dựng có 15 use case Do kích thước báo cáo có hạn nên em sẽ đặc tả cụ thể 3 use case: CRUD hành động con, nhắn tin và gửi tin nhắn cho nhiều người dùng
Bảng 2 Danh sách các use case
Nhóm use case Mã use case Tên use case
Tổng quan UC001 Đăng nhập
UC005 CRUD nhóm chuỗi hành động
UC006 Xem thông tin người dùng
UC007 Nhắn tin cho nhiều người
Quản lí chuỗi hành động UC009 CRUD chuỗi hành động
Nhóm use case Mã use case Tên use case
UC010 Tìm kiếm chuỗi hành động
UC011 CRUD hành động con
Quản lí luật UC012 CRUD luật
UC014 Sửa chuỗi từ khóa
UC015 Sửa danh sách chuỗi hành động
2.3.1 Đặc tả use case CRUD hành động con
CRUD hành động con là use case bao gồm 4 use case nhỏ hơn là tạo hành động con (Create), xem hành động con (Read), cập nhật hành động con (Update) và cuối cùng là xóa hành động con (Delete)
Bảng 3 Đặc tả use case “CRUD hành động con”
Mã Use case UC011 Tên Use case CRUD hành động con
Tác nhân Quản trị viên
Tiền điều kiện Đã thực hiện tạo chatbot thành công Đã liên kết thành công chatbot với Official Account trên trang https://oa.zalo.me/ Đã thực hiện tạo thành công chuỗi hành động Xem hành động con (R)
STT Thực hiện bởi Hành động
1 Quản trị viên Vào chức năng “Xem nội dung chuỗi hành động”
2 Hệ thống Thực hiện lấy thông tin của chuỗi hành động
3 Hệ thống Thực hiện lấy thông tin của từng hành động con
4 Hệ thống Hiển thị chuỗi hành động con
Luồng sự kiện thay thế STT Thực hiện bởi Hành động
STT Thực hiện bởi Hành động
1 Quản trị viên Vào chức năng “Thêm hành động con”
2 Hệ thống Hiển thị bảng điều khiển các loại hành động con
3 Quản trị viên Chọn loại hành động con
4 Hệ thống Thực hiện tạo hành động con với các trường dữ liệu là rỗng
Luồng sự kiện thay thế STT Thực hiện bởi Hành động
STT Thực hiện bởi Hành động
1 Quản trị viên Vào chức năng “Sửa hành động con”
2 Hệ thống Hiển thị hành động con
3 Quản trị viên Nhập dữ liệu các trường mới cho hành động con
4 Quản trị viên Thực hiện lưu hành động con
5 Hệ thống Kiểm tra các trường dữ liệu nhập vào
6 Hệ thống Thông báo lưu thành công và hiển
13 thị chuỗi hành động sau khi sửa
Luồng sự kiện thay thế STT Thực hiện bởi Hành động
6a Hệ thống Thông báo dữ liệu nhập vào không hợp lệ
STT Thực hiện bởi Hành động
1 Quản trị viên Vào chức năng “Xóa hành động con”
2 Hệ thống Hiển thị thông báo xác nhận xóa hành động con
3 Quản trị viên Xác nhận xóa
4 Hệ thống Thông báo xoá thành công và hiển thị chuỗi hành động sau khi xóa
Luồng sự kiện thay thế STT Thực hiện bởi Hành động
3a Quản trị viên Hủy bỏ
4a Hệ thống Hiển thị chuỗi hành động giống như ban đầu
Hậu điều kiện Không có
* Dữ liệu đầu vào của các loại hành động con như sau:
Bảng 4 Dữ liệu đầu vào use case “CRUD hành động con”
STT Loại hành động con
Trường dữ liệu Mô tả Bắt buộc? Điều kiện hợp lệ Ví dụ
1 Văn bản Câu trả lời dưới dạng văn bản
Câu trả lời của hành động văn bản
Không Sản phẩm là áo phông không cổ
STT Loại hành động con
Trường dữ liệu Mô tả Bắt buộc? Điều kiện hợp lệ Ví dụ
2 Hình ảnh Hình ảnh Hình ảnh được upload lên của hành động hình ảnh
Tiêu đề cho hình ảnh upload của loại hành động hình ảnh
4 Âm thanh Đường dẫn đến tệp tin âm thanh Đường dẫn âm thanh của loại hành động âm thanh
Không https://www. dropbox.com /TeA-ft- PC.mp3
5 Video Đường dẫn đến tệp tin video Đường dẫn video của loại hành động video
Không https://www. dropbox.com /s/7kpb0eayv shn0g1/saocu ngdc.mp4
6 Thẻ chọn Ảnh bìa Ảnh upload lên cho loại hành động là thẻ chọn
7 Tiêu đề Tiêu đề chính của loại hành động là thẻ chọn
Không Sự kiện giảm giá
8 Mô tả Mô tả cho loại hành động là thẻ chọn
Không Sự kiện giảm giá toàn bộ sản phẩm nhân dịp BF
STT Loại hành động con
Trường dữ liệu Mô tả Bắt buộc? Điều kiện hợp lệ Ví dụ
Lựa chọn sẽ điều hướng người dùng đến đường dẫn url
Lựa chọn sẽ yêu cầu mở ứng dụng Tin nhắn
Lựa chọn sẽ yêu cầu mở ứng dụng Điện thoại
12 Câu hỏi lấy dữ liệu
Câu hỏi Câu hỏi cho loại hành động lấy dữ liệu
Không Bạn mặc cỡ gì nhỉ?
13 Giá trị lưu Giá trị lưu vào hệ thống với loại hành động câu hỏi lấy dữ liệu
2.3.2 Đặc tả use case Nhắn tin
Bảng 5 Đặc tả use case “Nhắn tin”
Mã Use case UC008 Tên Use case Nhắn tin
Tác nhân Ứng dụng bên thứ 3
Tiền điều kiện Đã thực hiện tạo chatbot Đã liên kết thành công chatbot với Official Account trên trang https://oa.zalo.me/ Đã thực hiện tạo thành công chuỗi hành động
16 Đã thực hiện tạo các luật thành công
STT Thực hiện bởi Hành động
Gửi request có chứa tin nhắn của người dùng đến hệ thống
2 Hệ thống Thực hiện kiểm tra và lấy dữ liệu chatbot được nhận tin nhắn
3 Hệ thống Thực hiện phân tích tin nhắn và trả ra chuỗi hành động tiếp theo
4 Hệ thống Gửi tin nhắn đến người dùng
Luồng sự kiện thay thế STT Thực hiện bởi Hành động
2a Hệ thống Báo lỗi đến hệ thống bên thứ 3
Hậu điều kiện Không có
2.3.3 Đặc tả chức năng Gửi tin nhắn cho nhiều người
Bảng 6 Đặc tả chức năng “Gửi tin nhắn cho nhiều người”
Mã Use case UC007 Tên Use case Gửi tin nhắn cho nhiều người
Tác nhân Quản trị viên
Tiền điều kiện Đã thực hiện tạo chatbot Đã liên kết thành công chatbot với Official Account trên trang https://oa.zalo.me/ Đã thực hiện tạo thành công chuỗi hành động Đã có người sử dụng ứng dụng
STT Thực hiện bởi Hành động
1 Quản trị viên Chọn danh sách người dùng cần gửi tin nhắn
2 Quản trị viên Thực hiện nhập nội dung văn bản cho tin
3 Quản trị viên Ấn nút gửi để thực hiện yêu cầu gửi tin nhắn cho danh sách người dùng
4 Hệ thống Gửi tin nhắn đến người dùng trong danh sách
5 Hệ thống Thống báo khi đã gửi thành công
Luồng sự kiện thay thế STT Thực hiện bởi Hành động
1a Quản trị viên Ấn nút xem chi tiết nội dung người dùng trên màn hình 2a Quản trị viên Thực hiện chọn chuỗi hành động
5a Hệ thống Thông báo lỗi
Hậu điều kiện Không có
* Dữ liệu đầu vào của tin nhắn dạng văn bản hoặc chuỗi hành động đã có trong hệ thống:
Bảng 7 Dữ liệu đầu vào cho use case nhắn tin cho nhiều người
STT Trường dữ liệu Mô tả Bắt buộc? Điều kiện hợp lệ Ví dụ
1 Tin nhắn Tin nhắn dạng văn bản
Có Sale khủng nhân dịp BF!
2 Tin nhắn Chuỗi hành động có sẵn
Yêu cầu phi chức năng
Do người sử dụng hệ thống là những người không có chuyên môn về kĩ thuật nên hệ thống được xây dựng với cách tiếp cận đơn giản và trực quan Các chức năng được thiết kế sao cho dễ thao tác Ngoài ra, các lỗi có hướng dẫn cụ thể, thông báo bằng Tiếng Việt để người dùng biết vị trí lỗi và có thể thao tác để có thể khắc phục các lỗi
Bảo mật đối với một website, một ứng dụng luôn là một trong những ưu tiên hàng đầu Tất cả thông tin nhạy cảm của người dùng đều được mã hóa trước khi lưu vào cơ sở dữ liệu để tránh để lộ thông tin Thêm vào đó dữ liệu của người dùng do nền tảng thứ 3 cung cấp thì chỉ người quản trị viên mới có quyền xem.
Kết chương
Trong chương vừa rồi, em đã đưa ra tổng quan các chức năng mà hệ thống cung cấp, đặc tả một số chức năng chính, một số yêu cầu phi chức năng của hệ thống Tiếp theo ở chương
3, em sẽ đưa ra các công nghệ sử dụng, ưu nhược điểm của các công nghệ và lý do tại sao lại chọn công nghệ đó để giải quyết vấn đề đã đặt ra
Từ những yêu cầu trong Chương 2, Chương 3 này sẽ giới thiệu về công nghệ sử dụng trong hệ thống quản lí và xây dựng chatbot Hệ thống được xây dựng thành hai phần riêng biệt front-end và back-end Phần front-end sử dụng ReactJs kết hợp Redux, Redux Saga và thư viện giao diện Material-UI Phần back-end sử dụng Node.js cùng với MongoDB để lưu trữ dữ liệu và thư viện Multer để upload file
ReactJs (hay React) [1] [8] là một thư viện Javascript mã nguồn mở dùng để xây dựng giao diện người dùng ReactJs được phát triển bởi Facebook và được Facebook triển khai lần đầu tiên cho ứng dụng Newfeeds vào năm 2011 React hỗ trợ việc xây dựng những thành phần (components) UI có tính tương tác cao, có trạng thái và có thể sử dụng lại được Một số tính năng được coi là nổi trội khiến em lựa chọn ReactJs:
JSX [8] : Viết tắt của Javascript XML Đây là một loại cú pháp mở rộng của JavaScript viết theo kiểu XML JSX cho phép bạn viết các mã HTML và CSS trong JavaScript đồng thời nó tự động tối ưu hóa mã code khi biên dịch sang mã Javascript Trong quá trình biên dịch các lỗi cũng sẽ được phát hiện ngay và thông báo cho lập trình viên giúp việc sửa chữa, gỡ lỗi trở nên thuận tiện và dễ dàng hơn
Component [8] là các thành phần trong giao diện ReactJs tổ chức, chia nhỏ các thành phần thành các component và trong các component có thể có các component con Mỗi component luôn tồn tại 2 khái niệm là thuộc tính truyền vào (props) và trạng thái (state) Trong đó, state là trạng thái riêng của mỗi component, khi state thay đổi thì toàn bộ component đó sẽ được cập nhật lại (render) Props là thuộc tính mô tả những gì component sẽ render Props chứa dữ liệu được truyền từ component cha xuống component con Trong một component, ReactJs cho phép nhà phát triển kiểm soát sự thay đổi của state bên trong mỗi component còn props được quy định là giá trị bất biến.
Công nghệ sử dụng
Front-end
ReactJs (hay React) [1] [8] là một thư viện Javascript mã nguồn mở dùng để xây dựng giao diện người dùng ReactJs được phát triển bởi Facebook và được Facebook triển khai lần đầu tiên cho ứng dụng Newfeeds vào năm 2011 React hỗ trợ việc xây dựng những thành phần (components) UI có tính tương tác cao, có trạng thái và có thể sử dụng lại được Một số tính năng được coi là nổi trội khiến em lựa chọn ReactJs:
JSX [8] : Viết tắt của Javascript XML Đây là một loại cú pháp mở rộng của JavaScript viết theo kiểu XML JSX cho phép bạn viết các mã HTML và CSS trong JavaScript đồng thời nó tự động tối ưu hóa mã code khi biên dịch sang mã Javascript Trong quá trình biên dịch các lỗi cũng sẽ được phát hiện ngay và thông báo cho lập trình viên giúp việc sửa chữa, gỡ lỗi trở nên thuận tiện và dễ dàng hơn
Component [8] là các thành phần trong giao diện ReactJs tổ chức, chia nhỏ các thành phần thành các component và trong các component có thể có các component con Mỗi component luôn tồn tại 2 khái niệm là thuộc tính truyền vào (props) và trạng thái (state) Trong đó, state là trạng thái riêng của mỗi component, khi state thay đổi thì toàn bộ component đó sẽ được cập nhật lại (render) Props là thuộc tính mô tả những gì component sẽ render Props chứa dữ liệu được truyền từ component cha xuống component con Trong một component, ReactJs cho phép nhà phát triển kiểm soát sự thay đổi của state bên trong mỗi component còn props được quy định là giá trị bất biến
Chương 3 Công nghệ sử dụng
Virtual DOM [8] là viết tắt của Virtual Document Object Model và là một object Javascript, một object chứa đầy đủ thông tin cần thiết để tạo ra một DOM Bất cứ khi nào có thay đổi xảy ra trong ứng dụng, website sẽ tạo ra một bản sao của DOM thực Mọi sự thay đổi sẽ được thực hiện trên bản sao này Sau khi thực hiện cập nhật xong, nó kiểm tra sự khác biệt giữa DOM thực và bản sao Sau đó, DOM thực sẽ chỉ cập nhật những thành phần đã thực sự thay đổi Điều này làm cho ứng dụng nhanh hơn và không lãng phí bộ nhớ
Ngoài ra ReactJs còn có 1 tính năng gọi là Luồng dữ liệu một chiều (One-way Data Binding) Tức là ReactJs sẽ thực hiện truyền dữ liệu lần lượt từ component cha xuống component con Điều này sẽ giúp luồng dữ liệu được kiểm soát một cách tốt hơn Nhưng cũng mang lại nhiều một số bất cập Những điểm bất cập em sẽ nói rõ hơn trong phần 3.1.2
Trong phần trước em có nhắc đến 1 số hạn chế với One-way Data Binding Dữ liệu được truyền từ component cha đến component con thông qua thuộc tính đầu vào (props) Khi muốn truyền ngược lại, ta phải truyền thông qua một hàm gọi ngược lại (callback) từ con sang cha Cứ lần lượt như vậy đến khi thay đổi được state ở component mong muốn
Xét ví dụ trong Hình 8 chúng ta có một ứng dụng mà các node như trong hình là tượng trưng cho một component được mô hình tree-node
Hình 8 Cấu trúc cây thư mục ứng dụng giả định
Giả sử nếu có một hành động (action) ở node d3 được kích hoạt và ta muốn thay đổi trạng thái (state) của node d4 và c3 thì luồng dữ liệu sẽ được truyền đi như sau:
• Đường đi của dữ liệu đến d4: d3→c2→b1→a→b2→c4→d4
• Đường đi của dữ liệu đến c3: d3→c2→b1→a→b2→c3
Hình 9 Luồng dữ liệu khi sử dụng One-way data binding
Với những bài toán nhỏ thì việc cập nhật state qua lại giữa các component hoặc các page có thể dễ dàng nhưng nếu ứng dụng lớn hơn có rất nhiều nhánh và node con thì việc thao tác update state qua lại giữa các component trở nên phức tạp hơn khiến cho flow của code cũng khó đọc và khó debug hơn Để giải quyết vấn đề trên thì công nghệ được áp dụng vào đó là Redux Redux [9] là một thư viện JavaScript mã nguồn mở để quản lí trạng thái ứng dụng được xây dựng dựa trên kiến trúc Flux của Facebook Thư viện này hoạt động rất đơn giản Nó có một nơi gọi là store lưu trữ trạng thái của toàn bộ ứng dụng Mỗi component có thể truy xuất, thay đổi state được lưu trữ thông qua các hành động (action) và hoàn toàn trực tiếp thay vì việc phải gọi thông qua props của các component trung gian
Ta áp dụng nguyên lí hoạt động của Redux vào ví dụ vừa xét Trong Hình 10 khi người dùng tạo ra một sự kiện (ấn nút, submit form) thì tại d3 sẽ kích hoạt một hành động Sau khi được kích hoạt, tại store, trạng thái của cả ứng dụng sẽ thay đổi Hai node c3 và d4 có kết nối với store sẽ tự động cập nhật lại trạng thái Như vậy với sau khi áp dụng Redux vào
22 ví dụ, thay vì việc phải truyền hàm callback lần lượt từ component cha xuống component con thì giờ ta có một cách dễ hơn đó là thông qua store
Không thể phủ nhận tính hữu dụng của Redux đối với những ứng dụng có tính phức tạp Nhưng với những trường hợp cụ thể khi việc thay đổi dữ liệu chỉ diễn ra giữa các node liền kề thì ta vẫn nên dùng One-way Data Binding để tránh việc lạm dụng Redux Khi dự án lớn việc lạm dụng Redux dẫn đến store cũng phức tạp hơn, ảnh hưởng đến quá trình bảo trì, mở rộng cũng như làm việc nhóm
Hình 10 Luồng dữ liệu khi áp dụng Redux 3.1.3 Redux Saga
Khi ta muốn thực hiện một chức năng và thay đổi state trên store của Redux thì ta cần thực hiện thông qua việc gọi (dispatch) các action Trong thực tế một ứng dụng thường đòi hỏi có những thao tác xử lý cần thời gian để phản hồi (các thao tác bất đồng bộ lấy dữ liệu từ API hay các thao tác đọc ghi file hay đọc Cookie từ trình duyệt…) Các thao tác như vậy trong lập trình hàm gọi là side effects Để có thể giải quyết được các side effect này ta cần thực hiện nó ở middleware
Redux-Saga [10] là một thư viện Redux middleware, giúp quản lí những side effect giúp ứng dụng sử dụng Redux trở nên đơn giản hơn Bằng việc sử dụng tối đa tính năng Generator function, nó cho phép ta viết code bất đồng bộ nhìn giống như là code đồng bộ
Generator function [11] là một function có khả năng tạm ngưng thực thi trước khi hàm kết thúc và có thể tiếp tục chạy ở một thời điểm khác
Hình 11 mô tả logic hoạt động của Redux saga Khi người dùng thực hiện 1 hành động kích hoạt một sự kiện (event) của ứng dụng được ký hiệu là một hành động (Action), hay nói cách khác, tương tác của người dùng trên giao diện làm kích hoạt (dispatch) một action Action có thể chỉ làm thay đổi trạng thái của ứng dụng đơn thuần hoặc cũng có thể gọi lên server để thực hiện 1 hành động Với action có tương tác với server, sau khi API được gọi dữ liệu trả về sẽ được thông qua middleware (redux-saga) Từ những dữ liệu trả về từ server, middleware sẽ thay đổi state của ứng dụng thông qua reducer State sau khi đã được thay đổi sẽ kéo theo view thay đổi
Hình 11 Sơ đồ tổng quan nguyên lí hoạt động của Redux Saga 3.1.4 Material-UI
Material UI [15] là dự án mã nguồn mở được MIT (the Massachusetts Institute of Technology) cấp phép, một thư viện các React Component đã được tích hợp thêm cả Google’s Material Design Material UI không chỉ mang lại cho trang web một giao diện hoàn toàn mới với những button, textfield, toggle… được thiết kế theo một phong cách tự
Back-end
NodeJs [12] là một nền tảng mã nguồn mở được viết bởi Ryan Dahl vào năm 2009 dựa trên Javascript engine V8 của Google Về bản chất NodeJs là Javascript Trước khi NodeJs ra đời, Javascript chủ yếu được sử dụng để nhúng vào HTML sử dụng trên các website cho phép người dùng tương tác với trình duyệt Với sự ra đời của NodeJs, lập trình viên có thể dùng chạy Javascript bên phía server để xây dựng được các ứng dụng một cách nhanh chóng và dễ dàng mở rộng Một số ưu điểm nổi bật của NodeJs: (i) Tạo được các ứng dụng có tốc độ xử lý nhanh với thời gian thực (Realtime), (ii) Xây dựng cho các sản phẩm có lượng truy cập lớn, cần mở rộng nhanh, (iii) JSON APIs với cơ chế non-blocking I/O(Input/Output) và mô hình kết hợp với Javascript là sự lựa chọn tuyệt vời cho các dịch vụ Webs làm bằng JSON, (iv) Cộng đồng NodeJs rất lớn với nhiều package hoàn toàn miễn phí
Non-blocking: Trong Javascript, hầu hết các lời gọi I/O đều là non-blocking Nghĩa là khi có HTTP request, truy xuất dữ liệu trong cơ sở dữ liệu hoặc đọc ghi vào bộ nhớ thì hệ thống sẽ không tạm dừng (blocking) các đoạn code tiếp theo (như các ngôn ngữ server khác PHP, Ruby ) mà sẽ trao quyền thực thi những lời gọi I/O này cho hệ thống và thực thi những đoạn code tiếp theo, khi hệ thống đã thực thi xong những lời gọi hệ thống này thì hàm callback truyền vào sẽ tự động được gọi
ExpressJs [13] là một Framework nhỏ nhưng linh hoạt được xây dựng trên nền tảng của Nodejs Nó cung cấp các tính năng mạnh mẽ để phát triển web hoặc mobile ExpressJs hỗ trợ các method HTTP và middleware tạo ra API vô cùng mạnh mẽ và dễ sử dụng Tổng hợp một số ưu điểm chính của ExpressJs như sau: (i) Thiết lập các lớp trung gian (middleware) để trả về các HTTP request, (ii) Định nghĩa rõ ràng các routes cho phép sử dụng với các hành động khác nhau dựa trên phương thức HTTP và URL, (iii) Hỗ trợ mạnh về REST API
Từ những ưu điểm trên và những yêu cầu trong quá trình tìm hiểu ở chương 2 thì ExpressJs là sự lựa chọn hợp lí trong quá trình xây dựng và phát triển đề tài
MongoDB [14] là một cơ sở dữ liệu mã nguồn mở và là cơ sở dữ liệu phi quan hệ NoSQL hàng đầu, được sử dụng để lưu các dữ liệu lớn MongoDB được viết bằng C++ Khác với cách lưu trữ dữ liệu theo bảng, hàng trong cơ sở dữ liệu quan hệ (RDBMS), dữ liệu trong MongoDB được lưu dưới dạng các tập hợp (Collection), tài liệu (Document) Mỗi một collection được tổ chức dưới dạng một object JSON (trong MongoDB được gọi là BSON) bao gồm các cặp giá trị key-value mà không cần khóa chính, khóa ngoại hay dạng dữ liệu cụ thể MongoDB hỗ trợ đa nền tảng, nó có thể chạy trên Windows, Linux Nó hỗ trợ hầu hết các ngôn ngữ lập trình phổ biến như C#, Java, PHP, Javascript và các môi trường phát triển khác nhau Một số ưu điểm của MongoDB: (i) Dữ liệu linh hoạt (có thể tuỳ chỉnh số lượng trường, không cố định như cơ sở dữ liệu quan hệ), (ii) Cấu trúc của một Document rất rõ ràng, dễ đọc và dễ hiểu, (iii) Không cần sử dụng đến các lệnh Join phức tạp, (iv) Khả năng mở rộng dữ liệu dễ dàng, không cần phải quá bận tâm về kiểu dữ liệu, khóa chính, khóa ngoại như SQL, (v) Lưu dữ liệu trên RAM, giúp truy xuất dữ liệu nhanh hơn
NoSQL [5] là viết tắt của Not Only SQL NoSQL là một hệ thống quản lí phân phối
(DMS) cho các mô hình dữ liệu phi quan hệ, có cấu trúc linh hoạt, API đơn giản và cũng dễ dàng mở rộng, phù hợp với các ứng dụng hiện đại với số lượng dữ liệu phân tán khổng lồ hay các web thời gian thực Thuật ngữ này được giới thiệu lần đầu tiên năm 1998 và từ đó được gọi chung cho các “lightweight” cơ sở dữ liệu quan hệ mã nguồn mở nhưng không sử dụng truy vấn SQL Đến năm 2009, NoSQL được giới thiệu lại trong một hội thảo về cơ sở dữ liệu mã nguồn mở phân tán bởi Eric Evans, đã đánh dấu bước phát triển mới cho thế hệ cơ sở dữ liệu: phân tán (distributed) và phi quan hệ (non-relational)
REST (REpresentational State Transfer) [17] được đưa ra vào năm 2000, trong luận văn tiến sĩ của Roy Thomas Fielding (đồng sáng lập giao thức HTTP) Nó là một dạng chuyển đổi cấu trúc dữ liệu, là một phong cách kiến trúc cho việc thiết kế các ứng dụng có kết nối
Nó sử dụng HTTP đơn giản để tạo cho giao tiếp giữa các Phía client và server API là giao diện lập trình ứng dụng giúp tạo ra các phương thức kết nối với các thư viện và ứng dụng khác nhau
REST API là một tiêu chuẩn dùng trong việc thiết kế các thiết kế API cho các ứng dụng web để quản lí các tài nguyên (resource) RESTful là một trong những kiểu thiết kế API được sử dụng phổ biến ngày nay để cho các ứng dụng (web, mobile…) khác nhau giao tiếp
26 với nhau Chức năng quan trọng nhất của REST là quy định cách sử dụng các HTTP method như:
• GET: để truy xuất dữ liệu
• POST: để tạo mới dữ liệu
• PUT: để cập nhật cả một dữ liệu
• PATCH: để cập nhật một thành phần, thuộc tính của dữ liệu
• DELETE: để xoá một dữ liệu
Elasticsearch (ES) [16] là một công cụ tìm kiếm (search engine) kế thừa từ nền tảng Apache Lucene Nó cung cấp một bộ máy tìm kiếm dạng phân tán, có đầy đủ công cụ với một giao diện web HTTP có hỗ trợ dữ liệu JSON Elasticsearch được phát triển bằng Java và được phát hành dạng mã nguồn mở theo giấy phép Apache Elasticsearch chạy trên server riêng và đồng thời giao tiếp thông qua RESTful do vậy nó không phụ thuộc vào client viết bằng gì hay hệ thống hiện tại của bạn viết bằng gì Nên việc tích hợp nó vào hệ thống của bạn là dễ dàng, bạn chỉ cần gửi request HTTP Ngoài ra, Elasticsearch cũng có thể coi là một document oriented database giống như MongoDB, nó chứa dữ liệu giống như một database và thực hiện tìm kiếm trên những dữ liệu đó Người dùng cũng có thể sử dụng các chức năng thêm, sửa, xóa như 1 giống như MongoDB Đúng với định nghĩa là một công cụ tìm kiếm thì Elasticsearch thường được sử dụng như là một cơ sở dữ liệu (DB) thứ 2 chạy song song với một DB chính chỉ phục vụ cho mục đích tìm kiếm Tất cả dữ liệu được lưu vào Elasticsearch đều được đánh chỉ mục (Index), đây là lý do tại sao hiệu năng tìm kiếm của Elasticsearch rất cao Nhưng khác với chỉ mục thông thường trong MongoDB hay các loại cơ sở dữ liệu quan hệ khác, ES sẽ đánh chỉ mục đảo ngược (Inverted Index)
Inverted Index là kĩ thuật thay vì đánh index theo đơn vị document trong MongoDB thì Elasticsearch sẽ tiến hành đánh chỉ mục theo đơn vị tạm gọi là term Cụ thể hơn, Inverted Index là một cấu trúc dữ liệu, nhằm mục đích map giữa term, và các document chứa term đó
Xét một ví dụ để thấy được cách đánh chỉ mục đảo ngược của Elasticsearch Ta có 3 Document như sau:
Inverted Index của 3 documents đó sẽ được lưu dưới dạng như sau:
Sau đó Elasticsearch sẽ sử dụng 2 kĩ thuật đó là N-Gram và Morphological Analysis để tính toán và đưa ra điểm số (score) cho các kết quả trả về
N-Gram là kĩ thuật tokenize một chuỗi thành các chuỗi con, thông qua việc chia đều chuỗi đã có thành các chuỗi con đều nhau, có độ dài là nằm từ 1 đến 3
Morphological Analysis là kỹ thuật xử lý ngôn ngữ tự nhiên (National Language
Processing) Đơn giản là kỹ thuật tách các chuỗi thành từ có nghĩa dựa theo ngôn ngữ
Hai kĩ thuật kể trên đều được phát triển hoàn chỉnh và tích hợp sẵn trong ES nên em không đi sâu vào phân tích Tiếp đến một số ưu điểm của Elasticsearch:
• ES là phần mềm mã nguồn mở, hoàn toàn miễn phí, cộng đồng phát triển lớn,
• Có khả năng thực hiện những câu truy vấn phức tạp một cách nhanh chóng và cũng có thể lưu lại hầu hết cấu trúc truy vấn vào bộ nhớ đệm để sử dụng cho việc filter kết quả
• Hỗ trợ Full-text search với các tính năng như tách từ, tách câu, tạo chỉ mục cho dữ liệu
• Hỗ trợ tìm kiếm mờ, tự động hoàn thành (autocomplete) giúp bạn có thể tìm ra kết quả kể cả khi bạn viết sai chính tả.
Kết chương
Qua chương 3, em đã trình bày chi tiết những công nghệ mà em đã sử dụng trong quá trình làm ĐATN Ứng dụng được xây dựng dựa trên ReactJs kết hợp với thư viện giao diện Material-UI ở phía Client, NodeJs cùng cơ sở dữ liệu MongoDB phía server Trong chương tiếp theo em sẽ trình bày rõ hơn cách áp dụng những công nghệ, cùng kiến trúc trong quá trình xây dựng và phát triển ứng dụng
Thiết kế tổng quan của ứng dụng được biểu diễn trong Hình 12 Đây là kiến trúc được sử dụng phổ biến trong những năm gần đây Một ưu điểm không thể không kể đến của kiến trúc này là sự tách biệt rõ ràng giữa front-end và back-end Hai thành phần này giao tiếp với nhau thông qua chuẩn REST API
Front-end sử dụng Redux dễ quản lí trạng thái của cả ứng dụng một cách dễ dàng hơn Từ đó kiến trúc của Front-end cũng bị ảnh hưởng bởi thư viện này Như đã trình bày mục 3.1.2 thì Redux được xây dựng dựa trên kiến trúc Flux Trong đó các thành phần của kiến trúc User Interface hay views đóng vai trò là giao diện, nơi mà người dùng sẽ thực hiện những action như bấm nút, nhập… Trong khi Actions là nơi định nghĩa các hành động sẽ sinh ra trên views thì Middleware là nơi lắng nghe những action hành động đó và thực hiện các side effect Sau đó Middleware sẽ thay đổi Store thông qua Reducer
Back-end sử dụng framework ExpressJs và áp dụng chuẩn REST API nên kiến trúc mà back-end sử dụng là MVC mở rộng Cụ thể, back-end sẽ không có thành phần View Khi có request gửi đến server thì thành phần đầu tiên nó sẽ đi qua là Route Đây là thành phần sẽ quy định Controller sẽ thực hiện và xử lí ứng với request từ client Services là nơi chứa logic nghiệp vụ (Business Logic) Model trong mô hình MVC thuần chính là “Services” và
“Models” trong kiến trúc của ứng dụng Việc tách nhỏ Model ra thành hai phần, một phần là xử lí nghiệp vụ và một là phần thao tác với cơ sở dữ liệu điều này vừa đảm bảo nhiệm vụ chính của Model là kết nối với cơ sở dữ liệu, vừa có thể tái sử dụng mã nguồn, một Controller có thể gọi nhiều Service khác nhau Controller sẽ trả dữ liệu dưới dạng JSON và trả về cho Client.
Phát triển và triển khai ứng dụng
Thiết kế kiến trúc
Thiết kế tổng quan của ứng dụng được biểu diễn trong Hình 12 Đây là kiến trúc được sử dụng phổ biến trong những năm gần đây Một ưu điểm không thể không kể đến của kiến trúc này là sự tách biệt rõ ràng giữa front-end và back-end Hai thành phần này giao tiếp với nhau thông qua chuẩn REST API
Front-end sử dụng Redux dễ quản lí trạng thái của cả ứng dụng một cách dễ dàng hơn Từ đó kiến trúc của Front-end cũng bị ảnh hưởng bởi thư viện này Như đã trình bày mục 3.1.2 thì Redux được xây dựng dựa trên kiến trúc Flux Trong đó các thành phần của kiến trúc User Interface hay views đóng vai trò là giao diện, nơi mà người dùng sẽ thực hiện những action như bấm nút, nhập… Trong khi Actions là nơi định nghĩa các hành động sẽ sinh ra trên views thì Middleware là nơi lắng nghe những action hành động đó và thực hiện các side effect Sau đó Middleware sẽ thay đổi Store thông qua Reducer
Back-end sử dụng framework ExpressJs và áp dụng chuẩn REST API nên kiến trúc mà back-end sử dụng là MVC mở rộng Cụ thể, back-end sẽ không có thành phần View Khi có request gửi đến server thì thành phần đầu tiên nó sẽ đi qua là Route Đây là thành phần sẽ quy định Controller sẽ thực hiện và xử lí ứng với request từ client Services là nơi chứa logic nghiệp vụ (Business Logic) Model trong mô hình MVC thuần chính là “Services” và
“Models” trong kiến trúc của ứng dụng Việc tách nhỏ Model ra thành hai phần, một phần là xử lí nghiệp vụ và một là phần thao tác với cơ sở dữ liệu điều này vừa đảm bảo nhiệm vụ chính của Model là kết nối với cơ sở dữ liệu, vừa có thể tái sử dụng mã nguồn, một Controller có thể gọi nhiều Service khác nhau Controller sẽ trả dữ liệu dưới dạng JSON và trả về cho Client
Chương 4 Phát triển và triển khai ứng dụng
Trong chương 3 em đã trình bày những công nghệ để áp dụng vào ĐATN Chương 4 này sẽ trình bày chi tiết thiết kế kiến trúc cho tới chi tiết của công cụ sử dụng Với phạm vi và mục tiêu của đề tài đã nêu ra, em sẽ đưa ra những kết quả đã đạt được trong quá trình làm đồ án và xây dựng một số trường hợp kiểm thử
Hình 12 Thiết kế tổng quan
Hình 13 dưới đây biểu diễn cấu trúc tổng quan các thành phần của front-end của ứng dụng ĐATN Theo hình View sẽ bao gồm 2 phần là các trang (container) và các thành phần (component) với nhiệm vụ riêng biệt Component là các thành phần UI chỉ có chức năng hiển thị dữ liệu được truyền vào, cấu thành nên các trang Container tương ứng với các trang của ứng dụng sẽ tập trung xử lí logic, kết nối với store Action là nơi chứa các hàm để yêu cầu thay đổi trạng thái của ứng dụng
Hình 13 Thiết kế kiến trúc Front-end
Middleware chứa các file Redux Saga sẽ thực hiện lắng nghe action được kích hoạt, sau đó sẽ sử dụng các hàm có trong API caller để thực hiện gọi đến server Khi có dữ liệu trả về middleware sẽ thực hiện thay đổi trạng thái của ứng dụng thông qua Reducer Ngoài ra front-end còn có thêm 3 thành phần là Assets, Constants, Commons Trong đó Assets chứa các file CSS, hình ảnh sẽ sử dụng
Constants là nơi định nghĩa các hằng số sử dụng chung của toàn ứng dụng như: API_ENDPOINT, PORT… Cuối cùng là Commons sẽ chứa những hàm sử dụng chung
Cách tổ chức kiến trúc như trên cho công cụ giúp việc mở rộng, phát triển thêm các chức năng cho sản phẩm dễ dàng hơn, tái sử dụng được các component đã có, đồng thời cũng giúp việc quản lí mã nguồn được khoa học, rõ ràng, dễ hiểu
Hình 14 biểu diễn chi tiết các thành phần của back-end Nhìn vào hình ta có thể thấy Routes sẽ là nơi tiếp nhận những request của người dùng Từ nội dung đường dẫn yêu cầu (endpoint), phương thức gửi yêu cầu có trong request đó, route sẽ quyết định Controller sẽ thực hiện xử lí Controllers quản lí những HTTP request, bóc tách dữ liệu “thô” từ request sau đó sẽ phân chia nhiệm vụ và đưa ra quyết định Service nào thực hiện nó và trả về response tương ứng sau khi đã xử lí Services nhận dữ liệu liên quan để thực hiện chức năng chuyên biệt, đảm nhận việc tương tác trực tiếp với Models và Service khác để có thể xử lí dữ liệu và đưa ra kết quả cho Controller Cuối cùng thì Controller sẽ định nghĩa cấu trúc dữ liệu sẽ trả về cho client Dữ liệu được trả về sẽ có dạng JSON
Ngoài ra back-end còn có 1 số thành phần được định nghĩa với các chức năng riêng Commons là nơi chứa những tác vụ sử dụng chung như xử lí lỗi, đọc ghi file Constants chứa những file dùng để định nghĩa những hằng số, thông số cài đặt, thông số cấu hình cần thiết trong quá trình phát triển Khi thay đổi môi trường thì các nhà phát triển chỉ cần sửa những file này mà không phải đi tìm trong toàn bộ mã nguồn Upload là nơi chứa những file mà người dùng tải lên hệ thống Các file này sau khi tải lên hệ thống sẽ được hệ thống đổi tên Public là nơi chứa các file ảnh, Javascript phục vụ cho mục đích xây dựng mã nguồn
Với cách phân chia và chuyên biệt hóa từng chức năng của từng thành phần trong kiến trúc, khi có yêu cầu mở rộng hệ thống, việc nâng cấp hoàn toàn dễ dàng
Hình 14 Thiết kế kiến trúc Back-end
Thiết kế use case
Do phạm vi báo cáo có giới hạn nên mục này em chỉ trình bày biểu đồ trình tự của 3 use case chính đã nêu ra ở mục 2.3 là: CRUD hành động con, nhắn tin, gửi tin nhắn cho nhiều người dùng
Hình 15 biểu diễn biểu đồ trình tự cập nhật hành động con Khi người dùng vào chức năng sửa hành động con, hệ thống sẽ hiển thị lên danh sách các hành động con Từ đó, người dùng sau khi nhập nội dung cho hành động con mới hoặc là sửa nội dung hành động con đã có và thực hiện chức năng cập nhật Thứ tự những logic sẽ được biểu diễn trong hình
Hình 16 và Hình 17 biểu diễn biểu đồ trình tự thể hiện quá trình server xử lí trả ra tin nhắn phù hợp sau khi nhận được tin nhắn của bên thứ 3 Khi có tin nhắn từ bên thứ 3 gửi đến địa chỉ webhook đã đăng kí Server sẽ dựa vào mã Officical Account (oa_id) để tìm ra chatbot được nhắn tin đến Sau đó sẽ kiểm tra người nhắn tin đến Nếu người dùng là người nhắn tin lần đầu thì tin nhắn trả về sẽ là tin nhắn xin chào mặc định Nếu người dùng là người đã nhắn tin thì server sẽ tìm từ khóa có trong tin nhắn Với tin nhắn thỏa mãn 1 luật thì hệ thống sẽ trả ra chuỗi hành động ứng với tin nhắn cần trả lời Với tin nhắn thỏa mãn nhiều hơn 1 luật hoặc không thỏa mãn luật nào, server sẽ gọi đến ES để đưa ra luật có điểm số cao nhất Từ đó sẽ trả ra chuỗi hành động con dựa vào luật đó
Hình 18 và Hình 19 biểu diễn biểu đồ trình tự của use case Gửi tin nhắn cho nhiều người Khi người quản trị đã có 1 danh sách những người cần gửi tin nhắn thì họ sẽ bắt đầu thực hiện sử dụng chức năng này Tin nhắn có hai loại một là tin nhắn văn bản, người quản trị có thể soạn thảo trực tiếp trên cửa sổ hiện ra Loại tin nhắn thứ hai là tin nhắn dạng chuỗi hành động đã cài đặt sẵn Khi có yêu cầu lên server, server sẽ thực hiện kiểm tra tin nhắn gửi đi là dạng nào Nếu là văn bản thì server sẽ trực tiếp gọi API của Zalo Ngược lại nếu tin nhắn dạng chuỗi hành động thì server sẽ xử lí tạo ra các hành động con từ cơ sở dữ liệu rồi mới bắt đầu gửi tin nhắn
Hình 15 Biểu đồ trình tự “Cập nhật hành động con”
Hình 16 Biểu đồ trình tự “Nhắn tin”
Hình 17 Biểu đồ trình tự “Tìm chuỗi hành động”
Hình 18 Biểu đồ trình tự “Gửi tin nhắn cho nhiều người”
Hình 19 Biểu đồ trình tự “Gửi tin nhắn”
Thiết kế front-end
4.3.1 Thiết kế thành phần giao diện
Hình 20 Thiết kế thành phần giao diện
Theo Hình 20, ứng dụng bao gồm 8 trang chính có khả năng cung cấp các chức năng cần thiết cho 1 ứng dụng quản lí chuỗi hội thoại SignIn và SignUp cho phép người quản trị viên có thể đăng nhập hoặc đăng kí để có thể bắt đầu sử dụng các chức năng chính bên trong NotFound là trang trả ra mặc định khi người dùng nhập sai một đường dẫn mà ứng dụng không cung cấp Ngay sau khi đăng nhập người dùng sẽ đến với sảnh chờ (Lobby - page) Tại đây, người dùng có thể thấy danh sách những chatbot (Bot - component) đang hoạt động, có thể thêm, sửa, xóa bot Trang chủ (Home - page) hiển thị những thông tin cơ bản và cần thiết của chatbot đó như tên, mô tả, danh sách người theo dõi số phiên Người dùng có thể quản lí chuỗi hành động (Block) trong trang DashBoard Trang này bao gồm một danh sách các chuỗi hành động đã tạo (ListBlock - component) và nội dung cụ thể (ContentBlock - component) của chuỗi hành động đó Tiếp đến là trang quản lí các luật (Rule - page) Trang này sẽ hiển thị ra danh sách các luật (LineRule - component) với những từ khóa và chuỗi hành động được thiết lập Người dùng cũng có thể thêm, sửa, xóa
40 các luật Cuối cùng là trang tổng hợp và phân tích dữ liệu người dùng (Analyze - page) Danh sách người dùng có sử dụng trực tiếp chatbot thông qua nền tảng thứ 3 sẽ hiển thị tại đây Theo Hình 20 thì 4 trang bao gồm: Home, DashBoard, Analyze, Rule đều có SideBar và Topbar Trong đó Topbar để hiển thị người đang làm việc, bot đang được chỉnh sửa và button điều hướng về Lobby SideBar - thanh bên trái giao diện có vai trò như 1 thanh menu điều hướng giúp người dùng có thể chuyển đổi các qua lại các trang một cách linh hoạt
4.3.2 Thiết kế giao diện màn hình “Quản lí chuỗi hành động”
Màn hình “Quản lí chuỗi hành động” là 1 trong những màn hình chính của nền tảng Ngoài phần Topbar (Header trong ảnh Hình 21) và Sidebar phần nội dung của chính sẽ gồm 2 phần là ListBlock và ContentBlock ListBlock sẽ chứa những nút bấm đại diện cho một chuỗi hành động Khi người dùng click vào nút đó thì nội dung của chuỗi hành động đó sẽ được hiển thị trong phần ContentBlock
Hình 21 Thiết kế giao diện trang Quản lí chuỗi hành động (DashBoard)
Bảng 8 Thiết kế chi tiết các thành phần cho màn hình Quản lí chuỗi hành động
Thành phần Loại State Props
ContentBlock Component listElement: Danh sách các hành động con blockName: Tên của chuỗi hành động open: Biến hiển thị cửa sổ currentBlock: Chuỗi hành động hiện tại được chọn group: Nhóm chứa chuỗi hành động hiện tại editContent: Biến đánh
Thành phần Loại State Props xóa chuỗi hành động defaultBlock: Biến đánh dấu chuỗi hành động mặc định dấu người dùng đang sử chuỗi hành động
ListBlock Component open: Biến hiển thị chi tiết thông tin của luật actionType: loại hành động muốn thực hiện với nhóm chuỗi hành động (Đổi tên, xóa) nameGroup: Tên của nhóm chuỗi hành động đang thực hiện chỉnh sửa groups: tất cả nhóm chuỗi hành động handleRenameGroup: hàm thực hiện đổi tên nhóm chuỗi hành động handleDeleteGroup: hàm thực hiện xóa nhóm chuỗi hành động addBlock: hàm thực hiện thêm mới 1 chuỗi hành động
4.3.3 Thiết kế giao diện màn hình “Quản lí luật”
Hình 22 Thiết kế giao diện trang Quản lí luật (Rule)
Màn hình quản lí chuỗi hành động sẽ cung cấp các chức năng Quản lí luật bao gồm thêm, sửa, xóa luật Trong sửa luật, người dùng có thể tùy chỉnh hai loại thuộc tính của một luật đó là từ khóa và danh sách chuỗi hành động Khi thêm mới 1 luật người dùng sẽ phải nhập vào tên, từ khóa, chọn danh sách chuỗi hành động Giao diện bên ngoài cũng phải cho người dùng 1 cái nhìn tổng quan về những gì họ đã thiết lập Hình 22 dưới đây sẽ đưa ra bản thiết kế giao diện ban đầu cho cho màn hình Rule Màn hình sẽ bao gồm 1 danh sách các component LineRule chứa những thông tin về luật đó
Bảng 9 Thiết kế chi tiết các thành phần màn hình Quản lí luật
Thành phần Loại State Props
Rule Container open: Biến hiển thị chi tiết thông tin của luật keyword: Từ khóa của luật được chọn name: Tên của luật được chọn blocks: Danh sách chuỗi hành động của luật được chọn id: mã Id của luật được chọn isValid: Biến kiểm tra dữ liệu mà người dùng nhập cho luật notification: thông báo listRule: Danh sách tất cả các luật
LineRules Component showMore: Biến đánh kiểm tra người dùng có muốn xem hết toàn bộ từ khóa openModal: Biến kiểm tra sự hiển thị của cửa sổ Xóa luật idRule: Mã của luật nameRule: Tên của luật keyword: Từ khóa của luật blocks: Danh sách chuỗi hành động
Thành phần Loại State Props onEdit: Hàm định nghĩa hành động cập nhật luật onDelete: Hàm định nghĩa hành động xóa luật
Thiết kế thành phần back-end
Trong mục 4.1.1 em đã trình bày về cấu trúc những thành phần của back-end Trong các thành phần đã nêu ra thì Services là nơi đảm nhận nhiệm vụ nghiệp vụ logic của hệ thống, Model là nơi giao tiếp với cơ sở dữ liệu Thiết kế chi tiết cho phần Model sẽ được trình bày trong mục 4.5 Do phạm vi của báo cáo có giới hạn nên phần này em chỉ nếu ra 1 số Service của các chức năng chính
4.4.1 Dịch vụ chuỗi hành động (BlockService)
BlockService là nơi cung cấp các chức năng liên quan đến quản lí chuỗi hành động Đây là
1 service chính của hệ thống Chi tiết các hàm và ý nghĩa sẽ được trình bày trong bảng Bảng 10
Bảng 10 Danh sách các hàm của BlockService
STT Hàm Ý nghĩa Tham số đầu vào
1 getBlock Lấy nội dung của 1 chuỗi hành động, bao gồm cả các hành động con blockId: mã ID của chuỗi hành động cần lấy
2 addBlock Thêm mới 1 chuỗi hành động trắng groupId: Mã Id của nhóm chuỗi hành động sẽ được thêm name: Tên chuỗi hành động mới
3 updateNameBlock Cập nhật tên cho 1 chuỗi hành blockId: mã Id của chuỗi hành động
STT Hàm Ý nghĩa Tham số đầu vào động cập nhật tên name: tên mới của chuỗi hành động
4 deleteBlock Xóa 1 chuỗi hành động blockId: mã Id của chuỗi hành sẽ xóa
5 updateListElements Cập nhật chuỗi hành động con elements: danh sách chuỗi hành động con sau khi được cập nhật blockId: mã Id của chuỗi hành động
6 uploadImage Tải ảnh lên server ImageFile: file ảnh
7 getPath Lấy đường dẫn ảnh mới tải lên name: tên ảnh
8 createEmptyElement Tạo 1 hành động con với giá trị các trường là trống blockId: mã Id của chuỗi hành động sẽ được thêm hành động con
9 deleteElement Xóa 1 hành động con elementId: Mã Id của hành động con
Dịch vụ Zalo cung cấp các tác vụ liên quan đến trả lời tin nhắn, gửi tin nhắn cho nhiều người Các tác vụ này đều liên quan đến API từ Zalo Dưới đây sẽ trình bày chi tiết các tác vụ và ý nghĩa của các tác vụ đó
Bảng 11 Danh sách các hàm trong ZaloService
STT Hàm Ý nghĩa Tham số đầu vào
1 replyMessage Trả lời tin nhắn gửi đến từ Zalo oaId: mã của OA senderId: mã Id của người gửi eventName: dạng tin nhắn gửi message: Tin nhắn
2 getDataOfOa Lấy thông tin của chatbot ứng với
OA access_token: token của OA oaId: Mã Id của OA
3 callApiGetOa Lấy thông tin của OA thông qua
API của Zalo access_token: token của OA
4 sendMsgText Gửi tin nhắn dạng văn bản cho nhiều người botId: mã Id của chatbot recipientId: danh sách người sẽ nhận được tin nhắn text: nội dung tin nhắn
5 sendBlock Gửi tin nhắn dạng chuỗi hành động cho nhiều người botId: Id chatbot recipientId: Id người nhận blockID: mã Id của chuỗi hành động muốn gửi
Thiết kế cơ sở dữ liệu
Hình 23 Biểu đồ thực thể liên kết của nền tảng
Hình 23 biểu diễn biểu đồ thực thể liên kết của nền tảng Thực thể “Account” chứa những thông tin cơ bản của người quản trị viên khi sử dụng hệ thống Mỗi “Account” có thể tạo ra những chatbot được biểu diễn bằng thực thể “Bot” Thực thể “Group” biểu diễn các nhóm chuỗi hành động do người quản trị viên quy định Trong mỗi nhóm chuỗi hành động sẽ chứa những chuỗi hành động được biểu diễn trên hình bằng thực thể “Block” Thực thể
“Element” là những hành động con Thực thể “Rule” mô tả những luật của từng con chatbot “User” đại diện người sử dụng chatbot thông quan nền tảng thứ 3 “BadMessage” mô tả thông tin những tin nhắn mà chatbot không thể hiểu và xử lí được Thực thể Attribute mô tả dữ liệu mà người dùng cung cấp cho chatbot mà họ sử dụng
Dựa vào biểu đồ thực thể liên kết E-R, em đã thiết kế tổng quan cơ sở dữ liệu MongoDB là một cơ sở dữ liệu phi quan hệ dẫn nên việc thiết kế cơ sở dữ liệu cũng như mô hình hóa các thực thể phải linh hoạt sao cho tối ưu Hình 24 các trường cũng như cấu trúc cơ sở dữ liệu theo kiểu NoSQL Do không có khóa ngoại như những cơ sở dữ liệu quan hệ bình thường nên trong MongoDB ta có thể biểu diễn mối quan hệ 1 nhiều bằng nhiều cách Chi tiết cách mô hình hóa cơ sở dữ liệu em sẽ trình bày chi tiết trong mục 5.3
Hình 24 Thiết kế cơ sở dữ liệu trong MongoDB
Cơ sở dữ liệu sau khi thiết kế gồm có 9 Collection Do giới hạn về độ dài của ĐATN, em sẽ trình bày một số collection chính trong toàn bộ thiết kế chi tiết cơ sở dữ liệu Các collection còn lại được mô tả ở phần phụ lục
Bảng 12 Chi tiết thuộc tính của Collection Bot
Tên thuộc tính Kiểu dữ liệu Ghi chú Giải thích
_id ObjectId Mã Id tự sinh trong
MongoDB name String Bắt buộc Tên OA description String Mô tả OA
48 oa_id String Bắt buộc Mã OA tokenApp String Bắt buộc Token của OA user_id ObjectId Bắt buộc Id của quản trị viên avatar String Ảnh avatar của OA cover String Ảnh bìa của OA deleteFlag Boolean Giá trị mặc định là false Cờ báo hiệu đã xóa
Bảng 13 Chi tiết thuộc tính của Collection Element Tên thuộc tính Kiểu dữ liệu Ghi chú Giải thích
_id ObjectId Mã id tự sinh trong
MongoDB element_type String Bắt buộc
Giá trị mặc định thuộc các giá trị sau đây: TEXT, IMAGE, AUDIO, VIDEO, LIST, DATA_CUSTOM
Loại hành động con attachment_msg Object Tệp đính kèm text_msg String Nội dung văn bản của hành động con attribute String Giá trị mặc định là null
Chỉ được sẽ giá trị khi loại của hành động con là DATA_CUSTOM
Tên thuộc tính sẽ lưu url String Đường dẫn đến video hoặc âm thanh block_id ObjectId Bắt buộc Id của chuỗi hành động
Tên thuộc tính Kiểu dữ liệu Ghi chú Giải thích deleteFlag Boolean Giá trị mặc định là false Cờ báo hiệu đã xóa
Xây dựng ứng dụng
4.6.1 Thư viện và công cụ sử dụng
Trong quá trình xây dựng công cụ quản lí và hành động, em có sử dụng một số công cụ để hỗ trợ như ở Bảng 14 bên dưới
Bảng 14 Danh sách thư viện và công cụ sử dụng
Mục đích Công cụ và thư viện Địa chỉ URL
IDE lập trình Visual Studio Code
64 bit https://code.visualstudio.com/
Cơ sở dữ liệu lưu trữ
MongoDB https://www.mongodb.com/
Cơ sở dữ liệu tìm kiếm
Elasticsearch https://www.elastic.co/
Material-UI https://material-ui.com/
Thư viện quản lí state
Redux https://redux.js.org/
Redux-Saga https://redux-saga.js.org/
Kho mã nguồn Github https://github.com/
4.6.2 Kết quả đạt được Đồ án đã xây dựng được một công cụ trực quan giúp người quản lí doanh nghiệp có thể dễ dàng sử dụng với những chức năng chính: (i) quản lí chatbot, (ii) quản lí chuỗi hành động, (iii) quản lí luật (iv) xem thông tin người dùng Nền tảng hoàn thiện với hơn 37000 dòng code đối với cả front-end và back-end Hiện tại người dùng có thể sử dụng nền tảng theo đường dẫn https://chungbt.vbee.vn/
Do phạm vi của báo cáo có giới hạn nên em sẽ tập trung minh họa các bước thực hiện của một số chức năng chính trong nền tảng Từ mục 4.3.3.1 đến mục 4.3.3.3 em sẽ mình họa ba chức năng chính sẽ được trình bày là: (i) CRUD hành động con, (ii) nhắn tin (sử dụng nền tảng thứ 3), (iii) nhắn tin cho nhiều người
Tại màn hình Quản lí chuỗi hành động (DashBoard), sau khi chọn chuỗi hành động được chọn, hệ thống sẽ xử lí và đưa ra những hành động con có trong chuỗi hành động đó (READ) Trong Hình 25, khi người quản trị chọn chuỗi hành động “Ví da” để chỉnh sửa hệ thống sẽ hiển thị hành động con dạng văn bản đã có
Hình 25 Giao điện sau khi tạo mới 1 chuỗi hành động
Sau khi thực hiện xem chuỗi hành động con thì người quản trị viên có thể thêm hành động con (CREATE) cho chuỗi đó bằng cách chọn loại hành động con muốn thêm ở thanh điều khiển bên dưới Hệ thống sẽ tạo ra 1 hành động con tương ứng với các thuộc tính ban đầu là rỗng Cụ thể trong Hình 26 em thực hiện thêm 1 hành động con dạng ảnh
Hình 26 Hình ảnh mô tả hành động “Thêm hành động con”
Sau khi thêm thành công hành động con, người quản trị viên bắt đầu nhập thông tin cho hành động con đó Cuối cùng là ấn nút “Lưu” để thực hiện cập nhật nội dung chuỗi hành động đó (UPDATE)
Hình 27 Hình ảnh mô tả hành động "Cập nhật hành động con"
Cuối cùng Hình 28 sẽ biểu diễn khi người dùng ấn biểu tượng thùng rác ở bên phải mỗi hành động con hệ thống sẽ tự động hỏi người dùng có thực sự muốn xóa hành động con hay không Người dùng chọn “Xác nhận xóa” để thực hiện chức năng xóa hành động con (DELETE) Sau khi xóa thành công thì chuỗi hành động con sẽ hiển thị
Hình 28 Giao diện xác nhận xóa hành động con
Hình 29 Giao diện hiển thị sau khi xóa hành động con thành công
Vì nền tảng phân tích tin nhắn của người dùng dựa trên các luật nên cần thiết lập thành công các luật cho ứng dụng Để kiểm tra người dùng có thể nhắn tin chứa từ khóa đã thiết lập cho cửa hàng đã liên kết với chatbot Hình 30 biểu diễn danh sách các luật đã được cài đặt trong nền tảng Hình 31 là kết quả người dùng nhận được khi nhắn tin sai chính tả đến người dùng Chatbot vẫn có thể phân tích và đưa ra kết quả trả lời đúng
Hình 30 Giao điện danh sách luật đã được thiết lập
Hình 31 Chuỗi hành động trả về khi nhắn tin 4.6.3.3 Gửi tin nhắn cho nhiều người
Tại trang quản lí người dùng, người quản trị viên sẽ chọn danh sách những người muốn gửi tin nhắn Sau đó ấn vào nút “Gửi tin nhắn cho” để bắt đầu thực hiện việc nhập tin nhắn
Người dùng có thể chọn loại tin nhắn muốn gửi Đầu tiên người dùng có thể chọn tin nhắn dưới dạng văn bản Sau đó có thể nhập nội dung muốn gửi vào textbox ở cửa sổ hiện ra
Hình 32 Giao diện trang quản lí người dùng
Hình 33 Giao diện gửi tin nhắn dưới dạng văn bản thông thường
Nếu không muốn gửi tin nhắn dạng văn bản người dùng cũng có thể chuyển đổi qua lại thông qua nút công tắc ở ngay phía trên textbox nhập văn bản Sau đó người dùng có thể
55 chọn bất kì 1 chuỗi hành động đã được thiết định trước đó và ấn gửi Những người trong danh sách nhận được tin nhắn sẽ nhận được chuỗi hành động đó
Hình 34 Kết quả khi sau khi gửi tin nhắn dạng văn bản
Hình 35 Giao diện gửi tin nhắn cho nhiều người dưới dạng chuỗi hành động
Hình 36 Kết quả khi sau khi gửi tin nhắn dạng chuỗi hành động
Kiểm thử và triển khai
Em đã tiến hành tạo các trường hợp kiểm thử theo phương pháp kiểm thử hộp đen Kết quả kiểm thử đạt 60/60 trường hợp kiểm thử Chi tiết một số trường hợp kiểm thử cho chức năng chính được trình bày ở phần Phụ Lục
Hiện tại ứng dụng đã được triển khai trên server với tên miền là https://chungbt.vbee.vn/
Cụ thể thông số liên quan đến cấu hình của ứng dụng sau khi được triển khai lên server thể hiện ở Bảng 15 dưới đây:
Bảng 15 Thông số cấu hình của ứng dụng và server triển khai
CPU Server Intel® Xeon® Processor E5-2690 v4 (35M Cache, 2.60 GHz)
URL https://chungbt.vbee.vn/
URL API https://api-chungbt.vbee.vn/
Kết chương
Trong chương 4 này, em đã làm rõ cách áp dụng cơ sở lí thuyết và công nghệ đã đề cập trong chương 3 để thiết kế kiến trúc cho ứng dụng Chương 5 kế tiếp em sẽ trình bày những giải pháp và những đóng góp nổi bật của bản thân trong quá trình làm ĐATN
Chương 4 em đã nói chi tiết cách phát triển và triển khai ứng dụng Nền tảng ra đời với mục đích tạo chatbot đáp ứng nhu cầu con người trong quá trình giao tiếp và trao đổi thông tin Ngoài những chức năng mà bất cứ nền tảng nào cũng có, ứng dụng còn bao gồm những ý tưởng để cải tiến sản phẩm Trong chương 5 em sẽ trình bày cụ thể về những giải pháp cũng như đóng góp nổi bật của bản thân em trong quá trình xây dựng và hoàn thành đồ án này
5.1 Giải pháp sử dụng luật xác định câu trả lời
Như đã trình bày trong phần mở đầu, để có thể xây dựng chatbot với những công nghệ hàng đầu như trí tuệ nhân tạo hay học máy gần như là điều không thể đối với các doanh nghiệp vừa và nhỏ Lí do đến từ chi phí cài đặt và duy trì chatbot Thêm vào đó người quản trị viên cũng cần có những hiểu biết về chuyên môn kĩ thuật Hiện nay đa phần các doanh nghiệp này đều sử dụng một giải pháp tình thế để vẫn có thể sử dụng chatbot và vẫn tối ưu về chi phí, đó là sử dụng những chatbot cơ bản Các chatbot cơ bản này yêu cầu người dùng thao tác với các nút bấm trên cửa sổ nhắn tin giống như đang tương tác với một chương trình máy tính
Hình 37 là giao diện của nền tảng thứ 3 giúp người dùng tương tác với chatbot mà 1 cửa hàng đang sử dụng Theo hình có thể thấy người dùng sử dụng các nút gợi ý để giao tiếp với chatbot Điều này làm tăng yếu tố kĩ thuật khi sử dụng, gây nhàm chán, cảm giác của người dùng giống với đang trả lời câu hỏi chứ không phải đang giao tiếp
Thực tế khi người dùng liên hệ với một doanh nghiệp, cửa hàng nào đó thì nhu cầu của họ là tìm hiểu về những sản phẩm mà doanh nghiệp đó cung cấp Những tin nhắn mà người dùng sẽ xoay quanh một nhóm các từ khóa như: mã sản phẩm, tên sản phẩm, mã giảm giá… liên quan đến cửa hàng mà họ liên hệ Hơn hết người nắm rõ nhất các từ khóa đó chính là người quản trị viên.
Các giải pháp và đóng góp nổi bật
Giải pháp sử dụng luật xác định câu trả lời
Như đã trình bày trong phần mở đầu, để có thể xây dựng chatbot với những công nghệ hàng đầu như trí tuệ nhân tạo hay học máy gần như là điều không thể đối với các doanh nghiệp vừa và nhỏ Lí do đến từ chi phí cài đặt và duy trì chatbot Thêm vào đó người quản trị viên cũng cần có những hiểu biết về chuyên môn kĩ thuật Hiện nay đa phần các doanh nghiệp này đều sử dụng một giải pháp tình thế để vẫn có thể sử dụng chatbot và vẫn tối ưu về chi phí, đó là sử dụng những chatbot cơ bản Các chatbot cơ bản này yêu cầu người dùng thao tác với các nút bấm trên cửa sổ nhắn tin giống như đang tương tác với một chương trình máy tính
Hình 37 là giao diện của nền tảng thứ 3 giúp người dùng tương tác với chatbot mà 1 cửa hàng đang sử dụng Theo hình có thể thấy người dùng sử dụng các nút gợi ý để giao tiếp với chatbot Điều này làm tăng yếu tố kĩ thuật khi sử dụng, gây nhàm chán, cảm giác của người dùng giống với đang trả lời câu hỏi chứ không phải đang giao tiếp
Thực tế khi người dùng liên hệ với một doanh nghiệp, cửa hàng nào đó thì nhu cầu của họ là tìm hiểu về những sản phẩm mà doanh nghiệp đó cung cấp Những tin nhắn mà người dùng sẽ xoay quanh một nhóm các từ khóa như: mã sản phẩm, tên sản phẩm, mã giảm giá… liên quan đến cửa hàng mà họ liên hệ Hơn hết người nắm rõ nhất các từ khóa đó chính là người quản trị viên
Chương 5 Các giải pháp và đóng góp nổi bật
Hình 37 Tin nhắn của chatbot phổ biến trên thị trường 5.1.2 Giải pháp
Giải pháp mà em đưa ra ở đây là xây dựng những chatbot sử dụng luật được thiết lập sẵn Các luật này sẽ do người quản trị viên cài đặt, tạo dữ liệu
Hình 38 Lưu đồ biểu diễn quá trình xác định câu trả lời sử dụng luật
Theo Hình 38 Khi người dùng sử dụng nền tảng thứ 3 để liên lạc với cửa hàng, tin nhắn đó sẽ được gửi đến cho server Khi có được nội dung tin nhắn, server sẽ sử dụng sẽ thực hiện
60 truy xuất cơ sở dữ liệu, lấy ra danh sách các luật tương ứng với của chatbot đó Mỗi một luật sẽ bao gồm 1 danh sách các từ khóa Sau đó server sẽ sử dụng biểu thức chính quy để tìm từ khóa có trong tin nhắn Cuối cùng là đưa ra danh sách các luật thỏa mãn
Nền tảng xây dựng chatbot cho Zalo cho phép người quản trị viên có thể quản lí những luật này Từ những luật đã thiết lập hệ thống sẽ tự động trả lời người dùng khi nhắn tin đến cho chatbot Hình 39 là giao diện thiết lập một luật cho chatbot Mỗi 1 luật sẽ bao gồm tên của luật đó, một danh sách các từ khóa liên quan được ngăn cách với nhau bởi dấu phẩy và cuối cùng là câu trả lời mong muốn
Hình 39 Giao diện thiết lập một luật
Hình ảnh chi tiết minh họa cho chức năng sử dụng từ luật để xác định câu trả lời đã được em minh họa trong mục 4.6.3.2.
Giải pháp tìm kiếm luật xác định câu trả lời sử dụng ElasticSearch
Những nền tảng tạo chatbot sử dụng các luật hiện nay về cơ bản sẽ có nguyên lí hoạt động như sau: lấy tin nhắn từ nền tảng thứ 3, kiểm tra độ trùng khớp với từ khóa của luật, trả về hành động Nhưng trong thực tế với mức độ linh hoạt của mỗi ngôn ngữ sẽ dẫn đến 1 số
61 vấn đề đặt ra đối với các xử lí trên: (i) tin nhắn không chứa từ khóa, (ii) tin nhắn chưa nhiều từ khóa của nhiều luật, (iii) tin nhắn sai lỗi chính tả Người quản trị không thể lường trước hết mọi từ khóa hoặc mọi tin nhắn mà người dùng có thể gửi đến cho chatbot
Hình 40 Kiểm câu trả lời của hệ thống Messnow
Như trong Hình 40, tin nhắn mà người dùng gửi đến chưa 2 từ khóa của 2 luật đó là “chào ad” và “tạm biệt” Xét 2 trường hợp kiểm thử trên, hệ thống luôn trả ra câu trả lời ứng với luật đầu tiên thỏa mãn Với cách làm hiện tại thì hiệu quả thực tế mà nền tảng đem lại không hề cao Đối với Chatfuel, hệ thống sẽ luôn trả lời bằng tin nhắn mặc định với các trường hợp đã đặt vấn đề ở trên
5.2.2 Giải pháp Để giải quyết những vấn đề đã nêu ra ở trên, em đã đề xuất giải pháp sử dụng kết hợp ElasticSearch trong qua trình xác định câu trả lời từ tin nhắn của người dùng Hình 41 trình bày quá trình xử lí từ khi nhận được tin nhắn của người sử dụng đến khi trả về hành động cụ thể
Hình 41 Lưu đồ biểu diễn quá trình xử lí khi tích hợp Elasticsearch
63 Đầu tiên server sẽ kiểm tra trong tin nhắn có chứa từ khóa thỏa mãn trong server hay không Sau khi quá trình kiểm tra hoàn tất, đối với trường hợp thỏa mãn một luật thì server sẽ trả ra ngay chuỗi hành động ứng với luật đó Tiếp đến với tin nhắn chưa nhiều hơn một luật, server sẽ sử dụng Elasticsearch để kiểm tra xem luật nào có điểm (score) lớn nhất Sau đó sẽ trả về chuỗi hành động tương ứng Cuối cùng đối với trường hợp không thỏa mãn bất cứ luật nào, server tiếp tục sử dụng Elasticsearch để tìm kiếm luật có điểm số cao nhất
Trong quá trình kiểm thử chức năng nhắn tin em đã tạo dữ liệu mẫu để kiểm thử và đánh giá kết quả Với dữ liệu đầu vào mẫu là 30 tin nhắn ngẫu nhiên từ người dùng Đem so sánh kết quả đạt được khi kết hợp tìm kiếm từ khóa thông thường (Phrase Search) và kết hợp Phrase Search với ElasticSearch ta có Bảng 16
Bảng 16 So sánh kết quả kiểm thử PS và ES
Phương pháp sử dụng Tin nhắn trả lời đúng Tỉ lệ thành công
Có thể thấy tỉ lệ thành công khi kết hợp ES và PS vào việc tìm kiếm câu trả lợi đem lại hiệu quả hơn 27% so với các sử dụng Phrase Search thông thường Dưới đây sẽ là một số ví dụ về dữ liệu kiểm thử và kết quả kiểm thử mà em đã thực hiện
Bảng 17 Một số ví dụ điển hình
Mô tả Tin nhắn đầu vào
Luật mong muốn trả ra
- Tin nhắn có nghĩa và không chứa từ
Ad cho em hỏi còn áo tee màu trắng không?
"White tee, tee trắng, tee white, trắng tee"
Mô tả Tin nhắn đầu vào
Luật mong muốn trả ra
Phrase Search PS + ES khóa
- Tin nhắn không có nghĩa và không chứa từ khóa ádasdas Trả ra tin nhắn thông báo lỗi mặc định Đạt Đạt
Chứa 1 từ khóa Áo tee trắng còn không ad?
White tee, tee trắng, tee white, trắng tee Đạt Đạt
Nhiều từ khóa của nhiều Rule
Tee trắng với Tee Đen cái nào còn nhỉ ad?
Nhiều từ khóa của 1 Rule
Tee trắng - White tee với Tee Đen shop còn loại nào nhỉ
"White tee, tee trắng, tee white, trắng tee"
Chứa từa khóa sai tính tả
Ad cho em xem vài mẫu áo ba nỗ
“Áo ba lỗ, Training wear, áo tập, tank top”
Hình 42 Danh sách các luật đã thiết lập
Hình 43 Kết quả trả về với trường hợp sai chính tả
Thiết kế cơ sở dữ liệu dễ mở rộng
Khi xây dựng một hệ thống việc nâng cấp, mở rộng của một hệ thống đó là điều tất yếu Ứng dụng mà em đã hoàn thành cho phép người dùng tạo ra chatbot với nền tảng Zalo cho nên ứng dụng cũng phải cung cấp rất nhiều loại tin nhắn mà Zalo hỗ trợ Các loại tin nhắn này tương ứng với các hành động con trong nền tảng em xây dựng Chưa kể, sau này khi mở rộng ra các nền tảng như Facebook thì số lượng chuỗi hành động mà nền tảng cần phải lưu trữ ngày càng tăng lên Nếu mỗi một loại tin nhắn đều được lưu thành 1 Collection giống như trong các cơ sở dữ liệu thông thường thì sẽ tốn rất nhiều thời gian và chi phí khi thực hiện JOIN các bảng để lấy ra chuỗi hành động con cần tìm
5.3.2 Giải pháp Để giải quyết vấn đề về lưu trữ tin hành động con sao cho đảm bảo khả năng mở rộng em đã áp dụng hai kỹ thuật mô hình hóa để ánh xạ từ biểu đồ thực thể liên kết sang cơ sở dữ liệu Đó là Denormalization và Aggregation
Hình 44 Kĩ thuật mô hình hóa Denormalization
Denormalization là kỹ thuật có thể thêm dữ liệu giống nhau trong nhiều documents để có thể tối ưu hóa quá trình truy vấn MongoDB không hỗ trợ khóa ngoại nhưng ta có thể lưu một mảng các giá trị ObjectId Như trong Hình 44 ta có thể thấy, một luật có thể chứa một danh sách các chuỗi hành động Với cách lưu một mảng các ObjectId này sẽ phù hợp với những quan hệ một – nhiều cỡ vài trăm dữ liệu [21]
Hình 45 Kĩ thuật mô hình hóa Aggregation
Aggregation là một trong những kỹ thuật mô hình hóa giúp tối thiểu hóa các mối quan hệ một – nhiều bằng các thực thể lồng nhau do đó giảm việc liên kết (join) nhiều dữ liệu liên quan nhau Cụ thể trong ứng dụng, việc lưu các loại hành động con có dữ liệu các trường khác nhau là sự áp dụng của kĩ thuật này trong quá trình mô hình hóa
Hình 45 biểu diễn dữ liệu của 6 loại hành động mà hệ thống đang cung cấp Có thể thấy hành động con dạng văn bản và câu hỏi dữ liệu người dùng không có tệp đính kèm (attachment_msg) nên cả 2 trường này trong cơ sở dữ liệu đều là null Khác với hành động con dạng văn bản, loại hành động con câu hỏi dữ liệu người dùng có thêm 1 thuộc tính là attribute để lưu giá trị dữ liệu mà người dùng cung cấp Với loại hành động con là hình ảnh hoặc thẻ chọn dữ liệu attachment_msg sẽ bao gồm 2 là loại (type) và khối tin (payload) Trong đó payload sẽ chứa thông tin về tệp đính ảnh đính kèm Với loại hành động là đường dẫn đến âm thanh, video thì Element có thêm thuộc tính là url
Hiện tại cơ sở dữ liệu có thể đáp ứng được tất cả các loại hành động con Việc truy xuất các hành động con này có hiệu năng nhanh đáp ứng được những yêu cầu về thời gian phản hồi của Zalo Hơn hết, em có một cơ sở dữ liệu sẵn sàng mở rộng cho nhiều nền tảng, nhiều loại hành động con mà không cần thay đổi cấu trúc các bảng hay sửa đổi thiết kế.
Tích hợp chatbot với Official Account của Zalo một cách tự động
Phiên bản đầu tiên khi mới bắt tay vào xây dựng khi người quản trị viên muốn tạo ra một chatbot để liên kết với Official Account (OA) thì họ sẽ phải nhập đầy đủ các trường như Tên OA, mã Token, mô tả OA Nhưng một vấn đề đặt ra là Tên OA và mô tả cho OA đều đã được người quản trị viên sử dụng khi đăng kí OA với Zalo Việc nhập lại những thông tin trên sẽ làm giảm đi trải nghiệm người dùng Còn về mã Token, đây là mã sinh tự động do Zalo cung cấp để cho phép những ứng dụng có mã này có thể sử dụng các quyền mà
OA cung cấp Nhưng để lấy được mã nãy thì phải trải qua 5 bước và gây khó khăn nếu người quản trị viên không có tìm hiểu trước
Nhận ra điều bất cập từ những vấn đề đó, giải pháp em đưa ra là tận dụng API và trang Zalo oauth để có thể tích hợp một cách hoàn toàn tự động Chỉ thông qua vài click chuột
69 người dùng có thể tạo ngay được một chatbot và liên kết trực tiếp với OA Toàn bộ thông tin của OA đều được server thực hiện lấy về thông qua API
Hình 46 Giao diện Zalo Oauth hỗ trợ tích hợp nhanh Chatbot với OA
Hình 47 biểu diễn lưu đồ hoạt động của quá trình tích hợp chatbot với Zalo OA hoàn toàn tự động Dữ liệu đầu vào app_id và redirect_uri là 2 tham số cấu hình do người phát triển cấu hình Người dùng chỉ thực hiện những thao tác trong bước cấp quyền cho chatbot Sau khi thực hiện cấp quyền trang Zalo Oauth sẽ gửi 1 GET request đến địa chỉ được cài đặt sẵn (redirect_uri) chứa thông tin như oa_id, và mã token Với 2 tham số này Server tiếp tục gọi đến API của Zalo 1 lần nữa để lấy thông tin của OA Sau khi có thông tin của OA trả về server sẽ thực hiện tạo mới hoặc cập nhật chatbot đã có
Với giải pháp đưa ra, thay vì người dùng phải thực hiện những thao tác nhập các trường dữ liệu phức tạp thì giờ đây chỉ với vài click chuột người quản trị viên có thể dễ dàng tạo ra hoặc cập nhật những con chatbot do họ quản lí Điều này làm tăng trải nghiệm người dùng đảm bảo những yêu cầu phi chức năng mà nền tảng đã đề ra
Hình 47 Lưu đồ quá trình tích hợp chatbot và Zalo OA
