Download Travel - Download do código-fonte Travel

Travel

Código-Fonte de IA

1.0.0

Baixar

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

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

Vídeo do YT: https://youtu.be/oeioDsKQ4cQ?si=U35aBhen3L3zJApq

Arquitetura e fluxo de aplicativos

O diagrama acima fornece uma visão geral de alto nível do aplicativo, serviços e soluções.

Utilizei Next.js, Supabase, Gemini-1.5-flash Model, Shadcn, Typescript e Tailwind CSS.

Registre sua conta em https://travel-três-lovat.vercel.app/signup
Você será logado e redirecionado para a página /Itinerário.
Cada usuário recebe 5 créditos, pois também tenho tokens limitados da API Gemini.
Preencha o formulário Itinerário de Viagem e clique no botão Gerar.
Demorará alguns segundos, uma solicitação será enviada ao Backend com os dados de preferências do usuário.
O manipulador Route cria as preferências do usuário em dB, cria um prompt personalizado.
O prompt é enviado ao modelo Gemini e a resposta é recebida.
Após receber a resposta ela é refinada, limpa e analisada para JSON.
A resposta é então armazenada no banco de dados e enviada de volta ao Cliente.
O Fronted usa a API Leaflet Maps para exibir a localização de cada atividade.
Bingo!! O Itinerário de Viagem está pronto para ser baixado em formato PDF ou TXT.
Você pode acessar o Painel para gerenciar e visualizar itinerários recentes.

Esquema ER Diagrama

Detalhes de implementação

Dividi o aplicativo nesses módulos.

Autenticação e Autorização

Supabase usado para autenticar e autorizar usuários
Por que Supabase para autenticação e armazenamento de dados?
1. Tudo em um só lugar, autenticação, armazenamento, banco de dados.
2. Supabase é construído sobre PostgreSQL, oferecendo um sistema de banco de dados robusto e rico em recursos, que permite escrever consultas SQL brutas para criar tabelas, políticas RLS e permissões GRANT.
3. Ótima experiência de desenvolvedor.
GitHub
1. Criei um aplicativo OAuth no Github e integrei-o no banco de dados.
2. No auth/callback/route.ts onde o código é trocado para autenticação um novo usuário é criado no Banco de Dados.
Credenciais
1. O usuário cria uma conta.
2. Um usuário é criado no serviço de autenticação.
3. Um novo usuário é adicionado à tabela Usuários no Supabase.

Geração de Itinerário

Aqui usamos o modelo Google gemini-1.5-flash.

Next.js para construir um aplicativo full stack.

Next.js é uma excelente escolha devido à renderização do lado do servidor, geração de sites estáticos e SEO.

Por que Next.js?

As API Routes facilitaram muito a criação de endpoints para o aplicativo.
O roteamento baseado em arquivo aumenta a experiência do desenvolvedor.
Bibliotecas como Shadcn e Tailwind economizam muito tempo e criam uma interface de usuário perfeita.
Suporte TypeScript de primeira classe sem configuração adicional que não obtemos em Node.js
Implantação rápida e fácil.
Para um projeto que requer renderização no lado do servidor, rotas de API e escalabilidade, Next.js fornece uma solução robusta, de alto desempenho e amigável ao desenvolvedor. Sua integração com React, otimizações integradas e forte suporte da comunidade o tornam uma escolha atraente para o desenvolvimento web moderno.

Formulário de Itinerário de Viagem

Após receber as Preferências do Usuário do Formulário de Itinerário uma solicitação é enviada ao Backend com todos os dados.

Exibir itinerário

O itinerário é então usado nos Componentes para exibir os dados. Também integrei mapas do folheto.

Gêmeos-1.5-flash

Gemini-1.5-flash é um modelo avançado de IA desenvolvido pelo Google que potencializa a geração de itinerários em nosso aplicativo. Este modelo é excelente na compreensão de preferências de viagem complexas e na geração de itinerários detalhados e personalizados. Ao aproveitar o Gemini-1.5-flash, somos capazes de criar planos de viagem altamente personalizados que consideram fatores como restrições orçamentárias, interesses pessoais e duração da viagem.

Por que usei IA em vez de fazer chamadas de API manualmente para obter dados de localização?

Ele oferece várias vantagens importantes para nosso aplicativo de itinerário de viagem. Em primeiro lugar, a geração de itinerários com tecnologia de IA pode processar grandes quantidades de dados sobre destinos, atrações e preferências do usuário com muito mais rapidez e eficiência do que os métodos manuais. Em segundo lugar, permite recomendações altamente personalizadas que se podem adaptar aos interesses e restrições únicos de cada utilizador. Por último, a IA pode aprender e melhorar continuamente as suas sugestões com base no feedback dos utilizadores e nas tendências de viagens, garantindo que a nossa aplicação permanece relevante e valiosa para os viajantes.

Integração de mapas de folhetos

Leaflet é uma biblioteca JavaScript de código aberto para mapas interativos compatíveis com dispositivos móveis. Para integrar os mapas Leaflet em nosso aplicativo de itinerário de viagem, seguimos estas etapas principais:

Instalou o pacote Leaflet e seu wrapper React
Criado um componente de mapa dinâmico para lidar com a renderização do lado do cliente
Marcadores implementados para cada local de atividade no itinerário

Ao incorporar mapas Leaflet, melhorei a experiência do usuário, fornecendo contexto visual para cada destino e atividade dentro dos itinerários gerados.

Também enfrentei um problema com o folheto: o componente Mapa não carregava 100%, causando erros e a página não carregando corretamente. Então resolvi esse problema com esta solução.

Recursos adicionais:

Sistema Baseado em Créditos

Para aprimorar a experiência do usuário e gerenciar o uso da API, implementei um sistema baseado em créditos. Veja como funciona:

Novos usuários recebem 5 créditos grátis no registro
Cada geração de itinerário consome 1 crédito
Os usuários podem adquirir créditos adicionais conforme necessário (implementar no futuro)

Este sistema nos permite controlar os custos da API e, ao mesmo tempo, proporcionar aos usuários flexibilidade na utilização do serviço.

Painel

O Painel fornece aos usuários uma visão geral dos itinerários gerados, créditos restantes e informações da conta. Os principais recursos incluem:

Uma lista de itinerários recentes.
Exibição do saldo de créditos e opção de compra de mais créditos

Perfil de usuário e configurações

A seção Perfil e configurações do usuário permite que os usuários personalizem sua experiência e gerenciem as informações da conta. Os principais recursos desta seção incluem:

Atualmente os usuários só podem atualizar o nome de usuário
Futuramente poderei implementar email, senha e upload de imagens.

Qstash

Para aumentar o tempo de resposta para geração do Itineray, implementei um sistema de filas.

Processou todas as tarefas não críticas usando fila.

Novo problema ocorrido

Embora haja um erro após a geração dos itinerários, deve haver um mecanismo alternativo. No momento, se houver algum erro ao alimentar dados no banco de dados, não há mecanismo de fallback devido à perda do itinerário que precisa ser corrigido.

Por enquanto desativei as políticas RLS. Irá trabalhar nisso

Melhorias Futuras

Problema:

A rota de geração de viagens está demorando muito para gerar os itinerários.

Ele contém vários processos:

Recebendo preferências do usuário e criando uma tabela no banco de dados.
Obtenha o usuário logado atual.
Gerando o prompt personalizado e enviando-o para o modelo Gemini AI.
Recebendo a resposta, adaptando-a, analise a resposta em JSON enquanto estou armazenando a resposta JSON diretamente no banco de dados.
Atualizando os créditos restantes do usuário.
Enviando de volta a resposta.

Solução:

Analisando a rota com atenção, posso perceber que Inserir Preferências do Usuário, Inserir Resposta e Atualizar Créditos são tarefas não críticas e enviar a resposta ao usuário é a principal tarefa crítica.

Assim, posso executar essas tarefas não críticas de forma assíncrona, usando uma fila.

Essa abordagem assíncrona pode diminuir muito o tempo de resposta.

Cache

A implementação de um mecanismo de cache pode melhorar significativamente o desempenho e o tempo de resposta do nosso aplicativo de itinerário de viagem. Ao armazenar em cache dados acessados com frequência, como destinos populares ou preferências comuns do usuário, podemos reduzir a carga em nossos servidores e fornecer resultados mais rápidos aos usuários. Isto pode ser particularmente benéfico para usuários recorrentes ou para exibir recomendações iniciais enquanto resultados mais personalizados estão sendo gerados.

Farei isso para o Dashboard, armazenarei em cache os itinerários de viagem visitados recentemente, o que reduzirá o número de solicitações ao banco de dados, tornando o aplicativo mais rápido.