WhatsApp Text Formatting Pada PHP Part 1

Pada pengembangan aplikasi Dumas Presisi, sebuah projek aplikasi yang saya handle, pengimplementasian komunikasi WhatsApp melalui Website adalah salah satu fitur yang sudah lama kami ingin implementasikan. Namun karena kurang luasnya pengalaman dan penguasaan ilmu yang kami miliki, setelah 2 tahun projek ini di-launching oleh Kapolri pada hari Rabu, 24 Februari 2021, kami baru bisa mengimplementasikan fitur ini sebagai sarana konsultasi Masyarakat.

Proses pengintegrasian kami rasa cukup rumit karena adanya beberapa gateway yang harus kami untuk sarana analisis dan debugging. Jika dihitung berdasarkan hari, kami baru bisa mengimplementasikan fitur ini setelah 1 bulan pengembangan.

Prototyping

#

Dibantu oleh TailwindCSS dan DaisyUI, kami bisa mengimplementasikan mockup fitur ini secara mudah. Apalagi dengan pembaharuan DaisyUI v2.51.4, penambahan fitur Chat Bubble sangat membantu kecepatan pembuatan mockup ini. Berikut adalah screenshot mockup pertama kami:

Sangat simpel bukan? Belum ada yang istimewa saat ini. Sebagai informasi tambahan, fitur ini dipresentasikan keesokan harinya kepada pimpinan. Tentunya kami berharap adanya masukkan dan kritik dari pimpinan terhadap fitur yang kami bangun.

Semua berjalan lancar… sampai hal yang tidak kami duga pun terjadi.

Permasalahan

#

Issue yang sama sekali tidak kami duga karena tidak muncul pada saat testing, muncul pada saat presentasi. Tidak ada yang “terlukai” oleh bug ini, namun kami harus menyelesaikannya secepat mungkin.

“Apa sih masalahnya sehingga kami merasa issue tersebut harus bisa diselesaikan? Toh kan cuma plain text yang di-render?”

Haha, pada permukaan, betul yang kami render ini adalah plain text, namun jika plain text-nya terlihat seperti ini, apakah enak dipandang mata?

Hotline WhatsApp Dumas Presisi adalah sama seperti nomor WhatsApp pada umumnya, kami menerima keluhan, saran, bahkan broadcast yang secara random dikirimkan oleh masyarakat. Jadi, seluruh pesan yang dikirimkan kepada Hotline kami, akan kami terima apa adanya juga pada aplikasi.

Setelah membaca sekilas pesan di atas, kami memetakan ada 4 permasalahan:

1. Line break
2. Formatting
3. Emoji
4. Link

Mari kita selesaikan permasalahan ini satu per satu 🔥.

1. Line Break yang tidak ter-render

#

Di PHP, untuk pesan plain text seperti ini, mudah bagi kita para pengembang untuk mengubah New Line menjadi Break Line yang bisa di-render HTML. Fungsi tersebut adalah nl2br(), yang merupakan kependekan dari New line to <br/>.

Pertama, saya membuat sebuah Service yang bernamakan WhatsAppService, kurang lebih, seperti ini file-nya:

<?php

namespace App\Services;

class WhatsAppService
{
    public static function formatMessage(string $raw_message): string
    {
        return $raw_message;
    }
}

Service di atas masih belum bisa mengubah New Line menjadi <br/>, karena itu kita gunakan fungsi nl2br supaya pesan yang kita terima bisa terformat dengan baik:

<?php

namespace App\Services;

class WhatsAppService
{
    public static function format_message(string $raw_message): string
    {
        $nl2br_message = nl2br($raw_message);

        return $nl2br_message;
    }
}

Setelah menerapkan fungsi nl2br, berikut adalah hasil dari pesan yang sudah diformat:

2. Formatting yang tidak ter-render secara langsung

#

Dilansir dari halaman FAQ WhatsApp terkait dengan Text Formatting, kami mendapatkan 4 macam formatting yang harus diimplementasikan:

• Bold, direpresentasikan dengan string yang diapit oleh bintang ( *string* )
• Italic, direpresentasikan dengan string yang diapit oleh garis bawah ( _string_ )
• Strikethrough, direpresentasikan dengan string yang diapit oleh tilde ( ~string~ )
• Monospace, direpresentasikan dengan string yang diapit oleh tiga backtick ( ```string``` )

Saya berpikir, bagaimana caranya untuk me-replace simbol-simbol itu dengan tag HTMl ya? Beberapa metode terlintas di otak saya.

Pertama, saya bisa menggunakan str_replace() untuk mengubah simbol menjadi tag HTML. Namun saya juga ingat bahwa tag HTML haruslah ditutup. Berdasarkan fakta tersebut, saya tidak bisa semerta-merta menggunakan str_replace().

Kedua, saya bisa menggunakan preg_match() untuk mengambil seluruh simbol, lalu mengubahnya menjadi tag HTML. Sama seperti kasus di atas, tag HTML yang di-replace harus juga ditutup kembali. Selain itu, masalah yang akan dihadapi pada saat saya menggunakan preg_match() ialah fungsi tersebut hanya dapat me-return int yang mengindikasikan berapa banyak simbol yang ditemukan pada sebuah pesan.

Approach yang saya lakukan menggunakan RegEx sudah benar, cuma saja saya hanya perlu menemukan fungsi yang tepat. Setelah berdiri sejenak, menyeduh kopi, dan meminumnya, saya menemukan sebuah solusi yang mujarab, preg_replace(). Long life coffee, our source of motivation ☕️☕️☕️.

preg_replace() adalah sebuah fungsi yang mencari sebuah pola berdasarkan bahasa ekspresi regular yang kita berikan, mendapatkan kata-kata berdasarkan pola yang kita berikan, lalu mengubahnya sesuai dengan apa yang kita inginkan.

Ekspresi Regular atau yang biasa sering kita sebut sebagai RegEx adalah bahasa ter-alien yang pernah saya pelajari. Bukan hanya sulit dipahami, namun juga kita harus memahami beberapa aturan baku. Saya pribadi baru bisa memahami bagaimana RegEx bekerja setelah belajar intensif selama 1 bulan.

Penasaran bagaimana saya mengimplementasikannya? Kita lanjut ke Part 2 ya! Sampai jumpa di sana 👋.

Thumbnail oleh Asterfolio dari Unsplash