Anda mungkin berada di salah satu dua situasi. Atau Anda telah mewarisi aplikasi Cordova yang masih penting bagi bisnis, atau Anda menjaga aplikasi hybrid stabil sementara tim perlahan-lahan beralih ke alat yang lebih baru. Kemudian permintaan produk tiba: scan label inventori, tiket, paket, atau label rak dengan kamera ponsel.
Di mana scanner barcode Cordova Kerja menjadi menarik. Demo dasar mudah. Integrasi produksi tidak. Bagian sulit adalah memilih plugin yang sesuai dengan format barcode Anda, mengonfigurasi izin native dengan bersih, dan menghadapi kebiasaan platform yang hanya muncul pada perangkat nyata. Jika aplikasi Anda juga menyentuh operasi lapangan atau aliran inventori, fitur scanning biasanya terhubung ke kekhawatiran operasional yang lebih luas seperti manajemen komponen IT kritis, di mana aplikasi mobile menjadi bagian dari alur aset dan layanan yang lebih besar.
Cordova masih merupakan stack nyata dalam pekerjaan perawatan perusahaan. 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 panduan skaning Cordova dariSitePoint . Jika tim Anda juga mempertimbangkan pilihan arsitektur jangka panjang, perbandingan ini antara aplikasi native vs aplikasi web
membantu menggambarkan mengapa aplikasi hybrid masih muncul di jalur pengiriman mobile yang serius.
- Mengapa Menambahkan Scanner Barcode ke Aplikasi Cordova Anda
- Pilih Plugin Scanner Barcode Cordova Anda
- Pemasangan dan Konfigurasi Platform
- Mengimplementasikan Scanner di Aplikasi Anda Code
- Pengujian dan Mengatasi Kesalahan Umum
- Tips Kinerja dan Migrasi ke Capacitor
Mengapa Menambahkan Scanner Barcode ke Aplikasi Cordova Anda
Scanner barcode mengubah apa yang dapat dilakukan aplikasi Cordova di lapangan. Sebaliknya dari meminta pengguna untuk mengetikkan serial, ID pesanan, atau kode produk, Anda biarkan kamera menjadi perangkat input. Itu mengurangi gesekan, tetapi kritis, itu mengurangi jumlah cara pengguna dapat memasukkan nilai yang salah.
Dalam prakteknya, scanning barcode muncul di mana aplikasi mobile bertemu 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 masukan manual code kecuali ada fallback yang jelas.
Aplikasi Cordova masih relevan dalam mode perawatan
Beberapa tim sering membicarakan Cordova seperti telah menghilang. Padahal, itu tidak benar. Cordova telah berkembang menjadi portfolio perusahaan yang memerlukan perawatan berat, di mana mengganti aplikasi yang berfungsi lebih sulit daripada memperluasnya. Jika aplikasi sudah menghandle autentikasi, sinkronisasi, formulir, dan penyimpanan offline, menambahkan scanner sering kali lebih berisiko rendah daripada membangun produk secara keseluruhan.
Aturan praktis: Tidak perlu menganggap permintaan scan sebagai trigger pengulangan kecuali aplikasi lainnya sudah gagal dalam operasional tim.
Cordova juga mendapatkan tempatnya karena plugin mengekspos kemampuan perangkat native dalam cara yang dapat digunakan oleh web code. Itulah mengapa scanning kode barcode menjadi sangat umum dalam aplikasi mobile hybrid. Hal itu sesuai dengan pola yang dibangun Cordova: letakkan kemampuan native di belakang JavaScript API dan biarkan aplikasi tetap berbasis web.
Nilainya ada dalam alur kerja, bukan demo
Tombol scanner yang mengembalikan teks adalah bagian yang mudah. Kerja utama adalah segala sesuatu di sekitarnya:
- Pemilihan simbolologi yang didukung: Aplikasi Anda mungkin hanya membutuhkan QR saja, atau mungkin membutuhkan kode retail dan logistik juga.
- Pengelolaan izin dengan jelas: Jika akses kamera gagal sekali, pengguna sering kali menganggap fitur tersebut 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 membutuhkan pendekatan yang tidak menahan fitur di asumsi Cordova saja.
Poin terakhir itu penting. Tim sering berhasil dengan integrasi Cordova awal, kemudian mengalami kesulitan selama migrasi karena model rendering native berubah di bawah plugin. Scanner masih berfungsi. Tampilan preview hanya tidak menampilkan di tempat yang Anda harapkan.
Pemilihan Plugin Barcode Scanner Cordova
Sebelum menulis aplikasi code, putuskan apa yang Anda optimalkan. Beberapa tim membutuhkan dukungan barcode yang luas. Lainnya hanya membutuhkan overlay kamera untuk alur QR. Memilih plugin yang salah di awal menciptakan rework kemudian, terutama ketika produk meminta satu format barcode tambahan setelah peluncuran.
Plugin yang paling banyak pengembang akan mengenalinya adalah cordova-plugin-barcodescanner. Dokumentasi paket npm menggambarkan scan(success, fail) API and support for common symbologies including QR_CODE, DATA_MATRIX, UPC_A, EAN_13, CODE_128, PDF_417, dan AZTEC, yang mengapa plugin ini cocok untuk skenario retail dan logistik daripada hanya kasus QR saja, seperti yang ditunjukkan di dokumentasi paket plugin pada npm.
Untuk tim yang mengevaluasi strategi plugin lebih luas, ini adalah ringkasan tentang apa yang perlu diketahui tentang plugin Capacitor bermanfaat karena menyoroti perbedaan antara asumsi plugin Cordova yang lebih tua dan model jembatan native yang lebih baru.
Apa yang penting sebelum Anda menginstal apa pun
Jangan memulai dengan popularitas sendiri. Mulai dengan pekerjaan skanning Anda.
Jika aplikasi harus membaca kode barcode keluarga yang berbeda di konteks operasional yang berbeda, dukungan simbolologi yang luas lebih penting daripada API yang minimal. Jika aplikasi hanya membutuhkan QR check-in, Anda dapat menerima alat yang lebih sempit jika memberikan pengalaman kamera yang lebih sederhana. Apa yang developer junior sering melewatkan adalah bahwa pekerjaan scanner kurang tentang "apakah dapat mengscan" dan lebih tentang "apakah dapat mengscan label yang tepat yang digunakan oleh operasional tanpa kerja sekitar yang tidak nyaman."
Daftar pemeriksaan yang baik seperti ini:
- Koverasi kode barcode: Konfirmasikan format yang tepat yang digunakan di produksi.
- Harapan platform: Periksa apa yang tim masih mendukung hari ini, bukan apa yang plugin mendukung secara historis.
- Model UI: Beberapa plugin membuka alur scanner native. Lainnya mengharapkan pendekatan pratinjau terintegrasi.
- Migrasi toleransi: Tanyakan apakah plugin ini akan menjadi menyakitkan jika aplikasi berpindah ke Capacitor nanti.
Plugin yang berfungsi di demo tetapi bertengkar dengan tata letak aplikasi, siklus hidup, atau jalur migrasi biasanya adalah plugin yang salah.
Perbandingan plugin
| Fitur | phonegap-plugin-barcodescanner | cordova-plugin-qrscanner |
|---|---|---|
| Penggunaan utama | Pemindaian kode barcode yang luas di berbagai format | Pemindaian kode QR yang fokus |
| API style | Familiar pola panggilan balik dalam banyak proyek Cordova legacy | Dipilih sering kali untuk kasus penggunaan tampilan kamera hidup |
| Barcode format scope | Lebih sesuai ketika produk memerlukan lebih dari QR | Lebih sesuai ketika QR adalah persyaratan keras tunggal |
| Resiko migrasi | Bisa berfungsi, tetapi asumsi lama mungkin muncul selama migrasi jembatan modern | Metode preview-heavy dapat mengekspos masalah rendering lebih cepat |
| Pilihan terbaik | Alur kerja barcode retail, logistik, asset, dan campuran | Periksa-in, URL, autentikasi, dan alur QR-saja |
Table tersebut mencerminkan kenyamanan praktek, bukan skor kartu. Jika Anda memerlukan simbolologi retail dan logistik, kategori plugin yang lebih luas biasanya pilihan yang lebih aman. Jika Anda hanya memindai QR dan ingin pengalaman tampilan yang lebih terkendali, jalur QR-orientasi dapat lebih ringkas.
Kejadian yang paling sering saya lihat adalah memilih alat QR karena rilis pertama hanya memerlukan QR, kemudian memaksa alat tersebut untuk UPC atau Code 128 bekerja di kemudian hari. Jika ada kemungkinan pengguna bisnis Anda akan memindai label dari printer, rak, wadah, atau dokumen pengiriman, pilihlah untuk masa depan sekarang.
Instalasi dan Konfigurasi Platform
Integrasi biasanya gagal sebelum skanner pertama kali digunakan, bukan setelahnya. Kebanyakan gagal datang dari pergeseran konfigurasi antara harapan JavaScript dan konfigurasi platform native. Tatalah bagian ini seperti daftar checklist, bukan instalasi cepat.
Alur implementasi yang solid dimulai dengan menambahkan plugin atau SDK, membuat konteks tangkapan, mempersempit simbologi untuk kode yang digunakan dalam produksi, mengonfigurasi UI, dan baru 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 Panduan pengembang Scandit untuk Cordova skanning barcode. Jika aplikasi Anda masih sangat hybrid pada tingkat arsitektur, panduan ini untuk Pengembangan aplikasi hybrid Cordova adalah mitra yang sangat membantu.
Mulai dengan alur integrasi
Fitur skanner akan lebih baik jika Anda memutuskan hal-hal berikut terlebih dahulu:
- Jenis kode barcode yang aplikasi harus menerima.
- Apakah aksi scanning adalah tindakan layar penuh atau bagian dari alur kerja yang diintegrasikan.
- Apa yang aplikasi harus lakukan setelah membaca dengan sukses.
- Apa yang ada sebagai pengganti ketika kamera tidak dapat digunakan.
Yang menjaga plugin instalasi terikat dengan alur kerja nyata daripada kemampuan perangkat umum.
Langkah instalasi Cordova
Untuk pengaturan 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 pengaturan 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. Bangunlah segera setelah instalasi plugin untuk menangkap masalah dependensi native sebelum Anda menghubungkan UI code. Jika bangun gagal, selesaikan masalah itu terlebih dahulu.
Konfigurasi native yang biasanya patah terlebih dahulu
Pada iOS, akses kamera harus dideklarasikan dengan benar dalam pengaturan proyek native. Jika deskripsi penggunaan izin kamera kosong atau kabur, pemindai tidak akan berperilaku seperti fitur yang berfungsi kepada pengguna. Tambahkan deskripsi privasi kamera yang jelas di Info.plist itu menjelaskan mengapa aplikasi membutuhkan kamera.
On Android, tinjau entri manifest dan izin plugin setelah instalasi. Plugin mungkin menambahkan apa yang diperlukan, tetapi proyek lama sering kali mengandung perubahan konfigurasi yang terkumpul, pengaturan Gradle yang disesuaikan, atau penggunaan plugin yang berlebihan yang menyebabkan peringatan pembangunan atau kebingungan waktu runtime. Jangan asumsikan manifest bersih hanya karena plugin terinstal dengan sukses.
Pilih checklist cepat ini:
- Tinjau versi platform: Proyek Cordova yang lebih tua sering kali membawa paket platform yang ketinggalan zaman.
- Tinjau permintaan izin: Penyampaian kata-kata dan waktu sangat penting untuk kepercayaan pengguna.
- Uji coba pada perangkat nyata awal: Emulator tidak akan memberitahu Anda cukup tentang perilaku kamera.
- Tetapkan ruang skanner 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. Penggunaan skanner yang luas terdengar fleksibel, tetapi seringkali membuat debugging lebih lambat karena setiap label yang tidak dapat dibaca menjadi ambigu.
Untuk para pengembang junior, pelajaran utama adalah ini: instalasi bukan hanya perintah terminal. Ini adalah penyesuaian proyek native. Jika Android dan iOS tidak dikonfigurasi secara sengaja, lapisan JavaScript tidak akan menyelamatkan Anda.
Mengimplementasikan Scanner di Aplikasi Code
Setelah plugin diinstal dan aplikasi dibangun, jaga implementasi pertama sederhana. Letakkan aksi scan di belakang tombol, log hasil penuh, dan buktikan alur panggilan callback berfungsi sebelum mendesain antarmuka yang terpolish.
Gaya skanner Cordova yang umum menggunakan metode scan(success, fail) Gaya callback ini sudah kuno, tetapi masih dapat diandalkan dalam kodebasis legasi dan mudah dibungkus nanti jika aplikasi Anda telah berpindah ke promes atau abstraksi TypeScript. Jika Anda ingin memiliki model mental yang lebih jelas tentang bagaimana web code memanggil native code dalam proyek-proyek ini, penjelasan tentang bagaimana Capacitor menghubungkan web dan native code membantu, bahkan jika Anda masih mengkode dalam Cordova hari ini.
Contoh JavaScript sederhana
Contoh implementasi minimal untuk aplikasi Cordova yang lebih tua:
<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;
}
);
});
});ini melakukan tiga hal yang berguna. Ini menunggu devicereadymengikat skanning ke aksi pengguna yang sengaja, dan menghandle baik kesuksesan maupun kegagalan secara eksplisit. Jangan lewatkan kasus dibatalkan. Pengguna keluar dari aliran kamera semua waktu.
Contoh TypeScript
Jika proyek Anda menggunakan TypeScript, definisikan bentuk hasil sendiri sehingga bagian lain aplikasi dapat mengonsumsinya dengan bersih:
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 skanning dari logika bisnis. Hal ini penting karena plugin scanner hanya menangkap input. Validasi, pencarian, dan navigasi milik tempat lain.
Apa yang harus dilakukan dengan hasil scan
Aliran pasca-scan yang baik biasanya salah satu dari ini:
- Aliran pencarian: Menggunakan teks yang di-scan untuk mengambil produk, pesanan, atau rekaman asset.
- Aliran validasi: Menggambarkan nilai yang di-scan terhadap nilai yang diharapkan code yang sudah ada di layar.
- Aliran navigasi: Arahkan pengguna ke tugas yang terkait dengan item yang di-scan.
- Alur Perekaman: Simpan nilai secara lokal untuk sinkronisasi nanti.
Jangan biarkan callback scanner menjadi tempat pembuangan untuk API panggilan, pembaruan DOM, analisis, dan navigasi. Tukarkan nilai dengan cepat.
Selain itu, log hasil mentah selama tes awal. Bahkan jika UI produksi hanya membutuhkan textnilai yang dikembalikan format bisa berguna untuk debugging label yang tidak sesuai. Jika operasi mengatakan “scanner tidak bisa membaca code ini,” format data seringkali memberitahu Anda apakah masalahnya adalah jenis barcode, bukan kualitas barcode.
Pengujian dan Mengatasi Kesalahan Umum
Masalah scanner barcode Cordova paling banyak tidak berasal dari proses scan API itu sendiri. Mereka berasal dari batasan 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 ada di belakang aplikasidan perbaikan memerlukan membuat latar belakang webview native transparan bersamaan dengan perubahan transparansi DOM, yang biasanya tidak dibahas dalam tutorial Cordova standar, seperti yang terdokumentasi di Capacitor Masalah Rendering Android. Jika Anda sedang debugging migrasi hybrid, panduan debugging __CAPGO_KEEP_0__ aplikasi ini patut Anda simpan terbuka. debugging Capacitor apps Masalah Android di Balik Aplikasi Bug
Gejala
Anda memulai scanner. Izin tampaknya baik-baik saja. Tidak ada crash yang jelas terjadi. Namun, preview kamera tampak tidak terlihat, terblokir, atau 'tersembunyi' di balik UI aplikasi.
Penyebab
View scanner native dan webview diatur layer berbeda dari plugin Cordova asli yang diharapkan. Pada Android dalam konfigurasi __CAPGO_KEEP_0__-style, latar belakang webview dapat tetap transparan, sehingga preview native ada tetapi tetap tersembunyi di bawahnya.
The native scanner view and the webview are layered differently than the original Cordova plugin expected. On Android in Capacitor-style setups, the webview background can remain opaque, so the native preview exists but stays hidden beneath it.
Pembahasan
Pembahasan
- Pembahasan Setel latar belakang WebView menjadi transparan.
- Side web: Hapus latar belakang yang tidak transparan dari elemen-elemen kontainer yang berada di atas preview scanner.
- Side layout: Periksa pembungkus layar penuh, kerangka modal, dan kontainer halaman framework untuk warna latar belakang default.
- Side pengujian: Validasi pada perangkat Android fisik karena perilaku layout dapat menipu di dalam kerangka pengembangan.
Ini adalah bug yang membuat pengembang berpikir plugin ini rusak ketika sebenarnya masalah komposisi tampilan.
Gagal izin dan hasil palsu
Gagal izin dalam cara yang terlihat seperti bug scanner.
Jika pengguna menolak akses kamera, callback Anda mungkin menampilkan kesalahan umum, atau scanner mungkin tidak ditampilkan seperti yang diharapkan. Tangani penolakan izin sebagai cabang normal di UI. Beritahu pengguna apa yang terjadi dan bagaimana cara mencoba lagi setelah mengaktifkan akses. Pada iOS terutama, teks izin yang tidak jelas menciptakan ketidakpercayaan sebelum pengguna melihat scanner.
Beberapa kebiasaan membantu:
- Mengaktifkan pemindaian dari aksi pengguna yang jelas: Prompt izin terkesan kurang mencurigakan.
- Tampilkan input pengganti: Masukan manual menjaga alur kerja tetap hidup.
- Tes tolak kemudian coba lagi jalur: Banyak tim hanya tes jalur bahagia sekali.
Masalah pembangunan dan perangkat tes
Beberapa gagal hanya menampilkan pada lingkungan tertentu.
| Masalah | Penyebab yang mungkin | Pemecahan masalah yang efektif |
|---|---|---|
| Pemindaian dibuka tetapi tidak ada hasil yang berguna kembali | Format kode barcode tidak didukung atau tidak terduga | Uji dengan label yang diketahui yang sesuai dengan kasus penggunaan yang diatur |
| Pembangunan gagal setelah instalasi plugin | Proyek atau kehilangan ketergantungan pada proyek yang lebih tua | Rekoncili paket platform sebelum mengubah aplikasi code |
| Bekerja di satu shell aplikasi tetapi tidak di lainnya | Lapisan tampilan atau interferensi CSS | Stripping layar kembali ke tata letak minimal dan menambahkan gaya secara bertahap |
| Perilaku emulator menipu | Pengujian simulasi kamera tidak mencerminkan kenyataan perangkat | Uji pada perangkat Android dan iPhone fisik pada awalnya |
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 dan Migrasi ke Capacitor
Scanner barcode dapat mengodekan dengan benar dan masih gagal dalam praktek. Masalah biasanya muncul sebagai lag, kilauan, gangguan kamera preview, atau layar Android yang berbeda dari perangkat yang sama dari pool tes.
Dalam aplikasi Cordova yang lebih tua, decoder sering tidak menjadi titik lemah. Webview, layering view, dan code yang bereaksi terhadap hasil scan biasanya menyebabkan lebih banyak masalah daripada pengenalan kode barcode itu sendiri.
Mulai dengan membatasi layar scan dalam lingkup yang sempit. Jika layar dimaksudkan untuk memindai label stok, biarkan layar memindai label stok. Filter tambahan, panel animasi, dan pembaruan status luas menambahkan pekerjaan ulang tepat di mana rendering webview Android sudah rapuh.
Beberapa perubahan cenderung menghasilkan hasil yang cepat:
- Penggunaan format kode barcode yang diterima terbatas Jika plugin Anda mendukungnya. Ini memotong bacaan palsu dan membuat penutupan tes lebih mudah untuk dipahami.
- Penggunaan logika setelah scan yang singkat Parsing, validasi, dan memperbarui bagian UI yang paling kecil.
- Penggunaan pemblokiran bacaan duplikat untuk beberapa saat Beberapa perangkat akan mengirim hasil yang sama beberapa kali sebelum pengguna menggerakkan kamera.
- Desain entri manual ke dalam alur Label rusak, pencahayaan buruk, dan pengemasan reflektif masih terjadi di lingkungan hidup nyata.
- Perhatikan biaya repaint Android secara dekat. Overlays berat, transisi CSS, dan komponen yang berlapis dapat merusak preview kamera di dalam webview Cordova.
Rute migrasi yang praktis ke Capacitor
Pemindahan Cordova yang paling bersih ke Capacitor dilakukan secara bertahap, bukan heroik. Tim akan mengalami kesulitan ketika mereka mengganti kontainer aplikasi, plugin pemindai, aliran izin, dan over lay UI sekaligus, kemudian tidak dapat mengetahui perubahan mana yang menyebabkan aplikasi rusak.
Gunakan urutan ini:
-
Audit plugin saat ini
Daftar setiap plugin Cordova dan tandai setiap satu sebagai aktif, dapat diganti, atau berisiko karena bergantung pada perilaku platform yang lebih tua. -
Pindahkan shell aplikasi terlebih dahulu
Jalankan aplikasi web yang ada di dalam Capacitor sebelum mengganti plugin pemindai code. Ini memisahkan masalah kontainer dengan masalah plugin. -
Tetapkan plugin Cordova selama transisi singkat jika perlu
Kompatibilitas sementara seringkali lebih aman daripada menulis ulang scanner, akses file, dan pengaturan izin pada saat yang sama. -
Ganti bagian scanner yang rapuh sebelumnya.
Plugin lama yang bergantung pada overlay khusus, perilaku Android yang tidak terdokumentasikan, atau pengaturan kamera yang sudah ketinggalan zaman harus diprioritaskan.
Bug kamera Android membutuhkan perhatian khusus karena menghabiskan banyak waktu debugging. Saya telah melihat layar scanner gagal karena preview native berada di belakang webview, memotong di tepi, atau menampilkan hitam pada perangkat Android tertentu. Pada titik itu, plugin barcode pertama kali dipertimbangkan, bahkan meskipun masalahnya adalah komposisi tampilan.
Tangani hal ini 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, masalahnya biasanya adalah struktur layar atau CSS, bukan decoding.
Hal ini juga merupakan tempat dimana migrasi ke Capacitor mulai membenarkan dirinya. Capacitor tidak menghilangkan setiap bug kamera, tetapi biasanya memberikan batasan yang lebih bersih antara pengaturan tampilan native dan UI web code. Untuk skenario barcode scanning, @capgo/camera-preview menampilkan feed kamera hidup sebagai overlay native dengan kontrol yang dapat disesuaikan, sehingga Anda dapat mendekode frame dalam JavaScript tanpa preview berada di belakang webview. Untuk skenario scanning bisnis pada perangkat Zebra, @capgo/capacitor-zebra-datawedge menangani profil DataWedge dan trigger scan. Untuk skenario alur tag NFC, @capgo/capacitor-nfc mengatasi penemuan, pembacaan, dan penulisan tag asli pada iOS dan Android.
Cordova biasanya bermasalah karena usia plugin, perubahan platform, dan asumsi tersembunyi di integrasi yang lebih tua. Capacitor proyek mengekspos masalah yang berbeda, sebagian besar 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 patch perangkat khusus, berhenti menambahkan patch. Stabilkan layar scan, konfirmasikan apakah bug tampilan Android sebenarnya adalah masalah layering webview, dan kemudian migrasi dalam langkah-langkah yang terkendali. Jalur tersebut lebih lambat selama seminggu dan lebih cepat untuk proyek yang lebih besar.
