In questo articolo imparerete a conoscere:
- Le diverse parti dell'editor di app Tulip
- Gli elementi visivi di base che si possono aggiungere a un'applicazione (chiamati anche Widget)
- Come aggiungere la logica di base utilizzando i pulsanti
- Come completare un'applicazione per registrare i dati
This topic is featured in the Introduction to app building course in Tulip University.
Se state ancora familiarizzando con l'Editor di app Tulip, questo articolo fa per voi. Utilizzeremo un esempio di applicazione per le istruzioni di lavoro per illustrare tutti i principali strumenti dell'App Editor.
L'App Editor consente di creare applicazioni per gli operatori senza scrivere alcun codice.
Ecco come si presenta:
Nell'App Editor è possibile creare una serie di Fasi che rappresentano elementi visivi di un processo.
Video introduttivo
We're constantly improving the applications that come in new instances. If you joined Tulip recently, the apps in your instance might look different than what you see in images in this article. No worries, the ideas are the still same even if the content is a little different.
Descrizione dell'editor di app
L'editor di app è il luogo in cui si costruisce e si modifica l'applicazione. Il diagramma seguente mostra le diverse parti che compongono l'editor di app:
- Aggiungi passo/gruppo di passi - Aggiunge un nuovo passo o un gruppo di passi.
- Pannello Passi/Record - Consente di visualizzare i passi tramite la scheda Passi o di passare alla scheda Record per visualizzare le tabelle utilizzate.
- Area di lavoro - Lo spazio per creare l'interfaccia dell'applicazione.
- Aggiungi un asset widget - Aggiunge una forma, un'icona o un logo alla vostra applicazione.
- Aggiungi un Widget Pulsante - Aggiunge un pulsante all'applicazione.
- Aggiungere un Widget di input - Aggiungere un campo di input all'applicazione.
- Aggiungi un widget di testo - Aggiungi una casella di testo alla tua applicazione
- Incorpora un widget - Incorpora una serie di widget, come immagini, analisi, attributi macchina e altro ancora.
- Aggiungi widget fotocamera - Aggiungi una normale fotocamera o un'istantanea con codice a barre.
- Traduci - Tulip Player tradurrà automaticamente l'applicazione nella lingua selezionata tramite il vostro profilo Tulip.
- Crea istantanea - Salva una versione corrente della vostra app, creando un duplicato.
- Test - Per testare l'applicazione tramite la Modalità sviluppatore
- Esegui - Esegue l'applicazione nel Lettore Tulip.
- Pubblica - Pubblica la vostra applicazione
- Avanti/Indietro - Sposta un elemento all'interno dell'area di lavoro in avanti o dietro altri elementi.
- Riquadro laterale - Imposta i trigger e i componenti stilistici nella scheda Widget, nella scheda Step e nella scheda App.
Con lo strumento panoramica e zoom è possibile
- Spostare la superficie di modifica dell'applicazione
- Ingrandire o ridurre lo zoom
L'Elenco passi a sinistra mostra l'elenco dei passi, compreso il Layout di base.
Layout di base
Qualsiasi modifica di formattazione o di layout apportata al layout di base verrà automaticamente applicata a ogni singolo passaggio dell'applicazione.
È possibile modificare il layout di base di un singolo passo "sbloccando" i singoli elementi nel riquadro contestuale a destra.
Per saperne di più sui layout di base , cliccate qui.
Passi
È possibile fare clic su un passo per visualizzare gli elementi che contiene.
Fare clic con il tasto destro del mouse su un passo per duplicarlo, raggrupparlo o eliminarlo.
Per saperne di più sui passi , vedere qui.
Barra degli strumenti
La barra degli strumenti nella parte superiore dello schermo include elementi visivi che possono essere aggiunti all'applicazione. Si tratta di elementi come forme, foto, testo, video e pulsanti. Per aggiungere un nuovo elemento visivo all'applicazione, è sufficiente fare clic e trascinarlo nella posizione desiderata.
Sul lato destro della barra degli strumenti sono presenti altri strumenti che possono essere utilizzati per stratificare gli oggetti nell'editor di app Tulip.
Riquadro del contesto
Il riquadro contestuale sul lato destro dello schermo è il luogo in cui si gestiscono la formattazione e la logica dell'applicazione. Per saperne di più sulla configurazione dei widget, leggete qui.
Ci sono tre schede:
- Scheda Fase
- Scheda App
- Scheda Widget
Scheda Passo
La scheda Passo mostra:
- Opzioni di formattazione per l'intero passo
- Consente di specificare il tempo di ciclo target per questo passo
- Consente di ripristinare il layout specificato nel Layout di base.
- Consente di eliminare il passo corrente
- Permette di creare una logica che verrà eseguita ogni volta che questo passo viene aperto o chiuso - parleremo più avanti dei Trigger.
Scheda App
La scheda App:
- Consente di stampare i passi dell'applicazione.
- Consente di regolare il timer del ciclo per l'intera applicazione.
- Mostra un elenco di tutte le variabili associate all'app.
- Consente di specificare la risoluzione dell'app per adattarla all'interfaccia desiderata.
- Consente di aggiungere commenti se più amministratori stanno rivedendo le modifiche.
- Consente di creare una logica che verrà eseguita ogni volta che l'applicazione viene avviata, completata o annullata.
Scheda Widget
Facendo clic su un elemento dell'applicazione si apre un'altra scheda nel pannello laterale, denominata Scheda widget. Qui è possibile regolare il formato dei vari elementi visivi dell'applicazione e il loro comportamento quando vi si interagisce.
Aggiungere logica a un'applicazione
La logica determina ciò che accade nell'applicazione quando l'operatore interagisce con essa. Per iniziare, utilizziamo un semplice pulsante con un trigger per spostarci da una fase all'altra.
- Fare clic su Pulsanti nella barra degli strumenti e selezionare Pulsante.
- Trascinare il pulsante nella posizione desiderata.
- Aggiungete un'etichetta al pulsante e regolate le opzioni di formato/colore utilizzando il riquadro contestuale sulla destra.
{Altezza="" Larghezza="300"}
- Per aggiungere la logica al pulsante, fare clic su + accanto a Trigger nel riquadro laterale.
{Per aggiungere una logica al pulsante, fare clic su + accanto a Trigger nel riquadro laterale.}
Itrigger consentono di aggiungere logica alle applicazioni senza dover utilizzare alcun codice. I trigger utilizzano una sequenza di tipo when, if, then, else.
Il trigger che costruiremo qui ha la seguente logica:
Quando: Il pulsante viene premuto
Poi: L'ora corrente viene salvata in una variabile
Transizione: Passa al passo → Successivo.
{Fare clic su Salva.}
- Fare clic su Salva.
Questo pulsante sposta l'utente al passo successivo. In genere si desidera aggiungere un pulsante che consenta agli utenti di passare al passo precedente.
Una volta costruita la logica di base dell'applicazione, è possibile fare clic su Test in alto a destra. In questo modo si avvierà l'applicazione in modalità Sviluppatore, in modo da poterla testare.
Completare un'applicazione e registrare i dati
Il pulsante Completa consente a Tulip di registrare tutti i dati dell'applicazione associati a ciascun operatore.
In questo esempio, aggiungeremo un altro pulsante all'ultimo passo dell'applicazione.
- Selezionare l'ultimo passo dell'applicazione.
- Fare clic su Pulsanti e selezionare Completa.
- Trascinare il nuovo pulsante nella posizione desiderata.
{Altezza="" Larghezza="450"}
Ulteriori letture
Utilizzate queste guide passo passo per creare un'applicazione completa utilizzando questi concetti:
Avete trovato quello che cercavate?
Potete anche andare su community.tulip.co per postare la vostra domanda o vedere se altri hanno affrontato una domanda simile!