Costruzione di app
  • 28 Aug 2024
  • 10 Minuti da leggere
  • Contributori

Costruzione di app


Sommario dell'articolo

La costruzione di un'applicazione in Tulip può sembrare intimidatoria all'inizio, ma una volta che si è capito quali sono gli elementi fondamentali, non è poi così complicato. Le applicazioni combinano i seguenti principi per creare un nuovo software: design dell'interfaccia utente, logica e funzioni condizionali, dati e database, analisi e connessioni ad altri sistemi, dispositivi e macchine. In questa guida, discuteremo i concetti chiave e gli strumenti di interfaccia necessari per creare applicazioni di successo. Ricordate che Tulip è una piattaforma no-code, quindi ci concentreremo sulle funzionalità necessarie per progettare applicazioni pronte per la produzione, indipendentemente dalla vostra esperienza di codifica.

Inizieremo con l'interfaccia principale per visualizzare le applicazioni.

Creare e organizzare le app

Per visualizzare tutte le applicazioni nella vostra istanza, visitate la pagina delle applicazioni nella vostra istanza Tulip andando su: [vostra istanza].tulip.co/gruppo. Potete anche passare sopra la scheda App nella barra di navigazione superiore e cliccare su App.

View Apps.png

In questa pagina vengono visualizzate le applicazioni create nella vostra istanza, separate in Gruppi di applicazioni, cartelle per organizzare una raccolta di applicazioni. È inoltre possibile visualizzare ogni app all'interno dei gruppi di app e di altre cartelle, come le app recenti e preferite, nel pannello di navigazione di sinistra.

Apps Page(1)

Selezionare un'app esistente all'interno di un gruppo per visualizzarne e modificarne le informazioni. È inoltre possibile visualizzare i seguenti dati delle app:

  • Passi
  • Analisi
  • Versioni
  • Completamenti
  • Permissions
  • Approvals

App Info Data.png

Per modificare l'applicazione, fare clic sul pulsante blu "Modifica" nell'angolo in alto a destra o fare clic direttamente su un passo.

Per creare una nuova applicazione, navigare nella schermata Applicazioni e fare clic sul pulsante blu "Crea applicazione" nell'angolo in alto a destra. È anche possibile fare clic sulla piccola freccia accanto al pulsante per creare un nuovo gruppo di app.

Selezionare un modello vuoto o un'app in primo piano già progettata e fare clic su "Crea" in basso a sinistra della finestra. Questi modelli in primo piano sono stati progettati da altri utenti di Tulip, in modo che gli altri abbiano soluzioni rapide ai problemi se non vogliono creare un'applicazione da zero. È anche possibile modificare questi modelli per personalizzarli in base alle proprie esigenze.

Create New App.png

Una volta reindirizzati alla schermata delle informazioni sull'applicazione, dare un nome all'applicazione e una descrizione. Etichettare queste informazioni è utile per tenere traccia dell'app, indipendentemente dalla fase del processo in cui ci si trova.

Fare clic sul pulsante blu "Modifica" nell'angolo in alto a destra per accedere all'interfaccia dell'App Editor.

Editor delle app

L'App Editor è il luogo in cui si costruisce e si modifica l'applicazione. Il diagramma seguente mostra le diverse parti che compongono l'editor dell'app:

App Editor.png

  1. Aggiungi passo/gruppo di passi - Aggiunge un nuovo passo o gruppo di passi.
  2. Pannello Passi/Record - Visualizza i passi tramite la scheda Passi o passa alla scheda Record per visualizzare le tabelle utilizzate.
  3. Area di lavoro - Lo spazio per creare l'interfaccia dell'applicazione.
  4. Aggiungi un asset widget - Aggiunge una forma, un'icona o un logo alla vostra applicazione.
  5. Aggiungi un Widget Pulsante - Aggiunge un pulsante all'applicazione.
  6. Aggiungere un Widget di input - Aggiungere un campo di input all'applicazione.
  7. Aggiungi un widget di testo - Aggiungi una casella di testo alla tua applicazione
  8. Incorpora un widget - Incorpora una serie di widget, come immagini, analisi, attributi macchina e altro ancora.
  9. Aggiungi widget fotocamera - Aggiungi una normale fotocamera o un'istantanea con codice a barre.
  10. Traduci - Tulip Player tradurrà automaticamente l'applicazione nella lingua selezionata tramite il vostro profilo Tulip.
  11. Crea istantanea - Salva una versione corrente della vostra app, creando un duplicato in modo da poter testare più versioni senza rischio di errore.
  12. Test - Per testare l'applicazione in modalità sviluppatore
  13. Eseguire - Eseguire l'applicazione nel Tulip Player
  14. Pubblica - Pubblica l'applicazione
  15. Avanti/Indietro - Sposta un elemento all'interno dell'area di lavoro in avanti o dietro altri elementi.
  16. Pannello Trigger - Imposta Trigger, elementi stilistici e informazioni a livello di app.

Per una panoramica approfondita dell'editor di app, visitate Introduzione all'editor di app Tulip.

Passi

I passi sono le "pagine" della vostra app, le varie schermate che visualizzano i contenuti. Per aggiungere un passo, fare clic sul pulsante "Aggiungi passo" che mostra quattro opzioni:

Add New Step.png

  • Passi - Un normale passo che può essere personalizzato in base alle proprie esigenze o utilizzando i widget.
  • Passi di modulo e moduli di firma - Queste opzioni sono state disattivate per le nuove istanze dopo la r235.
  • Gruppi di passi - Una cartella per i passi che aiuta a organizzare l'applicazione e a eseguire operazioni in blocco, come la riorganizzazione/duplicazione dei passi.

I passi possono essere lineari o non lineari, nel senso che non devono necessariamente susseguirsi nell'ordine in cui vengono disposti. La logica aggiunta alla vostra applicazione determinerà la transizione dei passi.

Per una guida approfondita al lavoro con i passi, consultare una raccolta di articoli qui: Passi.

Layout di base

Il layout di base è il modello che si applica a ogni passo creato. La creazione di un layout di base facilita la costruzione dell'applicazione, con gli elementi fondamentali aggiunti automaticamente a ogni passo, e garantisce uno stile coeso in tutta l'applicazione.

Per passare al layout di base, fate clic sul pulsante "Layout di base" in fondo al pannello dei passi/registrazioni.

Base Layout.png

Nel layout di base, tutto ciò che viene inserito nell'area di lavoro apparirà su tutti i passi. Questo processo rende facile e veloce l'impostazione del layout dell'applicazione, eliminando il compito di costruire individualmente ogni passo da zero.

Per una guida approfondita sulla creazione di un layout di base, vedere Come usare il layout di base.

Widget

I widget sono gli elementi costitutivi delle app. Possono visualizzare informazioni, raccogliere dati, eseguire logiche di trigger e altro ancora.

Widgets.png

Widget icona

Inserite forme, icone o loghi nell'area di lavoro e configurate la logica per creare l'aspetto e il marchio della vostra applicazione.

Widget pulsante

Scegliete tra una serie di pulsanti, con logica pre-programmata o personalizzati, da utilizzare nella vostra applicazione.

Per saperne di più sui widget dei pulsanti , leggete qui.

Widget di input

Raccogliete dati dagli utenti dell'app con i Input Widget, dove ogni tipo di input rappresenta una diversa variabile di dati.

Per saperne di più sui widget di input , leggete qui.

Widget di testo

Visualizza testo statico o dinamico, compresi i valori delle variabili, testo statico semplice e interi segnaposto di record.

Widget incorporati

Incorporate video, immagini, CAD, documenti, scanner di codici a barre e altro ancora nella vostra applicazione.

Per saperne di più sui widget incorporati , cliccate qui.

Widget della telecamera

Mostrate il feed della fotocamera di Tulip Vision o scansionate un codice a barre con la fotocamera del vostro dispositivo.

Per saperne di più sui widget della fotocamera , leggete qui.

Widget personalizzati

Se nessuno dei widget di cui sopra soddisfa le vostre esigenze, potete creare il vostro widget personalizzato utilizzando HTML, CSS e Javascript per estendere le funzionalità della piattaforma.

Per saperne di più sui widget personalizzati , cliccate qui.

Trigger

I trigger consentono di aggiungere logica alla vostra applicazione.

Senza trigger, l'applicazione è uno schermo piatto; i trigger fanno fare qualcosa all'applicazione. I trigger possono essere aggiunti ai widget, ai passi (trigger a livello di passo) e alle app (trigger a livello di app), nonché a determinati eventi come l'accensione di un dispositivo. Per un widget, selezionare quello a cui si desidera aggiungere un trigger e, nel pannello Trigger, fare clic sul segno più accanto a "Trigger".

Add Trigger.png

Per aggiungere un trigger a un passo, assicuratevi di essere nel passo a cui volete aggiungere un trigger. Passare alla scheda Fase nel Pannello trigger e selezionare una delle opzioni facendo clic sul segno più.

Step Trigger.png

Tutti i trigger seguono lo stesso formato di base: quando si verifica un'azione, si esegue l'azione e/o la transizione successiva. I trigger possono essere semplici o complicati a seconda delle esigenze, con la possibilità di aggiungere più azioni. È anche possibile aggiungere dichiarazioni if, che aggiungono una condizione all'azione da eseguire, se il criterio è soddisfatto.

Con un'istruzione If, si impostano le condizioni che consentono alle azioni di seguire.

Trigger-If Statement.png

Le affermazioniif sono un'azione o una transizione. Un'azione è una modifica dell'applicazione che non è correlata alla modifica dei passi. Una transizione è una modifica dei passi o il completamento dell'applicazione.

Trigger-New Action/Transition.png

Infine, in concomitanza con le dichiarazioni if, ci sono le dichiarazioni else if, che determinano l'azione alternativa da intraprendere quando la dichiarazione if risulta falsa.

Trigger-Else If Statement.png

Per una guida più dettagliata sui trigger, vedere Trigger.

Variabili

Le variabili sono tipi di dati memorizzati in Tulip Cloud e utilizzati per la creazione di tabelle e analisi. Ci sono molti tipi di dati in Tulip, ognuno con un proprio scopo:

  • Booleano - Sì/no
  • Colore - Colore dinamico per impostare lo stato del widget
  • Datetime - Data e ora del timestamp
  • File - Collegamento a un file memorizzato in Tulip
  • Image - Collegamento a un'immagine memorizzata in Tulip
  • Integer - Un numero intero
  • Intervallo - Quantità di tempo visualizzato in secondi
  • Macchina - Oggetto macchina in Tulip
  • Numero - Un numero reale
  • Object - Struttura di oggetto configurabile con attributi figli che hanno il loro tipo di dati.
  • Stazione - Oggetto stazione in Tulip dal piano dell'officina
  • Testo - Sequenza di caratteri
  • Utente - Oggetto utente in Tulip dalle impostazioni dell'account/spazio di lavoro.

Per aggiungere una variabile all'applicazione, spostarsi nella scheda App del pannello Trigger e selezionare la X accanto a "Variabili".

Variables.png

Si apre la finestra delle variabili, che visualizza tutte le variabili utilizzate nell'applicazione. Per creare una nuova variabile, fare clic sul pulsante blu "Crea variabile" nell'angolo in alto a destra.

Nel riquadro a comparsa, inserire il nome della variabile e il tipo di dati e selezionare due interruttori: se la variabile viene cancellata o meno al completamento dell'applicazione e se la variabile può essere salvata per l'analisi.

Una volta creata la variabile, la si vedrà elencata nella finestra delle variabili.

Create Variable.gif

È possibile creare variabili anche dall'editor di trigger. Ad esempio, se si vuole creare una nuova voce quando si fa clic su un pulsante Invia, fare clic sul pulsante a cui si vuole aggiungere il trigger e aprire l'editor dei trigger.

Aggiungere una nuova azione che segua la logica di cui sopra, dare un nome alla variabile in modo da poterla identificare e selezionare la tabella in cui si vuole scrivere. In questo modo si crea un record tramite una variabile che viene salvato nella tabella designata. Per saperne di più sulle tabelle, si veda un'altra guida; per il momento è sufficiente ricordare che le tabelle contengono i dati.

Trigger-Create New Variable.png

Per saperne di più sulle variabili, vedere Variabili.

Costruire un'applicazione con Tulip

Costruite una semplice applicazione Hello World con un membro di Tulip. Questo corso è offerto anche dalla Tulip University.

Migliori pratiche di progettazione dell'interfaccia utente

Quando si progetta un'applicazione, la navigabilità e l'accessibilità sono due nozioni importanti da tenere a mente. È importante che gli utenti possano navigare all'interno dell'applicazione senza perdersi e che i widget interattivi siano chiari nel loro utilizzo. Se siete alle prime armi con la creazione di app, vi starete chiedendo come ottimizzare l'interfaccia utente in termini di usabilità. Per una guida alla progettazione delle interfacce delle app, consultate App Design.

Risorse aggiuntive

Università Tulip

Tulip University è una risorsa gratuita e on-demand per imparare Tulip. La Tulip University contiene decine di corsi, certificazioni e sfide di costruzione di app per aiutarvi a portare la vostra creazione di app al livello successivo. Fate i primi passi iscrivendovi al corso Tulip Essentials, esercitatevi con le Tulip Challenges e condividete i vostri risultati diventando Tulip Certified App Builder.

Biblioteca Tulip

La Biblioteca Tulip è una raccolta di contenuti pronti all'uso sviluppati dagli esperti Tulip. Troverete molti contenuti per iniziare a lavorare, da applicazioni complete e suite di app a modelli, widget personalizzati e connettori.

Comunità Tulip

Avete domande ma non riuscite a trovare la risposta nella Knowledge Base o nell'Università? Avete un'idea per una funzionalità che vi renderebbe la vita 100 volte più facile? Avete bisogno di un modo per tenervi aggiornati sulle ultime novità del Tuliverse? Date un'occhiata alla Tulip Community.

Tulip Community è un forum attivo e online in cui gli utenti possono porre domande, discutere e aiutarsi a vicenda nell'uso di Tulip per risolvere i loro problemi.


Questo articolo è stato utile?