In questa guida, si tratta di:- Visualizzare un messaggio su un passo- Inserire un messaggio personalizzato- Creare un conteggio dei messaggi- Documentare la data e l'ora di visualizzazione del messaggio più recente
In questa guida imparerete le basi delle applicazioni costruendo componenti multipli e funzionali.
Alla fine degli esercizi, avrete un'applicazione Hello World che avrà il seguente aspetto:
Esercizio 1: Creare un'applicazione Hello World
In questo esercizio creerete una semplice applicazione che visualizza un messaggio da un pulsante di attivazione.
Creare un'applicazione
- Nella scheda Applicazioni, fare clic su Applicazioni.
- Fare clic su + Crea app nell'angolo in alto a destra.
- Nominare l'applicazione "Hello World - Example". È possibile aggiungere una descrizione, in modo che gli altri utenti sappiano a cosa serve questa applicazione.
- Dalla pagina dei dettagli dell'app, è possibile fare clic su Modifica nell'angolo in alto a destra oppure sul nome del passo senza titolo per accedere all'Editor di app. Prima di creare qualcosa, aggiungiamo alcuni elementi di progettazione di base al layout di base.
Progettare un layout di base
- Dalla scheda Passi a sinistra, selezionare Layout di base.
- Fare clic su Icone e selezionare la forma di un rettangolo. Regolate la larghezza del rettangolo in modo che si estenda su tutta la schermata dell'applicazione, quindi fate clic e trascinatelo nella parte superiore della schermata. Per cambiare il colore del rettangolo, fare clic sul quadrato Riempimento nella scheda Widget e selezionare il colore grigio tenue.
- Selezionare la forma e premere CTRL/CMD + C per copiare. Trascinare il secondo rettangolo nella parte inferiore dello schermo.
- Fare clic su Input e selezionare Variabile. Nella scheda Widget, fare clic sul campo Seleziona un'origine dati. Fare clic sulla freccia accanto a Info app e selezionare Nome app.
- Fare clic e trascinare la variabile nell'angolo in alto a sinistra, sopra il rettangolo.
- Aggiungere altre due variabili:
- Selezionare Nome passo dall'elenco delle origini dati di Info app. Posizionare questa variabile nell'angolo in alto a destra.
- Selezionare Utente connesso dall'elenco delle origini dati di Info app. Posizionare questa variabile nell'angolo in basso a sinistra.
- Infine, fare clic su Pulsanti e selezionare Menu. Fare clic e trascinare il pulsante nella parte inferiore dello schermo.
Il layout di base avrà il seguente aspetto:
Successivamente, costruiremo la funzionalità di un passo.
Aggiungere il pulsante hello world
- Nella scheda Passi, selezionare Passo senza titolo. Fare doppio clic su di esso per rinominarlo e digitare "Display message".
- Fare clic su Pulsanti e selezionare il pulsante. Ridimensionare il pulsante in modo che sia più grande, utilizzando i quadrati intorno al pulsante. Posizionare il pulsante al centro dello schermo.
- Aggiungete il seguente stile al pulsante:
- Testo - "Hello World" (Ciao mondo)
- Colore del pulsante - Verde
- Icona - Strumento Pan
Il pulsante avrà questo aspetto:
Successivamente, aggiungeremo un trigger a questo pulsante per renderlo funzionante.
Aggiungere un trigger al pulsante
- Selezionare il pulsante Hello World e spostarsi nella sezione Triggers della scheda Widget. Fare clic su + per aggiungere un nuovo trigger.
- Nominare il trigger "Hello world".
- Nell'istruzione Then, aggiungere la seguente logica**: Show Message** → Static Value → Text → "Hello World".
Il trigger dovrebbe corrispondere a quanto segue:
- Fare clic su Salva.
Quando si testa l'applicazione, questa funzionerà come segue:
Esercizio 2: Memorizzare i dati di input
In questo esercizio, si costruirà una logica che memorizza il testo in ingresso in una variabile.
- Aggiungere un nuovo passo e chiamarlo "Memorizza messaggio".
- Fare clic su Input e selezionare Text.
- Nella scheda Widget, fare clic sulla casella Datasource. Selezionare + Aggiungi variabile.
- Nominare la variabile "messaggio" e fare clic su + Crea.
Quando si testa l'applicazione, l'input di testo viene salvato nella variabile "message". È possibile vedere il valore memorizzato nel pannello Variabili sul lato sinistro della finestra della Modalità sviluppatore.
Esercizio 3: Contare il numero di messaggi di saluto
In questo esercizio, si creerà un'analisi che conta quante volte è stato premuto il pulsante Hello world.
- Nel passaggio Visualizza messaggio, fare clic su Incorpora e selezionare Analisi. Fare clic e trascinare il widget a sinistra del pulsante Ciao mondo.
- Fare clic su Seleziona un'analisi e quindi su Crea analisi.
- Fare clic sul menu a tendina Tipi di visualizzazione e selezionare Valore singolo.
- Fare clic sulla scheda Operazioni e aggiungere una nuova operazione.
- Selezionare Funzioni di aggregazione e quindi Conteggio dei record.
- Fare clic sulla freccia laterale a destra dell'editor per espandere il riquadro di visualizzazione. Sotto Valore, fare clic su + Aggiungi campo e selezionare Conteggio dei record.
- Fare clic sul titolo dell'analisi e rinominarlo "Conteggio dei saluti", quindi fare clic su Salva.
- Fare clic su Salva e chiudi nell'angolo in alto a destra.
Poiché i completamenti non vengono salvati in modalità Sviluppatore, fare clic su Esegui per testare l'analisi nel Lettore Tulipano.
Esercizio 4: Calcolo dell'ultimo saluto con un'espressione
In questo esercizio, scriverete un'espressione in un trigger che memorizza una variabile per mostrare l'ultima volta che l'applicazione ha detto ciao.
- Nel riquadro laterale, spostarsi nella scheda App.
- Accanto a Variabili, selezionare X.
- Fare clic su + Crea variabile.
- Nominare la variabile "Last time you said hello" e fare clic su + Create.
- Nella fase di visualizzazione del messaggio, fare clic sul pulsante Ciao mondo e aggiungere un nuovo trigger.
- Aggiungere la seguente azione al trigger**:Manipolazione dei dati** → Memorizza → Espressione: 'L'ultima volta che hai detto ciao era a' + ' ' + App Info.Current Date and Time.Current Time → Variabile → Ultima volta che hai detto ciao
- Nel passaggio Conteggio dei saluti, fare clic su Testo e selezionare Variabile.
- Nel riquadro laterale, sotto Opzioni dati, fare clic sul campo Sorgente dati vuota e selezionare la variabile Ultima volta che hai detto ciao.
Quando si testa l'applicazione, l'espressione viene salvata nella variabile L'ultima volta che hai detto ciao e appare come un timestamp.
Passi successivi
Ora che avete costruito la vostra prima applicazione, imparate a pubblicarla ed eseguirla qui.
Per saperne di più sulla costruzione di app:* Nozioni di base sulla costruzione di app* Introduzione all'editor di app Tulip* Come progettare un layout di base efficace
Diventare un costruttore di app certificato Tulip:Certificazione di base per costruttori di app
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!