Travel

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

導入されたリンク: https://travelplannai.vercel.app/

YouTube ビデオ: https://youtu.be/oeioDsKQ4cQ?si=U35aBhen3L3zJApq

---

アプリケーションのアーキテクチャとフロー

---

---

上の図は、アプリケーション、サービス、ソリューションの概要を示しています。

私は Next.js、Supabase、Gemini-1.5-flash Model、Shadcn、Typescript、Tailwind CSS を活用しました。

1. https://travel-three-lovat.vercel.app/signup でアカウントを登録してください
2. ログが記録され、/Itinerary ページにリダイレクトされます。
3. Gemini API からのトークンも限られているため、すべてのユーザーは 5 クレジットを受け取ります。
4. 旅行旅程フォームに記入し、「生成」ボタンをクリックします。
5. 数秒かかります。リクエストがユーザー設定データとともにバックエンドに送信されます。
6. Route ハンドラーはユーザー設定 dB を作成し、パーソナライズされたプロンプトを作成します。
7. プロンプトが Gemini モデルに送信され、応答が受信されます。
8. 応答を受信した後、それは調整され、クリーンアップされ、JSON に解析されます。
9. その後、応答はデータベースに保存され、クライアントに送り返されます。
10. Fronted は Leaflet Maps API を使用して各アクティビティの場所を表示します。
11. ビンゴ！！旅行旅程は PDF または TXT 形式でダウンロードできます。
12. ダッシュボードに移動して、最近の旅程を管理および表示できます。

スキーマERD図

---

実装の詳細

---

アプリケーションをこれらのモジュールに分割しました。

認証と認可

---

• ユーザーの認証と認可に Supabase を使用

  認証とデータ ストアに Supabase を使用する理由

  1. 認証、ストレージ、データベースをすべて 1 か所で。
  2. Supabase は PostgreSQL 上に構築されており、堅牢で機能豊富なデータベース システムを提供します。これにより、テーブル、RLS ポリシー、および GRANT 権限を作成するための生の SQL クエリを作成できるようになります。
  3. 素晴らしい開発者エクスペリエンス。

• ギットハブ

  1. Github で OAuth アプリを作成し、データベースに統合しました。
  2. 認証のためにコードが交換される auth/callback/route.ts では、データベースに新しいユーザーが作成されます。

• 資格

  1. ユーザーがアカウントを作成します。
  2. ユーザーは認証サービスで作成されます。
  3. 新しいユーザーが Supabase の Users テーブルに追加されます。

旅程の生成

---

ここでは Google gemini-1.5-flash モデルを使用しました。

フルスタック アプリケーションを構築するための Next.js。

Next.js は、サーバーサイド レンダリング、静的サイト生成、SEO の点で優れた選択肢です。

なぜ Next.js なのか?

---

• API ルートにより、アプリケーションのエンドポイントを非常に簡単に作成できるようになりました。
• ファイルベースのルーティングにより、開発者のエクスペリエンスが向上します。
• Shadcn や Tailwind などのライブラリを使用すると、時間を大幅に節約し、シームレスな UI を構築できます。
• Node.js では得られない、追加の構成を必要としないファーストクラスの TypeScript サポート
• 迅速かつ簡単な導入。
• サーバー側のレンダリング、API ルート、およびスケーラビリティを必要とするプロジェクトに対して、Next.js は堅牢でパフォーマンスの高い、開発者に優しいソリューションを提供します。 React との統合、組み込みの最適化、強力なコミュニティ サポートにより、最新の Web 開発にとって魅力的な選択肢となっています。

旅行旅程フォーム

---

旅程フォームからユーザー設定を受信した後、リクエストがすべてのデータとともにバックエンドに送信されます。

旅程を表示

---

次に、旅程はデータを表示するためにコンポーネントで使用されます。チラシの地図も統合しました。

Gemini-1.5-フラッシュ

---

Gemini-1.5-flash は、Google が開発した高度な AI モデルで、アプリケーションでの旅程生成を強化します。このモデルは、複雑な旅行の好みを理解し、詳細でパーソナライズされた旅程を生成することに優れています。 Gemini-1.5 フラッシュを活用することで、予算の制約、個人的な興味、旅行期間などの要素を考慮した、高度にカスタマイズされた旅行計画を作成できます。

位置データを取得するために手動で API 呼び出しを行うのではなく、AI を使用したのはなぜですか?

---

これは、旅行旅程アプリケーションにいくつかの重要な利点をもたらします。まず、AI を活用した旅程生成は、目的地、観光スポット、ユーザーの好みに関する膨大な量のデータを手動による方法よりもはるかに高速かつ効率的に処理できます。第 2 に、各ユーザー固有の興味や制約に適応できる、高度にパーソナライズされた推奨事項が可能になります。最後に、AI はユーザーからのフィードバックや旅行傾向に基づいて提案を継続的に学習および改善できるため、アプリケーションが旅行者にとって関連性があり価値のあるものであり続けることが保証されます。

リーフレットマップの統合

---

Leaflet は、モバイル対応のインタラクティブ マップ用のオープンソース JavaScript ライブラリです。 Leaflet マップを旅行旅程アプリケーションに統合するには、次の重要な手順に従いました。

• Leaflet パッケージとその React ラッパーをインストールしました
• クライアント側のレンダリングを処理する動的 Map コンポーネントを作成しました
• 旅程内の各アクティビティの場所にマーカーを実装

リーフレット マップを組み込むことで、生成された旅程内の各目的地とアクティビティに視覚的なコンテキストを提供することで、ユーザー エクスペリエンスを向上させました。

また、マップコンポーネントが100％読み込まれず、エラーが発生し、ページが正しく読み込まれないというリーフレットの問題にも直面しました。そこで私はこの解決策でこの問題に取り組みました。

追加機能:

クレジットベースのシステム

---

ユーザー エクスペリエンスを向上させ、API の使用を管理するために、クレジット ベースのシステムを実装しました。仕組みは次のとおりです。

• 新規ユーザーは登録時に 5 つの無料クレジットを受け取ります
• 旅程を生成するたびに 1 クレジットが消費されます
• ユーザーは必要に応じて追加のクレジットを購入できます（将来実装予定）

このシステムにより、ユーザーが柔軟にサービスを利用できるようにしながら、API コストを管理することができます。

ダッシュボード

---

ダッシュボードは、生成された旅程、残りのクレジット、アカウント情報の概要をユーザーに提供します。主な機能は次のとおりです。

• 最近の旅程のリスト。
• クレジット残高の表示と追加のクレジットを購入するオプション

ユーザープロファイルと設定

---

[ユーザー プロファイルと設定] セクションでは、ユーザーはエクスペリエンスをカスタマイズし、アカウント情報を管理できます。このセクションの主な特徴は次のとおりです。

• 現在、ユーザーはユーザー名のみを更新できます
• 将来的には、電子メール、パスワード、画像のアップロードを実装できるようになります。

キュースタッシュ

Itineray 生成の応答時間を短縮するために、キュー システムを実装しました。

キューを使用してすべての重要でないタスクを処理しました。

新たな問題が発生しました

旅程の生成後にエラーが発生しても、フォールバック メカニズムが必要です。現時点では、データベースにデータを供給する際にエラーが発生した場合、旅程が失われるため修正する必要があるフォールバック メカニズムがありません。

今のところ、RLS ポリシーを無効にしています。これに取り組みます

今後の改善点

---

問題：

旅行生成ルートでは旅程の生成に時間がかかっています。

これにはいくつかのプロセスが含まれています。

• ユーザー設定を受け取り、データベースにテーブルを作成します。
• 現在ログインしているユーザーを取得します。
• パーソナライズされたプロンプトを生成し、Gemini AI モデルに送信します。
• 応答の JSON をデータベースに直接保存しているため、応答を受信して​​調整し、応答を JSON に解析します。
• ユーザーが残したクレジットを更新しています。
• 応答を送り返します。

解決：

ルートを注意深く分析すると、ユーザー設定の挿入、応答の挿入、クレジットの更新は重要なタスクではなく、ユーザーへの応答の送信が主な重要なタスクであることがわかります。

したがって、キューを使用して、これらの重要ではないタスクを非同期で実行できます。

この非同期アプローチにより、応答時間を大幅に短縮できます。

キャッシング

キャッシュ メカニズムを実装すると、旅行旅程アプリケーションのパフォーマンスと応答時間が大幅に向上します。人気の目的地や一般的なユーザー設定など、頻繁にアクセスされるデータをキャッシュすることで、サーバーの負荷を軽減し、より迅速に結果をユーザーに提供できます。これは、リピート ユーザーにとって、またはよりパーソナライズされた結果が生成されている間に最初の推奨事項を表示する場合に特に有益です。

これをダッシュ​​ボードに対して行い、最近訪問した旅行の旅程をキャッシュします。これにより、データベースへのリクエストの数が減り、結果的にアプリケーションが高速化されます。

導入

自動スケーリングに最適なアプローチである AWS Elastic Container Service に簡単にデプロイできるようにアプリケーションを Docker 化しました。

現在、デモ用に Vercel にデプロイされています。