私のデイトナ サンプルは、Mindsnap-prosemaster-daytona という React プロジェクトです。これは、MVC アーキテクチャに従って React、Node、AI を使用して開発された、非常にシンプルな初心者向けのアプリケーションです
私たちのペースの速い世界では、設定に時間を費やすことを望んでいる人はいません。開発者は、ただ作業を進めてコードを書き留めることを望んでいます。あなたのように聞こえますか？それでは、乾杯！正しい場所に来ました。
しかし、待ってください、それが開発の仕組みではないことは誰もが知っています。悲しいことに、最も単純なプロジェクトであっても、構成ツール、インストールするパッケージ、転送するポート、場合によっては VPN セットアップなどが必要です。ここでデイトナが開発者向けのシンプルかつ画期的なソリューションを提供します。
気になり始めましたね?
この投稿では、MindSnap ProseMaster を構築する私の旅をご紹介します。これは、長いテキストを簡単な要約、重要な洞察、楽しい記憶術に変換するように設計された超初心者向けのアプリケーションです。
このアプリケーションをどのように構築したかについての短い紹介から始めましょう。これが、react と Node を使用して構築した最初のアプリケーションだったと思います。とてもシンプルでした。 API 呼び出しがどのように行われるかを理解していると仮定すると、これはかなり簡単になります!
まず、これはユーザーが任意のテキストを入力できる入力ボックスが 1 つある単一ページのアプリケーションです。このテキストを使用してプロンプトを渡し、gemini API に送信します。 Gemini API からの応答が画面に表示されます。
それでは、コンテナなどのことについて何も知らない開発者である私が、どのようにしてデイトナのことを知ったのでしょうか?
さて、この件については Quira に感謝する必要があります。 Quira’s Quest 023 ではデイトナが登場し、6,000 ドルの高額賞金が獲得されました。それを知ってすぐに、クエストに提出するために自分のプロジェクトに目を通し始めました。
複雑なプロジェクトを選択すると、ワークスペースに DevContainer をセットアップするのが難しくなる可能性があるため、単純なプロジェクトを選択する必要があると考えたことをはっきりと覚えています。しかし、なんと、私はこれ以上の間違いはありませんでした。
読者の中には、開発コンテナ、ワークスペースに慣れていない人もいると思います。でも、心配しないでください。このブログですべてを説明しましたので、読み続けてください。ゆっくりとすべてが理解できるようになります。
実際にこれらの用語から始めましょう:
開発コンテナ: 開発に必要なすべてのツールと設定が含まれる事前構成された環境。
ワークスペース: これは、私たちが取り組んでいるすべてのファイル、コード、およびそれぞれのプロジェクトを保存および整理できるデジタル スペースです。
ポート: これを、開発環境と他のサービスまたはデバイスの間でデータが流れるドアのようなものとして考えてみましょう。
PostCreateCommand: 開発環境のセットアップ後に自動的に実行される devcontainer.json の重要なコマンド。これはセットアップタスクを完了するために使用されると思います。
Daytona を使用すると、スキル レベルに関係なく、開発環境のセットアップと管理がいかに簡単であるかがわかりました。私の経験から学び、デイトナが次のプロジェクトをどのようにスムーズかつ効率的にできるか見てみましょう!
私がどのように始めたのか詳しく見てみましょう
私はどちらかというと視覚的に学ぶ派です！つまり、分厚い文章を読み進めるよりも、実装のビデオや画像を見るのが好きだということです。いつものように、私は本当にシンプルでわかりやすい説明書を読みませんでした。
ここで、quira が作成しているオープンソース コミュニティに感謝する必要があります。コミュニティで出会った親愛なる友人の一人、K OM が助けを申し出てくれました。私たちは、電話で彼が開始するための 3 つの簡単なステップを説明してくれることを期待していました:
本当にそんなに簡単ですか?簡単に言うと、はいです。しかし、これにはそれだけではありません。ワークスペースのテストはデイトナの学習と使用の大きな部分を占めると私は信じたいと思っています。
実際に私を動機づけたのは何ですか?そして、この旅で最もイライラしたことは何ですか?
最初の 100 件の有効な投稿には、それぞれ 50 米ドルが贈られます。これがあなたにとってモチベーションの要因ではないとしたら、何が動機なのかわかりません。
デイトナには次のような特徴的な言葉があります:
しかし、これが私にとって最もイライラする部分でした。アプリケーションは私のマシンでは動作していましたが、レビュアーのマシンでは動作しなかったので、一瞬疑問が生じました: Daytona には本当に価値があるのですか?
ははは、そういえば。本当に面白いですね。間違った設定をし、デイトナが虚偽の主張をしていると考えて非難したのは私でした。
はい、報酬を求めて来たことは認めますが、正直に言うと、テクノロジーを求めてそこに留まりました。私はデイトナの本当の実力を目の当たりにしたので、これらすべてのフラストレーションに耐えることができました。
*そこで、私は具体的にどのような問題に直面したのでしょうか?という疑問が生じます。 *
最初に生じた問題は、AI を使用して生成したコンテナーがデイトナ ワークスペースを作成しようとしたときに致命的なエラーをスローしていたことでした。
その問題を解決した後、次に思いついたのは、プロジェクトが vite を使用して作成されているということでした。この場合、画面に何も表示されないことがわかりました。白い空白のページとして届きます。これはクライアントの問題でした。
その後、クライアントの問題を解決したところ、サーバーが応答しなくなりました。
クライアントとサーバーの両方が動作し始めたときに、この CORS 問題が発生しました。
最後に、サーバーを削除して API を直接呼び出しましたが、ワークスペースの作成中にエラー メッセージが表示されましたが、それでも IDE は開きました。コードに加えた変更に合わせて devcontainer.json を変更する必要があることがわかりました。
解決策とその解決策にどうやってたどり着いたのか?
正直に言うと、すべての問題には非常に単純な解決策が関連付けられていました。おそらくデイトナチーム、特にJafaの協力がなかったら、私はそれらを決して理解できなかったでしょう。彼は辛抱強く検討し、必要な変更を提案してくれました。彼は私がデイトナについて、それがどのように機能するのか、そしてなぜデイトナが最高であるのかについてもっと学ぶのを手伝ってくれました。
必要になる可能性のある解決策は次のとおりです:
プロジェクトで Vite を使用している場合は、package.json でホスト フラグを使用して vite を指定する必要があります。次のようになります:
フロントエンドとバックエンドの両方の要件がある場合は、サーバー ポートを転送ポートとして追加する必要があります。次のようになります:
そして、あなたが遭遇する可能性のあるすべての問題に対する最終的な解決策は、質問することです。デイトナのスラックに参加して、あなたの問題について話してください。きっとあなたが求めている助けが得られると思います。 Slack リンク
私の提案、デイトナを使用する理由
むしろなぜデイトナではないのかと聞きたいです。使い方はとても簡単で、管理も簡単です。これにより、複雑な開発環境のセットアップを行う必要がなくなります
デイトナを使用すると、セットアップについて心配することなく、本当に重要なことに集中できます。
デイトナを開発者にとって魅力的な選択肢にしていると私が感じる最高の機能は次のとおりです:
単一コマンド:
たった 1 つのコマンドで開発環境全体を起動します。手動で設定する必要はありません。すべての準備がすぐに完了します。
どこでも実行:
ラップトップ、リモート サーバー、クラウドのいずれであっても、開発環境はどこでも機能します。完全に柔軟なので、どのマシンからでも作業できます。
IDE サポート:
VS Code や JetBrains などの人気のあるツールとシームレスに統合します。さらに、Web IDE が組み込まれているため、セットアップなしでコーディングを開始できます。
セキュリティ:
安全な VPN 経由で開発環境に自動的に接続します。これにより、データが安全に保たれ、リモートであっても安全に作業できるようになります。
これらの機能は時間を節約し、柔軟性を高め、開発プロセスをスムーズかつ安全に保ちます。開発者にこれ以上何を求めることができますか?あらゆるレベルの開発者に最適です。
正直なフィードバック!
まあ、完璧だと主張するのは少し行き過ぎかもしれません。 これは業界で最高のものの 1 つだと思いますが、実際にユーザー エクスペリエンスを向上させる可能性のある特定の変更があります。
ただし、Daytona が事前構成された devcontainer.json ファイルを含む、人気のある技術スタックの一部にすぐに使用できるテンプレートを提供している場合。いくつかのテンプレートをサポートする対話型セットアップ ウィザードのようなもの。
組み込みの Web IDE 経由でアクセスできる、環境への安全なリンクを生成する daytona share のようなもの。 Google ドキュメントと同様に、ここでライブ コラボレーションを行うこともできます。
繰り返しになりますが、これらは何が改善できるかについての私の考えです!
テイクアウト:
シンプルな言葉です。本を表紙で判断しないでください。デイトナは私が説明した以上のものであり、試してみなければ決してわかりません。それで、何を待っているのですか？今すぐお試しください!
そして、お見送りの前に最後にもう一つ、これを発案してくれたQuiraとDaytonaのチーム全員に深く感謝の意を表したいと思います。称賛!
私のプロジェクトへの Github リンク
デイトナのGithubリンク
デイトナクエストへのリンク
以上がDaytona-Sample-React: テキスト AIの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
