In questo articolo imparerai:
- Le diverse parti dell’App Editor di Tulip
- Gli elementi visivi di base che è possibile aggiungere a un’app (chiamati anche widget)
- Come aggiungere logica di base utilizzando i pulsanti
- Come completare un'app per la registrazione dei dati
This topic is featured in the Introduction to app building course in Tulip University.
Se stai ancora prendendo confidenza con l’App Editor di Tulip, questo articolo fa al caso tuo. Utilizzeremo l’esempio di un’app per le istruzioni di lavoro per illustrare tutti i principali strumenti dell’App Editor.
L’App Editor ti permette di creare app per gli operatori senza scrivere alcun codice.
Ecco come si presenta:
Nell’App Editor puoi creare una serie di passaggi che rappresentano gli elementi visivi digitali 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.
Struttura dell’App Editor
L'App Editor è lo strumento in cui si crea e si modifica l'app. Il diagramma seguente mostra le diverse parti che compongono l'App Editor:
- Aggiungi passaggio/gruppo di passaggi - Aggiungi un nuovo passaggio o un gruppo di passaggi
- Pannello Passaggi/Record - Visualizza i tuoi passaggi tramite la scheda "Passaggi" oppure passa alla scheda "Record" per visualizzare le tabelle utilizzate
- Area di lavoro - Lo spazio in cui creare l’interfaccia della propria app
- Aggiungi un widget risorsa - Aggiungi una forma, un'icona o un logo alla tua app
- Aggiungi un widget Pulsante - Aggiungi un pulsante alla tua app
- Aggiungi un widget di input - Aggiungi un campo di input alla tua app
- Aggiungi un widget "Testo" - Aggiungi una casella di testo alla tua app
- Incorpora un widget: incorpora una varietà di widget, come immagini, analisi, attributi della macchina e altro ancora
- Aggiungi un widget Fotocamera: aggiungi un'istantanea scattata con una fotocamera standard o una fotocamera per codici a barre
- Traduci - Tulip Player tradurrà automaticamente l'app nella lingua selezionata tramite il tuo profilo Tulip
- Crea istantanea - Salva una versione corrente della tua app, creando un duplicato
- Prova - Prova la tua app tramite la Modalità sviluppatore
- Esegui - Esegui la tua app nel Tulip Player
- Pubblica - Pubblica la tua app
- 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 nelle schede Widget, Step e App.
Utilizzando lo strumento di panoramica e zoom puoi:
- Spostare l’area di modifica della tua applicazione
- Ingrandire o rimpicciolire
L’elenco dei passaggi a sinistra mostra l’elenco dei passaggi, 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'app.
È possibile modificare il layout di base di un singolo passaggio "sbloccando" i singoli elementi nel pannello di contesto a destra.
Scopri di più sui layout di base qui.
Passaggi
È possibile fare clic su un passaggio per visualizzare gli elementi che contiene.
Fai clic con il tasto destro del mouse su un passaggio per duplicarlo, raggruppare più passaggi o eliminarlo.
Scopri di più sui passaggi qui.
Barra degli strumenti
La barra degli strumenti nella parte superiore dello schermo include elementi visivi che possono essere aggiunti all'app. Si tratta di elementi quali forme, foto, testo, video e pulsanti. Per aggiungere un nuovo elemento visivo all'app, è sufficiente cliccarci sopra e trascinarlo nella posizione desiderata.
Sul lato destro della barra degli strumenti sono presenti ulteriori strumenti che puoi utilizzare per sovrapporre gli oggetti nell’Editor dell’app Tulip.
Riquadro di contesto
Il pannello di contesto sul lato destro dello schermo è dove si gestiscono tutte le impostazioni di formattazione e la logica dell’app. Per saperne di più sulla configurazione dei widget, clicca qui.
Sono presenti tre schede:
- Scheda “Step”
- Scheda "App"
- Scheda "Widget"
Scheda "Step"
La scheda "Passaggio " mostra:
- Opzioni di formattazione per l'intero passo
- Consente di specificare il tempo di ciclo target per questa fase
- Consente di ripristinare il layout specificato nel Layout di base
- Consente di eliminare la fase corrente
- Ti offre la possibilità di creare una logica che verrà eseguita ogni volta che questa fase viene aperta o chiusa; parleremo più approfonditamente dei Trigger più avanti.
Scheda App
La scheda App:
- Consente di stampare i passaggi presenti nell’app
- Consente di regolare il timer del ciclo per l’intera app
- Mostra un elenco di tutte le variabili associate a questa app
- Consente di specificare la risoluzione dell'app in base all'interfaccia desiderata.
- Consente di aggiungere commenti nel caso in cui più amministratori stiano esaminando le modifiche
- Offre la possibilità di creare una logica che verrà eseguita ogni volta che questa app viene avviata, completata o annullata
Scheda "Widget"
Facendo clic su un elemento nell’app si aprirà un’altra scheda nel pannello laterale denominata “Scheda Widget”. È qui che si può regolare il formato dei vari elementi visivi dell’app, insieme al suo comportamento quando si interagisce con essi.
Aggiungere logica a un'app
La logica determina cosa succede nell’app quando l’operatore interagisce con essa. Per iniziare, utilizziamo un semplice pulsante con un Trigger per passare da una fase all’altra.
- Fai clic su "Pulsanti" nella barra degli strumenti e seleziona "Pulsante".
- Trascinare il pulsante nella posizione desiderata.
- Aggiungi un'etichetta al pulsante e modifica le opzioni di formattazione e colore utilizzando il pannello di contesto sulla destra.
- Per aggiungere la logica al pulsante, fare clic sul segno "+" accanto a "Trigger" nel riquadro laterale.
I trigger ti consentono di aggiungere logica alle tue applicazioni senza dover utilizzare alcun codice. I trigger utilizzano una sequenza " when, if, then, else ".
Il trigger che creeremo qui ha la seguente logica:
Quando: Viene premuto il pulsante
Allora: L'ora corrente viene salvata in una variabile
Transizione: Vai al passaggio → Successivo.
- Fai clic su Salva.
Questo pulsante porta l'utente al Passo successivo. In genere è consigliabile aggiungere anche un pulsante che consenta agli utenti di tornare al passo precedente.
Una volta sviluppata la logica di base dell’applicazione, puoi fare clic su “Prova” in alto a destra. In questo modo l’applicazione verrà avviata in modalità sviluppatore, consentendoti di testarla.
Completa un'app e registra i dati
Un pulsante "Completa " affinché Tulip registri tutti i dati dell'app associati a ciascun operatore.
In questo esempio, aggiungeremo un altro pulsante nell'ultimo passaggio dell'app.
- Seleziona l’ultimo passaggio della tua app.
- Fai clic su " Pulsanti" e seleziona " Completa".
- Trascina il nuovo pulsante nella posizione desiderata.
Approfondimenti
Utilizza queste guide passo passo per creare un'app completa utilizzando questi concetti:
Hai trovato quello che cercavi?
Puoi anche visitare il sito community.tulip.co per pubblicare la tua domanda o vedere se altri hanno avuto un problema simile!