Đồ án tốt nghiệp: Tìm hiểu Chatbot Push Notification và xây dựng ứng dụng tích hợp vào Website bán hàngĐồ án tốt nghiệp: Tìm hiểu Chatbot Push Notification và xây dựng ứng dụng tích hợp vào Website bán hàngĐồ án tốt nghiệp: Tìm hiểu Chatbot Push Notification và xây dựng ứng dụng tích hợp vào Website bán hàngĐồ án tốt nghiệp: Tìm hiểu Chatbot Push Notification và xây dựng ứng dụng tích hợp vào Website bán hàngĐồ án tốt nghiệp: Tìm hiểu Chatbot Push Notification và xây dựng ứng dụng tích hợp vào Website bán hàngĐồ án tốt nghiệp: Tìm hiểu Chatbot Push Notification và xây dựng ứng dụng tích hợp vào Website bán hàngĐồ án tốt nghiệp: Tìm hiểu Chatbot Push Notification và xây dựng ứng dụng tích hợp vào Website bán hàngĐồ án tốt nghiệp: Tìm hiểu Chatbot Push Notification và xây dựng ứng dụng tích hợp vào Website bán hàngĐồ án tốt nghiệp: Tìm hiểu Chatbot Push Notification và xây dựng ứng dụng tích hợp vào Website bán hàngĐồ án tốt nghiệp: Tìm hiểu Chatbot Push Notification và xây dựng ứng dụng tích hợp vào Website bán hàngĐồ án tốt nghiệp: Tìm hiểu Chatbot Push Notification và xây dựng ứng dụng tích hợp vào Website bán hàngĐồ án tốt nghiệp: Tìm hiểu Chatbot Push Notification và xây dựng ứng dụng tích hợp vào Website bán hàngĐồ án tốt nghiệp: Tìm hiểu Chatbot Push Notification và xây dựng ứng dụng tích hợp vào Website bán hàngĐồ án tốt nghiệp: Tìm hiểu Chatbot Push Notification và xây dựng ứng dụng tích hợp vào Website bán hàngĐồ án tốt nghiệp: Tìm hiểu Chatbot Push Notification và xây dựng ứng dụng tích hợp vào Website bán hàngĐồ án tốt nghiệp: Tìm hiểu Chatbot Push Notification và xây dựng ứng dụng tích hợp vào Website bán hàngĐồ án tốt nghiệp: Tìm hiểu Chatbot Push Notification và xây dựng ứng dụng tích hợp vào Website bán hàngĐồ án tốt nghiệp: Tìm hiểu Chatbot Push Notification và xây dựng ứng dụng tích hợp vào Website bán hàngĐồ án tốt nghiệp: Tìm hiểu Chatbot Push Notification và xây dựng ứng dụng tích hợp vào Website bán hàngĐồ án tốt nghiệp: Tìm hiểu Chatbot Push Notification và xây dựng ứng dụng tích hợp vào Website bán hàng
TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HỒ CHÍ MINH KHOA CÔNG NGHỆ THÔNG TIN BỘ MÔN CÔNG NGHỆ PHẦN MỀM - - TRẦN VĂN TRÍ – 15110341 PHẠM VĂN TỚI – 15110337 Đề Tài: TÌM HIỂU CHATBOT & PUSH NOTIFICATION VÀ XÂY DỰNG ỨNG DỤNG TÍCH HỢP VÀO WEBSITE BÁN HÀNG KHĨA LUẬN TỐT NGHIỆP KỸ SƯ CNTT GIÁO VIÊN HƯỚNG DẪN THS TRƯƠNG THỊ NGỌC PHƯỢNG KHÓA 2015 - 2019 TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HỒ CHÍ MINH KHOA CƠNG NGHỆ THÔNG TIN BỘ MÔN CÔNG NGHỆ PHẦN MỀM - - TRẦN VĂN TRÍ – 15110341 PHẠM VĂN TỚI – 15110337 Đề Tài: TÌM HIỂU CHATBOT & PUSH NOTIFICATION VÀ XÂY DỰNG ỨNG DỤNG TÍCH HỢP VÀO WEBSITE BÁN HÀNG KHÓA LUẬN TỐT NGHIỆP KỸ SƯ CNTT GIÁO VIÊN HƯỚNG DẪN THS TRƯƠNG THỊ NGỌC PHƯỢNG KHÓA 2015 - 2019 LỜI CẢM ƠN Lời đầu tiên, người thực xin gửi lời cảm ơn chân thành tri ân sâu sắc thầy cô trường Đại học sư phạm kỹ thuật TPHCM, đặc biệt thầy cô khoa công nghệ thông tin trường Và em xin chân thành cám ơn cô Trương Thị Ngọc Phượng nhiệt tình hướng dẫn, giúp đỡ người thực hồn thành tốt mơn học Trong trình học tập, trình làm báo cáo, khó tránh khỏi sai sót, mong thầy, cô bỏ qua Đồng thời trình độ lý luận kinh nghiệm thực tiễn cịn hạn chế nên báo cáo khơng thể tránh khỏi thiếu sót, em mong nhận ý kiến đóng góp thầy, để em học thêm nhiều kinh nghiệm hoàn thành tốt báo cáo tới Người thực xin chân thành cảm ơn quý thầy, cô! ĐH SƯ PHẠM KỸ THUẬT TP.HCM KHOA CNTT ******* XẢ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự – Hạnh phúc ******* ĐỀ CƯƠNG LUẬN VĂN TỐT NGHIỆP Họ tên Sinh viên 1: Trần Văn Trí MSSV 1: 15110341 Họ tên Sinh viên 2: Phạm Văn Tới MSSV 2: 15110337 Thời gian làm luận văn : Từ : 07/03/2019 Đến : 16/07/2019 Chuyên ngành: Công nghệ phần mềm Tên đề tài: Tìm hiểu ChatBot & Push Notification xây dựng ứng dụng tích hợp vào website bán hàng Giáo viên hướng dẫn: ThS.Trương Thị Ngọc Phượng Nhiệm Vụ Của Tiểu Luận: Tìm hiểu lý thuyết ChatBot, Push Notification, Laravel Framework Xác định yêu cầu ChatBot, Push Notification, website bán hàng thời trang Mơ hình hóa yêu cầu, thiết kế sở liệu Thiết kế giao diện Viết code xử lý Kiểm thử, sửa lổi Viết báo cáo Để cương viết luận văn: MỤC LỤC Phần MỞ ĐẦU 1.1 Tính cấp thiết đề tài 1.2 Mục tiêu đề tài 1.3 Đối tượng phạm vi tìm hiểu Phần NỘI DUNG Chương 1: Tổng quan chatbot 1.1 Tổng quan chatbot 1.2 Tìm hiểu botman để tạo chatbot 1.3 Cài đặt Chương 2: Push notification 2.1.Ppush notification gì? 2.2 Tìm hiểu socket io để tạo push notification Chương 3: Laravel Framework 3.1 Giới thiệu php laravel framework 3.2 Các thành phần 3.3 Cài đặt Chương 4: Khảo sát trạng 4.1 Khảo sát chatbot 4.2 Khảo sát trang web bán hàng thời trang online Chương 5: Tiếp nhận yêu cầu 5.1 Yêu cầu chức 5.2 Yêu cầu phi chức 5.3 Phân tích yêu cầu Chương 6: Mơ hình hóa u cầu thiết kế csdl 6.1 Lược đồ usecase diagram 6.2 Mô hình hóa u cầu 6.3 Thiết kế sở liệu 6.4 Lược đồ erd Chương 7: Thiết kế giao diện xử lý 7.1 Giao diện chatbot 7.2 Giao diện trang chủ 7.3 Giao diện trang tất sản phẩm theo danh mục nhóm sản phẩm 7.4 Giao diện trang chi tiết sản phẩm 7.5 Giao diện trang đăng nhập khách hàng 7.6 Giao diện trang đăng nhập google 7.7 Giao diện trang đăng ký người dùng 7.8 Giao diện trang giỏ hàng 7.9 Giao diện modal giỏ hàng 7.10 Giao diện trang quản lý nhóm danh mục 7.11 Giao diên quản lý danh mục 7.12 Giao diện quản lý khuyến 7.13 Giao diện quản lý size sản phảm 7.14 Giao diện quản lý sản phẩm 7.15 Giao diện quản lý tài khoản khách hàng 7.16 Giao diện quản lý hóa đơn Chương 8: Ứng dụng chatbot push notification vào website 8.1 Chatbot 8.2 Push notification Chương 9: Kiểm thử phần mềm test case 9.1 Kiểm thử cho hình Phần KẾT LUẬN Tài liệu tham khảo [1] https://botman.io/2.0/welcome [2] https://dialogflow.com/docs [3] https://github.com/botman/botman [4] https://laravel.com/docs/5.7 [5] https://nodejs.org/en/docs/ [6] https://phppackagedevelopment.com/ [7] https://socket.io/docs/ [8] BotMan – From Zero to Chatbot [9] https://www.tutorialspoint.com/socket.io/ KẾ HOẠCH THỰC HIỆN STT Thời gian 07/03/2019 đến 28/03/2019 Cơng việc Tìm hiểu lý thuyết Laravel Framework, ChatBot, Push notification 29/03/2019 đến 04/04/2019 Xác định yêu cầu bán hàng thời trang: - Yêu cầu chức Ghi - Yêu cầu phi chức 05/04/2019 đến 28/04/2019 Mơ hình hóa u cầu, thiết kế sở liệu: - Lược đồ UseCase - Sơ đồ Sequence - Thiết kế database 29/04/2019đến 20/05/2019 Thiết kế giao diện 22/05/2018 đến 26/06/2019 Viết code xử lý 27/06/2019 đến 30/06/2019 Kiểm thử, sửa lổi 01/07/2019 đến 14/07/2019 Viết báo cáo Ý kiến giáo viên hướng dẫn (Ký & ghi rõ họ tên) Tp Hồ Chí Minh, ngày tháng năm 2019 Người viết đề cương (Ký & ghi rõ họ tên) MỤC LỤC LỜI CẢM ƠN ĐỀ CƯƠNG LUẬN VĂN TỐT NGHIỆP MỤC LỤC 10 DANH SÁCH HÌNH ẢNH DANH SÁCH BẢNG BIỂU PHẦN 1: MỞ ĐẦU 11 TÍNH CẤP THIẾT CỦA ĐỀ TÀI 11 MỤC TIÊU CỦA ĐỀ TÀI 11 ĐỐI TƯỢNG VÀ PHẠM VI TÌM HIỂU 11 PHẦN 2: NỘI DUNG 12 CHƯƠNG 1: TỔNG QUAN VỀ CHATBOT 12 1.1 TỔNG QUAN VỀ CHATBOT 12 1.1.1 Khái niệm chatbot 12 1.1.2 Phân loại chatbot phổ biến 12 1.1.2.1 Simple Chatbot 12 1.1.2.2 Smart ChatBot 12 1.1.3 Cơ chế vận hành 13 1.1.4 Ưu điểm 13 1.2 TÌM HIỂU VỀ BOTMAN ĐỂ TẠO CHATBOT 14 1.2.1 BotMan gì? 14 1.2.2 BotMan web wedget 14 1.2.3 Các khái niệm 15 1.2.3.1 Lắng nghe tin nhắn 15 1.2.3.2 Phản hồi tin nhắn 17 1.2.3.3 Nhắn tin hội thoại 18 1.2.3.4 Lưu trữ thông tin người dùng 21 1.3 CÀI ĐẶT 22 CHƯƠNG 2: PUSH NOTIFICATION 22 2.1 PUSH NOTIFICATION LÀ GÌ? 22 2.2 TÌM HIỂU VỀ SOCKET IO ĐỂ TẠO PUSH NOTIFICATION 22 2.2.1 Socket io 22 2.2.2 Cài đặt server 22 2.2.3 Cài đặt javascript client 22 2.2.4 Sử dụng với máy chủ node http 23 2.2.4.1 Server (app.js) 23 2.2.4.2 Client (index.html) 24 2.2.5 Sử dụng với express 24 2.2.5.1 Server (app.js) 24 2.2.5.2 Client (index.html) 24 CHƯƠNG 3: LARAVEL FRAMEWORK 25 3.1 GIỚI THIỆU VỀ PHP LARAVEL FRAMEWORK 25 3.2 CÁC THÀNH PHẦN CƠ BẢN 26 3.2.1 Laravel controller 26 3.2.2 Laravel model 26 3.2.3 Laravel view 26 3.2.4 Route laravel 29 3.3 CÀI ĐẶT 29 CHƯƠNG 4: KHẢO SÁT HIỆN TRẠNG 30 4.1 KHẢO SÁT CHATBOT 30 4.1.1 Chatbot facebook 30 4.1.2 Chatbot FAZ 32 4.1.3 Chatbot NHAKHOAKIM 32 4.2 KHẢO SÁT CÁC TRANG WEB BÁN HÀNG THỜI TRANG ONLINE 33 4.2.1 Website yame 33 4.2.2 Website tiki 34 4.2.3 Website lazada 34 CHƯƠNG 5: TIẾP NHẬN YÊU CẦU 36 5.1 YÊU CẦU CHỨC NĂNG 36 5.2 YÊU CẦU PHI CHỨC NĂNG 37 5.3 PHÂN TÍCH YÊU CẦU 37 CHƯƠNG 6: MƠ HÌNH HĨA U CẦU VÀ THIẾT KẾ CSDL 39 6.1 LƯỢC ĐỒ USECASE DIAGRAM 39 6.2 MƠ HÌNH HĨA U CẦU 40 6.3 THIẾT KẾ CƠ SỞ DỮ LIỆU 51 6.3.1 dbo.user_chatbot 51 6.3.2 dbo.chatbot 51 6.3.3 dbo.category_group 52 6.3.4 dbo.category_product 52 6.3.5 dbo.promotion 53 6.3.6 dbo.size 54 6.3.7 dbo.product_size 54 6.3.8 dbo.product 55 6.3.9 dbo.shoppingcart 56 6.3.10 dbo.users 57 6.3.11 dbo.bill 58 6.3.12 dbo.bill_detail 59 6.3.13 dbo.slide 60 6.3.14 dbo.admins 61 6.3.15 dbo.password_resets 63 6.4 LƯỢC ĐỒ ERD 63 CHƯƠNG 7: THIẾT KẾ GIAO DIỆN VÀ XỬ LÝ 64 7.1 GIAO DIỆN CHATBOT 64 7.2 GIAO DIỆN TRANG CHỦ 64 7.3 GIAO DIỆN TRANG TẤT CẢ SẢN PHẨM THEO DANH MỤC NHÓM SẢN PHẨM 66 7.4 GIAO DIỆN TRANG CHI TIẾT SẢN PHẨM 67 7.5 GIAO DIỆN TRANG ĐĂNG NHẬP KHÁCH HÀNG 68 7.6 GIAO DIỆN TRANG ĐĂNG NHẬP BẰNG GOOGLE 69 7.7 GIAO DIỆN TRANG ĐĂNG KÝ NGƯỜI DÙNG 70 7.8 GIAO DIỆN TRANG GIỎ HÀNG 70 7.9 GIAO DIỆN MODAL GIỎ HÀNG 71 7.10 GIAO DIỆN TRANG QUẢN LÝ NHÓM DANH MỤC 72 7.11 GIAO DIÊN QUẢN LÝ DANH MỤC 74 7.12 GIAO DIỆN QUẢN LÝ KHUYẾN MÃI 76 7.13 GIAO DIỆN QUẢN LÝ SIZE SẢN PHẢM 78 7.14 GIAO DIỆN QUẢN LÝ SẢN PHẨM 80 7.15 GIAO DIỆN QUẢN LÝ TÀI KHOẢN KHÁCH HÀNG 82 7.16 GIAO DIỆN QUẢN LÝ HÓA ĐƠN 84 CHƯƠNG 8: ỨNG DỤNG CHATBOT VÀ PUSH NOTIFICATION VÀO WEBSITE 86 8.1 CHATBOT 86 8.1.1 Nhóm kịch đơn giản 86 8.1.2 Nhóm kịch sử dụng dialogflow 89 8.2 PUSH NOTIFICATION 91 8.2.1 Gửi mail đặt hàng 91 8.2.2 Thơng báo cho quản trị biết có người đặt hàng 91 8.2.3 Thông báo có khuyển 93 CHƯƠNG 9: KIỂM THỬ PHẦN MỀM TEST CASE 96 9.1 KIỂM THỬ CHO CÁC MÀN HÌNH 96 9.1.1 Test case cho hình Chatbot 96 9.1.2 Test case cho hình đăng nhập 96 9.1.3 Test case cho hình mua sản phẩm 97 9.1.4 Test case cho hình gửi mail xác nhận đặt hàng 97 9.1.5 Test case cho hình thơng báo cho quản trị có người đặt hàng 97 9.1.6 Test case cho hình thơng báo khuyến 98 PHẦN 3: KẾT LUẬN 99 NHỮNG KẾT QUẢ ĐẠT ĐƯỢC 99 NHỮNG KHÓ KHĂN KHI THỰC HIỆN ĐỀ TÀI 99 ƯU ĐIỂM 99 NHƯỢC ĐIỂM 99 HƯỚNG PHÁT TRIỂN 99 TÀI LIỆU THAM KHẢO 101 $this->email = $answer->getText(); $result = DB::table('bill')->where('email',$this->email)->first(); if($result){ $this->say("Chào - $this->email"); $this->askBillID(); } else{ $this->say("Bạn chưa có hóa đơn cả! Mua sắm chút thơi"); $this->askEmail(); } }); } } public function askBillID() { if(Auth::check()){ /** User logged in, get the Email from database */ $this->ask('Cung cấp mã hóa đơn bạn: ', function(Answer $answer) { $billId = $answer->getText(); $resultBill = DB::table('bill')->where('id',$billId)->where('email','=', Auth::user()->email )->first(); if($resultBill){ // có kết bill ID if($resultBill->billStatus == 1){ $this->say("Hóa đơn $billId Chưa giao hàng tốn "); } else{ $this->say("Hóa đơn $billId Đã giao hàng tốn hóa đơn!"); } } else{ // sai Id chưa có bill $this->say("Bạn kiểm tra lại Mã hóa đơn nhé!"); $this->askBillID(); } }); } else{ $this->ask('Cung cấp mã hóa đơn bạn:', function(Answer $answer) { $billId = $answer->getText(); $resultBill = DB::table('bill')->where('id',$billId)->where('email','=',$this>email)->first(); if($resultBill){ // có kết bill ID if($resultBill->billStatus == 1){ $this->say("Hóa đơn $billId Chưa giao hàng tốn "); } 87 else{ $this->say("Hóa đơn $billId Đã giao hàng tốn hóa đơn!"); } } else{ // sai Id chưa có bill $this->say("Bạn kiểm tra lại Mã hóa đơn nhé!"); $this->askBillID(); } }); } } - Tìm kiếm sản phẩm theo tên: public function handleGetCateProductID($bot,$nameProduct){ // lấy tên sản phẩm, tìm DB $results = DB::table('product')->where('name','LIKE',"%".$nameProduct.'%')>get(); // có sản phẩm DB if($results->count() > 0){ $bot->typesAndWaits(2); $bot->reply('Look what i found for you: '); foreach($results as $child){ $image = json_decode($child->otherImg); $attachment = new Image($image[0]); $message = OutgoingMessage::create(''.$child->name.'')>withAttachment($attachment); // Reply message object $bot->reply($message); } } else{ // khơng có sp DB $bot->reply("Sorry we dont have these products!"); } } - Sử dụng câu hỏi người dùng tạo database: $botman->hears('.*', function ($bot) { $incomingMessageText = $bot->getMessage()->getText(); $result = DB::table('chatbot')->where('ask','LIKE',"%" $incomingMessageText "%")>first(); if($result){ $bot->typesAndWaits(1); $anwserResults = json_decode($result->answer); if(count($anwserResults) > 0) { foreach($anwserResults as $child) 88 { $bot->reply("$child"); } } else{ // question without anwser in database - table [botanwser] $bot->reply('Hiện cập nhật ! '); } } }); 8.1.2 Nhóm kịch sử dụng dialogflow - Sử dụng dialogflow cách tạo tài khoản Các bước cấu hình: Bước 1: Điền url trang web vào mục Fulfillment: Hình 84 Tạo tài khoản Dialogflow Bước 2: Tạo intent với: o “Training phrases” cụm từ người dùng nhập vào o “Action and parameters” dùng để Botman lắng nghe kiện o “Responses” câu trả lời trả 89 Hình 85 Tạo Intent dialogflow - Bước 3: Chọn Save Lắng nghe kiệ BotMan: $dialogflow = ApiAi::create(env('DIALOGFLOW_TOKEN'))->listenForAction(); $botman->middleware->received($dialogflow); $botman->hears('ellen(.*)', function (BotMan $bot) { $extras = $bot->getMessage()->getExtras(); $apiReply = $extras['apiReply']; $apiAction = $extras['apiAction']; $apiIntent = $extras['apiIntent']; $bot->reply($apiReply); })->middleware($dialogflow); $botman->hears('input.unknown', function (BotMan $bot) { $extras = $bot->getMessage()->getExtras(); $apiReply = $extras['apiReply']; $apiAction = $extras['apiAction']; $apiIntent = $extras['apiIntent']; $bot->reply($apiReply); })->middleware($dialogflow); 90 8.2 PUSH NOTIFICATION 8.2.1 Gửi mail đặt hàng - Sử dụng send mail Laravel với tài khoản gửi mail lưu file env: public function sendMail(Bill $bill, $billDetailByIdBill){ $data = array( 'bill'=> $bill, 'billDetail' => $billDetailByIdBill, ); Mail::send('user.ordermail', $data, function ($message) use ($data) { $message->to($data['bill']->email); $message->bcc('tomiot8485@gmail.com', 'Quản trị'); $message->subject('HÓA ĐƠN ĐẶT HÀNG'); }); } Hình 86 Mail xác nhận đơn hàng 8.2.2 Thơng báo cho quản trị biết có người đặt hàng - Sử dụng socket IO javascript để thơng báo tức thì: var app = require('express')(); var server = require('http').Server(app); var io = require('socket.io')(server); server.listen(3000); io.on('connection', function (socket) { console.log("Socket connected to server!"); socket.on('btnClick',function(){ /*send only to client whom purchase item*/ socket.emit('clicked-button'); /*send to admin control with message someone purchase items */ 91 socket.broadcast.emit('admin-get-purchase'); }); socket.on('sendNotifiPromotion',function(data){ socket.broadcast.emit('sendNotifiPromotionAdmin' ,data); }); }); socket.on("admin-get-purchase", function () { notifyMe(); }); function notifyMe() { if (!("Notification" in window)) { alert("Trình duyệt khơng hỗ trợ thông báo"); } else if (Notification.permission === "granted") { var options = { body: "Ai vừa đặt hàng Website!", icon: "icon.jpg", dir: "ltr", data: "http://127.0.0.1:8000/admin/bill/list" }; var notification = new Notification("Admin", options); notification.onclick = function(e) { window.location.href = e.target.data; } } else if (Notification.permission !== 'denied') { Notification.requestPermission(function (permission) { if (!('permission' in Notification)) { Notification.permission = permission; } if (permission === "granted") { var options = { body: "Ai vừa đặt hàng Website!", icon: "icon.jpg", dir: "ltr", data: "http://127.0.0.1:8000/admin/bill/list" }; var notification = new Notification("Hey admin", options); notification.onclick = function(e) { window.location.href = e.target.data; } } }); } } 92 8.2.3 Thông báo có khuyển - Sử dụng socket IO javascript để thơng báo tức thì: var app = require('express')(); var server = require('http').Server(app); var io = require('socket.io')(server); server.listen(3000); io.on('connection', function (socket) { console.log("Socket connected to server!"); socket.on('btnClick',function(){ /*send only to client whom purchase item*/ socket.emit('clicked-button'); /*send to admin control with message someone purchase items */ socket.broadcast.emit('admin-get-purchase'); }); socket.on('sendNotifiPromotion',function(data){ socket.broadcast.emit('sendNotifiPromotionAdmin' ,data); }); }); if($('#sendNotifiPromotion').length){ let data = $('#sendNotifiPromotion').data('active'); // console.log(data.name); socket.emit("sendNotifiPromotion", {name: data.name, per_decr: data.per_decr, end_date_sale: data.end_date_sale}); } socket.on("sendNotifiPromotionAdmin", function (data) { $('#push-notifi-promotion').append( ''+ 'Khuyến mãi:'+ ''+ data.name+' - Giảm Đến'+ data.per_decr+'%'+ ''+ ''+ 'Còn'+ ''+ ''+ '' ); 93 if($('.end-time-timer2').length){ $(".end-time-timer2").each(function (index, element) { calTimePromotion(element); }); } setTimeout(function() { if($('.wrap-toast').length){ var count = 0; $(".wrap-toast").each(function(i){ count += 4000; var elm = $(this); setTimeout(function() { elm.toggleClass('active'); }, count); // elm.toggleClass('active'); }) setTimeout(function() { $(".wrap-toast").toggleClass('active'); }, count + 4000); } }, 6000); }) //******************************XU LY TIME DOWN************88 */ if($('.end-time-timer').length){ $(".end-time-timer").each(function (index, element) { calTimePromotion(element); }); } function calTimePromotion(element){ var countDownDate = new Date($(element).data('time')).getTime(); //Update the count down every second var x = setInterval(function() { // Get today's date and time var now = new Date().getTime(); // Find the distance between now and the count down date var distance = countDownDate - now; // Time calculations for days, hours, minutes and seconds var days = Math.floor(distance / (1000 * 60 * 60 * 24)); var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); var seconds = Math.floor((distance % (1000 * 60)) / 1000); // Display the result in the element with id="demo" 94 $(element).html( days + "Ngày " + hours + "h:" + minutes + "m:" + seconds + "s "); // If the count down is finished, write some text if (distance < 0) { clearInterval(x); $(element).html('timeup'); } }, 1000); } Hình 87 Thơng báo có khuyến 95 CHƯƠNG 9: KIỂM THỬ PHẦN MỀM TEST CASE Bảng 51.Test case cho phần mềm 9.1 KIỂM THỬ CHO CÁC MÀN HÌNH 9.1.1 Test case cho hình Chatbot Bảng 52 Test case hình ChatBot ID Test case Test steps Expected Output description Truy cập vào website Result Mở hộp thoại Chat Kiểm tra mở hộp Chon icon thư thoại chatbot Tiến hành chat để giao tiếp với PASS Chatbot Kiểm tra nhập input vào chat bot bot server PASS Nhấn enter Kiểm tra hiển thị nội dung chat Nhập text vào ô input chat Text gửi Thực test case Hiển thị nội dung Trong vùng hiển thị nội dung chat PASS xuất nội dung vừa nhập Kiểm tra chatbot trả Thực test case lời Chờ 1-2s Chatbot trả lời PASS 9.1.2 Test case cho hình đăng nhập Bảng 53 Test case cho hình đăng nhập ID Test case Test steps Expected Output description Kiểm tra mở trang đăng nhập Truy cập vào website Mở trang đăng nhập Chọn nút đăng nhập menu top Result PASS Nhập text vào ô input chat Nếu input chứa ký tự không phù hợp bot Kiểm tra Nhấn enter ô input chưa nhập thông báo lỗi validation Nếu liệu dung đắng gửi server 96 PASS Hệ thống so khớp thơng tin Nếu thơng báo Kiểm tra thông người dùng nhập vớ database đăng nhập thành công chuyển trang chủ PASS tin người dùng Ngược lại thông báo sai thông tin 9.1.3 Test case cho hình mua sản phẩm Bảng 54 Test case cho hình mua sản phẩm ID Test case Test steps Expected Output description Kiểm tra mở Thực đăng nhập Mở trang chi tiết sản Ở trang chủ chọn sản phẩm phẩm Kiểm tra thêm Thực test case Sản phẩm thêm vào sản phẩm vào giỏ Chọn nút thêm vào giỏ hàng giỏ hàng trang chi tiết sản Result PASS phẩm PASS hàng 9.1.4 Test case cho hình gửi mail xác nhận đặt hàng Bảng 55 Test case cho hình gửi mail xác nhận đặt hàng ID Test case Test steps Expected Output description 10 11 Kiểm tra mở Thực đăng nhập trang giỏ hàng Ở trang chủ chọn nút giỏ hàng Kiểm tra gửi mail Thực test case xác nhận Chọn nút thêm vào giỏ hàng Mở trang giỏ hàng Mail xác nhận gửi Result PASS PASS 9.1.5 Test case cho hình thơng báo cho quản trị có người đặt hàng ID Test case Test steps Expected Output description 12 Kiểm tra thông Thực test case 11 báo cho quản trị Quản trị viên khơng nhận thơng báo có người đặt hàng 97 Result FAIL 9.1.6 Test case cho hình thơng báo khuyến Bảng 56 Test case cho hình thơng báo khuyến ID Test case Test steps Expected Output description 13 Kiểm tra Thông Truy cập vào website báo khuyến Chờ trang chủ load 2-3s Nhìn khuyến có 14 Hộp thoại thơng báo PASS vào góc trái hình Kiểm tra thơng báo khuyến quản trị viên Result thêm khuyến Truy cập vào trang quản trị Thông báo đẩy tới Chọn quản lý khuyến trang người dùng hộp thoại thông báo khuyến menu trái Chọn thêm khuyến Tiến hành them khuyến nhấn thêm 98 xuất PASS PHẦN 3: KẾT LUẬN NHỮNG KẾT QUẢ ĐẠT ĐƯỢC - Hiểu cách thức hoạt động trang web hoạt động - Có kiến thức PHP Laravel Framework, BotMan, Sockket IO - Hiểu cách thao tác với sở liệu mà Laravel Framework cung cấp - Hiểu cách hoạt động ChatBot –BotMan, Socket IO Hơn việc nghiên cứu tìm hiểu cơng nghệ củng cố, cải thiện kỹ thu thập nhu cầu người dùng, phân tích chức nghiệp vụ, cách xây dựng ứng dụng từ đầu đến cuối NHỮNG KHÓ KHĂN KHI THỰC HIỆN ĐỀ TÀI - Không thống ý kiến thành viên nhóm - Cần thời gian nhiều để tiếp cận công nghệ - Thiếu kiến thức quản lý source code nên dẫn đến xung đột code đưa code lên gihub ƯU ĐIỂM - Là website nên khơng cần phải cài đặt - Có thể dạy cho ChatBot thơng qua dialogflow - ChatBot sử dụng liệu database để trả lời - Giao diện đơn giản giúp người dùng dễ dàng sử dụng NHƯỢC ĐIỂM Dù nhóm cố gắng tìm hiểu phát triển website cách tốt nhất, giới hạn thời gian khả thân cịn hạn chế, nên khơng tránh khỏi thiếu sót, khuyết điểm: - Giao diện chưa đẹp mắt - ChatBot chưa tự động học từ khóa người dùng - Người dùng cần phải đăng nhập mua hàng - Thời gian gửi mail 3-5s HƯỚNG PHÁT TRIỂN Chatbot bùng nổ, tượng tương lai gần Việc tiếp thị sản phẩm, quảng bá sản phẩm, chăm sóc khách hàng doanh nghiệp dựa chatbot dễ dàng tự nhiên nhiều Bên cạnh đó, người sử dụng chatbot cảm thấy thú vị thích thú vấn đề giải cách 99 nhanh chóng hiệu Tương lai chatbot hịa hợp với dịch vụ liên kết tự động đặt vé xem phim, gọi taxi, đặt hàng online qua mạng, công cụ chat hướng tới chia sẻ người dùng Điều tiền đề để nhà phân tích hành vi người dùng có sở nghiên cứu thói quen, sở thích,… nhằm đưa chiến lược quảng cáo, chăm sóc khách hàng cách xác Liên quan đến vấn đề phục vụ người dùng tốt vấn đề bảo mật thông tin khác hàng, vốn vấn đề nhà sử dụng dịch vụ quan tâm đề cáo Nhóm người thực mong nhận chia sẻ, đóng góp để chất lượng sản phẩm ngày tốn Xin trân trọng cảm ơn Quý Thầy, Cô 100 TÀI LIỆU THAM KHẢO [1] https://botman.io/2.0/welcome [2] https://dialogflow.com/docs [3] https://github.com/botman/botman [4] https://laravel.com/docs/5.7 [5] https://nodejs.org/en/docs/ [6] https://phppackagedevelopment.com/ [7] https://socket.io/docs/ [8] BotMan – From Zero to Chatbot [9] https://www.tutorialspoint.com/socket.io/ 101 ... Tìm hiểu ChatBot & Push Notification xây dựng ứng dụng tích hợp vào website bán hàng Giáo viên hướng dẫn: ThS.Trương Thị Ngọc Phượng Nhiệm Vụ Của Tiểu Luận: Tìm hiểu lý thuyết ChatBot, Push Notification, ... viện hỗ trợ cho chatbot như: Dialog Flow, Wit.ai, Google home, Amazone Lex,… Đề tài ? ?Tìm hiểu chatbot & push notification xây dựng ứng dụng tích hợp vào website bán hàng? ?? xây dựng dựa ngôn ngữ... TRÍ – 15110341 PHẠM VĂN TỚI – 15110337 Đề Tài: TÌM HIỂU CHATBOT & PUSH NOTIFICATION VÀ XÂY DỰNG ỨNG DỤNG TÍCH HỢP VÀO WEBSITE BÁN HÀNG KHĨA LUẬN TỐT NGHIỆP KỸ SƯ CNTT GIÁO VIÊN HƯỚNG DẪN THS TRƯƠNG