Überblick
Der App-Builder folgt einem „Prompt-zu-App“-Workflow. Sie beschreiben, was Sie möchten, und die KI erstellt die Anwendungsstruktur, Seiten und Logik für Sie. Anschließend können Sie jedes Detail mit dem visuellen Editor oder Code optimieren.Eine App erstellen
Es gibt zwei Hauptwege, eine App zu erstellen:- Aus einer Base: Klicken Sie in einer beliebigen Base auf „App erstellen“, um eine mit Ihren aktuellen Daten verknüpfte Anwendung zu generieren.
- Aus dem Chat: Öffnen Sie KI-Chat und sagen Sie „Erstelle eine CRM-App für diese Kundentabelle“.
Die Oberfläche des App-Editors
Der App-Builder bietet eine duale Oberfläche für nicht technische Nutzer und Entwickler.1. Chat-Oberfläche (KI-gesteuert)
Die Kommandozentrale für Ihre App.- Bearbeitung in natürlicher Sprache: Beschreiben Sie Änderungen wie „Mache die Kopfzeile blau“ oder „Füge ein Übermittlungsformular für neue Datensätze hinzu“.
- Automatisches Routing: Die KI versteht, auf welche Komponente oder Seite Sie sich beziehen, und ändert sie direkt.
- Integrationen: Wenn die App-Aufgabe Zugriff auf ein Drittanbieter-Konto benötigt, kann der App-Builder im Chat-Bereich eine Karte wie Slack verbinden anzeigen. Klicken Sie auf Verbinden, um sich per OAuth zu autorisieren. Klicken Sie auf Überspringen, um diese Autorisierung abzubrechen; die KI fährt mit den Teilen fort, die sie ohne diese Verbindung abschließen kann.
- Skills: Öffnen Sie das Menü + und wählen Sie Skills, um Skills für diese App-Unterhaltung zu verwalten. Ein hier hinzugefügter Skill ist nur für die aktuelle App verfügbar; die mit der Base und dem Space der App geteilten Skills können hier ebenfalls verwendet werden. Geben Sie
/in das Eingabefeld ein, um einen aktivierten Skill auszuwählen. - Dateien verwalten: Öffnen Sie + → Mehr → Dateien verwalten, um Dateien in der App-Sandbox anzuzeigen. Verwenden Sie dies, um unterstützte Dateien in der Vorschau anzuzeigen, generierte Dateien herunterzuladen oder nicht mehr benötigte Dateien und Ordner zu löschen.
- Unterhaltung löschen: Wenn die aktuelle Unterhaltung vom Thema abgekommen ist, klicken Sie unten rechts im Bereich auf Chat löschen, um eine neue Sitzung zu beginnen. Dadurch wird der Chatverlauf der aktuellen Unterhaltung gelöscht, nicht jedoch die App selbst. Bei der ersten Verwendung wird eine Bestätigung angezeigt, und Sie können festlegen, dass sie beim nächsten Mal nicht wieder angezeigt wird.
2. Vorschau-Bereich
- Vorschau und Live: Der Bereich hat zwei Tabs. Vorschau führt die Version aus, die Sie gerade erstellen, einschließlich noch nicht veröffentlichter Änderungen. Live lädt die veröffentlichte App über ihre öffentliche Adresse, sodass Sie vergleichen können, was Ihre Nutzer sehen und woran Sie arbeiten. Bis die App veröffentlicht ist, zeigt Live stattdessen eine Veröffentlichungsaufforderung an. Der App-Builder öffnet eine veröffentlichte App unter Live und eine unveröffentlichte unter Vorschau und merkt sich anschließend den Tab, den Sie zuletzt für diese App verwendet haben.
- Simulation mehrerer Geräte: Verwenden Sie den Umschalter oben, um zwischen den Ansichten Desktop, Tablet und Mobil zu wechseln.
- Live-Generierung: Der Vorschau-Bereich kann anzeigen, wie die App Gestalt annimmt, während der App-Builder sie generiert.
- Sofortiges Feedback: Nachdem der App-Builder eine Änderung abgeschlossen hat, wird die Vorschau mit der neuesten gespeicherten Version aktualisiert.
- Wählen Sie Element zum Bearbeiten auswählen und klicken Sie dann auf ein Element in der Vorschau. Der App-Builder fügt das Element zur Chat-Eingabe hinzu. Fügen Sie Ihre Anweisung hinzu und senden Sie die Nachricht, damit die KI diesen bestimmten Teil der App aktualisieren kann.
- Wählen Sie Text direkt bearbeiten, klicken Sie dann auf statischen Text in der Vorschau und geben Sie den Ersatztext ein. Sie können mehr als ein Textelement bearbeiten, bevor Sie auf Speichern klicken. Klicken Sie auf Änderungen verwerfen, um die ausstehenden Textänderungen rückgängig zu machen.
Esc, um einen der beiden Modi zu verlassen.
3. Entwicklermodus (Code-Editor)
Für unbegrenzte Anpassungsmöglichkeiten haben Sie direkten Zugriff auf den Code.- Monaco Editor: Eine VS-Code-ähnliche Umgebung direkt im Browser.
- React-Komponenten: Bearbeiten Sie den zugrunde liegenden React-Code, Tailwind-CSS-Klassen und die Logik.
- Dateibaum: Navigieren Sie durch die Projektstruktur.
Code herunterladen
Sie können die gesamte App jederzeit als ZIP-Archiv herunterladen:- Wechseln Sie im Editor zum Tab Code.
- Klicken Sie in der Tab-Leiste auf das Menü
.... - Wählen Sie Code herunterladen, um ein ZIP-Archiv zu speichern, das alle Quelldateien enthält.
.env-Datei im Stammverzeichnis enthalten. Prüfen Sie sie, bevor Sie die ZIP-Datei weitergeben.
Code importieren
Sie können den Code der App durch Importieren einer ZIP-Datei aktualisieren:- Wechseln Sie im Editor zum Tab Code.
- Klicken Sie in der Tab-Leiste auf das Menü
.... - Wählen Sie Code importieren und wählen Sie eine ZIP-Datei mit bis zu 20 MB aus.
- Schließen Sie nur Quelldateien ein.
node_modules,.nextund andere Build-Artefakte werden automatisch ignoriert. - Die ZIP-Datei ersetzt das vorhandene Projekt. Nicht enthaltene Dateien werden aus der neuen Version entfernt.
- Wenn die ZIP-Datei einen einzelnen umschließenden Ordner enthält, entfernt Teable diesen Ordner. Sie können den äußersten Projektordner direkt komprimieren.
- Das importierte Projekt muss
package.jsonim Stammverzeichnis des Projekts enthalten. - Eine
.env-Datei im Stammverzeichnis der ZIP-Datei wird in die Secrets der App eingelesen. Andere.env*-Varianten wie.env.localwerden ignoriert.
Secrets
Verwenden Sie Secrets für API-Schlüssel, Anmeldedaten und Konfigurationswerte, die Ihre App während der Ausführung benötigt. Öffnen Sie im Chat-Bereich des App-Builders das Menü + und wählen Sie Secrets.App-Dateien verwalten
Der App-Builder speichert hochgeladene Dateien, generierte Ausgaben und Laufzeitdateien in der App-Sandbox. Öffnen Sie im Chat-Bereich + → Mehr → Dateien verwalten, um sie zu prüfen. Unterstützte Dateitypen werden in der Vorschau geöffnet. Sie können außerdem Dateien herunterladen oder nicht mehr benötigte Dateien und Ordner löschen.KI-Funktionen zu einer App hinzufügen
Fügen Sie KI hinzu, wenn Ihre App Datensätze zusammenfassen, Anfragen klassifizieren, Antworten entwerfen oder Fragen von App-Nutzern beantworten soll. Sie können dem App-Builder sagen, was Sie möchten, beispielsweise: „Füge einen KI-Antwortassistenten für Support-Tickets hinzu“ oder „Fasse jede Formularübermittlung zusammen.“ Der App-Builder kann den KI-Zugriff aktivieren und den Code für die Funktion hinzufügen.Code mit GitHub synchronisieren
Ein Konto verbinden und das Repository erstellen
Generieren Sie die App zunächst mindestens einmal. Solange die App keinen Code enthält, zeigt die GitHub-Schaltfläche Generieren Sie zuerst die App, um GitHub zu verbinden an und führt keine Aktion aus.GitHub-Bereich öffnen
Ein Konto verbinden
Konto auswählen
Repository benennen
., - und _ enthalten und bis zu 100 Zeichen lang sein.Erstellen und verknüpfen
main, zusammen mit einer README, die auf die App zurückverweist und erklärt, wie beide synchron bleiben. Sie können eine App nicht mit einem bereits vorhandenen Repository verknüpfen.
Standardmäßig gehört eine Verbindung der Person, die sie erstellt hat. Damit Mitarbeitende auf demselben Organisationskonto aufbauen können, wählen Sie die Verbindung aus und aktivieren Sie Anderen Mitgliedern die Nutzung dieser Verbindung erlauben. Andere Mitglieder mit Bearbeitungszugriff auf Apps können dann für ihre eigenen Apps unter dieser Organisation Repositories erstellen. Persönliche Verbindungen können nicht geteilt werden, da GitHub die Autorisierung des Kontoinhabers selbst erfordert, um ein Repository zu erstellen.
So funktioniert die Synchronisierung
Einen Konflikt auflösen
Teable führt niemals einen Force-Push für Ihren Branch aus. Wenn die Verläufe auseinanderlaufen, legt Teable die neueste App-Version in einem Branch namensteable-sync ab und markiert die Verknüpfung als Konflikt. Führen Sie teable-sync auf GitHub mit main zusammen; der Merge wird als neue App-Version zurückgeführt und die Verknüpfung kehrt zu Synchronisiert zurück. Solange der Konflikt besteht, verschieben spätere App-Versionen den Branch teable-sync weiter, sodass ein Merge immer die neueste Arbeit übernimmt.
Umgebungsvariablen und lokale Entwicklung
Das Repository enthält nur Quellcode. Teable pusht niemals eine Datei, deren Name mit.env beginnt: weder im Stammverzeichnis des Projekts noch in einem Unterordner oder im Commit-Verlauf. Umgebungswerte befinden sich in den Secrets der App und gelangen nie in Git. Die .gitignore des Repositorys enthält bereits .env*, sodass ein lokaler Klon nicht versehentlich eine solche Datei committet.
So führen Sie die App auf Ihrem eigenen Rechner aus:
Klonen und installieren
pnpm install aus.Variablen kopieren
.env-Datei im Stammverzeichnis des Projekts ein.App starten
pnpm dev aus..env erstellt oder aktualisiert kein Secret. Kopieren Sie die Variablen nach einer Secret-Änderung erneut, um Ihre lokale .env zu aktualisieren.
Verknüpfung mit dem Repository aufheben
Klicken Sie auf das Löschsymbol neben dem Repository-Namen und bestätigen Sie. Die Synchronisierung wird beendet; das Repository und sein Code bleiben auf GitHub. Wenn Sie dieselbe App später erneut verknüpfen, wird ein neues Repository erstellt, anstatt die Verbindung zum alten wiederherzustellen.Veröffentlichung und Verwaltung
Ihre App veröffentlichen
Wenn Ihre App bereit ist, klicken Sie oben rechts auf die Schaltfläche Veröffentlichen (Pfeilsymbol).- Öffentliche URL: Teable generiert eine sichere, öffentlich zugängliche URL für Ihre App.
- Eigene Domain: Ordnen Sie der App Ihre eigene Domain zu.
- Branding anzeigen: Verwenden Sie Branding anzeigen im Menü Veröffentlichen, um zu steuern, ob die veröffentlichte App das Abzeichen Mit Teable erstellt anzeigt. Wenn Sie diese Einstellung nach der Veröffentlichung ändern, klicken Sie auf Neu bereitstellen, um sie anzuwenden.
- Veröffentlichung aufheben: Verwenden Sie für eine veröffentlichte App Veröffentlichung aufheben im Veröffentlichungsmenü, um den öffentlichen Link offline zu nehmen.
- Änderungen der App-Konfiguration: Wenn im Veröffentlichungsmenü Laufzeitkonfiguration geändert. Neu bereitstellen, um sie auf die Live-App anzuwenden oder Branding-Einstellung geändert. Neu bereitstellen, um sie auf die Live-App anzuwenden angezeigt wird, klicken Sie auf Neu bereitstellen.
- Veröffentlichte App öffnen: Sobald eine App veröffentlicht ist, öffnet das Symbol neben Veröffentlichen die Live-App in einem neuen Tab.
Veröffentlichung einer App aufheben
Um eine veröffentlichte App offline zu nehmen, öffnen Sie das Menü Veröffentlichen und klicken Sie auf Veröffentlichung aufheben. Nach Ihrer Bestätigung ist die öffentliche App-URL nicht mehr zugänglich. Das Aufheben der Veröffentlichung löscht weder die App noch ihren Bearbeitungsverlauf. Sie können die App weiter bearbeiten und später erneut veröffentlichen.Eigene Domains
app.yourdomain.com. Nachdem Sie die Domain eingegeben haben, zeigt Teable die hinzuzufügenden DNS-Einträge an. Fügen Sie die Einträge bei Ihrem DNS-Anbieter hinzu, warten Sie auf die Verbreitung und verifizieren Sie dann die Domain in Teable.
Sie können auch eine verfügbare Subdomain unter teable.app verwenden und das Präfix von teable.app bearbeiten, beispielsweise your-name.teable.app.
Eigene Website-Informationen
Verwenden Sie Eigene Website-Informationen im Menü Veröffentlichen, um das Browser-Tab-Symbol, den Seitentitel und die Beschreibung der veröffentlichten App festzulegen. Der Dialog zeigt während der Bearbeitung eine Vorschau, wie sie zusammen aussehen.App-Anmeldung
Klicken Sie in der Kopfzeile der App auf Anmeldung hinzufügen, damit sich Besucher anmelden müssen, bevor sie die App nutzen können. Sobald die Anmeldung konfiguriert ist, ändert sich die Schaltfläche zu Anmeldeeinstellungen. Wenn Sie die Anmeldung aktivieren:- Wählen Sie aus, wo App-Nutzer gespeichert werden. Sie können eine Nutzer-Tabelle erstellen oder eine vorhandene Tabelle mit einem E-Mail-Feld wiederverwenden. Jeder angemeldete Nutzer wird als ein Datensatz gespeichert, und dieselbe Nutzertabelle kann von mehreren Apps wiederverwendet werden.
- Wählen Sie mindestens eine Anmeldemethode, beispielsweise E-Mail-OTP, Google oder Teable. Die verfügbaren Methoden hängen von den Authentifizierungseinstellungen Ihrer Instanz ab.
- Wählen Sie eine Zugriffsrichtlinie: Jeder kann sich registrieren, Zugelassene E-Mail-Domains oder Nur auf Einladung.
Versionsverlauf und Rollback
Teable verfolgt jede Bereitstellung automatisch.- Klicken Sie auf die Schaltfläche Verlauf (Uhrsymbol), um eine Liste aller bereitgestellten Versionen anzuzeigen.
- Rollback mit einem Klick: Wenn ein neues Update Probleme verursacht, können Sie die Live-App sofort auf jede frühere stabile Version zurücksetzen.
Automatische Fehlerbehebung
Wenn Ihre Änderungen am eigenen Code einen Build-Fehler verursachen, schlägt die Bereitstellung fehl.- Teable stellt neben dem Fehlerprotokoll eine Schaltfläche Automatisch beheben bereit.
- Wenn Sie darauf klicken, kann die KI den Kompilierungsfehler analysieren und den Code automatisch patchen, um das Problem zu beheben.
Eine App löschen
Um eine App zu löschen, klicken Sie in der Kopfzeile auf die Schaltfläche Einstellungen (Zahnradsymbol) und wählen Sie Löschen.Bewährte Vorgehensweisen
Informationen zu Prompt-Mustern, Tipps zum Erstellen, Hinweisen zum Rollback und zur häufigen Fehlerbehebung finden Sie im Praxisleitfaden für den App-Builder.FAQ
Löscht das Löschen der Unterhaltung die App?
Löscht das Löschen der Unterhaltung die App?
Wie lade ich App-Code herunter oder importiere ihn?
Wie lade ich App-Code herunter oder importiere ihn?
... und wählen Sie dann Code herunterladen oder Code importieren. Importierte ZIP-Dateien können bis zu 20 MB groß sein und ersetzen das vorhandene Projekt. Schließen Sie daher jede Quelldatei ein, die Sie behalten möchten. Das importierte Projekt muss eine package.json im Stammverzeichnis enthalten. Eine .env-Datei im Stammverzeichnis wird in die Secrets der App importiert.Wann werden Anmeldeeinstellungen auf die Live-App angewendet?
Wann werden Anmeldeeinstellungen auf die Live-App angewendet?
Wie kann eine App zur Laufzeit KI-Modelle aufrufen?
Wie kann eine App zur Laufzeit KI-Modelle aufrufen?
Wie werden integrierte KI und KI in Apps abgerechnet?
Wie werden integrierte KI und KI in Apps abgerechnet?
Wie setze ich eine frühere Version wieder her?
Wie setze ich eine frühere Version wieder her?
Warum meldet der App-Builder, dass ein Agent in einer anderen Unterhaltung beschäftigt ist?
Warum meldet der App-Builder, dass ein Agent in einer anderen Unterhaltung beschäftigt ist?
Wie werden Credits erstattet, wenn ein App-Builder-Durchlauf fehlschlägt?
Wie werden Credits erstattet, wenn ein App-Builder-Durchlauf fehlschlägt?
Wo konfiguriere ich den App-Builder für Self-Hosted?
Wo konfiguriere ich den App-Builder für Self-Hosted?

