Dokumentasi Fitur Scanner Barcode/QR Code

Hai teman teman pengguna aplikasi bukaOlshop, kali ini admin akan membahas tentang fitur baru di aplikasi bukaOlshop yaitu fitur untuk melakukan scanning barcode dan qr code melalui kode HTML.
Setelah halaman kamera muncul, anda cukup mengarahkan kamera ke barcode yang ingin di scan, dan secara otomatis barcode akan terdeteksi dan langsung mengirim hasil ke form input pada kode HTML anda.

Sebelum menerapkan fitur ini, ada beberapa persyaratan yang harus dipenuhi agar fitur ini dapat berjalan sempurna, yaitu:

  1. APK olshop memiliki versi bulid  59 keatas.
  2. Fitur ini dapat berjalan jika diletakkan pada kostum halaman.
  3. Fitur ini dapat berjalan pada widget HTML dengan syarat widget HTML tersebut menggunakan opsi MATCH_PARENT (jadi jika teman-teman mencoba menggunakan fitur scanner ini melalui widget HTML dengan opsi WRAP_CONTENT, maka fitur ini tidak akan berjalan).

Sebelum memulai tutorial ini, kami ingatkan teman-teman agar teliti dalam memasang fitur ini agar tidak ada error seperti kesalahan sintaks dsb. Pastikan juga teman-teman memahami konsep dasar kode HTML.

1. Tambahkan tombol untuk memunculkan scanner

Langkah pertama yaitu menambahkan tombol pada kode HTML yang digunakan untuk dialog scanner. Tag yang digunakan yaitu tag link atau <a href .

Terdapat 3 jenis scanner yang bisa anda gunakan tergantung kebutuhan anda, yaitu scanner barcode, scanner QR code, dan scanner barcode dan QR Code.

Berikut ini link yang bisa digunakan untuk memanggil scanner:

  1. https://<link olshop>/scan_barcode (Hanya scan barcode)
  2. https://<link olshop>/scan_qr (Hanya scan QR code)
  3. https://<link olshop>/scan_all (Scan semuanya: barcode dan QR code)

Silahkan lihat contoh dibawah:

<a href="https://olshopgue.bukaolshop.site/scan_barcode">
	<button type="button">Scan Barcode</button>
</a>

<br>

<a href="https://olshopgue.bukaolshop.site/scan_qr">
	<button type="button">Scan QR Code</button>
</a>

Ganti <link olshop> dengan link website olshop anda. Ketika tombol diatas diklik, maka akan memunculkan dialog baru yang memunculkan kamera belakang anda untuk memulai melakukan scan.

2. Tambahakan class pada tag input untuk menerima hasil scanner

Setelah dialog scanner muncul dari langkah pertama diatas, langkah selanjutnya yaitu memasukkan data yang diterima scanner ke sebuah input yang ada di HTML. Untuk melakukan hal tersebut, maka anda harus menambahkan {{hasil_scan}} di bagian class, pada komponen input anda. Silahkan lihat contoh dibawah:

<input class="{{hasil_scan}}" type="text" name="catatan" placeholder="Masukkan catatan disini"/>

Data yang diterima scanner, akan di masukkan ke komponen yang memiliki class {{hasil_scan}}.

Note : Jika anda juga ingin menerima hasil dari get kontak dari html, anda cukup perlu menambahkan {{hasil_kontak}} kedalam class input,
contoh : class=”{{hasil_scan}} {{hasil_kontak}}”

Setelah kedua langkah diatas dilakukan, maka bentuk kode HTML full nya dapat dilihat pada contoh dibawah:

<html>

<form method="GET" action="https://olshopgue.bukaolshop.site/produk/ini-judul-produk-828128">

<input type="text" name="catatan" placeholder="Masukkan catatan disini" class="{{hasil_scan}}"/>

<button type="submit">Beli</button>

</form>

<a href="https://olshopgue.bukaolshop.site/scan_barcode">
<button type="button">Ambil Nomor Hp</button>
</a>

</html>

Kode diatas merupakan kode yang digunakan untuk melakukan pemesanan melalui HTML, tutorialnya bisa dilihat di link berikut.