Hướng dẫn tạo chatbot đơn giản, dùng Node.js và Wit.ia

Lượt xem: 15320

Xin chào! Tôi là Agitech Luân, hôm nay tôi sẽ hướng dẫn các bạn tạo chatbot đơn giản cho Fanpage Facebook của mình. Ngôn ngữ lập trình Node.js và sử dụng Wit.ia để hỗ trợ phân tích ngôn ngữ tự nhiên. Bắt đầu thôi!

MỘT SỐ YÊU CẦU BAN ĐẦU

1. Bạn phải có Facebook cá nhân và Fanpage, tất nhiên là fanpage mà bạn muốn tạo chatbot.

2. Bạn phải có tài khoản Glitch (glitch.com). Chúng ta sẽ code trên Glitch, đơn giản là vì mỗi 1 project của chúng ta được Glitch phân 1 tên miền server riêng.

CÁCH THỨC THỰC HIỆN

1. Truy cập vào https://glitch.com/edit/#!/agitech-chatbot và làm theo hướng dẫn

anh 3

Sau bước này chúng ta đã có được Source code.

Tại file .env chúng ta đang thiếu 4 token, tôi sẽ hướng dẫn bạn thiếp lập và lấy các token nhé.

anh 4

FB_PAGE_TOKEN

1. Truy cập vào https://developer.facebook.com/  => Ứng dụng của tôi => Tạo project

2. Tại menu làm theo hướng đẫn

anh 1

3. Thiếp lập Messenger

anh 2

FB_VERIFY_TOKEN, mình sẽ đặt là 123456, bạn có thể tự đặt lại token này

4. Thiết lập Webhook

anh 5

Đây là cách lấy URL gọi lại. Lưu ý: Phía sau URL gọi lại các bạn cần thêm "/webhook".

anh 6

FB_APP_SECRET

anh 7

Đến đây chúng ta còn thiếu mỗi WIT_TOKEN, các bạn tiếp tục

5. Truy cập vào https://wit.ai/ => Tạo App, có thể chọn thiếp lập là Tiếng Việt. Các bạn lấy token như hình nhé

anh 9

 

Đến đây coi như là sắp hoàn thành, bạn tự điền các TOKEN nhé. Đến phần "Dạy học" nào!!!

Lưu ý: Các bạn điền hết tất cả 4 token rồi mới thiết lập Webhooks nhé!

6. Dạy cho Wit những câu đơn giản

Bất đầu bằng 1 câu mang ý nghĩa đơn giản nhé, như câu "Xin chào ạ".

anh 8

Intent là biến ý nghĩa, ý muốn của câu. Khi người dùng chat "Xin chào" wit sẽ hiểu là "chào hỏi" (chao_hoi).

Đến với câu tiếp theo, chúng ta sẽ dạy bot câu có chứa thực thể. Ví dụ như "Xin chào chatbot" và "Xin chào admin", ở đây 2 câu điều mang ý nghĩa chào hỏi (chao_hoi) nhưng lại chứa thực thể "chatbot" và "admin". Chúng ta sẽ dạy wit như sau.

anh 10

Đối với câu "Xin chào admin", các bạn làm tương tự nhé!

Và chúng ta tận hưởng thành quả. Chúc các bạn thành công!!!

anh 11

 

 

Thêm mới

Lập trình PHP kết hợp JS cho xem file PDF dưới dạng hình ảnh mà không bị lộ đường dẫn file PDF

Lượt xem: 7984

php and js

Hôm nay, mình sẽ giới thiệu với các bạn một cách kết hợp PHP và JS để viết một trang Web xem nội dung file PDF dưới dạng hình ảnh, mà người truy cập không thể tải file PDF về máy tính. Cách này mình lấy ý tưởng từ PDF JS và mình đã kết hợp PHP vào để thực hiện trong một dự án gần đây.

Trước tiên bạn cần đưa thư viện PDF JS vào thẻ <head> của trang và đoạn CSS định dạng thêm đường viền cho hình nội dung cho dễ nhìn.

<script src="//mozilla.github.io/pdf.js/build/pdf.js"></script>
<style type="text/css">
	#the-canvas {
		border: 1px solid black;
		direction: ltr;
	}
</style>

Tiếp theo bạn xây dựng một bố cục phân trang và đánh số trang xem. Trong đoạn code sau tôi có dùng Class trong thư viện Bootstrap.

<div style="padding: 5px 10px 10px 10px;">
	<button class="btn btn-primary btn-rounded" id="prev">Trang trước</button>
	<button class="btn btn-primary btn-rounded" id="next">Trang sau</button>
	&nbsp; &nbsp;
	<span>Trang: <input id="page_num" value="" onchange="onOfPage(this);" style="width: 40px; text-align: right;"/> / <span id="page_count"></span></span>
</div>
<canvas id="the-canvas"></canvas>

Sau cùng bạn thêm đoạn code sau, đoạn code dùng PHP đọc nội dung file đưa vào JS để hiển thị vào thẻ <canvas> và phân trang.

<?php
	//Khai báo biến lấy nội dung file và encode base64
	$getPDF = base64_encode(file_get_contents('example.pdf'));
?>
<script type="text/javascript">
	var pdfData = atob('<?php echo $getPDF; ?>');
	
	var pdfjsLib = window['pdfjs-dist/build/pdf'];
	
	pdfjsLib.GlobalWorkerOptions.workerSrc = "//mozilla.github.io/pdf.js/build/pdf.worker.js";

	var pdfDoc = null,
		pageNum = 1,
		pageRendering = false,
		pageNumPending = null,
		scale = 1.2,
		canvas = document.getElementById('the-canvas'),
		ctx = canvas.getContext('2d');
	canvas.oncontextmenu = function() {return false};
	var loadingTask = pdfjsLib.getDocument({data: pdfData});
	loadingTask.promise.then(function(pdf) {
		pdfDoc = pdf;
		document.getElementById('page_count').textContent = pdf.numPages;
		renderPage(pageNum);
	}, function (reason) {
		console.error(reason);
	});
	
	function renderPage(num) {
		pageRendering = true;
		pdfDoc.getPage(num).then(function(page) {
			var viewport = page.getViewport({scale: scale});
			canvas.height = viewport.height;
			canvas.width = viewport.width;
			var renderContext = {
				canvasContext: ctx,
				viewport: viewport
			};
			var renderTask = page.render(renderContext);
			renderTask.promise.then(function() {
				pageRendering = false;
				if (pageNumPending !== null) {
					renderPage(pageNumPending);
					pageNumPending = null;
				}
			});
		});
		document.getElementById('page_num').value = num;
	}
	
	function queueRenderPage(num) {
		if (pageRendering)
			pageNumPending = num;
		else
			renderPage(num);
	}
	
	function onPrevPage() {
		if(pageNum <= 1)
			return;
		pageNum--;
		queueRenderPage(pageNum);
	}
	document.getElementById('prev').addEventListener('click', onPrevPage);

	function onNextPage() {
		if (pageNum >= pdfDoc.numPages)
			return;
		pageNum++;
		queueRenderPage(pageNum);
	}
	document.getElementById('next').addEventListener('click', onNextPage);

	function onOfPage(e) {
		var num = parseInt(e.value);
		if(Number.isInteger(num) == false)
			return;
		if(num > pdfDoc.numPages || num < 1)
			return;
		pageNum = num;
		queueRenderPage(pageNum);
	}
</script>

Tới đây trang của bạn có thể hiển thị nội dung của file PDF dưới dạng hình ảnh rồi.

Ngoài ra, bạn cũng có thể thêm đoạn code oncontextmenu="return false;" vào thẻ <body> để chặn người xem tải nội dung file hình về máy tính.

Bạn nào cảm thấy bài viết này hay thì hãy chia sẻ cho những bạn khác cần đến nhé. Chúc các bạn thành công!

Ngụy Kim Hưng

Thêm mới

Các bài khác...

Chuyên mục phụ

Chuyên mục phụ