私のデイトナ サンプルは、Mindsnap-prosemaster-daytona という React プロジェクトです。これは、MVC アーキテクチャに従って React、Node、AI を使用して開発された、非常にシンプルな初心者向けのアプリケーションです

私たちのペースの速い世界では、設定に時間を費やすことを望んでいる人はいません。開発者は、ただ作業(yè)を進めてコードを書き留めることを望んでいます。あなたのように聞こえますか？それでは、乾杯！正しい場所に來ました。

しかし、待ってください、それが開発の仕組みではないことは誰もが知っています。悲しいことに、最も単純なプロジェクトであっても、構(gòu)成ツール、インストールするパッケージ、転送するポート、場合によっては VPN セットアップなどが必要です。ここでデイトナが開発者向けのシンプルかつ畫期的なソリューションを提供します。

気になり始めましたね?

この投稿では、MindSnap ProseMaster を構(gòu)築する私の旅をご紹介します。これは、長いテキストを簡単な要約、重要な洞察、楽しい記憶術に変換するように設計された超初心者向けのアプリケーションです。

このアプリケーションをどのように構(gòu)築したかについての短い紹介から始めましょう。これが、react と Node を使用して構(gòu)築した最初のアプリケーションだったと思います。とてもシンプルでした。 API 呼び出しがどのように行われるかを理解していると仮定すると、これはかなり簡単になります!

まず、これはユーザーが任意のテキストを入力できる入力ボックスが 1 つある?yún)g一ページのアプリケーションです。このテキストを使用してプロンプトを渡し、gemini API に送信します。 Gemini API からの応答が畫面に表示されます。

それでは、コンテナなどのことについて何も知らない開発者である私が、どのようにしてデイトナのことを知ったのでしょうか?

さて、この件については Quira に感謝する必要があります。 Quira’s Quest 023 ではデイトナが登場し、6,000 ドルの高額賞金が獲得されました。それを知ってすぐに、クエストに提出するために自分のプロジェクトに目を通し始めました。

複雑なプロジェクトを選択すると、ワークスペースに DevContainer をセットアップするのが難しくなる可能性があるため、単純なプロジェクトを選択する必要があると考えたことをはっきりと覚えています。しかし、なんと、私はこれ以上の間違いはありませんでした。

読者の中には、開発コンテナ、ワークスペースに慣れていない人もいると思います。でも、心配しないでください。このブログですべてを説明しましたので、読み続けてください。ゆっくりとすべてが理解できるようになります。

実際にこれらの用語から始めましょう:

• 開発コンテナ: 開発に必要なすべてのツールと設定が含まれる事前構(gòu)成された環(huán)境。

• ワークスペース: これは、私たちが取り組んでいるすべてのファイル、コード、およびそれぞれのプロジェクトを保存および整理できるデジタル スペースです。

• ポート: これを、開発環(huán)境と他のサービスまたはデバイスの間でデータが流れるドアのようなものとして考えてみましょう。

• PostCreateCommand: 開発環(huán)境のセットアップ後に自動的に実行される devcontainer.json の重要なコマンド。これはセットアップタスクを完了するために使用されると思います。

Daytona を使用すると、スキル レベルに関係なく、開発環(huán)境のセットアップと管理がいかに簡単であるかがわかりました。私の経験から學び、デイトナが次のプロジェクトをどのようにスムーズかつ効率的にできるか見てみましょう!

私がどのように始めたのか詳しく見てみましょう
私はどちらかというと視覚的に學ぶ派です！つまり、分厚い文章を読み進めるよりも、実裝のビデオや畫像を見るのが好きだということです。いつものように、私は本當にシンプルでわかりやすい説明書を読みませんでした。

ここで、quira が作成しているオープンソース コミュニティに感謝する必要があります。コミュニティで出會った親愛なる友人の一人、K OM が助けを申し出てくれました。私たちは、電話で彼が開始するための 3 つの簡単なステップを説明してくれることを期待していました:

1. まずプロジェクトに移動し、「.devcontainer/devcontainer.json」というファイルを設定します
2. 開発コンテナ ジェネレーターを使用して開発コンテナを生成します
3. Readme を編集してユーザーに知らせて完了です!

本當にそんなに簡単ですか?簡単に言うと、はいです。しかし、これにはそれだけではありません。ワークスペースのテストはデイトナの學習と使用の大きな部分を占めると私は信じたいと思っています。

実際に私を動機づけたのは何ですか?そして、この旅で最もイライラしたことは何ですか?
最初の 100 件の有効な投稿には、それぞれ 50 米ドルが贈られます。これがあなたにとってモチベーションの要因ではないとしたら、何が動機なのかわかりません。

デイトナには次のような特徴的な言葉があります:

しかし、これが私にとって最もイライラする部分でした。アプリケーションは私のマシンでは動作していましたが、レビュアーのマシンでは動作しなかったので、一瞬疑問が生じました: Daytona には本當に価値があるのですか?

ははは、そういえば。本當に面白いですね。間違った設定をし、デイトナが虛偽の主張をしていると考えて非難したのは私でした。

はい、報酬を求めて來たことは認めますが、正直に言うと、テクノロジーを求めてそこに留まりました。私はデイトナの本當の実力を目の當たりにしたので、これらすべてのフラストレーションに耐えることができました。

*そこで、私は具體的にどのような問題に直面したのでしょうか?という疑問が生じます。 *

最初に生じた問題は、AI を使用して生成したコンテナーがデイトナ ワークスペースを作成しようとしたときに致命的なエラーをスローしていたことでした。

その問題を解決した後、次に思いついたのは、プロジェクトが vite を使用して作成されているということでした。この場合、畫面に何も表示されないことがわかりました。白い空白のページとして屆きます。これはクライアントの問題でした。

その後、クライアントの問題を解決したところ、サーバーが応答しなくなりました。

クライアントとサーバーの両方が動作し始めたときに、この CORS 問題が発生しました。

最後に、サーバーを削除して API を直接呼び出しましたが、ワークスペースの作成中にエラー メッセージが表示されましたが、それでも IDE は開きました。コードに加えた変更に合わせて devcontainer.json を変更する必要があることがわかりました。

解決策とその解決策にどうやってたどり著いたのか?

正直に言うと、すべての問題には非常に単純な解決策が関連付けられていました。おそらくデイトナチーム、特にJafaの協(xié)力がなかったら、私はそれらを決して理解できなかったでしょう。彼は辛抱強く検討し、必要な変更を提案してくれました。彼は私がデイトナについて、それがどのように機能するのか、そしてなぜデイトナが最高であるのかについてもっと學ぶのを手伝ってくれました。

必要になる可能性のある解決策は次のとおりです:

1. プロジェクトで Vite を使用している場合は、package.json でホスト フラグを使用して vite を指定する必要があります。次のようになります:
   

2. フロントエンドとバックエンドの両方の要件がある場合は、サーバー ポートを転送ポートとして追加する必要があります。次のようになります:
   

3. そして、あなたが遭遇する可能性のあるすべての問題に対する最終的な解決策は、質(zhì)問することです。デイトナのスラックに參加して、あなたの問題について話してください。きっとあなたが求めている助けが得られると思います。 Slack リンク

私の提案、デイトナを使用する理由
むしろなぜデイトナではないのかと聞きたいです。使い方はとても簡単で、管理も簡単です。これにより、複雑な開発環(huán)境のセットアップを行う必要がなくなります

デイトナを使用すると、セットアップについて心配することなく、本當に重要なことに集中できます。

デイトナを開発者にとって魅力的な選択肢にしていると私が感じる最高の機能は次のとおりです:

• 単一コマンド:
  たった 1 つのコマンドで開発環(huán)境全體を起動します。手動で設定する必要はありません。すべての準備がすぐに完了します。

• どこでも実行:
  ラップトップ、リモート サーバー、クラウドのいずれであっても、開発環(huán)境はどこでも機能します。完全に柔軟なので、どのマシンからでも作業(yè)できます。

• IDE サポート:
  VS Code や JetBrains などの人気のあるツールとシームレスに統(tǒng)合します。さらに、Web IDE が組み込まれているため、セットアップなしでコーディングを開始できます。

• セキュリティ:
  安全な VPN 経由で開発環(huán)境に自動的に接続します。これにより、データが安全に保たれ、リモートであっても安全に作業(yè)できるようになります。

これらの機能は時間を節(jié)約し、柔軟性を高め、開発プロセスをスムーズかつ安全に保ちます。開発者にこれ以上何を求めることができますか?あらゆるレベルの開発者に最適です。

正直なフィードバック!
まあ、完璧だと主張するのは少し行き過ぎかもしれません。 これは業(yè)界で最高のものの 1 つだと思いますが、実際にユーザー エクスペリエンスを向上させる可能性のある特定の変更があります。

• 事前に構(gòu)築されたフレームワーク固有のテンプレート はい、サンプルではなくテンプレートを意味します。何がそんなに違うのでしょうか？デイトナがサンプルを収集しているのは、開発者がそれらのサンプルを參照してデイトナのワークスペースを回転させることができるようにしていることを私は知っています。

ただし、Daytona が事前構(gòu)成された devcontainer.json ファイルを含む、人気のある技術スタックの一部にすぐに使用できるテンプレートを提供している場合。いくつかのテンプレートをサポートする対話型セットアップ ウィザードのようなもの。

• ワンクリック環(huán)境共有 デイトナは開発環(huán)境を即座に共有する機能を追加できると思います。開発者は、コラボレーションのためにチームメイトにリンクを送信できます。

組み込みの Web IDE 経由でアクセスできる、環(huán)境への安全なリンクを生成する daytona share のようなもの。 Google ドキュメントと同様に、ここでライブ コラボレーションを行うこともできます。

• おそらく AI を活用したトラブルシューター 私がこれを思いついたのは、多くのプロジェクトが、ポートの設定ミスや依存関係の不一致など、非常に単純な問題で行き詰まっていたからです。

繰り返しになりますが、これらは何が改善できるかについての私の考えです!

テイクアウト:
シンプルな言葉です。本を表紙で判斷しないでください。デイトナは私が説明した以上のものであり、試してみなければ決してわかりません。それで、何を待っているのですか？今すぐお試しください!

そして、お見送りの前に最後にもう一つ、これを発案してくれたQuiraとDaytonaのチーム全員に深く感謝の意を表したいと思います。稱賛!

私のプロジェクトへの Github リンク
デイトナのGithubリンク
デイトナクエストへのリンク

以上がDaytona-Sample-React: テキスト AIの詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。