Web-App-Builder
Im Web-App-Builder baut Qira Ihre Web-App gemeinsam mit Ihnen: links ein Chat, rechts Ihre laufende App. Sie beschreiben die App, sehen zu, wie sie entsteht, klicken sich durch und veröffentlichen sie.
Den Builder öffnen
Es gibt drei Wege hinein:
- Home - beschreiben Sie die App unter What should we build? und klicken Sie auf Build. Der Builder öffnet sich, und Ihre Anfrage läuft bereits.
- Studio - klicken Sie auf der Karte Web app auf Start a web app.
- Eine bestehende Web-App - öffnen Sie sie aus Studio, um daran weiterzuarbeiten. Der Chatverlauf bleibt erhalten.
Der Aufbau
| Bereich | Was er tut |
|---|---|
| Oben links | Der Name der App (zum Umbenennen auf den Stift klicken) und der Gesprächsverlauf (Uhr-Symbol) |
| Chat | Ihr Gespräch mit Qira. Jede Antwort zeigt, was sie getan hat, welche Dateien sie geändert und was sie getestet hat |
| Vorschau | Ihre App, laufend. Es ist eine echte App: Formulare werden abgeschickt, die Anmeldung funktioniert, Daten werden gespeichert |
| Werkzeugleiste | Zwischen Vorschau und Code wechseln, ein Element auswählen, zurück, vor und neu laden sowie eine Gerätegröße wählen |
| Oben rechts | Publish, Versionsverlauf und die Einstellungen der App |
Eine neue App beginnen
Eine leere App bietet zwei Möglichkeiten für den Anfang.
Startpunkte
Über dem Chatfeld stehen vier Starter. Klicken Sie einen davon an oder beschreiben Sie Ihre eigene Idee:
| Starter | Was Sie bekommen |
|---|---|
| Landing page | Hero-Bereich, Funktionen, Call to Action |
| Dashboard | Diagramme, Tabellen, Filter |
| Auth flow | Anmelden, Registrieren, Passwort zurücksetzen |
| Pricing page | Tarife, Umschalter zwischen monatlich und jährlich, FAQ |
Start from a look
Rechts bietet Start from a look sechs Designs an. Wählen Sie, welche Art von Anwendung Sie bauen, und Qira beginnt in der passenden Schrift, Farbe und Textur:
| Look | Gemacht für |
|---|---|
| Ledger | Produkt / SaaS |
| Signal | Entwickler / KI |
| Atelier | Studio / Editorial |
| Market | Shop |
| Console | App / Dashboard |
| Civic | Lokales Unternehmen |
Wenn Sie keinen Look festlegen, richtet er sich nach Ihrem Prompt: Qira wählt einen, der zu Ihrer Beschreibung passt.
Mit Qira sprechen
Schreiben Sie in das Feld unten im Chat. Daneben finden Sie:
- @ - erwähnen Sie etwas aus Ihrem Arbeitsbereich, etwa eine Tabelle oder einen Workflow, damit Qira es verwendet.
- Upload - hängen Sie eine Datei an: einen Screenshot, eine Skizze, ein Logo, ein Dokument mit Ihren Inhalten.
- Mikrofon - sprechen Sie, statt zu tippen.
- Papierkorb - leeren Sie das Gespräch.
- Modellauswahl - wählen Sie das KI-Modell für die nächste Nachricht. Sie können jederzeit wechseln: ein starkes Modell für den Aufbau der Struktur, ein leichteres für kleine Textänderungen.
Ihre verbleibenden Credits werden unter dem Feld angezeigt.
Seien Sie konkret bei Daten und Personen
Qira baut bessere Apps, wenn Sie sagen:
- was die App speichert: „Buchungen mit Datum, Uhrzeit, Leistung und der Telefonnummer des Kunden“
- wer sich anmeldet und was er darf: „Kunden sehen nur ihre eigenen Buchungen, der Inhaber sieht alle“
- was passieren soll: „Eine E-Mail an mich, wenn eine Buchung eingeht“
Seiten und Backend in einer Anfrage
Qira baut die Seiten. Wenn die App etwas speichern, prüfen oder senden muss, bittet sie Vira darum, und Vira baut:
- Tabellen in My Data, mit typisierten Spalten
- Workflows, die als API-Endpunkte der App dienen, zum Beispiel
POST /feedback/submitoderGET /feedback/list - die Anmeldung: einen Login-Endpunkt, der das Passwort prüft und ein Token zurückgibt, sowie Endpunkte, die nur mit gültigem Token antworten
Alles, was Vira anlegt, erscheint in Studio und My Data wie alles, was Sie von Hand gebaut haben. Sie können es also später öffnen und ändern.
Verified before finishing
Bevor Qira einen Build übergibt, testet sie ihn. Die Karte Verified before finishing (vor dem Abschluss geprüft) listet jede Prüfung mit ihrem Ergebnis auf:
- Build check - das Projekt kompiliert
- jeder API-Endpunkt, den sie angelegt hat, mit dem HTTP-Status, den er zurückgegeben hat
- die Zeilen, die sie aus den Tabellen zurückgelesen hat
Unter der Karte sehen Sie, wie viele Credits der Build verbraucht und wie lange er gedauert hat. Schlägt eine Prüfung fehl, versucht Qira, den Fehler zu beheben, bevor sie fertig ist. Legt sie ein Admin-Konto für Sie an, nennt sie Ihnen die Anmeldedaten im Chat: Ändern Sie das Passwort, bevor Sie live gehen.
Vorschau und Code
- Vorschau (Augen-Symbol) führt Ihre App aus. Über das Gerätemenü neben der Adressleiste sehen Sie sie in Desktop-, Tablet- oder Smartphone-Größe.
- Code (
<>-Symbol) zeigt die Dateien des Projekts. Öffnen Sie eine beliebige Datei, um sie zu lesen oder von Hand zu bearbeiten. - Auswählen (Zeiger-Symbol) lässt Sie ein Element in der Vorschau anklicken, um gezielt an diesem Element zu arbeiten.
Veröffentlichen
Klicken Sie auf Publish, um die aktuelle Version live zu schalten. Jede Veröffentlichung bleibt im Versionsverlauf erhalten (Uhr-Symbol neben Publish), sodass Sie zu einer früheren Version zurückkehren können.
In den Einstellungen der App (Zahnrad-Symbol) legen Sie fest:
- ihre Subdomain oder eine eigene Domain aus Ihrem Arbeitsbereich. Siehe Eigene Domains
- ob sie veröffentlicht ist
- ob Suchmaschinen sie indexieren dürfen
- ihren Look
Beispiele
Feedback-Formular mit Admin-Bereich
„Ein Feedback-Formular für eine Bäckerei. Besucher senden Name, E-Mail und Nachricht. Ein Admin meldet sich an und markiert Einsendungen als erledigt. Alles in einer Tabelle speichern.“
Ergebnis: eine öffentliche Formularseite, eine Admin-Anmeldung und eine Admin-Tabelle, eine Tabelle feedback_submissions und fünf Endpunkte (submit, login, register, list, handle), wobei die Endpunkte list und handle nur angemeldeten Admins antworten. Getestet und fertig in etwa zwei Minuten.
Buchungssystem
„Eine Buchungsseite für mein Studio. Kunden wählen eine Leistung, einen Tag und ein freies Zeitfenster. Ich sehe alle Buchungen in einer Wochenansicht.“
Kundenportal
„Kunden melden sich an und sehen ihre Projekte und Rechnungen. Die Rechnungen lade ich als PDFs hoch.“
Nächste Schritte
- Workflow-Builder - die Workflows hinter Ihrer App öffnen
- My Data - die Tabellen Ihrer App ansehen und bearbeiten
- Eigene Domains - Ihre App auf Ihre eigene Domain bringen