[Tencent Cloud Cloud Studio 実践トレーニングキャンプ] - Cloud Studio は Vue プロジェクトのクラウド開発を支援します

I.はじめに

開発歴2年のフロントエンド開発者として、バックエンドとの連携を行ってきましたが、スタイルを書いてインターフェースを確認することしかできませんでしたが、自分で改善してみようと思い、バックエンドの画面を見てみましたたとえば、接続したバックエンドは Java です。この環境では、何度かセットアップを試みましたが、うまくいきませんでした。Windows を使用しているのですが、常にいくつかのファイルが欠落しているというメッセージが表示されます。ハードウェアをフォーマットしたくないので、毎日毎日やってるだけで、まだ練習していません。

また、バックエンドの学生が使っているIDEはIDEAなのですが、インストール後にパソコンを見てみると、ファンの音がうるさくCPUが急上昇していました。忘れて気にしないほうがいいかもしれません。。

今回直接CSDNとTencent Cloudが開催するイベントに出会い、ローカル環境とは関係なく便利に環境を構築できるリモートIDEがあることを知りました。必要なのはインターネット接続だけなので、とても興味があったので勉強してみることにしました。

イベントの説明:

「Tencent Cloud Cloud Studio Practical Training Camp」は、Tencent Cloud と CSDN が開始した一連の開発者技術実践活動であり、技術共有ライブブロードキャスト、実践的な実験プロジェクト、オリジナル作品のコレクション、賞品などを通じて開発者に没入型の体験を提供します。 Tencent Cloud 開発者ツール Cloud Studio も実践的な技術力を向上させます。このイベントは複数の難易度をカバーしており、現在主流のプログラミング言語をほぼすべてサポートしていますので、技術初心者でも上級開発者でも、何かを得ることができれば幸いです。

ここに画像の説明を挿入します

2.クラウドスタジオとは何ですか?

ここに画像の説明を挿入します

Cloud Studio は、開発者に安定したクラウドワークステーションを提供するブラウザベースの統合開発環境 (IDE) です。Cloud Studio を使用する場合はインストールは必要なく、ブラウザを開いてすぐにプロジェクトを開始できます。基盤となるリソースは自動的にスケールアップおよびスケールダウンされるため、コストが大幅に節約され、ローコード開発により時間と労力が節約されます。

Webベースのコードエディタ:

コードの強調表示、オートコンプリート、Git 統合、ターミナルなどの基本的な IDE 機能が含まれています
リアルタイムデバッグ、プラグイン拡張機能などをサポートし、開発、コンパイル、展開の効率を向上させます。

クラウドサーバーへのリモートアクセスをサポートします。

Tencent Cloud SCF 業界のユーザーに、開発、テスト、展開の完全なクローズドループのクラウドネイティブ開発エクスペリエンスを提供します。

開発ニーズを満たすために自社開発した複数のプラグイン:

たとえば、コラボレーションプラグイン、カスタムテンプレートプラグイン、プレビュープラグイン、展開プラグインなど、プログラミングの可能性を解き放つのに役立ちます。

Cloud Studio を使用すると何が得られるのか分析してみましょう。
まず、かさばる IDE をローカルにインストールする必要がありません。たとえば、私はフロントエンド開発に Webstrom を使用していましたが、あまりにも行き詰まっていたため、軽量の vscode IDE に変更する必要がありました。 IDE のインストールには、コンピュータのハードウェア構成に関する要件だけでなく、ハードディスク容量に関する要件もあります。

第 2 に、フロントエンド開発にはノード、npm、yarn、pnpm などの面倒な開発環境をローカルにインストールする必要がなく、バックエンド開発には Java 仮想マシンやその他の Java コンポーネントをインストールする必要がありません。

第三に、フロントエンド開発、淘宝網画像ソース、Java 構成環境変数など、プロジェクトのカスタマイズニーズを満たすように構成する必要があります。

4 番目に、Git 環境を構成し、その他の構成を初期化します。

全体として、多くの複雑な構成と多くの反復作業が必要となり、非常に非効率的です。

Cloud Studio を使用した後は、環境をインストールせずに直接インストールできるため、非常に実用的です。また、クラウド上のリソースも使用するため、優れたハードウェアは必要なくなります。標準構成では不十分な場合は、構成をアップグレードすることができ、豪華な構成も利用できます。

練習してみましょう:

Vue (/vjuː/ と発音、ビューと同様) は、ユーザーインターフェイスを構築するための JavaScript フレームワークです。標準の HTML、CSS、および JavaScript に基づいて構築されており、開発者がユーザーインターフェイスを効率的に開発できるよう、宣言型のコンポーネントベースのプログラミングモデルを提供します。

Vue は、独立したコミュニティ主導のプロジェクトです。2014 年に You Yuxi によって個人プロジェクトとして作成されました。[5] これは、数え切れないほどの実用的なテストを経た成熟したフレームワークです。現在、運用環境で最も広く使用されています。手動による最適化をほとんど必要とせずにほとんどの Web アプリケーションシナリオを簡単に処理できる最高の JavaScript フレームワークである Vue は、大規模なアプリケーションを完全に処理できます。

Vue.js は、ユーザーインターフェイスを構築するための進歩的なフレームワークです。ボトムアップのインクリメンタル開発設計を採用しており、コアライブラリはビュー層のみに焦点を当てています。一方、Vue は、Vue エコシステムによってサポートされる単一ファイルのコンポーネントとライブラリを使用して開発された複雑な単一ページアプリケーションを駆動する能力を十分に備えています。

Vue はフレームワークでありエコシステムです。Vue はさまざまな方法で使用できます。

ビルド手順は必要なく、静的 HTML を段階的に強化します。
任意のページに Web コンポーネントとして埋め込みます。
シングルページアプリケーション (SPA);
フルスタック/サーバーサイドレンダリング (SSR)。
Jamstack/静的サイト生成 (SSG)。
デスクトップ、モバイル、WebGL、さらにはコマンドラインターミナル用のインターフェイスを開発します。

社会人2年目でVueを使って開発してきましたが、以下では実際に操作を説明していきますまず、用意されているテンプレートを選択します。

ここに画像の説明を挿入します

クリックすると、初期化のためのウィンドウが直接開きます。

ここに画像の説明を挿入します

数分以内に初期化され、自動的に実行が開始されました。

上記に比べると、環境を何度もインストールする必要がなく、そのまま使えるのでとても簡単ではないでしょうか。Vue を一度も使用したことがない場合、数分で環境を初期化し、直接開発を開始できますか?

コピーライティングを変更するときに、リアルタイムのデバッグを実行できます。

ここに画像の説明を挿入します

このスペースを停止して、すべてのスペースをここで表示できます。

ここに画像の説明を挿入します

構成が十分ではないと思われる場合は、構成をアップグレードすることもできます。

ここに画像の説明を挿入します

ジャバ、試してみる

Java はオブジェクト指向プログラミング言語であり、C++ 言語のさまざまな利点を吸収するだけでなく、C++ の多重継承やポインタなどの難解な概念を放棄しているため、Java 言語には次の 2 つの特徴があります。機能もシンプルで使いやすい。静的オブジェクト指向プログラミング言語の代表である Java 言語は、オブジェクト指向理論を完全に実装しており、プログラマーが洗練された考え方で複雑なプログラミングを実行できるようにします。

Java には、単純さ、オブジェクト指向、分散、堅牢性、セキュリティ、プラットフォームの独立性と移植性、マルチスレッド、およびダイナミクスという特徴があります。Java は、デスクトップアプリケーション、Web アプリケーション、分散システム、組み込みシステムアプリケーションなどを作成できます。

ここに画像の説明を挿入します

Tencent Cloud Web サイトから直接ダウンロードでき、速度が非常に速いことがわかります。

Downloaded from nexus-tencentyun: http://mirrors.tencent.com/nexus/repository/maven-public/org/ow2/asm/asm-util/8.0/asm-util-8.0.jar (85 kB at 51 kB/s)
Downloading from nexus-tencentyun: http://mirrors.tencent.com/nexus/repository/maven-public/org/checkerframework/checker-compat-qual/2.5.5/checker-compat-qual-2.5.5.jar
Downloaded from nexus-tencentyun: http://mirrors.tencent.com/nexus/repository/maven-public/com/google/guava/listenablefuture/9999.0-empty-to-avoid-conflict-with-guava/listenablefuture-9999.0-empty-to-avoid-conflict-with-guava.jar (2.2 kB at 1.3 kB/s)

ここに画像の説明を挿入します

非常に便利なインターフェイスをすぐに作成しました。

次に Spring フレームワークについて学びましょう。

Spring フレームワークの概要:

Spring は、主に次のような JavaEE 開発用の軽量ソリューションを提供します。

IOC (または DI) のコアメカニズムは、ビジネスオブジェクトの置換の複雑さを軽減し、コンポーネント間の分離を改善する Bean ファクトリ (Spring コンテナ) を提供します。
AOP は、セキュリティ、トランザクション、ログなどのいくつかの一般的なタスクを集中管理し、再利用性と管理の利便性を向上させます。
ORM および DAO は、サードパーティの永続層フレームワークとの適切な統合を提供し、基盤となるデータアクセスを簡素化します。
優れた Web MVC フレームワークを提供します。
Springはプレゼンテーション層、ビジネス層、永続化層を貫いてJavaEEのソリューションをワンストップで提供するフレームワークであると言える。さらに、Spring を使用すると、侵入が少ない設計とコード汚染が非常に少ないという利点があります。
Spring フレームワークに基づくアプリケーションは、さまざまなアプリケーションサーバーから独立しており、一度書き込めばどこでも実行できる機能を実装できます。Spring は、
サードパーティのフレームワーク (ORM、DAO、および他のフレームワークに統合されたその他のモジュールなど) と適切に統合できますが、同時にSpring は高度なオープン性を提供し、アプリケーションは Spring に依存する必要がなく、開発者は Spring の一部または全体を自由に選択できます。

ここに画像の説明を挿入します

同時に 2 つのスペースを開くことはできません。

ここに画像の説明を挿入します

起動すると画面が表示されます。

ここに画像の説明を挿入します

そして、ここで説明したいのは、URL を使用して自宅でも開くことができ、非常に便利であるということです。会社に導入する必要はなく、自宅にも導入できるのは素晴らしいことです。

ここに画像の説明を挿入します

Cloud Studio の使用シナリオ

プロジェクトを迅速に開始: Cloud Studio のプリセット環境を使用すると、対応するタイプのワークスペースを直接作成し、面倒な環境構成を必要とせずにプロジェクトを開発ステータスにすばやく開始できます。
Web ページのリアルタイムデバッグ: Cloud Studio には、Web アプリケーションをリアルタイムで表示できるプレビュープラグインが組み込まれています。コードが変更されると、プレビューウィンドウが自動的に更新されるため、Cloud Studio でウェブページをリアルタイムで開発およびデバッグできます。
クラウドサーバーへのリモートアクセス: Cloud Studio を使用すると、独自のクラウドサーバーに接続できるため、エディターでクラウドサーバー上のファイルを表示し、オンラインプログラミングおよびデプロイメント作業を実行できます。

ここに画像の説明を挿入します

要約:

Cloud Studio は、開発者に中断のないクラウドワークステーションを提供するブラウザベースの統合開発環境 (IDE) です。Cloud Studioを使用する場合、ユーザーはインストールする必要がなく、ブラウザを開くだけでいつでもどこでもオンラインでプログラミングできます。

オンライン IDE として、Cloud Studio には、コードのハイライト表示、自動補完、Git 統合、ターミナルなどの基本的な IDE 機能が含まれており、リアルタイムデバッグ、プラグイン拡張機能などもサポートしており、開発者が開発を迅速に完了するのに役立ちます。コンパイル、およびさまざまなアプリケーションの展開。