(Đồ á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

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT THÀNH PHỐ HỒ CHÍ MINH ĐỒ ÁN TỐT NGHIỆP NGÀNH CƠNG NGHỆ PHẦN MỀM 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 GVHD: TRƯƠNG THỊ NGỌC PHƯỢNG SVTH: TRẦN VĂN TRÍ MSSV: 15110341 SVTH: PHẠM VĂN TỚI MSSV: 15110337 SKL005871 Tp Hồ Chí Minh, tháng /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 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 ******* PHIẾU NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN 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 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 NHẬN XÉT 1.Về nội dung đề tài khối lượng thực hiện: 2.Ưu điểm: 3.Khuyết điểm 4.Đề nghị cho bảo vệ hay không ? 5.Đánh giá loại : 6.Điểm : Tp Hồ Chí Minh, ngày tháng năm 2019 Giáo viên hướng dẫn (Ký & ghi rõ họ tên) ******* PHIẾU NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN 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 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 phản biện: NHẬN XÉT 1.Về nội dung đề tài khối lượng thực hiện: 2.Ưu điểm: 3.Khuyết điểm 4.Đề nghị cho bảo vệ hay không ? 5.Đánh giá loại : 6.Điểm : Tp Hồ Chí Minh, ngày tháng năm 2019 Giáo viên phản biện (Ký & ghi rõ họ tên) 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ô! ******* ĐỀ 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 Chun 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 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 29/03/2019 đến 04/04/2019Xác định yêu cầu bán hàng thời trang: - Yêu cầu chức 05/04/2019 đến 28/04/2019 29/04/2019đến 20/05/2019 22/05/2018 đến 26/06/2019 27/06/2019 đến 30/06/2019 01/07/2019 đến 14/07/2019 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 description Kiểm tra mở hộp thoại chatbot Kiểm tra nhập input vào chat bot Kiểm tra hiển thị nội dung chat Kiểm tra chatbot trả lời 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 descripti Kiểm tra trang đăng nhập Kiểm validation Kiểm tra thông tin người dùng 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 cas descripti Kiểm tra trang chi tiết sản phẩm Kiểm tra sản phẩm vào giỏ 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 description 10 Kiểm tra mở trang giỏ hàng 11 Kiểm tra gửi mail xác nhận 9.1.5 Test case cho hình thơng báo cho quản trị có người đặt hàng ID Test cas descripti 12 Kiểm tra t báo cho có ngườ hàng 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 description 13 Kiểm báo 14 Kiểm báo quản trị viên khuyến 98 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