記事ディレクトリ
Cloud Studio は、開発者に常時接続のクラウドベースのワークステーションを提供する、ブラウザベースの統合開発環境 (IDE) です。ユーザーはCloud Studioを利用する際にインストールする必要がなく、ブラウザを開いていつでもどこでもオンラインでプログラミングが可能です。
バックグラウンド
クラウド コンピューティング テクノロジの成熟と人気に伴い、従来のプログラミング機能やリソースがクラウド サービスの形で公開されることが増えています。ミドルウェアやデータベースなどの水平機能サービスコンポーネントから、顔認識や認証サービスなどの基本的なビジネスサービスコンポーネントまで、すべてクラウド上で簡単に入手できます。Cloud StudioCloudIDE（Web IDE/在线 IDE/Cloud IDE）は Tencent Cloud が独自に開発したオンライン プログラミング プラットフォームであり、ローカル デバイスに限定されず、クラウド サービスを通じてコードの作成、実行、デバッグが可能です。このサービスモデルは単なるクラウド上のソフトウェア開発環境ではなく、インフラストラクチャサービスも含めたDevelopment-environment-as-a-Serviceサービスモデルとなっています。これは、プロジェクトをローカルで保守および設定することなく、ブラウザ上で直接開発できることを意味し、真のゼロしきい値開発を実現します。
I.はじめに
さまざまなデバイスでプロジェクトを開発するときに、さまざまなアプリケーションやプラグインを繰り返しインストールするのに苦労したことはありませんか? これを使用するとCloud Studio、これらの問題はいずれも存在しません。Cloud Studio開発者がいつでもどこでも簡単かつ効率的に開発できるブラウザベースの統合開発環境です。
を使用すると、コードのハイライト表示、自動補完、ターミナルなどのオンライン プログラミングの基本機能Cloud Studioを実現できるほか、Git、リアルタイム デバッグ、プラグイン拡張機能などの強力な機能を簡単に統合できます。これらの機能の存在は、さまざまなアプリケーションの開発、コンパイル、展開を迅速に完了するのに役立つだけでなく、開発効率と開発エクスペリエンスを向上させることにも役立ちます。IDE
最も容赦ないのは、Cloud Studio中断のないクラウド ワークステーションを提供するだけでなく、複数のデバイスで同期できるため、開発プロセスがよりスムーズかつ効率的になることです。！！！これは急がなければなりません！！
このブログ投稿では、イマーシブ開発CloudStudioのスリルを体験し、 Web3 ポストカードプロジェクトの事例を通じて製品の詳細を段階的に説明します。
プロセス全体を通じて、私たちは学びます
Cloud Studioプロジェクトにおける役割Cloud Studioプロジェクト環境の初期化に使用する方法Cloud Studiogiteeリポジトリをプロジェクトとして管理するためにプロジェクトをリンクする方法Cloud Studio起こり得るいくつかの状況
2. Cloud Studioの主な機能と活用シーン
CloudStudioこれは、次のようなさまざまなアプリケーション シナリオに適したブラウザベースのクラウド統合開発環境です。
-
クイック スタート プロジェクト:
CloudStudio使用されるプリセット環境は、面倒な環境設定を行わずに、対応するタイプのワークスペースを直接作成し、プロジェクトを迅速に開始して開発状態に入ることができます。 -
リアルタイムで Web ページをデバッグ:
CloudStudio組み込みのプレビュー プラグインにより、Web アプリケーションをリアルタイムで表示できます。コードが変更されると、プレビュー ウィンドウが自動的に更新されるため、CloudStudio で Web ページをリアルタイムで開発およびデバッグできます。 -
クラウド サーバーへのリモート アクセス:
CloudStudio独自のクラウド サーバーに接続できるため、エディターでクラウド サーバー上のファイルを表示し、オンライン プログラミングと展開を実行できます。
3. Cloud Studio実験の事前準備
3.1. 公式ウェブサイトを開く
公式サイトを開く以下のリンクをクリックして公式サイトに飛び、「登録/ログイン」をクリックします。公式ウェブサイト
3.2. Cloud Studio を登録します。
ここ で登録してログインすると非常に便利でCloud Studio、次の 3 つの登録方法が提供されています。
CODINGアカウント認証を使用して登録/ログインします- WeChat認証による登録/ログイン
- 許可された登録/ログインを使用する
GitHub(この記事で使用)
登録が完了したら、CloudStudio提供されているテンプレートを使用してプロジェクトをビルドできます。！
4. Web3 プロジェクトをビルドする
ここでは、ブロガーが開発したweb3ポストカード プロジェクトをts + react例に挙げます。プロジェクト全体は です。その後、製品のデモを行います。プロジェクトのコードは少し面倒なので、コードの詳細には触れません。これはテクノロジーベースのWeb3ソーシャルポストカードプロジェクトで、思い出を集めて共有する新しい方法を提供します。プロジェクトは、これをデータの分散ストレージ用のInfuraノード サービスとして使用し、ユーザーがブラウザーを通じてプロジェクトと対話できるようにするためにこのサービスを使用します。そしてデザイナーに「クリエイターインセンティブ」を提供します。IPFSMetaMask
プロジェクトの効果は以下の通りです。
4.1. プロジェクト内の技術スタック
Hardhatこれは、開発者が Ethereum スマート コントラクトを迅速かつ効率的に作成、テスト、展開できるようにする開発フレームワークです。Next.jsこれは、開発者が高性能でスケーラブルな Web アプリケーションを構築するのに役立つ React ベースのサーバー側レンダリング フレームワークであり、開発者が迅速に開発および展開できるようにいくつかの開発ツールとプラグインを提供します。Metamaskこれはイーサリアム ウォレットのブラウザ拡張機能であり、ユーザーがイーサリアム アカウントを管理し、ブロックチェーン トランザクションを実行できるようにすると同時に、セキュリティとプライバシー保護機能を提供し、分散型アプリケーションでのユーザー インタラクションをより便利で安全にします。IPFSこれは分散型分散ファイル システムであり、開発者がさまざまな種類のファイルやデータを保存してアクセスするのに役立ち、高度な信頼性、セキュリティ、拡張性を備えており、開発者がより信頼性が高く安全な分散アプリケーションを構築するのに役立ちます。TypeScriptこれはオープン ソース プログラミング言語です。JavaScript のスーパーセットであり、開発者がより信頼性が高く、保守が容易なコードを作成するのに役立ちます。また、開発者が迅速に開発し、デバッグ。
4.2. gitee でコードを管理し、CloudStudio で環境を初期化する
次に、プロジェクトをローカルのgiteeウェアハウスにアップロードして、その後のCloudStudio初期化を行います。
CloudStudio次に、このプロジェクトの作業環境を構築するためのスペースの作成に戻ります。プロジェクトはクラウド IDE 上でオンサイトで開発されていないため、ここではテンプレートを使用して作成する必要はありません。新しいワークスペースを選択し、[ Input Warehouse address]を選択し、開発環境を次のように選択します。React + node 18
「新規」をクリックして環境を初期化すると、次のような効果が得られます。
4.3 プレビュープロジェクトを実行する
プロジェクトが正常に取得されたら、プロジェクトの実行とプレビューの準備をします。CloudStudio の組み込みターミナルを使用して、次のコマンドを実行して依存関係をインストールします。
yarn install
依存関係がインストールされたら、次の作業を開始できます。
yarn start
新しいポートが右下隅で監視されると、プロンプト メッセージがポップアップ表示され、組み込みのプレビューを開いて開始されたプロジェクトを確認できます。
ローカル起動とまったく同じであることがわかりますが、インストール環境が不要なので非常に便利です。
4.4 テストプロジェクトの運用状況
起動は正常に開始されましたが、プロジェクトが新しい環境で正常に実行されるかどうかを確認するために、いくつかのテストを行う必要があります。ここでは、接続を使用してmetamaskログイン テストを実行します。
connect財布が正常であることがわかり、ポストカードを渡し始めます
ipfsここで、この環境では上の画像を読み込むことができないことがわかり、操作はまだ完了していません
。通常は次のようになります。
ただし、全体的な機能には問題はありません。ネットワーク関連の問題が原因である可能性があります。全体的な操作エクスペリエンスは依然として良好です。！！
5. その他の機能のデモンストレーション
5.1. 複数人のコラボレーション
コラボレーション コラボレーションを開始するには、開始者は [コラボレーションの開始] ボタンをクリックしてコラボレーション招待メッセージを生成し、開始者は [リンクを再度コピー] ボタンをクリックして次の情報を貼り付け、プロジェクトに参加する必要がある人に送信します。 。同時に、プロジェクトは共同タイミングに入り、そのタイミングが右上隅のコントロール パネルに表示されます。招待情報の内容は以下の通りです。 「k9sec がワークスペース コラボレーションに招待します。リンクをクリックしてください: https://cloudstudio.net/share/xxxxxx Cloud Studio MetaWork、複数人コラボレーションを開始できます!!」
5.2. バージョン管理に Git を使用し、プロジェクトを gitee に公開する
ここで、にreadme説明を追加し、ウェアハウスのソース コード管理モジュールcommitに移動する準備をします。変更が表示されたことがわかります。ここで、と を介して変更を同期できます。非常に素晴らしい！効果は次のとおりです。gitee
commitsyncchange
他にも機能がたくさんあるので一つずつ紹介はしませんが、気になる方は公式サイトにアクセスしてチェックしてみてください！！！
6. よくある質問と注意事項
- 開発中にネットワークが読み込め
web3ないというプロジェクトに適していない点を発見しましたipfsが、今後最適化できるかはわかりません。 - 複数人でコラボしていると、コラボに参加した招待者にメッセージが届かないことがありますが、ネットワークの問題なのかその他の理由なのかわかりませんが、フィードバックもなくずっと待たされることになります。
- また、クラウドホストのワークスペースで切断や再起動が頻繁に発生しますが、その理由はドキュメントを確認することで判明しており、皆様が同じような状況にならないようにするためのものであり、公式サイトでは次のように回答されています。
- 現在、クラウド ホスト ワークスペースのトラフィックは
Cloud Studioサーバーによってプロキシされているため、アクセス パスはローカル マシン -> Cloud Studio プロキシ サーバー -> クラウド ホストCloud Studioとなり、ネットワーク環境により接続が不安定になります。現在、接続の安定性向上のためCloud Studio、アクセスパスをローカルマシン→クラウドホストとして最適化中ですので、ご期待ください。
- 現在、クラウド ホスト ワークスペースのトラフィックは
7. まとめ
Tencent Cloudを使ってみると、Cloud Studio環境構築から運用までの全体的な感触は相変わらず非常にスムーズで、得たものは大きいと感じています。アシスタントは、実際に遭遇するいくつかの質問にも積極的に答えてくれます。数回のCSDNトレーニングと公式ドキュメントの学習を通じて、CloudStudioクラウド製品についてよく理解しました。本当に非常に優れたクラウド製品ですIDE。フォローアップ作業では、また、コストを削減し、効率を向上させるために、Tencent Cloud から会社に多数の効果的なソリューションを推奨します。
CloudStudioこのイベントの後、ソリューションを選択する際の参考として、関連する利点をまとめました。
Python、 、JavaなどNode.jsを含む複数の言語環境がサポートされています。- オンライン プログラミング、コード変更、リアルタイム デバッグなどの操作を実行できるワークスペースの作成をサポートします。
Gitバージョン管理とリソース管理のためのクラウド ホストへの接続をサポートします。- アプリケーションの導入とチームのコラボレーションを促進するクラウド導入キットとコラボレーション キットを提供します。
- カスタム テンプレート、オンライン プレビューおよびデバッグ機能をサポートします。
VS Codeユーザー エクスペリエンスを向上させるために、プラグインのオンライン インストールをサポートします。- 小規模および中規模のプロジェクトに適した、ボリュームに応じた請求とリソース パックの購入をサポートします。
総じて、CloudStudioこの実践事例のもとでも、この開発手法がもたらす根本的な変化を学び実感しましたが、実際、低級言語から高級言語へ、時代に即した製品でもあり、自社構築サーバーからクラウドサーバーまで、各製品の誕生は反復労働から解放されることであり、おそらく将来的には開発に必要なのはコア業務コードの一部のみで、標準化されたすべての機能がワンクリックで組み立てられるようになるでしょう。 Tencent Cloud のおかげで、巨人の肩に立つことをまだ学ばなければなりません。豊富な基礎サポートを提供し、現在の開発者の開発方法がますますシンプルかつ効率的になっています。！！
8. 関連リンク
