Google AppSheet: come configurare la user interface di una applicazione

In questo tutorial ti spiegherò come configurare l’interfaccia utente di una applicazione mobile in AppSheet.

Implementare una APP mobile in AppSheet consiste nel lavorare con 3 tipologie di oggetti:Le Tabelle che servono a collegare l’applicazione alle sorgenti dati (se non lo hai già fatto, leggi come lavorare con i dati in una applicazione AppSheet).

Le Viste con le quali puoi costruire l’interfaccia utente.

I Bottoni e le Actions attraverso i quali puoi implementare degli automatismi.

In questa guida parleremo di come creare e configurare le Viste della tua APP, disponibili sotto UX > Views

Ad esempio, questa è la vista Items:

Una Vista definisce il modo in cui l’applicazione mostra i dati all’utente.

Grazie ad una serie di modelli predefiniti (gallery, cards, ecc.) puoi decidere come mostrare i dati all’utente.

Nei paragrafi successivi andremo a vedere nel dettaglio le opzioni di configurazione di una Vista.

Come posizionare le Viste nell’applicazione

In una applicazione mobile, una pagina può essere raggiunta da diversi punti.

Ad esempio, puoi creare una voce d menù oppure puoi aggiungere un pulsante al footer dell’applicazione.

Per posizionare un link ad una vista:

• Clicca su UX > Views
• Clicca sulla vista che vuoi modificare (Items)

• Vai alla sezione Position e scegli dove posizionare il bottone per aprire la vista.

• Le opzioni left most, left, center, right, right most servono per posizionare il bottone della vista nel footer dell’applicazione.

• L’opzione menu va selezionata se vuoi collegare la Vista al menù dell’APP

• L’opzione ref va utilizzata quando vuoi che la Vista non venga richiamata da un bottone specifico ma dovrà essere accessibile da un’altra vista oppure tramite una dashboard.

• Nella sezione Display puoi impostare l’icona del bottone e il nome della voce di menù che l’utilizzatore dell’applicazione vedrà collegandosi all’applicazione.

• Questo è il risultato

Tipo di Viste

AppSheet supporta diversi tipi di Viste predefinite. Nel momento in cui sto scrivendo questo articolo, sono disponibili le seguenti tipologie:

• Deck
• Table
• Gallery
• Detail
• Map
• Chart
• Form
• Dashboard

Per impostare il tipo di vista da usare:

• Clicca sulla Vista
• Vai a View Type e seleziona il tipo di vista che vuoi utilizzare

Nei paragrafi successivi descriverò le caratteristiche di queste viste e ti spiegherò come e quando usarle.

Deck e Table

Deck e Table sono due tipi di vista che organizzano i record in una forma tabellare.

In particolare, il tipo vista Table mostra le informazioni in modo molto compatto.

Grazie ad una vista di tipo Table puoi scorrere molto rapidamente i dati per trovare una riga

La vista Deck, invece, organizza i record mostrando i campi in maniera compatta.

Se il record ha un tipo campo Image, questo tipo di vista può mostrare per ogni record una miniatura.

Questa vista è molto utile quando devi implementare, ad esempio, un catalogo prodotti, oppure un elenco di contatti.

Puoi selezionare i campi da visualizzare per ogni riga del Deck scegliendoli nell’area di configurazione della vista.

Gallery

Con il tipo vista Gallery i record, che devono avere una colonna di tipo Image, vengono visualizzati con una galleria di immagini scorrevole e con un testo descrittivo.

Facendo clic su qualsiasi immagine si apre una visualizzazione “dettagli” che mostra l’immagine a schermo intero insieme agli altri campi del record.

Una volta atterrato nella pagina di visualizzazione dei dettagli a schermo intero, l’utente può scorrere i record cliccando sulle frecce ai lati.

La vista Detail viene utilizzata per mostrare i dettagli di un record e, se viene in posizione ref, viene automaticamente richiamata dalle altre Viste di tipo Table, Deck, Gallery.

Detail

La Vista Detail possiede diverse opzioni di configurazione del layout, come la possibilità di visualizzare i campi sopra all’immagine piuttosto che dare la possibilità agli utenti dell’APP di poterli modificare direttamente nella vista con una funzionalità di Quick Edit.

La funzionalità di Quick Edit rende le colonne del record modificabili direttamente dalla Vista.

Ovviamente, per poter usare il Quick Edit l’origine dati della Vista deve avere attivata l’opzione Update.

Calendar

Il tipo vista Calendar permette di visualizzare su un calendario dei record che rappresentano intervalli temporali.

Ad esempio, gli appuntamenti settimanali.

Per sfruttare appieno una vista di tipo Calendar dovresti avere una sorgente dati con 4 colonne che rappresentano rispettivamente Data/Ora di Inizio e Data Ora Fine.

Ecco un esempio:

Nel setup della vista dovrai mappare le precedenti colonne e scegliere il tipo di vista predefinita (ed esempio settimanale)

Dalla vista, cliccando sul record, accedi al dettaglio dell’evento

Map

Il tipo visto Map è davvero molto utile ed è anche molto facile da configurare.

Come per tutti gli altri tipo di viste, una vista Map ha bisogno di una sorgente dati, una tabella che contiene una colonna con l’indirizzo che l’applicazione utilizzerà per posizionare un punto sulla mappa.

Ad esempio, supponiamo di voler mostrare agli utenti della nostra applicazione per l’acquisto di prodotti per lo sport dove si trovano i punti vendita fisici.

Una tabella per gestire queste posizione può essere fatta come nell’esempio seguente.

Grazie all’indirizzo scritto nella colonna Address, l’applicazione è in grado di posizionare sulla mappa un punto interattivo sfruttando le API di Google Maps che sono automaticamente integrate in AppSheet.

Cliccando sul marker, puoi vedere il dettaglio della posizione.

Chart

Il tipo vista Chart consente di implementare dei grafici in AppSheet.

Per creare un grafico:

• Crea una nuova Vista di tipo Chart
• Clicca sul campo Chart Type

• Seleziona il tipo di grafico che vuoi creare, ad esempio horizontal histogram

• Imposta i parametri del grafico specifico

• Posizione la vista Chart nella posizione ref affinché sia richiamabile da una vista Dashboard che vedremo tra poco.

Dashboard

Le viste di tipo Dashboard permettono di raccogliere in un unico contenitore altre viste create precedentemente.

Questa tipo di raccolta risulta particolarmente utile nelle applicazioni usate da tablet oppure nella versione desktop dell’APP quando viene visualizzata dal browser.

Per creare una dashboard

• Crea una vista di tipo Dashboard
• Aggiungi altre viste alla raccolta usando il bottone Add

Colori e logo dell’applicazione

Quando crei una nuova applicazione in AppSheet, verrà applicato un stile di default.

Tuttavia puoi personalizzarne l’aspetto per renderla adatta al brand della tua azienda.

• Accedi al workspace dell’applicazione
• Clicca su UX > Brand

• Theme: permette scegliere tra un tema chiaro oppure un tema scuro.
• Primary Color: imposta il colore primario dell’applicazione
• App logo: imposta il logo dell’applicazione, che sarà visibile nell’header dell’applicazione

Opzioni di personalizzazione aggiuntive

In UX > Options puoi trovare ulteriori opzioni grafiche aggiuntive

Vediamo quali sono le opzioni più significative da tenere in considerazione.

• Starting View: definisce la prima vista che l’utente vede quando si collega all’applicazione

• Fonts: seleziona il font dell’applicazione e la dimensione del carattere

• Form Style: decidi come formattare i campi delle form

• Table View: permette di mostrare/nascondere l’header, gestire l’allineamento dei campi numerici e attivare/disattivare le opzioni di ordinamento.

• Detail View: seleziona il formato di default delle viste Detail, ovvero come vengono allineati i campi e come viene formattata l’immagine

Traduzione delle etichette

AppSheet permette di inserire le traduzioni delle etichette standard di tab e bottoni.

Per inserire una traduzione vai clicca su UX > Localize