Coffee App

Benvenuti.

L'avete visto il video su come ricreare un Memory ? 👉 VIDEO 

Piaciuto? 

Oggi invece ci soffermeremo su come utilizzare i componenti dynamic per realizzare una piccola app per prendere le ordinazioni nel nostro piccolo baretto di quartiere 😂 ( spero di realizzare anche il video, tu che formato preferisci ? Video o scritto? ) 

Scherzi a parte, lo sapete che mi piace sempre finalizzare quello che porto anche nella realizzazione di un app funzionante per evitare due cose: 1) entrare in tecnicismi che non mi appartengono 2) ripagare lo studio e la vostra attenzione con qualcosa di reale e funzionante. 

Ovviamente nei limiti , starà poi a voi rendere il tutto superlativo.

Cosa sono i dynamic component? In due parole sono alcuni dei componenti di base che possiamo creare dinamicamente da codice senza inserirli preventivamente nel nostro design editor, possono essere creati, modificati e "spostati" tramite codice. Per spostati intendo la possibilità di poterli muovere per esempio da un vertical arrangement ad un alto o in una card view.

Tramite un'estensione più potente invece possiamo estendere questi super poteri a tutti i componenti presenti in kodular e ampliare alcune funzioni o caratteristiche, abbiamo la possibilità di creare template, spero di portare qualche esempio.

Design editor

Partiamo subito con la parte grafica o almeno vediamo come ho realizzato io il layout della mia app e facciamo un parallelismo tra quello che si vede e quello che viene inserito da designer.

Sul lato sinistro in basso abbiamo la visualizzazione dell'app da smartphone mentre sul lato destro il nostro design editor.

Passiamo ai punti fondamentali poi ci penserete voi a renderla almeno carina. partendo dall'alto abbiamo il nome del nostro bar, una textbox per inserire il numero del tavolo e la data, le linee grigie ci fanno intuire che ho inserito il tutto in un vertical arrangement e giocato con l'allineamento dei componenti per rendere il tutto più carino, almeno un minimo. 

 

Scendendo, la parte centrale dell'app è un vertical scrollable all'interno del quale ho inserito un horizontal che riceverà altre vertical, queste possiamo vederle come le colonne che poi riceveranno Quantità, Prodotto, Prezzo, Tasto +, Tasto - . La prima riga di ogni colonna ha già al suo interno delle label che mi serviranno come intestazione così da far visionare il contenuto della colonna. In basso abbiamo il totale della spesa e più in basso dei pulsanti che mi permettono di accedere a dei List Picker per selezionare i prodotti salati, dolci o le  bevande. Il tasto ordina completa la schermata mentre per i componenti ci servirà il nostro immancabile clock , una label e un button nella versione dynamic, un notifier e il componente lottie.

Variabili e dati

Per i dati, come abbiamo detto più volte, ci sono mille modi, database locali o on line , file interni, formati diversi, tutte scelte da fare in funzione della quantità di dati, dalla velocità nel reperirli, etc 

Nel nostro caso ho riempito delle variabili impostandole come loste di liste, formato facilmente ottenibile da un csv o una tabella, quindi ipotizziamo che i nostri dati siano arrivato e li abbiamo introdotti correttamente nelle nostre variabili. Avremo tre mega liste con i prodotti salati, dolci e bevande e i rispettivi prezzi, una variabile indice che servirà per avere memoria di quanti dynamic abbiamo creato e una TOTALE in formato decimale con solo due cifre significative dopo la virgola.

Cosa otterremo? 

L'app parte con una piccola animazione che può anche essere utile eventualmente per scaricare dati on line da inserire nelle variabili.

I tasti in basso aprono le rispettive liste e al click sul prodotto li inserirà nella schermata ordine specificando le quantità, il prodotto e il prezzo.

Il click sul più o meno andranno a modificare le quantità e se premuto troppe volte in negativo , porterà all'eliminazione del prodotto stesso.

Il codice

Questa volta il primo blocco non sarà un initialize ma il blocco che identifica la fine dell' animazione e ci permetterà di mettere in pausa l'animazione, nasconderla e rendere visibile lo screen per la gestione dell'ordine. Vi ricordo la buona pratica di utilizzare i virtual screen il più possibile invece di appesantire di screen l'app. Ho scritto almeno due tutorial su questo, cerca multiscreen .

Adesso è il momento dell'inizializzazione e vediamo cosa fare, tra le prime operazioni dovremo salvare correttamente i dati ricevuti.

Dopo aver settato la label per azzerare il totale spesa, preleviamo la data con il componente clock e il format per ottenere quella specifica scrittura della data, da qui partono tre cicli che riempiranno di dati le variabili inserendo i prodotti e il loro prezzo come elemento singolo con il prezzo visualizzato a capo, le variabili così settate andranno a riempire il list picker corrispondente. 

In questo caso ho utilizzato tre variabili locali di appoggio, il for each leggerà tutti gli elementi della lista ( che sono formati da due elementi, nome e prezzo ) inserendoli poi nella lista locale incolonnati quindi separati da \n per andare a capo. Quindi ogni elemento sarà una lista da due elementi e alla fine avremo una lista di elementi singoli dove i due di partenza vengono riportati andando a capo.

Ecco un'immagine per capirci meglio, questa è la schermata che avremo quando cliccheremo per aggiungere le bevande, quindi il list picker relativo. Come possiamo notare le linee bianche ( che delimitano i vari elementi del list picker ) le abbiamo ogni due scritte, come anticipato elemento 1 ed elemento 2 sono stati inseriti andando a capo.

Dopo che i vari cicli hanno creato le nuove liste possiamo direttamente inserirli nel list picker con il relativo blocco set elements che vi ricordo accetta solo liste come dati, in alternativa abbiamo elements from string.

Visto che abbiamo parlato di list picker vediamo subito cosa succede dopo che abbiamo selezionato un elemento, ovviamente i codici saranno identici se non per la personalizzazione relativa al list picker in questione , quindi vi basta scriverne uno, copiarlo e cambiare il nome del list picker selezionandolo dal menu che si apre cliccando sui vari elementi.

Prendiamo come esempio LP ( list picker ) BEVANDE e prendiamo l'evento After Picking, quindi dopo la selezione ( cliccando sulla scritta dopo la copia potrete selezionare anche gli altri ). La prima cosa che vado a fare è aggiornare il totale dell'ordine quindi settiamo la variabile TOTALE come il suo valore attuale sommato i prezzo della bevanda inserita. Non fatevi ingannare dall'indice 2 del select list item, vi ricordo che ora anche se incolonnati sono un unico elemento , non più due elementi di una lista, quindi per prendere il nostro prezzo useremo i blocchi testo andando a splittare usando come elemento di divisione lo spazio. Questo blocco ad ogni spazio che incontra effettua un taglio eliminando lo spazio ( l'elemento di divisione ) e inserendo tutti gli elementi creati in una lista. Nel nostro caso abbiamo un solo spazio quindi avremo solo due elementi della lista , quello prima e dopo lo spazio, con indice due preleviamo il testo dopo lo spazio , quindi il prezzo. Ho lasciato volutamente il blocco selection del LP per fissare meglio cosa stiamo facendo ma guardando il LP del SALATO possiamo notare che si può utilizzare semplicemente il blocco selection che ci restituisce l'evento. 

La seconda parte invece manda in esecuzione una procedura, che vedremo tra poco, passando come valori il nome del prodotto e il suo prezzo già separati. Prendiamo quindi una nuova procedura, la rinominiamo, e tramite l'ingranaggio aggiungiamo due input. Vediamo cosa mettere al suo interno, non vi spaventate vedendo la lunghezza , alla fine è molto semplice come meccanismo, lungo ma semplice.

La procedura che useremo in sequenza per tutti gli elementi è direi banale, andremo a creare il nostro elemento dinamico, 3 label e 2 button, imposteremo i parametri che ci occorrono come il testo , la grandezza o il colore e il gioco è fatto. Teniamo sempre in mente che al momento della creazione dobbiamo assegnare un ID unico per ogni elemento che poi ci permetterà di interagire con il componente creato.

Se dopo la selezione avevamo aggiornato il totale adesso aggiorniamo la label per mostrarlo utilizzando anche il blocco matematico format as decimal per avere sempre la visualizzazione dei centesimini maledetti , si proprio quelli che abbiamo in quantità industriali solo per perderli all'interno della lavatrice durante i lavaggi 😂 Il numero due identifica quante posizioni visualizzare dopo la virgola.

La variabile INDICE avrà il compito di creare un nuovo numero da assegnare al componente creato , quindi ad ogni creazione dovremo incrementare di uno il suo valore.

Vediamo la prima label nello specifico poi applicheremo lo stesso metodo agli altri componenti.

Dopo l'indice andiamo a creare la prima label assegnando il valore per ID e specificando dove inserire l'elemento creato , nel nostro caso avevamo inserito un vertical arrangement per ogni colonna da visualizzare. Partiamo dalla prima dalla sinistra , la quantità del prodotto, quindi VA_QTA, in sequenza andremo a impostare il testo ad 1 perché ho deciso di aggiungere sempre un prodotto per volta e modificare le quantità con i pulsanti. Html true non ci servirà ma ci fa capire che possiamo attivare questa proprietà delle lebal anche per i dynamic. Di seguito impostiamo grandezza del font e altezza della label , l'ID dovrà essere sempre lo stesso i parametri dobbiamo vedere noi a seconda del nostro progetto. Direi molto semplice, creiamo e poi tutti i blocchi a seguire sono per impostare le varie proprietà, una volta finito passiamo alla label successiva non prima di avere aumentato di uno l'indice altrimenti ci darà errore.

Con il nuovo ID creiamo la nuova label e impostiamo i valori , inseriamo nel VA_PRODOTTO ed usiamo uno degli input assegnati dalla procedura, quelli passati dopo la selezione, per assegnare il testo della label, ovvero il nome del prodotto. Seguiamo con i soliti settaggi per la grandezza testo etc.

Ormai siamo bravissimi e in pochi click abbiamo creato anche la label del prezzo utilizzando il secondo input impostato all'inizio. 

L'ultima parte del codice invece crea i due button e visto le cose monotone non mi garbano, come dico qui, ho inserito un ciclo e modificato ad hoc per far generare i due pulsanti diversi. Come mi piace questa tipologia di if , quando posso cerco sempre di inserirlo 😂 Tutti i then e tutti gli else devono contenere le informazioni dello stesso button , la condizione che discrimina non credo nemmeno di doverla spiegare visto che nel nostro caso abbiamo solo due giri.

Se avete problemi nella lettura magari me lo scrivete nei commenti.

Adesso dedichiamoci all'ultimo pezzo di codice , ci manca infatti la possibilità di cliccare sui piccoli pulsanti per modificare le quantità ed eliminare eventualmente il prodotto. Vi starete chiedendo perché ho utilizzato gli any component quando si poteva utilizzare direttamente il blocco del dynamic button, bene me lo sto chiedendo anche io mentre scrivo questo tutorial 😂 questo per farvi capire quanto tempo passa da una mia idea a quando ho il tempo di realizzarla .

Molto probabilmente in origine volevo utilizzare solo label ma l'evento click non é presente per i dynamic , ma non ne saremo mai certi 🙈

L'importante è poter ricevere al click l'ID del componente per poi effettuare le modifiche, al click avremo due possibili attività, aumentare o diminuire le quantità ma mentre nel primo caso non abbiamo problemi nel secondo dobbiamo fare attenzione nel momento in cui si arriva ad una quantità perché con un altro click cancelleremo il prodotto. 

Con il primo controllo verificheremo se il testo del button cliccato è più e in tal caso non dovremo modificare ID cliccato ma quello della label quantità di quella riga, quindi ci basterà sottrarre 3 e il gioco è fatto. Con il nuovo ID andremo a prelevare il testo e aggiungere una quantità, modifichiamo il totale e aggiorniamo la label.

Nel sottrarre abbiamo accennato che se la quantità è uno , quindi arriveremo a zero, dobbiamo eliminare il prodotto ma è sempre buona norma chiedere conferma per le operazioni importanti quindi ho pensato fosse più corretto aggiungere una notifica. In caso contrario sottraiamo normalmente come abbiamo fatto prima con la somma con la piccola accortezza che adesso dovremo tornare indietro di 4 componenti. Modifichiamo il testo, cambiamo il totale e aggiorniamo la label. 

Non ci resta che gestire la scelta della notifica quindi se la scelta sarà di eliminare dovremo manualmente eliminare i componenti e naturalmente sottrarre il prezzo dal totale, quindi stiamo cliccando sul meno dovremo togliere 2 unità all'ID.

I blocchi delete lavoreranno con l'ID cliccato e altri 4 per eliminare l'intera riga 
 

Il pulsante ordina è solo per concludere il ciclo dell'app e dovrà essere settato a seconda di come vorrete inviare l'odine .

Questi componenti dinamici sono molto interessanti e l'estensione li rende ancora più potenti non solo per il fatto di ampliare la gamma ma anche per la possibilità di poter creare dei template che velocizzano la creazione.

Spero sia stato interessante e abbia portato nuovi spunti, ora mi aspetta una bel biberon 👶😂

Raffaele

 
   Hai apprezzato il mio lavoro?Se ti va puoi offrirmi un bel caffè 😍