Penjelasan Mode Format Text pada Bot Telegram (GAS II-07)

6 menit saja |

Belajar dari dasar, membuat pede buat oprek-oprek! Materi ini membahas format dan sedikit modifikasi text. Boleh di skip buat yang sudah memahami.

Pendahuluan

Waduh, ga kerasa sudah sebulan belum keluar juga materi ini haha.. Padahal materi sudah separuh ditulis, tapi keburu ada kesibukan dan disusul cidera kaki overtraining sport.

Tapi komitmen untuk meneruskan materi, insyaAllah masih akan berlanjut. Semoga kali ini bisa kelar.. karena gak mudah bikin ide tema, nulis, bikin code script, bikin video, kemudian edit-edit baru publish. So, lanjuttt belajarnya jangan kasih kendor :-D

Kita masih belajar dasar-dasar terus ya. Tidak mengapa, daripada terlalu jauh malah gak bisa modif-modif. Seperti materi hashtags sebelumnya, pada bikin tapi bingung bagaimana memodifikasi, mengembangkan, bahkan menambah sedikit aja bingung. Begitu juga pas memodifikasi welcome bot, reminder, jadwal sholat, dan sebagainya.

Jadi mantapkan dahulu dasar-dasar sehingga bisa melangkah jauuh..

So, kali ini belajar mode dan format text pada Telegram ya.

"Yuk Belajar"

Syntax

Untuk mengirim pesan, pada library bisa kita pakai syntax sebagai berikut:

tg.kirimPesan(chat_id, text, parse_mode, disable_web_page_preview, reply_to_message_id, reply_markup)

Atau

tg.sendMessage(chat_id, text, parse_mode, disable_web_page_preview, disable_notification, reply_to_message_id, reply_markup)

Atau

tg.sendMsg(msg, text, parse_mode, disable_web_page_preview, reply_to_message_id, reply_markup)

Yang kita bahas adalah parse_mode

Parse Mode

Ada 3 jenis format dasar text pada telegram. Ini wajib kita kenal.

  1. unformat atau polosan
  2. markdown
  3. HTML

Nyok, mari kita bahas satu per satu..

"Yuk Belajar"

Polos (unformatted)

Mode polosan adalah mode paling aman. Pakai mode ini jika ingin kirim teks biasa (tanpa format), mendebug, mengeluarkan JSON, atau untuk mode cepat.

Mode pengiriman polosan, tidak perlu mengisikan parse_mode nya. Misal:

tg.kirimPesan(IDUser, 'Hai bang!');

Bot akan mengirim pesan, tanpa memproses sebelumnya langsung saja dikirim text apa adanya.

Ini adalah mode teraman!

"Yuk Belajar"

Markdown

Mode markdown sebenarnya cukup enak buat pengetikan.

Format penulisan:

Tebal

*tebal*

Miring

_miring_

Garis Bawah

__garis bawah__
Coret
~teks dicoret~

Teksn dengan inline mono, ditulis:

`inline mono`

Teks dengan beberapa baris:

mono dengan blok
support
multi baris

ditulis seperti ini:

```
mono dengan blok
support
multi baris
```

Teks dengan Hyperlink bangHasan, ditulis:

[blog bangHasan](https://blog.banghasan.com/)

Saat ini sudah support penggabungan format, misalnya tebal dan miring:

*ini tebal di dalamnya ada _miring_*

Hasilnya: ini tebal di dalamnya ada miring

Hanya saja, sangat-sangat hati-hatilah jika ada karakter yang dipakai sebagai format markdown.

Misalnya ada username bernama sandra_dewi, sudah pasti akan error.

Karakter ini harus di escape (dibuat pengecualian), dengan cara menambahkan karakter backslash \.

Sehingga ditulis menjadi: sandra\_dewi

Escape Markdown

Escape atau pengecualian karakter pada markdown sebenarnya relatif agak susah jika sudah kompleks. Namun secara sederhana, seperti penjelasan sebelumnya: cukup tambahkan \ sebelum karakter yang diescape.

Sehingga:

* menjadi \*
_ menjadi \_
` menjadi \`

Contoh penggunaan, jika menulis bot dengan markdown untuk @senyum_bot, maka:

SALAH: @senyum_bot BENAR: @senyum\_bot

Selanjutnya, untuk mengirim teks ke bot maka tinggal digabungkan sesuai syntax di atas:

    var pesan = "Halo *Bang!*";
    return tg.kirimPesan(IDUser, pesan, 'markdown')

Untuk mengecualikan karakter (escape), gunakanlah backslash \

Kode Escape

Untuk membersihkan karakter spesial dari markdown, buat sebuah fungsi:

function clearMarkdown(s) {
    return s
    .replace(/_/g, "\\_")
    .replace(/\*/g, "\\*")
    .replace(/\[/g, "\\[")
    .replace(/`/g, "\\`");
  }

Atau bisa menggunakan Lib versi 2 :

tg.util.clearMarkdown(s)

Contohnya:

pesan = "Cek pulsa tekan *123#";
hasil = tg.util.clearMarkdown(pesan);

Maka hasilnya adalah: Cek pulsa tekan \*123#

Kerumitan Markdown

Meski sekilas terlihat mudah, tapi pas kena kasus-kasus karakter khusus akan menjadi lebih rumit.

Contohnya ingin menuliskan seperti ini: 2*2=4 (pake tebal)

Maka penulisannya menjadi seperti ini *2*\**2=4*

Ada berapa tanda bintang? Dan posisinya dimana saja? Yang mana yang harus di escape? Rumit kan rasanya.

Bedakan juga parse mode pada user bot / telegram client apps dengan Bot API. Pada user bot atau telegram client app, menggunakan karakter double (**tebal**, __miring__), tapi tidak konsisten selalu double ada yang single juga.

"Yuk Belajar"

HTML

Mode HTML meski penulisannya agak rumit dan lebih panjang, namun saat ini menjadi mode teraman jika diterapkan.

Tidak semua tag HTML bisa dipergunakan, hanya tag-tag tertentu. Jadi jangan mengharap bisa tabel, garis horisontal,atau tag-tag pengayaan HTML lainnya.

Tag yang disupport adalah:

Tebal

<b>Tebal</b>,  <strong>juga tebal</strong>

Miring

<i>Miring</i>, <em>juga miring</em>

Garis bawah

<u>Garis bawah</u>, <ins>juga garis bawah</ins>
Coret
<s>strikethrough</s>, <strike>strikethrough</strike>, <del>strikethrough</del>

Gabungan Tebal Miring Tebal Miring Coret Garis Bawah Miring Tebal dan Tebal Saja

Gabungan <b><i>Tebal Miring <s>Tebal Miring Coret</s> <u>Garis Bawah Miring Tebal</u></i> dan Tebal Saja</b>

Escape HTML

Untuk escape atau pengecualian karakter pada HTML, bisa diubah dengan menggunakan karakter khusus yang berlaku juga pada HTML web.

Yakni:

< diganti &lt; 
> diganti &gt; 
& diganti dengan &amp;

Selain itu bisa juga petik “ diganti dengan &quot;

Hints Semua karakter khusus HTML (HTML Entity) diawali # dapat diproses.

Misalnya untuk menulis © bisa dengan &#169;

Referensi: HTML Entity

Kode Escape

Buat fungsi untuk membersihkan:

function clearHTML(s) {
    return s
    .replace(/&/g, "&amp;")
    .replace(/</g, "&lt;")
    .replace(/>/g, "&gt;");
  }

Atau bisa menggunakan Lib versi 2 :

tg.util.clearHTML(s)

Contohnya:

pesan = "Jika x < y, maka x itu kecil.";
hasil = tg.util.clearHTML(pesan);

Maka hasilnya adalah: Jika x &lt; y, maka x itu kecil.

"Yuk Belajar"

Untuk membuat mention berdasarkan ID, format yang digunakan adalah:

tg://user?id=<user_id>

Contoh penggunaannya

Markdown

[mention bangHasan](tg://user?id=213567634)

HTML

<a href="tg://user?id=213567634">mention inline ke bangHasan</a>

Live Parse

"Yuk Belajar"

Mari kita buat coding buat test-test ya.

Polosan

Ini sudah pernah kita bahas saat belajar custom command dan regex ya, yakni code echo. Intinya bot hanya mengirimkan pesan saja.

Dikutip ulang :

// membuat custom echo
var pola = /^!echo (.+)/i;
if ( cocok = pola.exec(msg.text) ){
    return tg.sendMsg(msg, cocok[1]);
}

Test dengan regex simple saja di atas ya, tidak multi baris. Kalau mau multi baris, bisa pelajari ulang custom command dan regex.

Atau jika sudah punya kode yang multibaris juga biarkan saja, gak perlu diotak atik lagi.

Markdown

Kode nya masih serupa, hanya perlu penyesuaian sedikit dan ditambahkan fitur escape:

// membuat custom echo
var pola = /^!markdown (.+)/i;
if ( cocok = pola.exec(msg.text) ){
    var pesan = cocok[1];
    return tg.sendMsg(msg, pesan, 'markdown');
}

HTML

Demikian juga untuk live test parse mode HTML kali ini :

// membuat custom echo
var pola = /^!html (.+)/i;
if ( cocok = pola.exec(msg.text) ){
    var pesan = cocok[1];
    return tg.sendMsg(msg, pesan, 'html');
}

Rekomendasi

"Yuk Belajar"

  • Jika mengaktifkan parse mode, baik markdown atau HTML. Selalu pakai fungsi escape dulu!
  • Fungsi escape ini sangat penting, karena bisa aja teks, nama user, nama channel, judul grup, atau apapun memiliki karakter spesial dimanapun posisinya berada.
  • Cegah kemungkinan error, user nakal, atau bugs lain dari parse mode dengan fungsi escape.
  • Jika ingin menformat teks, saran terbaik adalah menggunakan parse mode jenis HTML.
  • Jika terjadi error, coba balikkan dulu ke tanpa parse mode (polosan).

Video

Materi ini dapat juga disimak pada video berikut:

Penutup

"Yuk Belajar"

Ini adalah materi penting, terutama bagi yang baru belajar bot Telegram. So jangan dilewati dan pelajari baik-baik yaa..

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