Tutorial flash #6 - | Generatore di QR code |

 

Benvenuti!

Oggi andremo a vedere come generare un QR code e salvarlo nella nostra galleria, progetto molto semplice e veloce che mi è stato richiesto sempre da voi nella community. Nonostante sia molto semplice ho deciso di lasciarlo come tutorial visto che il QR code è tornato molto di moda ultimamente e quindi potrebbe essere utile a molti. Ho utilizzato Kodular per comodità visto che hai già nativo il componente per generare il QR code ma si possono trovare molto facilmente estensioni che fanno lo stesso , useremo poi anche l'estensione ( QUI il download) di PuraVida per aggiornare la galleria dopo il salvataggio per ovviare ad un errore che è frequente in varie versioni di android.

Nello screen dell'app ho aggiunto una textbox per inserire eventualmente il nome del file che sarà generato e una textbox per inserire il testo da trasformare in QR code, e sottolineo testo visto che può essere un testo qualsiasi e non per forza un link come spesso accade per comodità ( "In un solo crittogramma possono essere contenuti fino a 7.089 caratteri numerici o 4.296 alfanumerici " da wikipedia ).

Un button per generare il QR code e un canvas per visualizzare e poi salvare il png, avete letto bene useremo il canvas per la praticità con cui possiamo salvare l'immagine in esso contenuto come background.  

Il codice è veramente molto semplice ma vediamo come sempre nel dettaglio. Una variabile ci permette di salvare l' url del QR code generato così da poterlo richiamare anche al di fuori del blocco Got Response , la buona pratica serve sempre e spero che i miei tutorial servano anche per acquisire un metodo di lavoro che possa essere utile e efficiente, io ogni volta che imparo qualcosa cerco sempre di riportarvelo nel blog.

Tra i componenti Media andiamo a prendere QR code e inseriamolo nel progetto, tra i suoi blocchi preleviamo set text to  e ci servirà per trasmettere al componente il testo che sarà trasformato in QR code. Questo testo, numeri o link, lo prenderemo direttamente dalla textbox che abbiamo inserito nel progetto, quindi andremo ad usare il blocco tb_qrcode.text che ci fornisce proprio questo valore. Subito dopo lanciamo il blocco Generate QR Code che effettuerà la trasformazione, tutto questo dovrà avvenire alla pressione di un button , quindi lo andiamo a posizionare nel blocco when Button click. 

Questo codice oltre a generare il QR code andrà anche ad attivare il blocco when Got Response ( lo troviamo sempre tra i blocchi del QR code) che ci fornisce due informazioni importanti : l'esito dell'operazione ( success ) e l' url della nostra immagine. In questo caso, anche se non essenziale per il nostro progetto, è stato salvato nella variabile qrcode e servirà per identificare l'immagine nel caso ne avessimo necessità. Per esempio se avessimo solo voluto visionare il QR code si poteva utilizzate il componente Image e usare i dati salvati nella variabile per impostare l'immagine da visualizzare , quindi il nostro QR code.

Nel nostro caso invece andremo a utilizzare l' url per impostare l'immagine di background del nostro canvas così da ottenere una doppia funzione : visualizzare l'immagine e successivamente salvarla nella galleria. Infatti tra i vari blocchi del canvas abbiamo quello relativo ad un eventuale tocco della nostra tela , quindi il QR code, e lo useremo come evento per scaricare l'immagine.

Al momento del tocco When canvas touched andremo a salvare tramite il blocco call Save As l'immagine del nostro QR code nella galleria utilizzando come nome quello inserito nella textbox unito con l'estensione del file , nel nostro caso .png ma si posso utilizzare anche .jpg e .jpeg.

Come anticipato il tutto dovrà passare per il blocco call GalleryRefresh dell'estensione di PuraVida per poterlo visualizzare correttamente nella galleria del nostro smartphone. Se andiamo a salvare il tutto nella variabile, come da esempio, avremo anche il percorso del QR code all'interno della memoria del nostro smartphone. L'operazione sovrascrive i dati che avevamo nella variabile quindi dobbiamo fare delle scelte per decidere quali dati salvare a seconda del nostro progetto. Per la dimensione del canvas ho lascito automatico ma volendo si possono modificare a scelta , magari evitando dimensioni troppo grandi o fill parent che potrebbero generare problematiche. 

Ricapitolando. 

Inseriamo il nome nella textbox e il testo nell'altra textbox, alla pressione del pulsante creiamo il QR code e lo facciamo visualizzare nel canvas, nel momento in cui clicchiamo sull'immagine andremo a salvare nella galleria l'immagine in png e con il nome scelto.

Facile, no? Fatemelo sapere nei commenti 💪

PS. Attenzione nel codice è omesso ma conviene inserire un controllo sulla textbox vuota relativa al nome altrimenti non verrà effettuato il download poiché non andremo a comporre correttamente il nome il nome del file e quindi la sua creazione.