Tworzenie aplikacji
  • 28 Aug 2024
  • 8 Minuty do przeczytania
  • Współtwórcy

Tworzenie aplikacji


Streszczenie artykułu

Tworzenie aplikacji w Tulip może początkowo wydawać się onieśmielające, ale po rozbiciu i zrozumieniu podstawowych elementów nie jest to takie skomplikowane. Aplikacje łączą następujące zasady, aby stworzyć nowe oprogramowanie: Projekt interfejsu użytkownika, logika warunkowa i funkcje, dane i bazy danych, analityka oraz połączenia z innymi systemami, urządzeniami i maszynami. W tym przewodniku omówimy kluczowe koncepcje i narzędzia interfejsu potrzebne do pomyślnego tworzenia aplikacji. Pamiętaj - Tulip to platforma bez kodowania, więc skupimy się na funkcjach potrzebnych do projektowania aplikacji gotowych do produkcji, niezależnie od Twojego doświadczenia w kodowaniu.

Zaczniemy od przejrzenia głównego interfejsu do przeglądania aplikacji.

Tworzenie i organizowanie aplikacji

Aby wyświetlić wszystkie aplikacje w instancji, przejdź do strony aplikacji w instancji Tulip, przechodząc do: [twoja-instancja].tulip.co/group. Możesz także najechać kursorem na kartę Aplikacje na górnym pasku nawigacyjnym i kliknąć Aplikacje.

View Apps.png

Na tej stronie można wyświetlić aplikacje utworzone w instancji, podzielone na grupy aplikacji, foldery do organizowania kolekcji aplikacji. Możesz także wyświetlić każdą aplikację w grupach aplikacji i innych folderach, takich jak ostatnie i ulubione aplikacje, na panelu nawigacyjnym po lewej stronie.

Apps Page(1)

Wybierz istniejącą aplikację z grupy, aby wyświetlić i edytować jej informacje. Można również wyświetlić dowolne z poniższych danych aplikacji:

  • Kroki
  • Analityka
  • Wersje
  • Ukończenia
  • Permissions
  • Approvals

App Info Data.png

Aby edytować aplikację, kliknij niebieski przycisk "Edytuj" w prawym górnym rogu lub kliknij bezpośrednio krok.

Aby utworzyć nową aplikację, przejdź do ekranu aplikacji i kliknij niebieski przycisk "Utwórz aplikację" w prawym górnym rogu. Możesz także kliknąć małą strzałkę obok przycisku, aby utworzyć nową grupę aplikacji.

Wybierz pusty szablon lub wstępnie zaprojektowaną polecaną aplikację i kliknij przycisk "Utwórz" w lewym dolnym rogu okna. Te wyróżnione szablony zostały zaprojektowane przez innych użytkowników Tulip, dzięki czemu inni mają szybkie rozwiązania problemów, jeśli nie chcą tworzyć aplikacji od podstaw. Możesz również edytować te szablony, aby dostosować je do swoich potrzeb.

Create New App.png

Po przekierowaniu do ekranu informacji o aplikacji, nazwij swoją aplikację i podaj jej opis. Oznaczenie tych informacji jest pomocne, abyś mógł śledzić aplikację bez względu na to, na jakim etapie procesu się znajdujesz.

Kliknij niebieski przycisk "Edytuj" w prawym górnym rogu, aby przejść do interfejsu edytora aplikacji.

Edytor aplikacji

App Editor 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:

App Editor.png

  1. Add Step/Step Group - Dodaj nowy krok lub grupę kroków.
  2. Step/Records Panel - wyświetlanie kroków za pomocą zakładki kroków lub przełączanie na zakładkę rekordów, aby wyświetlić używane tabele.
  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. Create Snapshot - Zapisz aktualną wersję aplikacji, tworząc duplikat, dzięki czemu możesz przetestować wiele wersji bez ryzyka błędu.
  12. Test - przetestuj swoją aplikację w trybie dewelopera
  13. Run - uruchom aplikację w odtwarzaczu Tulip Player
  14. Publish - opublikuj swoją aplikację
  15. Forward/Back - Przesuń element w obszarze roboczym do przodu lub za inne elementy.
  16. Panel wyzwalaczy - ustawianie wyzwalaczy, elementów stylistycznych i informacji na poziomie aplikacji.

Aby uzyskać szczegółowy przegląd edytora aplikacji, odwiedź stronę Intro to the Tulip App Editor.

Kroki

Kroki to "strony" aplikacji, różne ekrany wyświetlające zawartość. Aby dodać krok, kliknij przycisk "Dodaj krok", który wyświetla cztery opcje:

Add New Step.png

  • Kroki - zwykły krok, który można dostosować do własnych potrzeb lub za pomocą widżetów.
  • Kroki formularzy i formularze podpisów - te opcje zostały wyłączone dla nowych instancji po r235.
  • Step Groups (grupy kroków) - folder kroków ułatwiający organizowanie aplikacji i wykonywanie operacji zbiorczych, takich jak zmiana kolejności/duplikowanie kroków.

Kroki mogą być liniowe lub nieliniowe, ponieważ nie muszą następować po sobie w kolejności, w jakiej zostały ułożone. Logika dodana do aplikacji określi przejście kroków.

Aby uzyskać szczegółowy przewodnik po pracy z krokami, zobacz zbiór artykułów tutaj: Kroki.

Układ podstawowy

Układ podstawowy to szablon, który ma zastosowanie do każdego tworzonego kroku. Utworzenie układu bazowego ułatwia tworzenie aplikacji, z podstawowymi elementami automatycznie dodawanymi do każdego kroku i zapewnia spójny styl w całej aplikacji.

Aby przejść do układu podstawowego, kliknij przycisk "Układ podstawowy" u dołu panelu kroku/rekordu.

Base Layout.png

W układzie podstawowym wszystko, co umieścisz w obszarze roboczym, pojawi się we wszystkich krokach. Proces ten pozwala szybko i łatwo skonfigurować układ aplikacji, eliminując konieczność indywidualnego tworzenia każdego kroku od podstaw.

Aby uzyskać szczegółowy przewodnik na temat tworzenia układu podstawowego, zobacz Jak korzystać z układu podstawowego.

Widżety

Widżety są elementami składowymi aplikacji. Mogą wyświetlać informacje, zbierać dane, wykonywać logikę wyzwalacza i nie tylko.

Widgets.png

Widżety ikon

Umieszczaj kształty, ikony lub logo w obszarze roboczym i konfiguruj logikę, aby zaprojektować wygląd i branding swojej aplikacji.

Widżety przycisków

Wybieraj spośród różnych przycisków, z zaprogramowaną logiką lub pustymi przyciskami niestandardowymi, do wykorzystania w swojej aplikacji.

Przeczytaj więcej o widżetach przycisków tutaj.

Widżety danych wejściowych

Zbieraj dane od użytkowników aplikacji za pomocą Input Widget, przy czym każdy typ danych wejściowych reprezentuje inną zmienną danych.

Więcej o widżetach danych wejściowych można przeczytać tutaj.

Widżet tekstowy

Wyświetla tekst statyczny lub dynamiczny, w tym wartości zmiennych, zwykły tekst statyczny i całe symbole zastępcze rekordów.

Widżety osadzone

Osadzaj w aplikacji filmy, obrazy, CAD, dokumenty, skanery kodów kreskowych i nie tylko.

Więcej informacji na temat osadzonych widżetów można znaleźć tutaj.

Widżety kamery

Wyświetlaj obraz z kamery Tulip Vision lub skanuj kody kreskowe za pomocą kamery urządzenia.

Przeczytaj więcej o widżetach kamery tutaj.

Widżety niestandardowe

Jeśli żaden z powyższych widżetów nie odpowiada Twoim potrzebom, możesz utworzyć własny widżet przy użyciu HTML, CSS i Javascript, aby rozszerzyć możliwości platformy.

Więcej informacji na temat niestandardowych widżetów można znaleźć tutaj.

Wyzwalacze

Wyzwalacze umożliwiają dodawanie logiki do aplikacji.

Bez wyzwalaczy aplikacja jest płaskim ekranem; wyzwalacze sprawiają, że aplikacja coś robi. Wyzwalacze można dodawać do widżetów, a także do kroków (wyzwalacze na poziomie kroku) i aplikacji (wyzwalacze na poziomie aplikacji) oraz po wystąpieniu określonych zdarzeń, takich jak uruchomienie urządzenia. W przypadku widżetu wybierz ten, do którego chcesz dodać wyzwalacz, a następnie w panelu wyzwalaczy kliknij znak plus obok "Wyzwalacz".

Add Trigger.png

Aby dodać wyzwalacz do kroku, upewnij się, że znajdujesz się w kroku, do którego chcesz dodać wyzwalacz. Przejdź do zakładki Krok w Panelu wyzwalaczy i wybierz jedną z opcji z listy, klikając znak plus.

Step Trigger.png

Wszystkie wyzwalacze mają ten sam podstawowy format: gdy nastąpi akcja , wykonaj następującą akcję i/lub przejście. Wyzwalacze mogą być tak proste lub skomplikowane, jak potrzebujesz, z możliwością dodawania wielu akcji. Możesz także dodać instrukcje if, które dodają warunek do wykonywanej akcji, jeśli kryteria są spełnione.

Za pomocą instrukcji If ustawia się warunki, które pozwalają na wykonanie akcji.

Trigger-If Statement.png

Następnie instrukcje są albo akcją, albo przejściem. Akcja to zmiana w aplikacji, która nie jest związana ze zmianą kroków. Przejście to zmiana kroków lub ukończenie aplikacji.

Trigger-New Action/Transition.png

Wreszcie, aby zbiegać się z instrukcjami if, istnieją instrukcje else if, które określają alternatywne działanie, które należy podjąć, gdy instrukcja if okaże się fałszywa.

Trigger-Else If Statement.png

Aby uzyskać bardziej szczegółowy przewodnik na temat wyzwalaczy, zobacz Wyzwalacze.

Zmienne

Zmienne to typy danych przechowywanych w Tulip Cloud, które są używane podczas tworzenia tabel i analiz. W Tulip istnieje wiele typów danych, z których każdy ma swój własny cel:

  • Boolean - Tak/Nie
  • Color - dynamiczny kolor do ustawiania statusu widżetu
  • Datetime - znacznik czasu i daty
  • File - łącze do pliku przechowywanego w Tulip
  • Image - łącze do obrazu przechowywanego w Tulip
  • Integer - Liczba całkowita
  • Interval - ilość czasu wyświetlana w sekundach
  • Maszyna - obiekt maszyny w Tulip
  • Number - Liczba rzeczywista
  • Object - konfigurowalna struktura obiektu z atrybutami podrzędnymi, które mają własny typ danych
  • Station - obiekt stacji w Tulip z poziomu Shop floor
  • Tekst - ciąg znaków
  • Użytkownik - obiekt użytkownika w aplikacji Tulip z ustawień konta/przestrzeni roboczej.

Aby dodać zmienną w aplikacji, przejdź do zakładki Aplikacja w panelu Wyzwalacze i wybierz X obok "Zmienne".

Variables.png

Otworzy się okno zmiennych, wyświetlające wszystkie zmienne używane w aplikacji. Aby utworzyć nową zmienną, kliknij niebieski przycisk "Utwórz zmienną" w prawym górnym rogu.

W wyskakującym okienku wprowadź nazwę zmiennej i typ danych oraz przełącz dwa przełączniki: czy zmienna zostanie wyczyszczona po zakończeniu aplikacji i czy zmienna może zostać zapisana do analizy.

Po utworzeniu zmiennej zostanie ona wyświetlona w oknie zmiennych.

Create Variable.gif

Zmienne można również tworzyć z poziomu edytora wyzwalaczy. Na przykład, jeśli chcesz utworzyć nowy wpis po kliknięciu przycisku Wyślij, kliknij przycisk, do którego chcesz dodać wyzwalacz i otwórz edytor wyzwalaczy.

Dodaj nową akcję zgodną z powyższą logiką, nadaj zmiennej nazwę umożliwiającą jej identyfikację i wybierz tabelę, do której ma zostać zapisana. Spowoduje to utworzenie rekordu za pośrednictwem zmiennej, który zostanie zapisany w wyznaczonej tabeli. Więcej o tabelach dowiemy się w innym przewodniku, na razie pamiętaj, że tabele przechowują dane.

Trigger-Create New Variable.png

Aby dowiedzieć się więcej o zmiennych, zobacz Zmienne.

Tworzenie aplikacji z Tulip

Zbuduj prostą aplikację Hello World z członkiem Tulip. Ten kurs jest również oferowany przez Tulip University.

Najlepsze praktyki projektowania interfejsu użytkownika

Podczas projektowania aplikacji, nawigacja i dostępność to dwa ważne pojęcia, o których należy pamiętać. Ważne jest, aby użytkownicy aplikacji mogli poruszać się po aplikacji bez zgubienia się i aby interaktywne widżety były jasne w użyciu. Jeśli dopiero zaczynasz tworzyć aplikacje, być może zastanawiasz się, jak zoptymalizować interfejs użytkownika pod kątem użyteczności. Przewodniki na temat projektowania interfejsów aplikacji można znaleźć w sekcji Projektowanie aplikacji.

Dodatkowe zasoby

Tulip University

Tulip University to darmowy, dostępny na żądanie zasób do nauki Tulip. Tulip University zawiera dziesiątki kursów, certyfikatów i wyzwań związanych z tworzeniem aplikacji, które pomogą Ci przenieść tworzenie aplikacji na wyższy poziom. Podejmij pierwsze kroki, zapisując się do Tulip Essentials, ćwicz swoje umiejętności w Tulip Challenges i dziel się swoimi osiągnięciami, zostając Tulip Certified App Builder.

Biblioteka Tulip

Biblioteka Tulip to zbiór gotowych do użycia treści opracowanych przez ekspertów Tulip. Znajdziesz tu wiele treści, które pomogą Ci zacząć, od pełnych aplikacji i pakietów aplikacji po szablony, niestandardowe widżety i łączniki.

Społeczność Tulip

Masz pytania, ale nie możesz znaleźć odpowiedzi w Bazie wiedzy lub na Uniwersytecie? Masz pomysł na funkcję, która uczyniłaby Twoje życie 100x łatwiejszym? Potrzebujesz sposobu, aby być na bieżąco z najnowszymi i najlepszymi informacjami w Tuliverse? Sprawdź Społeczność Tulip.

Społeczność Tulip to aktywne forum internetowe, na którym użytkownicy mogą zamieszczać pytania, prowadzić dyskusje i pomagać sobie nawzajem w rozwiązywaniu problemów z Tulip.


Czy ten artykuł był pomocny?