vai al contenuto principale

Crea la tua prima applicazione

Utilizziamo il Designer e la Dashboard per modellare, generare e avviare una Cloudlet. Dopodiché, interagiamo con l'applicazione generata.

È il momento di creare il nostro primo modello. Per ora ci occuperemo di gestire l’anagrafica dei dipendenti dell’azienda come descritto nello Scenario di esempio.

Modella l’applicazione #

1. Apri la Dashboard #

Dashboard desktop icon Avvia la Dashboard. Se hai seguito la guida all’installazione dovresti trovare un collegamento sul desktop con l’icona in figura.

Screenshot dashboard

Una volta effettuato il login, la Dashboard si presenta come in figura, suddivisa nelle seguenti schede:

  • Engine Library: una raccolta di engine archiviati che possono essere estesi e riutilizzati in qualsiasi momento;
  • Cloudlets: un elenco di tutte le Cloudlet create nel tuo account.

Più avanti approfondiremo le altre funzionalità della Dashboard; per ora il nostro focus è creare e avviare una Cloudlet funzionante.

2. Crea una Cloudlet #

Per prima cosa, clicca sul bottone New cloudlet in basso nella scheda Cloudlets. Osserva il riquadro azzurro che è appena comparso:

Screenshot cloudlet vuota

  • nella parte alta sono presenti un nome – in questo caso Livebase ha assegnato il nome di default NewCloudlet1 – e un indirizzo URL; quest’ultimo dipende dal server di hosting dove la Cloudlet è stata dispiegata, dal tuo username e dal nome della Cloudlet. Se ad esempio il tuo username è johndoe, la Cloudlet avrà indirizzo https://hs3.fhoster.com/johndoe/NewCloudlet1. Per questo motivo, ogni Cloudlet che crei deve avere un nome univoco;

  • al centro ci sono tre icone: lista dei membri, engine e database;

  • un messaggio in basso indica lo stato della Cloudlet. Al momento non è possibile avviarla poiché non abbiamo ancora installato un modello su di essa: Cannot start (missing engine).

Rinominiamo la Cloudlet: fai doppio click sul suo nome e digita Workforce (oppure clicca sul menu in basso a destra e seleziona la voce rename ). Nota come questa azione provochi anche l’aggiornamento dell’URL della Cloudlet.

3. Crea un modello #

Dobbiamo creare un modello per Workforce: per farlo, clicca sul bottone New engine dal riquadro Engine library: apparirà un nuovo modello vuoto, chiamato NewModel1; per installarlo sulla Cloudlet, trascinalo su di essa. Rinomina il modello facendo doppio click sul suo nome e digita TutorialEngine. Nota come lo stato della Cloudlet sia cambiato e sia apparso il bottone Start. Tuttavia, ha poco senso avviarla con un modello vuoto: se proviamo a farlo, infatti, Livebase ce lo impedirà e ci inviterà ad aprire il Designer per definirlo. Per farlo, clicca sulla sua icona .

Il Designer si apre in una finestra separata dalla Dashboard, presentandosi come in figura:

Screenshot designer

  • A sinistra sono presenti due schede: Schemas e Classes. La prima raccoglie le viste del modello, mentre la seconda elenca le classi;
  • A destra è presente la canvas, con una scheda per ciascun diagramma e una scheda speciale per le note. Come vedremo più avanti, è possibile creare diagrammi multipli per suddividere un modello complesso in più parti e semplificarne la comprensione.

4. Definisci la classe Employee #

Al momento ci focalizziamo sul Database Schema , la vista selezionata di default. A questo livello definiremo il modello dei dati, cioè le classi e le relazioni che formano la struttura logica del database.

Icona cursore classe Creiamo una classe per rappresentare gli impiegati dell’azienda.

Clicca sull’icona Create a new class che trovi nella barra degli strumenti (Palette) di fianco al diagramma, e clicca sullo spazio vuoto. Apparirà una nuova classe Class1, il cui nome è selezionato per poterla rinominare da subito: chiamala Employee e premi Enter.

Classe employee vuota

Una classe nel Database è un riquadro azzurro composto da tre sezioni:

  1. In alto, l’header riporta un nome univoco che identifica la classe. Immediatamente sopra, il cerchio e la freccia che punta verso la classe rappresentano il class role di default della classe.

  2. Al centro è presente la lista degli attributi della classe;

  3. In basso, il footer riporta ulteriori informazioni, come il numero di oggetti presenti attualmente nel database. Questa informazione è disponibile solo se stiamo visualizzando un engine installato su una Cloudlet.

Aggiungiamo i primi attributi: per ogni impiegato vogliamo memorizzare nome, cognome, numero di telefono e data di nascita. Per fare ciò, fai click destro sull’intestazione di Employee per aprire il suo Class menu, clicca su new attribute e seleziona il tipo di dato String; dopodiché, digita first_name come nome dell’attributo.

Employee context menu new attribute

Ripeti il procedimento per last_name, phone_number e date_of_birth, selezionando come tipo ancora String per i primi due e Date per l’ultimo. La classe risultante dovrebbe apparire come in figura.

Designer employee partial

Perfezioniamo la classe Employee imponendo dei vincoli sui valori che possono essere assunti dai suoi attributi:

Per prima cosa vogliamo impedire agli utenti di poter creare degli oggetti vuoti, cioè ad esempio senza nome e cognome; dobbiamo quindi imporre un vincolo di integrità per imporre che tutti i valori di alcuni attributi siano non nulli. A tale scopo, fai click destro sull’attributo first_name per aprire il suo Attribute menu e spunta la voce Required.

Designer employee context menu attribute required

Osserva come è cambiato l’attributo: il nome è ora evidenziato in blu e c’è un punto esclamativo accanto a esso. Ripeti lo stesso procedimento per last_name e date_of_birth, e lascia phone_number come non obbligatorio.

Designer employee partial required

Vogliamo impedire l’inserimento di oggetti duplicati, ad esempio due impiegati con lo stesso nome, cognome e data di nascita. Per fare ciò possiamo aggiungere un vincolo di unicità: tenendo premuto il tasto Ctrl, seleziona contemporaneamente first_name, last_name e date_of_birth, fai click destro su uno di questi tre e seleziona Make unique dall’Attribute menu.

Designer employee context menu attribute make unique

Dopo questa operazione, in fondo alla classe apparirà un’icona () a indicare che sulla classe è stato imposto un vincolo di unicità; cliccandoci, gli attributi coinvolti nel vincolo vengono evidenziati.

Designer employee partial unique

In questo caso, il vincolo impedisce che due oggetti di Employee abbiano lo stesso nome, cognome e data di nascita, ma non impedisce che abbiano lo stesso valore per uno o due attributi dei tre coinvolti (ad esempio, stesso nome e cognome ma diversa data di nascita, oppure stesso nome ma cognomi e data di nascita diversi).

A questo punto abbiamo un buon modello di partenza per la nostra applicazione. Salviamolo selezionando FileSave oppure premendo Ctrl+S. Osserva i cambiamenti della classe: first_name è mostrato in grassetto, a indicare che questo attributo è stato designato come object title per la classe_Employee_.

Designer employee partial title

L’object title è il nome con cui – come vedremo tra poco – viene identificato l’oggetto di una classe che si sta esaminando nell’applicazione; questo nome è rappresentato dal valore di un singolo attributo.

Se per una classe non viene indicato uno specifico attributo come object title, il Designer di default sceglierà – nel momento in cui vengono salvate modifiche che aggiungono una nuova classe – l’attributo in cima alla lista della classe , esattamente come è successo in questo caso con first_name.

È inoltre sparito il warning di cui avevamo parlato prima.

Chiudi il Designer selezionando FileClose o premendo Ctrl+Q, oppure semplicemente chiudendo la finestra.

5. Avvia la Cloudlet #

Torniamo alla Dashboard. Lo stato di Workforce è Stopped (missing Database): l’ultimo passo per avviarla consiste nel creare un database con la struttura necessaria per supportare l’engine; clicca sull’icona del database vuoto () per farlo generare da Livebase. Dopo, clicca su Start e attendi qualche secondo mentre Livebase traduce l’engine in codice sorgente, genera la corrispondente applicazione e la avvia sul server cloud. Al termine del processo la Cloudlet passa allo stato Running, mentre il bottone Start viene sostituito da Stop.

Cloudlet new sample running 1

Una Cloudlet può essere avviata e arrestata in ogni momento dal suo proprietario, ovvero dall’utente che l’ha creata. Quando non è in esecuzione, la sua homepage rimane comunque accessibile ma non consente di effettuare il login.

Inserisci dei dati nell’applicazione generata #

Ora che Workforce è in esecuzione, approfittiamone per fare un tour dell’applicazione generata, ovvero l’interfaccia di back-office: fai click sulla sua URL per aprire la homepage in una nuova finestra del browser.

1. Accedi alla homepage #

In questa pagina sono presenti il form di login e riquadri di default: Description, Warnings And News e Terms And Conditions; per ora sono vuoti.

Accediamo come default member: digita quindi le credenziali del tuo account Livebase e clicca su Login.

Gui login sample

Gui homepage
Una volta effettuato l’accesso, la Homepage si presenta divisa in tre pannelli:

  • Applications, sulla sinistra: elenca le viste applicative disponibili per il nostro profilo. Al momento ne è presente una sola (Application), perché è l’unica definita dal modello;
  • Members, sulla destra: elenca i membri di Workforce. Per ora ci sei solo tu;
  • Administration, in basso, riporta diverse icone:
    • Home page configuration Home page configuration: permette di personalizzare i riquadri della schermata di login (visti sopra) con testi e immagini;
    • Password security settings Password security settings: permette di imporre vincoli sulle password che vengono registrate dai membri;
    • Icon edit css Edit css: permette di personalizzare i fogli di stile delle applicazioni;
    • Icon show log Show log: mostra un log testuale delle attività recenti dei componenti della Cloudlet. Permette inoltre di scaricare il tutto come file .log.

2. Apri la Livetable #

Accedi ad Application cliccando sulla sua icona Icon application. Si apre una nuova schermata con due pannelli: a sinistra è presente una lista di classi a cui Application può accedere; al momento è presente solo Employees. Cliccandoci, nel pannello di destra viene mostrata la Livetable (il gestore di classe) relativa alla classe Employee.

Employee livetable empty

La Livetable offre una vista tabellare sulle istanze (gli oggetti) delle classi del modello, e ne consente la gestione (inserimento, modifica e rimozione). Permette inoltre di eseguire operazioni più complesse tipiche della business intelligence, come raggruppamento multi-livello, colonne calcolate, filtraggio basato su espressioni, statistiche, etc. Tra qualche lezione approfondiremo l’uso della Livetable, mentre per ora ci limitiamo a gestire qualche semplice oggetto.

Esaminiamo la tabella:

  • nella parte alta puoi vedere il breadcrumb, che mostra la tua posizione nella Livetable. In questo caso stai esaminando la lista delle istanze Employee (Employees: Overall list);
  • il bottone Reload(Reload icon), immediatamente sotto al breadcrumb, permette di ricaricare nella tabella i dati provenienti dal database, utile nel caso in cui più membri stiano utilizzando l’applicazione contemporaneamente;
  • per questa tabella ci sono quattro colonne, corrispondenti ai quattro attributi che abbiamo aggiunto alla classe Employee.

3. Inserisci i dati #

Aggiungiamo un record alla tabella: clicca sul bottone Create sulla destra per aprire il form di inserimento dati (il gestore delle istanze) della classe Employee:

Gui employee form

Il breadcrumb riporta Employees: Overall list > Employee: new object, indicando così che stiamo creando un nuovo oggetto nella Livetable, mentre sotto sono riportati i quattro campi per il nome, cognome, numero di telefono e data di nascita.

Compila il form come vuoi: ad esempio, puoi inserire l’impiegato John Doe, nato il 26 ottobre 1977 con numero di telefono +39 333 0011222.

Per compilare un campo di tipo Data (come Date of birth), clicca sull’icona del calendario Calendar icon per aprire il selettore interattivo; in alternativa, puoi digitare la data come stringa.

Clicca su Save Gui icon save per confermare l’inserimento e clicca su Back per tornare alla Livetable; alternativamente puoi cliccare direttamente su Save & Close, oppure Save & New per aprire di nuovo la form di inserimento per un altro record.

Nel modello abbiamo imposto che gli attributi nome, cognome e data di nascita siano non nulli: puoi notare come i corrispondenti campi della form siano marcati con (required).

Prova a inserire un altro record ma stavolta senza riempire uno di questi campi (ad esempio Date of birth); una volta premuto su Save apparirà il messaggio Data validation warnings found, che specifica che è richiesto un valore per quel campo.

Warning empty field

Inoltre, il campo che hai lasciato vuoto apparirà evidenziato in rosso; passando sopra l’icona del warning verrà visualizzato un tooltip con lo stesso feedback in merito all’errore appena mostrato.

Employee form error

Nel modello abbiamo imposto anche un vincolo di unicità sugli stessi tre attributi. Verifichiamolo:

Prova a inserire un altro record duplicato, contente gli stessi dati di John Doe; premendo Save apparirà di nuovo un warning a informarci che un altro impiegato ha gli identici valori degli attributi nome, cognome e data di nascita.

Warning duplicate fields

4. Visualizza, modifica ed elimina i dati #

Dopo aver inserito qualche record, la Livetable appare come in figura, e il numero totale dei record è mostrato in basso.

Employee livetable

Dalla Livetable, puoi tornare alla vista relativa a un singolo record facendo doppio click su di esso – oppure selezionandolo e cliccando sul bottone Open sulla destra. Nella vista, il breadcrumb mostrerà l’object title del record corrente; ad esempio, avendo designato l’attributo first_name come object title, per John Doe il breadcrumb indicherà Employees: Overall list > Employee: John.

Employee form instance

Modifichiamo un record esistente: ad esempio, aggiungiamo un numero di telefono per Devin Wincott. Apri l’istanza del suo record e clicca sul bottone Edit Icons edit per tornare alla form. Inserisci un valore qualsiasi e clicca su Save & Close per tornare alla Livetable.

Eliminiamo un record: ad esempio, seleziona Chariot Kirley e clicca sul bottone Delete. L’oggetto verrà eliminato abbassando di un’unità il numero di record.

Conclusioni #

Come puoi vedere, con un minimo sforzo sei stato in grado di creare un’applicazione funzionante corredata di un’interfaccia grafica che permette una gestione rapida ed efficace di un database. Questo è solo l’inizio! Come vedremo nei prossimi articoli, Livebase consente di fare molto di più.

Clicca sul bottone per scaricare il modello che abbiamo realizzato in questa lezione:

TutorialEngine_getting_started.xml

Nella prossima lezione… #

Estenderemo Employee modificando alcuni attributi esistenti per renderli più specifici; inoltre, introdurremo gli attributi derivati e alcuni aspetti dell’Application Schema: Estendi la tua applicazione.