Wprowadzenie do edytora aplikacji Tulip
  • 13 May 2024
  • 4 Minuty do przeczytania
  • Współtwórcy

Wprowadzenie do edytora aplikacji Tulip


Streszczenie artykułu

Cel

W tym artykule dowiesz się:

  • Różne części edytora aplikacji Tulip
  • Podstawowe elementy wizualne, które można dodać do aplikacji (zwane również widżetami)
  • Jak dodać podstawową logikę za pomocą przycisków
  • Jak ukończyć aplikację, aby rejestrować dane

:::(Info) (Uwaga:) Ten temat jest przedstawiony w kursie"Wprowadzenie do tworzenia aplikacji" na Uniwersytecie Tulip :::

Jeśli nadal zapoznajesz się z edytorem aplikacji Tulip, ten artykuł jest dla Ciebie. Użyjemy przykładu wizualnej aplikacji instrukcji pracy, aby przejść przez wszystkie główne narzędzia w edytorze aplikacji.

Zanim zaczniemy, krótkie przypomnienie: App Editor umożliwia tworzenie aplikacji dla operatorów bez pisania kodu.

Oto jak to wygląda:

Edytor aplikacji umożliwia tworzenie serii kroków lub ekranów, z których operatorzy mogą korzystać w aplikacji. Kroki mogą być również zorganizowane 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 Tulip niedawno, aplikacje w Twojej instancji mogą różnić się od tego, co widzisz na zdjęciach w tym artykule. Bez obaw. Idee są takie same, nawet jeśli zawartość jest nieco inna :::

Szybki przegląd edytora aplikacji Tulip

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

Wszelkie zmiany formatowania lub układu dokonane w układzie bazowym zostaną automatycznie zastosowane do każdego kroku w aplikacji.

Układ bazowy można zmienić w każdym kroku, "odblokowując" poszczególne elementy w okienku kontekstowym po prawej stronie.

Klikając prawym przyciskiem myszy można powielać, grupować kroki lub usuwać je.

Możesz kliknąć krok, aby wyświetlić zawarte w nim elementy.

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żna użyć do warstwowania obiektów w edytorze aplikacji Tulip.

Okienko kontekstowe po prawej stronie ekranu służy do obsługi całego formatowania i logiki w aplikacji. Więcej informacji na temat konfiguracji widżetów można znaleźć tutaj.

Dostępne są trzy zakładki:

  • Step Tab
  • Karta aplikacji
  • Zakładka Widget

Zakładka Krok pokazuje:

  • Opcje formatowania dla całego kroku
  • Umożliwia określenie docelowego czasu cyklu dla tego kroku.
  • Umożliwia zresetowanie do układu określonego w układzie podstawowym.
  • Umożliwia usunięcie bieżącego kroku
  • Daje możliwość tworzenia 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.

Karta aplikacji:

  • Umożliwia drukowanie kroków w aplikacji.
  • Umożliwia dostosowanie licznika cykli dla całej aplikacji.
  • Wyświetla listę wszystkich zmiennych powiązanych z tą aplikacją.
  • Umożliwia określenie rozdzielczości aplikacji w celu dopasowania do zamierzonego interfejsu.
  • Umożliwia dodawanie komentarzy, jeśli wielu administratorów przegląda zmiany.
  • Daje możliwość tworzenia logiki, która będzie wykonywana za każdym razem, gdy aplikacja zostanie uruchomiona, ukończona lub anulowana.

Kliknięcie elementu w aplikacji spowoduje wyświetlenie kolejnej karty w panelu kontekstowym o nazwie Widget Tab. Jest to miejsce, w którym można dostosować format różnych elementów wizualnych aplikacji, a także jej zachowanie podczas interakcji.

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

  • przesuwać powierzchnię edycji aplikacji
  • Powiększać lub pomniejszać

Dodawanie kroków do aplikacji

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

Wskazówka: możesz również zduplikować istniejący krok, jeśli chcesz ponownie użyć projektu lub logiki w nowym kroku, klikając ikonę koła zębatego i wybierając "Duplikuj krok".

Dodawanie logiki do aplikacji

Teraz, gdy omówiliśmy sposób dodawania nowych kroków, musimy zapewnić operatorom sposób przechodzenia od kroku do kroku. Możemy stworzyć tę logikę w Tulip za pomocą wyzwalaczy. Na początek użyjmy prostego przycisku do przechodzenia z kroku do kroku.

Możesz dodać niestandardowy przycisk, wybierając "Przycisk" z paska narzędzi u góry edytora aplikacji. Przeciągnij przycisk w wybrane miejsce.

Dodaj etykietę dla przycisku i dostosuj opcje formatu/kolorowania za pomocą panelu kontekstowego po prawej stronie.

Aby dodać logikę do przycisku, kliknij znak "+" obok opcji Wyzwalacze w okienku kontekstowym.

Wyzwalacze umożliwiają dodawanie logiki do aplikacji bez konieczności używania 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żna wykonać po naciśnięciu przycisku.

Ten wyzwalacz jest prosty:

Kiedy: Przycisk jest naciśnięty

Następnie: Bieżący czas jest zapisywany w zmiennej

A następnie: Go to Step → Next.

Ten przycisk umożliwia przejście do następnego kroku. Zazwyczaj warto również dodać przycisk umożliwiający użytkownikom przejście do poprzedniego kroku.

Po zbudowaniu podstawowej logiki aplikacji można kliknąć opcję Uruchom lub Testuj w prawym górnym rogu edytora aplikacji. Spowoduje to uruchomienie aplikacji w odtwarzaczu TTulip Player i pozwoli przetestować aplikację na komputerze w czasie rzeczywistym.

Uzupełnianie aplikacji w celu rejestrowania danych

Musisz dodać przycisk Complete, aby Tulip zarejestrował wszystkie dane z korzystania z aplikacji przez operatora.

W tym przykładzie dodamy kolejny przycisk w ostatnim kroku aplikacji, aby zarejestrować zakończenie.

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

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

Więcej informacji

Skorzystaj z tych przewodników krok po kroku, aby zbudować pełną aplikację przy użyciu tych koncepcji.


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

Możesz również udać się na stronę community.tulip.co, aby opublikować swoje pytanie lub sprawdzić, czy inni mieli do czynienia z podobnym pytaniem!


Czy ten artykuł był pomocny?