[Tencent Cloud Studio 実践トレーニングキャンプ] 開発効率とコラボレーションの向上: Tencent Cloud Studio の強力な機能とメリットを探る

記事ディレクトリ

I.はじめに

数日前の話ですが、そのような状況が起こりました。新しく入社した同僚は、入社して間もなく新しいコンピューターを受け取りました。その後、彼は新しいプロジェクトに取り組みましたが、問題が発生しました。コンピュータに管理者権限がないため、必要なソフトウェアをインストールできませんでした。許可を得るまでに約 1 週間かかりました。つまり、実際にプロジェクトに参加して作業を開始できるようになるまで、長い間待たなければならなかったのです。しかし、この問題をすぐに解決して、すぐにプロジェクトに参加し、コードをダウンロードして作業を開始できるようにする方法はあるでしょうか? 現時点では、私たちの主人公である Tencent Cloud の Cloud Studio がここにあります。この記事では、Tencent Cloud CDE 製品 Cloud Studio に関する関連知識ポイントを理解して学習し、Tencent Cloud の Cloud Studio が上記の一般的な作業シナリオをどのように解決し、多くの利点があるかを確認することができます。

ここに画像の説明を挿入

2. Tencent Cloud Cloud Studioについて理解する

Tencent Cloud Cloud Studio の使用を今すぐ体験したい場合は、公式アドレスに直接アクセスしてください: https://cloudstudio.net/

2.1 クラウド開発環境とは

一般に、クラウドに詳しい学生であれば、多かれ少なかれ聞いたことがあるはずです云IDE。いわゆるクラウド開発環境、またはCDE(クラウド開発環境) です。では、クラウド IDE (CDE) とは何でしょうか?

Cloud IDE (CED)は、クラウド上の高速かつ柔軟なリソース機能を利用して、クラウド開発からテストまでを実行する新しい開発モデルです。コンテナの分離に基づいており、企業内の研究開発標準プロセスと組み合わせて、クラウド開発を強化します。企業の開発者と管理者は、研究開発コストを最適化および制御できます。

2.2 CDE の特徴と利点

ここに画像の説明を挿入

2.2.1 開発環境のワンクリック操作による効率化

IDE がクラウドベースの開発環境 CDE である場合、開発 Java などのパーソナライズされた開発環境を構成するときに、使用する JDK のバージョンを設定しており、使用するいくつかのプラグインはすでに設定されています。バッチ依存コードはロードされています。これはクラウド上にあるため、どのローカルマシン上にいても、クラウド環境の CDE にログインしている限り、ワンクリックでプログラムを直接実行できます。コンピュータを変更した場合でも、再設定の手間がかからず、インターネット経由でクラウドIDE(CDE)にアクセスできれば、イントラネットでも公共の環境でも開発作業を行うことができます。通信網。

2.2.2 生産性の向上と並行作業

Cloud IDE (CDE) 自体はローカルでのインストールや構成を必要とせず、柔軟にアクセスできるため、展開が簡素化され、ワンクリック操作が可能です。Cloud IDE (CDE) はクラウド上にあるため、クラウドエラスティックサーバー上で実行され、デマンドが可能です。調整されたコンピューティングおよびストレージリソースにより、開発中のパフォーマンスと安定性が保証され、生産性が向上します。

2.2.3 開発の標準化が進む

上記 2 つの機能を組み合わせることで、クラウド IDE (CDE) は、企業が標準的な開発プロセスを必要とする開発環境を統合的に構成することができ、クラウド IDE (CDE) は、従来の IDE の環境がローカル環境に存在するという状況を回避します。一致しない可能性があります。Cloud IDE (CDE) は、統一された開発環境、コラボレーション、自動化ツールを提供することで、開発プロセス中にチームが統一された規範や標準に確実に従うように支援します。これにより、潜在的なバグが軽減され、コードの品質が向上し、チームがより効果的に開発で共同作業できるようになります。

2.2.4 監督を提供し、資本とリソースを削減する

Cloud IDE (CDE) は、開発効率とチームの協力能力を向上させながら、監視機能、柔軟なリソース割り当て、自動化されたワークフローを提供することで、企業の資本投資とリソース支出を削減するのに役立ちます。

2.3 クラウド開発環境の4つの要素

Tencent Cloud Cloud Studio のプロダクトディレクターの要約によると、クラウド開発環境の 4 つの要素は、研究開発プロセスの効率を加速し、リスクを軽減し、開発者の複雑さを簡素化します。

クラウド化: コンピューティングの弾力性
、分離、干渉なし、並行開発、コスト削減。
コンテナ化: コスト削減、
分離、干渉なし、並行開発、コスト削減。
標準化: 統一環境統一
開発環境により、企業は標準的な研究開発プロセス管理と安全なコード開発を緊急に必要としています。
DevOps は、
ワンクリックで CDE を呼び出す要件から、送信とマージまで開発され、PR が完了すると、Ops プロセスがリリースされます。

ここに画像の説明を挿入

2.4 Tencent Cloud Cloud Studioの強力なAI機能

クラウド IDE (CDE) のいくつかの一般的な機能と利点については上で説明しましたが、Tencent Cloud Cloud Studio の機能はこれらをはるかに超えており、Tencent Cloud Studio のブロガーは、これらが非常に優れており、非常に高度な機能であると考えています。波を導入します。

2.4.1 AI との直接的な技術コミュニケーション

ChatGPT が普及した現在、多くの小規模パートナーが問題に遭遇した場合、検索エンジンは第一の選択肢ではなくなりましたが、Tencent Cloud Cloud Studio を使用する場合、ChatGPT は必ずしも第一の選択肢ではなく、 Tencent Cloud Cloud Studio AIで直接使用できます。ダイアログ機能、頻繁な切り替えを停止し、従来の検索エンジンを停止します。Cloud Studio で AI チャットを直接コーディングします。理解できないロジックコードを設定する場合は、AI コードアシスタントに答えてもらっても問題ありません。AI アシスタントは20 以上のプログラミング言語を学習し、習得しています。多数の開発パラダイム。

ここに画像の説明を挿入

2.4.2 コードの自動補完 (従来とは異なるコード補完)

これについて話すと、友人の中には、私の従来の IDE インストールは単なる組み込みの補完プラグインではないのか、と反論する人もいるかもしれません。

注: Tencent Cloud Cloud Studio のコード補完は、従来の意味での補完ではなく、単語や文法を直接補完するものではありません。Tencent Cloud Cloud Studio は、次のように、コメントに基づいて必要なコードを直接完成させることもできます。

ここに画像の説明を挿入

Tencent Cloud Cloud Studio は、ディレクトリ構造に従って README、Git 設定、スキャフォールディング、その他のファイルを自動的に生成します。

2.4.3 開発プロセス中にコンパイルエラーの提案が提供される

コンパイルエラーが発生しましたが、修正方法がわかりませんか? また、エラーコードに基づいて検索エンジンを使用して見つけますか? AI コードアシスタントの修正提案のショートカット機能を使用して、ワンクリックでコードの問題を見つけて修正をプッシュします。

ここに画像の説明を挿入

エラー行をコンパイルする前にマウスで新しい行を追加すると、強力なコードエラー修正機能によって修復提案が直接提供され、コードが修復されます。

ここに画像の説明を挿入

2.4.4 エキスパートレベルのコードレビューの提供レビュー機能の提供

この機能は非常に強力ですが、コードレビューの仕事を受けて、数千行、場合によっては数万行のコードに直面した場合、コードが仕様に準拠しているかどうかを確認するために、コードを段階的に読んでレビューするにはどうすればよいでしょうか? 開発者として、自分のコードがレビュー担当者によってレビューできることをどうやって確認できますか?これを行うための媒体が不足していますが、Tencent Cloud Cloud Studio でこれを行うことができます。コードを送信した後、Tencent Cloud Cloud Studio は次のことを行います。提出情報を入力し、関連するベストプラクティスに違反していないかどうかを確認するレビューを実施するのに役立ちます。

ここに画像の説明を挿入

2.4.5 単体テストコードの生成

ビジネスロジックを作成した後、単体テストを 1 つずつ作成する必要がありますか? AI コードアシスタントを使用すると、ワンクリックでテストコードをすばやく生成できます。コマンドを実行すると、Tencent Cloud Cloud Studio は测试単体テスト用の推奨コードを提供します。

ここに画像の説明を挿入
上記の例からわかるように、単体テストしたいコードを選択すると、それをコマンドで直接使用でき、Tencent Cloud Cloud /测试Studio が単体テストしたいコードを生成します。これは非常に便利です。

ここに画像の説明を挿入

2.5 Tencent Cloud Cloud Studio クラウド開発メタワークコラボレーション機能

2.5.1 コード連携機能

上では AI アシスタント関連の機能をいくつか紹介しましたが、以下ではさらにブラックテック機能をいくつか紹介します。グラファイトドキュメントやテンセントドキュメントなどのオンライン編集ツールを使用したことがありますか?複数人で編集する場合、相互に直接確認できます。操作内容と入力内容の観点から見ると、従来のIDEではマージコードをリモートウェアハウスに送信することで異なる開発者のコードをマージすることしかできませんでしたが、Tencent Cloud Cloud Studioでは複数人での共同開発を同時に実現できます。問題の開発や解決をしながらリモート会議を行うことも、同じマシンで対面して作業しているようなものです。

あなたが教育訓練機関の学生であれば、この機能について話すと目を輝かせるでしょう。このようなマルチカーソルのハイライトとフォロー機能は、教師と一緒に生徒を指導する場合に非常に便利で、教師に従ってカーソルの入力コードをたどって学習することができます。

ここに画像の説明を挿入

2.5.2 リアルタイムプレビューと端末連携

上記の例から、さまざまな人々のコラボレーションの内容が明確であり、複数人のコラボレーションが明確かつ秩序立って行われることがわかります。リアルタイムのプレビューと端末のコラボレーションにより、結果を管理できます。

ここに画像の説明を挿入

2.5.3 音声およびビデオ会議モード

あなたや同僚がリモート出張中、または二人とも在宅勤務中、相手がコードに問題を抱えており、あなたに何か質問したいというような状況に遭遇したことはありませんか。以前の従来のモデルによれば、最初にZoomまたはTencentミーティングを開催し、その後デスクトップを共有し、見せてもらい、その後バラバラする可能性が高くなります。

しかし、Tencent Cloud Studio を使用すると、この問題を完全に解決できます。Tencent Cloud Studio では、相手と直接音声通話またはビデオ通話を行うことができます。直接話すだけでなく、前に紹介したコードに従って連携することもできます。 . 直接連携して共同作業できる機能。

ここに画像の説明を挿入

実際にはこのような場面での活用シーンは非常に多く、解決すべき課題も非常に大きいのですが、技術的な会議を直接開催する場合でも、会議室を用意する手間を省いて直接会議を利用することができます。 Tencent Cloud Cloud Studio の機能です一键邀请。

Tencent Cloud Cloud Studio はスペースの制限を直接打ち破り、コラボレーションをより便利かつ効率的にすると言えます。

ここに画像の説明を挿入

3. Tencent Cloud Cloud Studioの実際の操作

上記では Tencent Cloud Cloud Studio の多くの機能を紹介しましたが、早速始めて直接体験してみましょう。

この章では、Tencent Cloud Cloud Studio の使用方法を紹介し、電卓開発事例を通じて Tencent Cloud Cloud Studio の実際の使用方法を示します。

3.1 Tencent Cloud Cloud Studioアカウントを登録する

Tencent Cloud Cloud Studio 公式 Web サイトに直接アクセスしてください: https://cloudstudio.net/

ここに画像の説明を挿入

登録またはログインページに移動し、個人の習慣に応じて 3 つのうちの 1 つを選択して直接登録できます。

ここに画像の説明を挿入

3.2 ワークスペースの作成

Tencent Cloud Cloud Studio アカウントの作成に成功すると、初期化インターフェイスに入り、ほぼすべての共通言語機能のテンプレートを含む、多くのテンプレートがホームページに提供されていることがわかります。このステップでは、次の図に示すように、「新規ワークスペース」ボタンをクリックします。

ここに画像の説明を挿入

「ワークスペースの作成」をクリックすると、作成に必要な入力情報がポップアップ表示されます。具体的な情報は次のとおりです。

スペース名: 必須、任意の名前を選択してください
スペースの説明: オプション、このスペースの説明に使用されます
作業カテゴリ: ここには 2 つのオプションがあります。托管空间選択するとデフォルトの請求が行われ、もう 1 つは独自のクラウドホストに関連付けられます。
コードソース: ウェアハウスをインポートすることを選択できます。ウェアハウスのアドレス、または空を選択することもできます。ここではデモンストレーションとしてここにいます。CODING で空のウェアハウスを作成し、コードをインポートしてリモートの CODING ウェアハウスに同期します。図書館。
開発環境: 独自の開発言語または環境を選択することも、使用するバージョン番号を選択することもできます
仕様構成：自分のニーズに応じて、さまざまなレベルの価格を選択できます。価格が高いほど、パフォーマンスが向上します。

すべての必須フィールドに入力したら、「新規」ボタンをクリックします。

ここに画像の説明を挿入

ワークスペースが作成されると、次の図に示すように、VSCode のスタイルと似たものになります。また、関連付けられた CODING ウェアハウス内のデフォルトの README.md ファイルも同期されます。

ここに画像の説明を挿入

3.3 Tencent Cloud Cloud Studio を使用してコードを作成する

ワークスペースを構成した後、Tencent Cloud Cloud Studio を使用してコードを直接記述し始めました。デモプロジェクトは、Windows に似た小さな電卓を作成することです。まず、電卓を描画するための HTML UI を作成しましょう。

まず calc.html をビルドし、電卓ページに描画します。

ここに画像の説明を挿入

完全なコードは次のとおりです。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Tecent Cloud Studio Demo Calculator</title>
    <!-- 引入样式文件 -->
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
      
 <main>
     <div class="calculator">
  <div class="input" id="input"></div>
  <div class="buttons">
    <div class="operators">
      <div>+</div>
      <div>-</div>
      <div>&times;</div>
      <div>&divide;</div>
    </div>
    <div class="leftPanel">
      <div class="numbers">
        <div>7</div>
        <div>8</div>
        <div>9</div>
      </div>
      <div class="numbers">
        <div>4</div>
        <div>5</div>
        <div>6</div>
      </div>
      <div class="numbers">
        <div>1</div>
        <div>2</div>
        <div>3</div>
      </div>
      <div class="numbers">
        <div>0</div>
        <div>.</div>
        <div id="clear">C</div>
      </div>
    </div>
    <div class="equal" id="result">=</div>
  </div>
</div>
 </main>
 
  <!-- 导入JS -->
  <script  src="./js/script.js"></script>
      
  </body>
</html>

CSS スタイルファイル style.css を作成し、デバッグ CSS スタイルを最終的な効果に変更します。

コードと CSS スタイルを調整し、プレビュー機能を直接開くと、いつでもコードを変更し、同時に効果を確認できます。

ここに画像の説明を挿入

完全なコードは次のとおりです。


.calculator {
    
    
  padding: 20px;
  max-width: 440px;
  margin: 10px auto;
  -webkit-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.input {
    
    
  border: 1px solid #ddd;
  border-radius: 1px;
  height: 60px;
  padding-right: 15px;
  padding-top: 10px;
  text-align: right;
  margin-right: 6px;
  font-size: 2.5rem;
  overflow-x: auto;
  transition: all .2s ease-in-out;
}

.input:hover {
    
    
  border: 1px solid #bbb;
  -webkit-box-shadow: inset 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
}

.buttons {
    
    }

.operators {
    
    }

.operators div {
    
    
  display: inline-block;
  border: 1px solid #bbb;
  border-radius: 1px;
  width: 80px;
  text-align: center;
  padding: 10px;
  margin: 20px 4px 10px 0;
  cursor: pointer;
  background-color: #ddd;
  transition: border-color .2s ease-in-out, background-color .2s, box-shadow .2s;
}

.operators div:hover {
    
    
  background-color: #ddd;
  -webkit-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
  border-color: #aaa;
}

.operators div:active {
    
    
  font-weight: bold;
}

.leftPanel {
    
    
  display: inline-block;
}

.numbers div {
    
    
  display: inline-block;
  border: 1px solid #ddd;
  border-radius: 1px;
  width: 80px;
  text-align: center;
  padding: 10px;
  margin: 10px 4px 10px 0;
  cursor: pointer;
  background-color: #f9f9f9;
  transition: border-color .2s ease-in-out, background-color .2s, box-shadow .2s;
}

.numbers div:hover {
    
    
  background-color: #f1f1f1;
  -webkit-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
  border-color: #bbb;
}

.numbers div:active {
    
    
  font-weight: bold;
}

div.equal {
    
    
  display: inline-block;
  border: 1px solid #42464b;
  border-radius: 1px;
  width: 17%;
  text-align: center;
  padding: 100px 10px;
  margin: 10px 6px 10px 0;
  vertical-align: top;
  cursor: pointer;
  color: #FFF;
  background-color: #373c43;
  transition: all .2s ease-in-out;
}

div.equal:hover {
    
    
  background-color: #aeb2b8;
  -webkit-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
  border-color: #2f3032;
}

div.equal:active {
    
    
  font-weight: bold;
}

加算、減算、乗算、除算の計算ロジックが正確であることを確認するための計算ロジック js ファイル script.js を記述します。

ここに画像の説明を挿入

計算ロジックのJavaScriptのコードは次のとおりです。

"use strict";

var input = document.getElementById('input'),             // 输入/输出按钮
  number = document.querySelectorAll('.numbers div'),     // 数字按钮
  operator = document.querySelectorAll('.operators div'), // 运算符按钮
  result = document.getElementById('result'),             // 等号按钮
  clear = document.getElementById('clear'),               // 清除按钮
  resultDisplayed = false; // 标记以监视显示的输出内容

// 为数字按钮添加点击事件处理程序
for (var i = 0; i < number.length; i++) {
    
    
  number[i].addEventListener("click", function(e) {
    
    

    // 存储当前输入字符串和其最后一个字符在变量中 - 以后使用
    var currentString = input.innerHTML;
    var lastChar = currentString[currentString.length - 1];

    // 如果结果未显示，只需继续添加
    if (resultDisplayed === false) {
    
    
      input.innerHTML += e.target.innerHTML;
    } else if (resultDisplayed === true && lastChar === "+" || lastChar === "-" || lastChar === "×" || lastChar === "÷") {
    
    
      // 如果当前显示结果且用户按下运算符
      // 我们需要继续将其添加到字符串以进行下一次运算
      resultDisplayed = false;
      input.innerHTML += e.target.innerHTML;
    } else {
    
    
      // 如果当前显示结果且用户按下数字
      // 需要清除输入字符串并添加新输入以开始新的操作
      resultDisplayed = false;
      input.innerHTML = "";
      input.innerHTML += e.target.innerHTML;
    }

  });
}

// 为运算按钮添加点击事件处理程序
for (var i = 0; i < operator.length; i++) {
    
    
  operator[i].addEventListener("click", function(e) {
    
    

    // 存储当前输入字符串和其最后一个字符在变量中 - 以后使用
    var currentString = input.innerHTML;
    var lastChar = currentString[currentString.length - 1];

    // 如果最后一个输入字符是运算符，则用当前按下的运算符替换它
    if (lastChar === "+" || lastChar === "-" || lastChar === "×" || lastChar === "÷") {
    
    
      var newString = currentString.substring(0, currentString.length - 1) + e.target.innerHTML;
      input.innerHTML = newString;
    } else if (currentString.length == 0) {
    
    
      // 如果第一个按下的键是运算符，则不执行任何操作
      console.log("enter a number first");
    } else {
    
    
      // 否则，只需将按下的运算符添加到输入框
      input.innerHTML += e.target.innerHTML;
    }

  });
}

// 点击“等号”按钮时
result.addEventListener("click", function() {
    
    

  // 这是我们将要处理的字符串
  var inputString = input.innerHTML;

  var numbers = inputString.split(/\+|\-|\×|\÷/g);

  var operators = inputString.replace(/[0-9]|\./g, "").split("");


  var divide = operators.indexOf("÷");
  while (divide != -1) {
    
    
    numbers.splice(divide, 2, numbers[divide] / numbers[divide + 1]);
    operators.splice(divide, 1);
    divide = operators.indexOf("÷");
  }

  var multiply = operators.indexOf("×");
  while (multiply != -1) {
    
    
    numbers.splice(multiply, 2, numbers[multiply] * numbers[multiply + 1]);
    operators.splice(multiply, 1);
    multiply = operators.indexOf("×");
  }

  var subtract = operators.indexOf("-");
  while (subtract != -1) {
    
    
    numbers.splice(subtract, 2, numbers[subtract] - numbers[subtract + 1]);
    operators.splice(subtract, 1);
    subtract = operators.indexOf("-");
  }

  var add = operators.indexOf("+");
  while (add != -1) {
    
    
    numbers.splice(add, 2, parseFloat(numbers[add]) + parseFloat(numbers[add + 1]));
    operators.splice(add, 1);
    add = operators.indexOf("+");
  }

  input.innerHTML = numbers[0];

  resultDisplayed = true;
});

// 在按下清除按钮时清空输入
clear.addEventListener("click", function() {
    
    
  input.innerHTML = "";
})

ここに画像の説明を挿入

3.4 コードをリモートウェアハウスにプッシュする

コードを作成したら、コードをリモートウェアハウスに送信する方法を次に示します。

バージョン管理ボタンをクリックし、コミット情報を書き込み、送信ボタンをクリックします。

ここに画像の説明を挿入

Tencent Cloud Cloud Studio を初めて使用する場合、ユーザー名とメールアドレスが設定されていないというエラーメッセージが表示される場合があることに注意してください。解決策は次の図に示されています。

git config --global user.email "[email protected]"
git config --global user.name "bluetata"

私の 2 つのコマンドを Tencent Cloud Cloud Studio のターミナルに直接コピーして実行できます。

ここに画像の説明を挿入

最後に、[変更の同期] ボタンをクリックして、コードをリモートスレーブライブラリ CODING にプッシュします。

ここに画像の説明を挿入

CODING のリモート倉庫で送信したコードを確認できます。

ここに画像の説明を挿入

4. 記事の最後にまとめ

この記事の紹介を通じて、クラウド開発環境としての Tencent Cloud Cloud Studio の特徴と利点を深く理解しました。開発効率の向上、ワンクリック操作の実現だけでなく、並行作業、開発プロセスの標準化、リソース投資の削減も実現します。中でも強力なAI機能はさらに印象的で、AIと直接技術的なコミュニケーションを行うだけでなく、さまざまなコードの自動補完やエラーの提案、プロレベルのコードレビューや単体テストコードの生成も提供します。。さらに、Tencent Cloud Cloud Studio は、コードコラボレーション機能、リアルタイムプレビュー、端末コラボレーション、音声およびビデオ会議を通じて、チーム間の共同作業を大幅に促進します。実際の操作を通じて、アカウントの登録、ワークスペースの作成、コードの記述、リモートウェアハウスへのプッシュの手順を学びました。Tencent Cloud Cloud Studio は、開発者に強力なクラウド開発環境とコラボレーション機能を提供します。これにより、ソフトウェア開発の効率と品質が大幅に向上し、チームワークがより大きな成功を収めることができます。