QRCode Berbasis Teks

QR Code(Quick Response Code) merupakan barcode yang berbentuk gambar yang memiliki informasi tentang data yang dibawanya. Bagi User Interface(UI) yang berdasarkan Graphical User Interface(GUI), barcode yang ditampilkan dilayar atau dicetak ini terlihat wajar saja. Lalu bagaimana dengan penguna Text-based user interface(TUI) seperti Lynx? Apakah bisa menggunakan barcode seperti ini?

Grenco

Barcode memang direpesentasikan secara optical dalam artian dibaca sebagai sebuah gambar. Bukan berarti barcode itu harus berbentuk image(seperti bitmap atau vector). Ia juga bisa dibuat dengan teks.

Contohnya situs seperti Grenco.de. Situs itu akan membuatkan QR Code dalam bentuk teks atau kumpulan huruf saja. Menarik bukan?

QR Code yang dihasilkan saat dibuka dengan peramban web akan terlihat seperti gambar biasa. Namun, begitu kita lihat souce code HTML-nya. Kita tidak akan menemukan gambar apapun, hanya teks yang ada.

Grenco sendiri hanya sebuah aplikasi web yang membungkus pustaka C bernama libgrencode menggunakan python.

HtmlParser

Untuk melihat QR Code ini memang text. Kita coba buat console aplikasi dengan Grenco.

Hasil dari Grenco akan ditampilkan ke layar lewat Console.WriteLine. Kalau kita melihat hasilnya akan seperti di bawah. Mirip seperti gambar biasa bukan? Tentu kita juga mesti mencoba apakah yang ditampilkan bisa dibaca oleh barcode reader.

Pada tulisan tentang ZXing di CodePolitan(QR Code dengan ZXing.Net) di sana ada kode untuk membaca barcode lewat gambar. Jadi kita akan gunakan aplikasi itu, atau bisa juga pakai smartphone. Saat diuji, maka hasil dari yang muncul dilayar tersebut akan valid dan bisa dibaca datanya.

Berikut ini data yang didapatkan dari Grenco.

█████████████████████████████████
█████████████████████████████████
████ ▄▄▄▄▄ █ ▄▄ █▀▄▄ █ ▄▄▄▄▄ ████
████ █   █ ██▄█▀▀▄▄▀██ █   █ ████
████ █▄▄▄█ █ ▀▀▄ ▀ █▀█ █▄▄▄█ ████
████▄▄▄▄▄▄▄█ ▀▄█▄▀▄▀▄█▄▄▄▄▄▄▄████
████▄▄▄▀▀ ▄█ ▄█▄ ▄█  ▄  ▄▀▀▄ ████
████▀█▀█ ▀▄▄▄▄ ▀ ▄   ▀█▀▀ ▄▀▄████
█████▄▀ ▄▄▄  ▄ ██  ▀ ▄  █ ▀█ ████
████▄▄▀▀▄▀▄▀▀▀▄▄█▀█▄▀▄▄▄█ ▄█▄████
████▄▄██▄▄▄▄▀▀▀▄ ▄█▄ ▄▄▄  ▀▄█████
████ ▄▄▄▄▄ █▀ ▄▀ ▄ ▀ █▄█ ███ ████
████ █   █ ██████  ▄  ▄  ▄█ ▄████
████ █▄▄▄█ █ █▄▄█▀█   ▄█  ▄▄▄████
████▄▄▄▄▄▄▄█▄▄▄▄▄▄██▄███▄▄██▄████
█████████████████████████████████
█████████████████████████████████

.NET HtmlParser

Karena Grenco adalah aplikasi web maka kita perlu mengambil HTML-nya untuk diolah untuk mendapatkan hanya QR Code-nya saja. Untuk itu kita gunakan Html Agility Pack(HAP) lewat NuGet(HAP package). Kodenya kita bungkus jadi sebuah fungsi QrcodeToText.

< VB.Net >

< C# >

ZXing

Kurang asik jika kita harus online untuk membuat QRCode berbasis teks. Sekarang kita akan coba membuat versi lokal a.k.a offline.

Kita bisa membuat QR Code dengan ZXing seperti tulisan di CodePolitan. Yang dihasilkan oleh library adalah gambar atau lebih tepatnya Bitmap. Untuk itu kita perlu kode yang dapat mengubah gambar tersebut menjadi teks yang bisa kita tampilkan dalam console aplikasi. Dan tentunya QR Code-nya harus tetap bisa dibaca seperti pada gambar dibawah.

Hasil image dari ZXing menjadi text.

██████████████████████████████
██████████████████████████████
████▀▀▀▀▀▀▀██▀█▀▀█▀▀▀▀▀▀▀█████
████ █▀▀▀█ █  █▄▀█ █▀▀▀█ █████
████ █   █ █▀▄█▄▀█ █   █ █████
████ ▀▀▀▀▀ █ █▀▄ █ ▀▀▀▀▀ █████
████▀▀█▀██▀▀▄  ▄▄█▀▀▀█▀▀██████
████▄▀ ▄ ▄▀▀▀ ▄█▀  ▀█▀▀▄ █████
█████ █ █ ▀▀▄▀█▄▀█▄▄▄▄█▄▄█████
████▀▀▀▀▀▀▀█ ▀▄▄█▀▄▀ ▀ ▀██████
████ █▀▀▀█ ██▄▄ ▄▀█▄███▀▄█████
████ █   █ █▄███▀██▄ ▄ ▄ █████
████ ▀▀▀▀▀ █ ▄██ ▄▀▀█▀█▀██████
██████████████████████████████
██████████████████████████████
██████████████████████████████

Caranya sederhana, pertama kita perlu membuat QR Code. Untuk itu kita gunakan ZXing lewat NuGet(ZXing.NET package). Setelah itu gambarnya kita proses menjadi teks dengan cara dibaca per-pixel-nya. Hasil pembacaan itu kemudian di-map ke karakter yang sesuai. Mudah bukan?

< VB.Net >

< C# >

Penutup

QR Code dengan GUI sudah biasa. Dalam tulisan ini kita memaparkan cara yang tidak biasa dilakukan terhadap barcode yaitu menampilkannya di Console, Terminal atau aplikasi berbasis teks yang lain dengan mengubah tiap piksel gambar barcode menjadi teks.

Referensi

• Grenco.de
• GitHub: libgrencode
• GitHub: ZXing.Net
• Html Agility Pack(HAP)
• Wikipedia: Barcode
• Wikipedia: QR Code (Quick Response Code)
• CodePolitan: QR Code dengan ZXing.Net

Perhatian! Code yang ditampilkan dalam tulisan ini merupakan ilustrasi dari yang ingin dipaparkan dan bukan production ready code. Sudah banyak kejadian karena asal meng-copy-and-paste tanpa mengerti code yang diambil itu ke dalam production. Selain itu perlu ada tambahan code dan test sebelum siap untuk digunakan secara utuh.