Travel 다운로드 - Travel 소스 코드 다운로드

Travel

AI 소스 코드

1.0.0

다운로드

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

배포된 링크: https://travelplanai.vercel.app/

YT 영상: https://youtu.be/oeioDsKQ4cQ?si=U35aBhen3L3zJApq

애플리케이션 아키텍처 및 흐름

위 다이어그램은 애플리케이션, 서비스 및 솔루션에 대한 높은 수준의 개요를 제공합니다.

저는 Next.js, Supabase, Gemini-1.5-flash Model, Shadcn, Typescript 및 Tailwind CSS를 활용했습니다.

https://travel- three-lovat.vercel.app/signup에서 계정을 등록하세요.
기록되고 /Itinerary 페이지로 리디렉션됩니다.
Gemini API의 토큰도 제한되어 있으므로 모든 사용자는 5크레딧을 받습니다.
여행 일정 양식을 작성하고 생성 버튼을 클릭하세요.
몇 초 정도 걸리며 사용자 기본 설정 데이터와 함께 요청이 백엔드로 전송됩니다.
경로 핸들러는 사용자 기본 설정 dB를 생성하고 개인화된 프롬프트를 생성합니다.
프롬프트가 Gemini 모델로 전송되고 응답이 수신됩니다.
응답을 받은 후 정제, 정리 및 JSON으로 구문 분석됩니다.
그런 다음 응답은 데이터베이스에 저장되고 클라이언트로 다시 전송됩니다.
Fronted는 Leaflet Maps API를 사용하여 각 활동의 위치를 표시합니다.
빙고!! 여행 일정은 PDF 또는 TXT 형식으로 다운로드할 수 있습니다.
대시보드로 이동하여 최근 여행 일정을 관리하고 볼 수 있습니다.

스키마 ER다이어그램

구현 세부정보

저는 애플리케이션을 이러한 모듈로 나누었습니다.

인증 및 승인

사용자 인증 및 권한 부여를 위해 Supabase를 사용함
인증 및 데이터 저장소를 위해 Superbase를 사용하는 이유는 무엇입니까?
1. 인증, 스토리지, 데이터베이스가 모두 한곳에 있습니다.
2. Supabase는 PostgreSQL을 기반으로 구축되어 테이블, RLS 정책 및 GRANT 권한을 생성하기 위한 원시 SQL 쿼리를 작성할 수 있는 강력하고 기능이 풍부한 데이터베이스 시스템을 제공합니다.
3. 훌륭한 개발자 경험.
Github
1. Github에서 OAuth 앱을 생성하고 이를 데이터베이스에 통합했습니다.
2. 인증을 위해 코드가 교환되는 auth/callback/route.ts에서 데이터베이스에 새 사용자가 생성됩니다.
신임장
1. 사용자가 계정을 만듭니다.
2. 인증 서비스에서 사용자가 생성됩니다.
3. Supabase의 사용자 테이블에 새 사용자가 추가됩니다.

여정 생성

여기서는 Google gemini-1.5-flash 모델을 사용했습니다.

풀스택 애플리케이션 구축을 위한 Next.js

Next.js는 서버 측 렌더링, 정적 사이트 생성 및 SEO 덕분에 탁월한 선택입니다.

왜 Next.js인가?

API 경로를 사용하면 애플리케이션에 대한 엔드포인트를 매우 쉽게 생성할 수 있습니다.
파일 기반 라우팅은 개발자 경험을 향상시킵니다.
Shadcn 및 Tailwind와 같은 라이브러리는 많은 시간을 절약하고 원활한 UI를 구축합니다.
Node.js에서 얻을 수 없는 추가 구성 없이 최고 수준의 TypeScript 지원
빠르고 쉬운 배포.
서버 측 렌더링, API 경로 및 확장성이 필요한 프로젝트의 경우 Next.js는 강력하고 성능이 뛰어나며 개발자 친화적인 솔루션을 제공합니다. React와의 통합, 내장된 최적화 및 강력한 커뮤니티 지원은 현대 웹 개발을 위한 매력적인 선택입니다.

여행 일정 양식

일정 양식에서 사용자 기본 설정을 받은 후 모든 데이터와 함께 요청이 백엔드로 전송됩니다.

전시 일정

그런 다음 여행 일정은 구성 요소에서 데이터를 표시하는 데 사용됩니다. 나는 또한 전단지의 지도를 통합했습니다.

Gemini-1.5-플래시

Gemini-1.5-flash는 Google이 개발한 고급 AI 모델로, 애플리케이션의 여정 생성을 지원합니다. 이 모델은 복잡한 여행 선호도를 이해하고 상세하고 개인화된 여행 일정을 생성하는 데 탁월합니다. Gemini-1.5-flash를 활용함으로써 예산 제약, 개인적 관심사, 여행 기간 등의 요소를 고려한 고도로 맞춤화된 여행 계획을 세울 수 있습니다.

위치 데이터를 얻기 위해 수동으로 API를 호출하는 대신 AI를 사용한 이유는 무엇입니까?

이는 여행 일정 애플리케이션에 몇 가지 주요 이점을 제공합니다. 첫째, AI 기반 여행 일정 생성은 목적지, 명소, 사용자 선호도에 대한 방대한 양의 데이터를 수동 방법보다 훨씬 빠르고 효율적으로 처리할 수 있습니다. 둘째, 각 사용자의 고유한 관심과 제약에 적응할 수 있는 고도로 개인화된 추천이 가능합니다. 마지막으로 AI는 사용자 피드백과 여행 동향을 기반으로 제안을 지속적으로 학습하고 개선하여 애플리케이션이 여행자에게 관련성과 가치를 유지하도록 보장합니다.

전단지 지도 통합

Leaflet은 모바일 친화적인 대화형 지도를 위한 오픈 소스 JavaScript 라이브러리입니다. Leaflet 지도를 여행 일정 애플리케이션에 통합하기 위해 다음과 같은 주요 단계를 따랐습니다.

Leaflet 패키지와 해당 React 래퍼를 설치했습니다.
클라이언트 측 렌더링을 처리하기 위해 동적 지도 구성 요소를 만들었습니다.
여행 일정의 각 활동 위치에 대한 마커 구현

전단지 지도를 통합함으로써 생성된 여행 일정 내 각 목적지와 활동에 대한 시각적 컨텍스트를 제공함으로써 사용자 경험을 향상시켰습니다.

또한 지도 구성 요소가 100% 로드되지 않아 오류가 발생하고 페이지가 제대로 로드되지 않는 전단지 문제에 직면했습니다. 그래서 저는 이 솔루션으로 이 문제를 해결했습니다.

추가 기능:

학점 기반 시스템

사용자 경험을 향상하고 API 사용을 관리하기 위해 크레딧 기반 시스템을 구현했습니다. 작동 방식은 다음과 같습니다.

신규 사용자는 등록 시 5개의 무료 크레딧을 받습니다.
각 여정 세대는 1크레딧을 소비합니다.
사용자는 필요에 따라 추가 크레딧을 구매할 수 있습니다(향후 구현).

이 시스템을 통해 당사는 API 비용을 제어하는 동시에 사용자에게 서비스 사용에 유연성을 제공할 수 있습니다.

계기반

대시보드는 사용자에게 생성된 여행 일정, 남은 크레딧 및 계정 정보에 대한 개요를 제공합니다. 주요 기능은 다음과 같습니다:

최근 여행 일정 목록입니다.
크레딧 잔액 표시 및 추가 크레딧 구매 옵션

사용자 프로필 및 설정

사용자 프로필 및 설정 섹션에서는 사용자가 자신의 경험을 맞춤화하고 계정 정보를 관리할 수 있습니다. 이 섹션의 주요 기능은 다음과 같습니다.

현재 사용자는 사용자 이름만 업데이트할 수 있습니다.
앞으로는 이메일, 비밀번호, 이미지 업로드를 구현할 수 있습니다.

Qstash

Itineray 생성에 대한 응답 시간을 늘리기 위해 대기열 시스템을 구현했습니다.

대기열을 사용하여 중요하지 않은 모든 작업을 처리했습니다.

새로운 문제가 발생했습니다.

일정을 생성한 후 오류가 발생하는 경우 대체 메커니즘이 있어야 합니다. 현재 데이터베이스에 데이터를 공급하는 중에 오류가 발생하는 경우 일정이 손실되어 수정해야 하는 대체 메커니즘이 없습니다.

지금은 RLS 정책을 비활성화했습니다. 이 작업을 수행합니다.

향후 개선 사항

문제:

여행 생성 경로는 여행 일정을 생성하는 데 많은 시간이 소요됩니다.

여기에는 여러 프로세스가 포함되어 있습니다.

사용자 기본 설정을 수신하고 데이터베이스에 테이블을 생성합니다.
현재 로그인된 사용자를 가져옵니다.
개인화된 프롬프트를 생성하여 Gemini AI 모델로 보냅니다.
응답을 수신하고 조정하여 응답 JSON을 데이터베이스에 직접 저장하므로 응답을 JSON으로 구문 분석합니다.
사용자가 남긴 크레딧을 업데이트하는 중입니다.
응답을 다시 보냅니다.

해결책:

경로를 주의 깊게 분석함으로써 사용자 기본 설정 삽입, 응답 삽입 및 크레딧 업데이트는 중요하지 않은 작업이고 사용자에게 응답을 보내는 것이 주요 중요한 작업임을 알 수 있습니다.

따라서 대기열을 사용하여 중요하지 않은 작업을 비동기식으로 수행할 수 있습니다.

이 비동기식 접근 방식은 응답 시간을 많이 줄일 수 있습니다.

캐싱

캐싱 메커니즘을 구현하면 여행 일정 애플리케이션의 성능과 응답 시간을 크게 향상시킬 수 있습니다. 인기 있는 목적지나 일반적인 사용자 선호도 등 자주 액세스하는 데이터를 캐싱함으로써 서버의 로드를 줄이고 사용자에게 더 빠른 결과를 제공할 수 있습니다. 이는 반복 사용자에게 특히 유용할 수 있으며 보다 개인화된 결과가 생성되는 동안 초기 권장 사항을 표시하는 데 유용할 수 있습니다.

대시보드에 대해 이 작업을 수행하겠습니다. 최근 방문한 여행 일정을 캐시하여 데이터베이스에 대한 요청 수를 줄여 결과적으로 애플리케이션을 더 빠르게 만들 것입니다.