Wprowadzenie do edytora aplikacji Tulip

Cel

W tym artykule dowiesz się:

• Różne części edytora aplikacji Tulip.
• Podstawowe elementy wizualne, które możesz dodać do aplikacji (zwane również Widgetami)
• Jak dodać podstawową logikę za pomocą przycisków
• Jak uzupełnić swoją aplikację o rejestrowanie danych

:::(Info) (Uwaga:) Ten temat jest zawarty w kursie"Wprowadzenie do budowania aplikacji" w Tulip University :::

Jeśli dopiero zapoznajesz się z Tulip App Editor, ten artykuł jest dla Ciebie. Użyjemy przykładu aplikacji z wizualną instrukcją pracy, aby przejść przez wszystkie główne narzędzia w App Editorze.

Zanim zaczniemy, krótkie przypomnienie: App Editor pozwala budować aplikacje dla operatorów bez pisania jakiegokolwiek kodu.

Oto jak to wygląda:

Edytor aplikacji umożliwia tworzenie serii kroków lub ekranów, z których operatorzy mogą korzystać w ramach aplikacji. Kroki mogą być również organizowane w grupy kroków dla lepszej użyteczności.

:::(Warning) (UWAGA:) Stale ulepszamy aplikacje, które pojawiają się w nowych instancjach. Jeśli dołączyłeś do Tulipa niedawno, aplikacje w Twojej instancji mogą być inne niż te, które widzisz na zdjęciach w tym artykule. Nie martw się. Idee są takie same, nawet jeśli treść jest trochę inna :::

Szybki przegląd edytora aplikacji Tulip.

Lista kro ków po lewej stronie pokazuje listę kroków, w tym Układ bazowy.

Wszelkie zmiany w formatowaniu lub układzie, które dokonasz w Układzie Bazowym, zostaną automatycznie zastosowane do każdego pojedynczego kroku w aplikacji.

Możesz zmienić Układ Bazowy w każdym z Kroków, "odblokowując" poszczególne elementy w Panelu Kontekstowym po prawej stronie.

Używając "prawego przycisku myszy" możesz powielać, grupować kroki lub usuwać.

Możesz kliknąć na krok, aby zobaczyć elementy, które on zawiera.

Pasek narzędzi w górnej części ekranu zawiera elementy wizualne, które można dodać do aplikacji. Są to elementy takie jak kształty, zdjęcia, tekst, filmy i przyciski. Aby dodać nowy element wizualny do aplikacji, wystarczy kliknąć i przeciągnąć go w wybrane miejsce.

Po prawej stronie paska narzędzi znajdują się dodatkowe narzędzia, których możesz użyć do warstwowania obiektów w edytorze aplikacji Tulip.

Context Pane po prawej stronie ekranu jest miejscem, gdzie obsługujesz całe formatowanie i logikę w aplikacji. Przeczytaj więcej o konfiguracji Widgetów tutaj.

Znajdują się tam trzy zakładki:

• Step Tab
• Zakładka Aplikacja
• Zakładka Widget

Zakładka Step Tab pokazuje:

• Opcje formatowania dla całego Kroku.
• Umożliwia określenie docelowego czasu cyklu dla tego kroku
• Umożliwia przywrócenie układu określonego w Układzie bazowym
• Umożliwia usunięcie bieżącego kroku
• Daje możliwość budowania logiki, która będzie wykonywana za każdym razem, gdy ten krok zostanie otwarty lub zamknięty - więcej o wyzwalaczach powiemy nieco później.

Zakładka App:

• Umożliwia wydrukowanie kroków w aplikacji
• Umożliwia ustawienie timera cyklu dla całej aplikacji
• Pokazuje listę wszystkich zmiennych związanych z tą aplikacją
• Pozwala określić rozdzielczość aplikacji, aby dopasować ją do zamierzonego interfejsu.
• Umożliwia dodawanie komentarzy, jeśli zmiany przegląda wielu administratorów
• Daje możliwość budowania logiki, która będzie wykonywana za każdym razem, gdy ta aplikacja zostanie uruchomiona, zakończona lub anulowana

Kliknięcie elementu w aplikacji spowoduje odsłonięcie kolejnej zakładki w oknie kontekstowym o nazwie Widget Tab. To tutaj możesz dostosować format różnych elementów wizualnych aplikacji, wraz z jej zachowaniem podczas interakcji.

Za pomocą narzędzia przesuwania i powiększania możesz:

• Przesuwać powierzchnię edycyjną swojej aplikacji
• Powiększyć lub pomniejszyć

Dodawanie kroków do aplikacji

Aby stworzyć nowy krok w aplikacji Tulip, kliknij opcję Dodaj krok po lewej stronie edytora aplikacji. Projekt nowego kroku będzie odzwierciedlał Układ Bazowy.

Pro-tip: możesz również zduplikować istniejący krok, jeśli chcesz ponownie użyć projektu lub logiki w nowym kroku, klikając na ikonę koła zębatego i wybierz "Duplicate Step".

Dodawanie logiki do Twojej aplikacji

Teraz, gdy wiemy już jak dodawać nowe kroki, musimy dać operatorom sposób na przechodzenie od kroku do kroku. Możemy stworzyć taką logikę w Tulipie używając wyzwalaczy. Na początek użyjmy prostego przycisku do nawigacji z kroku na krok.

Możesz dodać niestandardowy przycisk, wybierając "Button" z paska narzędzi wzdłuż górnej części App Editor. Przeciągnij przycisk w wybrane miejsce.

Dodaj etykietę dla przycisku i dostosuj opcje formatu/kolorystyki za pomocą Context Pane po prawej stronie.

Aby dodać logikę do przycisku, kliknij znak "+" obok Triggers w Context Pane.

Wyzwalacze pozwalają na dodanie logiki do aplikacji bez konieczności używania jakiegokolwiek kodu przy użyciu prostej sekwencji when, if, then, else. To jest edytor wyzwalaczy, który otwiera się po kliknięciu znaku "+".

Akcja lub przejście to zmiana, która nastąpi w aplikacji po uruchomieniu wyzwalacza.

Istnieje wiele akcji i przejść, które możesz wykonać po naciśnięciu przycisku.

Ten wyzwalacz jest prosty:

Gdy: Przycisk jest wciśnięty

Następnie: Aktualny czas jest zapisywany do zmiennej

A następnie: Przejdź do kroku → Next.

Ten przycisk pozwala przejść do następnego Kroku. Zazwyczaj chciałbyś również dodać przycisk pozwalający użytkownikom na przejście do poprzedniego kroku.

Po zbudowaniu podstawowej logiki aplikacji, możesz kliknąć opcję Uruchom lub Przetestuj w prawym górnym rogu edytora aplikacji. To uruchomi Twoją aplikację w TTulip Player i pozwoli Ci przetestować aplikację na Twoim komputerze w czasie rzeczywistym.

Uzupełnianie aplikacji w celu rejestrowania danych

Musisz dodać przycisk Complete, aby Tulip rejestrował wszystkie dane z użytkowania aplikacji przez operatora.

W tym przykładzie, dodamy kolejny przycisk na ostatnim Kroku aplikacji, aby zalogować zakończenie.

Kliknij opcję "Przyciski" na pasku narzędzi i wybierz przycisk Zakończ. Przeciągnij go na ostatni krok w Twojej aplikacji.

Gratulacje! To wszystko, co musisz wiedzieć, aby zbudować prostą aplikację z instrukcjami pracy.

Dalsze lektury

Użyj tych przewodników krok po kroku, aby zbudować pełną aplikację wykorzystującą te koncepcje.

• Tworzenie aplikacji Tulipan
• Zbuduj pełną aplikację do raportowania usterek
• Zbuduj aplikację, która przechwytuje dane o zleceniach roboczych

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 spotkali się z podobnym pytaniem!