Apps bauen mit Google Gemini Canvas

Ich habe mich schon länger gefragt, ob künstliche Intelligenz wirklich eine substanzielle Hilfe beim Programmieren sein kann. Als jemand, der schon oft erlebt hat, wie hoch die Hürden für den Einstieg sein können – komplexe Syntax, unbekannte Frameworks und endlose Fehlersuchen – wollte ich das selbst auf die Probe stellen. Deshalb habe ich es einfach mal ausprobiert und bin durchaus erstaunt, wie schnell man mit der Hilfe von Gemini zu einem funktionierendem Ergebnis kommt.

Was ist Google Gemini Canvas?

Google Gemini Canvas [1] ist der interaktive Arbeitsbereich, der Nutzern die kollaborative Entwicklung von Anwendungen mithilfe künstlicher Intelligenz ermöglicht. In dieser Umgebung wird Gemini über präzise Textprompts angewiesen, funktionsfähigen Code zu generieren, beispielsweise für vollständige Web-Apps in HTML, CSS und JavaScript. Die KI agiert dabei als ein extrem schneller Programmierpartner, der die Erstellung komplexer Prototypen massiv beschleunigt. Dies senkt die anfängliche Hürde beim Codieren, da sich Nutzer auf die logische Struktur konzentrieren und den generierten Code direkt verfeinern können, bis das gewünschte Ergebnis erreicht ist.

Mein Anwendungsbeispiel: Ein BMI-Rechner

Um die Fähigkeiten von Gemini Canvas zu testen, habe ich mich für ein zugegebenermaßen recht einfallsloses aber dafür doch sehr einfaches und praktisches Projekt entschieden: einen BMI-Rechner. Das Projekt war überschaubar genug, um den Prozess schnell durchlaufen zu können, und komplex genug, um die echten Stärken der KI kennenzulernen.

Mein Prozess: Vom Prompt zum Ergebnis

Der eigentliche Bauprozess war sehr einfach. Alles begann mit einem klaren und präzisen Prompt.

Schritt 1: Meine Anweisung

Ich habe Gemini folgende Anweisung gegeben:

„Erstelle eine einfache Web-App (HTML, CSS, JavaScript) für einen BMI-Rechner. Die App soll zwei Eingabefelder für Körpergröße (in cm) und Gewicht (in kg) haben. Wenn man auf einen Button klickt, soll der BMI berechnet und das Ergebnis mit einer kurzen Interpretation angezeigt werden. Verwende Tailwind CSS für ein modernes, responsives Design. Der Code soll in einer einzigen HTML-Datei enthalten sein.“

Schritt 2: Die Code-Generierung

Innerhalb von Sekunden lieferte Gemini den vollständigen, ausführbaren Code. Dazu gehörte auch, dass die KI nicht nur die HTML-Struktur, die Eingabefelder und den Button erstellte, sondern ebenso das JavaScript für die Berechnung und die Tailwind-Bibliothek für das Styling eingebunden hatte.

Die KI hat sofort verstanden, dass die Größe von Zentimetern in Metern umgerechnet werden muss. Die BMI-Klassifizierung (Untergewicht, Normalgewicht etc.) wurde direkt mit einer passenden Farbkodierung umgesetzt.

Schritt 3: Das fertige Ergebnis

Der generierte Code ließ sich auch direkt aus Gemini ausführen. Alternativ hätte man den Code auch in eine eigene index.html-Datei kopieren und irgendwo ablegen und aufrufen können. Ich musste jedenfalls nichts mehr anpassen:

Das Code-Snippet erspare ich mir hier mal. Stattdessen zeigen die beiden nachfolgenden Screenshots zwei unterschiedliche Testfälle.

Der BMI-Rechner kann hier aufgerufen werden [2]. Und das war es dann auch schon. Offenbar hat Canvas eine Menge Potenzial. Ich bin schon gespannt, wofür ich es als nächstes einsetzen werde.

Zusammenfassung und Fazit

Mein Experiment mit Google Gemini Canvas war ein voller Erfolg. Die Geschwindigkeit, mit der eine voll funktionsfähige App erstellt wurde, hat mich schlichtweg begeistert.

Vorteile, die ich sehe:

• Schnelles Prototyping: Ich konnte eine Idee innerhalb von Minuten in eine funktionierende Anwendung verwandeln.
• Niedrige Einstiegshürde: Man muss weder eine Entwicklungsumgebung haben noch eine Programmiersprache können, um zu starten.
• Zeitersparnis: Gemini hat die mühsame Arbeit des Schreibens von Boilerplate-Code übernommen und mir so viel Zeit gespart.

Da man immer bedenken muss, dass eine KI Fehler machen oder möglicherweise auch ineffiziente Lösungen vorschlagen kann, sollte man den Code natürlich immer prüfen.

Ob Canvas schließlich für komplexe Architekturen oder anspruchsvolle Benutzeroberflächen einsetzbar ist, wage ich dennoch mal anzuzweifeln. Es hat das Potenzial, die Art und Weise, wie ich Prototypen baue und Ideen umsetze, grundlegend zu verändern. Meiner Meinung nach setzen solche KI-Tools die Kreativität frei und ermöglichen es, sich auf die eigentlichen Probleme zu konzentrieren, anstatt sich mit technischen Details aufzuhalten.

---

Weblinks

[1] Mit Canvas Dokumente, Apps und mehr erstellen – Computer – Gemini-Apps-Hilfe

[2] BMI Rechner