Preface
Hello everyone, I am Liu Ming, an open source technology enthusiast and a ten-year entrepreneurial veteran.
CSDN recently organized the [Tencent Cloud Cloud Studio Practical Training Camp Activity] in conjunction with Tencent Cloud, Coding, and CloudStudio. I have been preparing for the CPA exam a few days ago and did not have a good experience with Cloud Studio. IDE products. Now that the exam is over and I have experienced a cloud IDE, I can’t help but sigh that cloud development can be so fun.
In order to prevent everyone from being impatient after reading a long article, let me start with the conclusion: CloudStudio’s cloud development is more efficient than local development and is especially suitable for team collaboration
< a i=4>. If you are interested, you can check out the backend management system open source project I developed on CloudStudioNuxt3-ProNuxt3-Pro a>, click the [Copy] button or [Green Play] button in the upper right corner to run it in the CloudStudio environment with one click, eliminating the need for tedious steps such as local environment installation and dependency installation.
Recommended link
Nuxt3-Pro one-click running address
This code is participating in the excellent code selection. I hope everyone can click the [Replicate] button or the [Green Play] button more to give this Project adds popularity.
Introduction to Cloud Studio
Cloud Studio is a project under Tencent Cloud. It focuses on online programming and already supports mainstream languages such as C/C++/C#/Java/JavaScript/Go/R/Rust/Python.
Recommended link
CloudStudio official website address
The concept of online programming has been around for a long time, but it is not easy to do it well. The online programming product launched by CloudStudio this time is actually a cloud-based VS Code. The familiar interface allows developers to quickly adapt. This cloud VS Code can not only install all VS Code plug-ins, but also runs extremely fast. It is technically commendable that a cloud product can do this.
In addition to all the functions of local VS Code, CloudStudio also adds many new cloud functions to improve development efficiency, such as multi-person collaboration, cloud deployment, real-time preview and other functions.
Look at the picture below to see how powerful CloudStudio's multi-person collaboration is.
Some development tips for CloudStudio
Add SSH public key
Pushing code to Gitee or Github requires identity authentication. Frequent push notifications and having to enter your account and password every time are obviously very unpleasant. Therefore, mature developers will use SSH public keys to avoid manual authentication. CloudStudio also provides similar functions. You only need to find the public key on the personal settings page, copy it, and then add it to the corresponding code hosting platform. Subsequent development can greatly improve the efficiency of pushing and pulling codes.
The CloudStudio article provides a tutorial for adding an SSH public key, which you can refer to.
CloudSudio Documentation – Using Git for Version Control
Online preview and debugging
Online preview and debugging is a king-level function. It can not only implement preview, but also send the generated link to colleagues or partners, so that the other party can also see the preview page. If you want to enable CloudStudio's online preview debugging function, you need to add a .vscode folder and preview.yml files in the source code root directory. Every time you open the project thereafter, CloudStudio will automatically install the dependencies and open the preview page, which is really cool.
Regarding the various configurations of the preview.yml file, you can refer to the writing methods in Nuxt3-Pro. There are comments.
Connect to cloud server
CloudStudio can connect to the cloud server and use the basic environment of the cloud server for development. Personally, I think this is also a great feature, but I haven’t experienced it yet. The operation process is very simple. Add the CloudStudio SSH public key to the cloud server to connect to the cloud server. For specific operation steps, please refer to the official documentation.
CloudSudio Documentation – Connecting to Cloud Host
Custom template
When individuals or teams often develop projects, a basic template can not only reduce configuration work, but also improve work efficiency. Our team has many such basic templates, and our long-standing practice has been to store them on the code hosting platform and pull them directly when starting a new project.
CloudStudio also provides such a function. After adding the template to CloudStudio, it becomes more convenient to use. Developing projects based on templates will become smoother. For specific operation steps, please refer to the official documentation.
CloudSudio Documentation – Custom Template
Turn on MetaWork collaboration
MetaWork collaboration allows developers to work together through audio, video and messages, making development work more convenient and efficient. This feature should be the biggest charging point of CloudStudio, and it can indeed make remote collaborative development the same as face-to-face development. Because our team is currently working together and there is no need for it yet, I don’t know the current price. For teams that often work in remote locations and need to collaborate on development remotely, this feature is a development tool.
CloudSudio Documentation – MetaWork Collaboration Suite
Sign up now and get free time
CloudStudio is currently in the promotion stage, and you will receive 3,000 free minutes upon registration. Developers can seize this benefit and experience the efficiency and smoothness brought by cloud development and online programming. You can also take advantage of this plan and apply for CloudStudio's AI code assistant.
Develop backend management system
Suppose there is such a product content system: some pages involve product introductions and require SEO optimization, and the rest of the pages are management systems that require user login and do not require SEO. Nuxt3 can render some pages on the server side and some pages on the browser. Nuxt3 is very flexible and has high development efficiency. So I like to use Nuxt3 to develop systems.
This time when developing the backend management system, Element-Plus was chosen as the UI, mainly because element has always given people the impression of being mature and stable in the Vue ecosystem and has a large number of users. TailwindCSS was chosen for CSS because of its rich styles and high development efficiency.
It is worth mentioning that the Nuxt3 official website module includes the Element-Plus module and TailwindCSS module that are available out of the box, which is much more efficient than integrating them from scratch.
This time I developed the backend management system using CloudStudio. I named it Nuxt3-Pro. This is an attempt at CloudStudio online programming, and it is also a small summary of daily work. The code is open sourced, hoping to help friends who are learning Nuxt3, and also recommends CloudStudio's online programming tool to everyone.
Recommended link
Nuxt3-Pro source code (Gitee)
Nuxt3 official website address
Element-Plus official website address
TailwindCSS official website address
Nuxt3 official module
Summarize
CloudStudio’s online programming can solve many pain points of developers. For example, on a temporary computer without a development environment installed, you can use CloudStudio for online programming, which saves a lot of time than painfully installing various dependencies yourself.
The greatest value of CloudStudio is to improve development efficiency. I plan to promote the use of CloudStudio within my small team, mainly considering the following two points:
- Collaborative development and real-time preview are much more efficient than everyone developing on a local computer and then pushing the code;
- Permission control can effectively prevent source code leakage, especially when using temporary developers, this risk is very high
In terms of back-end development, our company uses PHP and Java, with a larger proportion of PHP. At present, CloudStudio does not support PHP, which is a bit regretful. If support for PHP can be added as soon as possible, I will try it as soon as possible. If it can improve the efficiency of collaborative development, I will promote it within the company as soon as possible.
If you have any questions or ideas about CloudStudio online programming or Nuxt3-Pro source code, please feel free to send a private message.