プロダクト マネージャーで非プログラマーとして ChatGPT を使用して Travel AI アプリを開発した方法

やったよ！約 100 時間かかりましたが、ChatGPT の助けを借りて実際のアプリを作成してデプロイすることができました。

それ以来、機能のメンテナンスと追加にさらに 100 時間ほど費やし、素晴らしい本格的な情熱のプロジェクトになりました。

実験の前提は、「長い間コードを積極的に書いていないプロダクト マネージャーの私でも、ChatGPT を使用してアプリを設計、構築、デプロイできるでしょうか?」というものでした。

私は CS で BS を取得し、テクノロジーのさまざまな側面 (システム設計、開発、DevOps、ホスティング) に携わっており、それなりの基礎を持っていますが、過去 10 年以上、実践的な開発は行っていません。

私はかなり優れた製品センスを持っており、製品を反復的に構築する方法や機能を精査する方法を理解しており、それが役に立ったと思います。

SW 開発では通常のことですが、時間の 80% 以上がトラブルシューティングとデバッグに費やされました。

旅行 AI を選ぶ理由

ChatGPT API を中心に何か役に立つものをまとめたいという私の探求の中で、GPT は、旅行の計画、つまり、行く場所、訪れるべき観光スポット、旅程などを把握するという問題に取り組むのに独特の資格があると考えました。決定すべきことはたくさんあります。旅行中に作成したものを、独自の好みや状況に基づいて誰かがまとめてくれるのは、価値があることだと思いました。

ChatGPTを使ったコーディング

私は約 6 週間、夜間作業と数週末の作業を費やし、おそらく合計 100 時間ほどかかりました。 ChatGPT+ アカウントを持っていたので、ボットにアクセスしたり GPT4 にアクセスしたりする際の安定性が向上しました。

このプロセスを通じて得られた発見は次のとおりです。

• ChatGPT は、仕事に適したツール (シングルページ アプリ用の Vue.js フレームワーク) を選択し、繰り返しコードを作成するのに役立ちました。それなしでは間違いなくそれを行うことはできませんでした。そうは言っても、確かに複雑な問題がありました。

  
  

  1. ChatGPT UI が課す制限 (入力と出力に 4,000 のトークン、およびコンテキストの約 15,000) は非常に制限的であり、質問内で多くのセグメント化を行うことになります。これは理想的ではなく、余分な労力がかかります。 CLI を介してアクセスしようとしたことはありませんでした。同じ制限が課されていないことをどこかで読んだだけです。チェックしてみる価値があります。

  2. 「コードの意味を理解する」ことの品質には一貫性がなく、良くなることもあれば、悪くなることもあります。それが何と関係があるのか分かりません。

  3. そのため、私のアドバイスは、早めにコードの構造化 (コードをより小さな関数に分割する) を開始することです。ChatGPT はそれを自動的に実行してくれるわけではありませんが、要求すれば実行してくれるからです。これにより、将来のトラブルシューティングが容易になります。

  4. GPT4 は 3 時間で 25 のクエリを実行すると終了し、「デフォルト」モデル (おそらく 3.5) に切り替わります。興味深いことに、非常によく認識され、GPT4 よりもパフォーマンスが良いと言いたくなるところですが、私が始めていないためです。 3.5 では同一の比較ではありません。

     
     

     更新: 最近、制限が 3 時間で 50 クエリに引き上げられました。

開発および展開環境

• 新時代の IDE として Replit を使用しました。これは良いコンセプトであり、特にそれを有意義な Codex/ChatGPT 統合と組み合わせることができれば、おそらく未来になります。彼らが現在持っている AI は、プロジェクトのコードを利用しておらず、私が ChatGPT で行っていたのと同じ操作ややり取りをすべて必要とするため、あまり役に立ちません。ただし、Replit がソース管理のために Github とどのように統合されているか、また、Replit がステージングをどのように処理しているかが非常に気に入りました。

  
  

• クラウドネイティブとしてデプロイしたかったので、Cloudflareを使用してデプロイしました。 UI には CF ページを、バックエンド (API ゲートウェイ) にはワーカーを使用しました。ページが CICD 用に Github と統合されている方法が気に入りました。これは本当にクールでした。基本的に、アプリはメイン ブランチへのコミット時に自身を再デプロイします。

  
  

  一般に、CF はネットワークに関する面倒な作業を大幅に簡素化するため、非常に優れています。

プロンプト

私はかなりの時間を費やし、プロンプトを何度も繰り返し、プロンプトを消去し、特異性に対処しようとしました。初期の意思決定ポイントの 1 つは、ChatGPT API にテキスト リストを返し、それを理解して分類するか、それともすでに構造が組み込まれた JSON を返すかということでした。 ChatGPT からより多くのデータを要求するにつれて構造がますます複雑になったため、テキスト データを構造に解釈する必要があるのではないかと不安になりました (このスニペットで明らかなように)

このため、JSON に対して ChatGPT をプロンプトすることにしました。ただし、これには、JSON が必ずしも適切に構造化されていない、またはプロンプトに曖昧さが多すぎるという副作用があり、ChatGPT が予期しない結果を返す可能性がありました。迅速な微調整と JSON エラー処理の間に 25% 近くの時間を費やしたと思います。とても勉強になる経験でした。最終的に、私が最終的に得たプロンプトは次のとおりです。

 SYSTEM_PROMPT = `You are a helpful travel assistant. You perform the requests with diligence and make the best attempt to answer the questions, never refusing due to complexity etc. Reset the conversation if I mention a new location in my user prompt. Return the results in JSON format as an array of objects. Make sure JSON format is complete and valid and does not include unescaped special characters. Please avoid escaping double quotes and instead use single quotes or another method to prevent JSON parsing issues. Do not use "\n" newline symbols in the middle of element text. Each object in the array should have the following keys: - "title" - "description" - "airportCode" (for the destination airport) - "poi" (array of points of interest) - "lodging" (array of lodging options) - "itinerary" (array of objects, each representing a day) - "considerations" - "history" (history related to the destination) - "key_local_phrases" (array of common local phrases) - "cost" The "itinerary" key should contain an array of objects, each object representing a day with the key "activities", which is itself an array of objects. Each activity object should have the following keys: - "description" - "waypoint" (name of the location, not coordinates) - "cost" - "travelTime" - "travelOptions" If travel is involved within the itinerary, include "Travel To" as part of the daily activity and provide the travel time, travel options, and associated cost. Each step in the itinerary should also suggest representative local "food" to try. Focus on most interesting points of interest, lodging, and activities. Consider activities that are popular, affordable, and recommended by the travelers. Make sure you cover the entire duration of the trip or outing. If it says "week-long", it has to cover the entire week. It's OK to group multiple days or weeks together if it's a longer trip. If it doesn't give a timeframe, take a guess based on the nature of a trip. Considerations should include travel restrictions and visa requirements, typical weather, criminogenic conditions including which areas to avoid, recommendations on visit timing, parking situation, and ways to save on travel costs. Here is an example of the desired output format: [ { "title": "Sample Title", "description": "Sample Description", "airportCode": "XYZ", "poi": ["Sample POI1", "Sample POI2"], "lodging": ["Sample Lodging1", "Sample Lodging2"], "itinerary": [ { "day": "Sample Day 1-2 - City or Place", "location": "Wikipedia identifiable name of the place in city,_country or city,_state format", "activities": [ { "description": "Sample Activity1", "waypoint": "Sample Waypoint1 connected to the activity", "cost": "$100", "travelTime": "30 minutes", "travelOptions": "Taxi or Bus" }, { "description": "Sample Activity2", "waypoint": "Sample Waypoint2 connected to the activity", "cost": "$50", "travelTime": "1 hour", "travelOptions": "Ferry or Bus" } ], "food": ["Sample Food1 with short description", "Sample Food2 with short description"] }, { "day": "Sample Day 3 - City or Place", ... }, { "week": "Sample Week 2 - City or Place", ... } ], "considerations": "Sample considerations text", "history": "Sample history text", "key_local_phrases": ["Sample phrase 1 - translation", "Sample phrase 2 - translation"], "cost": "Sample total cost" } ]`;

注: この記事の執筆時点では、OpenAI は、JSON 構造化データの戻り値をより堅牢で一貫性のあるものにするために非常に役立つと思われる微調整機能強化をリリースしたばかりです。

ウィッシュリスト

現時点での私の希望リストの最大の項目は、開発環境と AI コード生成の統合です。コード構造を台無しにしないようにしながら（特にコードベースが大きくなるにつれて）何かを前後に貼り付けると、明らかに望ましくないことがたくさん残ります。

AI コード生成における次の大きなステップは、コードを内部でセクションに解析し、ユーザーが手動で行うことなく、モデルへの/モデルからの関連入力の提供と受け入れの両方ができる、統合されたスマート コード エディターになると思います。

その次のステップは、デバッグ目的でブラウザと統合し、最終的には閉ループの反復デバッグ サイクルを作成することです。

それは取り組むのに最適なプロジェクトでしょう!

注: Google がIDX プロジェクトで何をしようとしているのか知りたいです - それだけかもしれません。

まとめ

全体として、私は便利なアプリ (と私が思っている) を構築できるだけでなく、構文やフレームワークの学習に溺れることなく、最新のフレームワークを使いこなし、実践的な時間を得ることができました。これはまさに私が望んでいたものでした。これは大きなことであり、より多くの人々にソフトウェア開発への扉を開くことになると思います。

このアプリはVoyageAI.appで見つけることができます。このアプリは現在も、今後も無料で使用でき、広告もログインもありません (したがって、個人データは使用されません)。