Travel
1.0.0
Github : https://github.com/mohdjami/Travel
Lien déployé : https://travelplanai.vercel.app/
Vidéo YouTube : https://youtu.be/oeioDsKQ4cQ?si=U35aBhen3L3zJApq
Le diagramme ci-dessus donne un aperçu de haut niveau de l’application, des services et des solutions.
J'ai exploité Next.js, Supabase, Gemini-1.5-flash Model, Shadcn, Typescript et Tailwind CSS.
Supabase utilisé pour authentifier et autoriser les utilisateurs
Pourquoi Supabase pour l'authentification et le stockage de données ?
GitHub
Informations d'identification
Ici, nous avons utilisé le modèle Google gemini-1.5-flash.
Next.js pour créer une application full stack.
Next.js est un excellent choix en raison du rendu côté serveur, de la génération de sites statiques et du référencement.
Après avoir reçu les préférences utilisateur du formulaire d'itinéraire, une demande est envoyée au backend avec toutes les données.
L'itinéraire est ensuite utilisé dans les composants pour afficher les données. J'ai également intégré des cartes du dépliant.
Gemini-1.5-flash est un modèle d'IA avancé développé par Google qui alimente la génération d'itinéraires dans notre application. Ce modèle excelle dans la compréhension des préférences de voyage complexes et dans la génération d'itinéraires détaillés et personnalisés. En tirant parti de Gemini-1.5-flash, nous sommes en mesure de créer des plans de voyage hautement personnalisés qui tiennent compte de facteurs tels que les contraintes budgétaires, les intérêts personnels et la durée du voyage.
Il offre plusieurs avantages clés pour notre application d’itinéraire de voyage. Premièrement, la génération d’itinéraires basée sur l’IA peut traiter de grandes quantités de données sur les destinations, les attractions et les préférences des utilisateurs beaucoup plus rapidement et efficacement que les méthodes manuelles. Deuxièmement, il permet des recommandations hautement personnalisées qui peuvent s'adapter aux intérêts et contraintes uniques de chaque utilisateur. Enfin, l'IA peut continuellement apprendre et améliorer ses suggestions en fonction des commentaires des utilisateurs et des tendances de voyage, garantissant ainsi que notre application reste pertinente et précieuse pour les voyageurs.
Leaflet est une bibliothèque JavaScript open source pour les cartes interactives adaptées aux mobiles. Pour intégrer les cartes Leaflet dans notre application d'itinéraire de voyage, nous avons suivi ces étapes clés :
En incorporant les cartes Leaflet, j'ai amélioré l'expérience utilisateur en fournissant un contexte visuel pour chaque destination et activité dans les itinéraires générés.
J'ai également rencontré un problème avec le dépliant : le composant Map ne se chargeait pas à 100 %, ce qui entraînait des erreurs et un chargement incorrect de la page. J'ai donc résolu ce problème avec cette solution.
Pour améliorer l'expérience utilisateur et gérer l'utilisation des API, j'ai mis en place un système basé sur les crédits. Voici comment cela fonctionne :
Ce système nous permet de contrôler les coûts des API tout en offrant aux utilisateurs une flexibilité dans l'utilisation du service.
Le tableau de bord fournit aux utilisateurs un aperçu de leurs itinéraires générés, des crédits restants et des informations de compte. Les principales fonctionnalités incluent :
La section Profil utilisateur et paramètres permet aux utilisateurs de personnaliser leur expérience et de gérer les informations de leur compte. Les principales caractéristiques de cette section comprennent :
Pour augmenter le temps de réponse pour générer Itineray, j'ai implémenté un système de file d'attente.
Traitement de toutes les tâches non critiques à l'aide de la file d'attente.
Même s'il y a une erreur après la génération des itinéraires, il devrait y avoir un mécanisme de secours. À l'heure actuelle, s'il y a une erreur lors de l'alimentation des données dans la base de données, il n'existe aucun mécanisme de secours en raison duquel l'itinéraire est perdu et doit être corrigé.
Pour l'instant, j'ai désactivé les politiques RLS. Je vais travailler là-dessus
Problème:
L'itinéraire de génération de voyages prend beaucoup de temps pour générer les itinéraires.
Il contient plusieurs processus :
Solution:
En analysant attentivement l'itinéraire, je peux comprendre que l'insertion des préférences utilisateur, l'insertion de la réponse et la mise à jour des crédits ne sont pas des tâches critiques et que l'envoi de la réponse à l'utilisateur est la principale tâche critique.
Je peux donc effectuer ces tâches non critiques de manière asynchrone en utilisant une file d'attente.
Cette approche asynchrone peut réduire considérablement le temps de réponse.
La mise en œuvre d'un mécanisme de mise en cache peut améliorer considérablement les performances et le temps de réponse de notre application d'itinéraire de voyage. En mettant en cache les données fréquemment consultées, telles que les destinations populaires ou les préférences courantes des utilisateurs, nous pouvons réduire la charge sur nos serveurs et fournir des résultats plus rapides aux utilisateurs. Cela pourrait être particulièrement bénéfique pour les utilisateurs réguliers ou pour afficher les recommandations initiales pendant que des résultats plus personnalisés sont générés.
Je ferai cela pour le tableau de bord, je mettrai en cache les itinéraires de voyage récemment visités, ce qui réduira le nombre de requêtes à la base de données, rendant finalement l'application plus rapide.
Dockerisé l'application pour un déploiement facile sur AWS Elastic Container Service, ce qui constitue la meilleure approche pour la mise à l'échelle automatique.
Actuellement, il est déployé sur Vercel pour une utilisation démo.
