Benvenuti alla quinta lezione, nella lezione precedente avete testato l'applicazione AppContatti utilizando l'emulatore del computer oppure quello del cellulare.

In questa nuova lezione modificherete l'applicazione AppContatti utilizzando una ListView per visualizzare i contatti aggiunti.

Prima di procedere dovete imparare a gestire una lista, perché una  ListView si può popolare attraverso l'uso di una lista.

Gestione Liste (List)
Una lista è un vettore a cui si possono aggiungere voci utilizzando il blocco add items to list, come mostra l'esempio seguente.

Il blocco initialize global (lo travate in Variables) associato al blocco create empty list (lo trovate in List) inizializza una variabile di nome lista.

I blocchi get e set associati  al blocco initialize global permettono rispettivamente di ottenere i valori della lista oppure assegnare valori alla lista.

Nell'esempio seguente potete vedere come si aggiunge un valore ad una lista di nome lista.

Per ottenere il blocco get, dovete posizionare il mouse al blocco initialize global vicino al nome della lista, quando appare il blocco get trascinatelo ed associatelo al blocco add items to list.

Ad ogni voce aggiunta ad una lista, corrisponde un valore chiamato indice, questo valore corrisponde alla posizione della voce all'interno della lista. 

Facendo riferiemento all'esempio precedente, il nominativo Rossi Alberto corrisponde all'indice 1, perché è il primo valore della lista.

Per leggere una voce dalla lista si usa il blocco select list item associato al blocco get della lista di riferimento e all'indice corrispondente.

L'esempio seguente permette di leggere la prima voce dalla lista di nome lista.

Per rimuovere una voce dalla lista si usa il blocco remove list item associato al blocco get della lista di riferimento e all'indice corrispondente.

L'esempio seguente mostra come rimuovere dalla lista di nome lista, la terza voce aggiunta.

Gestione ListView
Una ListView è un elenco di valori selezionabili. Questo componente è presente nella cartella User Interface dell'Area Designer. Per usare questo componente, basta selezionarlo e trascinarlo all'interno dello schermo attivo.

Per inserire gli elementi manualmente, si può usare la proprietà ElementsFromString, inserendo i valori dell'elenco separati da una virgola, come mostra l'immagine seguente:

Per inserire gli elementi durante l'esecuzione dell'App, dovete usare una Lista ed associarla al blocco Set della ListView, con  la proprietà Elements impostata, come mostra l'immagine seguente:

Il Blocco When AfterPicking di una ListView, si attiva quando si selezione un elemento dall'elenco, ed esegue tutti i blocchi interni.

Per conoscere l'elemento scelto dovete usare il blocco get della ListView, con la proprietà Selection impostata, l'immagine seguente assegna il valore scelto dalla ListaContatti alla casella di testo txt_risultato.

Come aggiungere i contatti inseriti nella maschera di input dell'AppContatti alla ListView
Selezionate la casella di testo txt_risultato nell'area components e cliccate sul bottone delete per cancellare la casella di testo.

Successivamente nell'Area Palette, selzionate il componente ListView e trascinatelo sullo schermo nella stessa posizione dov'era posizionata la casella di testo txt_risultato.

Per evitare di popolare la ListView, con tutti i dati del contatto, create due liste, la prima la chiamate contatti la seconda nominativi. La prima lista verrà usata per visualizzare i dati del contatto, la seconda lista verrà usata per popolare la ListView solo con i nominativi dei contatti, l'immagine seguente mostra come aggiungere le informazioni alle liste e come popolare la ListView ListaContatti con i nominativi dei contatti quando si clicca sul bottone salva.

Come visualizzare un contatto scelto dalla ListView dell'AppContatti
Selezionando un nominativo dalla ListView ListaContatti, potete ottenere l'indice della voce selezionata usando il blocco get seguente:

Usando l'indice della voce selezionata, potete ottenere dalla lista contatti, il contatto corrispondente, come mostra l'immagine seguente:

La variabile contatto conterrà tutte le voci del contatto scelto, separate tra loro con una virgola. Utilizzando il blocco split è possibile separare le singole voci tra loro ed aggiungerle ad una lista, come mostra l'immagine seguente:

Infine leggendo i valori dalla lista voci_contatto è possibile visualizzare tutte le informazione del contatto scelto nella maschera dell'AppContatti, l'immagine seguente mostra il codice completo:

A questo punto potete provare l'APP lanciando avviando aiStarter sul computer oppure sul cellulare ed avviare l'emulatore, come indicato nella lezione precedente.

L'immagine seguente mostra la schermata dell'emulatore in esecuzione sul computer.

<< Lezione precedente           Lezione successiva >>

T U T O R I A L S    S U G G E R I T I

• Excel delle Meraviglie
• Ricominciamo ... dal Linguaggio SQL
• Come sviluppare un Sito con Wordpress

Benvenuti alla terza lezione, nella lezione precedente avete imparato a disegnare un Diagramma E-R partendo dalle specifiche funzionali forntite dall'Analista Funzionale. In questa lezione vedrete, come si trasforma il Modello E-R nel Modello Relazionale.

Il Modello Relazione è uno schema logico che rappresenta l’artefatto principale della fase di Progettazione logica, descrive le Tabelle di un Database e le relazioni esistenti tra loro. Questo modello si ottiene dallo studio e dalla trasformazione del Modello E-R, disegnato durante la fase di Progettazione concettuale.

Per trasformare il Modello E-R  in Modello Relazione, si procede come segue:

1. Tutte le Entità diventano Tabelle
2. Le Relazioni diventano Tabelle se sono di tipo molti a molti, altrimenti se sono di tipo uno a molti, si trasformano in relazioni tra chiavi primarie e chiavi esterne
3. Le Caratteristiche delle Enitità diventano Colonne
4. Le Caratteristiche che non accettano duplicati diventano chiavi primarie (PK) se sono relazionate con una chiave esterna (FK) oppure diventano colonne con valori unici o indici unici (U). In una tabella ci può stare una sola chiave primaria (PK) e molti indici unici (U).
5. Una Caratteristica che assume più valori ridondanti, diventa una nuova Tabella detta tipizzata, che contiene i valori che la caratteristica può assumere. Nella tabella principale. la caratteristica viene sostituita da una chiave esterna (FK).
6. Infine tutte le tabelle del Modello Relazionale dovono essere Normalizzate.

NORMALIZZAZIONE

Principali regole di NORMALIZZAZIONE di una Tabella:

1. Unicità del Dominio: in ogni Tabella deve esistere una colonna oppure un insieme di colonne che rendono i record unici. Il modo più semplice per rispettare questa regola è quello di aggiungere sempre ad una Tabella una colonna id, di tipo chiave primaria (PK);
2. Eliminare la ridondanza delle informazioni: la ridondanza in una Tabella si presenta quando le informazioni in una colonna sono sempre dello stesso tipo e si ripetono, come avviene ad esempio per i generi, gli editori egli autori dei libri;
3. Eliminare i campi calcolati: in una Tabella non s’inseriscono mai colonne dove il valore può essere ricavato da un calcolo fatto usando i valori di altre colonne. Ad esempio se avete una colonna imponibile ed una percentuale_iva è inutile aggiungere una colonna che contiene l’imposta, perché imposta=imponibile* percentuale_iva/100.

In questo esempio la caratteristica  contatti di tipo multivalore, che appartiene all’Entità Lettore del Modello E-R, viene trasformato in una Tabella nel Modello Relazione corrispondente. Questa Tabella contiene i contatti dei Lettori e l’associazione con il lettore avviene attraverso la chiave esterna codice_lettore.  Essendo il tipo_contattto un valore ridondante, deve essere normalizzato usando la Tabella tipo_contattto.

Per concludere, di seguito il  modello E-R del Database per gestire i libri dati in prestito  ed il modello Relazionale che si ottiene dopo la trasformazione.

<< Lezione precedente           Lezione successiva >>

T U T O R I A L S    S U G G E R I T I

• APP Mania
• Excel delle Meraviglie
• Come sviluppare un Sito con Wordpress

Benvenuti alla quarta lezione, nella seconda lezione avete disegnato lo schermo dell'APPContatti utilizzando l'Area Designer di App Inventor, per gestire l'inserimento ed il salvataggio di un contatto, come mostra l'immagine seguente:

Nella terza lezione avete  implementato la logica dell'APPContatti, utilizzando i blocchi di programmazione dell'Area Blocks di App Inventor, ottenendo il risutato seguente:

In questa lezione vedrete come eseguire l'APPContatti, utilizzando l'emulatore del computer oppure l'emulatore del cellulare.

Come eseguire l'APPContatti sul computer con l'Emulatore aiStarter
Per installare l'emulatore sull vostro computer cliccate sul link: scarica emulator e seguite i passi seguenti:

Posizionatevi sullo Step 1 e cliccate sul link che corrisponde al sistema operativo installato sul vostro computer, come mostra l'esempio.

Step 1. Install the App Inventor Setup Software

    Instructions for Mac OS X
    Instructions for Windows
    Instructions for GNU/Linux

Successivamente cliccate sul link: Download the installer per scaricare il file d'installazione.

Dopo il Download, eseguite il file d'istallazione, assicurandovi di essere collegati con un'utenza con diritti di amministrazione. Dopo l'avvio rispondete yes al messaggio seguente per completare l'installazione.

Per avviare l'emulatore, dovete lanciare il programma aiStarter, collegato all'icona seguente.

Successivamente per eseguire l'APPContatti, dovete selezionare i comandi, Connect, Emulator, come mostra l'immagine seguente:

Aspettate qualche minuto per permettere all'emulatore di caricare l'APP, dopodichè la potete testare.

Dopo aver testato l'APP sul vostro computer, chiudete l'emulatore cliccando sulla x in alto a destra, selezionate di nuovo sull'icona aiStarter e premete contemporaneamente i tasti ctrl c nella finestra di aiStarter.

Come eseguire l'APPContatti con un cellulare Android
Scaricate ed Installate sul cellulare l'APP MIT AI2 Companion, utilizzando l'APP Store del cellulare.

Per avviare l'emulatore sul celluare ed eseguire l'APP, assicuratevi che il cellulare sia collegato al WiFi, selezionate Connect, AI Companion, come mostra l'immagine seguente.

Questa operazione, permette di attivare la finestra Connect Companion, con il codice (numero di 6 cifre) oppure il QR Code da leggere per caricare l'APPContatti sul cellulare.

Lanciate l'APP MIT AI2 Companion sul cellulare, inserite il codice di 6 cifre e cliccate sul pulsante connect with code, altrimenti leggete il QRCODE fornito usando il pulsante scan QR code.

Attendete un attimo per poter testare l'APP direttamente sul vostro cellulare.

<< Lezione precedente           Lezione successiva >>

T U T O R I A L S    S U G G E R I T I

• Excel delle Meraviglie
• Ricominciamo ... dal Linguaggio SQL
• Come sviluppare un Sito con Wordpress

Benvenuti alla seconda lezione, nella lezione precerdente avete visto il modello a cascata che descrive tutte le fasi che servono per progettare, implemetare e manutenere un Database.

Tra le fasi previste dal modello a cascata:

1.Analisi
2.Progettazione
3.Implemetazione
4.Validazione
5.Manutenzione

la progettazione è sicuramente quella più importante, perchè vengono prodotti tre artefatti indispensabili per l'implemetazione del Database con il linguaggio SQL:

1. Modello E-R (Schema concettuale)
2. Modello Relazionale (Schema logico)
3. Modello Fisico (Schema fisico).

La fase di progettazione è strutturata nel modo seguente:

Il Team di porgettazione parte dalle Specifiche funzionali fornite dall'Analista funzionale raccolte durante la fase di Analisi e produce tutti gli artefatti che servono per poter implemetare il Database.  

Il Modello E-R

Il Modello Entità-Relazione (E-R) è uno schema concettuale che rappresenta l’artefatto principale della fase di progettazione concettuale, descrive le Entità di un Database, le loro caratteristiche e le relazioni esistenti tra loro. 

Un’Entità è un gruppo omogeneo d’informazioni (libro, lettore, Cliente, Fornitore, …) che potenzialmente potrebbe diventare una Tabella del Database.

Una relazione è l’associazione che esiste tra due Entità, anche una relazione è una potenziale tabella, ma il suo ruolo è quello collegare tabelle diverse tra loro, ad esempio la relazione esistente tra un libro ed un lettore è quella che il lettore può prendere in prestito il libro.

Per disegnare un Modello Entità-Relazione (E-R) si usano i seguenti simboli, chiamati anche diagrammi e associazioni:

L’esempio seguente mostra il Modello/Diagramma E-R per creare un Database per la gestione di libri dati in prestito, con le seguenti specifiche funzionali:

Ad esempio il tipo di relazione che esiste tra un libro ed il suo autore è di uno a molti, perché un libro ha un solo autore, ma un autore può aver scritto più libri.

Invece il tipo di relazione che esiste tra una particolare edizione di un libro ed il suo codice isbn è di uno ad uno, perché il codice isbn di un libro è associato unicamente a quella edizione e non ad altre.

Di solito in un Diagramma E-R oltre ad indicare i tipi di relazioni tra Entità, bisogna espreimere anche la cardinalità.

La cardinalità è un modo più preciso di espreimere l'associazione tra due  Entità, per ogni Entità si può esprimere la cardinalità minima e quella massima nella forma (Min,Max).

Di seguito sono indicati i casi possibili:

(1,1) : obbligatoria, una sola volta

(1,N) : obbligatoria, almeno una volta

(0,1) : opzionale, una sola volta

(0,N) : opzionale, N volte

La   cardinalità   Minima   indica l’obbligatorietà dell’associazione, se è uguale a zero non è obbligatoria, se  è  uguale  o  maggiore   di   uno  è obbligatoria, quella Massima indica quante volte l’associazione con l’Entità corrispondente è possibile, vediamo alcuni esempi:

Le cardinalità Massime indicano che un libro può avere un solo codice_isbn e viceversa. Le cardinalità Minime indicano che  l’associazione è obbligatoria in entrambi i versi. Inoltre osservando le cadinalità massime si può capire il tipo di relazione, in questo caso è un tipo di relazione uno ad uno.

Le cardinalità Massime indicano che lo stesso libro può essere letto da lettori diversi e che lo stesso lettore può leggere libri diversi. La cardinalità Minima, uguale a zero, indica che l’associazione non è obbligatoria in entrambi i versi. In questo esempio il tipo di relazione è molti a molti.

Un libro può essere scritto da un solo autore,  un autore può scrivere più libri. In questo caso l’associazione è obbligatoria in entrambi i versi, perché entrambe le entità hanno la cardinalità Minima uguale ad uno. In questo esempio il tipo di relazione è  uno a molti.

<< Lezione precedente           Lezione successiva >>

T U T O R I A L S    S U G G E R I T I

• APP Mania
• Excel delle Meraviglie
• Come sviluppare un Sito con Wordpress

Benvenuti alla terza lezione di APP Mania, nella lezione precedente avete visto i principali componenti dell'area Designer ed avete completato il desegno dello schermo dell'APPContatti,  adesso vedrete l'Area Blocks dov'è possibile implementare la logica per rendere l'applicazione interattiva.

L'Area Blocks è un vero e proprio ambiente di programmazione, qui è possibile implementare la logica dell'applicazione utlizzando un linguaggio visuale composto da blocchi che corrispondono alle istruzioni di un linguaggio di programmazione.

Quest'area è divisa in due parti, a destra c'è la parte Viewer, dove si aggiungono i blocchi che servono per programmare, a sinstra c'è la parte Blocks, dive sono raggrupati tutti i blocchi organizzati per tipo.

Con App Inventor l'applicazione assomiglia ad un puzzle, perché i programmi si scrivono con blocchi interconnessi, ciascuno con un significato diverso.

Per accedere all'Area Blocks, collegatevi ad App Inventor e cliccate sul bottone Blocks, dopo questa oprazione appare la maschera seguente:

I blocchi che servono per sviluppare un'applicazione con App Inventor sono raggruppati per tipi e li trovate nella sezione Built-in, nell'immagine seguente sono descritti tutti i tipi disponibili.

Oltre ai blocchi della sezione Built-in, ci sono anche blocchi associati ai componenti dello schermo, con questi blocchi è possibile modificare le loro proprietà oppure eseguire particolari azioni quando si verifica un evento, come ad esempio il click su un bottone.

Come implementare la logica dell'applicazione APPContatti

La nostra APP deve permettere le seguenti operazioni:

1. Inserimento dati nella maschera di input;
2. Visualizzazione del contatto inserito nella casella risultato, quando si clicca sul bottone Salva;
3. Pulizia dello schermo e posizionamento del cursore nella casella di testo nome, quando si clicca sul bottone Reset.

Per scrivere il programma che vi permette di implementare le operazioni richieste, servono i seguenti blocchi di programmazione:

1) Blocco Evento

Il blocco evento lo trovate cliccando sul nome del bottone corrispondente, basta selezionarlo con il mouse per aggiungerlo all'Area Blocks.

2) Blocco Get

In questo esempio il blocco get restituisce il valore alfanumerico Mario scritto nella casella di testo txt_nome. Il valore Text, indicato sulla destra del blocco, corrisponde alla proprietà Text della casella di testo corrispondente.

Il blocco get lo trovate cliccando sul nome della casella di testo corrispondente, basta selezionarlo con il mouse per aggiungerlo all'Area Blocks.

3) Blocco Set

Nell'esempio seguente viene assegnato alla casella di testo txt_nome il valore alfanumerico Mario:

Il blocco usato per indicare il valore alfanumerico da inserire, lo trovate nel tipo Text della sezione Built-in e corrisponde al blocco seguente:

Il blotcco set è importante soprattutto perché permette di modificare una proprietà qualunque del componente a cui è associato. In questo caso essendo indicata la proprietà Text, si assegna un valore alla casella di testo txt_nome. Usando le freccette presenti sulla destra del nome del componente e del nome della proprietà, si possono modificare componenti diversi e proprietà diverse, come mostrano i due esempi seguenti:

4) Blocco Join

Il blocco join lo trovate nel tipo Text della sezione Built-in.

Come implemetare la logica del bottone Salva

Dopo aver visto quali sono i blocchi da utilizzare per sviluppare la vostra APP, adesso potete procedere con l'implemetazione logica dei blocchi. 

Selezionate il componente but_salva, lo trovate nel pannello Blocks a sinistra dell'Area Blocks e cliccate sul blocco evento Click per aggiungerlo all'Area Blocks.

Successivamente selezionate la casella ti testo txt_risposta e scegliete il blocco set con la proprietà Text.

Trascinate il blocco set appena aggiunto, all'interno del blocco evento click.

Aggiungete un blocco join e predisponetelo in modo da poter concatenare fino a 9 valori alfanumerici, come mostra l'immagine seguente. Per aggiungere più valori alfanimerici al blocco join, dovete cliccare sull'asterisco blu e trascinare il blocco string nel blocco join.

Dopo aver aggiunto 9 blocchi string al blocco join, associatelo al blocco set txt_risultato.

L'obiettivo è quello di visualizzare, quando si clicca sul bottone salva, i valori inseriti nella maschera di input (contatto),  nella casella di testo txt_risultato, separando i valori con la virgola.

Per ottenre questo risultato, dovete concatenare tra loro tutte le caselle di testo, aggiungendo una virgola dopo ogno valore, come mostrano l'immagini seguenti.

Come implemetare la logica del bottone Reset

Il bottone Rest serve per pulire lo schermo e posizionare il cursore nella casella di testo txt_nome, per implementare la logica che serve per eseguire queste azioni eseguite i passaggi seguenti.

Selezionate il componente but_reset, lo trovate nel pannello Blocks a sinistra dell'Area Blocks e cliccate sul blocco evento Click per aggiungerlo all'Area Blocks.

Poi aggiungete al blocco evento Click, i seguenti blocchi get: txt_nome, txt_cognome, txt_cellulare, txt_mail, txt_skype e txt_risultato.

Ad ogni blocco get appena aggiunto, associate un valore alfanumerico vuoto, serve per pulire le caselle di testo.

Per concludere dovete aggiungere al blocco evento Click, il blocco di controllo RequestFocus che serve per spostare il cursore nella casella di testo txt_nome.

Il blocco di controllo RequestFocus lo trovate nel pannello Blocks a sinistra dell'Area Blocks, selezionando il componente txt_nome e corrisponde al blocco seguente.

L'immagine seguente mostra il blocco evento Click, associato al bottone but_reset, implemetato.

<< Lezione precedente           Lezione successiva >>

T U T O R I A L S    S U G G E R I T I

• Excel delle Meraviglie
• Ricominciamo ... dal Linguaggio SQL
• Come sviluppare un Sito con Wordpress