Pendahuluan
Ingin membuat LINE Chatbot tetapi kesulitan untuk memilih bahasa pemrograman, framework atau library yang digunakan? Ternyata bisa loh menggunakan Bottender JS.
Framework ini sangat memudahkan bagi programmer pemula yang ingin membuat LINE Chabot dengan Javascript. Selain LINE Chatbot, kita juga bisa membuat chatbot untuk aplikasi chatting lainnya seperti Telegram, Whatsapp, Viber, bahkan Slack.
Anda bisa langsung menuju dokumentasi resmi dari Bottender JS untuk melihat lebih detailnya. Dalam artikel ini, saya secara khusus hanya membahas bagaimana cara membuat LINE Chatbot sederhana menggunakan Bottender JS ini.
Apa saja yang akan dibahas dalam tulisan ini?
- Cara konfigurasi LINE Developer account
- Cara menggunakan Bottender JS untuk membuat LINE Chatbot
- Studi Kasus : Membuat Chatbot Pesanan Makanan/Minuman
- Cara deploy Chatbot menggunakan Github & Heroku
Sebelum lebih jauh...
Pastikan anda memiliki pengetahuan dasar Javascript dan penggunaan git command, karena saya hanya akan menjelaskan cara praktisnya saja. Selain itu, diharapkan anda juga membaca dokumentasi resmi dari Bottender JS untuk mendapatkan penjelasan yang lebih detail.
Untuk mendukung pembuatan mini project ini, anda memerlukan:
- Node JS
- Text Editor (dalam hal ini saya menggunakan VS Code)
- Aplikasi dan akun LINE
- Akun Github dan Heroku
- Git Bash
Cara Konfigurasi LINE Developer Account
LINE memiliki fitur dan fasilitas khusus bagi developer yang ingin menggunakan fitur-fitur LINE dalam aplikasinya. Anda bisa mengaksesnya di sini
Klik tombol login yang ada di pojok kanan atas, dan loginlah menggunakan akun LINE anda.
Setelah login, web akan menampilkan dashboard dari akun LINE Developer anda. Silahkan buat provider terlebih dahulu dengan klik tombol Create yang ada di halaman dashboard tersebut.
Lalu, isilah dengan nama anda.
Berikut adalah tampilan ketika anda berhasil membuat provider di LINE Developer Account anda.
Karena kita akan membuat chatbot, maka kliklah Create a Messanging API Channel untuk membuat Channel Messanging API.
Pada halaman Create a Messanging API Channel silahkan anda isi detail informasi dari bot yang akan dibuat. Dan jangan lupa, ketika anda sudah yakin, anda bisa menyetujui Terms & Condition yang anda dan klik tombol Create. Detail dari channel yang telah dibuat dapat diedit di kemudian waktu jika anda ingin mengeditnya.
Beginilah kurang lebih tampilannya ketika anda sudah selesai membuat Messanging API Channel baru (abaikan milik saya yang sudah terisi dengan beberapa channel). Channel baru yang anda telah buat akan tampil dalam daftar channel di provider anda.
Klik lah channel yang baru saja anda buat tadi, lalu klik menu Messanging API.
Karena kita akan membuat dengan Javascript, tanpa bantuan fitur bawaan dari Messanging API, maka kita harus non aktifkan terlebih dahulu fitur-fitur bawaan yang ada.
Cara Menggunakan Bottender JS untuk membuat LINE Chatbot
Detail dokumentasi Bottender JS, dapat anda lihat di sini. Tulisan-tulisan di bawah ini dibuat berdasarkan hasil penerapan dari dokumentasi resmi tersebut.
Pertama-tama, kita perlu buka terminal yang biasa anda gunakan. Dalam hal ini, saya menggunakan Windows Terminal (bisa juga menggunakan CMD atau terminal lain). Untuk membuat project Bottender, anda bisa mengetikan perintah berikut. (ganti my-app dengan nama sesuai selera anda. Untuk saat ini, pilih saja jenis penyimpanan memory jika ditanyai dimana anda ingin menyimpan data anda.
npx create-bottender-app my-app
Setelah menekan enter, anda akan dihadapkan dengan opsi seperti pada gambar. Karena kita akan membuat LINE Chatbot, pilihlah opsi line pada terminal.
Setelah menunggu proses pembuatan folder project selesai, anda bisa masuk ke dalam direktori project dengan command terminal seperti di bawah (sesuaikan dengan nama project anda). Atau, anda juga bisa membukanya langsung dengan text Editor kesukaan anda
cd my-app
code .
Pada file bottender.config.js, pastikan snippet (potongan kode) untuk konfigurasi LINE sudah di-enabled.
module.exports = {
channels: {
line: {
enabled: true,
path: '/webhooks/line',
accessToken: process.env.LINE_ACCESS_TOKEN,
channelSecret: process.env.LINE_CHANNEL_SECRET,
},
},
};
Lalu, di file .env anda bisa mengisi LINE_ACCESS_TOKEN dan LINE_CHANNEL_SECRET dengan key yang anda dapatkan sewaktu membuat channel di LINE Developers Web.
# .env
LINE_ACCESS_TOKEN=<Your LINE Access Token>
LINE_CHANNEL_SECRET=<Your LINE Channel Token>
Selain itu, dalam file .eslintrc.js pastikan konfigurasinya seperti yang di bawah ini (menggunakan ES6).
module.exports = {
parserOptions: {
ecmaVersion: 2018,
},
extends: ['eslint:recommended', 'prettier'],
env: {
node: true,
},
rules: {
'prettier/prettier': [
'error',
{
trailingComma: 'es6',
singleQuote: true,
},
],
},
plugins: ['prettier'],
overrides: [
{
files: ['**/*.test.js'],
env: {
jest: true,
},
},
],
};
Sebelum lebih jauh lagi, mari kita tes apakah bot nya bisa berfungsi dengan baik. Jalankan perintah berikut di dalam direktori project anda.
npm run dev
Tampilannya akan seperti berikut dalam terminal anda.
Terlihat, anda akan mendapatkan link ngrok, link tersebut akan berguna sebagai webhook untuk chatbot kita.
Buka kembali LINE Developer Web dan buka channel messaging milik anda. Buka menu Messaging API, dan di bagian Webhook settings copy & paste link ngrok yang anda dapatkan saat anda menjalankan perintah npm run dev. Anda juga bisa memastikan apakah webhooks berjalan dengan baik dengan cara klik tombol Verify.
Perlu diperhatikan bahwa link ngrok akan berubah apabila anda menjalankan ulang perintah npm run dev, jadi jangan lupa untuk copy & paste ulang link ngrok ke webhooks setting seperti di atas jika anda menjalakan ulang perintah npm run dev.
Untuk uji coba, anda bisa add chatbot anda dengan scan QR Code atau menyalin Bot Basic ID yang terdapat pada Messanging API anda.
Jika anda melakukan langkah-langkah sebelumnya dengan benar, maka pesan pertama dari bot anda akan muncul di layar chat LINE anda.
Anda bisa mengecek isi dari kode yang menampilkan teks tersebut pada direktori project anda (src/index.js).
//src/index.js
module.exports = async function App(context) {
await context.sendText('Welcome to Bottender');
};
Studi Kasus : Membuat Chatbot Pesanan Makanan/Minuman
Kali ini kita akan mencoba membuat sebuah bot sederhana untuk pemesanan makanan/minuman. Kita akan menerapkan fitur-fitur dari LINE seperti quick replies dan flex messanges. Selain itu, kita juga akan memanfaatkan fitur state dari Bottender dan akan kita terapkan saat membuat fitur count (mengajak bot berhitung).
Tulisan-tulisan di bawah ini merupakan hasil implementasi dari dokumentasi resmi Bottender JS. Apabila anda ingin mendapatkan informasi yang lebih detail, anda bisa mengunjungi web tersebut.
Oke, siap???? Langsung saja kita koding lagi.
Buka kembali direktori project anda. Pada file bottender.config.js kita deklarasikan sebuah state bernama count di bawah deklarasi session.
//bottender.config.js
module.exports = {
session: {
driver: 'memory',
stores: {
memory: {
maxSize: 500,
},
file: {
dirname: '.sessions',
},
redis: {
port: 6379,
host: '127.0.0.1',
password: 'auth',
db: 0,
},
mongo: {
url: 'mongodb://localhost:27017',
collectionName: 'sessions',
},
},
},
initialState: {
count: 0,
},
...
Oke, state kita berhasil dideklarasikan. Sekarang kita fokus pada file index.js yang ada pada folder src (src/index.js).
Di sini, kita akan menggunakan fitur dari Bottender JS, yaitu LINE Routing. Detailnya dapat dilihat di sini. Saya menganjurkan menggunakan fitur ini karena tak perlu repot membuat if else yang terlampau banyak untuk menghandle event-event pada chat. Selain itu, fitur ini sangat membantu untuk menghandle event-event spesifik pada chat LINE.
Mari kita buat kode seperti di bawah ini pada src/index.js.
const { router, line } = require('bottender/router');
//Untuk local variable penampung order dan total harga
let order = [];
let summary_total_harga = 0;
module.exports = async function App() {
return router([
line.follow(HandleFollow),
line.unfollow(HandleUnfollow),
line.message(HandleMessage),
line.postback(HandlePostBack),
]);
};
Di bawah function App, kita buat function-function untuk masing-masing routing yang akan digunakan.
// Untuk handle follow event (saat bot di-add friend oleh suatu akun LINE)
async function HandleFollow(context) {
await context.replyText(
`Wah, terima kasih ya ${String.fromCodePoint(
0x100078
)} sudah di add sama kamu! \nMau tau lebih lengkap tentang bot ini? Ketik 'info' (tanpa kutip) untuk deskripsi lebih lengkap.`,
{
quickReply: {
items: [
{
type: 'action',
imageUrl:
'https://png.pngtree.com/png-clipart/20190520/original/pngtree-info-icon-png-image_3550246.jpg',
action: {
type: 'message',
label: 'Info',
text: 'info',
},
},
],
},
}
);
}
//Untuk handle event ketika kita hapus bot dari daftar pertemanan
async function HandleUnfollow(context) {
await context.sendText(
`Terima kasih sudah mempercayakan bot ini di LINE anda, semoga bot ini memberikan manfaat dan kesan baik bagi anda :D.`
);
}
//Untuk handle event Postback (biasanya ketika menekan tombol pada flex Message)
async function HandlePostBack(context) {
if (context.event.payload.split(' ').length > 1) {
const context_temp = context.event.payload.split(' ');
const menu_name = context_temp[0];
const menu_count = context_temp[1];
const menu_price = context_temp[2];
if (order.length === 0) {
let order_temp = {
name: menu_name,
count: menu_count,
price: menu_price,
};
order.push(order_temp);
await context.sendText(
`Berhasil menambahkan ${menu_name} sebanyak ${menu_count} ke keranjang\nKetik 'ringkasan' (tanpa kutip) untuk melihat detail pesanan`
);
} else {
let order_temp = {
name: menu_name,
count: menu_count,
price: menu_price,
};
let flag = false;
for (let i = 0; i < order.length; i++) {
if (order[i].name === order_temp.name) {
order[i].count++;
flag = true;
await context.sendText(
`${order[i].name} jumlahnya nambah 1 di keranjang\nKetik 'ringkasan' (tanpa kutip) untuk melihat detail pesanan`
);
}
}
if (flag === false) {
order.push(order_temp);
await context.sendText(
`Berhasil menambahkan ${menu_name} sebanyak ${menu_count} ke keranjang\nKetik 'ringkasan' (tanpa kutip) untuk melihat detail pesanan`
);
}
}
} else {
if (context.event.payload === 'belum') {
await context.sendText(`Oke siap kak, silahkan lanjutkan pesanan`);
} else if (context.event.payload === 'batal') {
summary_total_harga = 0;
order = [];
await context.sendText(
`Baik kak, keranjang belanja telah direset kembali`
);
}
}
}
Di bagian berikutnya, akan cukup panjang. Bagian ini merupakan bagian untuk handle event saat ada balasan kepada bot berupa teks. Di sini kita akan menggunakan fitur dari quick replies dan flex message untuk mempercantik tampilan dan mempermudah user saat membalas chat. Tambahkan kode berikut setelah function HandlePostBack().
//Untuk handle event balasan chat berupa teks
async function HandleMessage(context) {
//mengecek apakah bot menerima input teks
if (context.event.isText) {
if (context.event.text.toLowerCase() === 'info') {
await context.replyText(
`DeMangan ini adalah aplikasi buatan Yehezkiel Gunawan sebagai submisi project dari kelas LINE Dicoding Academy kelas Chatbot.\n\nAplikasi ini dibuat dengan Node JS dengan bantuan library Bottender 1.4.\n\nKetik 'hitung'(tanpa kutip) agar bot bisa berhitung bersama kamu (counter akan bertambah 1 setiap kamu ketik kata 'hitung'). Tapi cuma sampe 5 aja ya, kasian takut kelelahan dia.\n\nKetik 'pesan' (tanpa kutip) apabila anda ingin memesan makanan/minuman yang bisa dikirim ke rumah anda.\n\nSilahkan gunakan LINE pada Android/Iphone device anda untuk mendapatkan full experience.`,
{
quickReply: {
items: [
{
type: 'action',
imageUrl:
'https://cdn1.iconfinder.com/data/icons/loans-and-finance-outline-icon-set/100/loansfinance_100x100___19-512.png',
action: {
type: 'message',
label: 'hitung',
text: 'hitung',
},
},
{
type: 'action',
imageUrl:
'https://www.pinclipart.com/picdir/middle/53-533174_online-order-icon-png-download-online-shopping-icon.png',
action: {
type: 'message',
label: 'pesan',
text: 'pesan',
},
},
],
},
}
);
} else if (context.event.text.toLowerCase() === 'hitung') {
const count = context.state.count + 1;
context.setState({
count,
});
//Untuk reset state apabila count=5
if (count === 5) {
await context.sendText(
`Wah dah sampe ${count} dah dulu ya, cape saya ngitung mulu. Kita reset lagi jadi 1.`
);
context.setState({ count: 0 });
} else {
await context.sendText(`Count : ${count}`);
}
} else if (context.event.text.toLowerCase() === 'pesan') {
const sushiMenu = {
type: 'bubble',
hero: {
type: 'image',
url:
'https://image.freepik.com/free-photo/traditional-japanese-nigiri-sushi-with-salmon-placed-chopsticks_115594-780.jpg',
size: 'full',
aspectRatio: '20:13',
},
body: {
type: 'box',
layout: 'vertical',
contents: [
{
type: 'text',
text: 'Sushi',
weight: 'bold',
size: 'xl',
},
{
type: 'box',
layout: 'vertical',
margin: 'lg',
contents: [
{
type: 'box',
layout: 'baseline',
contents: [
{
type: 'text',
text: 'Harga',
color: '#aaaaaa',
size: 'sm',
flex: 1,
},
{
type: 'text',
text: 'Rp 15.000 (isi 6 pcs)',
wrap: true,
color: '#666666',
size: 'sm',
flex: 5,
},
],
},
],
},
],
},
footer: {
type: 'box',
layout: 'vertical',
contents: [
{
type: 'button',
action: {
type: 'postback',
label: 'BELI',
data: 'Sushi 1 15000',
},
},
],
},
};
const tehMenu = {
type: 'bubble',
hero: {
type: 'image',
url:
'https://cdn.ayobandung.com/images-bandung/post/articles/2019/12/05/72224/hub-4169187_960_720.jpg',
size: 'full',
aspectRatio: '20:13',
},
body: {
type: 'box',
layout: 'vertical',
contents: [
{
type: 'text',
text: 'Teh',
weight: 'bold',
size: 'xl',
},
{
type: 'box',
layout: 'vertical',
margin: 'lg',
contents: [
{
type: 'box',
layout: 'baseline',
contents: [
{
type: 'text',
text: 'Harga',
color: '#aaaaaa',
size: 'sm',
flex: 1,
},
{
type: 'text',
text: 'Rp 5.000',
wrap: true,
color: '#666666',
size: 'sm',
flex: 5,
},
],
},
],
},
],
},
footer: {
type: 'box',
layout: 'vertical',
contents: [
{
type: 'button',
action: {
type: 'postback',
label: 'BELI',
data: 'Teh 1 5000',
},
},
],
},
};
const kopiMenu = {
type: 'bubble',
hero: {
type: 'image',
url:
'https://image-cdn.medkomtek.com/kqxfebdrvnfv6jCfsJa-QOzuu3s=/1x49:1000x612/1200x675/klikdokter-media-buckets/medias/2302800/original/045285900_1547016776-4-Cara-Bikin-Kebiasaan-Minum-Kopi-Jadi-Lebih-Sehat-By-Ruslan-Semichev-Shutterstock.jpg',
size: 'full',
aspectRatio: '20:13',
},
body: {
type: 'box',
layout: 'vertical',
contents: [
{
type: 'text',
text: 'Kopi',
weight: 'bold',
size: 'xl',
},
{
type: 'box',
layout: 'vertical',
margin: 'lg',
contents: [
{
type: 'box',
layout: 'baseline',
contents: [
{
type: 'text',
text: 'Harga',
color: '#aaaaaa',
size: 'sm',
flex: 1,
},
{
type: 'text',
text: 'Rp 7.000',
wrap: true,
color: '#666666',
size: 'sm',
flex: 5,
},
],
},
],
},
],
},
footer: {
type: 'box',
layout: 'vertical',
contents: [
{
type: 'button',
action: {
type: 'postback',
label: 'BELI',
data: 'Kopi 1 7000',
},
},
],
},
};
const tempuraMenu = {
type: 'bubble',
hero: {
type: 'image',
url:
'https://image.freepik.com/free-photo/batter-fried-prawns-wood_1339-7705.jpg',
size: 'full',
aspectRatio: '20:13',
},
body: {
type: 'box',
layout: 'vertical',
contents: [
{
type: 'text',
text: 'Tempura',
weight: 'bold',
size: 'xl',
},
{
type: 'box',
layout: 'vertical',
margin: 'lg',
contents: [
{
type: 'box',
layout: 'baseline',
contents: [
{
type: 'text',
text: 'Harga',
color: '#aaaaaa',
size: 'sm',
flex: 1,
},
{
type: 'text',
text: 'Rp 10.000',
wrap: true,
color: '#666666',
size: 'sm',
flex: 5,
},
],
},
],
},
],
},
footer: {
type: 'box',
layout: 'vertical',
contents: [
{
type: 'button',
action: {
type: 'postback',
label: 'BELI',
data: 'Tempura 1 10000',
},
},
],
},
};
await context.sendFlex('This is a carousel flex', {
type: 'carousel',
contents: [
// put multiple bubbles in your carousel
sushiMenu,
tempuraMenu,
tehMenu,
kopiMenu,
],
});
} else if (context.event.text.toLowerCase() === 'ringkasan') {
summary_total_harga = 0;
if (order.length === 0) {
await context.sendText(
`Wah keranjang belanja anda sejauh ini masih kosong.`
);
} else {
await context.sendText(
`Berikut pesanan yang ada dikeranjang anda sekarang ini`
);
for (let i = 0; i < order.length; i++) {
await context.sendText(
`${order[i].name}\nJumlah: ${
order[i].count
}\nHarga (harga satuan x jumlah yang dipesan): Rp ${numberWithCommas(
order[i].price * order[i].count
)}`
);
summary_total_harga += order[i].price * order[i].count;
}
context.replyButtonTemplate('This is a button template', {
thumbnailImageUrl:
'https://health.clevelandclinic.org/wp-content/uploads/sites/3/2019/06/cropped-GettyImages-643764514.jpg',
title: 'Total Harga',
text: `Rp ${numberWithCommas(
summary_total_harga
)}\nYakin dengan pesanan anda?`,
actions: [
{
type: 'location',
label: 'Ya (Send location)',
},
{
type: 'postback',
label: 'Belum',
data: 'belum',
},
{
type: 'postback',
label: 'Batal',
data: 'batal',
},
],
});
}
} else {
salahKeywordHandler(context, `Wah salah keyword nih`);
}
} else if (context.event.isLocation) {
//Untuk handle apabila bot menerima input berupa lokasi
if (order.length === 0) {
await context.sendText(
`Waduh keranjang pesanannya masih kosong, coba pilih-pilih menunya dulu dengan cara ketik 'pesan' (tanpa kutip)`
);
} else {
await context.sendText(
`Oke, kurir akan mengantarkan pesanan ke ${
context.event.location.address
}\n\nJangan lupa siapkan uang sebanyak Rp ${numberWithCommas(
summary_total_harga
)}. Terima kasih sudah memesan di DeMangan ini.`
);
order = [];
summary_total_harga = 0;
}
}
}
Aplikasi ini masih belum bisa sepenuhnya berjalan dengan baik. Tambahkan kode di bawah ini (setelah function HandleMessage()) agar program bisa berjalan dengan semestinya.
//Untuk membuat separator comma pada bilangan ribuan
function numberWithCommas(x) {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
}
//Untuk Handle jika ada message yang tidak sesuai dengan logic yang ada
async function salahKeywordHandler(context, message) {
await context.replyText(message, {
quickReply: {
items: [
{
type: 'action',
imageUrl:
'https://png.pngtree.com/png-clipart/20190520/original/pngtree-info-icon-png-image_3550246.jpg',
action: {
type: 'message',
label: 'Info',
text: 'info',
},
},
{
type: 'action',
imageUrl:
'https://cdn1.iconfinder.com/data/icons/loans-and-finance-outline-icon-set/100/loansfinance_100x100___19-512.png',
action: {
type: 'message',
label: 'hitung',
text: 'hitung',
},
},
{
type: 'action',
imageUrl:
'https://www.pinclipart.com/picdir/middle/53-533174_online-order-icon-png-download-online-shopping-icon.png',
action: {
type: 'message',
label: 'pesan',
text: 'pesan',
},
},
],
},
});
}
Yap, akhirnya selesai sudah penulisan kode utama untuk bot kita. Untuk mengetes apakah bot kita sudah berjalan dengan baik atau belum, silahkan copy & paste link ngrok yang terdapat pada terminal anda sewaktu menjalankan npm run dev ke field webhooks yang terdapat pada Messaging API di LINE Developer Console.
Saran saya gunakan aplikasi LINE pada mobile/smartphone agar mendapatkan full experience
Cara deploy Chatbot menggunakan Github & Heroku
Sebelum lebih jauh, pastikan anda sudah mempunyai akun Github dan Heroku yang akan kita gunakan untuk proses deploy chatbot kita. Silahkan register terlebih dahulu jika belum memiliki akunnya.
Selain itu, pastikan anda sudah memiliki terminal Git Bash atau Git yang terinstall pada laptop atau PC anda. Jika belum, silahkan install terlebih dahulu di sini.
Pastikan juga, git yang terinstall pada device anda sudah terconfig secara global (terutama apabila anda pertama kali menginstall atau menggunakan git). Detailnya dapat dilihat di Github Cheatsheet.
Oke kita lanjut kembali....
Silahkan buka website resmi Github dan login menggunakan akun anda. Di panel sebelah kiri, klik tombol New untuk membuat repository baru. Setelah itu, isilah kolom nama repository yang ingin anda buat. Kolom-kolom di bawahnya anda biarkan kosong atau mengikuti setting default dari Github.
Setelah repository berhasil terbentuk, kurang lebih tampilannya akan seperti pada gambar.
Berikutnya, buka terminal Git Bash anda, lalu jalankan perintah berikut (pastikan anda sudah masuk ke direktori project anda melalui terminal Git anda). Ganti nama 'new repo' dengan nama repository anda atau anda bisa copy dan paste perintah tersebut dari repository kosong yang baru saja terbentuk di Github anda.
git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/yehezkielgunawan/[newrepo].git
git push -u origin main
Apabila anda melakukan perubahan pada project anda, anda hanya perlu menjalankan perintah berikut pada direktori project anda.
git add .
git commit -m "[pesan commit]"
git push
Akhirnya berhasil deploy ke GitHub
Sekarang kita menuju web resmi Heroku dan loginlah menggunakan akun anda. Kita akan membuat project baru dengan klik tombol New di sebelah kanan atas halaman web dan pilih Create New App. Lalu isilah nama project yang anda inginkan (untuk region bisa dibiarkan default saja).
Setelah selesai membuat project di Heroku, masuk ke menu Deploy dan pilih Github. Isilah nama repository github yang ingin anda hubungkan. Pastikan anda sudah connect akun Github anda dengan Heroku, apabila belum, anda dapat melakukannya dengan cara-cara yang terdapat dalam dokumentasi resminya di sini
Jika berhasil connect, tampilannya akan seperti pada gambar di bawah.
Kali ini kita akan menggunakan metode manual deploy, caranya scroll sampai ke bawah (masih di menu Deploy). Di segment Manual Deploy, pilih branch yang akan anda deploy, jika sudah yakin silahkan tekan tombol Deploy Branch dan ikuti serta tunggu proses deploy sampai selesai.
Tunggu sekitar beberapa menit dan yay selesai juga. Jika sudah selesai, kita ke menu Settings dan scroll ke bawah sampai ke segment Domains. Di sini anda bisa melihat domain untuk project anda.
Selesai? Belum, sabar dulu ya. Masih ada langkah terakhir. Kita harus kembali dan login ke web LINE Developer Console untuk mendaftarkan domain baru kita ke webhooks Channel Messaging API kita. Caranya sama persis seperti saat kita copy dan paste link ngrok saat masih dalam development mode (jangan lupa tambahkan string 'webhooks/line' karena kita mengikuti config dari Bottender JS).
Saatnya tes chatbot kita, dimulai dari add bot sebagai friend di aplikasi LINE dengan Bot basic ID atau QR Code yang tersedia di Messaging API. Dan hasilnya....
Yap, itulah kurang lebih proses pembuatan bot sederhana menggunakan Bottender JS. Inilah hasil jadi milik saya, silahkan dicoba-coba untuk perbandingan DeMangan Bot.
Masih merasa penasaran, anda bisa cek full repository untuk DeManganBot di sini
Demikian proses pembuatan bot sederhana menggunakan Bottender JS, terima kasih telah menyempatkan waktu untuk membaca artikel ini. Sekiranya artikel ini bisa membantu anda untuk membuat chatbot. Mohon maaf apabila masih terdapat kekurangan, karena saya pribadi baru menulis artikel untuk pertama kali. Salam programmer :D
Discussion
jika gagal saat proses ganti link heroku itu kenapa ya ?
error kode 500
Hai mas,
Biasanya itu terjadi karena service nya belum ter-deploy sempurna (prosesnya belum selesai) atau ada kesalahan dari sisi confignya sih
ada contact telegram/discord agar bisa tanya2...
Boleh mas, bisa add Discord saya: Kaz2000#6304, tapi saya juga dah lupa banyak perihal framework Bottender ini. Dah 2 tahun gak nyentuh lagi🤣