In Minuten zur Web-App mit Google Stitch & AI Studio

Moin und willkommen zu diesem neuen Snip. Heute will ich dir einmal zeigen, wie du mit Google Stitch und dem Google AI Studio eine Web-App bauen kannst oder auch eine mobile App, nur anhand eines Prompts samt Frontend-Design, entsprechenden Typen, und das Ganze dann ja von einem Klickdummy zu einer funktionierenden App weiterbauen kannst. Wie das Ganze funktioniert, das schauen wir uns einmal kurz an. Dafür springen wir einmal in Google Stitch rein. Google Stitch ist ein recht einfach gehaltenes Programm. Du kannst hier auswählen, ob du für Web oder für App etwas bauen möchtest. Und wir haben jetzt einfach mal als Beispiel hier einen eine Delivery-App, also eine Liefer-App für Hunde, mal uns überlegt. Das Ganze haben wir gepromptet. Und weil das Ganze mal ein paar Minuten dauert, habe ich das Ganze schon mal vorab gemacht. So sieht das Ganze dann aus. Und mein Prompt war lediglich hier oben: Create a food delivery app for dogs. Also auch nichts Wildes. Aber du siehst, wir haben hier schon entsprechende Ansichten. Und in Google Stitch können wir hier diese Ansichten noch mal verändern. Das heißt, wir haben hier jeden Frame, den wir hier editieren können, und so ist quasi auch eine entsprechende Journey, können wir hier entweder übers Prompting verändern, wir können neue Screens hinzufügen, neue Sachen verändern. Wir können aber auch jeden einzelnen Part hier, den wir sehen, beispielsweise hier diese Profilseite, entsprechend verändern. Wir können über Edit das Ganze diesen Screenshot zum Chat hinzufügen. Wir können das quasi annotaten, also wir können hier eine entsprechend, machen wir das hier mal mit einem Stift, entsprechend malen und das quasi auch noch mal als Prompt-Input nehmen, wenn wir hier Sachen verändern wollen, zum Beispiel Box hier raus oder hier vielleicht ohne Icons. Das können wir hier entsprechend machen und dann mit Annotate, das würde dann auch im Prompt gesetzt. Oder wir können das Ganze auch hier mit Edit Theme noch mal anders einfärben, also viele, viele Möglichkeiten sowie auch Preview-Möglichkeiten. Und was dann ganz cool ist: Du kannst hier die Screens markieren. Das machen wir mal hier ganz kurz zur Verdeutlichung. Und dann kannst du hier sagen, du gehst auf Generate und dann kannst du dir einen Prototypen erstellen. Siehst du hier in der Mitte, siehst du Generate und dann Prototyp oder Prototype. Und dann bekommst du hier erstmal einen fertigen Klickdummy. Wenn ich jetzt hier auf Interact gehe, dann bin ich hier in einem Klick, das heißt ich kann hier scrollen, draufklicken, was angeben, Meal-Plan erstellen, Customize Meal. Du siehst hier vom Aufbau her schon mal entsprechend mit Order Placement, also hier natürlich mit Dummydaten aus dem Klickdummy, was hier erzeugt wurde, aber mit einer funktionalen App. Du kannst hier anschauen, wie sich das Ganze hier anfühlt. Ganz wichtig: Wir haben hier eine mobile Webseite, keine richtige iOS- oder Android-App. Das ist ganz, ganz wichtig. Deswegen siehst du hier oben auch so Sachen wie die URL-Bar. Das heißt hier eine mobiloptimierte Seite, aber keine App. Das ist noch mal eine andere Komplexität, selbst beim Thema Vibe Coding. So, und wenn wir jetzt diesen Klickdummy hier haben, dann können wir daraus entsprechend das Ganze bauen. Das ist mittlerweile sehr, sehr einfach, denn Google hat natürlich auch Integration mitgedacht. Und wenn du hier draufklickst und auf More klickst, kannst du hier auf Export gehen. Du kannst natürlich auch den Code herunterladen, du kannst ihn exportieren, dir anschauen. Aber auf diesem Export findest du verschiedene Möglichkeiten, unter anderem das Google AI Studio. Du kannst es auch herunterladen als ZIP, Copy to Clipboard, mit Jules das entsprechend auch noch mal in den Coding-Assistenten mit reingeben, oder wir nehmen hier das AI Studio. Und hier ist die Integration wirklich sehr, sehr gut gelöst, denn du kannst hier etwas hinzufügen zu dem Prompt oder du klickst einfach unten rechts – da bin ich gerade ein bisschen verdeckt, aber unten rechts ist ein Button – Build with AI Studio. Und dann öffnet sich das AI Studio. Du hast hier die Datei mit drin und dann hier auch: Build me an app with screens that look like this, you can hotlink images from the HTML. Also hier wird der gesamte Kontext, der notwendig ist, um diese App zu bauen, entsprechend eingepflegt. Und wir klicken jetzt auf Build und lassen das Ganze hier mal bauen. Auch das Ganze dauert hier, je nachdem, was für ein Modell du hast. Hier haben wir das Gemini 3 Pro Preview Modell, also ein recht umfangreiches und großes Modell, dementsprechend auch ein bisschen langsamer, wird das hier ein paar Minuten dauern. Deswegen haben wir auch das schon mal vorbereitet. Und so sieht das Ganze aus. Hier ist er für 154 Sekunden gelaufen und wir haben hier eine entsprechende App gebaut. Das heißt, wir können hier auf Get Started gehen, können hier Sachen einfügen, können auf Meal Plan gehen und entsprechend hier das Ganze auch customizen und können hier mit diesen Screens quasi weiterarbeiten und hier das Ganze auch weiter editieren. Das heißt, wenn wir sagen, wir möchten hier noch andere Screens haben, wir möchten das funktional haben, dann ist das Ganze hier anpassbar, weil wir hier alle Daten quasi haben und hier in dem Code-Editor auch entsprechenden Seiten wie Profile, Setup, Tracking und so weiter mit abgedeckt. Und können wir jetzt zum Beispiel, wir nehmen mal hier was zum Meal, können hier entsprechend das auch wieder aus dem Warenkorb rausnehmen. Man sieht, hier manche Optionen sind nicht so ganz drin, das heißt, man müsste das noch mal reinprompten. Aber man hat aber hier einen funktionalen Prototypen und den können wir jetzt entsprechend auch hosten. Und das ist natürlich beim Google AI Studio auch wieder über die Google Cloud gelöst. Also hier bleibt man komplett im Ökosystem von Google. Und das ist eigentlich ein sehr, sehr einfacher Weg und ein kostenloser Weg, das Ganze hier erstmal kostenlos zu Noch nicht mit einer eigenen Domain, sondern erstmal quasi als Klickdummy beziehungsweise als erste Version zum Ausprobieren und zum Verschicken. Und das machst du hier oben rechts. Du hast hier die Möglichkeit, das auch bei GitHub zu speichern. Wenn du damit arbeiten kannst, ist das auch ein sehr, sehr einfacher Weg. Und du hast hier die Möglichkeit, auf Deploy App zu gehen. Wenn du jetzt hier auf Deploy App gehst, dann geht die Richtung Richtung dem Google Cloud Environment oder Umgebung. Das heißt, du brauchst hier einen Google-Cloud-Account, der ist kostenlos erstmal, und musst da ein Projekt aufsetzen und hier eine Billing-Adresse, also eine Rechnungsadresse, sowie Zahlungsdaten hinterlegen. Die Google Cloud Cloud Run Services sind aber mit einem sehr reichen und ja recht großzügigen kostenlosen Plan ausgestattet. Google braucht hier einfach nur die Sicherheit, dass du auch entsprechend ja bei skalierbaren Projekten und bei größeren Projekten hier zahlen kannst. Und wenn du hier ein Cloud-Projekt angelegt hast, dann kannst du das hier entsprechend selecten, oder du sagst hier: Ich möchte ein neues Projekt importieren beziehungsweise nutzen. Dann kannst du hier sagen: Snip 4. Das Ganze hier anlegen. Und dann steht hier nämlich der Punkt: Setup Billing. Und das ist jetzt der wichtige Prozess. Wir haben jetzt hier ein leeres Projekt erstellt. Wenn du auf Setup Billing gehst, dann kommst du hier in die Google Cloud Console nach einem langen, weißen Ladebildschirm und kannst hier sagen Link a Billing Account oder Manage Billing Accounts. Und je nachdem, wo du da draufklickst, wirst du dann entsprechend in die richtige Maske geliefert, wo du dann auch entsprechend Zahlungsdaten mit eingeben kannst, Kreditkarten etc., und das dann verknüpfen kannst. Und wenn sich das dann hier verändert hat, klicken wir hier auf Dafür haben wir hier, das hier ist einer. Wenn du hier die Billing-Adresse hinterlegt hast, kannst du hier auf Deploy App gehen. Und dann dauert das ein paar Sekunden und du bekommst hier eine entsprechende URL, die du auch teilen kannst, wo dann diese App drauf läuft. Also hier zum Beispiel über diese. Und wenn wir die mal aufmachen, sehen wir hier entsprechend unsere App, die wir hier auch nutzen können und mit der wir auch arbeiten können. So. Und auch hier sind manche Funktionen noch nicht so ganz funktionstüchtig wie das hier, das müsste man nachprompten. Aber du hast hier einen ersten Prototypen, den du so auch teilen kannst. Wir haben natürlich jetzt die Desktop-Ansicht, auf Mobil wird das besser aussehen. Du kannst aber auch in Google Stitch natürlich das Ganze auch auf einem Desktop prompten. Dafür kannst du auch einfach hier reingehen und beispielsweise über das Profil bei Preview auch auf Desktop gehen. Und dann siehst du, wird das Ganze hier auch in der Desktop-Version angezeigt, je nachdem, was du so vorhast. Schieben das mal ein bisschen weg. Und das ist ein sehr, sehr einfacher Weg von einer Idee zu einem Prototypen zu einer funktionsfähigen Web-App zu kommen oder sogar mobilen optimierten App. Und das Ganze komplett im Google-Ökosystem, komplett kostenlos. Wie groß du das natürlich aufziehst, wie groß du das skalierst, kommen natürlich irgendwann Kosten auf dich zu, wenn du es dann auch hostest, aber an sich kannst du hier erstmal kostenlos starten, um beim Ausprobieren deine ersten Ideen und im Visualisieren direkt mit dem Frontend. Wünsche dir ganz viel Spaß und wir sehen uns beim nächsten Snip. Ciao, ciao.