Ebben a cikkben a következőkről olvashat:
- A Tulip App Editor különböző részeit
- Az alkalmazáshoz hozzáadható alapvető vizuális elemek (más néven widgetek)
- Hogyan adhat hozzá alapvető logikát gombok segítségével
- Hogyan készítsen el egy adatnaplózó alkalmazást
This topic is featured in the Introduction to app building course in Tulip University.
Ha még csak most ismerkedik a Tulip App Editorral, akkor ez a cikk Önnek szól. Egy munkavégzési utasításokat tartalmazó alkalmazás példáján keresztül bemutatjuk az App Editor összes fontosabb eszközét.
Az App Editor segítségével kódírás nélkül is készíthetsz alkalmazásokat a kezelők számára.
Így néz ki:
Az App Editorban lépés sorozatokat hozhatsz létre, amelyek egy folyamat digitális vizuális elemeit ábrázolják.
Bevezető videó
We're constantly improving the applications that come in new instances. If you joined Tulip recently, the apps in your instance might look different than what you see in images in this article. No worries, the ideas are the still same even if the content is a little different.
Az App Editor felépítése
Az App Editorban készítheti el és szerkesztheti az alkalmazását. Az alábbi ábra bemutatja az App Editor különböző részeit:
- Lépés/lépéscsoport hozzáadása – Új lépés vagy lépéscsoport hozzáadása
- Lépés/rekordok panel – Tekintse meg a lépéseit a „Lépés” fülön, vagy váltson át a „Rekordok” fülre a használt táblák megtekintéséhez
- Munkaterület – Az alkalmazás felületének létrehozására szolgáló terület
- Elem widget hozzáadása – Adjon hozzá alakzatot, ikont vagy logót az alkalmazásához
- Gomb-widget hozzáadása – Adjon hozzá egy gombot az alkalmazásához
- Beviteli widget hozzáadása – Adjon hozzá egy beviteli mezőt az alkalmazásához
- Szöveg-widget hozzáadása – Adjon hozzá egy szövegdobozt az alkalmazásához
- Widget beágyazása – Ágyazzon be különféle widgeteket, például képeket, elemzéseket, gépi tulajdonságokat és egyebeket
- Kamera-widget hozzáadása – Hozzon létre egy normál kamera- vagy vonalkód-kamera pillanatképet
- Fordítás – A Tulip Player a Tulip-profilján keresztül automatikusan lefordítja az alkalmazást a kiválasztott nyelvre
- Pillanatkép létrehozása – Az alkalmazás aktuális verziójának mentése, másolat létrehozásával
- Tesztelés – Tesztelje az alkalmazást fejlesztői módban
- Futtatás – Futtassa az alkalmazást a Tulip Playerben
- Közzététel – Az alkalmazás közzététele
- Előre/Vissza – Mozgassa az elemet a munkaterületen előre vagy más elemek mögé
- Oldalsáv – Állítsa be a kiváltókat és a stíluselemeket a Widget, a Step és az App fülön.
A pásztázás és nagyítás eszközzel a következőket teheti:
- Az alkalmazás szerkesztőfelületének mozgatása
- Nagyíthat vagy kicsinyíthet
A bal oldalon található Lépések lista tartalmazza a lépések listáját, beleértve az Alap elrendezést is.
Alapelrendezés
Az alapelrendezésen végzett bármilyen formázási vagy elrendezési módosítás automatikusan alkalmazásra kerül az alkalmazás minden egyes lépésére.
Az alapelrendezést egy-egy lépésen belül úgy módosíthatja, hogy a jobb oldali kontextuspanelen „feloldja” az egyes elemek zárolását.
További információk az alapelrendezésekről itt találhatók.
Lépések
Kattintson egy lépésre, hogy megtekintse az abban található elemeket.
Kattintson a jobb gombbal egy lépésre annak másolásához, lépések csoportosításához vagy törléséhez.
További információk a lépésekről itt találhatók.
Eszköztár
A képernyő tetején található eszköztár olyan vizuális elemeket tartalmaz, amelyek hozzáadhatók az alkalmazáshoz. Ezek olyan elemek, mint alakzatok, fotók, szöveg, videók és gombok. Ha új vizuális elemet szeretne hozzáadni az alkalmazáshoz, egyszerűen kattintson rá, és húzza a kívánt helyre.
Az eszköztár jobb oldalán további eszközök találhatók, amelyek segítségével rétegezheti az objektumokat a Tulip App Editorban.
Kontextuspan
A képernyő jobb oldalán található kontextuspanelen kezelheti az alkalmazás összes formázási és logikai beállítását. A widgetek konfigurálásáról itt olvashat bővebben.
Három fül található:
- Lépés fül
- App fül
- Widget fül
Lépés fül
A „Lépés” fül a következőket mutatja:
- A teljes lépés formázási beállításait
- Lehetővé teszi a lépés célciklusidejének megadását
- Lehetővé teszi az alapelrendezésben megadott elrendezés visszaállítását
- Lehetővé teszi az aktuális lépés törlését
- Lehetőséget ad olyan logika létrehozására, amely a lépés megnyitásakor vagy bezárásakor végrehajtásra kerül – a kiváltókról később még bővebben beszélünk.
Alkalmazás fül
Az „App” fül:
- Lehetővé teszi az alkalmazás lépéseinek kinyomtatását
- Lehetővé teszi az egész alkalmazás ciklusidőzítőjének beállítását
- Megjeleníti az alkalmazáshoz tartozó összes változó listáját
- Lehetővé teszi az alkalmazás felbontásának a kívánt felülethez való igazítását.
- Lehetővé teszi megjegyzések hozzáadását, ha több rendszergazda is ellenőrzi a változtatásokat
- Lehetőséget biztosít olyan logika létrehozására, amely az alkalmazás indításakor, befejezésekor vagy megszakításakor mindig végrehajtásra kerül
Widget fül
Ha rákattint egy elemre az alkalmazásban, megjelenik egy újabb fül az oldalsávon, a Widget fül. Itt állíthatja be az alkalmazás különböző vizuális elemeinek formátumát, valamint azok viselkedését, amikor velük interakcióba lép.
Logika hozzáadása az alkalmazáshoz
A logika határozza meg, hogy mi történik az alkalmazásban, amikor a felhasználó kölcsönhatásba lép vele. Kezdésként használjunk egy egyszerű gombot egy Triggerrel, hogy lépésről lépésre haladhassunk.
- Kattintson az eszköztár „Gombok” elemére, majd válassza ki a „Gomb” lehetőséget.
- Húzza a gombot a kívánt helyre.
- Adjon meg egy címkét a gombhoz, és a jobb oldalon található kontextuspanelen állítsa be a formázási és színezési beállításokat.
- Ha logikát szeretne hozzáadni a gombhoz, kattintson az oldalsávon a „Triggerek” mellett található „+” gombra.
A Triggers segítségével kód írása nélkül is logikát adhat az alkalmazásaihoz. A Triggers a „when, if, then, else” sorrendet használja.
Az itt létrehozandó trigger a következő logikát követi:
When: A gomb megnyomásra kerül
Akkor: Az aktuális időt elmenti egy változóba
Átmenet: Ugrás a → Következő lépésre.
- Kattintson a Mentés gombra.
Ez a gomb a következő lépésre viszi a felhasználót. Általában célszerű egy olyan gombot is hozzáadni, amely lehetővé teszi a felhasználók számára az előző lépésre való visszatérést is.
Miután elkészítette az alkalmazás alapvető logikáját, kattintson a jobb felső sarokban található Teszt gombra. Ezzel az alkalmazás fejlesztői módban indul el, így tesztelheti az alkalmazást.
Az alkalmazás befejezése és az adatok naplózása
Egy „Befejezés” gombot, hogy a Tulip naplózza az egyes operátorokhoz tartozó összes alkalmazásadatot.
Ebben a példában egy újabb gombot adunk hozzá az alkalmazás utolsó lépéséhez.
- Válassza ki az alkalmazás utolsó lépését.
- Kattintson a „Gombok” elemre, majd válassza ki a „Befejezés” gombot.
- Húzza az új gombot a kívánt helyre.
További olvasnivaló
Használja ezeket a lépésről lépésre szóló útmutatókat, hogy ezeket a koncepciókat felhasználva készítsen el egy teljes alkalmazást:
Megtalálta, amit keresett?
Látogasson el a community.tulip.co oldalra, ahol felteheti kérdését, vagy megnézheti, hogy mások is szembesültek-e már hasonló problémával!