(GAS-21) SubMenu Keyboard Biasa pada Bot Telegram

Membuat menu di dalam menu, atau submenu istilahnya. Kita pelajari pada bahasan ini, dengan menggunakan Keyboard Biasa. Keyboard inline, materi berikutnya saja ya.

Pendahuluan

Skip saja, sudah dianggap paham.

Kalau belum paham, silakan lihat pada materi-materi GAS lainnya.

Ruang Lingkup

Kita batasi, hanya untuk penggunaan keyboad biasa saja. Sedangkan materi keyboard berjenis inline pada materi berikutnya (insyaAllah).

Tujuannya: Agar fokus belajar dan dokumentasi menjadi rapi.

Pemahanan

Submenu itu sebenarnya tidak ada di struktur metode bot api telegram. Namun, istilah submenu tetap kita pakai untuk mempermudah penyebutan.

Yang terjadi sebenarnya, adalah membuat menu kemudian ditimpa dengan menu baru lainnya. Sehingga seolah-olah terjadi anak dari menu yang pertama.

Lebih jelasnya kita praktekkan saja ya.

Preview

Sebelum praktek biar dapat gambaran, kira-kira seperti ini hasilnya:

Contoh Kasus

Bang Jaenal, punya usaha warung makanan. Di dalamnya menyediakan aneka masakan, lauk, dan makanan lainnya. Dia ingin membuat bot di telegram dengan menampilkan di keyboard sesuai pilihan. Ceritanya dibuat sederhana saja ya. Biar di daftar sajiannya dia tidak terlalu panjang, Bang Jaenal pengen dipisah menjadi 2 katagori, yakni: MAKANAN dan MINUMAN.

Library

Pastikan gunakan library telegram gas terbaru, yakni yang angkanya paling besar. Saat ditulis, menggunakan versi 23.

Dengan ID Library: MHczUHrzvBLV1HsUn5XkOIfvg_do21SJR

Array

Okay mari kita buat array untuk mendefinisikan kasus tersebut.

Ada 2 yang perlu di definisikan:

1. String atau kata-kata pesan
2. Array tombol-tombol keyboardnya.

Array Keyboard berdimensi 2, yakni kolom dan baris.

Strukturnya kira-kira begini:

[
    [ 'Baris 1 Kolom 1', 'Baris 1 Kolom 2', 'Baris 1 Kolom 3', ... dst ],
    [ 'Baris 2 Kolom 1', 'Baris 2 Kolom 2', 'Baris 2 Kolom 3', ... dst ],
    [ 'Baris y Kolom x1', 'Baris y Kolom x2', 'Baris y Kolom x3', ... dst ],
]

Maka, jika diimplementasikan dari kasus diatas:

// menu utama, ada 2 katagori
var strMenuUtama = '🙏🏼 Silakan pilih menu yang tersedia';
var kbMenuUtama = [ 
        [ 'Makanan', 'Minuman' ] 
    ];

// tambahkan tombol Kembali, buat kembali menuju menu utama
var strMenuMakanan = '🍽 Makanan yang tersedia adalah sebagai berikut';
var kbMenuMakanan = [
        [ 'Nasi Putih', 'Soto Ayam', 'Soto Kambing', 'Pecel'],
        [ 'Kembali' ]
    ];

var strMenuMinuman = '🥛 Minuman yang tersedia adalah sebagai berikut';
var kbMenuMinuman = [
        [ 'Es Teh', 'Es Jeruk', 'Air Putih' ],
        [ 'Kembali' ]
    ];

Dimana meletakkannya?

Buat yang sudah paham pemrograman, silakan dimana saja yang penting bisa berjalan.

Sedangkan yang belum mengerti, kalau kode seperti itu namanya inisiasi, maka paling aman diletakkan di paling atas sendiri kode.

Event Handle

Selanjutnya, masuk ke kode utama program.

Sisipkan kode eventnya saat handle text, misalnya temukan kode ping:

 if ( /\/ping/i.exec(msg.text) ){
      return tg.kirimPesan(msg.chat.id, "Pong!" );
    }

Kemudian letakkan dibawahnya itu:

// jika user mengetik kata MENU maka munculkan menu utama
 if ( /^menu$/i.exec(msg.text) ){
      return tg.sendMessageKeyboard(msg.chat.id, strMenuUtama, kbMenuUtama);
    }

Maksud dari ^menu$ adalah:

• kode ^ berarti diawal text
• kode $ berarti diakhir text

Artinya, event text yang dihandle adalah yang masuk kata MENU saja (boleh besar kecil).

Sederhana kan kode nya? OK, next…

Lanjutkan dengan kode untuk menghandle kode menu-menu lainnya:

// jika pesan yang masuk adalah kata MAKANAN maka munculkan menu utama
if ( /^makanan$/i.exec(msg.text) ){
      return tg.sendMessageKeyboard(msg.chat.id, strMenuMakanan, kbMenuMakanan);
    }

// begitu juga untuk MINUMAN
if ( /^minuman$/i.exec(msg.text) ){
      return tg.sendMessageKeyboard(msg.chat.id, strMenuMinuman, kbMenuMinuman);
    }    

Trus bagaimana kode event untuk tombol KEMBALI ? Ya, sama dengan ketika ngetik MENU.

Maka bisa dituliskan lagi:

// handle text KEMBALI maka munculkan menu utama
 if ( /^kembali$/i.exec(msg.text) ){
      return tg.sendMessageKeyboard(msg.chat.id, strMenuUtama, kbMenuUtama);
    }

SELESAI. Silakan di test deploy dan dicoba-coba.

Menu Item

Sedangkan untuk menghandle menu item, saya contohkan 1 aja ya..

Misalnya Nasi Putih, akan kita kirim sebuah gambar Nasi Putih plus kasih informasi harga nya.

Tambahkan kode handle event Nasi Putih nya:

// handle text Nasi Putih maka munculkan menu utama
 if ( /^nasi putih$/i.exec(msg.text) ){
     var idPhoto = 'AgACAgUAAxkBAAIPtF9I6ZdG8zH0u85otSmerLzYN-GxAAIIqjEb97NJVj6X7KWcxgYou8n9a3QAAwEAAwIAA3gAA30KAgABGwQ';
      return tg.sendPhoto(msg.chat.id, idPhoto, 'Nasi Putih\nRp.3,000-\n\nPulen, nikmat dan lezat.');
    }

Materi mengirim foto, bisa dicek pada tulisan Mengirim Foto.

Bonus

Biar lebih simple, karena MENU dan KEMBALI eksekusinya adalah sama. Maka bisa kita sederhanakan menjadi:

// handle text MENU atau KEMBALI maka munculkan menu utama
 if ( /^(menu|kembali)$/i.exec(msg.text) ){
      return tg.sendMessageKeyboard(msg.chat.id, strMenuUtama, kbMenuUtama);
    }

Youtube

• PlayList TIPS TRIK
• PlayList GAS-2
• PlayList GAS-1

Penutup

Jika ada pertanyaan, saran atau masukkan silakan didiskusikan. Jika ingin live dan biasanya tanggapan juga lebih cepat, sangat disarankan bergabung pada group Telegram @botIndonesia.