Der Leitfaden
So nutzt du Uttra
Schritt für Schritt, von der ersten Idee bis zur veröffentlichten Website mit deinem eigenen Code in der Hand.
Schritt 1
Starte dein erstes Projekt
Beschreib deine Idee in einfachen Worten, und Uttra fängt an, sie vor deinen Augen zu bauen.
- Schreib deine Idee in das Eingabefeld auf der Startseite – auf Arabisch, im Dialekt oder auf Englisch, so wie du sie jemandem gegenüber erklären würdest.
- Klick auf „Jetzt bauen“. Uttra richtet eine isolierte Umgebung nur für dein Projekt ein; ihre Dateien werden nie mit denen anderer geteilt.
- Verfolg den Aufbau Schritt für Schritt im Chat: Seiten, Daten und Logik entstehen nacheinander vor deinen Augen. Du kannst außerdem unter „UI Styles“ eine Designrichtung wählen.
- Wenn es fertig ist, kannst du im selben Chat jederzeit weitere Änderungen anfragen; das Projekt bleibt offen für die Weiterentwicklung.
Schritt 2
Öffne die Vorschau und sieh deine Website live
Eine Live-Vorschau neben dem Chat, die sich bei jeder Anfrage sofort aktualisiert.
- Sobald der Aufbau fertig ist, öffnet Uttra eine Live-Vorschau deiner Website oder App direkt neben dem Chatfenster.
- Jede Änderung, die du im Chat anfragst, erscheint sofort in der Vorschau: Du siehst das Ergebnis, während du mit Uttra sprichst, nicht später.
- Der Vorschaulink ist privat: Niemand sonst kann ihn sehen, bis du das Projekt veröffentlichst.
ChatCodeVorschau
Veröffentlichen
Preview
Live
Zahnklinik SmileTermin buchen
Schritt 3
Nutze „Element auswählen“ zum visuellen Bearbeiten
Klick auf „Element auswählen“, wähl etwas auf der Seite und sag Uttra, was daran geändert werden soll.
- Über der Vorschau gibt es einen Button „Element auswählen“. Klick ihn an und wähl dann etwas auf der Seite (Text, Bild, Button oder einen ganzen Abschnitt).
- Das gewählte Element wird automatisch als Kontext an den Chat geschickt, sodass du deine Anfrage direkt schreiben kannst, etwa „mach diesen Text größer“ oder „lösche diesen Abschnitt“, ohne zu beschreiben, wo er steht.
- Für präzise Änderungen an einem Element ist das schneller. Für größere Änderungen, die mehrere Teile betreffen und Logik sowie Datenanbindungen brauchen, ist der normale Chat das bessere Werkzeug.
Preview
Element auswählen
Zahnklinik Smileh1.hero-title
Mach diesen Text größer
Schritt 4
Teste deine Website auf verschiedenen Geräten
Wechsle vom selben Bildschirm aus zwischen Handy-, Tablet- und Desktop-Ansicht.
- Über die Vorschau-Symbolleiste wechselst du zwischen Handy-, Tablet- und Desktop-Größe, ohne ein anderes Gerät öffnen zu müssen.
- So stellst du sicher, dass das Design in jeder Größe funktioniert und klar aussieht, bevor du deine Website veröffentlichst.
- Wenn Uttra dir eine mobile App gebaut hat, kannst du sie per QR-Code über die Expo-Go-App direkt auf deinem echten Handy testen.
Preview
Schritt 5
Auf einer kostenlosen Uttra-Domain veröffentlichen
Ein Klick, und ein fertiger Link zum Teilen mit jedem – ohne Hosting-Einrichtung.
- Klick oben im Projekt auf „Veröffentlichen“: Dein Projekt wird „öffentlich“ und du bekommst sofort einen Direktlink zum Teilen mit jedem.
- Der Link liegt auf einer kostenlosen Subdomain wie deine-app.uttra.io – ohne Hosting-Einrichtung deinerseits.
- Veröffentlichte Websites laufen auf den Ressourcen deines Tarifs (CPU, Arbeitsspeicher, Speicher), automatisch verteilt und bereit für echten Traffic – ohne dass du einen Server einrichten musst.
- Wenn du nach einer Änderung erneut auf „Veröffentlichen“ klickst, bleibt die vorherige Version für Besucher online, bis die neue geprüft ist; deine Website fällt während eines Updates nie aus.
ChatCodeVorschau
Veröffentlichen
VeröffentlichenDieses Projekt öffentlich erreichbar machen
Hosting
0.8 vCPU
Prozessor
2.4 GB
Arbeitsspeicher
24 GB
Speicher
Domain
Unsere Subdomain
clinic-smile.uttra.io
Eigene Domain
Bring deine eigene mit – in jedem Tarif kostenlos
Veröffentlichen
Schritt 6
Verbinde deine eigene Domain
Deine Website auf deiner eigenen Domain, in jedem Tarif kostenlos.
- Wähl im Fenster „Veröffentlichen“ die Option „Eigene Domain“ und gib deine Domain ein, z. B. app.beispiel.de.
- Trag die DNS-Einträge, die Uttra dir zeigt, im Control-Panel deines Domain-Anbieters ein – meist ein TXT-Eintrag zur Verifizierung und ein A-Eintrag.
- Klick auf „Domain verifizieren“. Sobald die Einstellungen übernommen sind (das kann etwas dauern), geht deine Website direkt auf deiner eigenen Domain live.
| Typ | Hosten | Wert |
|---|---|---|
| TXT | @ | uttra-verify=8a2f... |
| A | @ | 76.13.x.x |
Verifiziert: Deine Website ist auf deiner Domain live
Schritt 7
Verbinde GitHub und pushe deinen Code
Eine vollständige Kopie des Codes, in deinem eigenen Repository.
- Verbinde im Projekt im Tab „GitHub“ dein Konto mit einem Personal Access Token, der den repo-Scope besitzt.
- Nach dem Verbinden pushst du dein Projekt jederzeit direkt in dein eigenes Repository.
- Ein bestehendes Repository zu importieren (pull) funktioniert über das Terminal in der Projektumgebung mit den üblichen git-Befehlen wie git clone und git pull.
GitHub verbinden
clinic-smile-appPushen
Schritt 8
Lade deinen Code herunter oder bearbeite ihn selbst im Terminal
Der Code gehört vollständig dir und ist nie in der Plattform eingeschlossen.
- Der Code gehört ganz dir. Du kannst ihn jederzeit zu GitHub pushen oder direkt über das im Projekt eingebaute Terminal herunterladen bzw. kopieren.
- Das Terminal gibt dir eine echte Entwicklungsumgebung: Dateien öffnen und manuell bearbeiten sowie jedes npm- oder Systempaket installieren, das dein Projekt braucht.
- Du bist also nicht nur auf den Chat beschränkt: Du kannst jederzeit wie ein vollwertiger Entwickler im selben Projekt arbeiten.
zsh
$
$
Bereit, es selbst auszuprobieren?
Kostenlos · Keine Kreditkarte nötig