Liste che passione

 

Eccoci, oggi super tutorial , un argomento che non si può non conoscere, le liste. Probabilmente la maggior parte di voi conosce già l'argomento o pensa di conoscerlo 😂 , ma oggi coccoliamo un po' chi è alle prime armi e deve ancora ingranare con l'utilizzo delle liste. Naturalmente ho qualche spunto interessante anche per chi già conosce l'argomento che quindi potrebbe apprezzare lo stesso il tema.

Ma che cosa è una lista? perché dovrei preferirla ad una variabile? E allora si parte dalle variabili. Trattazione molto easy visto che non sono un tecnico ma cercherò di passarvi tutto quello che ho capito fino ad oggi.

Sorvolando la differenza tra variabili globali ( che si possono usare in tutto lo screen ) e le variabili locali ( che invece esistono solo in quella porzione di codice in cui sono create ) diciamo che in linea di principio la variabile è come un contenitore in cui salvare delle informazioni da richiamare e usare nel momento giusto. 

Cosa posso salvare in una variabile ? Dall' immagine sopra possiamo vedere dei numeri salvati, una parola, un booleano ( vero-falso) e anche stringhe strane o link , diciamo un po' di tutto. Quello che accomuna questa tipologia di salvataggi però è che l'informazione è unica o meglio è in una forma che dobbiamo usare come unico elemento ( manipolazioni particolari a parte che si possono fare), passatemi il termine .

Questa probabilmente è l'unica o la più importante differenza che poi ha portato alla creazione delle liste , quindi la possibilità di poter salvare più dati o più tipologie di dati contemporaneamente in un unico posto.  

Quindi la nostra casa puo' essere assimilata ad una variabile, anche se bella e spaziosa abbiamo un solo piano in cui salvare i nostri dati ammesso di non voler "dividere" in stanze 😂 ma dobbiamo essere dei bravi architetti. Le liste invece sono un po' come il nostro grattacielo, abbiamo a disposizione tanti piani ( elementi ) per poter salvare informazioni ma cosa ancora più importante abbiamo tutta una serie di informazioni e una struttura ad hoc che ci aiuta nella manipolazione dei dati salvati. Per esempio ogni elemento è identificato da una posizione ben specifica ( indice ) che ci permette di selezionarlo. Ancora meglio , sfruttando la potenza delle liste possiamo dividere ogni piano in altrettanti elementi , come se avessimo un grattacielo all'interno di ogni piano. Ma lo vedremo. Adesso due informazioni importanti, la foto non è sbagliata, siamo abituati a vedere il piano zero a livello del terreno ma per le liste il primo elemento è sempre in cima e si scende aumentando di valore , quindi se leggiamo gli elementi di una lista avremo il primo in alto e il decimo verso il basso. Questo ci servirà quando dobbiamo muoverci all'interno della lista per leggere i vari valori e fate molta attenzione , il valore zero in AppInventor e simili non esiste , si parte dal valore 1 , quindi richiamando l'indice ( posizione ) zero della lista avremo un errore. Basta pippone da prof che non sono e passiamo ad un bel esempio cosi capiamo tutto meglio, facciamo una cosa carina e nel frattempo vediamo i vari blocchi o almeno quelli più usati. 

Se siete stati bravi e siete arrivati fino a qui ecco la prima chicca, primo passaggio prendiamo alcuni dati e li visualizziamo semplicemente in una label ma il modo in cui lo faremo sarà troppo bello, almeno per me 😅 . Mettiamo un po' di roba nel carrello: ci servirà il componente file, un notifier, una label per visualizzare i nomi, una label per la lista dei nomi avvisati e una per quelli da avvisare, una textbox e due pulsanti. Per le posizioni e la grafica vi lascio carta bianca.

Naturalmente è un esempio inventato, senza utilità tanto per testare i blocchi. Creiamo una variabile NOMI, una DA AVVISARE e una AVVISATI. Come tutte le variabili anche le liste vanno inizializzate e in questo caso si utilizza il blocco empty list che identifica e organizza la struttura che riceverà la lista. 

Cosa faremo. Andremo a leggere i dati da un file csv creato da noi ed inserito in app, leggeremo tutti i dati in una label, poi li sposteremo nell'elenco da avvisare con il tasto INSERISCI o avvisati con il tasto AVVISATI, visualizzandoli in modo differente come da immagine. 

Immaginiamo quindi che dobbiamo fare una festa o un matrimonio e ho una lunga lista di amici da avvisare e devo avere tutto sotto controllo. 

1° STEP creiamo il nostro database con un semplice file csv 

Se abbiamo un pc abbiamo sicuramente un blocco note , cerca tra le app oppure sul desktop click di destra --> nuovo (o nuovo file) --> documento di testo.

Aperto l'editor scriviamo i nomi separati da una virgola es Marco,Giulio,Anna,etc poi salviamo il file e accertiamoci che in basso sia selezionata la codifica UTF-8 e aggiungiamo al nome del file l'estensione .csv , quindi come nel nostro esempio nomi.csv se si evitano le maiuscole è meglio.

2° STEP impostazione e avvio app   

Una volta salvato il file lo carichiamo come asset nella nostra app, come facciamo con le immagini, le variabili le abbiamo già create, andiamo a prendere il blocco when Screen Initialize che si attiva ogni volta che viene caricato lo screen in questione.

Appena parte il nostro screen con il comando Read From andiamo a leggere il nostro database in csv, il nome da inserire in file Name sarà quello del tuo file csv, compreso l'estensione finale e con un doppi slash nella parte iniziale , nessuno spazio particolare, quindi //nomedeltuofile.csv. La lettura di questo file va ad attivare il blocco when Got File ,sempre nel componente file, che salva in text il risultato della lettura e noi lo andiamo prontamente a codificare con il suo comando specifico ( ecco che le liste sono già ottimizzate per queste manipolazioni che altrimenti chiederebbero ben altre conoscenze ) list from csv row text e lo salviamo nella variabile lista NOMI. Quel blocco blue, che quindi sappiamo di trovare tra quelli delle liste, trasforma l'elenco creato da noi con tutti i nomi separati da virgola in una lista, inserendo ogni nome in un piano del nostro grattacielo. Adesso non ci rimane che settare la label nomi passando tutti i valori della variabile NOMI. Se controlli l'immagine dell'app potrai vedere nella label con lo sfondo giallo messa in alto tutta una serie di nomi tra parentesi tonde, bene quella è la visualizzazione standard di una lista in AppInventor ma poi vedremo di abbellirla.

Adesso iniziamo a giocare sul serio. Il matrimonio si avvicina sempre di più e le persone da avvisare aumentano, come promemoria sposto alcuni nomi nella lista da avvisare così appena li vedo , consegno l'invito e li sposto in quelli avvisati. Piano geniale 😁

Per fare questo inseriamo il nome nella textbox e premiamo il pulsante INSERISCI e qui in basso vediamo cosa dobbiamo impostare.

Prima di tutto dobbiamo essere sicuri di aver scritto un nome ( ma poi vedremo che dovrà essere anche corretto e presente) e non lasciare il campo vuoto quindi avremo bisogno di un controllo if then else . Se la textbox non è vuota ( quindi è piena ) allora aggiungo il nome alla lista DA AVVISARE e contemporaneamente lo elimino dalla lista NOMI, altrimenti gli darò troppe partecipazioni. Il primo blocco add items to list ha bisogno di sapere in quale lista andare a pescare il nome e cosa prendere , nel mio caso ho creato il csv con lettere tutte maiuscole quindi inserisco un blocco UPCASE che in automatico anche se l'utente scrive piccolo mi trasforma in maiuscolo quello che c'è nella textbox, il blocco textbox.text preleva il testo digitato. Attenzione questo è un piccolo trucco per evitare errori in quanto il nome scritto e quello salvato devono essere identici nella scrittura affinché il codice non dia errori. Subito dopo il blocco remove list item list elimina il nome spostato e per farlo ha bisogno di sapere in quale lista cercare e questa volta la posizione del nome, il suo indice. Fortunatamente ci viene in aiuto un altro blocco già pronto index in list thing che a fronte di una lista dove cercare e un elemento ci fornisce la sua posizione, perfetto. Anche qui uso lo stesso blocco per mettere tutto maiuscolo e premendo su questo blocco comparirà anche l'opzione per switchare a tutto minuscolo. Bene questi due blocchi aggiungi e rimuovi possono farti lavorare con le liste per decenni 😂 Posso anche finire qui ma visto che sono bastardo continuo e ancora per molto , prepara il caffè.

I più attenti avranno anche notato che ho aggiornato la label DaAvvisare e Nomi (ancora metodo grezzo con le parentesi a vista e nomi affiancati ) visto che effettivamente sono cambiati gli elementi altrimenti non vedrei nessun effetto, ho anche cancellato la scritta nella textbox così da essere già pronto per un nuovo inserimento. Non ci dimentichiamo che c'è sempre lo sbadato di turno , infatti noi previdenti abbiamo ipotizzato che se la textbox è vuota mandiamo una bella notifica per dire : ehi belin se non metti il nome come faccio a sapere cosa fare!

Adesso oltre al caffè facciamo attenzione.

Ho incontrato Penelope ,o meglio sono andato a casa che stava tessendo la sua tela e non si poteva muovere, ho consegnato la partecipazione e dopo aver scritto il suo nome clicco su avvisato. 

E qui mi sono fatto furbo perché adesso oltre a controllare se la textbox è vuota verifico anche se il nome inserito è effettivamente presente nella lista DA AVVISARE. L'operatore logico and mi fa capire che queste due condizioni devono avvenire contemporaneamente, quindi devo aver scritto ( textbox non vuota ) e scritto correttamente , nel nostro caso ci basta verificare che il testo è presente nella lista, altro blocco indispensabile per le liste e necessita semplicemente di sapere la lista da controllare e il nome . Ci risponderà con un vero o falso ( come sempre, andatevi a vedere il tutorial Hello  World 2 ) e se vero andremo a notificare all'utente se vuole effettivamente spostare il nome altrimenti dobbiamo per forza tirare le orecchie e dire allora sei duro , controlla cosa hai scritto se lo hai scritto 😂  

La prima notifica che abbiamo usato ha una scelta al suo interno, con due pulsanti da cliccare, che ci permette due risposte differenti che possono essere captate dal blocco After Choosing e qui andremo a modellare il nostro testo.

Solo in caso di risposta affermativa , quindi se choice è uguale al testo del pulsante SI andremo a rimuovere il nome dalla lista DA AVVISARE e aggiorniamo la label e aggiungiamo il nome alla lista AVVISATA e in questo caso non aggiorniamo la label ma bensì la ripuliamo per poter far partire il prossimo codice che ci permetterà di visualizzare un po' più decentemente la lista di nomi. Il blocco for each item in alcuni casi è molto comodo perché prende una lista e la scorre tutta salvando di volta in volta il valore nel blocco item , così facendo abbiamo una ripetizione automatica e non devo badare al numero eventuale da inserire , come succede con ripeti tot volte. Andando a vedere il codice il nostro amico cosa farà: per ogni elemento della lista , quindi per una lista lunga 10 elementi avremo 10 ripetizioni, salverà nella label ( join ) quello che già è presente ( label.text ) con il nuovo elemento ( item ) lasciando tra loro uno spazio o meglio andando a capo usando il comando \n .Così facendo avremo l'elenco nella sequenza corretta ma uno spazio iniziale dovuto al primo giro in cui  preleviamo un testo vuoto dalla label, questo però se non piace può essere risolto aggiungendo un trim tra il settaggio label e il blocco join. Molto più bella la visualizzazione incolonnata e senza le parentesi tonde vero? Sono contento, nemmeno io potevo vedere quelle parentesi e i nomi uno accanto all'altro.

Bene con i blocchi appena visti possiamo fare il 90% dei lavori , l'altro 10% lo vedremo tra poco ed è strettamente collegato al look up in pairs che ho trattato in vari tutorial discutendo delle liste di liste. Il prossimo argomento sarà proprio liste di liste e come usarle.

Liste di liste

Questa volta andremo ad usare tre label per elencare il NOME, COGNOME E TELEFONO, una textbox per inserire  i dati, due pulsanti per le azioni di caricamento e visualizzazione.  

Il codice sarà arricchito anche da altre informazioni come per esempio utilizzo di una variabile locale, il comando split, l'uso delle liste. Partiamo dai dati e come li abbiamo salvati, per creare una lista di liste giustamente serviranno almeno due livelli, il nostro grattacielo che per ogni piano dell'edificio contiene virtualmente un altro grattacielo .Per fare questo dobbiamo usare un primo make a list che crea il primo livello e poi un make a list per ogni elemento della lista ( secondo livello ). Quindi ogni elemento della lista AGENDA è formato a sua volta da una lista che dall'esempio potrete notare contenere tre dati, tre elementi, il nome, il cognome e il numero.

Il primo pulsante servirà per salvare i nostri contatti nell' agenda e per evitare di premere tre volte il tasto per salvare nome , poi cognome e poi numero ho deciso di inserire questi dati separati da virgola , quindi dobbiamo scrivere nome,cognome,numero e premere CARICA. Questo perchè andremo ad utilizzare un blocco molto carino del testo split at che mi permette , inserendo un testo ( text ) e dando come riferimento un elemento ( at ) di dividere questo testo in tanti pezzettini quanti elementi di riferimento ho e la cosa più bella è che mi inserisce tutti questi tagli in una lista. E' più semplice vedere che spiegare 😁 Prendendo il testo ALESSANDO,MAGNO,12354 e dando come riferimento per lo split la virgola avremo come risultato una lista di tre elementi separati , elemento1 ALESSANDRO elemento2 MAGNO , elemento3 12354 . Per non appesantire l'app con variabili inutili e visto che questi dati mi servono solo al momento dello split ho optato per la variabile locale che come anticipato esiste e vale solo per tutti quei blocchi che contiene . In questo caso è una lista e contiene i tre elementi splittati dopo l'inserimento. Una volta popolata la lista con i tre dati andiamo ad aggiungerli alla lista AGENDA ma attenzione perché il formato dei dati che inserisco deve essere il medesimo di quelli creati all'inizio . Il blocco add items to list avrà quindi un primo make a list che raggruppa 3 select list item che andranno a prelevare rispettivamente  il primo , il secondo e il terzo elemento della lista proveniente dallo split. Dopo il salvataggio mandiamo una notifica confermando di aver aggiunto un nome ai contatti, anche qui notiamo il gioco di join per comporre tutto il testo automaticamente, che quindi varierà autonomamente ad ogni inserimento usando il nome corretto.

Come nel primo caso le modifiche alle liste o variabili non hanno effetto con la visualizzazione per cui avremo bisogno di un VISUALIZZA e la tecnica precedente per metterli tutti in fila carini carini.

La nostra AGENDA  ormai ha già una decina di nomi e quindi possiamo usare un for each item per caricarli tutti e allo stesso tempo trascriverli, parte il codice mi viene passato il primo elemento della lista e andrò rispettivamente a mettere il primo elemento nella label nomi, il secondo nella label cognome e il terzo elemento nella label numero. Preleviamo come prima quello che già è presente nella label e lo uniamo andando a capo con i nuovi valori, lo stesso metodo di prima ma reiterato per le tre label .  

Nel codice di entrambi i pulsanti è stato omesso un bel particolare, vediamo se qualcuno lo scopre, magari lo potrete scrivere nei commenti o su facebook o su instagram.

Spero come sempre di aver dato spunti interessanti e utili e allo stesso tempo fatto vedere il funzionamento ed eventuali utilizzi dei codici.

Alla prossima 

 Se hai apprezzato il mio lavoro offrimi un bel caffè 😍