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.

Chapter 1 : Cara Menggunakan fitur scanner

Step 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://olshopku.bukaolshop.site/scan_barcode">
<button type="button">Scan Barcode</button>
</a>

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

<a href="https://olshopku.bukaolshop.site/scan_all">
<button type="button">Scan Barcode dan QR Code</button>
</a>

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

 

Step 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>

Chapter 2 : Cara menggunakan scanner multi input

Jika anda memiliki 2 atau lebih kolom input, dan anda ingin semua kolom input tersebut dapat mengambil data dari scanner, anda bisa mengikuti dokumentasi dibawah. Cara ini berguna jika anda memiliki 2 kolom input untuk keperluan bulk transaction atau keperluan lainnya yang membutuhkan kolom input lebih dari satu. Perlu anda perhatikan, scanner multi input ini hanya bisa digunakan pada APK olshop dengan build patch 71.9 keatas.

Untuk membuat scanner multi input, anda hanya perlu menambahkan “_angka” pada teks scan_barcode, scan_qr dan scan_all.

Contoh :

scan_barcode_1

scan_barcode_2

scan_barcode_3

dan seterusnya….

Untuk mendapatkan hasilnya, anda cukup menambahkan tag

{{hasil_scan_1}}

{{hasil_scan_2}}

{{hasil_scan_3}}

dan seterusnya…

Berikut contoh implementasinya:

<html>

<form class="" action="https://olshopgue.olshopku.com/produk/pulsa-telkom-50000-2935225" method="get">

  <input type="text" name="list_catatan"  value="" class="{{hasil_scan_1}}">

  <input type="text" name="list_catatan" value="" class="{{hasil_scan_2}}">

<input type="text" name="list_catatan" value="" class="{{hasil_scan_3}}">

<input type="text" name="list_catatan" value="" class="{{hasil_scan_4}}">


 <input type="submit" name="" value="Beli">
</form>

<a href="https://olshopgue.bukaolshop.site/scan_barcode_1">
<button type="button">Scan barcode 1</button>
</a>

<a href="https://olshopgue.bukaolshop.site/scan_barcode_2">
<button type="button">Scan barcode ke 2</button></a>

<a href="https://olshopgue.bukaolshop.site/scan_barcode_3">
<button type="button">Scan barcode ke 3</button></a>

<a href="https://olshopgue.bukaolshop.site/scan_barcode_4">
<button type="button">Scan barcode ke 4</button>
</a>

</html>

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