Primi passi con l'editor

L'interfaccia

L'interfaccia è divisa in 3 colonne principali.

Sulla sinistra troverai i link per le impostazioni generali, la gestione dei menu, l'invio delle notifiche e la creazione delle sezioni.
Al centro il sistema di anteprima che mostrerà in tempo reale la tua App.
Sulla destra infine potrai gestire i componenti della sezione che hai creato, aggiungendone del tipo desiderato e configurandone sia gli aspetti di layout che di contenuto.

Impostazioni

Informazioni App

La prima cosa da fare è impostare un'icona per l'app e compilare una descrizione. Queste informazioni saranno utilizzate per presentare la tua applicazione agli store e nella landing page creata per la progressive web application (pwa).

In una prima fase si può saltare la compilazione dei campi nella sezione "Pubblicazione": questa sarà da gestire successivamente, come indicato nella sezione Guida alla pubblicazione.

Design e Tema

Da questa sezione si possono definire i colori generici desiderati per le varie componenti dell'app, come ad esempio il colore della barra superiore, il colore di sfondo generico, il colore dei testi, l'eventuale immagine di sfondo per il menù laterale.

Font

È possibile scegliere un font che sarà genericamente utilizzato per i titoli, per i testi e per i bottoni.

Creazione della prima sezione

Gestite le volute personalizzazioni nella sezione Impostazioni, è possibile creare la prima sezione cliccando su "+ NUOVA SEZIONE" nella colonna sinistra dell'editor. Scelto il nome desiderato per la sezione, l'editor ci mostra l'anteprima in tempo reale posizionandoci nella sezione appena creata.

È possibile a questo punto decidere se impostare la sezione come Home, ovvero fare in modo che l'app visualizzi sempre questa come videata iniziale.

Si può procedere quindi all'aggiunta dei componenti nella sezione.

Concetti generali sui componenti

Cliccando su "+ AGGIUNGI COMPONENTE" nella colonna destra, si visualizza una finestra dove si potrà scegliere il componente desiderato e procedere all'inserimento del materiale grafico o testuale a seconda dei casi. Per ogni componente, cliccando sul simbolo , viene mostrata una breve guida che ne indica le caratteristiche e le modalità di impiego.

Quando si aggiungono i componenti, questi vengono mostrati sia nell'anteprima in tempo reale che in alto nella colonna a destra.

Ogni componente mostra due tasti funzione laterali: e .

Cliccando su si visualizza una tendina che riporta le seguenti funzioni:

Rinomina: per rinominare il componente nella lista (eventualmente per meglio identificarlo quando se ne aggiungono degli altri);
Copia: per copiare un componente già configurato in un'altra sezione;
Trova: per evidenziare il componente nella finestra di anteprima in tempo reale;
Configura: per configurare i parametri del componente in questione (lo stesso si ottiene semplicemente cliccando sul titolo del componente);
Layout: per impostare l'allineamento generico del testo, i bordi, l'elevazione / ombra, i colori di sfondo e dei testi, la spaziatura del componente;
Elimina: per eliminare definitivamente il componente (operazione non reversibile).

Cliccando e trascinando verso l'alto o il basso il simbolo è possibile ordinare la sequenza dei componenti.

Le modifiche sono visualizzate in tempo reale nell'anteprima.