Poradnik: Stwórz swoją pierwszą aplikację

W tym poradniku:- Wyświetlanie wiadomości w kroku- Wprowadzanie niestandardowej wiadomości- Tworzenie liczby wiadomości- Dokumentowanie daty i godziny wyświetlenia ostatniej wiadomości

W tym przewodniku nauczysz się podstaw aplikacji, budując wiele funkcjonalnych komponentów aplikacji.

Pod koniec ćwiczeń będziesz mieć aplikację Hello World, która będzie wyglądać następująco:

Ćwiczenie 1: Tworzenie aplikacji Hello World

W tym ćwiczeniu utworzysz prostą aplikację, która wyświetla wiadomość z przycisku wyzwalającego.

Tworzenie aplikacji

1. W zakładce Apps kliknij Apps.
2. Kliknij + Create App w prawym górnym rogu.
3. Nazwij aplikację "Hello World - Example". Opcjonalnie możesz dodać opis, aby inni użytkownicy wiedzieli, do czego służy ta aplikacja.
4. Na stronie szczegółów aplikacji możesz kliknąć Edytuj w prawym górnym rogu lub kliknąć nazwę kroku bez tytułu, aby przejść do edytora aplikacji. Zanim cokolwiek utworzymy, dodajmy kilka podstawowych elementów projektu do układu podstawowego.

Projektowanie układu podstawowego

1. Na karcie Steps po lewej stronie wybierz opcję Base Layout.
2. Kliknij Ikony i wybierz kształt prostokąta. Dostosuj szerokość prostokąta, aby obejmował cały ekran aplikacji, a następnie kliknij i przeciągnij go na górę ekranu. Aby zmienić kolor prostokąta, kliknij kwadrat Wypełnienie w zakładce Widżet i wybierz kolor słaby szary.
3. Zaznacz kształt i naciśnij CTRL/CMD + C, aby go skopiować. Przeciągnij drugi prostokąt na dół ekranu.
4. Kliknij Input i wybierz Variable. Na karcie Widget kliknij pole Select a data source (Wybierz źródło danych ). Kliknij strzałkę obok App Info i wybierz App name.
5. Kliknij i przeciągnij zmienną do lewego górnego rogu, na górze prostokąta.
6. Dodaj dwie kolejne zmienne:
7. Wybierz Step name z listy źródeł danych app info. Umieść tę zmienną w prawym górnym rogu.
8. Wybierz opcję Logged-in user z listy źródeł danych informacji o aplikacji. Umieść tę zmienną w lewym dolnym rogu.
9. Na koniec kliknij przycisk Buttons i wybierz Menu. Kliknij i przeciągnij przycisk na dół ekranu.

Twój podstawowy układ będzie wyglądał następująco:

Następnie zbudujemy funkcjonalność na kroku.

Dodaj przycisk hello world

1. W zakładce Steps wybierz Untitled Step. Kliknij go dwukrotnie, aby zmienić jego nazwę i wpisz "Display message".
2. Kliknij Buttons i wybierz przycisk. Zmień rozmiar przycisku, aby był większy, używając kwadratów wokół przycisku. Umieść przycisk na środku ekranu.
3. Dodaj następujący styl do przycisku:
4. Tekst - "Hello World"
5. Kolor przycisku - zielony
6. Ikona - narzędzie przesuwania

Przycisk będzie wyglądał następująco:

Następnie dodamy wyzwalacz do tego przycisku, aby był funkcjonalny.

Dodawanie wyzwalacza przycisku

1. Wybierz przycisk Hello World i przejdź do sekcji Triggers w zakładce Widget. Kliknij +, aby dodać nowy wyzwalacz.
2. Nadaj wyzwalaczowi nazwę "Hello world".
3. W instrukcji Then dodaj następującą logikę**:Show Message** → Static Value → Text → "Hello World".

Wyzwalacz powinien wyglądać następująco:

1. Kliknij Zapisz.

Po przetestowaniu aplikacja będzie działać w następujący sposób:

Ćwiczenie 2: Przechowywanie danych wejściowych

W tym ćwiczeniu zbudujesz logikę, która przechowuje tekst wejściowy w zmiennej.

1. Dodaj nowy krok i nazwij go "Store message".
2. Kliknij Input i wybierz Text.
3. Na karcie Widget kliknij pole datasource. Wybierz + Dodaj zmienną.
4. Nazwij zmienną "message" i kliknij + Create.

Po przetestowaniu aplikacji wprowadzony tekst zostanie zapisany w zmiennej "message". Możesz zobaczyć zapisaną wartość w panelu Variables po lewej stronie okna Developer Mode.

Ćwiczenie 3: Liczenie liczby powitań

W tym ćwiczeniu utworzysz analizę zliczającą, ile razy naciśnięto przycisk Hello world.

1. W kroku Display message kliknij Embed i wybierz Analysis. Kliknij i przeciągnij widżet na lewo od przycisku Hello world.
2. Kliknij Wybierz analizę, a następnie Utwórz analizę.
3. Kliknij listę rozwijaną Typy wyświetlania i wybierz Pojedyncza wartość.
4. Kliknij kartę Operacje i dodaj nową operację.
5. Wybierz Aggregation Functions, a następnie Count of Records.
6. Kliknij strzałkę boczną po prawej stronie edytora, aby rozwinąć panel wizualizacji. Poniżej Value kliknij + Add field i wybierz Count of Records.
7. Kliknij tytuł analizy i zmień jego nazwę na "Count of hellos", a następnie kliknij przycisk Save.
8. Kliknij Zapisz i zamknij w prawym górnym rogu.

Ponieważ ukończenia nie są zapisywane w trybie deweloperskim, kliknij Uruchom, aby przetestować tę analizę w odtwarzaczu Tulip Player.

Ćwiczenie 4: Obliczanie ostatniego powitania za pomocą wyrażenia

W tym ćwiczeniu napiszesz wyrażenie w wyzwalaczu, które zapisuje do zmiennej, aby pokazać ostatni raz, gdy aplikacja powiedziała cześć.

1. W panelu bocznym przejdź do zakładki App.
2. Obok pozycji Variables wybierz X.
3. Kliknij przycisk + Create Variable.
4. Nazwij zmienną "Last time you said hello" i kliknij + Create.
5. W kroku Wyświetl wiadomość kliknij przycisk Witaj świecie i dodaj nowy wyzwalacz.
6. Dodaj następującą akcję do wyzwalacza**:Manipulacja danymi** → Store → Expression: 'The last time you said hello was at' + ' ' + App Info.Current Date and Time.Current Time → Variable → Last time you said hello

1. W kroku Count of hellos kliknij Text i wybierz Variable.
2. W panelu bocznym w obszarze Data options kliknij puste pole Datasource, a następnie wybierz zmienną Last time you said hello.

Podczas testowania aplikacji wyrażenie zostanie zapisane w zmiennej Last time you said hello i pojawi się jako znacznik czasu.

Następne kroki

Teraz, gdy utworzyłeś swoją pierwszą aplikację, dowiedz się, jak ją opublikować i uruchomić tutaj.

Dowiedz się więcej o tworzeniu aplikacji:* Podstawy tworzenia aplikacji* Wprowadzenie do edytora aplikacji Tulip* Jak zaprojektować efektywny układ podstawowy

Zostań certyfikowanym twórcą aplikacji Tulip:Podstawowa certyfikacja twórcy aplikacji

Czy znalazłeś to, czego szukałeś?

Możesz również udać się na stronę community.tulip.co, aby zadać pytanie lub sprawdzić, czy inni mieli podobne pytanie!