Kamu mungkin berada di salah satu situasi. Entah kamu telah mewarisi aplikasi Cordova yang masih penting bagi bisnis, atau kamu menjaga aplikasi hybrid stabil hidup sementara tim perlahan-lahan bergeser ke alat-alat yang lebih baru. Kemudian permintaan produk tiba: scan label barang, tiket, paket, atau tag rak dengan kamera ponsel.
That’s where scanner barcode Cordova pekerjaan menjadi menarik. Demo dasar mudah. Integrasi produksi tidak. Bagian sulit adalah memilih plugin yang sesuai dengan format barcode, mengonfigurasi izin native dengan bersih, dan menghadapi kekacauan platform yang hanya muncul pada perangkat nyata. Jika aplikasi kamu juga menyentuh operasi lapangan atau aliran inventori, fitur scanning biasanya terhubung ke kekhawatiran operasional yang lebih luas seperti mengelola komponen IT kritis, di mana aplikasi mobile menjadi bagian dari aliran aset dan layanan yang lebih besar.
Cordova masih stack nyata dalam pekerjaan perawatan bisnis. Pada pertengahan 2010-an, scanning barcode di Cordova telah bergerak jauh dari contoh mainan ke aplikasi hybrid bisnis yang dibangun untuk Android dan terhubung ke layanan backend, termasuk aliran yang terdokumentasi menggunakan cordova create, cordova platform add android, dan kode yang dihasilkan barcodeScanner-debug.apk di contoh pembangunan aplikasi nyata dari Petunjuk Pemindaian Barcode Cordova dari SitePoint. Jika tim kamu juga mempertimbangkan pilihan arsitektur jangka panjang, perbandingan ini Aplikasi Nativ vs Aplikasi Web Membantu menjelaskan mengapa aplikasi hybrid masih muncul di jalur pengiriman mobile yang serius.
Table of Contents
- Mengapa Menambahkan Scanner Barcode ke Aplikasi Cordova Anda
- Mengilih Plugin Scanner Barcode Cordova Anda
- Penginstalan dan Konfigurasi Platform
- Mengimplementasikan Scanner di Aplikasi Anda Code
- Tes dan Mengatasi Kesalahan Umum
- Tips Kinerja dan Migrasi ke Capacitor
Mengapa Menambahkan Scanner Barcode ke Aplikasi Cordova Anda
A scanner mengubah apa yang sebuah aplikasi Cordova dapat lakukan di lapangan. Sebaliknya dari meminta pengguna untuk mengetikkan serial, ID pesanan, atau kode produk, Anda membiarkan kamera menjadi perangkat input. Itu mengurangi gesekan, tetapi secara kritis, itu mengurangi jumlah cara pengguna dapat memasukkan nilai yang salah.
Dalam prakteknya, pemindaian kode barcode muncul di mana aplikasi mobile bertemu dengan operasi nyata. Penerimaan gudang, pencarian retail, validasi bagian layanan lapangan, pendaftaran pengunjung, dan pengawasan aset internal semua mendapat manfaat dari itu. Scanner juga mengubah harapan pengguna. Setelah kamera tersedia, pengguna berhenti menoleransi entri manual code kecuali ada fallback yang jelas.
Cordova masih relevan dalam mode perawatan
Banyak tim berbicara tentang Cordova seperti itu hilang. Tidak. Itu berusia dan menjadi bagian dari portofolio perusahaan yang berfokus pada perawatan, di mana mengganti aplikasi yang berjalan lebih sulit daripada memperluasnya. Jika aplikasi sudah menghandle autentikasi, sinkronisasi, formulir, dan penyimpanan offline, menambahkan scanner sering kali lebih berisiko rendah daripada membangun produk dari awal.
Aturan praktis: Jangan anggap permintaan pemindaian sebagai trigger perubahan kecuali aplikasi lainnya sudah gagal dalam operasi tim Anda.
Cordova juga mendapatkan tempatnya karena plugin mengekspos kemampuan perangkat native dalam cara web code dapat menggunakan. Itu mengapa pemindaian kode barcode menjadi sangat umum di aplikasi mobile hybrid. Itu sesuai dengan pola yang dibangun Cordova: letakkan kemampuan native di belakang JavaScript API dan biarkan aplikasi tetap berbasis web.
Nilainya ada di alur kerja, bukan di demo
A scanner button yang mengembalikan teks adalah bagian yang mudah. Tugas utama adalah segala sesuatu di sekitarnya:
- Pemilihan simbologi yang didukung: Aplikasi Anda mungkin hanya memerlukan QR, atau mungkin memerlukan kode retail dan logistik juga.
- Pengelolaan izin dengan bersih: Jika akses kamera gagal sekali, pengguna sering menganggap fitur itu rusak.
- Desain aksi setelah scan: Pencarian, validasi, navigasi, dan pengelolaan duplikat lebih penting daripada antarmuka kamera.
- Perencanaan modernisasi: Jika tim Anda sedang bergerak menuju Capacitor, Anda memerlukan pendekatan yang tidak menahan fitur di asumsi Cordova saja.
Titik terakhir itu penting. Banyak tim berhasil dengan integrasi Cordova awal, lalu mengalami kesulitan selama migrasi karena model rendering native berubah di bawah plugin. Scanner masih berfungsi. Preview hanya tidak menampilkan seperti yang diharapkan.
Pemilihan Plugin Barcode Scanner Cordova Anda
Sebelum menulis aplikasi code, putuskan apa yang Anda optimalkan. Beberapa tim memerlukan dukungan barcode yang luas. Lainnya hanya memerlukan overlay kamera untuk alur QR. Memilih plugin yang salah dari awal menciptakan ulang pekerjaan nanti, terutama ketika produk meminta satu format barcode lagi setelah peluncuran.
Plugin yang paling banyak pengembang akan mengenalinya adalah cordova-plugin-barcodescannerPaketnya npm mendokumentasikan itu scan(success, fail) API dan dukungan untuk simbolologi umum termasuk QR_CODE, DATA_MATRIX, UPC_A, EAN_13, CODE_128, PDF_417, dan AZTEC, sehingga plugin ini cocok digunakan dalam skenario retail dan logistik, bukan hanya skenario berbasis QR, seperti yang ditunjukkan dalam plugin package documentation on npm.
Untuk tim yang sedang mengevaluasi strategi plugin lebih luas, ringkasan ini tentang Apa yang Perlu Diketahui tentang Plugin Capacitor bermanfaat karena menjelaskan perbedaan antara asumsi plugin Cordova yang lebih tua dan model jembatan native yang lebih baru.
Yang perlu dipertimbangkan sebelum menginstal apa pun
Tidak mulai dengan popularitas sendiri. Mulai dengan pekerjaan scan Anda.
If the app must read multiple barcode families across different operational contexts, broad symbology support matters more than a minimal API. If the app only needs QR check-in, you can accept a narrower tool if it gives you a simpler camera experience. What junior developers often miss is that scanner work is less about “can it scan” and more about “can it scan the exact labels used by operations without awkward workarounds.”
Apa yang harus dipertimbangkan dalam memilih plugin barcode:
- Koverasi kode barcode: Pastikan format yang tepat digunakan dalam produksi.
- Harapan platform: Tentukan apa yang tim masih dukung hari ini, bukan apa yang plugin dukung secara historis.
- Model UI: Beberapa plugin membuka alur scanner native. Lainnya mengharapkan pendekatan pratinjau terintegrasi.
- Toleransi migrasi: Tanyakan apakah plugin ini akan menjadi menyakitkan jika aplikasi berpindah ke Capacitor nanti.
Aplikasi yang bekerja dalam demo tetapi bertempur dengan tata letak, siklus hidup, atau jalur migrasi aplikasi Anda biasanya adalah plugin yang salah.
Perbandingan plugin
| Fitur | phonegap-plugin-barcodescanner | cordova-plugin-qrscanner |
|---|---|---|
| Pengguna Utama | Skanning Barcode yang Lebar dengan Format yang Bervariasi | Alur Skanning QR yang Fokus |
| API gaya | Polanya Callback yang Familiar di Banyak Proyek Cordova Legacy | Pilihan yang Sering Dipilih untuk Penggunaan Preview Kamera Hidup |
| Lingkup Format Barcode | Lebih Sesuai Ketika Produk Memerlukan Lebih dari QR | Lebih Sesuai Ketika QR Hanya Persyaratan yang Harus Dipenuhi |
| Migrasi Risiko | Dapat berfungsi, tetapi asumsi yang lebih tua mungkin muncul selama migrasi jembatan modern | Metode yang berfokus pada pratinjau dapat mengekspos masalah rendering lebih cepat |
| Pilihan Terbaik | Kerja sama dengan barcode retail, logistik, asset, dan campuran | Periksa masuk, URL, autentikasi, dan aliran QR saja |
Table tersebut mencerminkan kenyamanan yang lebih praktis, bukan skor. Jika Anda memerlukan simbolologi retail dan logistik, kategori plugin yang lebih luas biasanya merupakan pilihan yang lebih aman. Jika Anda hanya memindai QR dan ingin pengalaman pratinjau yang lebih terkendali, jalur yang lebih spesifik dapat lebih ringan
Kesalahan yang paling sering saya lihat adalah memilih alat yang berfokus pada QR karena rilis pertama hanya memerlukan QR, kemudian memaksa untuk berfungsi dengan UPC atau Code 128 di kemudian hari. Jika ada kemungkinan pengguna bisnis Anda akan memindai label dari printer, rak, wadah, atau dokumen pengiriman, pilihlah untuk masa depan sekarang
Pemasangan dan Konfigurasi Platform
Integrasi biasanya gagal sebelum skanner pertama kali digunakan, bukan setelahnya. Banyak kegagalan berasal dari pergeseran konfigurasi antara harapan JavaScript dan konfigurasi platform native. Tatalah bagian ini seperti daftar checklist, bukan instalasi cepat
Aliran implementasi yang solid dimulai dengan menambahkan plugin atau SDK, membuat konteks tangkap, mempersempit simbolologi ke kode yang digunakan dalam produksi, mengonfigurasi UI, dan hanya kemudian mendaftarkan listener skanner. Urutan tersebut disebutkan dalam panduan Cordova Scandit untuk SparkScan, dan sesuai dengan cara integrasi skanner profesional tetap dapat dipelihara dalam aplikasi hybrid, seperti yang dijelaskan dalam Petunjuk pengembang Scandit untuk skanner kode barcode CordovaJika aplikasi Anda masih sangat hybrid pada tingkat arsitektur, panduan ini untuk Pengembangan aplikasi hybrid Cordova adalah teman yang sangat membantu.
Mulai dengan aliran integrasi
Fitur scanner akan lebih baik jika Anda menentukan item berikut dahulu:
- Apakah aplikasi harus menerima jenis kode barcode mana saja.
- Apakah skanning adalah aksi layar penuh atau bagian dari alur kerja yang diintegrasikan.
- Apa yang aplikasi harus lakukan setelah membaca dengan sukses.
- Apakah ada fallback jika kamera tidak dapat digunakan.
Yang menjaga plugin instalasi terikat dengan alur kerja nyata bukan kemampuan perangkat umum.
Cordova instalasi langkah-langkah
Untuk setup Cordova tradisional menggunakan plugin pemindai kode batang umum, titik awal adalah perintah instalasi standar yang dokumentasi oleh paket:
cordova plugin add cordova-plugin-barcodescannerSebuah urutan setup proyek biasa terlihat seperti ini:
cordova create barcodeScannerApp
cd barcodeScannerApp
cordova platform add android
cordova platform add ios
cordova plugin add cordova-plugin-barcodescanner
cordova build android
cordova build iosUrutan itu sederhana, tapi jangan berhenti di sana. Bangun segera setelah instalasi plugin untuk menangkap masalah dependensi native sebelum Anda menghubungkan UI code. Jika bangun gagal, selesaikan itu terlebih dahulu.
Konfigurasi native yang biasanya rusak pertama
Pada iOS, akses kamera harus dideklarasikan dengan benar di pengaturan proyek native. Jika deskripsi penggunaan izin kosong atau kabur, pemindai tidak akan berperilaku seperti fitur yang berfungsi kepada pengguna. Tambahkan deskripsi privasi kamera yang jelas di Info.plist yang menjelaskan mengapa aplikasi membutuhkan kamera.
Pada Pada, review manifest entries and plugin-related permissions after install. The plugin may add what it needs, but older projects often contain accumulated config changes, custom Gradle settings, or plugin overlap that causes build warnings or runtime confusion. Don’t assume the manifest is clean just because the plugin installed successfully.
Gunakan daftar checklist ini:
- Periksa versi platform: Proyek Cordova yang lebih tua sering membawa paket platform yang ketinggalan zaman.
- Ulangi permintaan izin: Penulisan dan waktu sangat penting untuk kepercayaan pengguna.
- Uji pada perangkat nyata awal: Emulator tidak akan memberitahu Anda cukup tentang perilaku kamera.
- Jaga lingkup scanner sempit: Aktifkan hanya jenis code yang diterima oleh alur kerja Anda.
Jika scanner Anda hanya memerlukan satu atau dua format, konfigurasi untuk format tersebut terlebih dahulu. Penginderaan yang luas terdengar fleksibel, tetapi sering membuat debugging lebih lambat karena setiap label yang tidak dapat dibaca menjadi ambigu.
Untuk pengembang junior, pelajaran utama adalah ini: instalasi bukan hanya perintah terminal. Ini adalah alihan proyek asli. Jika Android dan iOS tidak dikonfigurasi secara sengaja, lapisan JavaScript tidak akan menyelamatkan Anda.
Mengimplementasikan Scanner di Aplikasi Anda Code
Setelah plugin diinstal dan aplikasi dibangun, jaga implementasi pertama sederhana. Letakkan aksi scan di belakang tombol, log hasil penuh, dan buktikan alur callback berfungsi sebelum mendesain UI yang rapi.
Polig scanner Cordova yang umum menggunakan metode plugin’s scan(success, fail) Metode callback itu sudah kuno, tapi masih dapat diandalkan di kode legasi dan mudah dibungkus nanti jika aplikasi sudah berpindah ke promise atau abstraksi TypeScript. Jika Anda ingin memiliki model mental yang lebih jelas bagaimana web code memanggil native code di proyek-proyek ini, penjelasan bagaimana code menghubungkan web dan native code bagaimana Capacitor menghubungkan web dan native code membantu, bahkan jika Anda masih sedang mengkode dalam Cordova hari ini.
Contoh JavaScript Biasa
Contoh ini melakukan tiga hal yang berguna. Ini menunggu
<button id="scan-button">Scan barcode</button>
<div id="scan-result"></div>document.addEventListener('deviceready', function () {
var button = document.getElementById('scan-button');
var resultEl = document.getElementById('scan-result');
button.addEventListener('click', function () {
cordova.plugins.barcodeScanner.scan(
function (result) {
if (result.cancelled) {
resultEl.textContent = 'Scan cancelled';
return;
}
resultEl.textContent =
'Text: ' + result.text +
' | Format: ' + result.format;
},
function (error) {
resultEl.textContent = 'Scan failed: ' + error;
}
);
});
});Menggunakan tiga fungsi yang berguna. Menunggu deviceready, binds scanning to an intentional user action, and handles both success and failure explicitly. Don’t skip the cancelled case. Users back out of camera flows all the time.
TypeScript contoh
Jika proyek Anda menggunakan TypeScript, definisikan bentuk hasil sendiri sehingga bagian lain dari aplikasi dapat mengonsumsinya dengan jelas:
interface BarcodeScanResult {
text: string;
format: string;
cancelled: boolean;
}
function scanBarcode(): void {
cordova.plugins.barcodeScanner.scan(
(result: BarcodeScanResult) => {
if (result.cancelled) {
renderStatus('Scan cancelled');
return;
}
handleScannedCode(result);
},
(error: unknown) => {
renderStatus(`Scan failed: ${String(error)}`);
}
);
}
function handleScannedCode(result: BarcodeScanResult): void {
renderStatus(`Scanned ${result.format}: ${result.text}`);
if (!result.text) {
renderStatus('Empty scan result');
return;
}
lookupItemByCode(result.text);
}
function renderStatus(message: string): void {
const el = document.getElementById('scan-result');
if (el) el.textContent = message;
}
function lookupItemByCode(code: string): void {
console.log('Lookup code:', code);
}Versi ini memisahkan skenario dari logika bisnis. Hal ini penting karena plugin scanner hanya harus menangkap input. Validasi, pencarian, dan navigasi harus berada di tempat lain.
Apa yang harus dilakukan dengan hasil scan?
Alur pos-scan yang baik biasanya salah satu dari berikut:
- Alur pencarian: Gunakan teks yang di-scan untuk mengambil rekaman produk, pesanan, atau aset.
- Alur validasi: Bandingkan nilai yang di-scan terhadap nilai yang diharapkan code yang sudah ada di layar.
- Alur navigasi: Rute pengguna ke tugas yang terkait dengan item yang di-scan.
- Alur tangkap: Simpan nilai lokal untuk sinkronisasi nanti.
Jangan biarkan callback scanner menjadi tempat pembuangan untuk API panggilan, pembaruan DOM, analitis, dan navigasi. Tukarkan nilai dengan cepat.
Pertama-tama, log hasil mentah selama tes awal. Bahkan jika UI produksi Anda hanya memerlukan texthasil yang dikembalikan format bisa berguna untuk debugging label yang tidak sesuai. Jika operasi mengatakan “scanner tidak bisa membaca ini code,” format data seringkali memberitahu Anda apakah masalahnya adalah jenis barcode, bukan kualitas barcode.
Pengujian dan Mengatasi Kesalahan Umum
Masalah barcode scanner Cordova paling banyak tidak berasal dari proses scan API itu sendiri. Mereka berasal dari batas antara UI web, tampilan native, dan izin perangkat. Di sini, demo yang bersih berubah menjadi laporan bug yang membingungkan.
Masalah yang paling sulit untuk didiagnosis adalah bug rendering Android yang muncul selama Capacitor migrasi atau pengaturan mixed Cordova-Capacitor . Seorang pengembang di Capacitor issue #1213 menggambarkannya dengan jelas: “Saya mencoba plugin ini pada aplikasi capacitor saya, tapi tampaknya scanner ini berada di belakang aplikasi”, dan perbaikan memerlukan membuat latar belakang webview native transparan bersama dengan perubahan transparansi DOM yang sesuai, yang biasanya tidak dibahas dalam tutorial Cordova standar, seperti yang terdokumentasi dalam diskusi __CAPGO_KEEP_0__ Android rendering issue Capacitor Android rendering issue discussionJika Anda sedang mengembangkan migrasi hybrid, panduan ini dapat membantu Anda mengembangkan aplikasi Capacitor Tetapkan terbuka.
Masalah Android di balik bug aplikasi
Gejala
Mulai scanner. Izin tampaknya baik-baik saja. Tidak ada kecelakaan yang jelas terjadi. Tapi preview kamera muncul tidak terlihat, terblokir, atau 'di balik' UI aplikasi.
Pemicu
Tampilan scanner native dan webview diatur berbeda dari plugin Cordova asli yang diharapkan. Pada Android dalam pengaturan Capacitor-style, latar belakang webview dapat tetap transparan, sehingga preview native ada tapi tetap disembunyikan di bawahnya.
Pembahasan
Pengaturan tampilan transparan pada kedua sisi:
- Tampilan native: Set latar belakang webview menjadi transparan.
- Tampilan web: Hapus latar belakang yang tidak transparan dari elemen kontainer yang berada di atas preview scanner.
- Tampilan layout: Periksa pembungkus layar penuh, kerangka modal, dan kontainer halaman framework untuk warna latar belakang default.
- Testing sisi: Validasi pada perangkat Android fisik karena perilaku tata letak dapat menipu di dalam kerangka pengembangan.
Pengembang berpikir plugin ini rusak karena sebenarnya masalahnya ada di komposisi tampilan.
Gagal izin dan palsu negatif
Izin gagal dalam cara yang terlihat seperti bug pemindaian.
Jika pengguna menolak akses kamera, callback Anda mungkin menampilkan kesalahan umum, atau pemindaian mungkin tidak ditampilkan seperti yang diharapkan. Tangani penolakan izin sebagai cabang normal di UI. Beritahu pengguna apa yang terjadi dan bagaimana untuk mencoba lagi setelah mengaktifkan akses. Pada iOS terutama, teks izin yang tidak jelas menciptakan ketidakpercayaan sebelum pengguna pernah melihat pemindaian.
Beberapa kebiasaan membantu:
- Aktifkan pemindaian dari aksi pengguna yang jelas: Izin promosi terasa kurang mencurigakan.
- Tampilkan input pengganti: Masukan manual menjaga alur kerja tetap hidup.
- Test tolak kemudian coba lagi jalur: Many teams hanya melakukan tes jalur bahagia sekali.
Masalah pembangunan dan perangkat tes
Beberapa gagal hanya menampilkan pada lingkungan tertentu.
| Masalah | Pemicu yang mungkin | Pemecahan masalah yang efektif |
|---|---|---|
| Scanner membuka tetapi tidak menghasilkan hasil yang berguna | Format kode barcode tidak didukung atau tidak terduga | Coba dengan label yang diketahui yang sesuai dengan kasus konfigurasi Anda |
| Pembangunan gagal setelah instalasi plugin | Perubahan platform atau ketergantungan pada proyek yang lebih tua | Perbarui paket platform sebelum mengubah aplikasi code |
| Berfungsi di satu shell aplikasi tetapi tidak di lainnya | Lihat layering atau gangguan CSS | Stripping layar kembali ke tata letak minimal dan tambahkan gaya secara bertahap |
| Perilaku emulator menipu | Pengujian simulasi kamera tidak mencerminkan realitas perangkat | Uji coba pada perangkat Android dan iPhone fisik sejak awal |
Stripping halaman ke satu tombol dan satu elemen hasil ketika debugging. Jika scanner bekerja di sana, masalah Anda biasanya adalah tata letak atau shell aplikasi code, bukan plugin.
Tips Kinerja dan Migrasi ke Capacitor
Scanner kode barcode dapat menerjemahkan dengan benar dan masih gagal dalam praktiknya. Masalah biasanya muncul sebagai lag, flicker, gangguan kamera, atau layar Android yang berbeda di perangkat yang sama dari pool pengujian.
Dalam aplikasi Cordova yang lebih tua, decoder sering kali bukan titik lemah. View layering, webview, dan code yang bereaksi terhadap hasil scan biasanya menyebabkan lebih banyak masalah daripada pengenalan kode barcode sendiri.
Mulai dengan mempertahankan layar scan yang sempit dalam skop. Jika layar dimaksudkan untuk memindai label inventori, biarkan memindai label inventori. Filter tambahan, panel animasi, dan pembaruan status luas menambahkan pekerjaan meredah tepat di mana rendering webview Android sudah rapuh.
A few changes tend to pay off fast:
- Batasi format kode barcode yang diterima jika plugin Anda mendukungnya. Hal ini dapat mengurangi bacaan palsu dan membuat penutupan tes lebih mudah untuk dipahami.
- Tahan logika pasca-scan singkat. Analisis, validasi, dan perbarui bagian UI yang paling kecil.
- Block bacaan duplikat selama beberapa saat. Beberapa perangkat akan mengirim hasil yang sama beberapa kali sebelum pengguna memindahkan kamera.
- Desain entri manual ke dalam alur. Label rusak, pencahayaan buruk, dan pengemasan reflektif masih terjadi di lingkungan hidup.
- Perhatikan biaya repaint Android dengan ketat. Overlays berat, transisi CSS, dan komponen yang berlapis dapat mengganggu kamera preview di dalam Cordova webview.
A jalur migrasi yang lebih praktis ke Capacitor
Proses migrasi Cordova ke Capacitor yang paling bersih adalah yang dilakukan secara bertahap, bukan heroik. Tim akan mengalami masalah ketika mereka mengganti kontainer aplikasi, plugin pemindaian kode, aliran izin, dan overlay UI secara bersamaan, lalu tidak dapat mengetahui perubahan mana yang menyebabkan aplikasi rusak.
Pilihlah urutan ini:
-
Audit plugin saat ini
Daftarkan setiap plugin Cordova dan tandai setiap plugin sebagai aktif, dapat diganti, atau berisiko karena bergantung pada perilaku platform yang lebih tua. -
Pindahkan kontainer aplikasi terlebih dahulu
Jalankan aplikasi web yang sudah ada di dalam Capacitor sebelum mengganti scanner code. Hal ini memisahkan masalah kontainer dari masalah plugin. -
Tetapkan plugin Cordova selama transisi singkat jika diperlukan
Kompatibilitas sementara seringkali lebih aman daripada menulis ulang penggunaan pemindaian kode, akses file, dan pengaturan izin secara bersamaan. -
Ganti komponen scanner yang rapuh sebelumnya
Plugin lama yang bergantung pada overlay khusus, perilaku Android yang tidak terdokumentasi, atau penggunaan kamera yang sudah ketinggalan zaman seharusnya diprioritaskan di atas.
Bug kamera Android memerlukan perhatian khusus karena menghabiskan banyak waktu debugging. Saya telah melihat layar pemindaian kode gagal karena tampilan native berada di belakang view web, memotong di tepi, atau menampilkan hitam pada perangkat Android tertentu. Pada titik itu, plugin pemindaian kode pertama kali dipertimbangkan untuk gagal, meskipun komposisi view adalah masalah yang lebih mendasar.
Tentukan itu sebagai investigasi rendering, bukan hanya investigasi scanner. Hapus overlay dekoratif. Kurangi halaman ke preview, satu trigger, dan satu bidang hasil. Jika preview menjadi stabil setelah itu, masalah biasanya adalah struktur layar atau CSS Anda, bukan decoding.
Hal ini juga merupakan tempat dimana migrasi ke Capacitor mulai membenarkan dirinya. Capacitor tidak menghilangkan bug kamera semua, tetapi biasanya memberikan batasan yang lebih bersih antara pengelolaan tampilan native dan UI web code. Untuk skanner barcode, @capgo/preview-kamera menampilkan feed kamera hidup sebagai overlay native dengan kontrol yang dapat disesuaikan, sehingga Anda dapat mendekode frame di JavaScript tanpa preview yang berada di belakang webview. Untuk skanner enterprise pada perangkat Zebra, @capgo/capacitor-zebra-datawedge menangani profil DataWedge dan trigger scan. Untuk alur kerja tag NFC, @capgo/capacitor-NFC menangani penemuan, membaca, dan menulis tag native pada iOS dan Android.
Proyek Cordova cenderung rusak dari usia plugin, pergeseran platform, dan asumsi yang tersembunyi di dalam integrasi yang lebih tua. Proyek Capacitor mengekspos masalah yang berbeda, terutama seputar pengelolaan siklus hidup dan layering native, tetapi kegagalan-kegagalan tersebut lebih mudah untuk ditemukan karena sisi native lebih eksplisit.
Jika scanner Cordova Anda saat ini hanya berfungsi setelah beberapa perbaikan perangkat khusus, berhenti menambahkan patch. Stabilkan layar scan, konfirmasikan apakah bug pratinjau Android sebenarnya adalah masalah layering webview, dan kemudian migrasikan dalam langkah-langkah terkendali. Jalur tersebut lebih lambat selama seminggu dan lebih cepat untuk proyek lainnya.
