[Cloud IDE] Preliminary exploration and actual operation of CSDN cloud IDE


foreword

In recent years, due to the epidemic, everyone has to be blocked to work at home, and the era of remote office has opened since then. For telecommuting, many people are now exploring, and programmers are one of the special groups. Programmers may need to write code at any time, but they will face some problems, such as not having a suitable computer, even if there is, it may not necessarily have a suitable working environment. If you open remote desktop to write code, then the smoothness of writing code Will be heavily discounted. In order to solve these problems, some remote office methods exclusively for programmers have been born, that is, cloud IDEs. The biggest advantage of the cloud IDE is that you don’t need to prepare a development environment, and it can be used out of the box. It is an extremely convenient way of working for workers who need to work from home.

Before CSDN's cloud IDE was born, there were already some cloud IDE products that could be used by programmers, such as the vscode series of cloud IDEs represented by Big Brother Github's Codespace, which took advantage of the powerful advantages of vscode to provide developers with In the working environment for developing anytime and anywhere, you only need to directly develop code on the browser side. The running and debugging of the code are all cloud operations. Besides the first time, it also supports plug-in installation, which can be said to be very convenient. There is another faction besides the first time—theia, which is an open source cloud IDE. Its route is highly similar to that of vscode, and even the interface is also highly similar, supporting a variety of plug-ins. The difference is that it is built according to Eclipse's theia, and you can release any IDE of your own, because its positioning is the IDE of the IDE.
theiaIn addition, there is a solution provided by JetBrains, remote IDE. Benefiting from the powerful ecology of JetBrains and JetBrains Space, its feature is that you need to download the corresponding client. For example, you have to download the idea before you can use remote development. Although I heard later that it also supports web development, I don’t have it. experienced.

Now, CSDN's latest product [Cloud IDE] is here, it is CIDE, it provides developers with a second-level cloud development environment, preset Python, Java, Nodejs and other development environments, and the server is in China, cloud IDE The opening speed is at the second level, which alone crushes the above cloud IDEs; CIDE also supports real-time preview and persistence, as long as the code you write will be saved to the cloud, it has all the functions of vscode, and its smoothness It is almost the same as the offline IDE. You can install various plug-ins to improve your efficiency regardless of whether your hard disk is enough or not. It also supports low-code development. The model business can generate various applications and codes by dragging and dropping, supports visual programming and reusable components, and highly improves development efficiency.


Cloud development in practice

1. Create a workspace

First enter the cloud IDE console, its address is, click directly

https://mydev.csdn.net/product/ide/dashboard


Click 新建工作空间to enter the create workspace page,

  1. You need to fill in here 工作空间名字, you can fill in your workspace name according to your preferences
  2. Choose 预置环境, this is the cloud development environment you need, currently supports python, java and nodejs, or you can be lazy and choose directly All in one, simply select all is also possible
  3. Select the specification configuration of the development environment, that is, the configuration of the cloud service. Currently, CIDE only supports the configuration of 2H4G, so here is the default
  4. Choose 代码来源, that is, your code warehouse. If you fill in the remote github warehouse, then the IDE will automatically clone the code for you and install the dependencies. Here we choose the default template provided by CIDE as a demonstration.
  5. Click 确定创建and the workspace is created.

If there is no problem with your operation, you will enter the same page as mine. The page is divided into two lines. The information on the top line is mainly the resources owned by your account, that is, the duration of use and the duration of use. The bottom line is your workspace list, showing the workspaces you have created, and displaying the information and operations of some workspaces.
The right side of the workspace is the operation function, from left to right are 开关, 编辑, 删除, and there are others below 查看详情, which are used to check your workspace usage.

Usage

2. Open the workspace

In the console, select the workspace you created, and click the start button to enter the workspace you created.
If there is no problem with the operation, you will enter the corresponding workspace, as shown in the figure below.
As a developer, for The interface of vscode must be quite familiar, and there is no need to talk about those that everyone knows. It is worth noting that the last side is the real-time preview window, the middle is the code editor, and the bottom is the log window. Everyone is already familiar with it.

3. Engineering documents

The project file of the springboot template provided by CIDE is as shown in the figure below. Some of the things that Java development must understand, such as source code directory, static file directory, and pom file will not be introduced. I believe you must have come into contact with a lot. These files include When a file is particularly conspicuous, it ispreview.yml


Its content is as follows, it can be seen that it should be a configuration file that provides the behavior when the workspace is opened

  • autoOpenIndicates whether to automatically open the preview of all applications when opening the workspace. There is also a similar configuration in apps, which has a higher priority than the root level.
  • appsIt is used to configure the configuration information of the current application, such as port, name, startup directory, running commands, etc.
autoOpen: true # 打开工作空间时是否自动开启所有应用的预览
apps:
  - port: 8080 # 应用的端口
    command: mvn spring-boot:run # 应用的启动命令
    root: /ide/workspace/springboot-demo # 应用的启动目录
    name: springboot-demo # 应用名称
    description: 我的第一个 App。 # 应用描述
    autoOpen: true # 打开工作空间时是否自动开启预览(优先级高于根级 autoOpen)

The function of this configuration file is that once the workspace is opened, all applications will be automatically launched and the preview will be opened, just like the picture below.

4. Advanced operation of CIDE

CIDE provides some advanced operations. The most prominent one is that you can directly import CIDE projects from GitHub. For example, I used to have a warehouse for learning React, and I want to import it to CIDE.

You can import it by adding it at the browser address ide. The original URL is like this. After

adding and pressing ide
Enter, you can import my warehouse to CIDE. At this time, the code and dependencies will be automatically imported
> People who know GitHub know that in The button will enter the codespace, dream linkage

Note that if you see the following screen, you need to add ssh key to import.
At this time, you need to add the key. Click on the console 密钥管理
and add the displayed key to your github

This code can be imported successfully

Summarize

In my experience this time, it can be said to be quite silky. Among the many cloud IDEs I have experienced, CIDE is definitely an excellent cloud IDE. In my experience, what makes me most comfortable is this speed, which can be said to be quite fast. Other cloud IDEs have a common feature that the server is located abroad, and they are always blocked, so that sometimes they cannot open open.

一点小建议
During development, the package source largely determines the smoothness of importing dependencies. It is hoped that the source of dependencies, such as npm and maven, can be automatically configured without manual addition and modification, which will greatly improve the user experience.


CSDN Cloud IDE

Free use address: Click [Cloud IDE] to start creating a workspace~

CSDN's latest product [Cloud IDE] is here! [Cloud IDE] will build a cloud development environment for all technicians in one click and seconds, and improve development efficiency! In order to continuously improve the product experience, CSDN is now launching a product evaluation award-winning topic essay activity, and sincerely invites all technical er to try [Cloud IDE] for free, write user experience, and participate to get the [Topic Master] medal + CSDN e-book monthly card (Thousands of e-books on the site are free to read), and you have a chance to get CSDN official membership card + surrounding awards!

More advanced usage of cloud IDE, black technology cloud IDE usage tutorial

Guess you like

Origin blog.csdn.net/weixin_47754149/article/details/127569241