Trong phần này chúng tôi sẽ tiến hành thiết kế ứng dụng với các yêu cầu ở trên.
3.2.1 Biểu đồ trường hợp sử dụng
Dƣới đây là biểu đồ các trƣờng hợp sử dụng của ứng dụng web chat thời gian thực phục vụ cho hệ thống hỗ trợ khách hàng trực tuyến của các website thƣơng mại điện tử.
Khách hàng Nhân viên hỗ trợ khách hàng Đăng nhập Kết nối Hỗ trợ khách hàng Ngắt kết nối Đàm thoại/video Gửi file Gửi tin nhắn Hỗ trợ khách hàng Hình 13: Biểu đồ trường hợp sử dụng.
Dƣới đây là bảng mô tả chi tiết cho từng trƣờng hợp sử dụng trong Hình 13.
Trường hợp sử
dụng: Đăng nhập.
Các tác nhân: Khách hàng, nhân viên hỗ trợ khách hàng.
Mục đích:
Khách hàng đăng nhập để đƣợc hỗ trợ. Nhân viên hỗ trợ khách hàng đăng nhập vào hệ thống để sẵn sàng hỗ trợ khách hàng.
Mô tả:
Nhân viên hỗ trợ khách hàng đăng nhập vào phần quản lý (backend) của website bán hàng trực tuyến bằng tên đăng nhập và mật khẩu đƣợc cung cấp. Sau khi đăng nhập, họ mở liên kết đến trang web hỗ trợ khách hàng, rồi chọn phòng mà họ cần hỗ trợ, hệ thống sẽ tự động đăng nhập
nhân viên này với tên đăng nhập đƣợc quy định trƣớc (khi khởi tạo hệ thống hỗ trợ khách hàng). Lúc này nhân viên đã ở trạng thái online, và sẵn sàng nhận các cuộc gọi từ phía khách hàng.
Đối với khách hàng, sau khi xem các sản phẩm trên website, họ chuyển đến phần hỗ trợ khách hàng trực tuyến để hỏi thêm chi tiết thông tin về sản phẩm. Ở đây, họ sẽ thấy một danh sách các phòng hỗ trợ khách hàng và danh sách các nhân viên hỗ trợ khách hàng tƣơng ứng của từng phòng. Nếu khách hàng chọn một nhân viên, hệ thống sẽ mở lên một hộp thoại yêu cầu khách hàng nhập tên để đăng nhập vào hệ thống. Tên đăng nhập của khách hàng có thể là một tên bất kỳ, chỉ để nhân viên hỗ trợ tiện xƣng hô và để phân biệt các khách hàng khác nhau.
Trường hợp sử
dụng: Kết nối.
Các tác nhân: Khách hàng, nhân viên hỗ trợ khách hàng.
Mục đích: Khách hàng kết nối với nhân viên hỗ trợ khách hàng.
Mô tả:
Sau khi khách hàng đã đăng nhập vào hệ thống, nếu nhân viên hỗ trợ đang online, khách hàng có thể bấm vào nút Kết nối để yêu cầu kết nối với nhân viên hỗ trợ. Khách hàng sẽ nhận đƣợc yêu cầu cho phép sử dụng microphone và máy ảnh từ trình duyệt. Nếu khách hàng đồng ý, yêu cầu kết nối sẽ đƣợc gửi tới nhân viên hỗ trợ.
Bên phía nhân viên hỗ trợ sẽ thấy một hộp thoại yêu cầu kết nối từ khách hàng, nhân viên lựa chọn đồng ý để kết nối. Khi đó, trình duyệt sẽ hiện lên yêu cầu sử dụng microphone và máy ảnh, nhân viên hỗ trợ đồng ý để hoàn thành quá trình kết nối.
Trường hợp sử
dụng: Hỗ trợ khách hàng.
Các tác nhân: Khách hàng, nhân viên hỗ trợ khách hàng.
Mục đích: Khách hàng có thể trao đổi với nhân viên hỗ trợ khách hàng
các vấn đề mình quan tâm.
Mô tả:
Sau khi khách hàng kết nối thành công với nhân viên hỗ trợ, trên trình duyệt của hai ngƣời (ở bên trong website thƣơng mại điện tử) sẽ hiện lên một màn hình trong đó hiển thị hình ảnh của cả hai ngƣời, các tin nhắn hai ngƣời đã gửi cho nhau. Khách hàng và nhân viên hỗ trợ khách hàng có thể trao đổi thông tin với nhau qua màn hình này.
Trường hợp sử
dụng: Đàm thoại/video.
Các tác nhân: Khách hàng, nhân viên hỗ trợ khách hàng.
Mục đích: Trao đổi thông tin qua đàm thoại và chia sẻ webcam.
Mô tả:
Sau khi kết nối thành công với nhân viên hỗ trợ, khách hàng và nhân viên hỗ trợ khách hàng có thể trao đổi thông tin với nhau bằng cách nói chuyện và chia sẻ hình ảnh qua webcam.
Trường hợp sử
dụng: Gửi tin nhắn.
Các tác nhân: Khách hàng, nhân viên hỗ trợ khách hàng. Mục đích: Trao đổi thông tin qua tin nhắn văn bản.
Mô tả:
Sau khi kết nối thành công với nhân viên hỗ trợ, khách hàng và nhân viên hỗ trợ khách hàng có thể trao đổi thông tin với nhau bằng cách gửi các tin nhắn dạng văn bản. Trên màn hình hỗ trợ khách hàng cho phép gõ tin nhắn cần gửi và hiển thị các tin nhắn đã gửi và nhận.
Trường hợp sử
dụng: Gửi file.
Các tác nhân: Khách hàng, nhân viên hỗ trợ khách hàng.
Mục đích: Chia sẻ file giữa khách hàng và nhân viên hỗ trợ khách hàng.
Mô tả:
Sau khi kết nối thành công với nhân viên hỗ trợ, khách hàng và nhân viên hỗ trợ khách hàng có thể chia sẻ các file cho nhau bằng cách kéo file cần gửi vào hộp nhập tin nhắn hoặc gửi file. Ngƣời đƣợc gửi sẽ nhận đƣợc một hộp thoại thông báo ngƣời bên kia đang gửi file, nếu đồng ý nhận file, màn hình hỗ trợ khách hàng sẽ hiển thị trạng thái của file đang đƣợc gửi (đã nhận/gửi đƣợc bao nhiêu trên độ lớn của file tính bằng byte). File nhận đƣợc sẽ đƣợc trình duyệt lƣu lại vào thƣ mục trên máy tính của ngƣời nhận.
Trường hợp sử
dụng: Ngắt kết nối.
Các tác nhân: Khách hàng, nhân viên hỗ trợ khách hàng.
Mục đích: Ngắt kết nối giữa khách hàng và nhân viên hỗ trợ.
Mô tả:
Sau khi khách hàng đã đƣợc hỗ trợ đầy đủ, để kết thúc phiên hỗ trợ khách hàng, khách hàng hoặc nhân viên hỗ trợ khách hàng có thể ngắt kết nối bằng cách bấm vào nút Kết thúc trên màn hình hỗ trợ khách hàng.
Bảng 1: Bảng mô tả các trường hợp sử dụng.
3.2.2 Biểu đồ tuần tự
Hình 14 dƣới đây diễn tả các bƣớc trong quá trình hỗ trợ khách hàng:
1. Khách hàng đăng nhập vào ứng dụng bằng cách nhập tên và chọn đăng nhập. 2. Khách hàng đăng nhập thành công, hệ thống sẽ hiển thị trạng thái đã đăng
nhập và chờ đợi nhân viên hỗ trợ khách hàng online để có thể kết nối. 3. Nhân viên hỗ trợ khách hàng đăng nhập vào hệ thống.
4. Hệ thống hiển trạng thái đã đăng nhập và sẵn sàng chờ đợi kết nối từ phía khách hàng.
5. Nhân viên hỗ trợ khách hàng online và sẵn sàng chờ đợi kết nối từ phía khách hàng. Bên phía khách hàng sẽ thấy trạng thái online của nhân viên hỗ trợ và cho phép kết nối.
6. Khách hàng gửi yêu cầu kết nối tới nhân viên hỗ trợ khách hàng bằng cách bấm vào nút kết nối.
7. Nhân viên hỗ trợ khách hàng thấy một hộp thoại yêu cầu kết nối từ phía khách hàng, và đồng ý kết nối.
8. Video và audio stream đƣợc gửi từ trình duyệt của khách hàng tới trình duyệt của nhân viên hỗ trợ.
9. Ứng dụng gán video và audio stream vào màn hình hỗ trợ khách hàng phía nhân viên hỗ trợ khách hàng.
10.Video và audio stream đƣợc gửi từ trình duyệt của nhân viên hỗ trợ tới trình duyệt của khách hàng.
11.Ứng dụng gán video và audio stream vào màn hình hỗ trợ khách hàng bên phía khách hàng.
12.Khách hàng gửi tin nhắn văn bản cho nhân viên hỗ trợ. 13.Nhân viên hỗ trợ nhận đƣợc tin nhắn từ khách hàng. 14.Nhân viên hỗ trợgửi tin nhắn văn bản cho khách hàng. 15.Khách hàng nhận tin nhắn văn bản từ nhân viên hỗ trợ. 16.Khách hàng gửi file cho nhân viên hỗ trợ.
17.Nhân viên hỗ trợ nhận đƣợc file từ khách hàng. 18.Nhân viên hỗ trợgửi file cho khách hàng. 19.Khách hàng nhận file từ nhân viên hỗ trợ. 20.Khách hàng ngắt kết nối với nhân viên hỗ trợ.
Khách hàng Máy chủ 1: Đăng nhập Nhân viên 2: Đăng nhập thành công 3: Đăng nhập 4: Đăng nhập thành công
6: Yêu cầu kết nối
7: Đồng ý kết nối
5: Nhân viên đang online
11: Gán video/audio stream
9: Gán video/audio stream 8: Gửi video/audio stream
10: Gửi video/audio stream
12: Gửi tin nhắn văn bản
14: Gửi tin nhắn văn bản
16: Gửi file 18: Gửi file 20: Ngắt kết nối 21: Ngắt kết nối 13: Nhận tin nhắn văn bản 15: Nhận tin nhắn văn bản 17: Nhận file 19: Nhận file Hình 14: Biểu đồ tuần tự. 3.2.3 Biểu đồ lớp
Dƣới đây là biểu đồ thiết kế lớp của ứng dụng web chat, trong đó lớp Widget là lớp đƣợc sử dụng trực tiếp để tạo ra widget trên trang web bằng cách gọi hàm create( ) của nó.
LiveChat là lớp tạo ra màn hình chính cho hỗ trợ khách hàng để có thể thực hiện đàm thoại, chia sẻ máy ảnh và gửi tin nhắn, gửi file giữa khách hàng và nhân viên hỗ trợ khách hàng.
Lớp Easyrtc đƣợc thực hiện trong EasyRTC framework và nó thực hiện mọi chức năng của WebRTC. Trong ứng dụng web chat, chúng tôi viết thêm một số hàm
callback cho lớp Easyrtc để bắt các sự kiện khi nhận đƣợc/hủy cuộc gọi, khi nhận đƣợc/kết thúc audio/video stream từ phía bên kia kết nối.
LiveChat liveChatContainer init() Widget params init() buildGroup() widgetContainer buildWidget() roomEntryListener() addToConversation() setCredential() occupantListener() blobAcceptor() acceptRejectCB() receiveStatusCB() leaveRoom() peerListener() connect() removeIfPresent() performCall() setUpMirror() getGroupId() loginSuccess() sendMessage() loginFailure() disconnect() lastFileName params adminOnline loadHtml() Easyrtc setStreamAcceptor() setCallCancelled() setOnStreamClosed() setAcceptChecker() create() create() Hình 15: Biểu đồ lớp.
3.2.4 Thiết kế giao diện
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.
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
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'}]},
{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.
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();
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.
3.4.1 Chạy thử ứng dụng
Sau khi nhân viên hỗ trợ khách hàng đăng nhập vào hệ thống quản lý của website đã đƣợc tích hợp ứng dụng web chat thời gian thực, họ có thể mở liên kết hỗ trợ khách hàng để đăng nhập và chờ đợi các cuộc gọi đến từ khách hàng:
Hình 18: Nhân viên hỗ trợ khách hàng đăng nhập vào phòng hỗ trợ mà họ chịu trách nhiệm.
Hình 20: Khách hàng lựa chọn Gọi nhân viên hỗ trợ "Kinh doanh điện thoại".
Hình 22: Trình duyệt yêu cầu quyền truy cập tới máy ảnh và microphone.
Hình 24: Nhân viên hỗ trợ và khách hàng nói chuyện, chia sẻ webcam và gửi tin nhắn với nhau.
Hình 26: Nhận file và lưu lại trên máy tính.