このAIコーダーがアプリを構築する（Pythagora 2.0チュートリアル）

ソフトウェア開発・プログラミング
この記事は約21分で読めます。

この動画は、Pythagora 2.0というAIコーディングツールを使用して、わずか1時間半で睡眠追跡アプリケーションを構築する過程を紹介している。開発者は詳細なプロンプトを作成し、AIが自動的にフロントエンド、バックエンド、データベース機能を含む数千行のコードを生成する。アプリには音声メモ機能、スクリーンショット解析、AI睡眠コーチ、OpenAI API統合などの高度な機能が含まれており、従来の手動コーディングと比較して圧倒的な効率性を実証している。

This AI Coder BUILDS (Pythagora 2.0 Tutorial)
Build something today with Pythagora the all-in one AI dev platform: Humanities Last Prompt Engineering Guide 👇🏼https:.....
www.youtube.com

Pythagora AIを使った睡眠追跡アプリ開発の実演

Pythagora AIを使って完全な睡眠追跡アプリケーションを構築する様子をご覧ください。これはバイブコーディングで、とても簡単です。1時間半という私自身の作業時間で数千行のコードを書き上げ、最終的には完全に機能するアプリケーションが完成します。

このビデオをスポンサーしてくれたPythagoraに感謝します。彼らは素晴らしいパートナーで、皆さんも私が最初から最後まで完全なアプリケーションを構築する以前のビデオを気に入ってくれました。今日も同じことをやっていきます。これは私が構築した中で最も複雑なアプリになるでしょう。それでは始めましょう。

睡眠追跡アプリの企画

今日何を構築するかですが、睡眠追跡アプリを作ります。私は時々睡眠に悩むことがあり、自分の睡眠を追跡し、パターンを見つけ、よりよく眠るのに役立つさまざまな習慣を発見したいと思っています。そしてAIの助けを借りてそれを行いたいのです。これが今日構築するものです。

最初に行ったのはプロンプトの作成です。ここに最も時間をかけることをお勧めします。プロンプトはこうです：メインページ、ホームページ、睡眠コーチページ、ログインと登録ページ、そしてユーザーが独自のOpenAI APIキーを追加し、このアプリで使用したいLLMを選択できるアカウントページを持つアプリを作成したいと思います。

次に、ホームページに何があるかを文字通り説明します。ここにボタンがあり、押すとこれを実行するべきです。非常に詳細で具体的です。これは仕様書とも呼べるものです。データに使用するJSONの構造を作成するためにAIを使用しました。

AIコーチ機能の構想

このアプリに求める大きな機能の一つは、本質的に睡眠コーチを持つことです。すべてのデータの分析を開始する際に推奨事項を提供してもらいたいと思います。それだけでなく、実際に質問を投げかけることができる睡眠コーチが欲しく、私が提供したすべてのデータのコンテキストを持っていてほしいのです。

もちろん、この情報をすべて公開したくないので、認証の後ろに置きます。このアプリの本当に重要な機能の一つは、睡眠データや運動データなど、情報をアップロードする際の簡便性です。

データ入力方法の設計

2つの方法があります。一つは自然言語で、文字通り何かを録音して「午後10時から午前6時まで眠った」と言うだけで、それがすべてAIによって解析されてデータベースに格納されます。

また、睡眠追跡アプリも使用しています。WhoopバンドやEight Sleepを持っており、総睡眠時間、REM睡眠、深い睡眠など、これらのデバイスが提供するデータを取得して、それらのスクリーンショットをアップロードしたいと思います。そしてGPT-4がそれを解析して私のアプリに格納します。

これはすべてのもののリポジトリのようなもので、このランダムなデータをすべて解析し、まとめて、そこから洞察の抽出を開始します。次に睡眠コーチページについて説明し、実際に貼り付けて、進行に応じてすべてを説明していきます。

Pythagora 2.0での開発開始

プロンプト全体をハイライトしました。これがPythagora 2.0です。以前のビデオを覚えている方は、PythagoraはVS Codeの拡張機能でしたが、今は完全にクラウドでホストされています。そのアプローチを取りたい場合はそうできます。

十分に話しました。始めましょう。プロンプトを貼り付けて、エンターを押します。前回Pythagoraをお見せしてからのさまざまな更新と機能について説明します。

最初に行うことは、基本的に私のプロンプトを取り、再フォーマットし、追加し、明確化し、それをすべてマークダウン形式にまとめることです。このより正式な仕様書の作成が完了すると、実際にクリックして好きなものを編集できます。更新や変更が必要なもの、定義の仕方が気に入らないものがあれば、クリックして好きなように変更できます。

仕様書の確認

素早く見てみましょう。メインナビゲーション、ホームページ、睡眠コーチ、ログインページ、登録ページ、アカウントページがあります。各ページの仕様があります。ログインページではメールとユーザー名、パスワード、ログイン、パスワード忘れ機能が欲しいです。登録ページ、OpenAI キーを入力するアカウントページがあります。

非常に非常に詳細です。文字通り構築するすべてのものです。満足したとして、続けましょう。「はい」をクリックすると、バックグラウンドで作業を開始します。

タスクの進行状況

作業中の最初に見えるのは、タスクをクリックすると、実際にさまざまなエピック、完了予定のタスクを見ることができることです。進行に応じてさらに追加され、必要な他のことを把握します。

ご覧ください、すでにフロントエンドを構築しています。これには数分かかる場合があります。前回のビデオを覚えている方は、前回構築したもの全体が約2時間で約1,200行のコードでした。今回はもっと多くの行のコードで、より短時間で済むと予想しています。

エピック1のタスク1：仕様書の作成、エピックとタスクの定義が完了しているのがわかります。すべて完了としてマークされています。2番目のエピック2：フロントエンドとUIスケルトンの構築が進行中で、これが現在作業中のものです。

コードの自動生成

現在APIを構築しています。実際にクリックして詳細を見ることができ、進行中のすべてが非常に理解しやすくなっています。仕様書を参照する必要がある場合は、いつでも仕様書に戻ることができます。

クールな点の一つは、これがライブドキュメントであることです。ここをクリックして、進行中に変更を加えたい場合、ほとんどを構築した後で「実際にもう少し違った動作をするべきだと思う」となった場合、ここに来て更新すれば、AIも必要だと思えば更新します。

クライアントにcdingして、npmパッケージをインストールしているのがわかります。Pythagoraを本当に良く、本当に速くしているのは、非常に意見を持っている事実です。得意な書き方のフレームワークに傾く傾向があります。そのため、ここでNodeを見ているのです。

すでに書かれているこれらのファイルすべてを見てください。app.tsx、sleep.ts、chat.tsなどがあり、まだ続いています。コンポーネントを構築しており、構築されているすべてのコンポーネントを見ることができます。

コードの確認

実際にコードを見たい場合はそうすることができ、これは本質的にVS Codeのホスト版なので、馴染みがあるはずです。「探索」をクリックすると、すべてのコードをここで見ることができます。構築されているさまざまなAPIが見えます。これは設定API、睡眠とチャットAPI、これらのさまざまなコンポーネントです。

文字通り私の目の前でフルスタックアプリケーションを構築しており、これまでのところ私からの入力は非常に少ないです。Pythagora 1.0と非常に似ています。これは私がAIと協力して構築するフレームワークです。

明らかに、実際にコードを書くという困難な部分はすべて処理していますが、途中で物事をチェックし、正しい方向に向かっていることを確認しています。これはバックエンドとフロントエンドの両方に適用されます。

アプリのプレビュー

フロントエンドの大部分の構築が完了したようですが、実際に見てみましょう。左側に「アプリを表示」ボタンがあります。クリックしましょう。プレビューを読み込んでいます。これは現在ウェブ上でライブですが、Pythagoraアカウントにログインした私だけがアクセスできます。

これが実際のアプリの外観です。テストフェーズなので、最初は好きなメールアドレスを入力できます。mattforwardfuture.aiでログインしてみましょう。見てください、わずか5分未満で完全なフロントエンドがすでに構築されています。

フロントエンド機能の確認

日次睡眠データ入力があります。ここをクリックすると、2つの方法があります。睡眠スクリーンショットをアップロードするか、単純に音声メモを録音することができます。ここをクリックすると、マイクの使用を求めてきます。サイト訪問中に「はい」とします。現在録音中です。

バックエンドはまだ完全に構築されていないので、これはすべてフロントエンドです。すぐにそこに到達します。投稿できて、投稿しているように見えます。「推奨事項をください」をクリックできます。これはすべてモックデータで、まだ実際にGPT-4に接続されていません。

睡眠パターンがあり、空の画面を見ないようにすでに事前に入力されたデータがあります。ライトブルーの総睡眠時間、REM睡眠、深い睡眠があります。最後に睡眠衛生があります。遅い食事、就寝前の読書、就寝前のスクリーン時間があり、それがどのように見えるかわかります。

睡眠コーチページ

睡眠コーチをクリックすると、従来のチャットボットインターフェースのように見えます。これが私が望む外観です。自分のデータについて質問し、持っているかもしれない推奨事項を尋ねることができるようにしたいです。

ここでOpenAI APIキー、LLMモデル選択を入力できます。複数のオプションが提供されますが、明らかにGPT-4oを選択します。それが主力だと思います。見た目が良いので、「UIの構築完了」をクリックして続けましょう。

UIの構築が本当に完了しましたか？バックエンドの構築を開始しますか？はい、行きましょう。

バックエンド開発の開始

仕様書、フロントエンド、次にバックエンドというパターンに従います。通常、バイブコーディングツールでは、これらすべてが同時に構築され、そのためにミスをすることがあります。より正式な計画とより正式なプロセスが必要で、そのためフロントエンドを行ってからバックエンドを行うことが有益です。

ここで構築中で、すでにいくつかのエラーを検出しました。クリックしてこれらのエラーのいくつかを見ることができ、自分で修正します。自分で検出し、自分で修正します。ここで私がAIと実際に作業することになると述べた場所です。

人間によるテスト段階

「人間のテスト」と表示されているのがわかります。ここで実際にテストし、動作することを検証し、Pythagoraに「はい、動作します」または「いいえ、何かを修正する必要があります」とその内容を伝えます。

最初に「登録ページを開く」と表示されます。ログアウトして登録ページを開きます。実際にこの下矢印をクリックすると、探すもの、テストしたいものについてより多くの情報が得られます。

localhost/registerに行くと言っています。明らかにホストされているので、実際にはlocalhostではありませんが、ホスト版のlocalhostです。クリックするだけで、必要なページに正確に読み込まれ、移動します。

認証機能のテスト

「結果を期待する」と言いました。右下角に成功メッセージが表示され、/loginページに案内されるはずです。アカウント登録をテストします。mattforwardfutureとパスワードで、アカウントを作成しましょう。

言った通りに成功メッセージが表示され、/loginページにリダイレクトされるはずでした。実際に気づかなかったのですが、すでにログインページにいました。次にログインページを開きます。ここをクリックできますが、すでにそこにいました。

ログインを試した後、右下角に成功メッセージが表示されるはずです。メールとパスワードを使用します。サインインをクリックしましょう。ログインできました。認証が機能するようになりました。

API設定機能の実装

次にタスク2を開始しています。ユーザーモデルにAPIキーとLLMモデル選択フィールドを追加し、これらの設定を保存するためのAPIエンドポイントを実装します。上記のタスクを実行しますか？はい。

このタスクをどのように行うかを考えている間に、タスクタブに戻りましょう。行っているさまざまなタスクを見ることができます。左にスクロールすると、フロントエンドとUIスケルトンの構築が完了し、タスク1のログインと登録ページの実装とテストが完了し、現在タスク2に取り組んでいます。

分析があります。フロントエンドにすでにあるもの、実装計画があります。ユーザーモデルの更新、設定ルートの作成、設定の更新、フロントエンドAPI、サーバーの更新を行います。現在すべてのコードを書いており、実行したすべての要約があります。

変更されたファイルがあり、もちろん、任意のファイルをクリックすると、実際にコードを見ることができます。再び人間のテスト部分にいます。

設定機能のテスト

ステップ1：アプリにログインします。そこをクリックするだけです。ユーザー名とパスワードを入力します。サインインをクリックします。うまくいきました。次にアカウント設定ページに移動します。

ナビゲーションバーでプロフィールアイコンまたはユーザー名をクリックし、アカウントをクリックします。すでにそれを行いました。アカウント設定ページに移動されるはずです。はい、OpenAI APIキーセクションに有効なAPIキーを入力します。今それを取得しに行きます。

OpenAI APIキーを取得したので、ここに貼り付けて「APIキーを保存」をクリックします。「APIキーが正常に保存されました」。次にステップ4でLLMモデルを選択します。GPT-4oが欲しいので、それを保持しましょう。APIキーを保存します。すでにそれを行いました。LLMモデルを保存しました。すでにそれを行いました。

iframe外でのテスト

他に行えることの一つは、FYIですが、iframe内にウェブページがあるときに奇妙な動作が発生することがあるため、「アプリを表示」と表示されている場所をクリックして新しいタブを開くことができます。それは使用しているブラウザで新しいタブをポップアップし、iframeのないアプリケーションになります。それもテストする良い方法です。

すべてをテストしたら、すべて機能するので「すべて機能する」をクリックし、次に何をするかを見てみましょう。

音声録音機能の実装

音声録音アップロード機能を実装するという説明でタスク1を開始しています。上記のタスクを実行しますか？はい。これで構築を開始し、このプロセスを続けます。何かを構築し、テストし、動作していると言うか、動作していないもののフィードバックを提供します。

すべてがこれまで動作しているので、それを示すことができればと思います。次のタスクに続けます。タスクタブに戻ると、これが私たちの現在地です。タスク2が完了し、現在音声機能に取り組んでいます。

タスクの詳細があります。フロントエンドにすでにあるもの、ファイルアップロード用のバックエンドAPIエンドポイント、ファイルメタデータを保存するデータベースモデル、ディスクでのファイルストレージ、モック応答の削除を実装する必要があります。すべて正しく聞こえます。実装計画があり、コードを書き始めています。

パッケージの追加とテスト

パッケージを追加しています。環境を処理してくれます。すべてのコーディングを処理してくれます。とても簡単です。これが真のバイブコーディングです。競合状況でPythagoraがどこに位置するかを疑問に思っているなら、基本的にコードの奥深くにいて、すべてを書いているcursorとwindsurfの間、そしてコードをまったく見ないlovableとboltの間と考えることができます。プロンプトして、アプリケーションを吐き出します。

これはちょうど真ん中で、より洗練されたアプリケーションを構築したく、もう少し制御が欲しいが、まだバイブコーディングしたく、より多くのガードレールが欲しい場合です。

次のステップに戻りました。これらのステップに従ってアプリケーションをテストします。ログインしましょう。すでにログインしています。データ入力セクションを開きます。そこにあります。詳細を見てみましょう。データ入力セクションが展開されるはずです。睡眠スクリーンショットをアップロードします。それを取得しに行く必要があります。

Whoopアプリのスクリーンショット

私のWhoopアプリのスクリーンショットがあります。これは運動と睡眠を追跡するために着用している小さなデバイスです。判断しないでください。昨夜はあまりよく眠れませんでした。覚醒、軽度、深度、REM睡眠が見えます。単純にスクリーンショットをアップロードします。

スクリーンショットを選択しました。アップロードの準備ができているようです。ファイル名を選択します。「スクリーンショットが正常にアップロードおよび処理されました」。「データを送信」を押しましょう。

アップロードしたので、サーバー上にあるので、実際に見に行くことができます。ファイルエクスプローラーをクリックし、クライアントサーバーアップロードスクリーンショットをクリックすると、アップロードしたスクリーンショットがそこにあります。それは成功でした。

データベースの確認

これら2つのコマンドを実行するように指示されています。コマンドJを押し、VS Codeのようにターミナルがあります。これをコピーしてSleepwiseを使用します。shを入力してエンターを押します。今私たちは入っています。Sleepwiseを使用します。そこをコピーして貼り付け、データベースでスクリーンショットを探します。そこにあります。

音声メモを録音するように言われています。それを試してみる必要があります。「録音開始」をクリックすると、テスト、テスト、マイクに何かを言い、「録音停止」をクリックして送信します。「音声メモが正常に処理されました」。まさに見たかったものです。

データベースで音声メモメタデータを検証します。同じことです。すでにSleepwiseにいるので、録音を探しましょう。そこにあります。すべてが機能したので、続けましょう。

OpenAI Whisperによる音声認識

次にOpenAI Whisperを使用して音声録音と転写を実装します。はい、進んでください。再びタスクの詳細があります。現在の実装の分析、実装する必要があるもの、音声転写、画像処理、テキスト処理、データベースモデル、フロントエンド統合です。実装計画があり、コードの書き込みを開始しています。

インターフェースで小さなエラーが発生し、「エラーが検出されました」と表示されています。実行中は基本的に常にエラーを探しています。クリックすると、さまざまなエラーを見ることができます。データの取得に失敗、トーストエラー、トーストエラー。すべてのエラーを探し終わったら、単純に「修正」をクリックできます。

エラーの自動修正

「修正」をクリックしましょう。実際に19の異なるエラーが見つかり、考える必要はありません。「修正」をクリックするだけです。バグハンティング1、これはとてもクールです。バグを再現する方法を見つけ、ログを見て、問題分析、解決策と実装を行います。

基本的に解決策はサーバークラッシュの防止、優雅なエラー処理だと言っています。再起動すればおそらく解決したでしょうが、私のために修正してくれます。この時点で、立ち去ってお茶やスナックを取りに行き、戻ってくるとすべてのバグが修正されているでしょう。

音声機能の最終テスト

アプリケーションを開始し、アプリケーションにアクセスし、コンソールログをチェックします。ここをクリックしてコンソールログをチェックできます。すべて良好で、エラーはありません。テスト完了、はい、問題は修正されました。

次にホームページに行き、音声メモを録音します。テスト、テスト、テスト、転写を確認します。問題が発生しました。音声メモの処理に失敗しました。「問題があります」をクリックします。

「送信に失敗しました音声メモの処理に失敗しました」と言います。明らかに非常に簡単で、「実行」をクリックするだけで、その非常に簡潔な説明で修正してくれることを願っています。

新しいユーザーを登録し、基本的にAPIキーなしで録音して何が起こるかを見るように指示されています。それを行いましょう。2番目のユーザーでサインアップし、アカウント作成、サインインします。まだAPIキーがないので、メモを録音してみましょう。テスト、テスト、テスト、送信。同じエラーが発生しました。それは実際に期待されていたことなので、「すべて修正」をクリックして、何をするかを見てみましょう。

ログによるデバッグ

ログを見ると、さらにエラーがあることがわかります。「エラーのみ」をクリックすると、これは本当に有用な表示です。音声メモの処理エラー、抽出された解析に失敗しました。再び「すべて修正」をクリックしてみましょう。今はあまり考えたくないので、AIに修正してもらいます。

ソフトウェア開発と同じように、時には物事を複数回試す必要があり、異なるアプローチを試す必要があります。良いことは、この「すべて修正」ボタンをクリックするだけで済むことです。再び試してみましょう。録音成功、非常に良いです。テスト完了、はい、これで問題が修正されました。

実際の転写をテストするために、録音中に実際に何かを言う必要があるので、開発者コンソールを見ることができる新しいタブにいる必要があります。新しいタブでアプリを開きました。テスト、テスト、テスト、送信を録音します。

検査、コンソールに行くと、転写がそこにあります。テスト、テスト、テスト。それは正しいです。次に、画像アップロードをテストして、正しく処理されるかを確認する必要があります。ファイル選択、アップロード。成功、再び検査、コンソールに行き、オブジェクトを見ます。

これはChat GPTから戻ってきているだけで、そこにあります。抽出されたデータ、就寝時間、深い睡眠、回復睡眠、REM睡眠、欲しかったすべてのものです。完璧です。

データ送信の最終確認

完了したら、実際の送信をテストしたいので、「データ送信」をクリックして成功しました。コンソールにログされていることを確認しましょう。再び検査、送信中、データ入力送信中、アップロード結果があります。すべて良好に見えるので、続けましょう。すべて機能し、構築を続けます。

次に深い睡眠データの保存、LLM応答の処理、検索の実装を行います。はい、進んでそれを行いましょう。テストに戻りました。アプリを再起動してくれました。ログイン、すでに完了。今日の睡眠データを入力。ここをクリック。スクリーンショットを選択します。昨夜のものがあります。

アップロード中で、送信しましょう。「データが正常に処理され保存されました」。表示されなかったので、「問題があります」と言います。2つの問題があります。睡眠パターングラフにマウスを重ねるとグレーのブロックが表示され、スクリーンショットをアップロードした後、睡眠パターングラフに何も表示されません。

グラフ表示の問題解決

それを与えて、何をするかを見てみましょう。バックエンドが睡眠データを正常に処理および保存していることがわかります。それは問題ありません。本当に表示についてです。修正中で、空の状態処理があり、再起動中です。空の状態があるので、「睡眠データが利用できません」、再び行います。

スクリーンショットをアップロード、データ送信、データ処理および保存成功、チャートにマウスを重ね、チャートがまだ表示されません。ページを更新してみましょう。睡眠パターングラフがまだ表示されていません。

「データを送信した後、睡眠パターングラフがまだ表示されません。何が間違っているかがわかるようにログを追加してください」と言います。ログを追加したので、今何が起こるかを見てみましょう。

データ解析の問題発見

受信したデータがおそらくログの終着点になるところが見えます。再び行います。スクリーンショットをアップロード、正しく解析していることを知っています。すでにテストしたので、送信データ、そして「データが受信されませんでした」。

ログタブをクリックして何が間違っているかを確認し、すぐに見えるのは、プロセススクリーンショットの応答が2023年からであることで、それは明らかに正しくありません。単純に「クリーンレスポンスからのデータが2023年と言っていますが、正しくありません。スクリーンショットをアップロードした場合、前夜の睡眠のものと仮定してください」と言います。

これでうまくいけば修正されるでしょう。再び試してみましょう。アップロード、処理、日付を仮定、送信、うまくいきました！はい、それが問題でした。REM睡眠、総睡眠時間、深い睡眠が見えます。完璧です。テスト完了、はい、問題が修正されました。

Pythagoraはすべてのログを表面化しようとしているので、問題がある場合は、単純にログタブをクリックして何が間違っているかを確認できます。

AI推奨機能のテスト

これらのステップをすべて行ったので、次に行いたいことはAI推奨を取得することです。クリックして何が起こるかを見てみましょう。そこにはあまり多くのデータがないので、どのような推奨を与えてくれるかわかりませんが、機能していることを確認したいだけです。

「あなたのプロフィールを詳しく見てみましょう。あなたの睡眠時間は」そうです、これは素晴らしいです。推奨事項を与えてくれています。明らかに、より簡潔な推奨、より長い推奨、特定のタイプを与えるために、プロンプト自体を後で繰り返すことができ、すべてそれは後で行うことができます。機能することを確認したいだけで、機能しています。すべて機能するので、続けましょう。

睡眠コーチ機能の実装

タスクパネルに戻ると、睡眠推奨を生成するAPIエンドポイントを実装すると言っていますが、すでにそれがあるので、実際にこのタスクをスキップできます。睡眠コーチでの作業を開始します。それを行いましょう。

完了しましたが、すぐにいくつかのエラーが見えます。それらを見てみましょう。多くのトーストエラーがあります。「すべて修正」をクリックして何が起こるかを見てみましょう。すべてが読み込まれました。睡眠コーチページに行き、メッセージを送信してみましょう。「こんにちは」、応答を得ました。完璧です。

メッセージ保存の確認

AI応答、メッセージストレージの確認をします。メッセージを確認するために戻るように求められています。そこにあります。睡眠コーチページを再読み込みし、まだそこにあります。完璧です。すべて機能し、アプリが完成するはずです。満足していますか？

素晴らしいです。もう一つ質問してみましょう。基本的に睡眠の健康、睡眠衛生について何でも尋ねることができます。「就寝前の良いリラックスルーチンは何ですか？」。「一貫したスケジュールを設定し、明かりを暗くする」などがあります。

今後の改善計画

一つ行いたいことがあり、このアプリで繰り返すための将来のビデオのために保存することになりそうですが、すべての私のデータにアクセスを与え、私と私のデータに特有の質問を尋ねることができることを確認することです。しかし今のところ、アプリが完成しているはずです。はい、機能します。送信して完了です。

まとめ

それでした。数千行のコードが1時間半未満で、非常に簡単に作業できました。非常に直感的で完全にホストされたVS Codeインターフェースになりました。pythagora.aiをチェックすることをお勧めします。説明欄にリンクを貼りますので、私が送ったと伝えてください。彼らは素晴らしいパートナーで、非常に簡単にバイブコーディングできます。チェックしてみてください。

再びありがとうございます。このビデオを楽しんでいただけたなら、いいねとチャンネル登録をご検討ください。次のビデオでお会いしましょう。

コメント

タイトルとURLをコピーしました