Descarga Travel - Descarga del código fuente Travel

Travel

Código Fuente de IA

1.0.0

Descargar

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

Enlace implementado: https://travelplanai.vercel.app/

Vídeo de YouTube: https://youtu.be/oeioDsKQ4cQ?si=U35aBhen3L3zJApq

Arquitectura y flujo de aplicaciones

El diagrama anterior ofrece una descripción general de alto nivel de la aplicación, los servicios y las soluciones.

He aprovechado Next.js, Supabase, Gemini-1.5-flash Model, Shadcn, Typescript y Tailwind CSS.

Registre su cuenta en https://travel-tres-lovat.vercel.app/signup
Se le iniciará sesión y se le redirigirá a la página /Itinerario.
Cada usuario recibe 5 créditos ya que también tengo tokens limitados de la API de Gemini.
Complete el formulario de Itinerario de viaje y haga clic en el botón Generar.
Pasarán unos segundos, se envía una solicitud al Backend con los datos de Preferencias del usuario.
El controlador de ruta crea las preferencias del usuario dB, crea un mensaje personalizado.
El mensaje se envía al modelo Gemini y se recibe la respuesta.
Después de recibir la respuesta, se refina, limpia y analiza en JSON.
Luego, la respuesta se almacena en la base de datos y se envía de vuelta al Cliente.
Fronted utiliza la API de Leaflet Maps para mostrar la ubicación de cada actividad.
¡¡Bingo!! El itinerario de viaje está listo para descargarse en formato PDF o TXT.
Puede ir al Panel para administrar y ver itinerarios recientes.

Esquema ERDiagrama

Detalles de implementación

He dividido la Aplicación en estos Módulos.

Autenticación y autorización

Supabase usado para autenticar y autorizar usuarios
¿Por qué Supabase para autenticación y almacenamiento de datos?
1. Todo en un solo lugar, autenticación, almacenamiento, base de datos.
2. Supabase está construido sobre PostgreSQL y ofrece un sistema de base de datos robusto y rico en funciones, que permitió escribir consultas SQL sin procesar para crear tablas, políticas RLS y permisos GRANT.
3. Gran experiencia de desarrollador.
Github
1. Creé una aplicación OAuth en Github y la integré en la base de datos.
2. En auth/callback/route.ts donde se intercambia el código para la autenticación, se crea un nuevo usuario en la base de datos.
Cartas credenciales
1. El usuario crea una cuenta.
2. Se crea un usuario en el servicio de autenticación.
3. Se agrega un nuevo usuario a la tabla Usuarios en Supabase.

Generación de itinerario

Aquí hemos utilizado el modelo Google gemini-1.5-flash.

Next.js para crear aplicaciones de pila completa.

Next.js es una excelente opción debido a la renderización del lado del servidor, la generación de sitios estáticos y el SEO.

¿Por qué Next.js?

API Routes facilitó la creación de puntos finales para la aplicación.
El enrutamiento basado en archivos aumenta la experiencia del desarrollador.
Bibliotecas como Shadcn y Tailwind ahorran mucho tiempo y crean una interfaz de usuario perfecta.
Compatibilidad con TypeScript de primera clase sin configuración adicional que no obtenemos en Node.js
Implementación rápida y sencilla.
Para un proyecto que requiere renderizado del lado del servidor, rutas API y escalabilidad, Next.js proporciona una solución sólida, eficaz y fácil de usar para los desarrolladores. Su integración con React, sus optimizaciones integradas y su sólido apoyo comunitario lo convierten en una opción atractiva para el desarrollo web moderno.

Formulario de itinerario de viaje

Después de recibir las Preferencias de Usuario del Formulario de Itinerario se envía una solicitud al Backend con todos los datos.

Mostrar itinerario

Luego, el itinerario se utiliza en los Componentes para mostrar los datos. También he integrado mapas del folleto.

Géminis-1.5-flash

Gemini-1.5-flash es un modelo de IA avanzado desarrollado por Google que impulsa la generación de itinerarios en nuestra aplicación. Este modelo destaca por comprender preferencias de viaje complejas y generar itinerarios detallados y personalizados. Al aprovechar Gemini-1.5-flash, podemos crear planes de viaje altamente personalizados que consideran factores como restricciones presupuestarias, intereses personales y duración del viaje.

¿Por qué utilicé IA en lugar de realizar llamadas API manualmente para obtener datos de ubicaciones?

Ofrece varias ventajas clave para nuestra aplicación de itinerarios de viaje. En primer lugar, la generación de itinerarios impulsada por IA puede procesar grandes cantidades de datos sobre destinos, atracciones y preferencias de los usuarios mucho más rápido y eficientemente que los métodos manuales. En segundo lugar, permite recomendaciones altamente personalizadas que pueden adaptarse a los intereses y limitaciones únicos de cada usuario. Por último, la IA puede aprender y mejorar continuamente sus sugerencias basándose en los comentarios de los usuarios y las tendencias de viajes, lo que garantiza que nuestra aplicación siga siendo relevante y valiosa para los viajeros.

Integración de mapas de folletos

Leaflet es una biblioteca JavaScript de código abierto para mapas interactivos aptos para dispositivos móviles. Para integrar mapas de Leaflet en nuestra aplicación de itinerarios de viaje, seguimos estos pasos clave:

Instalé el paquete Leaflet y su contenedor React.
Creó un componente de mapa dinámico para manejar la representación del lado del cliente.
Marcadores implementados para cada ubicación de actividad en el itinerario.

Al incorporar mapas de Folletos, mejoré la experiencia del usuario al proporcionar contexto visual para cada destino y actividad dentro de los itinerarios generados.

También tuve un problema con el folleto: el componente Mapa no se cargaba al 100%, lo que provocaba errores y la página no se cargaba correctamente. Entonces abordé este problema con esta solución.

Características adicionales:

Sistema basado en créditos

Para mejorar la experiencia del usuario y gestionar el uso de API, implementé un sistema basado en créditos. Así es como funciona:

Los nuevos usuarios reciben 5 créditos gratis al registrarse
Cada generación de itinerario consume 1 crédito.
Los usuarios pueden comprar créditos adicionales según sea necesario (implementar en el futuro)

Este sistema nos permite controlar los costos de API y al mismo tiempo brinda a los usuarios flexibilidad en el uso del servicio.

Panel

El Panel proporciona a los usuarios una descripción general de sus itinerarios generados, créditos restantes e información de la cuenta. Las características clave incluyen:

Una lista de itinerarios recientes.
Visualización del saldo de crédito y opción para comprar más créditos.

Perfil de usuario y configuración

La sección Configuración y perfil de usuario permite a los usuarios personalizar su experiencia y administrar la información de su cuenta. Las características clave de esta sección incluyen:

Actualmente los usuarios solo pueden actualizar el nombre de usuario
En el futuro podré implementar correo electrónico, contraseña y carga de imágenes.

Qstash

Para aumentar el tiempo de respuesta para generar Itineray, implementé un sistema de colas.

Procesé todas las tareas no críticas usando la cola.

Ocurrió un nuevo problema

Si bien hay un error después de generar itinerarios, debería haber un mecanismo alternativo. En este momento, si hay algún error al introducir datos en la base de datos, no existe un mecanismo alternativo por el cual se pierda el itinerario y deba corregirse.

Por ahora he desactivado las políticas RLS. Trabajará en esto

Mejoras futuras

Problema:

La ruta de generación de viajes está tomando mucho tiempo para generar los itinerarios.

Contiene varios procesos:

Recibir preferencias del usuario y crear una tabla en la base de datos.
Obtenga el usuario que ha iniciado sesión actualmente.
Generar el mensaje personalizado y enviarlo al modelo Gemini AI.
Recibir la respuesta, adaptarla, analizar la respuesta en JSON mientras almaceno la respuesta JSON directamente en la base de datos.
Actualizando los créditos que le quedan al usuario.
Devolviendo la respuesta.

Solución:

Al analizar la ruta cuidadosamente, puedo distinguir que Insertar preferencias de usuario, Insertar respuesta y Actualizar créditos no son tareas críticas y enviar la respuesta al usuario es la principal tarea crítica.

Entonces puedo realizar estas tareas no críticas de forma asincrónica mediante el uso de una cola.

Este enfoque asincrónico puede reducir mucho el tiempo de respuesta.

Almacenamiento en caché

La implementación de un mecanismo de almacenamiento en caché puede mejorar significativamente el rendimiento y el tiempo de respuesta de nuestra aplicación de itinerario de viaje. Al almacenar en caché los datos a los que se accede con frecuencia, como destinos populares o preferencias comunes de los usuarios, podemos reducir la carga en nuestros servidores y brindar resultados más rápidos a los usuarios. Esto podría resultar especialmente beneficioso para usuarios habituales o para mostrar recomendaciones iniciales mientras se generan resultados más personalizados.

Haré esto para el Panel de control, almacenaré en caché los itinerarios de viaje visitados recientemente, lo que reducirá la cantidad de solicitudes a la base de datos y eventualmente hará que la aplicación sea más rápida.