Entwicklung von Apps mit dem Builder
Der Builder ist die Arbeitsfläche von PlantPulse Studio. Wenn Sie im Chatfenster auf der linken Seite Anweisungen in unserer Sprache geben, korrigiert der AI-Agent die eigentliche App, die Vorschau in der Mitte ändert sich sofort, und wenn alles fertig ist, exportieren Sie sie mit einem Klick auf [Bereitstellen] ins Feld.
Es gibt zwei Möglichkeiten, 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) die Karte [Öffnen] → App-Katalog und Freigabe
Bildschirmaufbau — Nummern in Lesereihenfolge
| Nummer | Position | Funktion |
|---|---|---|
| ① | Ganz oben links | App-Name und Status — 준비됨 bedeutet, dass der Sitzungscontainer läuft |
| ② | Kopf der Agentenkonsole | Erstellen · Abfragen-Umschalter — ob die App geändert oder nur Daten abgefragt werden sollen |
| ③ | Ganz unten links | Nachrichteneingabefeld — Anweisungen in unserer Sprache (Enter zum Senden · Shift+Enter für Zeilenumbruch) |
| ④ | Direkt über dem Eingabefeld | Plan · Automatisch · Akzeptieren — wie selbstständig der Agent arbeiten soll |
| ⑤ | Kopf der Vorschau | Live-Vorschau-Adresse — zeigt an, dass das Aktuelle der «Entwicklungsserver» ist |
| ⑥ | Rechts von der Vorschau | Viewport-Umschaltung — Desktop · Tablet · Mobil umschalten |
| ⑦ | Daneben | Elementauswahl — Stelle im Bildschirm anklicken, um sie zu markieren |
| ⑧ | Ganz oben rechts | Bereitstellen — erst wenn Sie hier klicken, sehen es Ihre Kollegen |
Die Vorschau zeigt den Entwicklungsserver direkt und ändert sich daher sofort, wenn der Agent etwas korrigiert. Die Bereitstellung, die Ihre Kollegen sehen, ändert sich nur, wenn Sie ⑧ drücken → Glossar
In der Statusleiste ganz unten werden das aktuell verwendete Modell sowie CPU · Speicher des Sitzungscontainers angezeigt.
Bildschirmaufbau
Der Builder ist vertikal in drei Spalten unterteilt.
| Position | Name | Funktion |
|---|---|---|
| Links | Agent Console | Chatfenster für die Kommunikation mit dem Agenten. Anweisungen, was erstellt oder geändert werden soll |
| Mitte | Live Preview | Die gerade entstehende App-Oberfläche. Wird nach Abschluss der Anweisung automatisch aktualisiert |
| Rechts | Context | Eine schmale Leiste, die Daten, Fähigkeiten und den Status dieser App anzeigt. Standardmäßig geschlossen |
Die vertikale Linie zwischen links und Mitte lässt sich mit der Maus ziehen, um die Breite des Chatfensters zu vergrößern oder zu verkleinern.
Obere Werkzeugleiste
Von links: Zurück(fa-arrow-left, 애플리케이션 목록으로), App-Name, Statusanzeige(세션 준비 중… →
준비됨 → während der Verarbeitung 생성 중…). Rechts befinden sich folgende Schaltflächen.
| Schaltfläche | Symbol | Beschreibung |
|---|---|---|
| Bereitstellen | fa-rocket-launch | Exportiert den aktuellen Zustand für den Einsatz vor Ort |
| Fähigkeiten extrahieren | fa-lightbulb | Speichert das aus dieser Konversation gewonnene Know-how als Fähigkeit → Vor-Ort-Fähigkeiten |
| Als Vorlage speichern | fa-bookmark | Speichert diese App-Konfiguration 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 die gesamten App-Dateien als ZIP-Datei herunter |
| Remote-Push | fa-cloud-arrow-up | Sendet an das Git-Repository des Unternehmens (erfordert Admin-Einstellungen) |
| Kontext-Leiste | fa-sidebar-flip | Ganz rechte Schaltfläche. Öffnet und schließt die rechte Leiste |
Wenn Sie mindestens einmal bereitgestellt haben, erscheint neben [Bereitstellen] ein v1 앱 열기 ↗-Chip, und über das Symbol daneben können Sie Link-Freigabe und die Liste der Bereitstellungsversionen direkt öffnen.
Wenn Sie in der Statusleiste ganz unten auf App klicken, können Sie prüfen, ob die App gerade 실행 중 oder 정지됨 ist, wie die Logs aussehen und [Neu starten].
Erste Anweisung senden
Stellen Sie sicher, dass im Umschalter [Erstellen] / [Abfragen] im Kopf des Chatfensters Erstellen ausgewählt ist, und schreiben Sie, was Sie tun möchten. (Abfragen ist ein Modus, der nur Daten abfragt, ohne die App zu ändern → Datenabfrage im Chat)
- Enter zum Senden, Shift+Enter für Zeilenumbruch
- Mit der Büroklammer (fa-paperclip) können Sie Fotos, Skizzen oder CSVs anhängen, um den Bildschirm direkt zu übernehmen
- Während der Verarbeitung ändert sich die Senden-Schaltfläche in eine rote Stopp-Schaltfläche
Wenn die Konversation leer ist, erscheinen Beispiele wie 사이트 목록을 카드로 보여줘, die Sie anklicken können, um zu starten.
Eines nach dem anderen, konkret. Formulieren Sie mit Ziel · Darstellungsweise · Bedingung, z.B. Zeige Temperatur und Druck der Linie 3 als große Zahlenkarte und markiere sie rot, wenn sie über 90 Grad liegt — das Ergebnis ist viel genauer.
Während der Agent arbeitet, erscheinen im Chat Arbeitsprotokolle wie 도구 호출: …, 파일 변경: …, 커밋 ….
Wenn Sie auf die 파일 변경:-Zeile klicken, öffnet die Code-Ansicht diese Datei.
3 Modi
Direkt über dem Chat-Eingabefeld befindet sich das Segment Plan · Automatisch · Akzeptieren. Der gewählte Modus bleibt beim nächsten Öffnen erhalten.
| Modus | Symbol | Verhalten | Wann verwenden |
|---|---|---|---|
| Plan | fa-list-check | Erstellt nicht sofort, sondern zeigt zuerst den Bildschirmaufbau-Entwurf. Erst wenn Sie im 빌드 플랜-Karte die Ansicht, Widgets und benötigten Daten prüfen und [Genehmigen und erstellen] drücken, beginnt die eigentliche Arbeit | Neue Bildschirme, umfangreiche Anforderungen. Verhindert, dass in die falsche Richtung gearbeitet wird |
| Automatisch | fa-bolt | Korrigiert und speichert sofort nach der Anweisung automatisch (Standardwert) | Kleine Korrekturen, schnelle Iterationen |
| Akzeptieren | fa-check-double | Korrigiert, hält das Speichern aber zurück. Sie müssen die Vorschau prüfen und dann manuell akzeptieren | Bei Änderungen an laufenden Apps, wenn Sie das Ergebnis unbedingt visuell prüfen möchten |
Im Akzeptieren-Modus erscheint über dem Eingabefeld eine gelbe Review-Leiste, wenn Änderungen anstehen.
Änderung zur Überprüfung ausstehend — Prüfen Sie in der Vorschau und akzeptieren oder verwerfen Sie [Verwerfen] [Akzeptieren (Committen)]
- [Akzeptieren (Committen)] — Bestätigt die Änderung und speichert sie im Änderungsverlauf
- [Verwerfen] — Verwirft diese Änderung vollständig und kehrt zum vorherigen Zustand zurück
Wenn Sie in der 빌드 플랜-Karte auf [Schließen] klicken, kehrt der ursprüngliche Anforderungstext in das Eingabefeld zurück. Ändern Sie den Text und senden Sie ihn erneut, um einen neuen Entwurf zu erhalten. Bei langer Dauer können Sie mit [Abbrechen] stoppen.
Schrägstrich-Befehle
Wenn Sie / in das Eingabefeld eingeben, erscheint eine Befehlsliste. Funktioniert nur im Erstellen-Modus.
| Befehl | Argument | Funktion |
|---|---|---|
/plan | erforderlich | Zuerst Bildschirmaufbau-Entwurf erhalten, genehmigen und dann erstellen |
/build | erforderlich | Direkt mit diesem Inhalt erstellen |
/review | — | Überprüfung der letzten Änderungen (keine Dateiänderung) — nur Probleme und Verbesserungsvorschläge melden |
/fix | — | Fehler suchen und Korrekturanweisungen geben |
/test | — | Typprüfung (tsc) ausführen — prüft, ob die App Syntax- oder Typfehler enthält |
/loop | optional | Korrekturen wiederholen, bis die Prüfung bestanden ist (max. 3 Mal) |
/deploy | — | Bereitstellungsdialog öffnen |
Bei /plan und /build müssen Sie den Inhalt anhängen (z.B. /plan 보일러 압력 대시보드). Wenn Sie es vergessen, erscheint ein Hinweis 이 명령에는 내용이 필요합니다 und die Eingabe bleibt erhalten.
Prüfen Sie mit /test zuerst, ob Fehler vorhanden sind, und führen Sie bei Bedarf /loop aus. Auch während des Vorgangs können Sie mit der Stopp-Schaltfläche anhalten. Am Ende informiert ✅ /loop 완료 oder ⚠️ /loop 3회 반복 후에도 오류가 남았습니다 über das Ergebnis.
Vorschau nutzen
In der Kopfzeile der Vorschau können Sie die Bildschirmgröße ändern — Desktop(fa-display) Tablet(fa-tablet-screen-button) · Mobil(fa-mobile-screen-button). Wenn die App vor Ort auf dem Handy genutzt wird, erstellen Sie sie im Mobilmodus. Die daneben liegenden Aktualisieren(fa-rotate-right)·Neuer Tab(fa-arrow-up-right-from-square) werden ebenfalls häufig verwendet.
Fehlerhafte Stelle direkt anklicken und anweisen
Verwenden Sie dies, wenn Sie die Position schwer in Worte fassen können.
- Klicken Sie in der Kopfzeile der Vorschau auf [Elementauswahl](fa-arrow-pointer) → es wechselt zu
요소를 클릭하세요… - Klicken Sie in der Vorschau auf die Stelle, die Sie ändern möchten
- Über dem Chat-Eingabefeld erscheinen Schnellbefehl-Schaltflächen mit dem Namen des ausgewählten Elements — Text ändern · Farbe ändern Größer · Löschen, sowie Direkteingabe
Wenn Sie eine Schaltfläche drücken, wird ein Satz wie 선택한 요소 [○○] — 색 변경 sofort gesendet. Wählen Sie Direkteingabe, wird der Satz in das Eingabefeld gefüllt, sodass Sie den gewünschten Inhalt dahinter schreiben können.
4 Schubladen
Wenn Sie auf ein Symbol in der Werkzeugleiste klicken, öffnet sich auf der rechten Seite eine Schublade. Schließen mit Esc.
| Schublade | Öffnen über | Inhalt |
|---|---|---|
| Änderungsverlauf | fa-clock-rotate-left | Liste der bisherigen Änderungen. Klicken auf eine Zeile zeigt, was geändert wurde |
| Code | fa-code | Liste und Inhalt der Dateien, aus denen die App besteht (nur lesend) |
| Bereitstellungsversionen | fa-chevron-down des v1-Chips | Liste der bereitgestellten Versionen · Rollback · Sichtbarkeit umschalten |
| Daten-Explorer | fa-database | Über Site → Anlage → Tag navigieren und prüfen; mit [Einfügen] das Ziel in das Chat-Eingabefeld einfügen |
Das [Einfügen] des Daten-Explorers ist besonders nützlich. Da Anlagenname und ID korrekt eingegeben werden, reduziert sich die Wahrscheinlichkeit, dass der Agent eine falsche Anlage auswählt.
Änderungsverlauf und Zurücksetzen
Nach jeder abgeschlossenen Anweisung wird der App-Zustand automatisch gespeichert. Sie müssen keine separate Speichern-Schaltfläche drücken und können jederzeit zu einem früheren Punkt zurückkehren.
- Öffnen Sie den Verlauf(fa-clock-rotate-left) in der Werkzeugleiste
- Am obersten Eintrag befindet sich ein
현재-Badge. Klicken Sie auf eine Zeile, um die Änderung aufzuklappen - Wählen Sie den gewünschten Zeitpunkt aus und klicken Sie [Zu diesem Zeitpunkt] → im Bestätigungsdialog bestätigen
이후 변경은 사라집니다. Arbeiten, die nach dem zurückgesetzten Zeitpunkt durchgeführt wurden, gehen verloren. Prüfen Sie vor dem Zurücksetzen die Vorschau und die Änderungen.
Der Änderungsverlauf ist eine pro App automatisch gespeicherte Aufzeichnung, und die von Ihnen im Chat eingegebenen Sätze können darin enthalten bleiben. Geben Sie API-Schlüssel, Passwörter oder Tokens nicht ins Chatfenster ein, sondern fordern Sie den Administrator auf, sie in den Umgebungseinstellungen zu registrieren.
Obwohl Studio allgemein bekannte Schlüsselformen wie sk-…, glpat-…, Bearer … automatisch als *** ausblendet, kann es nicht alle Schlüsselformen weltweit erkennen.
Rechte Kontext-Leiste
Öffnen Sie sie über das Symbol fa-sidebar-flip ganz rechts in der Werkzeugleiste. Sie zeigt auf einen Blick, welche Materialien diese App verwendet.
- Datenverbindung — definiert vorab die Sites, Anlagen und Tags, die diese App verarbeitet. Wenn Sie [Datenverbindung] drücken und auswählen, erstellt der Agent sie mit korrekten IDs, ohne zu raten. Wenn Sie dies vor dem Erstellen der App einmal festlegen, verbessert sich die Qualität des Ergebnisses erheblich
- Datenbindung — die tatsächlich von der aktuellen Ansicht verwendeten Anlagen-IDs und Abfragepfade
- Angewendete Fähigkeiten — die bei dieser Aufgabe berücksichtigten Vor-Ort-Fähigkeiten
- Status — letzter Speicherpunkt und Bereitstellungsversion
Bereitstellen
Wenn Sie in der Werkzeugleiste auf [Bereitstellen] klicken, erscheint ein Fortschrittsfenster, das die 3 Schritte Build vorbereiten → Produktions-Build → Servierende Version umschalten durchläuft. Dies dauert normalerweise 20–60 Sekunden; das Fenster kann während des Vorgangs nicht geschlossen werden.
Am Ende erscheint ein QR-Code zusammen mit v1 배포됨. Mit einem Mobiltelefon vor Ort können Sie ihn scannen und sofort öffnen.
- Bei jeder Bereitstellung wird eine Version hinzugefügt (v1, v2, v3 …)
- Bei Problemen können Sie in der Schublade Bereitstellungsversionen auf [Zu dieser Version] einer früheren Version klicken, um zurückzukehren. Die aktuell laufende Version trägt ein
서빙 중-Badge - Oben in derselben Schublade können Sie Öffentlich / Nicht öffentlich umschalten. Wer sie sehen kann und wie sie per Link oder QR-Code geteilt wird, wird unter App-Katalog und Freigabe erklärt
Die Bereitstellung exportiert eine Kopie des aktuellen Zustands. Sie können auch nach der Bereitstellung im Builder weiterarbeiten; die vor Ort verwendete App ändert sich erst nach einer erneuten Bereitstellung.
Bei Problemen
| Symptom | Probieren Sie Folgendes |
|---|---|
| Vorschau bleibt „Vorbereitung“ | Warten Sie kurz und klicken Sie dann auf [Erneut versuchen]. Wenn das nicht hilft: App in der Statusleiste → [Neu starten] |
| Bildschirm erscheint weiß | Fehler mit /test prüfen → automatische Korrektur mit /loop |
| Anweisung wird falsch umgesetzt | Im Änderungsverlauf zum vorherigen Zeitpunkt zurückkehren und dann spezifischer anweisen |
| Antwort dauert zu lange | Mit der Stopp-Schaltfläche anhalten und die Anfrage in kleinere Teile aufteilen |
| Hinweis, dass die Verbindung unterbrochen wurde | Das Ergebnis könnte trotzdem übernommen worden sein. Prüfen Sie zuerst die Vorschau und den Änderungsverlauf |
Weitere Details finden Sie unter Fehlerbehebung.