Apps mit dem Builder entwickeln
Der Builder ist die Werkbank von PlantPulse Studio. Sie geben im Chatfenster links Anweisungen in natürlicher Sprache, der KI-Agent ändert daraufhin die App, die Vorschau in der Mitte aktualisiert sich sofort, und wenn alles passt, geht es mit einem Klick auf [Deployen] Vor-Ort.
Es gibt zwei Wege, den Builder zu öffnen.
- Wenn Sie auf der Startseite eine App mit einem Satz erstellen, öffnet sich der Builder direkt → App auf der Startseite erstellen
- Bei bereits erstellten Apps: in der Seitenleiste unter Anwendungen (fa-grid-2) auf der Karte [Öffnen] → App-Katalog und Freigabe
Aufbau der Oberfläche
Der Builder besteht aus drei senkrechten Spalten.
| Position | Name | Funktion |
|---|---|---|
| Links | Agent Console | Chatfenster für den Dialog mit dem Agenten. Hier geben Sie an, was erstellt oder geändert werden soll |
| Mitte | Live Preview | Die App-Oberfläche im aktuellen Zustand. Nach Abschluss einer Anweisung wird automatisch neu geladen |
| Rechts | Context | Schmale Leiste mit den Daten, Skills und dem Status dieser App. Standardmäßig geschlossen |
Die senkrechte Trennlinie zwischen links und Mitte lässt sich mit der Maus ziehen, um das Chatfenster zu verbreitern oder zu verschmälern.
Obere Werkzeugleiste
Von links: Zurück (fa-arrow-left, 애플리케이션 목록으로), App-Name, Statusanzeige (세션 준비 중… →
준비됨 → während der Verarbeitung einer Anweisung 생성 중…); rechts befinden sich folgende Schaltflächen.
| Schaltfläche | Symbol | Beschreibung |
|---|---|---|
| Deployen | fa-rocket-launch | Gibt den aktuellen Stand für den Einsatz Vor-Ort frei |
| Skill extrahieren | fa-lightbulb | Speichert das in diesem Dialog gewonnene Know-how als Skill → Vor-Ort-Skills |
| Als Vorlage speichern | fa-bookmark | Speichert diesen App-Aufbau als Ausgangspunkt für die nächste App |
| Daten | fa-database | Öffnet den Daten-Explorer |
| Code | fa-code | Öffnet die Code-Ansicht |
| Verlauf | fa-clock-rotate-left | Öffnet den Änderungsverlauf |
| Exportieren | fa-download | Lädt alle App-Dateien als Archiv herunter |
| Remote Push | fa-cloud-arrow-up | Übertragung in das Git-Repository des Unternehmens (Administratorkonfiguration erforderlich) |
| Kontextleiste | fa-sidebar-flip | Schaltfläche ganz rechts. Öffnet und schließt die rechte Leiste |
Nach dem ersten Deployment erscheint neben [Deployen] ein v1 앱 열기 ↗-Chip; über das Symbol daneben lassen sich die Linkfreigabe und die Liste der Deployment-Versionen direkt öffnen.
Über den Eintrag App in der Statusleiste ganz unten prüfen Sie, ob die App gerade 실행 중 oder 정지됨 ist, sehen die Logs ein und können sie [Neu starten].
Die erste Anweisung senden
Prüfen Sie im Umschalter [Build] / [Abfrage] oben im Chatfenster, ob Build ausgewählt ist, und beschreiben Sie dann Ihr Vorhaben. (Abfrage ist ein Modus, der die App nicht ändert, sondern nur Daten abfragt → Datenabfrage per Chat)
- Senden mit Enter, Zeilenumbruch mit Shift+Enter
- Über die Büroklammer (fa-paperclip) angehängte Fotos, Skizzen oder CSV-Dateien werden als Vorlage 1:1 umgesetzt
- Während der Verarbeitung wird die Senden-Schaltfläche zur roten Schaltfläche Abbrechen
Ist der Dialog leer, werden Beispielformulierungen wie 사이트 목록을 카드로 보여줘 angezeigt, die Sie zum Starten anklicken können.
Immer eine Sache auf einmal, und konkret. Wenn Sie wie in Zeig Temperatur und Druck von Linie 3 als große Zahlenkarten und markiere Werte über 90 Grad rot Objekt · Darstellung · Bedingung angeben, wird das Ergebnis deutlich genauer.
Während der Agent arbeitet, sammeln sich im Chat Arbeitseinträge wie 도구 호출: …, 파일 변경: … oder 커밋 … an.
Ein Klick auf die Zeile 파일 변경: öffnet die betreffende Datei in der Code-Ansicht.
Die drei Modi
Direkt über dem Chat-Eingabefeld befindet sich das Segment Plan · Auto · Bestätigen. Der gewählte Modus bleibt auch beim nächsten Öffnen erhalten.
| Modus | Symbol | Verhalten | Einsatzfall |
|---|---|---|---|
| Plan | fa-list-check | Erstellt nicht sofort, sondern zeigt zunächst einen Entwurf des Bildschirmaufbaus. Prüfen Sie in der Karte 빌드 플랜 die Ansichten, Widgets und benötigten Daten; die eigentliche Arbeit beginnt erst nach Klick auf [Genehmigen und bauen] | Neu angelegte Ansichten, umfangreiche Anforderungen. Verhindert von vornherein, dass die Umsetzung in die falsche Richtung läuft |
| Auto | fa-bolt | Änderungen werden direkt umgesetzt und automatisch gespeichert (Standard) | Kleine Korrekturen, schnelle Iteration |
| Bestätigen | fa-check-double | Ändert, hält das Speichern aber zurück. Erst nach Prüfung in der Vorschau und manueller Bestätigung wird die Änderung übernommen | Änderungen an produktiv genutzten Apps, wenn Sie das Ergebnis unbedingt visuell prüfen wollen |
Im Bestätigen-Modus erscheint bei Änderungen eine gelbe Review-Leiste über dem Eingabefeld.
Änderung wartet auf Prüfung — in der Vorschau kontrollieren und dann bestätigen oder verwerfen [Verwerfen] [Bestätigen (Commit)]
- [Bestätigen (Commit)] — Übernimmt die Änderung und trägt sie in den Änderungsverlauf ein
- [Verwerfen] — Verwirft die gesamte Änderung und stellt den vorherigen Stand wieder her
Ein Klick auf [Schließen] in der Karte 빌드 플랜 setzt den ursprünglichen Anfragetext zurück ins Eingabefeld. Formulieren Sie den Satz um und senden Sie erneut, um einen neuen Entwurf zu erhalten. Dauert die Erstellung zu lange, können Sie mit [Abbrechen] stoppen.
Slash-Befehle
Mit / im Eingabefeld erscheint die Befehlsliste. Funktioniert nur im Build-Modus.
| Befehl | Argument | Funktion |
|---|---|---|
/plan | erforderlich | Erst Entwurf des Bildschirmaufbaus, Build nach Genehmigung |
/build | erforderlich | Direkt mit diesem Inhalt bauen |
/review | — | Review der letzten Änderungen (ohne Dateiänderung) — nennt nur Probleme und Verbesserungsvorschläge |
/fix | — | Fehler suchen und Korrektur anweisen |
/test | — | Typprüfung (tsc) ausführen — prüft die App auf Syntax- und Typfehler |
/loop | optional | Korrekturen wiederholen, bis die Prüfung bestanden ist (max. 3 Durchläufe) |
/deploy | — | Deployment-Dialog öffnen |
Bei /plan und /build muss Inhalt angehängt werden (Beispiel: /plan 보일러 압력 대시보드). Fehlt er, erscheint der Hinweis 이 명령에는 내용이 필요합니다 und die Eingabe bleibt erhalten.
Prüfen Sie zuerst mit /test auf Fehler und starten Sie bei Bedarf /loop. Der Vorgang lässt sich jederzeit über die Abbrechen-Schaltfläche stoppen; am Ende wird das Ergebnis mit ✅ /loop 완료 oder ⚠️ /loop 3회 반복 후에도 오류가 남았습니다 gemeldet.
Mit der Vorschau arbeiten
In der Kopfzeile der Vorschau können Sie die Bildschirmgröße umschalten — Desktop (fa-display) · Tablet (fa-tablet-screen-button) · Mobil (fa-mobile-screen-button). Für Apps, die Vor-Ort auf dem Smartphone genutzt werden, entwickeln Sie am besten in der Mobil-Ansicht. Auch Neu laden (fa-rotate-right) und Neuer Tab (fa-arrow-up-right-from-square) daneben werden häufig gebraucht.
Änderungen direkt am Element anweisen
Nützlich, wenn sich die Position schwer in Worten beschreiben lässt.
- Klicken Sie in der Kopfzeile der Vorschau auf [Element auswählen] (fa-arrow-pointer) → wechselt zu
요소를 클릭하세요… - Klicken Sie in der Vorschau auf den Bereich, den Sie ändern möchten
- Über dem Chat-Eingabefeld erscheinen zusammen mit dem Namen des gewählten Elements Schaltflächen für Schnellanweisungen — Text ändern · Farbe ändern · Größer · Löschen sowie Freie Eingabe
Ein Klick auf eine Schaltfläche sendet sofort einen Satz wie 선택한 요소 [○○] — 색 변경; bei Freie Eingabe wird dieser Satz ins Eingabefeld übernommen, sodass Sie ihn nach Belieben ergänzen können.
Die vier Schubladen
Ein Klick auf ein Symbol der Werkzeugleiste öffnet rechts eine Schublade. Schließen mit Esc.
| Schublade | Öffnen über | Inhalt |
|---|---|---|
| Änderungsverlauf | fa-clock-rotate-left | Liste aller bisherigen Änderungen. Ein Klick auf eine Zeile zeigt aufgeklappt, was geändert wurde |
| Code | fa-code | Liste und Inhalt der Dateien, aus denen die App besteht (schreibgeschützt) |
| Deployment-Versionen | fa-chevron-down am v1-Chip | Liste der deployten Versionen, Rollback, Umschalten der Sichtbarkeit |
| Daten-Explorer | fa-database | Über Standort → Asset → Tag navigieren und prüfen; mit [Einfügen] wird das Objekt in die Chat-Eingabe übernommen |
[Einfügen] im Daten-Explorer ist besonders hilfreich: Da Anlagenname und ID exakt eingetragen werden, greift der Agent seltener auf die falsche Anlage zu.
Änderungsverlauf und Zurücksetzen
Nach jeder abgeschlossenen Anweisung wird der Zustand der App zu diesem Zeitpunkt automatisch gespeichert. Sie müssen keine Speichern-Schaltfläche drücken und können jederzeit zu einem früheren Stand zurückkehren.
- Öffnen Sie in der Werkzeugleiste den Verlauf (fa-clock-rotate-left)
- Der oberste Eintrag trägt das Abzeichen
현재. Ein Klick auf eine Zeile klappt die Änderungen auf - Beim gewünschten Zeitpunkt [Auf diesen Stand] → im Bestätigungsdialog genehmigen
이후 변경은 사라집니다. Alle Arbeiten nach dem wiederhergestellten Zeitpunkt gehen verloren. Prüfen Sie vor dem Zurücksetzen Vorschau und Änderungsinhalte.
Der Änderungsverlauf wird für jede App automatisch aufgezeichnet, und die von Ihnen im Chat eingegebenen Sätze können unverändert in diesem Protokoll landen. Fügen Sie API-Schlüssel, Passwörter und Tokens nicht in den Chat ein, sondern lassen Sie sie vom Administrator in der Konfiguration hinterlegen.
Studio maskiert weithin bekannte Schlüsselformate wie sk-…, glpat-… oder Bearer … automatisch mit ***, kann aber nicht jedes existierende Schlüsselformat erkennen.
Die rechte Kontextleiste
Öffnen über fa-sidebar-flip ganz rechts in der Werkzeugleiste. Zeigt auf einen Blick, welche Bausteine diese App verwendet.
- Datenverbindung — Legt Standorte, Anlagen und Tags fest, mit denen diese App arbeitet. Wenn Sie über [Datenverbindung] eine Auswahl treffen, rät der Agent keine IDs, sondern arbeitet mit den exakten Objekten. Eine Festlegung vor dem App-Bau verbessert die Ergebnisqualität erheblich
- Datenbindung — Anlagen-IDs und Abfragepfade, die die aktuelle Ansicht tatsächlich nutzt
- Angewandte Skills — Die für diese Arbeit herangezogenen Vor-Ort-Skills
- Status — Letzter Speicherpunkt und Deployment-Version
Deployen
Ein Klick auf [Deployen] in der Werkzeugleiste öffnet ein Fortschrittsfenster und durchläuft die drei Schritte Build vorbereiten → Production-Build → Umschalten der ausgelieferten Version. Das dauert in der Regel 20–60 Sekunden; während des Vorgangs lässt sich das Fenster nicht schließen.
Am Ende erscheint zusammen mit v1 배포됨 ein QR-Code. Mit dem Smartphone Vor-Ort gescannt, öffnet sich die App sofort.
- Bei jedem Deployment entsteht eine neue Version (v1, v2, v3 …)
- Bei Problemen setzen Sie in der Schublade Deployment-Versionen über [Auf diese Version] auf einen früheren Stand zurück. Die aktuell ausgelieferte Version trägt das Abzeichen
서빙 중 - Oben in derselben Schublade schalten Sie zwischen Öffentlich / Nicht öffentlich um. Wer die App sehen darf und wie sie per Link oder QR verteilt wird, ist unter App-Katalog und Freigabe beschrieben
Ein Deployment veröffentlicht eine Kopie des jeweiligen Stands. Sie können auch danach im Builder weiterarbeiten; die Vor-Ort genutzte App ändert sich erst mit dem nächsten Deployment.
Wenn es hakt
| Symptom | Vorgehen |
|---|---|
| Vorschau bleibt dauerhaft im Zustand „wird vorbereitet" | Kurz warten, dann [Erneut versuchen]. Hilft das nicht: in der Statusleiste App → [Neu starten] |
| Ansicht bleibt weiß | Fehler mit /test prüfen → automatische Korrektur mit /loop |
| Anweisung wird falsch umgesetzt | Im Änderungsverlauf auf den vorherigen Stand zurücksetzen und die Anweisung konkreter formulieren |
| Antwort dauert zu lange | Mit der Abbrechen-Schaltfläche stoppen und die Anfrage in kleinere Schritte zerlegen |
| Meldung über unterbrochene Verbindung | Das Ergebnis kann trotzdem übernommen worden sein. Prüfen Sie zuerst Vorschau und Änderungsverlauf |
Ausführlichere Hinweise finden Sie unter Troubleshooting.