Login (semplice) e text trick

Benvenuti,

oggi andremo a vedere come realizzare un semplice login, molto semplice, ma come in questo caso non sempre abbiamo necessità di un login complicato.

I punti chiave di questa procedura saranno :

• login tramite mail e password che sarete voi a gestire e dare al vostro utente, non avremo quindi la fase di registrazione
• gestione dei dai in firebase 
• notifica errore tramite label 
• gestione del testo con alcuni componenti text.

Partiamo con la grafica!

Grafica spartana lascio a voi migliorarla, aggiungiamo i componenti che ci serviranno: due label che faranno visionare la scritta NOME UTENTE e PASSWORD e due textbox per far inserire proprio questi valori, un pulsante per accedere e in giallo (voi mettetela trasparente) potete notare una label che useremo per notificare eventuali errori durante il login. I dati verranno gestiti e salvati con firebase (gratuito per chi ha un account google e strumento molto potente) infatti in basso nella foto notiamo la scritta Realtime DB1 che ci indica la presenza di un componente non visibile, lo troviamo nella sezione data. Cliccando poi sull'ingranaggio in alto a sinistra possiamo accedere alla sezione impostazioni del progetto sulla destra e scendendo trovare la parte relativa a firebase dove inserire API Key e URL relativo al nostro firebase, nella documentazione è spiegato dove trovare questi dati ma nel caso servisse scrivete nei commenti per chiarimenti.

Abbiamo detto che sarà un login molto semplice infatti non avremo registrazione ma solo accesso con nome utente che è la mail e una password che il gestore darà all'utente preventivamente; come possiamo notare dalla foto in basso infatti abbiamo alcune mail che ci fanno accedere ad alcuni dati che io ho impostato in NOME e PASSWORD.

Prendiamo spunto per vedere anche la struttura dei dati e come lavora firebase, si parte dal nome del data base provathunkable che avrà al suo interno tutti i dati salvati come TAG o snodi, per esempio VENDITORE è un tag ma anche uno snodo che ci permette di raggiungere pippo@gmail*com che è un altro tag in questo caso salvato egli stesso all'interno del tag VENDITORE. 

Possiamo quindi capire che ci sono vari livelli , quasi come una matrioska possiamo entrare all'interno e trovare altri dati, ogni spostamento verso destra identifica un nuovo livello, fino a raggiungere un tag che ha anche un valore (un numero, un testo, una lista , etc) per esempio il tag NOME ha come valore PIPPO .Molto importante è capire la struttura per muoverci tra i livelli e anche capire come strutturare i dati per poterci muovere con facilità infatti avremo la necessità di richiamare i vari dai , di modificarli o aggiornarli. 

Nel nostro esempio abbiamo il tag venditore che ci farà accedere a tutte le mail dei venditori, che useremo come username essendo sicuramente univoche e conosciute dall'utente, e come sottolivello avremo altre due informazioni , nome e password. Vi faccio subito notare che la mail è scritta in un modo strano perché alcuni caratteri non possono essere usati all'interno dei tag e qui ci viene in soccorso il text trick :-) 

Certo si poteva usare un modo alternativo per organizzare i dati ma poi no avrei avuto lo spunto per il tutorial e cosa ancora più importante è nato tutto da un aiuto richiesto e non volevo far cambiare  i dati salvati.  

 

Detto questo passiamo al codice che vi invito a migliorare e potenziare sull'onda del mio suggerimento. La cosa più divertente spesso è trovare tutte le falle o comunque criticità del codice che andiamo a scrivere, immedesimarci nell'utente finale, di tutte le età, sesso, istruzione e creare qualcosa a prova di errore. Anni di studio e tanta esperienza sono le skills che rendono i tester dei veri duri, io non potendomi permettere un team o esperti esterni mi affido alla mia compagna per testare le app più importanti. Ogni strumento tecnologico si piega al suo cospetto quindi sono sicuro di trovare tutte le falle :-D 

Ritorniamo seri! Potete notare subito un if else visto che la cosa più banale che potrebbe succedere è premere il pulsante senza aver riempito entrambi i campi richiesti, ecco che contemporaneamente (and) andremo a verificare se le due textbox non sono vuote (not Tb_PASSWORD is empty) per poter accedere al cuore del codice, altrimenti (else) andremo semplicemente ad impostare il testo della LabelError per visualizzare una notifica che ricorda all'utente  di riempire tutti i campi! Ricordatevi che se utilizzate questo metodo per visualizzare un messaggio dovrete anche impostare un comando per pulire la textbox nel momento opportuno, in questo semplice esempio l'ho previsto solo a login effettuato correttamente. Ciò non toglie che si potrebbero impostare messaggi differenti per casi differenti, usare un componente specifico per le notifiche, mille personalizzazioni!

Nel caso di campi riempiti dobbiamo andare a verificare l'esattezza dei dati quindi il blocco get di Firebase ci permette di richiamare un determinato elemento (tag) utilizzando una chiave (key) avendo così come feedback un errore oppure il valore (with outputs) salvato nel database. I nomi sono leggermente cambiati dalla vecchia versione ma il concetto è lo stesso. Concentriamoci sul significato poi vedremo il modo utilizzato.

Il blocco get utilizza quello che è stato inserito nella textbox Tb_USER per creare il percorso all'interno del database per arrivare a prelevare il valore della password collegata a quella mail, in questo modo se la mail e la password sono corrette possiamo accedere all'app. Infatti se vediamo nella sezione then do del componente Realtime se il valore (value) prelevato tramite il nome utente è proprio uguale a quello che c'è scritto nella textbox Tb_PASSWORD allora puliamo la label usata per la notifica di errore e accediamo al prossimo screen (navigate to Screen2) altrimenti (else) sempre con la nostra label per le notifiche gli diciamo: ehi attendo stai sbagliando qualcosa, riprova!

Ricapitoliamo , prendiamo il valore del nome utente e lo usiamo per accedere al database e qui dobbiamo avere presente la struttura perché per raggiungere il nostro valore dobbiamo passare per tutti i tag/nodi inseriti aggiungendo uno "/" ad ogni livello.

Il nostro percorso finale sarà qualcosa del genere:  VENDITORE/PIPPO@GMAIL*COM/PASSWORD che darà come value in risposta  12345

Tutto questo percorso lo abbiamo creato unendo insieme (join) i termini noti come VENDITORE/ o /PASSWORD e la parte che varia e cioè il nome utente, tutto questo lavoro serve per inserire la chiave e prelevare il valore desiderato dal database.

No , non ho cambiato il codice, ho solo modificato la visualizzazione per avere tutto sotto controllo durante la spiegazione e lo potrete fare anche voi con un bel click di destra sul blocco get substring e premendo external input o Inline input.

Come anticipato firebase non accetta tutti i caratteri per il tag quindi ho dovuto trovare un modo per eliminare il punto all'interno della mail e sostituirla con un termine idoneo , nel mio caso ho scelto * , in questo modo l'utente inserisce la mail normalmente la modifico e faccio il mio controllo nel database dove avevo salvato la mia mail nel modo che mi occorre. Altro punto di forza di firebase e che da remoto possiamo controllare tramite una console i valori del nostro databse, modificarli e gestirli.

Avrei potuto utilizzare il più comodo blocco di testo che mi permette di sostituire un determinato termine (o più termini) con uno a mia scelta ma spesso il punto è utilizzato anche all'interno del testo della mail e quindi non posso usare questo metodo.

Ecco che ho pensato di utilizzare un altro blocco join per comporre la mia mail , unisco insieme tutto quello che trovo fino al punto escluso (quello primo del .com .it .org etc per capirci) con il mio termine speciale * e poi tutto quello che trovo dopo il punto. 

Schema del join :

• PIPPO@GMAIL
• * (in sostituzione del punto)
• COM 

Vediamo come prelevare queste porzioni di testo usando il blocco get substring.

Il primo dato che ci chiede è il testo da utilizzare (in text) e inseriamo proprio il blocco che riporta il testo di Tb_USER e poi dobbiamo indicare la posizione nel testo dove effettuare i tagli per estrapolare la porzione di nostro interesse.

Cliccando le scritte su sfondo più chiaro (es. first letter) si apre un menu con varie opzioni dove andiamo a selezionare first letter come inizio (from) e come fine (to) useremo quel blocco lungo lungo :-)

Cosa dice questo blocco? Find last (anche qui dal menu posso cambaire) occurrence of text mi indica la posizione all'interno del testo (Lb_USER) del mio cattivissimo punto , non di tutti ma solo dell'ultimo che troverà che è quello che cerco bypassando il mio problema. In realtà io non voglio prelevare anche il punto quindi una volta trovata la sua posizione andrò a sottrarre 1 al valore trovato.

Es. Testo analizzato PIPPO.PLUTO@GMAIL.COM , la posizione dell'ultimo punto all'interno del testo è 18 quindi se non voglio il punto dovrò utilizzare 18-1 = 17 che è proprio la posizione della L di GMAIL.

Stessa tecnica ma con valori differenti la useremo anche dopo , infatti modificando i menu gli diremo di prendere dalla posizione dell'ultimo punto +1 ( last occurrence+1 quindi escludiamo il punto) fino alla fine (last letter).

Unione finale (join)

• dall'inizio del testo fino alla lettera prima dell'ultimo punto 
• * (carattere speciale messo da me)
• dalla lettera dopo l'ultimo punto fino alla fine del testo    

Per questa notte credo che possiamo anche fermarci qui, quindi segnalatemi i vari errori di scrittura e ci vediamo al prossimo progetto.