Anda mungkin berada di salah satu situasi. Entah Anda telah mewarisi aplikasi Cordova yang masih relevan bagi bisnis, atau Anda menjaga aplikasi hybrid stabil hidup sementara tim perlahan-lahan beralih ke alat yang lebih baru. Lalu permintaan produk tiba: scan label inventori, tiket, paket, atau label rak dengan kamera ponsel.
Itu di mana scanner kode batang Cordova pekerjaan menjadi menarik. Demo dasar mudah. Integrasi produksi tidak. Bagian sulit adalah memilih plugin yang sesuai dengan format kode batang, mengonfigurasi izin native dengan bersih, dan menghadapi kekurangan platform yang hanya muncul pada perangkat nyata. Jika aplikasi Anda juga menyentuh operasi lapangan atau aliran inventori, fitur scanning biasanya terhubung dengan kekhawatiran operasional yang lebih luas seperti menangani 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 kode batang di Cordova telah bergerak jauh dari contoh mainan ke aplikasi hybrid bisnis yang dibangun untuk Android dan terhubung ke layanan backend, termasuk alur yang terdokumentasi menggunakan cordova create, cordova platform add android, dan kode yang dihasilkan barcodeScanner-debug.apk di contoh pembangunan aplikasi nyata dari panduan scanning Cordova dari SitePoint. Jika tim Anda juga mempertimbangkan pilihan arsitektur jangka panjang, perbandingan ini dari aplikasi native vs aplikasi web membantu menentukan mengapa aplikasi hybrid masih muncul di jalur pengiriman mobile yang serius.
Tabel Isi
- Mengapa Menambahkan Scanner Barcode ke Aplikasi Cordova Anda
- Memilih Plugin Scanner Barcode Cordova Anda
- Instalasi 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. Ini mengurangi gesekan, tetapi kritis, ini 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 dapat memanfaatkan fitur ini. Scanner juga mengubah harapan pengguna. Setelah kamera tersedia, pengguna berhenti menoleransi masukan manual code kecuali ada fallback yang jelas.
Cordova masih relevan dalam mode perawatan
Apa yang terjadi dengan Cordova? Ini tidak hilang. Ini berkembang menjadi portofolio perusahaan yang berat, 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 seluruhnya.
Aturan praktis: Tidak gunakan permintaan scan sebagai trigger pengulangan kecuali aplikasi lainnya sudah gagal dalam operasi tim Anda.
Cordova juga mendapatkan tempatnya karena plugin menampilkan kemampuan perangkat native dalam cara web code dapat menggunakan. Itu mengapa scanning barcode menjadi sangat umum dalam aplikasi mobile hybrid. Ini sesuai dengan pola yang tepat Cordova dibangun untuk: 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:
- Pilih kode yang didukung: Aplikasi Anda mungkin hanya membutuhkan QR saja, atau mungkin membutuhkan kode retail dan logistik juga.
- Tangani izin dengan bersih: Jika akses kamera gagal sekali, pengguna sering kali menganggap fitur itu rusak.
- Desain aksi setelah scan: Pencarian, validasi, navigasi, dan pengelolaan duplikat lebih penting daripada antarmuka kamera.
- Merencanakan modernisasi: Jika tim Anda sedang bergerak menuju Capacitor, Anda membutuhkan pendekatan yang tidak memasukkan fitur ke dalam 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 tempat yang Anda harapkan.
Pilih Plugin Barcode Scanner Cordova Anda
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 mengenali adalah cordova-plugin-barcodescanner Dokumentasi paket npm menggambarkan scan(success, fail) API dan dukungan untuk simbologi umum termasuk 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 penggunaan QR saja, seperti yang ditunjukkan dalam dokumentasi paket plugin di npm.
Untuk tim yang mengevaluasi strategi plugin secara lebih luas, ini adalah ringkasan apa yang perlu diketahui tentang Capacitor plugin hal ini berguna karena menyoroti perbedaan antara asumsi plugin Cordova yang lebih tua dan model jembatan asli yang lebih baru.
Apa yang penting sebelum Anda menginstal apa pun
Jangan mulai dengan popularitas sendiri. Mulai dengan pekerjaan scan Anda.
Jika aplikasi harus membaca kode barcode keluarga yang berbeda di konteks operasional yang berbeda, dukungan simbolologi yang luas lebih penting daripada minimal API. Jika aplikasi hanya membutuhkan QR check-in, Anda dapat menerima alat yang lebih sempit jika memberikan pengalaman kamera yang lebih sederhana. Apa yang sering terlewat oleh pengembang junior adalah bahwa pekerjaan scanner kurang tentang "apakah dapat di scan" dan lebih tentang "apakah dapat di scan label yang tepat digunakan oleh operasi tanpa kerja sekitar yang tidak nyaman."
Daftar pemeriksaan pilihan yang baik seperti ini:
- Koverasi barcode: Konfirmasikan format yang tepat 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 aliran pemindaian asli. Lainnya mengharapkan pendekatan pratinjau terintegrasi.
- Toleransi migrasi: Tanyakan apakah plugin ini akan menjadi menyakitkan jika aplikasi berpindah ke Capacitor nanti.
Plugin yang berfungsi dalam demo tetapi bertempur dengan tata letak aplikasi, siklus hidup, atau jalur migrasi biasanya adalah plugin yang salah.
Tabel perbandingan plugin
| Fitur | phonegap-plugin-barcodescanner | cordova-plugin-qrscanner |
|---|---|---|
| Penggunaan utama | Pemindaian barcode luas di berbagai format | Pemindaian QR yang fokus pada aliran |
| API style | Polosan callback pola yang banyak digunakan di proyek Cordova legacy | Sering dipilih untuk kasus penggunaan live camera preview |
| Lingkup format barcode | Lebih sesuai ketika produk memerlukan lebih dari QR | Lebih sesuai ketika QR adalah persyaratan keras yang hanya perlu |
| Risiko migrasi | Dapat berfungsi, tetapi asumsi yang lebih tua mungkin muncul selama migrasi jembatan modern | Penggunaan preview yang berat dapat mengungkapkan masalah rendering lebih cepat |
| Pilihan terbaik | Alur kerja retail, logistik, asset, dan barcode campuran | Alur kerja check-in, URL, autentikasi, dan QR hanya |
Tabel tersebut mencerminkan kenyamanan yang lebih praktis, bukan skor. Jika Anda memerlukan simbolologi retail dan logistik, kategori plugin yang lebih luas biasanya adalah pilihan yang lebih aman. Jika Anda hanya memindai QR dan ingin pengalaman preview yang lebih terkendali, jalur yang lebih orientasi QR dapat lebih ringkas.
The kesalahan yang paling sering saya lihat adalah memilih alat QR karena rilis pertama hanya memerlukan QR, kemudian memaksa masuk ke UPC atau Code 128 kerja nanti. Jika ada kemungkinan pengguna bisnis Anda akan memindai label dari printer, rak, wadah, atau dokumen pengiriman, pilih 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.
Alur implementasi yang solid dimulai dengan menambahkan plugin atau SDK, membuat konteks tangkap, mempersempit simbologi ke kode yang digunakan dalam produksi, mengonfigurasi UI, dan hanya kemudian mendaftarkan listener skanner. Urutan itu 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 lebih baik ketika Anda memutuskan item-item ini terlebih dahulu:
- Jenis kode barcode apa saja yang aplikasi harus menerima.
- Apakah scanning adalah aksi 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 bisa digunakan.
Yang menjaga plugin instalasi terikat dengan alur kerja yang nyata bukan kemampuan perangkat umum.
Langkah instalasi Cordova
Untuk setup tradisional Cordova 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 biasanya 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 iosTidak hanya itu. Bangunlah segera setelah instalasi plugin untuk menangkap masalah dependensi native sebelum menghubungkan UI code. Jika bangun gagal, selesaikan masalah tersebut terlebih dahulu.
Konfigurasi native yang biasanya patah pertama
Pada iOS, akses kamera harus diumumkan dengan benar dalam 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.
On Android, tinjau entri manifest dan izin plugin setelah instalasi. Plugin mungkin menambahkan apa yang diperlukan, tetapi proyek yang lebih tua 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 prompt izin: Penyampaian kata-kata dan waktu sangat penting untuk kepercayaan pengguna.
- Uji pada perangkat nyata awal: Emulator tidak akan memberitahu Anda cukup tentang perilaku kamera.
- Tetapkan ruang scanner sempit: Aktifkan hanya jenis code yang diterima oleh alur kerja Anda.
Jika scanner Anda hanya membutuhkan satu atau dua format, konfigurasi untuk format tersebut terlebih dahulu. Penginderaan luas terdengar fleksibel, tetapi seringkali membuat debugging lebih lambat karena setiap label tidak terbaca menjadi ambigu.
Untuk para pengembang junior, pelajaran utama adalah ini: instalasi bukan hanya perintah terminal. Ini adalah penyesuaian proyek asli. Jika Android dan iOS tidak disesuaikan secara sengaja, lapisan JavaScript tidak akan menyelamatkan Anda.
Mengimplementasikan Scanner di Aplikasi Anda Code
Setelah plugin diinstal dan aplikasi dibangun, jadikan implementasi pertama sederhana. Letakkan aksi scan di belakang tombol, log hasil lengkap, dan buktikan alur callback berfungsi sebelum mendesain antarmuka yang terlihat menarik.
Gaya scanner Cordova yang umum menggunakan metode plugin’s 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 code menghubungkan web dan native code how Capacitor bridges web and native code Seseorang yang memegang smartphone menggunakan aplikasi kamera untuk memindai kode QR di box karton.
Contoh implementasi minimal untuk aplikasi Cordova yang lebih tua:
Seseorang memegang smartphone menggunakan aplikasi kamera untuk memindai kode QR di box karton.
<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;
}
);
});
});This melakukan tiga hal yang berguna. Ini menunggu deviceready, mengikat skanning ke tindakan pengguna yang sengaja, dan mengatasi baik kesuksesan dan 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 agar 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);
}This versi memisahkan skanning dari logika bisnis. Hal itu penting karena plugin scanner hanya harus menangkap input. Validasi, pencarian, dan navigasi milik tempat lain.
Apa yang harus dilakukan dengan hasil skanning
Aliran post-skan yang baik biasanya salah satu dari ini:
- Aliran pencarian: Gunakan teks yang di-scan untuk mengambil produk, pesanan, atau rekaman asset.
- Aliran validasi: Bandingkan nilai yang di-scan terhadap nilai yang diharapkan code yang sudah ada di layar.
- Aliran navigasi: Rutekan pengguna ke dalam 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 Anda hanya memerlukan texthasil yang dikembalikan format bisa berguna untuk debugging label yang tidak sesuai. Jika operasi mengatakan “scanner tidak dapat 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 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 konfigurasi campuran Cordova-Capacitor. Seorang pengembang dalam isu #1213 di Capacitor menggambarkannya dengan jelas: “Saya mencoba plugin ini pada aplikasi capacitor saya, tapi tampaknya scanner berada di belakang aplikasi”dan perbaikan memerlukan membuat background webview native transparan bersamaan dengan perubahan transparansi DOM yang sesuai, 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__ ini patut Anda simpan terbuka. debugging Capacitor apps Gejala
Anda memulai scanner. Izin-izin tampaknya baik-baik saja. Tidak ada crash yang jelas terjadi. Namun, preview kamera tampaknya tidak terlihat, terblokir, atau "tersembunyi" di balik UI aplikasi.
Penyebab
Tampilan scanner native dan webview diatur layer-nya berbeda dengan yang diharapkan oleh plugin Cordova asli. Pada Android dalam konfigurasi __CAPGO_KEEP_0__-style, latar belakang webview dapat tetap transparan, sehingga preview native ada tetapi tetap tersembunyi di bawahnya.
Solusi
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.
Sisi native:
Sisi web:
- Pengaturan tampilan transparan pada sisi web dapat dilakukan dengan mengatur properti background-color menjadi transparan atau dengan menggunakan overlay untuk menutupi latar belakang webview. Atur latar belakang WebView menjadi transparan.
- Sisi Web: Hapus latar belakang yang tidak transparan dari elemen-elemen kontainer yang berada di atas preview scanner.
- Sisi Layout: Periksa pembungkus layar penuh, kerangka modal, dan kontainer halaman framework untuk warna latar belakang default.
- Sisi Pengujian: Validasi pada perangkat Android fisik karena perilaku layout dapat menipu dalam shell pengembangan.
Masalah ini membuat pengembang berpikir plugin rusak ketika sebenarnya masalah komposisi tampilan.
Kegagalan izin dan hasil palsu
Izin gagal 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 dalam UI. Beritahu pengguna apa yang terjadi dan bagaimana mengulangi setelah mengaktifkan akses. Pada iOS terutama, teks izin yang tidak jelas menciptakan ketidakpercayaan sebelum pengguna melihat scanner.
Beberapa kebiasaan membantu:
- Mulai sken dari aksi pengguna yang jelas: Prompt izin terasa kurang mencurigakan.
- Tampilkan input cadangan: Masukan manual menjaga alur kerja tetap hidup.
- Uji tolak kemudian ulangi jalur: Banyak tim hanya menguji jalur bahagia sekali.
Masalah dan pengujian perangkat
Beberapa gagal hanya muncul di lingkungan tertentu.
| Masalah | Penyebab yang mungkin | Pemecahan masalah yang efektif |
|---|---|---|
| Scanner membuka 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 berhenti setelah instalasi plugin | Perubahan platform atau dependensi pada proyek yang lebih tua | Rekoncili paket platform sebelum mengubah aplikasi code |
| Bekerja pada satu shell aplikasi tetapi tidak pada yang lain | Lapisan tampilan atau interferensi CSS | Bongkar layar kembali ke tata letak minimal dan tambahkan gaya secara bertahap |
| Sikap emulator tidak menunjukkan kenyataan | Simulasi kamera tidak menunjukkan realitas perangkat | Uji pada perangkat Android dan iPhone fisik pada awalnya |
Bongkar 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 Trik Kinerja dan Migrasi ke Capacitor
Scanner barcode dapat mengodekan dengan benar dan masih gagal dalam praktiknya. Masalah biasanya muncul sebagai lag, kilau, gangguan preview kamera, atau layar Android yang berbeda dari perangkat yang sama dari pool tes.
Dalam aplikasi Cordova yang lebih tua, decoder sering kali bukan titik lemah. Webview, layering view, 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 stok, biarkan layar memindai label stok. Filter tambahan, panel animasi, dan update status luas menambahkan pekerjaan ulang tepat di mana rendering webview Android sudah rapuh.
Beberapa perubahan cenderung memberikan hasil yang cepat:
- Batasi format kode barcode yang diterima jika plugin Anda mendukungnya. Ini memotong bacaan palsu dan membuat penutupan tes lebih mudah untuk dipahami.
- Tahan logika setelah scan singkat. Parse, validasi, dan update bagian UI yang paling kecil.
- Blokir bacaan duplikat untuk sejenak. Beberapa perangkat akan mengirim hasil yang sama beberapa kali sebelum pengguna menggerakkan kamera.
- Desain entri manual ke dalam aliran. Label-label yang rusak, pencahayaan yang buruk, dan pengemasan yang reflektif masih terjadi di lingkungan hidup.
- Perhatikan biaya repaint Android secara dekat. Lapisan overlay yang tebal, transisi CSS, dan komponen yang berlapis dapat merusak preview kamera di dalam Cordova webview.
Rute migrasi yang praktis ke Capacitor
Migrasi Cordova ke Capacitor yang paling bersih dilakukan secara bertahap, bukan secara heroik. Tim akan mengalami masalah ketika mereka mengganti kontainer aplikasi, plugin pemindai, aliran izin, dan overlay UI sekaligus, lalu tidak dapat mengetahui perubahan mana yang menyebabkan aplikasi rusak.
Gunakan urutan ini:
-
Audit plugin saat ini
Daftar semua 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 plugin pemindai code. Dengan demikian, masalah kontainer dapat dipisahkan dari masalah plugin. -
Tetapkan plugin Cordova selama beberapa waktu jika diperlukan
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 di atas antrian.
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 komposisi tampilan adalah masalah dasar.
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, masalah biasanya adalah struktur layar atau CSS Anda, bukan decoding.
Hal ini juga merupakan titik awal migrasi ke Capacitor. Capacitor tidak menghilangkan bug kamera semua, tetapi biasanya memberikan batasan yang lebih jelas antara pengelolaan tampilan native dan UI web code. Untuk skanner barcode, @capgo/camera-preview menampilkan feed kamera hidup sebagai overlay native dengan kontrol yang dapat disesuaikan, sehingga Anda dapat mendekode frame di JavaScript tanpa preview berada di belakang webview. Untuk skanner bisnis pada perangkat Zebra, @capgo/capacitor-zebra-datawedge menangani profil DataWedge dan trigger skanner. Untuk alur kerja tag NFC, @capgo/capacitor-nfc mengatasi penemuan, membaca, dan menulis tag native pada iOS dan Android.
Proyek Cordova cenderung rusak dari usia plugin, pergeseran platform, dan asumsi tersembunyi di dalam integrasi yang lebih tua. Capacitor proyek mengungkapkan 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 menambahkan patch-patch perangkat khusus, hentikan menambahkan patch. Stabilkan layar scan, konfirmasikan apakah bug pratinjau 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.
