[Tencent Cloud Studio Practical Training Camp] Improve development efficiency and collaboration: explore the powerful functions and advantages of Tencent Cloud Studio

I. Introduction

A story happened a few days ago, and such a situation happened: A newly joined colleague received a brand new computer not long after he joined the company. He then threw himself into a new project, but ran into a problem: Since the computer didn't have administrator privileges, he couldn't install the software he needed on it. It took about a week to get permission, which meant he had to wait a long time before he could actually get into the project and start working. However, is there a way to quickly solve this problem so that he can immediately jump into the project, download the code, and start working? At this moment, our protagonist, Tencent Cloud's Cloud Studio, is here. This article will lead you to understand and learn the relevant knowledge points about Tencent Cloud CDE product Cloud Studio, and see how Tencent Cloud's Cloud Studio solves the above common work scenarios and has many advantages.

2. Understanding Tencent Cloud Cloud Studio

If you want to experience using Tencent Cloud Cloud Studio now, directly visit the official address: https://cloudstudio.net/

2.1 What is a cloud development environment

Generally, students who know more about the cloud should have heard of it more or less 云IDE, which is the so-called cloud development environment, or CDE(Cloud Development Environment). So what is a cloud IDE (CDE)?

Cloud IDE (CED) is a new development model that utilizes the fast and flexible resource capabilities on the cloud to carry out cloud development to testing. It is based on the isolation of containers and combines with the R&D standard process in the enterprise to empower the developers of the enterprise. and managers to optimize and control R&D costs.

2.2 Features and advantages of CDE

2.2.1 Improve efficiency, one-click operation of the development environment

When your IDE is a cloud-based development environment CDE, when you configure your personalized development environment, such as your development Java I have set which version of JDK to use, and some plug-ins I like to use have already been set , and the batch dependent code has been loaded, because it is in the cloud, no matter you are on any local machine, as long as you log in to your cloud environment CDE, you can directly run your program with one click. If you change a computer, you don’t need to worry about the need to reconfigure. Even as long as you can access the cloud IDE (CDE) through the Internet, you can carry out development work whether it is an intranet or a public network.

2.2.2 Improve productivity and work in parallel

Cloud IDE (CDE) itself does not require local installation and configuration, and can be accessed flexibly, providing simplified deployment and one-click operation. Because it is on the cloud, Cloud IDE (CDE) runs on cloud elastic servers, allowing Demand-tuned computing and storage resources ensure performance and stability during development and increase productivity.

2.2.3 Development is more standardized

Combining the above two features, the cloud IDE (CDE) can configure the development environment in a unified manner. Enterprises need a standard development process, and the cloud IDE (CDE) avoids the situation that the environment of the traditional IDE in the local environment may not match. Cloud IDE (CDE) helps to ensure that teams follow unified norms and standards during the development process by providing a unified development environment, collaboration and automation tools. This helps reduce potential bugs, improves code quality, and enables teams to collaborate more effectively on development.

2.2.4 Provide supervision, reduce capital and resources

Cloud IDE (CDE) can help enterprises reduce capital investment and resource expenditure by providing supervision functions, flexible resource allocation and automated workflow, while improving the development efficiency and cooperation ability of the team.

2.3 Four elements of cloud development environment

According to the summary of the product director of Tencent Cloud Cloud Studio, the four elements of the cloud development environment, they accelerate the efficiency of the R&D process, reduce risks, and simplify the complexity for developers.

• Cloudification: Computing elasticity
  , isolation, no interference, parallel development, and cost reduction.

• Containerization: cost reduction,
  isolation, no interference; parallel development, cost reduction.

• Standardization: Unified environment With a
  unified development environment, enterprises urgently need standard R&D process control and safe code development.

• DevOps
  develops from requirements to pull up CDE with one click, to submitting and merging, and after PR is completed, the Ops process is released.

2.4 Powerful AI functions of Tencent Cloud Cloud Studio

Although some common features and advantages of cloud IDE (CDE) have been explained above, the functions of Tencent Cloud Cloud Studio are far more than these. The following are some bloggers of Tencent Cloud Studio who think they are very brilliant and very advanced functions. Introduce a wave:

2.4.1 Direct technical communication with AI

Now that ChatGPT is popular, when many small partners encounter problems, search engines are no longer the first choice, but if you use Tencent Cloud Cloud Studio, ChatGPT is not necessarily your first choice, you can use it directly in Tencent Cloud Cloud Studio AI dialogue function , stop frequent switching, stop traditional search engines. Coding AI chat directly in Cloud Studio. When setting up some logic codes that you can’t understand, it doesn’t matter to ask the AI ​​code assistant to help you answer them. The AI ​​assistant has learned and mastered more than 20 programming languages ​​and a large number of development paradigms .

2.4.2 Code auto-completion (non-traditional code completion)

Speaking of this, some friends may retort that, isn't my traditional IDE installation just a built-in completion plug-in?

Note: The code completion of Tencent Cloud Cloud Studio is definitely not completion in the traditional sense. It does not directly complete a word or a grammar for you. Tencent Cloud Cloud Studio can even directly complete the required code for you based on your comments , similar to this:

Tencent Cloud Cloud Studio automatically generates README, Git configuration, scaffolding and other files according to the directory structure.

2.4.3 Compilation error suggestions are given during the development process

Compile error and don't know how to fix it? Also use the search engine to find it based on the error code? Use the AI ​​code assistant's shortcut ability to fix suggestions to find code problems with one click and push a fix .

When the mouse adds a new line before compiling the error line, the powerful code error correction ability directly gives repair suggestions and repairs the code:

2.4.4 Provide expert-level code review Review function

This function is really powerful. If you receive a code review job and face thousands or even tens of thousands of lines of code, how do you read and review the code step by step to see if it complies with the specification? Or as a developer, how can you confirm that your code can be reviewed by the reviewers? There is a lack of a medium to do this, and Tencent Cloud Cloud Studio can do this. After you submit the code , Tencent Cloud Cloud Studio will help you complete the submission information and conduct a review to verify whether it violates the relevant best practices.

2.4.5 Unit test code generation

After the business logic is written, do you need to write unit tests one by one? Let the AI ​​code assistant help you quickly generate test code with one click. After you give the command, Tencent Cloud Cloud Studio will 测试give the suggested code for the unit test:

As can be seen from the above example, when you select the code you want to unit test, you can use it directly in the command, and then Tencent Cloud Cloud /测试Studio will generate the code you want to unit test, which is very convenient .

2.5 Tencent Cloud Cloud Studio Cloud Development Metawork Collaboration Capabilities

2.5.1 Code collaboration function

The above introduces some AI assistant-related functions, and the following introduces some more black-tech functions. Have you ever used online editing tools such as graphite documents or Tencent documents? When they are edited by multiple people, they can directly see each other. In the position of operation and input content, in the traditional IDE, we can only merge the codes of different developers by submitting the merge code to the remote warehouse, but Tencent Cloud Cloud Studio can realize multi-person collaborative development at the same time. Even conducting remote meetings while developing and solving problems is like working on the same machine face to face.

If you are a student in a teaching and training institution, your eyes will light up when I mention this function, yes! This kind of multi-cursor highlighting and following function is very useful if you are teaching students with the teacher. You can learn to follow the teacher to follow the typing code of the cursor to learn.

2.5.2 Real-time preview and terminal collaboration

From the above example, it can be seen that the content of different people's collaboration is clear, and multi-person collaboration becomes clear and orderly. The real-time preview and terminal collaboration make the results under control.

2.5.3 Voice and Video Conference Mode

Have you ever encountered a similar scenario, you or your colleagues are on a remote business trip, or you are both working at home, but the other party has a code problem and would like to ask you something. According to the previous traditional model, there is a high probability that we will hold a zoom or Tencent meeting first, and then go in and share your desktop, let me see, and then balabala.

But now when you use Tencent Cloud Studio, you can perfectly solve this problem. In Tencent Cloud Studio, you can directly make voice or video calls with the other party. Not only can you talk directly, but also cooperate according to the code introduced earlier. features that can work directly together and collaboratively.

There are really many application scenarios for this kind of occasion in reality, and the pain points to be solved are also very significant. Even when holding a technical meeting directly, you can avoid the trouble of setting up a conference room and directly use the conference function of Tencent Cloud Cloud Studio. 一键邀请That's it.

It can be said that Tencent Cloud Cloud Studio directly breaks the space limitation and makes our collaboration more convenient and efficient.

3. Practical operation of Tencent Cloud Cloud Studio

The above has introduced many functions of Tencent Cloud Cloud Studio, now let's get started and experience it directly.

In this chapter, I will introduce to you how to use Tencent Cloud Cloud Studio, and demonstrate the actual use of Tencent Cloud Cloud Studio through a calculator development case.

3.1 Register Tencent Cloud Cloud Studio account

Directly visit Tencent Cloud Cloud Studio official website: https://cloudstudio.net/

Go to the registration or login page, you can choose one of the three to register directly according to your personal habits.

3.2 Create a workspace

After successfully creating a Tencent Cloud Cloud Studio account, you will enter the initialization interface, and you can see that there are many templates provided on the homepage, including templates for almost all common language functions. In this step, we click the New Workspace button, as shown in the following figure:

After clicking Create Workspace, the filling information required for creation will pop up, the specific information is as follows

• Space name: required, choose a name you want
• Space description: optional, used to describe this space
• Work category: There are two options here. 托管空间There will be default billing when you choose, and the other is to associate with your own cloud host.
• Code source: You can choose to import the warehouse, you can also choose the warehouse address, or empty, I am here as a demonstration, now create an empty warehouse in CODING, and then import the code and synchronize it to the remote CODING warehouse library.
• Development environment: You can choose your own development language or environment, or you can choose the version number you want to use
• Specification configuration: According to your own needs, you can choose different levels of price, the more expensive the price, the better the performance.

After filling in all required fields, click the New button:

After the workspace is created, as shown in the figure below, it is similar to the style of VSCode. And the default README.md file in the associated CODING warehouse is also synchronized.

3.3 Use Tencent Cloud Cloud Studio to write code

After configuring the workspace, we started to use Tencent Cloud Cloud Studio to write code directly. Our demo project is to make a small calculator similar to windows. Let's first create an HTML UI for drawing the calculator.

Build calc.html first, and draw on the calculator page.

The complete code is as follows:

<!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>

Create the css style file style.css and modify the debugging CSS style to the final effect you want.

Adjust the code and css style, and directly open the preview function, you can modify the code at any time and see the effect at the same time:

The complete code is as follows:

.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;
}

Write the calculation logic js file script.js to ensure the correctness of the calculation logic of addition, subtraction, multiplication and division.

The code of the calculation logic javascript is as follows:

"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 Push the code to the remote warehouse

After the code is written, how to submit the code to the remote warehouse, let's demonstrate it next.

Click the version control button, write the commit information, and click the submit button.

Note that if you use Tencent Cloud Cloud Studio for the first time, there may be an error message that the user name and email address are not configured. The solution is shown in the figure below:

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

You can directly copy my two commands to the terminal of Tencent Cloud Cloud Studio and run them.

Finally, click the Synchronize Changes button to push the code to the remote slave library CODING.

You can see the code we just submitted in the remote warehouse of CODING.

4. Summary at the end of the article

Through the introduction of this article, we have a deep understanding of the characteristics and advantages of Tencent Cloud Cloud Studio as a cloud development environment. It can not only improve development efficiency, realize one-click operation, but also work in parallel, standardize the development process, and reduce resource investment. Among them, the powerful AI function is even more impressive. It can not only conduct technical communication with AI directly, but also provide a variety of code auto-completion and error suggestions, as well as professional-level code review and unit test code generation. In addition, Tencent Cloud Cloud Studio also greatly promotes collaborative work among teams through code collaboration functions, real-time preview, terminal collaboration, and audio and video conferences. Through practical operations, we learned the steps of registering an account, creating a workspace, writing code, and pushing to a remote warehouse. Tencent Cloud Cloud Studio provides developers with a powerful cloud development environment and collaboration capabilities, which will greatly promote the efficiency and quality of software development, and help teamwork achieve greater success.