Github:https://github.com/mohdjami/Travel
部署链接:https://travelplanai.vercel.app/
YouTube 视频:https://youtu.be/oeioDsKQ4cQ?si=U35aBhen3L3zJApq
上图给出了应用程序、服务和解决方案的高级概述。
我利用了 Next.js、Supabase、Gemini-1.5-flash Model、Shadcn、Typescript 和 Tailwind CSS。
使用 Supabase 对用户进行身份验证和授权
为什么使用 Supabase 进行身份验证和数据存储?
吉图布
证书
这里我们使用了 Google gemini-1.5-flash 模型。
Next.js 用于构建全栈应用程序。
由于服务器端渲染、静态站点生成和 SEO,Next.js 是一个绝佳的选择。
从行程表中收到用户首选项后,请求将连同所有数据发送到后端。
然后在组件中使用行程来显示数据。我还整合了传单中的地图。
Gemini-1.5-flash 是 Google 开发的先进人工智能模型,为我们应用程序中的行程生成提供支持。该模型擅长理解复杂的旅行偏好并生成详细的个性化行程。通过利用 Gemini-1.5-flash,我们能够创建高度定制的旅行计划,并考虑预算限制、个人兴趣和旅行持续时间等因素。
它为我们的旅行行程应用程序提供了几个关键优势。首先,人工智能驱动的行程生成可以比手动方法更快、更高效地处理有关目的地、景点和用户偏好的大量数据。其次,它允许高度个性化的推荐,可以适应每个用户的独特兴趣和限制。最后,人工智能可以根据用户反馈和旅行趋势不断学习和改进其建议,确保我们的应用程序对旅行者保持相关性和价值。
Leaflet 是一个开源 JavaScript 库,用于移动友好的交互式地图。为了将 Leaflet 地图集成到我们的旅行行程应用程序中,我们遵循了以下关键步骤:
通过合并传单地图,我为生成的行程中的每个目的地和活动提供视觉背景,从而增强了用户体验。
我还遇到了传单的问题,即地图组件未加载 100%,导致错误和页面无法正确加载。所以我用这个解决方案解决了这个问题。
为了增强用户体验并管理 API 使用,我实施了一个基于积分的系统。它的工作原理如下:
该系统使我们能够控制 API 成本,同时为用户提供使用服务的灵活性。
仪表板为用户提供了生成的行程、剩余积分和帐户信息的概览。主要特点包括:
用户配置文件和设置部分允许用户自定义他们的体验并管理他们的帐户信息。本节的主要特点包括:
为了增加生成 Itineray 的响应时间,我实现了一个队列系统。
使用队列处理所有非关键任务。
虽然生成行程后出现错误,但应该有一个回退机制。现在,如果数据库中输入数据有任何错误,则没有后备机制,因此行程会丢失,需要修复。
目前我已禁用 RLS 策略。将致力于此
问题:
旅行生成路线需要花费大量时间来生成行程。
它包含几个过程:
解决方案:
通过仔细分析该路线,我可以看出插入用户首选项、插入响应和更新积分不是关键任务,而将响应发送给用户是主要的关键任务。
因此,我可以使用队列异步执行这些非关键任务。
这种异步方法可以减少很多响应时间。
实施缓存机制可以显着提高我们的旅行行程应用程序的性能和响应时间。通过缓存经常访问的数据(例如热门目的地或常见用户偏好),我们可以减少服务器的负载并为用户提供更快的结果。这对于重复用户或在生成更个性化的结果时显示初始推荐特别有益。
我将为仪表板执行此操作,我将缓存最近访问的旅行行程,这将减少对数据库的请求数量,最终使应用程序更快。
对应用程序进行 Docker 化,以便在 AWS Elastic Container Service 上轻松部署,这是自动扩展的最佳方法。
目前它部署在 Vercel 上用于演示使用。