W tym artykule dowiesz się:

• Różne części Tulip App Editor
• 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

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

Edytor aplikacji umożliwia tworzenie aplikacji dla operatorów bez pisania kodu.

Oto jak to wygląda:

W edytorze aplikacji można utworzyć serię kroków, które stanowią cyfrowe elementy wizualne procesu.

Film wprowadzający

Podział edytora aplikacji

Edytor aplikacji to miejsce, w którym tworzysz i edytujesz swoją aplikację. Poniższy diagram przedstawia różne części składające się na edytor aplikacji:

1. Add Step/Step Group - Dodaj nowy krok lub grupę kroków.
2. Panel kroków/rekordów - umożliwia przeglądanie kroków za pomocą zakładki kroków lub przejście do zakładki rekordów w celu wyświetlenia używanych tabel.
3. Workspace - przestrzeń do tworzenia interfejsu aplikacji
4. Add an Asset Widget - Dodaj kształt, ikonę lub logo do swojej aplikacji.
5. Add a Button Widget - Dodaj przycisk do swojej aplikacji.
6. Add an Input Widget - dodawanie pola wejściowego do aplikacji
7. Dodaj widżet tekstowy - dodaj pole tekstowe do aplikacji
8. Osadzanie widżetów - osadzanie różnych widżetów, takich jak obrazy, analizy, atrybuty maszyn i inne.
9. Dodaj widżet kamery - Dodaj zwykłą kamerę lub migawkę kamery z kodem kreskowym.
10. Tłumacz - Tulip Player automatycznie przetłumaczy aplikację na wybrany język za pośrednictwem profilu Tulip.
11. Utwórz migawkę - Zapisz aktualną wersję aplikacji, tworząc jej duplikat.
12. Test - przetestuj swoją aplikację w trybie dewelopera
13. Uruchom - uruchom aplikację w aplikacji Tulip Player
14. Publikuj - publikowanie aplikacji
15. Do przodu/do tyłu - przesuwanie elementu w obszarze roboczym do przodu lub za inne elementy
16. Okienko boczne - ustawianie wyzwalaczy i elementów stylistycznych na karcie widżetów, karcie kroków i karcie aplikacji.

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

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

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

Układ podstawowy

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

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

Dowiedz się więcej o układach bazowych tutaj.

Kroki

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

Kliknij krok prawym przyciskiem myszy, aby go powielić, zgrupować lub usunąć.

Więcej informacji o krokach można znaleźć tutaj.

Pasek narzędzi

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

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

Dostępne są trzy zakładki:

• Step Tab
• Zakładka aplikacji
• Zakładka Widget

Zakładka Kroki

Karta 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ść zbudowania 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

Zakładka 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, zakończona lub anulowana.

Zakładka Widget

Kliknięcie elementu w aplikacji spowoduje wyświetlenie kolejnej zakładki w panelu bocznym 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.

Dodawanie logiki do aplikacji

Logika określa, co dzieje się w aplikacji, gdy operator wchodzi z nią w interakcję. Na początek użyjmy prostego przycisku z wyzwalaczem, aby przechodzić od kroku do kroku.

1. Kliknij przycisk Buttons na pasku narzędzi i wybierz Button.
2. Przeciągnij przycisk w wybrane miejsce.

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

1. Aby dodać logikę do przycisku, kliknij + obok Triggers w panelu bocznym.

Wyzwalacze umożliwiają dodawanie logiki do aplikacji bez konieczności używania jakiegokolwiek kodu. Wyzwalacze używają sekwencji when, if, then, else.

Wyzwalacz, który tutaj zbudujemy, ma następującą logikę:

When: Przycisk jest naciśnięty

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

Przejście: Przejdź do kroku → Dalej.

1. Kliknij przycisk Zapisz.

Ten przycisk przenosi użytkownika 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żesz kliknąć Test w prawym górnym rogu. Spowoduje to uruchomienie aplikacji w trybie dewelopera, dzięki czemu można ją przetestować.

Ukończenie aplikacji i rejestrowanie danych

Przycisk Ukończ, aby Tulip zarejestrował wszystkie dane aplikacji powiązane z każdym operatorem.

W tym przykładzie dodamy kolejny przycisk na ostatnim kroku aplikacji.

1. Wybierz ostatni krok aplikacji.
2. Kliknij przycisk Przyciski i wybierz opcję Zakończ.
3. Przeciągnij nowy przycisk w wybrane miejsce.

Więcej informacji

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

• Przewodnik: Tworzenie pierwszej aplikacji
• Przewodnik: Tworzenie formularza wprowadzania danych

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!