Cara menggunakan html welcome bot telegram

Pengantar

Seperti biasa, selalu awali semuanya dengan bismillah..

Saya sendiri bukan seorang yang “bergelut” di bidang pemrograman dan hanya iseng saja untuk belajar beberapa hal tentang pemrograman karena menurut saya itu menarik hehe..

Jadi bot ditutorial ini mungkin tidak sempurna dan butuh banyak perbaikan karena saya membuatnya ya asal bisa jalan dan tidak error saja.

Sekilas

Okkeh.. Bot telegram masih eksis dari awal munculnya aplikasi telegram hingga sekarang. Sudah banyak orang-orang yang membuat botnya sendiri dengan menggunakan berbagai macam bahasa pemrograman dan berbagai macam platform salah satunya Google Apps Script yang disingkat GAS.

Mengingat platform GAS ini merupakan aplikasi yang gratis, iya GRATIS! sehingga masih banyak penggemarnya dan lagi, GAS ini terintegrasi dengan berbagai aplikasi dari google lainnya seperti Google Sheet, Google Form, dan lain sebagainya.

Asumsi

Saya berasumsi teman-teman mempunyai:

1. Pastinya akun telegram.
2. Akun google, pasti punya kan? hehe
3. Perangkat atau device, bisa berupa laptop, komputer, tablet ataupun smartphone. Saya menyarakan menggunakan laptop atau komputer karena layar yang lebih luas dan mudah untuk dioperasikan.
4. Koneksi internet, baik berupa data seluler ataupun hotspot wifi tetangga 🤭

Selain itu, teman-teman diharapkan sudah bisa untuk:

1. Mengoperasikan telegram [membuat grup, channel, memasukkan user, dan lain sebagainya].
2. Membuat bot dasar di Bapak Bot, bisa dilihat di sini»
3. Mengoperasikan perangkat yang akan digunakan.

Oke.. mari kita mulai!!!

Mulai

Untuk memulai, silahkan teman-teman login ke akun google dan akun telegramnya masing-masing ya.

Google Apps Script

Buka Google Apps Script, bisa dari Google Drive atau langsung ke Google Script. Contoh di sini saya membuka dari Google Drive.

Pilih “New” kemudian cari dan pilih “Google Apps Script”. Kita ganti nama filenya, misalnya Resepsionis Bot biar agak keren 😁

Selanjutnya, mari kita masuk ke codingannya! Btw, bisa dikosongkan atau dihapus yang ada di halaman tersebut, kita ubah semua jadi kode baru!

It’s Coding Time!

Deklarasi variabel token

Kita deklarasikan dulu variabel global kita berupa token yang didapatkan dari bapak bot.

// masukkan token bot yang didapatkan dari @botfather
var token = "5049590768:AAFuXvMVi8_ZzuyI45FYPCe3F2kD8JUse0U"

// url bot api
var url = "//api.telegram.org/bot" + token + "/";

Fungsi mengirim pesan

Selanjutnya kita buat fungsi untuk mengirim pesan kembali kepada bot.

// fungsi untuk mengirim pesan
function sendMessage[id, text] {
    var options = {
        "method": "POST",
        "contentType": "application/json",
        "payload": JSON.stringify[{
            "method": "sendMessage",
            "chat_id": id,
            "text": text,
            "parse_mode": "HTML"
        }]
    }

    // fetch data
    var response = UrlFetchApp.fetch[url, options];

    // cek respon api
    if [response.getResponseCode[] == 200] {
        return JSON.parse[response.getContentText[]];
    }

    return false;
}

Handle update

Selanjutnya kita handel setiap update yang akan masuk ke api telegram bot kita.

function doGet[e] {
    return HtmlService.createHtmlOutput["Hanya doPost yang di proses!"]
}

function doPost[e] {
    // memastikan hanya tipe JSON yang diterima
    if [e.postData.type == "application/json"] {
        var content = e.postData.contents;

        // parsing data yang masuk
        var update = JSON.parse[content];

        // jika data valid maka permintaan akan diproses
        if [update] {
            return prosesPesan[update];
        }
    }

    return false;
}

Proses Pesan

Setelah kita buat fungsi untuk mengirim pesan dan menghandle permintaan yang masuk, selanjutnya kita buat fungsi untuk memproses permintaan tersebut.

// fungsi utama untuk memproses permintaan yang masuk
function prosesPesan[update] {

    // deteksi apakah ada permintaan yang masuk
    if [update.message] {

        // penyederhanaan chat id
        var id = update.message.chat.id;

        // jika permintaan berupa pesan text
        if [update.message.text] {
            
            // penyederhanaan permintaan text
            var text = update.message.text;

            // jika user mengetik /start
            if [/^\/start$/i.test[text]] {
                var balas = "Halo! Resepsionis bot telah aktif!";
                return sendMessage[id, balas]
            }

            // jika user mengetik /ping
            if [/^\/ping/i.test[text]] {
                var waktuPesan = update.message.date;
                var waktuSekarang = new Date[].getTime[] / 1000;
                var waktu = Math.abs[waktuSekarang - waktuPesan].toFixed[2];
                var balas = "Pong!!! \nDi proses dalam " + waktu + " detik."
                return sendMessage[id, balas];
            }

            // Silahkan kembangkan sendiri
            // Code bisa ditambahkan di area ini
        }

        // jika permintaan berupa member masuk
        if [update.message.new_chat_members] {

            // buat variabel baru untuk member masuk
            var userBaru = update.message.new_chat_members[0];

            // definisikan nama user yang masuk
            var nama = userBaru.first_name;
            
            // jika punya last name, kita tambahkan juga
            if [userBaru.last_name] {
                nama += " " + userBaru.last_name;
            }

            var balas = "Selamat datang " + nama + "! Semoga harimu menyenangkan!";
            return sendMessage[id, balas];
        }
    }

    return false;
}

Mantap.. Sudah selesai 😁 ternyata ga sesulit yang dibayangkan!

Deploy Bot!

Setelah codingan kita buat, mari kita deploy supaya bot dapat bekerja!

Pilih menu Deploy, dan New Deployment.

Kemudian klik Select type dan pilih Web App.

Selanjutnya isikan seperti ini.

dan klik Deploy.

Kemudian akan muncul Permission “Authorize access” dan ikuti saja langkah langkahnya.

Setelah itu akan muncul pop up “aplikasi tidak diverifikasi”, klik saja lanjutkan. Pop up ini muncul setiap deploy pertama di Google Apps Script. Setelah selesai, teman-teman akan diberikan link dari web app codingan kita tadi.

Silahkan di copy untuk kemudian nanti kita jadikan webhook.

Akhirnya mengetest bot

Setelah proses deployment selesai, kita set webhook bot kita ke link yang didaptkan tadi.

Set Webhook

Buka tab baru pada browser kemudian masukkan url dengan format:

//api.telegram.org/botTOKENBOT/setwebhook?url=WEBAPPURL

mari kita masukkan untuk bot resepsionis!

//api.telegram.org/bot5049590768:AAFuXvMVi8_ZzuyI45FYPCe3F2kD8JUse0U/setwebhook?url=//script.google.com/macros/s/AKfycby20KmadLfwQMlzk3qIT5-NjHIGpWtlja6ZL458S6aAxPcsIFq9vN1s1p5f5BgeqQkuHg/exec

Test BOT!

Mari kita cobaaaaa…

Start dan Ping

Masuk ke bot dan klik Start atau /start. Kemudian test perintah /ping.

Sip.. Berhasil!!! Selanjutnya mari kita test fungsi penyambutannya!

Welcome Message

Masukkan anggota baru ke grup daaaaaannnn…

SUKSES!!

Selamat kamu telah membuat bot telegram!

Tambahan

Setiap memperbarui kode, harus deploy lagi! Tapi kali ini bukan “New Deployment” melainkan “Manage Deployments”.

Pada menu “Manage Deployments”, pilih icon pensil dan ubah “version"nya menjadi New Version.

Penutup

Semoga bermanfaat dan bisa dikembangkan lagi biar lebih keren dan banyak fiturnya! Stay Creative teman 😊

Pustaka

• Telegram Bot API
• Google Apps Script