Membuat aplikasi QR Scanner & Barcode Scanner App Inventor Kodular

Pada turorial kali ini akan membuat aplikasi yang dapat melakukan scan kode QR dan barcode dengan menggunakan komponen barcode scanner atau QR scanner pada app inventor maupun kodular. Kode QR atau barcode sering kali terlihat menempel pada produk atau barang yang dijual, yang biasanya digunakan untuk menyimpan informasi suatu produk atau barang yang hanya dapat dibaca oleh mesin scanner.

QR-Scanner-&-Barcode-Scanner-App-Inventor-Kodular
QR Scanner & Barcode Scanner App Inventor Kodular

Lantas apa itu kode QR dan barcode?

Kode QR adalah barcode yang dibuat dalam dua dimensi atau dikenal dengan kode matriks. Kode QR memiliki keunggulan lebih bagus dibandingkan dengan barcode, kode QR dapat memuat data secara secara vertical maupun horizontal dan juga memiliki kemampuan untuk memuat data lebih besar dibandingkan dengan barcode.

Barcode adalah kode kecil dua dimensi yang memiliki fungsi serupa dengan kode QR yaitu dapat menyimpan dan memuat informasi namun dengan kapasitas penyimpan data yang kecil.

kamu bisa baca lebih lengkap tentang perbedaan Kode QR dan barcode agar tidak bingung ketika ingin membuat kode QR maupun barcode untuk suatu produk.

Membuat aplikasi QR Scanner dan Barcode Scanner dengan App Inventor atau Kodular

QR Scanner dan Barcode Scanner adalah sebuah alat khusus yang dapat membaca informasi yang tersimpan pada kode QR atau barcode. Namun pada saat ini dengan menggunakan smartphone android pun juga bisa digunakan untuk membaca kode QR dan Barcode dengan bantuan aplikasi scanner.

Lalu bagaimana membuat aplikasi QR scanner dan barcode scanner pada android?

kamu bisa membuat aplikasi tersebut di App Inventor atau Kodular. Di sini saya akan memberikan contoh bagaimana membuat aplikasi QR scanner dan barcode scanner dengan kodular, yang juga terkoneksi dengan penyimpanan database menggunakan firebase.

Petama-tama yang dilakukan adalah

Membuat desain aplikasi QR Scanner & Barcode Scanner App inventor Kodular

Desain aplikasi barcode scanner app inventor kodular
Desain aplikasi barcode scanner app inventor kodular

Desain yang saya buat kali ini cukup sederhana, hanya menggunakan komponen button, komponen barcode scanner dan komponen firebase database. Kamu bisa menemukan komponen barcode scanner pada menu pallet sebelah kiri lalu pilih menu sensor maka kamu akan melihat komponen barcode scanner.

komponen barcode scanner berguna untuk membaca kode QR maupun barcode, kemudian untuk komponen firebase database berguna untuk menyimpan data dari ID pada kode QR maupun barcode.

kamu bisa membuat desain yang lebih bagus dari yang saya contohkan di atas sesuai dengan kreativitas kamu tentunya. Setelah proses desain selesai selanjutnya adalah

Membuat penyimpanan database di firebase

firebase disini digunakan untuk meyimpan data ID pada kode QR dan barcode. Nah pada tutorial kali ini saya akan menyimpan data-data nama bunga mawar beserta gambar dan penjelasannya ke firebase.

silahkan kamu buat database firebasenya terlebih dahulu dan menghubungkan komponennya firebase dengan memasukkan firebase URL dan firebase Token API, ini sudah saya jelaskan pada postingan CRUD fierbase app inventor, ikuti saja proses pada postingan tersebut sampai pada tahap proses menghubungkan aplikasi dengan database firebase.

Setelah selesai membuat databasenya kamu bisa memasukkan datanya ke firebase database secara manual. Pertama masukkan nama aplikasinya terlebih dahulu, kamu bisa lihat nama aplikasi pada properti di screen1 pada halaman desain. Berikut di bawah ini adalah cara menambahkan datanya.

menyimpan data ke database firebase
menyimpan data ke database firebase

Berikut di bawah ini adalah data-datanya kamu bisa copy paste.

Nama : AA001 Nilai : "\"Wild Rose (BungaMawar Liar)|https:\/\/workamerica.co\/wp-content\/uploads\/2019\/07\/wild-rose.jpg?ezimgfmt=ng:webp\/ngcb5|sesuai namanya, bunga mawar ini tumbuh liar di alam bebas dan sudah ada sejak zaman dahulu. Bunga mawar liar ini sangat tahan hama dan tidak mudah mati.\""

Nama : AA002 Nilai : "\"Old Garden Rose (Bunga Mawar Taman Kuno)|https:\/\/workamerica.co\/wp-content\/uploads\/2019\/07\/Mawar-rose-gold.jpg?ezimgfmt=ng:webp\/ngcb5|Kelompok bunga mawar taman kuno dikenal sebelum pertengahan abad ke-18 dan dihasilkan dari persilangan. Ciri khas mawar yang tergolong old golden rose adalah bentuknya rumit dan cantik, serta memiliki wangi yang semerbak.\""

Nama : AA003 Nilai : "\"Mawar Musk|https:\/\/workamerica.co\/wp-content\/uploads\/2019\/07\/double-musk.jpg?ezimgfmt=ng:webp\/ngcb5|Mawar ini bernama latin Rosa Moschata yang tergolong tanaman merambat dengan panjang bisa mencapai 3-10 meter. Bunga mawar musk mekar di akhir musim semi hingga musim gugur. Saat mekar, bunganya akan mengeluarkan musk yang sangat kuat sehingga bisa tercium dari jarak jauh.\""

Nama : AA004 Nilai : "\"Mawar Kubis|https:\/\/workamerica.co\/wp-content\/uploads\/2019\/08\/mawar-kubiss.jpg?ezimgfmt=ng:webp\/ngcb5|Diperkenalkan pertama kali oleh seorang pembudi daya mawar dari Belanda pada abad ke-17, mawar kubis merupakan mawar hibrida atau hasil persilangan. Bunga bernama latin Rosa centifolia ini memiliki ciri khas berupa mahkota yang besar dan bertumpuk seperti kubis.\""

Catatan: masukkan nama dan nilainya satu persatu setiap baris.

Membuat kode QR

selanjutnya kamu membuat kode QR untuk masing-masing id “AA001”, “AA002”, “AA003”, “AA004” pada situs ini. Kamu tinggal menuliskan id tersebut ke kolom teks, lalu download gambar kode QRnya.

Membuat blok program aplikasi QR Scanner & Barcode Scanner App Inventor Kodular

block program barcode scanner
block program barcode scanner

blok program yang saya buat tidak lah banyak hanya sedikit saja, karena hanya membaca ID pada kode QR atau barcode kemudian memanggil data di database firebase berdasarkan ID yang didapat dari kode QR lalu menampilkannya ke label text.

Buil aplikasi menjadi apk

apabila proses pengkodean selesai selanjutnya adalah build aplikasi menjadi apk, untuk menguji apakah aplikasi yang dibuat dapat berfungsi dengan baik atau tidak.

berikut di bawah ini adalah demo aplikasi QR Scanner dan Barcode Scanner yang dibuat dengan kodular.

dokumentasi aplikasi barcode scanner dan QR scanner

Baiklah sampai sini saja tutorialnya apabila ada yang ingin ditanyakan kamu dapat tulis di komentar di bawah ini.

Leave a Reply

Your email address will not be published. Required fields are marked *