Wie erstelle ich mit Vibe Coding eine App für iPhone und Android?

Welche Apps du ohne Programmieren erstellen kannst

Mit Vibe Coding entstehen Apps, die auf iPhone und Android laufen. Besonders gut eignen sie sich für alles, was Menschen unterwegs schnell griffbereit haben wollen.

• Mitglieder-App für Fitnessstudio, Verein oder Club mit Kursplan, Buchungen und digitaler Mitgliedskarte.
• Kunden-App für Café oder Laden mit Speisekarte, Neuigkeiten und Treuekarte per QR-Code.
• Event-App mit Programm, Lageplan und Infos für Teilnehmende.
• Persönliche Apps: Trainingstagebuch, Haushaltsplan, Rezeptsammlung.
• App-Prototypen für eine Startup-Idee, die du testen willst.

Der Vorteil gegenüber klassischer App-Entwicklung: Du musst nicht zwei getrennte Apps für iPhone und Android bauen lassen. Eine Beschreibung reicht, und die App funktioniert auf beiden Systemen.

Schritt für Schritt zu deiner App

1. „Mobile App“ wählen: Im Arbeitsbereich entscheidest du, was du bauen willst. Der Agent richtet sich dann direkt auf eine Handy-App aus.
2. Beschreiben oder planen: Erzähl im Chat, wer die App nutzt und was sie können soll. Im Modus „Planen“ sortiert ihr zuerst gemeinsam die Bildschirme und Funktionen, ohne dass Dateien geändert werden.
3. Im Handy-Rahmen ansehen: Die App erscheint in der Live-Vorschau im Rahmen eines iPhones oder Android-Geräts.
4. Auf dem eigenen Handy testen: Scanne den QR-Code und probier die App direkt auf deinem Smartphone aus.
5. Verfeinern: Zeig in der Vorschau auf einen Button oder Bildschirm und sag, was anders werden soll, oder schick einen Screenshot.
6. Herunterladen: Lade das Cordova-Projekt herunter, um die App für die Stores zu kompilieren, oder den kompletten Quellcode als ZIP, um sie als Web-App auf ein Hosting deiner Wahl zu stellen.

Eine gute Anfrage und warum sie funktioniert

Auf dem Handy ist der Platz knapp. Deshalb hilft es, wenn du die Bildschirme deiner App aufzählst und sagst, was auf jedem passiert. Beschreib außerdem, wer die App nutzt und ob sich die Leute anmelden müssen. Dann legt der Agent Benutzerkonten und Datentabellen selbst an.

Konkrete Inhalte machen den Unterschied: echte Kursnamen, Uhrzeiten, Preise oder Produktnamen. So sieht schon die erste Version aus wie eine richtige App und nicht wie ein Muster. Ein Beispiel findest du weiter unten.

Denk dabei aus Sicht deiner Nutzer: Was wollen sie in den ersten zehn Sekunden nach dem Öffnen tun? Das gehört auf den ersten Bildschirm. Bei einer Studio-App ist das vielleicht der heutige Kursplan, bei einer Café-App die Treuekarte.

Was deine App mitbringt

• Moderner Code: React, TypeScript und Tailwind CSS, optimiert für Touch-Bedienung.
• Login und Daten: Registrierung, Anmeldung, Rollen und Datenspeicherung, wenn deine App sie braucht.
• Fotos und Dateien: etwa Profilbilder oder Belege hochladen.
• QR-Codes: für Mitgliedskarten, Buchungen oder Gutscheine, auf Wunsch für jeden Nutzer ein eigener.
• Auf den Homescreen: Die App lässt sich als Web-App im Vollbild auf dem Startbildschirm installieren, ganz ohne Store.
• Cordova-Projekt: Du kannst ein fertiges Projekt herunterladen, bereit zum Kompilieren für App Store und Google Play.

Tipps für eine App, die gern genutzt wird

• Wenige Bildschirme: Drei bis fünf Hauptbereiche in einer unteren Navigation reichen für die meisten Apps.
• Große Touch-Flächen: Bitte den Agenten um gut erreichbare Buttons für die Bedienung mit dem Daumen.
• Immer auf dem echten Handy testen: Der QR-Code bringt jede neue Version in Sekunden auf dein Smartphone.
• Ein Schritt nach dem anderen: Erst der Hauptablauf, dann Extras. Über die Versionen kommst du jederzeit zurück.
• Fehler einfach melden: Fehler im Browser schickst du dem Agenten mit einem Klick, Build-Fehler behebt er selbst.

Web-App, Startbildschirm oder Store: der Unterschied

Bei Apps hörst du schnell viele Begriffe. Kurz erklärt, welche Wege dir offenstehen:

• Web-App im Browser: Du lädst den Code herunter und stellst die App auf ein Hosting deiner Wahl. Dann ist sie unter einer Adresse erreichbar und läuft auf jedem Handy. Teilen geht per Link oder QR-Code. Hosting mit einem Klick direkt aus CodeMyVibe kommt bald.
• Installation auf dem Startbildschirm: Nutzer fügen die Web-App mit einem Tipp zum Homescreen hinzu. Sie bekommt ein eigenes Symbol und startet im Vollbild, ohne Adressleiste.
• App im Store: Mit dem Cordova-Projekt kannst du eine App für App Store und Google Play kompilieren. Dafür brauchst du eigene Entwicklerkonten und musst die Prüfung der Stores durchlaufen.

Für viele Fälle reicht die Installation auf dem Startbildschirm völlig, vor allem für Mitglieder, Stammkunden oder ein internes Team. Der Store lohnt sich, wenn du eine breite Öffentlichkeit erreichen willst, die dich noch nicht kennt. Du kannst mit der Web-App anfangen und den Schritt in die Stores später gehen.

Wie deine App zu deinen Nutzern kommt

Während du baust, probierst du die App per QR-Code auf deinem eigenen Handy aus. Die private Vorschau-Adresse öffnen nur du und die Personen, denen du Zugriff gibst, praktisch für erste Testnutzer.

Als Web-App: Lade den kompletten Quellcode als ZIP herunter, bereit für Docker oder ein normales Hosting, und stell ihn auf das Hosting deiner Wahl. Deine Nutzer öffnen die App dann im Browser und fügen sie mit einem Tipp zum Startbildschirm hinzu. Sie startet im Vollbild wie eine normale App.

Willst du in die Stores, lädst du das Cordova-Projekt herunter. Kompilieren und in den Stores veröffentlichen machst du selbst, mit deinen eigenen Entwicklerkonten bei Apple und Google. Dein Projekt kannst du außerdem mit GitHub, GitLab oder Bitbucket synchronisieren.

Sammle nach dem Start Rückmeldungen von deinen ersten Nutzern und setze sie Schritt für Schritt im Chat um. Bei der Web-App lädst du nach jeder Änderung die neue Version auf dein Hosting, und alle sehen sie beim nächsten Öffnen, ohne ein Update zu installieren.

Häufige Fragen