Scanner di QR Code con Capacitor

Ciao! Oggi voglio parlare un po' di Capacitor.
Era il lontano 2008 quando il progetto, prima PhoneGap e poi Cordova, permetteva di creare applicazioni mobili ibride.

L'idea era semplice quanto geniale: far girare una pagina HTML, CSS e JavaScript all'interno del componente WebView presente in ogni device mobile, convertendo il nostro "template" semantico in un .apk fisico (Android, tramite Android Studio) o in un'app iOS (tramite Swift).

Si poteva arricchire il tutto grazie ai plugin ufficiali o sviluppati dalla community, che comunicavano con il dispositivo per utilizzare la fotocamera, il giroscopio o cambiare colori della status bar.
Veramente fantastico: ogni web dev poteva creare la propria app cross-platform sfruttando le sue competenze in HTML, JS e CSS.

Col tempo, questa tecnologia è diventata ancora più potente grazie alla possibilità di accedere alle API native dei dispositivi, garantendo prestazioni migliori e integrazioni native nei nostri progettini.

Capacitor, erede di Cordova, permette di utilizzare plugin ufficiali proprio a questo scopo. Uno di questi è barcode scanner.

Installare il package è un gioco da ragazzi! Possiamo includerlo in qualsiasi progetto esistente. Io amo utilizzare Vue con Framework7, che ha un ottimo aspetto "Material"… vedere per credere.

bash

npm i @capacitor/core
npm i -D @capacitor/cli

Fatto questo lanciamo npx cap init per una configurazione guidata.

Ipotizziamo di voler creare un'app Android: dobbiamo scaricare Android Studio e tutti i tool necessari, creare un emulatore per testare la nostra app. Dopo aver scaricato tutto, l'ambiente di test è pronto.

Fatto questo installiamo il pacchetto Android e aggiungiamo la piattaforma al nostro progetto:

npm install @capacitor/android
npx cap add android

Possiamo aprire il nostro progetto direttamente in Android Studio grazie al comando npx cap open android o lanciare l'emulatore con npx cap run android. Grazie alla Capacitor CLI, tutto è già pensato per noi!

Per tutti i tool necessari in Android Studio, ti rimando alla documentazione ufficiale. Fatto questo, installiamo anche il plugin ufficiale per lo scanner di barcode:

npm install @capacitor/barcode-scanner
npx cap sync

Il plugin richiede una versione minima di Android: la 26. Se dovessimo riscontrare errori in console, possiamo aprire il nostro progetto in Android Studio, trovare il file variables.gradle ed inserire manualmente il valore minimo:

ext {
    minSdkVersion = 26
}

Nel nostro progetto, con poche righe di codice, configuriamo ed apriamo la fotocamera del device pronta a scannerizzare ogni tipo di barcode grazie a hint: CapacitorBarcodeScannerTypeHint.ALL.
Per necessità particolari possiamo anche specificare quale tipo di codice leggere. Qui la documentazione.

import {
  CapacitorBarcodeScanner,
  CapacitorBarcodeScannerTypeHint,
} from "@capacitor/barcode-scanner";

const startScanner = async () => {
  const result = await CapacitorBarcodeScanner.scanBarcode({
    hint: CapacitorBarcodeScannerTypeHint.ALL,
  });

  if (result?.value) {
    const isResult = result.value;
    console.log(isResult);
  }
};

Prima di testare il tutto, sincronizziamo il progetto JS con quello nativo lanciando il semplice comando: npx cap sync.

Che dire, Capacitor è un ottimo alleato nello sviluppo di applicativi Android/iOS. Vorrei utilizzarlo di più per prendere ancora più confidenza con altri plugin ufficiali e non… spero avrò l'occasione di giocarci.

Grazie per aver letto questo articoletto, alla prossima puntata.