Dựa trên các yêu cầu của ứng dụng web chat thời gian thực cho hệ thống hỗ trợ khách hàng trực tuyến, chúng tôi thiết kế wireframe cho giao diện của ứng dụng nhƣ sau:
Phần bên phải là một widget, nó sẽ hiển thị danh sách các phòng hỗ trợ khách hàng, mỗi phòng sẽ có danh sách các nhân viên hỗ trợ khách hàng phụ trách từng mảng hàng hóa.
Khi khách hàng bấm vào nút gọi một nhân viên hỗ trợ khách hàng nhất định, nó sẽ hiển thị một dialog trong đó hiển thị camera của khách hàng, camera của nhân viên hỗ trợ khách hàng, cho phép khách hàng và nhân viên hỗ trợ gửi tin nhắn dạng văn bản và gửi file bằng cách kéo file vào trong phần gửi tin nhắn.
Khách hàng kết thúc cuộc gọi bằng cách bấm vào nút đóng (x), nó sẽ đóng dialog lại.
47
Hình 16: Thiết kế wireframe cho ứng dụng web chat.
3.3Thực hiện ứng dụng
Để thực hiện ứng dụng web chat thời gian thực sử dụng WebRTC, chúng tôi quyết định chọn sử dụng EasyRTC framework, đây là một framework đƣợc xây dựng trên WebRTC và nó có các API để giúp các nhà phát triển sử dụng WebRTC đƣợc dễ dàng hơn.
Ngoài ra, để làm giao diện cho ứng dụng, chúng tôi lựa chọn sử dụng Bootstrap framework, đây là một framework về HTML, CSS và JavaScript cho phát triển các ứng dụng trên nền web. Để biết thêm thông tin về Bootstrap framework, bạn có thể tham khảo tại địa chỉ http://getbootstrap.com/.
Để cho việc tích hợp ứng dụng web chat này vào các website thƣơng mại điện tử có sẵn đƣợc dễ dàng, chúng tôi thiết kế ứng dụng web chat dƣới dạng plugin:
Tất cả các code logic của ứng dụng đƣợc viết trong một file JavaScript chính tên là webrtc.js.
Khi muốn tích hợp ứng dụng vào một trang web bất kỳ, chúng ta chỉ việc thêm thẻ <script> trỏ đến file JavaScript webrtc.js, khai báo một
48
containertrong thẻ <body> để chứa widget, và gọi hàm tạo widget để tạo ra widget nhƣ ở trong wireframe bên trên.
Tất cả các thông tin về các phòng và các nhân viên hỗ trợ sẽ đƣợc khai báo và truyền cho hàm tạo widget.
Thiết kế bảo mật cho ứng dụng đƣợc thực hiện nhƣ sau:
Nhân viên hỗ trợ khách hàng cần phải đăng nhập vào backend của website thƣơng mại điện tử trƣớc khi có thể truy cập vào trang hỗ trợ khách hàng để đăng nhập với tên quy định trƣớc, và chờ đợi các cuộc gọi từ phía khách hàng.
Bất cứ truy cập trực tiếp nào đến địa chỉ của trang hỗ trợ khách hàng cho nhân viên hỗ trợ khách hàng đều phải chuyển sang trang đăng nhập của hệ thống trƣớc khi có thể đƣợc sử dụng. Điều này đƣợc đảm bảo bằng cách thiết lập trong file config của máy chủ web.
Khách hàng cần đăng ký một tài khoản với website trƣớc khi có thể đăng nhập vào phần hỗ trợ khách hàng. Hoặc khách hàng có thể lựa chọn đăng nhập bằng tài khoản Facebook, Google hoặc Twitter.
Trái tim của ứng dụng là file webrtc.js, đây là một file JavaScript. Trong file này, chúng tôi định nghĩa hai đối tƣợng chính của ứng dụng: WebRTC.LiveChat vàWebRTC.Widget.
WebRTC.Widget
Đối tƣợng WebRTC.Widgetđƣợc xây dựng để tạo ra widget chính hỗ trợ khách hàng, bao gồm các phòng hỗ trợ khách hàng và danh sách nhân viên hỗ trợ của từng phòng.
Để tạo ra một đối tƣợng WebRTC.Widget chúng ta gọi hàm WebRTC.Widget.create( ) nhƣ sau:
var customerSupport = [
{groupName: 'Tƣ vấn bán hàng',
group: [{roomID: 'tuvanlaptop', adminUserName: 'Kinh doanh laptop'}, {roomID: 'tuvandienthoai', adminUserName: 'Kinh doanh điện thoại'}, {roomID: 'tuvanmayanh', adminUserName: 'Kinh doanh máy ảnh'}]},
49 {groupName: 'Tƣ vấn bảo hành',
group: [{roomID: 'baohanhlaptop', adminUserName: 'Bảo hành laptop'}, {roomID: 'baohanhdienthoai', adminUserName: 'Bảo hành điện thoại'}, {roomID: 'baohanhmayanh', adminUserName: 'Bảo hành máy ảnh'}]}, {groupName: 'Tƣ vấn trả góp',
group: [{roomID: 'tragop1', adminUserName: 'Tƣ vấn trả góp 1'}, {roomID: 'tragop2', adminUserName: 'Tƣ vấn trả góp 2'}]} ];
WebRTC.Widget.create('customerSupportWidget', true, customerSupport);
Hàm WebRTC.Widget.create() đƣợc định nghĩa nhƣ dƣới đây, trong đó “containerId” là ID của một <div> trên trang web mà chúng ta muốn nhúng ứng dụng web chat của chúng ta vào. “widgetParams” là một mảng đối tƣợng các phòng hỗ trợ khách hàng, trong mỗi phòng là một mảng các nhân viên hỗ trợ, còn isAdmin bằng true nếu nhúng widget vào bên trong hệ thống quản trị của website để nhân viên hỗ trợ khách hàng sử dụng, isAdmin bằng false nếu nhung widget vào trang sản phẩm cho khách hàng sử dụng. (adsbygoogle = window.adsbygoogle || []).push({});
WebRTC.Widget.create = function(containerId, isAdmin, widgetParams) { window.WebRTC.Widget = new WebRTC.Widget(containerId,isAdmin, widgetParams);
};
Dƣới đây là hàm khởi tạo cho đối tƣợng WebRTC.Widget, nó sẽ gọi đến hàm init() để bắt đầu xây dựng giao diện cho widget:
WebRTC.Widget = function(containerId, isAdmin, widgetParams) { this.widgetContainer = containerId;
this.isAdmin = isAdmin; this.params = widgetParams; this.init();
50
WebRTC.LiveChat
Đối tƣợng WebRTC.LiveChat đƣợc xây dựng để quản lý từng cuộc gọi riêng lẻ. Đối tƣợng này khi đƣợc khởi tạo sẽ tạo ra một dialog cho cuộc gọi, trong đó cho phép khách hàng nhập tên đăng nhập và gọi tới nhân viên hỗ trợ khách hàng. Sau kết nối thành công với nhân viên hỗ trợ khách hàng, nó sẽ hiển thị thông tin của cuộc gọi: video của hai ngƣời đang thực hiện cuộc gọi, cho phép gửi tin nhắn dạng văn bản và gửi file. Để kết thúc cuộc gọi, khách hàng bấm vào nút “Kết thúc”.
Để tạo ra một đối tƣợng WebRTC.LiveChat, chúng ta gọi hàm WebRTC.LiveChat.create() nhƣ sau: WebRTC.LiveChat.create('webrtc-chat', { roomID: 'phongkinhdoanh', adminUserName: 'nhanvienkinhdoanh', admin: true } );
Hàm WebRTC.LiveChat.create() đƣợc định nghĩa nhƣ sau:
WebRTC.LiveChat.create = function(liveChatId, liveChatParams) {
window.WebRTC.LiveChat = new WebRTC.LiveChat(liveChatId, liveChatParams);
};
Đây là hàm khởi tạo cho đối tƣợng WebRTC.LiveChat:
WebRTC.LiveChat = function(liveChatId, liveChatParams) { this.liveChatContainer = liveChatId; this.params = liveChatParams; this.adminOnline = false; this.init(); }; 3.4Chạy thử và đánh giá ứng dụng
Trong phần này chúng tối tiến hành chạy thử ứng dụng web chat và đánh giá tính hiệu quả của ứng dụng đƣợc xây dựng.
51