Travel Download - Download Travel -Quellcodes

Travel

AI-Quellcode

1.0.0

Herunterladen

Github: https://github.com/mohdjami/Travel

Bereitgestellter Link: https://travelplanai.vercel.app/

YT-Video: https://youtu.be/oeioDsKQ4cQ?si=U35aBhen3L3zJAPq

Anwendungsarchitektur und -fluss

Das obige Diagramm gibt einen allgemeinen Überblick über die Anwendung, Dienste und Lösungen.

Ich habe Next.js, Supabase, Gemini-1.5-flash Model, Shadcn, Typescript und Tailwind CSS genutzt.

Registrieren Sie Ihr Konto unter https://travel- three-lovat.vercel.app/signup
Sie werden protokolliert und zur Seite /Reiseplan weitergeleitet.
Jeder Benutzer erhält 5 Credits, da ich auch begrenzte Token von der Gemini API habe.
Füllen Sie das Formular „Reiseplan“ aus und klicken Sie auf die Schaltfläche „Generieren“.
Es dauert einige Sekunden, bis eine Anfrage mit Benutzereinstellungsdaten an das Backend gesendet wird.
Der Route-Handler erstellt die Benutzereinstellungen dB und erstellt eine personalisierte Eingabeaufforderung.
Die Eingabeaufforderung wird an das Gemini-Modell gesendet und die Antwort wird empfangen.
Nach Erhalt der Antwort wird diese verfeinert, bereinigt und in JSON geparst.
Die Antwort wird dann in der Datenbank gespeichert und an den Kunden zurückgesendet.
The Fronted verwendet die Leaflet Maps API, um den Standort jeder Aktivität anzuzeigen.
Bingo!! Der Reiseplan kann entweder im PDF- oder TXT-Format heruntergeladen werden.
Sie können zum Dashboard gehen, um aktuelle Reiserouten zu verwalten und anzuzeigen.

Schema ERDiagram

Implementierungsdetails

Ich habe die Anwendung in diese Module unterteilt.

Authentifizierung und Autorisierung

Verwendet Supabase zur Authentifizierung und Autorisierung von Benutzern
Warum Supabase für Authentifizierung und Datenspeicherung?
1. Alles an einem Ort, Authentifizierung, Speicherung, Datenbank.
2. Supabase basiert auf PostgreSQL und bietet ein robustes und funktionsreiches Datenbanksystem, das das Schreiben von Roh-SQL-Abfragen zum Erstellen von Tabellen, RLS-Richtlinien und GRANT-Berechtigungen ermöglicht.
3. Tolle Entwicklererfahrung.
Github
1. Erstellte eine OAuth-App in Github und integrierte sie in die Datenbank.
2. In auth/callback/route.ts, wo der Code zur Authentifizierung ausgetauscht wird, wird ein neuer Benutzer in der Datenbank erstellt.
Anmeldeinformationen
1. Der Benutzer erstellt ein Konto.
2. Im Authentifizierungsdienst wird ein Benutzer angelegt.
3. Ein neuer Benutzer wird zur Benutzertabelle in Supabase hinzugefügt.

Reiseroutenerstellung

Hier haben wir das Google gemini-1.5-Flash-Modell verwendet.

Next.js zum Erstellen einer Full-Stack-Anwendung.

Next.js ist aufgrund des serverseitigen Renderings, der statischen Site-Generierung und SEO eine ausgezeichnete Wahl.

Warum Next.js?

API Routes machte es sehr einfach, Endpunkte für die Anwendung zu erstellen.
Dateibasiertes Routing erhöht die Entwicklererfahrung.
Bibliotheken wie Shadcn und Tailwind sparen viel Zeit und erstellen eine nahtlose Benutzeroberfläche.
Erstklassige TypeScript-Unterstützung ohne zusätzliche Konfiguration, die wir in Node.js nicht erhalten
Schnelle und einfache Bereitstellung.
Für ein Projekt, das serverseitiges Rendering, API-Routen und Skalierbarkeit erfordert, bietet Next.js eine robuste, leistungsstarke und entwicklerfreundliche Lösung. Seine Integration mit React, integrierte Optimierungen und starke Community-Unterstützung machen es zu einer attraktiven Wahl für die moderne Webentwicklung.

Reiseplanformular

Nach Erhalt der Benutzereinstellungen aus dem Reiseplanformular wird eine Anfrage mit allen Daten an das Backend gesendet.

Reiseroute anzeigen

Die Reiseroute wird dann in den Komponenten zur Anzeige der Daten verwendet. Ich habe auch Karten aus dem Prospekt integriert.

Zwillinge-1,5-Blitz

Gemini-1.5-flash ist ein von Google entwickeltes fortschrittliches KI-Modell, das die Reiseroutengenerierung in unserer Anwendung unterstützt. Dieses Modell zeichnet sich dadurch aus, dass es komplexe Reisepräferenzen versteht und detaillierte, personalisierte Reiserouten erstellt. Durch die Nutzung von Gemini-1.5-Flash sind wir in der Lage, hochgradig maßgeschneiderte Reisepläne zu erstellen, die Faktoren wie Budgetbeschränkungen, persönliche Interessen und Reisedauer berücksichtigen.

Warum habe ich KI verwendet, anstatt manuell API-Aufrufe durchzuführen, um Standortdaten abzurufen?

Es bietet mehrere entscheidende Vorteile für unsere Reiseroutenanwendung. Erstens kann die KI-gestützte Reiseroutenerstellung riesige Datenmengen über Reiseziele, Attraktionen und Benutzerpräferenzen viel schneller und effizienter verarbeiten als manuelle Methoden. Zweitens ermöglicht es hochgradig personalisierte Empfehlungen, die sich an die individuellen Interessen und Einschränkungen jedes Benutzers anpassen lassen. Schließlich kann die KI kontinuierlich lernen und ihre Vorschläge basierend auf Benutzerfeedback und Reisetrends verbessern und so sicherstellen, dass unsere Anwendung für Reisende relevant und wertvoll bleibt.

Integration von Flugblattkarten

Leaflet ist eine Open-Source-JavaScript-Bibliothek für mobilfreundliche interaktive Karten. Um Leaflet-Karten in unsere Reiseroutenanwendung zu integrieren, haben wir die folgenden wichtigen Schritte befolgt:

Installierte das Leaflet-Paket und seinen React-Wrapper
Es wurde eine dynamische Kartenkomponente erstellt, um das clientseitige Rendering zu verwalten
Für jeden Aktivitätsort im Reiseplan wurden Markierungen implementiert

Durch die Integration von Leaflet-Karten habe ich das Benutzererlebnis verbessert, indem ich visuellen Kontext für jedes Ziel und jede Aktivität innerhalb der generierten Reiserouten bereitgestellt habe.

Ich hatte auch ein Problem mit der Broschüre, nämlich dass die Kartenkomponente nicht zu 100 % geladen wurde, was zu Fehlern und einem nicht ordnungsgemäßen Laden der Seite führte. Also habe ich dieses Problem mit dieser Lösung gelöst.

Zusätzliche Funktionen:

Credits-basiertes System

Um das Benutzererlebnis zu verbessern und die API-Nutzung zu verwalten, habe ich ein auf Credits basierendes System implementiert. So funktioniert es:

Neue Benutzer erhalten bei der Registrierung 5 kostenlose Credits
Jede Reiseroutengeneration verbraucht 1 Guthaben
Benutzer können bei Bedarf zusätzliche Credits erwerben (In Zukunft implementieren)

Dieses System ermöglicht es uns, die API-Kosten zu kontrollieren und den Benutzern gleichzeitig Flexibilität bei der Nutzung des Dienstes zu bieten.

Armaturenbrett

Das Dashboard bietet Benutzern einen Überblick über ihre generierten Reiserouten, verbleibenden Guthaben und Kontoinformationen. Zu den Hauptmerkmalen gehören:

Eine Liste der letzten Reiserouten.
Anzeige des Guthabens und Möglichkeit, weitere Credits zu erwerben

Benutzerprofil und Einstellungen

Im Abschnitt „Benutzerprofil und Einstellungen“ können Benutzer ihre Erfahrung anpassen und ihre Kontoinformationen verwalten. Zu den Hauptmerkmalen dieses Abschnitts gehören:

Derzeit können Benutzer nur den Benutzernamen aktualisieren
In Zukunft kann ich E-Mail, Passwort und Bild-Upload implementieren.

Qstash

Um die Antwortzeit für die Generierung von Itineray zu erhöhen, habe ich ein Warteschlangensystem implementiert.

Alle nicht kritischen Aufgaben wurden mithilfe der Warteschlange verarbeitet.

Neues Problem ist aufgetreten

Obwohl nach der Generierung von Reiseplänen ein Fehler auftritt, sollte es einen Fallback-Mechanismus geben. Wenn beim Einspeisen von Daten in die Datenbank ein Fehler auftritt, gibt es derzeit keinen Fallback-Mechanismus, der dazu führt, dass die Reiseroute verloren geht, was behoben werden muss.

Im Moment habe ich die RLS-Richtlinien deaktiviert. Werde daran arbeiten

Zukünftige Verbesserungen

Problem:

Die Generierung der Reiserouten nimmt viel Zeit in Anspruch.

Es enthält mehrere Prozesse:

Empfangen von Benutzereinstellungen und Erstellen einer Tabelle in der Datenbank.
Rufen Sie den aktuell angemeldeten Benutzer ab.
Generieren Sie die personalisierte Eingabeaufforderung und senden Sie sie an das Gemini AI Model.
Empfangen der Antwort, Anpassen der Antwort, Analysieren der Antwort in JSON, während ich die JSON-Antwort direkt in der Datenbank speichere.
Der verbleibende Credits-Benutzer wird aktualisiert.
Sende die Antwort zurück.

Lösung:

Durch sorgfältige Analyse der Route kann ich erkennen, dass das Einfügen von Benutzereinstellungen, das Einfügen von Antworten und das Aktualisieren von Credits unkritische Aufgaben sind und das Senden der Antwort an den Benutzer die wichtigste kritische Aufgabe ist.

So kann ich diese nicht kritischen Aufgaben mithilfe einer Warteschlange asynchron ausführen.

Dieser asynchrone Ansatz kann die Reaktionszeit erheblich verkürzen.

Caching

Die Implementierung eines Caching-Mechanismus kann die Leistung und Reaktionszeit unserer Reiseroutenanwendung erheblich verbessern. Durch das Zwischenspeichern häufig aufgerufener Daten, wie z. B. beliebte Ziele oder allgemeine Benutzerpräferenzen, können wir die Belastung unserer Server reduzieren und den Benutzern schnellere Ergebnisse liefern. Dies könnte besonders für wiederkehrende Benutzer von Vorteil sein oder für die Anzeige erster Empfehlungen, während personalisiertere Ergebnisse generiert werden.

Ich werde dies für das Dashboard tun. Ich werde die kürzlich besuchten Reisepläne zwischenspeichern, was die Anzahl der Anfragen an die Datenbank reduziert und die Anwendung letztendlich schneller macht.

Einsatz

Dockerisierte die Anwendung für eine einfache Bereitstellung im AWS Elastic Container Service, was der beste Ansatz für die automatische Skalierung ist.

Derzeit wird es auf Vercel zur Demonutzung bereitgestellt.

Expandieren

Zusätzliche Informationen