Cara Mudah Membuat Bot di Line

9 min readJul 12, 2019

Hi! Saya Helmi Satria creator bot line @ingetingue, buat yang belum tau @ingetingue adalah bot reminder dimana proses pembuatannya bisa menggunakan bahasa natural seperti: 10 menit lagi rapat atau menggunakan kalender, dan di bulan Agustus 2019 akan launch fitur ingetin jadwal kuliah, ya.. jadwal kuliah. Jadi kamu ga akan lupa lagi deh kalo mau kuliah, bikinnya ga susah kok tinggal upload file jadwal kuliah kamu, terus udah deh tiap mau kuliah nanti bakal diingetin. Kalau ingin tau lebih lanjut cobain langsung aja ya 😁

Kali ini saya akan menerangkan mengenai cara pembuatan bot di aplikasi line messenger dengan cara simple dan bot yang simple juga.

To be clear, tulisan ini bertujuan untuk memberikan petunjuk pembuatan line bot dengan cara yang paling mudah (menurut saya) dan penjelasan yang sejelas-jelasnya

Kalau kamu lagi buru-buru dan pengen tau langsung implementasinya silahkan langsung scroll kebawah ya di bagian “Implementasi Line Bot”, kalau butuh penjelasannya silahkan scroll-up lagi 😉

Kata simple diatas dimaksudkan membuat bot yang memiliki 2 tujuan seperti berikut:

Line bot dapat terkoneksi dengan sistem backend (service/logic)
Line bot yang dibuat adalah bot penjumlahan, sehingga jika ada user yang mengirim pesan seperti: 1 3 bot akan membalas 4 sebagai hasil penjumlahan 1 dan 3

Mari kita mulai, untuk mencapai tujuan yang sudah disebutkan kita membutuhkan beberapa alat pendukung dan informasi/knowledge terkait tools yang digunakan

Tools yang akan digunakan adalah:

Node.js (Javascript)
Github
Heroku untuk deployment as service/backend

Informasi terkait tools yang digunakan:

Node.js

Apakah kamu familiar dengan javascript? Kalau belum, javascript merupakan scripting language yang biasanya digunakan untuk manipulasi code HTML. Menggunakan javascript, kamu dapat memanipulasi html tag seperti div, span, table, fonts, dll. Javascript dikenal sebagai client-side language atau bahasa pemrograman yang biasa digunakan untuk membuat antarmuka pengguna (user interface), contoh hal yang dapat dilakukan menggunakan javascript yaitu misalkan pada suatu halaman ada satu tombol dan satu paragraf, lalu programmer ingin membuat jika ada user yang melakukan klik pada tombol tersebut, warna paragraf yang ada pada halaman tersebut menjadi biru. Hal tersebut dapat dilakukan menggunakan javascript dengan cara:

document.querySelector('button').onclick = function(e){
  document.querySelector('p').style.color = 'blue'
}

Node.js, penjelasan mudahnya ini adalah sebuah framework untuk membuat server-side application atau service atau backend menggunakan bahasa Javascript. Jika masih belum familiar tidak perlu khawatir, karena tiap baris code akan saya jelaskan.

Kenapa kita butuh dan harus membuat backend? Yuk kita lihat workflow atau cara kerja dari line bot

Sehingga jika backend tidak ada, kita tidak akan mencapai tujuan awal kita, yaitu membuat bot yang dapat melakukan penjumlahan karena proses penjumlahan atau logic lainnya hanya dapat terjadi di backend. Pada akhirnya backend akan dihubungkan dengan line bot menggunakan sebuah perantara yang dinamakan webhook (akan saya bahas dibawah saat implementasi)

Nantinya backend di tutorial ini hanya merupakan satu file berisikan beberapa baris saja (berisikan fungsi/function/logic) dan berformat javascript. Lalu nanti ditaruh dimana sih filenya? Agar backend dapat diakses oleh line bot, file javascript tersebut tidak bisa hanya di taruh di laptop kita (local), namun backend kita (file javascript) itu harus kita lakukan sesuatu agar dapat diakses global agar semua orang di dunia termasuk line bot dapat mengakses backend kita.

Salah satu cara untuk mencapai hal tersebut adalah melakukan proses deployment. Deployment adalah proses upload suatu file/project local kita ke cloud atau penyedia service agar backend kita dapat diakses secara global. Tools untuk melakukan deployment yang akan digunakan adalah Heroku.

Heroku

Heroku merupakan suatu alat untuk membantu kita melakukan proses deployment dengan mudah dan gratis (ada mode berbayar juga). Sebenarnya ada banyak tools yang lain seperti: Now, AWS, Compute Engine (Google Cloud), dan masih banyak lagi. Sejauh ini saya sudah banyak menggunakan tools deployment dan dapat disimpulkan bahwa Heroku ini adalah tools paling tepat untuk membuat bot seperti ini. Untuk melakukan proses upload atau deployment ke heroku, kita akan menggunakan github.

Okay, sepertinya penjelasannya sudah cukup, mari kita implementasikan.

Implementasi Line Bot

Pada proses implementasi ini akan dilakukan beberapa langkah:

Setup LINE bot di https://developers.line.biz/en/
Membuat file javascript (backend)
Menyesuaikan environment untuk deployment ke Now
Deployment
Menghubungkan line bot dengan backend yang sudah deployed di cloud (Heroku) menggunakan webhook
Testing line bot

Mari kita mulai implementasinya dari membuat akun line

1. Setup LINE bot di https://developers.line.biz/en/

Silahkan lakukan Log-in dengan melakukan klik tombol Log In. Lalu klik tombol yang bertuliskan “Log In with LINE Account”. Masukkan username/email dan password sesuai dengan akun line yang udah kamu punya.

Jika kamu sudah punya suatu provider silahkan pilih salah satu, jika belum lakukan klik button “Create New Provider”. Proses sampai Done, lalu pilih provider tersebut, lalu kita ada di halaman ini.

Pada halaman ini, kita lakukan Create New Channel, klik tombol tersebut.

Setelah muncul menu ini, pilih menu Messaging API.

Kali ini muncul form yang berisikan informasi tentang bot yang ingin kita buat. Berikut adalah poin-poin yang saya isikan, disesuaikan aja ya sesuai kebutuhan kamu, contoh:

App name: Kalkulator Helmi

App description: Bot ini bisa melakukan proses kalkulasi

Category dan Sub Category: Professional — IT dan Komputer

Email address: satriahelmi@gmail.com

Saya kosongkan bagian Privacy Policy dan Term of Use karena optional dan belum diperlukan

Jika sudah, lakukan klik button “Confirm” dibawah.

Lalu baca “Persetujuan Mengenai Penggunaan Informasi”, jika sudah klik button “Setuju”.

Kita sudah sampai di halaman confirmation, lakukan klik button “Create”

Alhasil, bot yang baru berhasil ditambahkan, jika sudah berhasil halaman List Bot kita jadi seperti ini (Tanpa bot ingetin gue)

After Create a Kalkulator Helmi Line Bot

2. Membuat Backend Menggunakan Javascript

Install Node.js, saya rekomendasikan untuk install versi LTS nya

Buat folder bernamakan kalkulator-line-bot
Buat satu file index.js di folder tersebut
Lalu open folder tersebut di code editormu

Kondisi di code editor (vscode) saat setelah membuat folder dan satu file index.js

Kita hanya membutuhkan satu library atau dependency yaitu bottender, untuk menggunakannya (install):

$ npm install bottender

Pada file index.js copy paste code dibawah

*Line console: https://developers.line.biz/console/

const { LineBot } = require("bottender");
const { createServer } = require("bottender/express");const bot = new LineBot({
  // ubah ke access token dan channelSecret dibawah, sesuai dengan yang ada di line console
  accessToken: "ISI_DENGAN_ACCESS_TOKEN_DARI_LINE_CONSOLE",
  channelSecret: "ISI_DENGAN_CHANNEL_SECRET_DARI_LINE_CONSOLE"
});bot.onEvent(async context => {
  // 1. Pengecekan apakah bot menerima chat berupa text
  if (context.event.isText) {    // 2. Ambil value text yang dikirim oleh user, simpan di variabel receivedMessage
    const receivedMessage = context.event.text;    // 3. Pengecekan apakah user mengirim 2 pasang string dengan spasi
    // Contoh valid text: 1 3 | 4 2 | 10 23
    if (receivedMessage.split(" ").length === 2) {      // 4. Menyimpan hasil split. Kalau messagenya: "1 3" splittedText akan berisi ["1", "3"]
      const splittedText = receivedMessage.split(" ");      // 5. Ambil 2 angka yang masih dalam bentuk string, sekaligus ubah menjadi Number (integer)
      const first = Number(splittedText[0]);
      const second = Number(splittedText[1]);      // 6. Lakukan proses penjumlahan
      const sumResult = first + second;      // 7. Balas pesan user dengan hasil penjumlahan 2 angka yang dikirim
      await context.replyText(sumResult);
    } else {      // 8. Beri respon kepada user jika format pesan yang diberikan tidak sesuai
      await context.replyText(
        "Maaf pesanmu tidak sesuai format, contoh yang benar: 1 3 atau 10 12"
      );
    }
  }
});const server = createServer(bot);server.listen(process.env.PORT || 5000, () => {
  console.log("server is running on 5000 port...");
});

Atau download dari github repository saya: https://github.com/helmisatria/kalkulator-line-bot

Ganti ISI_DENGAN_ACCESS_TOKEN_BOT_DI_LINE_CONSOLE dengan Access Token dan ISI_DENGAN_CHANNEL_SECRET_BOT_DI_LINE_CONSOLE dengan Channel Secret yang ada di Line Console.

Lakukan inisiasi project dengan mengeksesuki command berikut, untuk membiarkan default value sebagai valuenya, klik enter.

$ npm init

Proses ini melakukan pembuatan file package.json secara otomatis, lalu lakukan sedikit modifikasi pada file tersebut, pada bagian scripts tambahkan field start yang berisikan node index.jsagar heroku dapat menjalankannya dengan benar. Hasil dari perubahan ini akan membuat file package.json akan menjadi seperti ini

{
  "name": "kalkulator-line-bot",
  "version": "1.0.0",
  "description": "Kalkulator",
  "main": "index.js",
  "dependencies": {
    "bottender": "^0.15.17"
  },
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node index.js"
  },
  "author": "Helmi Satria",
  "license": "ISC"
}

3. Persiapan proses deployment ke Heroku

Instalasi Git

Kalau kamu belum punya git silahkan install dulu disini, pada proses instalasi silahkan next next saja jika tidak ada keperluan tambahan.

Untuk memastikan git sudah terinstall dengan benar, pastikan outputnya sama seperti ini:

Setup Git

Kalau kamu baru pertama kali ini install git, lakukan ini di terminal agar kamu bisa upload project kamu ke github. Kalau saya bilang terminal itu berarti kamu bisa pakai cmd / powershell/ git bash atau yang lain.

Ini hanya dilakukan sekali saat setelah install git.

$ git config --global user.email “satriahelmi@gmail.com"
$ git config --global user.name “Helmi Satria"

Lalu, kita lakukan upload data ke github, sebagai inisiasi kita hanya akan copy paste dari code yang telah diberikan github setelah membuat sebuah repository. Hal yang dilakukan disini adalah hanya upload 1 file README.md ke github.

Demo Setelah membuat sebuah repository di github

Perlu diperhatikan bahwa git init dan git push origin -u master hanya perlu dilakukan sekali dalam pengerjaan suatu project. Jika ingin upload semua file dalam suatu project lakukan hal dibawah ini

Sebelumnya, pastikan kamu sudah membuat satu file bernamakan .gitignore dan berisikan text node_modules. File ini bertujuan agar kita tidak melakukan upload semua data library ke github, karena folder ini sangat besar dan tidak direkomendasikan untuk upload ke github.

Setelah memastikan file .gitignore sekarang kita lakukan upload project ke github dan hal inilah yang selalu dilakukan saat telah melakukan perubahan code dan ingin melakukan upload/update project ke github

$ git add .
$ git commit -m 'upload pertama project ke github'
$ git push

4. Deployment

Install heroku secara global

$ npm install -g heroku

$ heroku login

Lalu akan muncul di browser juga suatu halaman login di browser, seperti ini

Setelah klik Log in akan muncul seperti ini di terminal

Sekarang kita akan membuat satu app di Heroku bernamakan kalkulator-line-bot, caranya:

$ heroku create kalkulator-line-bot

Herokuapp dengan nama kalkulator-line-bot sudah saya gunakan, sehingga kamu tidak dapat menggunakannya. Maka dari itu, gunakan nama yang lain misalkan heroku create kalkulator-line-bot-penjumlahan atau heroku create kalkulator-line-bot-helmi dll.

Lalu copy link dari hasil pembuatan heroku app, dapat dilihat dari gambar diatas, linknya adalah https://kalkulator-line-bot.herokuapp.com. Ini akan digunakan untuk menghubungkan line bot dengan service/backend kita.

Setelah membuat Heroku App, lakukan deployment atau proses upload ke heroku dengan cara:

$ git push heroku master

5. Menghubungkan Line Bot dengan Backend Menggunakan Webhook

Sekarang kita akan menghubungkan line bot kita dengan service/backend yang sudah kita buat dan deploy.

Cari bagian Webhook URL pada Line Console

Ganti value webhook URL tersebut dengan url yang tadi sudah didapat pada saat proses Heroku Create dalam hal ini saya mempunyai url kalkulator-line-bot.herokuapp.com, silahkan ganti urlnya sesuai dengan url hasil generate heroku create

6. Testing line bot

Step terakhir, pastikan Auto-reply dan Greeting Message disabled

Auto-reply dan Greeting messages disabled

Sekarang kita bisa lakukan testing ke line bot baru kita

Sekian tutorial kali ini, rencana saya akan membuat series mengenai pembuatan bot di line seperti flex message, liff app, dll. Jika ada masukan atau ada yang ingin ditanyakan silahkan berikan komentar dibawah atau hubungi saya langsung

Github: github.com/helmisatria

Line: @helmisatrianugraha

Telegram: @helmisatria