Die Entwicklung einer modernen Webanwendung kann ein kompliziertes Rätsel sein. Sie müssen eine Benutzerauthentifizierung durchführen, eine Datenbank pflegen und Drittanbieter-Bereitstellungen wie Karten aktivieren. Dieser Prozess erfordert oft tagelange Codierung. Was wäre jedoch, wenn Sie eine datengesteuerte App erstellen könnten, indem Sie sie einfach in einer Eingabeaufforderung beschreiben? Jetzt ist dies mit der Verwendung von Google AI Studio möglich. In diesem Artikel werden wir zeigen, wie dominant die neue Firebase-Authentifizierungsintegration und Google Maps-Daten bei den KI-Funktionen der Plattform sind. Wir werden besprechen, wie mit einer umfassenden Eingabeaufforderung eine Full-Stack-KI-App erstellt werden kann. Wir werden auch VibeCheck untersuchen, das eine neue Part in der Geschichte von veranschaulicht Entwicklung von Anwendungen in natürlicher Sprache und beschleunigt die Entwicklung von Anwendungen in Google AI Studio.
Die Idee: Ein „Vibe-basierter“ Spotfinder
Angenommen, Sie möchten in einer Nachbarschaft sein, die zu Ihrer Stimmung passt. Vielleicht kein Café, das Ihnen gefällt, aber ein ruhiger Ort mit guter Beleuchtung zum Arbeiten. Unter solch willkürlichen Bedingungen wird es schwierig sein, danach zu suchen. Dabei soll VibeCheck, eine auf KI basierende Webanwendung, helfen. Es sucht Orte anhand ihrer Atmosphäre.
Um diese Idee umzusetzen, habe ich Google AI Studio mit einer Reihe von Anweisungen verwendet. Die Aufgabe bestand darin, als professioneller Entwickler und Designer eine vollständige Anwendung zu erstellen.
Als wesentliche Voraussetzungen galten:
- Kernfunktionalität: Entwickeln Sie einen Vibe-basierten lokalen Finder namens VibeCheck.
- Tech-Stack: Firebase-Authentifizierung für die Benutzeranmeldung und Cloud Firestore zum Speichern von „Lieblingsspots“. Nutzen Sie Google Maps-Daten, um Orte mithilfe von KI zu entdecken und zu lokalisieren. Die Gemini-API würde Bewertungen des Ortes untersuchen, um die Stimmung zu bestimmen.
- Benutzer-Workflow: In der Mitte der Seite befindet sich eine Suchleiste, die Eingaben in natürlicher Sprache entgegennimmt. Die Anwendung durchsucht die Orte in der Umgebung, fasst die Bewertungen anhand der vom Benutzer als „Stimmung“ angegebenen Schlüsselwörter zusammen und zeigt die Liste an.
- Design: Ein dunkler Modus mit einer eleganten, modernen Benutzeroberfläche, die eine geteilte Bildschirmansicht, eine Karte und die zur Stimmung passenden Ergebniskarten auf demselben Bildschirm bietet.
Durch Auswahl der Optionen „Datenbank hinzufügen und authentifizieren“ und „Google Maps-Daten verwenden“ habe ich das eingegeben KI soll funktionieren.
Von einer einzelnen Eingabeaufforderung zu einer funktionierenden App
Nach der Eingabe der Eingabeaufforderung startete AI Studio automatisch die Erstellung der Anwendung. Es wurde nicht nur Code generiert; Es entstand eine gefühlte ganze Flotte von KI-Anwendungen.
Immediate:
Rolle: Experte für Full-Stack-Entwickler und UI/UX-Designer.
Ziel: Erstellen Sie eine „Vibe-basierte Native Spot Finder“-Webanwendung namens „VibeCheck“.
Zu den technischen Anforderungen gehören:
Verwenden Sie die Firebase-Authentifizierung für die Benutzerregistrierung und -anmeldung.
Verwenden Sie Cloud Firestore, um Benutzerprofile und ihre „Lieblingsspots“ zu speichern.
Verwenden Sie Google Maps Platform (Maps JavaScript API und Locations API), um Standortdaten abzurufen und anzuzeigen.
Verwenden Sie die Gemini-API, um Google Maps Place Critiques zu analysieren und festzustellen, ob ein Ort zur „Stimmung“ des Benutzers passt (z. B. „ruhig genug zum Arbeiten“, „romantische Beleuchtung“, „energische Musik“).
Zu den App-Funktionen und dem Workflow gehören:
Eine große zentrale Suchleiste, die Eingabeaufforderungen in natürlicher Sprache akzeptiert, wie zum Beispiel: „Suchen Sie mir einen indischen Ort zum Mittagessen, der ruhig genug für intensives Arbeiten ist.“
Rufen Sie mithilfe der Close by Search API Eating places in der Nähe ab.
Um die besten Ergebnisse zu erzielen, rufen Sie mithilfe der Ortsdetails die neuesten Nutzerbewertungen ab.
Durchsuchen Sie diese Bewertungen nach Schlüsselwörtern, die sich auf die spezifische Anfrage des Benutzers beziehen (z. B. nach „friedlich“, „laptopfreundlich“ oder „Geräuschpegel“).
Zeigen Sie eine geteilte Bildschirmansicht mit einer Google Map auf der rechten Seite und einer Liste von „Vibe-Matched“-Karten auf der linken Seite an. Jede Karte sollte einen „Vibe Rating“ basierend auf der KI-Analyse anzeigen.
Ermöglichen Sie angemeldeten Benutzern, auf das Image „Speichern“ zu klicken, um ein Restaurant in ihrer von Firestore unterstützten Liste „Gespeicherte Orte“ zu speichern.
Das Design sollte sein:
Fashionable, minimalistisch und sauber. Verwenden Sie standardmäßig eine „Darkish Mode“-Ästhetik mit Neonakzenten (z. B. elektrisches Blau oder Violett) für eine erstklassige „Atmosphäre“.
Ein responsives Format für Desktop- und cell Browser.
Die KI führte eine Abfolge von Aktionen durch, die normalerweise Stunden manueller Arbeit erfordern würden:
- Projekteinrichtung: Es richtete das Firebase-Projekt ein und implementierte die für Cloud Firestore erforderlichen Sicherheitsregeln.
- Set up eines Pakets: Es wurden alle erforderlichen Geräte installiert, z. B. Firebase, React-Google-Maps/API und React-Firebase-Hooks.
- Erstellung der Komponenten: Die KI hat die gesamte Benutzeroberfläche konstruiert, wobei React-Komponenten für die Navigationsleiste, Suchleiste und Kartenanzeige sowie Spotkarten erstellt wurden.
- Service-Integration: Es codierte die Dienstlogik, um das Frontend mit dem zu koppeln Gemini-APImit dem die Kern-Vibe-Analysefunktion aktiviert wurde.
Dieser automatisierte Prozess demonstriert die Stärke der neuen Firebase Authentication-Integration und Google Maps-Daten in den Instruments für künstliche Intelligenz, die den komplizierten Boilerplate-Code problemlos verarbeiten.
Endgültige Konfiguration: Hinzufügen des API-Schlüssels
Die mit generativer KI erstellte Anwendung warfare quick fertig. Es gab eine klare und endgültige Richtlinie, wie es voll funktionsfähig sein sollte. Der nächste Schritt bestand darin, den Google Maps-API-Schlüssel einzurichten.
- Holen Sie sich einen Google Maps-API-Schlüssel: Dazu müssen wir zur Google Cloud Console gehen, wo die Maps JavaScript API und Locations API aktiviert wurden und ein weiterer API-Schlüssel generiert wurde. Oder wir können den folgenden Hyperlink für eine Demo-MAP-API verwenden https://builders.google.com/maps/documentation/javascript/demo-key
- Umgebungsvariablen festlegen: In der AI Studio-Benutzeroberfläche habe ich das Bedienfeld „Geheimnisse“ geöffnet und den neuen Schlüssel mit dem Namen VITE_GOOGLE_MAPS_API_KEY hinzugefügt.
Der API-Schlüssel wurde festgelegt und die Daten von Google Maps in der KI waren unterwegs. Die durch Firebase authentifizierte Integration warfare so intestine integriert, dass das vorgefertigte Firebase-Projekt die Google-Anmeldung (absichtlich) so intestine wie möglich unterstützt.
Eine Hürde überwinden: Der Infinite Loading Bug
Entwicklung künstlicher Intelligenz ist stark, aber nicht unbedingt perfekt. Eine meiner ersten Erfahrungen mit dem System beinhaltete das typische Entwicklerproblem: Es geriet in eine endlose Ladeschleife.
Ich bin nicht zum Debuggen in den Code gelangt, sondern habe dieselbe Konversationsschnittstelle verwendet, um das Drawback zu beheben. Ich habe gerade die folgende Abfrage in die KI eingegeben: „Das wird ewig geladen“ und einen Screenshot geteilt. Hierin liegt das wahre Versprechen der App-Erstellung in natürlicher Sprache, die über die Erstellung einer App hinausgeht und sich mit der Fehlerbehebung befasst.
Die KI konnte das Drawback sehr schnell diagnostizieren und die Lösung beschreiben.
- Das Drawback: Die Gemini-API hatte eine gewisse Einschränkung. Bei Verwendung des Google Maps-Instruments können Sie den Wert von „responseMimeType“ nicht auf „utility/json“ und/oder „response schema“ festlegen. Dadurch wurde die API-Anfrage in einen nicht reagierenden Zustand versetzt.
- Die Lösung: Die KI hat die Datei geminiService.ts neu geschrieben und die begrenzten Felder entfernt. Es wurde die Aufforderung geändert, ausdrücklich eine anzufordern JSON Array und implementierte eine überzeugende Parsing-Logik zur Verarbeitung der Textantwort. Außerdem konnten Fehler in der primären App.tsx-Datei besser behandelt werden, um zu verhindern, dass die App hängen bleibt.
Testen der App
Innerhalb weniger Minuten warfare der Fehler behoben. Es warfare nun möglich, nach einem gemütlichen Leseplatz oder einer lebhaften Dachbar zu suchen und diese schnell abzurufen.
Ich warfare von der Firebase Auth-Funktion begeistert und habe sie daher zuerst getestet. Ich klickte auf die Anmeldeschaltfläche und es öffnete sich sofort ein Popup, in dem ich meine Google-IDs sehen konnte, um mich anzumelden.
Die Anmeldung über Google warfare erfolgreich. Stellen Sie sich vor, ich hätte für diese Authentifizierung keine einzige Codezeile geschrieben.
Jetzt habe ich die App getestet und dazu veranlasst, eine gute Bar für eine Occasion in meiner Nähe zu finden.
Nach meiner Aufforderung wurden alle relevanten Balken aufgelistet. Es wurde auch eine Zusammenfassung gemäß den Bewertungen der Bar bereitgestellt.
Auf die vollständige App und alle Funktionen können Sie hier zugreifen:
https://ai.studio/apps/bd462924-3f0a-4c07-a669-aab634a437e0?fullscreenApplet=true
Warum dies für Entwickler bahnbrechend ist
Dies stellt eine große Veränderung in der dar Arbeitsablauf der Anwendungsentwicklung in Google AI Studio.
- Beeindruckende Leistung: Der Übergang von einem Konzept zu einer vollständig bereitgestellten Anwendung erfolgte in 3 Minuten Arbeit statt in Tagen und Wochen.
- Reduzierte Eintrittsbarriere: Entwickler müssen nicht alle Komponenten des Stacks beherrschen. Die künstliche Intelligenz verwaltet die komplexen Einstellungen zur Implementierung der Firebase-Authentifizierung und zur Verknüpfung mit Google Map-Daten innerhalb der KI.
- Konversationsentwicklung: Die Erstellung von Konversations-Apps ermöglicht das Erstellen und Debuggen von Anwendungen in natürlicher Sprache, wodurch der Prozess bequemer und effektiver wird.
Google AI Studio verändert die Softwarekonstruktion. Es kombiniert führende Plattformen wie Firebase und Google Maps als Teil eines KI-gesteuerten und gesprächigen Workflows. Dadurch können Entwickler ihre Ideen schneller als je zuvor in die Tat umsetzen.
Abschluss
Das Endergebnis ist eine reibungslose, voll funktionsfähige Full-Stack-KI-Anwendung. Nutzer melden sich mit ihrem Google-Konto an, geben eine Vibe-basierte Abfrage ein und erhalten eine Liste geeigneter Orte. Jede Ergebniskarte zeigt einen Vibe Rating basierend auf einer echten Bewertung des Benutzers. Die Karte rechts zeigt jedoch die Place jeder Bewertung. Benutzer können ihre Lieblingsorte auch speichern und die App speichert sie in ihrem Firestore-Profil.
Häufig gestellte Fragen
Google AI Studio enthält jetzt integrierte Instruments für die Firebase-Authentifizierung und Google Maps-Daten, sodass Sie Full-Stack-Anwendungen mit Benutzeranmeldung und Standortfunktionen direkt über eine Eingabeaufforderung erstellen können.
Die KI generierte die erste Model der Anwendung in etwa vier Minuten und verbrachte eine weitere Minute damit, sie zu debuggen.
Nein, die KI übernimmt die anfängliche Einrichtung, Konfiguration und Sicherheitsregeln des Firebase-Projekts und macht es auch dann zugänglich, wenn Sie kein Firebase-Experte sind.
Die KI generiert einen starken Prototyp mit bewährten Praktiken. Sie sollten jedoch immer die Sicherheitsregeln überprüfen und verschärfen und gründlich testen, bevor Sie sie einem breiten Publikum zugänglich machen.
Während AI Studio eine Plattform für die Entwicklung bereitstellt, können bei der Nutzung von Diensten wie der Google Maps API und der Gemini API je nach Nutzung Kosten anfallen.
Harsh Mishra ist ein KI/ML-Ingenieur, der mehr Zeit damit verbringt, mit großen Sprachmodellen zu sprechen als mit echten Menschen. Leidenschaftlich für GenAI, NLP und die intelligentere Entwicklung von Maschinen (damit sie ihn noch nicht ersetzen). Wenn er nicht gerade Modelle optimiert, optimiert er wahrscheinlich seinen Kaffeekonsum. 🚀☕
Melden Sie sich an, um weiterzulesen und von Experten kuratierte Inhalte zu genießen.