Zacznij budować aplikacje
  • 22 Sep 2022
  • 12 Minuty do przeczytania
  • Współtwórcy

Zacznij budować aplikacje


Article Summary

Witamy w Tulipie

Ten artykuł przeprowadzi Cię przez proces wdrożenia i udostępni zasoby, które pomogą Ci szybko rozpocząć pracę.

Witamy w Tulip!

Tulip to platforma bez kodu zbudowana z myślą o unikalnych potrzebach operacji na pierwszej linii. Dzięki Tulipowi możesz zaprojektować solidne, złożone rozwiązania dla swoich najtrudniejszych wyzwań produkcyjnych. W tym przewodniku skupimy się na podstawach platformy Tulip. Omówimy kluczowe funkcje, lokalizacje i koncepcje oraz zbudujemy razem prostą aplikację "Hello World".

:::(Info)(UWAGA)
Ten artykuł zakłada, że masz dostęp do instancji Tulipa. Jeśli nie masz, możesz uzyskać dostęp rozpoczynając darmowy trial{target="_blank"}, lub kontaktując się z osobą lub grupą, która zarządza dostępem do Tulipa dla Twojej organizacji.
:::

Zasoby, które pomogą Ci w nauce

Zanim przejdziemy dalej, przedstawmy kilka kluczowych zasobów, z których możesz skorzystać podczas zapoznawania się z Tulipem.

Baza Wiedzy{target="_blank"}

Baza Wiedzy to zbiór artykułów, filmów i dokumentacji, które pomogą Ci nauczyć się jak używać Tulipa. Jeśli czytasz ten artykuł, to znaczy, że już ją znalazłeś. Miło!

Podążaj za strukturą plików w lewej nawigacji lub użyj paska wyszukiwania, aby znaleźć zawartość związaną z tematem, na który potrzebujesz więcej informacji.

TulipUniversity{target="_blank"}

Uniwersytet Tulipana jest darmowym, dostępnym na żądanie zasobem do nauki Tulipa. Uniwersytet Tulipa zawiera dziesiątki kursów, certyfikatów i wyzwań związanych z budowaniem aplikacji, które pomogą Ci przenieść tworzenie aplikacji na wyższy poziom. Zrób pierwsze kroki zapisując się na kurs Tulip Essentials{target="_blank"}, poćwicz swoje umiejętności z Tulip Challenges, i podziel się swoimi osiągnięciami zostając Tulip Certified App Builder{target="_blank"}.

Biblioteka{target="_blank"}

Biblioteka Tulipa to zbiór gotowych do użycia treści opracowanych przez ekspertów Tulipa. Znajdziesz tu wiele treści, które pozwolą Ci rozpocząć pracę, od pełnych aplikacji i pakietów aplikacji do szablonów, niestandardowych widgetów i konektorów.

Społeczność{target="_blank"}

Masz pytania, ale nie możesz znaleźć odpowiedzi w Bazie Wiedzy lub na Uniwersytecie? Masz pomysł na funkcję, która 100x ułatwiłaby Ci życie? Potrzebujesz sposobu, aby być na bieżąco z najnowszymi i najwspanialszymi informacjami w Tuliverse? Sprawdź Społeczność Tulipana.

Społeczność Tulipa jest aktywnym forum internetowym dla użytkowników, którzy mogą zadawać pytania, prowadzić dyskusje i pomagać sobie nawzajem w rozwiązywaniu problemów z Tulipem.

Zorientuj się - szybka wycieczka po Twojej instancji

Zacznijmy od szybkiej wycieczki po Twojej instancji. Dla celów tego przeglądu, jest 5 kluczowych miejsc, które powinieneś wiedzieć jak znaleźć w Tulipie.

  • Aplikacje i Edytor Aplikacji
  • Stoły
  • Piętro sklepu
  • Dashboardy
  • Ustawienia konta

Możemy przyjrzeć się każdemu z nich po kolei.

Aplikacje i edytor aplikacji

Strona aplikacji

Gdy zalogujesz się na swoje konto, znajdziesz się na ekranie głównym Apps. Tutaj możesz przeglądać i zarządzać wszystkimi aplikacjami w Twojej instancji.

Screen Shot 2022-09-19 at 3.13 1 (5).png

Aby znaleźć tę stronę, najedź na "Apps" w górnej nawigacji i kliknij "Apps" w rozwijanym menu.

Group 1 (1).png

Ekran główny aplikacji i edytor aplikacji

Edytor aplikacji to miejsce, w którym będziesz budować aplikacje. Aby przejść do edytora aplikacji, możesz wybrać istniejącą aplikację lub stworzyć nową. Kliknij w swoją aplikację. Z tego ekranu możesz przeglądać dane dotyczące ukończenia aplikacji, zarządzać aplikacjami {{glossary.Permission}} i {{glossary.Approval}} oraz publikować wersje swoich aplikacji.

Group 13 (1).png

Kliknij na dowolny krok w tym menu, a zostaniesz przeniesiony do edytora aplikacji.

app editor 4 (1).png

Teraz, gdy już tu jesteśmy, podsumujmy to, co widzimy. Jest kilka kluczowych obszarów, z którymi będziesz pracował.

:::(Info)(UWAGA:)
Aby zapoznać się z edytorem aplikacji, sprawdź ten artykuł
:::

Przejrzyjmy 4 kluczowe narzędzia w App Editor:

  • Interfejs Drag and Drop
  • Pasek narzędzi
  • Panel kontekstowy
  • Okno kroków i nagrań

Interfejs przeciągania i upuszczania

Na środku ekranu znajduje się interfejs przeciągania i upuszczania - Twoja pusta przestrzeń.

Group 2 (1).png

To tutaj zaprojektujesz interfejs użytkownika. Tutaj osadzisz widżety, stworzysz interaktywne elementy i zorganizujesz wszystkie informacje i funkcje, których użytkownik będzie potrzebował do interakcji z Twoją aplikacją.

Pasek narzędzi

Nad kanwą zobaczysz serię rozwijanych menu, które nazywamy paskiem narzędzi. Użyj tych menu, aby dodać tekst, dane wejściowe i inne Widżety do swojej aplikacji.

Group 3 (2).png

Okno kontekstowe

Po prawej stronie znajduje się okno kontekstowe, w którym skonfigurujesz szczegóły aplikacji, kroku i widżetu. Tutaj możesz dodawać logikę do aplikacji, zarządzać ustawieniami projektowymi na poziomie aplikacji i dostosowywać widżety, które dodajesz do swojej aplikacji.

Group 15.png

Panel Kroków i Zapisów

W lewym panelu dodasz nowe kroki do swojej aplikacji i będziesz mógł zarządzać tabelami, z którymi łączy się Twoja aplikacja.

Group 5 (1).png{height="" width="""}

Tabele

Tabele są niestandardowymi bazami danych, które tworzysz do przechowywania danych zbieranych przez twoje aplikacje.

Screen Shot 2022-09-19 at 3.09 1.png

Tabele są czymś pośrednim między arkuszami kalkulacyjnymi, takimi jak Excel, a pełnoprawnymi relacyjnymi bazami danych, pozwalając na skonstruowanie modelu danych tak prostego lub złożonego, jak tylko jest to wygodne.

:::(Info)(UWAGA)
Aby szybko zapoznać się z budowaniem aplikacji z tabelami, wypróbuj kurs"Build a Simple Data Entry App{target="_blank"}" w University. Tablice są również szeroko omówione w innych miejscach Bazy Wiedzy{target="_blank"}.
:::

Aby znaleźć tabele, przejdź do zakładki "Apps" w górnej nawigacji i wybierz "Tables" z rozwijanej listy.

Na ekranie głównym Tabele, będziesz miał możliwość przejrzenia istniejącej tabeli lub stworzenia nowej.

Sklep internetowy

Zakładka Shop Floor służy do zarządzania stacjami i urządzeniami fizycznymi związanymi z Twoją instancją Tulip. W zakładce Shop Floor, znajdziesz opcje tworzenia i zarządzania stacjami, zarządzania Edge Devices, maszynami i Tulip Vision.

Group 6 (1).png

Na razie skupmy się na "Stations". Kiedy klikniesz "Stacje", zostaniesz przeniesiony na stronę, gdzie tworzysz stacje i przypisujesz do nich aplikacje - krytyczny krok w procesie publikacji.

:::(Info)(UWAGA)
Możesz dowiedzieć się więcej o stacjach w Bazie Wiedzy i w Tulip University{target="_blank"}
:::

Będziesz wchodził w interakcje z tą stroną znacznie częściej, gdy będziesz przygotowywał się do przeniesienia gotowych aplikacji do produkcji.

Dashboardy

Gdy zaczniesz budować analizy, pojawią się one w sekcji "Dashboards" w Twojej instancji. Przejdź tutaj, klikając opcję "Dashboards" w górnej nawigacji.

Możesz myśleć o dashboardach jako o kolekcjach Analytics. Możesz organizować swoje dashboardy według dowolnej logiki.

Group 7 (1).png

Co ważne, dashboardy mogą być wyeksportowane jako URL i udostępnione każdemu - niezależnie od tego, czy posiada on konto w Tulipie.

Dzięki temu możesz dzielić się swoimi wynikami i metrykami z każdym w Twojej organizacji.

Ustawienia konta

Twoje ustawienia konta są dostępne poprzez kliknięcie na ikonę w prawym górnym rogu Twojej instancji Tulipa. Opcje dostępne dla Ciebie tutaj będą się różnić w zależności od Twoich poziomów uprawnień.

Group 8 (1).png

Tulip Player

Jedna z najważniejszych części Tulipa - Tulip Player - nie znajduje się w Twojej instancji web.

Tulip Player jest aplikacją zaprojektowaną specjalnie do uruchamiania aplikacji. Może być uruchamiany na wielu urządzeniach w wielu systemach operacyjnych. Co najważniejsze, musi być pobrany na każde urządzenie, na którym chciałbyś uruchamiać aplikacje.

Aby pobrać Tulip Player podążaj za tym linkiem. Instrukcje dotyczące instalacji i konfiguracji znajdziesz tutaj

Tworzenie aplikacji

Teraz, gdy potrafisz już odnaleźć się w swojej instancji, przejdźmy do kursu budowania aplikacji. Nie ma lepszego sposobu na to niż wspólne budowanie aplikacji. Uruchom więc swoją instancję i zbudujmy razem aplikację "Hello World".

Tworzenie nowej aplikacji

Pierwszą rzeczą, którą musimy zrobić jest stworzenie nowej aplikacji. Aby to zrobić, przejdź do sekcji "Apps" platformy używając menu "Apps" w górnej nawigacji.

Po tym, kliknij "Utwórz aplikację" w prawym górnym rogu. Zostaniesz wtedy poproszony o modal, który zapyta Cię, czy chcesz stworzyć nową aplikację, czy zacząć od szablonu. Zachęcamy do zabawy z różnymi dostępnymi szablonami, ale na razie zacznijmy od pustej aplikacji, klikając "create" w prawym dolnym rogu modalu.

ezgif-4-42b23129c0.gif

Zostaniesz przekierowany do ekranu głównego aplikacji, gdzie będziesz zarządzał jej ustawieniami. Nazwij swoją aplikację "Hello World", klikając ołówek obok "Untitled App" w lewym górnym rogu. Następnie kliknij na dowolny krok, a zostaniesz przeniesiony do edytora aplikacji.

Tworzenie aplikacji "Hello World"

Możemy podzielić proces tworzenia aplikacji na kilka kluczowych kroków, które będziesz powielać na różnych poziomach skali i złożoności podczas swojej podróży z Tulipem.

  • Projektowanie interfejsu użytkownika
  • Dodawanie logiki
  • Testowanie

Utrzymamy to tak proste, jak to tylko możliwe i skupimy się na zaprojektowaniu podstawowego interfejsu, dodaniu jednej linii logiki i przetestowaniu naszej aplikacji przy użyciu trybu deweloperskiego.

Projektowanie interfejsu użytkownika aplikacji

Interfejs użytkownika to układ graficznych i interaktywnych elementów na poszczególnych etapach aplikacji. Zaprojektowanie dobrego UI jest niezbędne, aby umożliwić użytkownikom udaną interakcję z aplikacją.

:::(Info)(UWAGA:)
Projektowanie interfejsu użytkownika jest szczegółowo omówione w Tulip University{target="_blank"}.
:::

Na razie trzymajmy się podstaw. Dodamy 4 elementy do naszego UI:

  • Kształt tworzący pasek nagłówkowy
  • Zmienna, która wyświetli nazwę aplikacji
  • Przycisk menu
  • Przycisk, który po kliknięciu wyświetli komunikat "Hello World".

Zaprojektuj układ bazowy

Układy bazowe to wzorce projektowe, które są stosowane do każdego kroku w aplikacji.

Zaprojektujemy nasz UI jako Układ Bazowy dla naszej aplikacji.

Aby uzyskać dostęp do Układu Bazowego, kliknij tekst "Układ Bazowy" w lewej dolnej części App Editora. Będziesz wiedział, że edytujesz Układ Bazowy, gdy tło za tekstem będzie podświetlone na niebiesko.

Group 9 (1).png

Aby dodać swój pasek nagłówkowy, przejdź do menu Assets na pasku narzędzi i wybierz opcję "rectangle". Jeśli nie jest ona od razu widoczna, wyszukaj "rectangle" za pomocą paska wyszukiwania.

Po kliknięciu opcji "rectangle" okaże się, że do obszaru piaskownicy w edytorze aplikacji został dodany kształt. Kliknij na ten kształt, aby go zaznaczyć. W prawym panelu zobaczysz opcje umożliwiające dostosowanie ustawień zasobu. Zmień kolor na ciemnoszary. Dopasuj ustawienia widgetu tak, aby jego wymiary wynosiły 1920w x 100h, lub po prostu przeciągnij go na miejsce tak, aby rozciągał się na górze Twojej aplikacji.

Dodaj nazwę kroku do górnej nawigacji

Kiedy użytkownik wchodzi do naszej aplikacji, chcemy aby wyświetlała ona nazwę kroku, którego aktualnie używa. W tym przypadku chcemy, aby nasza aplikacja czytała "Hello World" na górnym pasku, który właśnie stworzyliśmy.

Aby to zrobić, kliknij na menu "Text" na pasku narzędzi i wybierz "Variable" z listy rozwijanej. Alternatywnie, możesz użyć skrótu klawiaturowego i po prostu nacisnąć "V".

Zmienne w Tulipanie są miejscami dla wartości. Gdy wybierzesz wyświetlanie zmiennej, Twoja aplikacja wyświetli wartość, która jest aktualnie przechowywana w tej zmiennej.

Aby uzyskać dostęp do nazwy kroku, musimy skonfigurować naszą zmienną.

Upewnij się, że zmienna wbudowana jest wybrana i przejdź do panelu widżetów na prawym panelu. W zakładce "Datasource" wybierz "App Info". Wybierz "Step Name" z listy rozwijanej "Select App Info".

Przeciągnij i upuść swoją zmienną na miejsce w górnym pasku. Możesz zmienić kolor tekstu, aby był bardziej czytelny na ciemnym tle.

Alternatywnie, możesz po prostu dodać "nazwę kroku" z menu Tekst na pasku narzędzi.

Ostatnią rzeczą, którą musimy zrobić jest nadanie nazwy naszemu krokowi. Kliknij dwukrotnie na "Bez tytułu" w lewym panelu kroków i zmień nazwę kroku na "Hello World".

Dodaj przycisk menu

Korzystając z menu "Buttons" na pasku narzędzi, dodaj przycisk Menu do swojej aplikacji. Przeciągnij go na miejsce w lewym lub prawym górnym rogu paska górnego.

Ważne jest, aby przycisk menu był dostępny z każdego kroku aplikacji, tak aby użytkownik mógł zmienić, anulować lub wstrzymać swoją aplikację.

Dodaj przycisk Hello World

Używając menu "Buttons" na pasku narzędzi, dodaj przycisk do swojej aplikacji. Wyśrodkuj go na swoim układzie.

W następnej sekcji dodamy logikę do tego przycisku.

Dodawanie logiki do aplikacji

Logika wyzwalania jest tym, co czyni aplikacje inteligentnymi. To ona odróżnia programy typu slideshow od dynamicznych, responsywnych aplikacji, które zbudujesz w Tulipie.

Struktura logiki w Tulipie

Logiczne stwierdzenia w Tulipie mają ten sam wzór: WhenIfThen.

Group 10 (1).png

Kiedy występuje zdarzenie, Jeśli pewne warunki są spełnione lub niespełnione, Wtedy aplikacja wykonuje określone akcje.

Wyzwalacz dla naszej aplikacji "Hello World" będzie miał taką samą strukturę.

Gdy użytkownik naciśnie przycisk, wtedy aplikacja wyświetli komunikat "Hello World". W tym wyzwalaczu nie umieścimy żadnych instrukcji warunkowych.

Gdzie dodaje się wyzwalacze w Tulipie

W Tulipie logika związana jest ze zdarzeniami. Użytkownik naciskający przycisk, zmiana stanu maszyny lub zeskanowanie kodu kreskowego to przykłady zdarzeń. Istnieje kilka typowych miejsc, w których dodajesz wyzwalacze w Tulipie:

  • Do widżetów, takich jak przyciski i interaktywne tabele
  • Do kroków, dla akcji typu "przy otwarciu kroku", "przy zamknięciu kroku" lub "gdy urządzenie się uruchomi".
  • Do aplikacji, dla akcji typu "kiedy aplikacja się otwiera".
  • Zbuduj swój pierwszy wyzwalacz

Napiszmy nasz pierwszy wyzwalacz.

Nasz wyzwalacz będzie robił dwie rzeczy:

  1. Przechowywać ciąg tekstu w zmiennej
  2. Wyświetlenie wiadomości zawierającej tę zmienną

Kiedy skończysz, powinno to wyglądać tak:

Screen Shot 2022-09-19 at 2.08.45 PM.png

Przejdź dalej i wybierz przycisk, który umieściłeś na środku swojego interfejsu użytkownika. Po wybraniu widżetu, w oknie kontekstowym znajdź fałdę oznaczoną "triggery" i kliknij znak plusa, aby dodać triger. Spowoduje to wyświetlenie modalu wyzwalacza.

Nadaj swojemu wyzwalaczowi nazwę, coś w stylu "Print Hello World".

Ponieważ ten wyzwalacz jest dołączony do przycisku, nasze oświadczenie WHEN jest załatwione za nas: KIEDY przycisk zostanie wciśnięty.

Naszym zadaniem jest więc napisanie naszych instrukcji akcji, czyli THEN. Zacznijmy od zapisania ciągu tekstu do zmiennej.

Kliknij "Dodaj nową akcję". Używając rozwijanego menu, wybierz "Manipulacja danymi", a następnie "Zapisz". Przy tej akcji musimy określić, jakie dane chcemy zapisać i gdzie. Używając rozwijanego menu po "Data:" wybierz "static value," a następnie "Text." Umieścimy naszą wiadomość w tej wartości statycznej. W polu wejściowym wpisz swoją wiadomość "Hello World".

Kolejnym elementem tego wyzwalacza jest określenie "location:", czyli gdzie będą przechowywane Twoje dane. Wybierz "Variable" z listy rozwijanej, a następnie wybierz utworzenie nowej zmiennej. Nadaj swojej zmiennej nazwę, coś w stylu "Hello World Variable", i kliknij zielony haczyk.

Prawie gotowe. Następną rzeczą, którą musimy zrobić jest wyświetlenie naszej zmiennej w wiadomości. W tym celu stworzymy kolejną akcję w naszym wyzwalaczu.

Kliknij więc "dodaj nową akcję" i wybierz "Pokaż wiadomość" z listy rozwijanej. Ostatnią rzeczą, którą musimy zrobić, to określić, jakie dane znajdą się w naszej wiadomości. Ponieważ utworzyliśmy już zmienną, możesz wybrać "Zmienna" z listy rozwijanej, a następnie wybrać zmienną "Hello World".

Zapisz swój wyzwalacz. Teraz jesteś gotowy do przetestowania swojej aplikacji.

Testowanie aplikacji

W każdym momencie procesu projektowania możesz przetestować swoją aplikację, używając przycisku "Test" znajdującego się po prawej stronie paska narzędzi w edytorze aplikacji. Otworzy to tryb deweloperski, środowisko piaskownicy, które pozwala na testowanie aplikacji bez narażania danych lub systemów produkcyjnych.

Group 17.png

Po otwarciu Developer Mode, możesz przetestować swoją aplikację. Naciśnij "begin", a następnie naciśnij swój przycisk. Powinieneś zobaczyć komunikat "Hello World" wyświetlony na dole ekranu.

Opublikuj swoją aplikację

Zanim wypchniesz swoją aplikację na produkcję, musisz ją opublikować. To stworzy wersję tylko do odczytu Twojej aplikacji, do której będziesz miał dostęp na stacji.

Aplikacje są publikowane jako wersje. Za każdym razem, gdy dokonasz zmian w aplikacji, będziesz musiał opublikować nową wersję, aby uzyskać dostęp do swoich ostatnich zmian w odtwarzaczu. To pomaga w zarządzaniu zmianami i zapewnia, że tylko zatwierdzone wersje i modyfikacje trafiają do produkcji.

Group 16.png

Aby opublikować swoją aplikację, wróć do Edytora aplikacji. Kliknij przycisk "opublikuj" w prawym górnym rogu ekranu. Spowoduje to wyświetlenie modalu z prośbą o skomentowanie tego, co zmieniło się w tej wersji. Dodaj dowolny komentarz. Komentarze będą ważniejsze, gdy zaczniesz pracować w skali, ale na razie możesz zachować prostotę. Następnie kliknij "Opublikuj wersję 1".

Co budujesz z Tulipem

Tulip jest niezwykle elastycznym rozwiązaniem. Ponieważ jest to prawdziwa platforma, nie ma ograniczeń co do typów aplikacji, które możesz zbudować. Co rodzi ważne pytanie: Co mogę zbudować z Tulipem?

Odpowiedź, oczywiście, zależy od Twoich potrzeb operacyjnych. Wielu użytkowników ma na myśli konkretne cele dla Tulipa, takie jak:

  • Redukcja błędów w ręcznej operacji montażu
  • Śledzenie czasu pracy i przestojów maszyny
  • Zwiększenie widoczności produkcji
  • Uproszczenie genealogii produktów w środowiskach o dużym zróżnicowaniu.

Te konkretne cele biznesowe można łatwo przekształcić w aplikację lub serię aplikacji, które zapewniają pożądany rezultat. Zwykle określamy te zestawy aplikacji jako przypadki użycia lub konkretne wyzwania operacyjne, które pomagają rozwiązać. Przypadki użycia, które dotyczą powyższej listy celów operacyjnych to:

  • Cyfrowe instrukcje pracy
  • Monitorowanie maszyn
  • Śledzenie produkcji
  • Identyfikowalność i genealogia

Projekty te mogą mieć różny zakres, od aplikacji do kontroli jakości na pojedynczym stanowisku w pojedynczej komórce, do dużych rozwiązań elektronicznego zapisu partii dla całej produkcji farmaceutycznej. Często klienci Tulipa zaczynają od prostych przypadków użycia, które szybko przynoszą wartość i budują możliwości, rozszerzając swoje rozwiązania w miarę jak rośnie ich komfort korzystania z Tulipa.

:::(Info)(UWAGA)
Dowiedz się, jak wybrać swój pierwszy przypadek użycia w tym{target="_blank"} Kurs Uniwersytetu Tulipa.
:::

Istotne jest to, że te same podstawowe cechy Tulipa mogą być użyte do zaprojektowania każdej aplikacji, jaką możesz sobie wyobrazić, dla każdego wyzwania operacyjnego, jakie możesz napotkać, w każdej skali.

Ucząc się kilku kluczowych cech Tulipa, dasz swojemu zespołowi możliwość projektowania rozwiązań programowych dla najtrudniejszych wyzwań dziś, jutro i za rok.


Czy ten artykuł był pomocny?