[Tencent Cloud Studio Practical Training Camp] Build Web3 projects through cloud IDE

​ iOS development homepage In the eyes of the strong, there is no best, only better. High-quality creator in the field of mobile development, Alibaba Cloud expert blogger

​

Cloud Studio is a browser-based integrated development environment (IDE) that provides developers with an always-on cloud-based workstation. Users do not need to install Cloud Studio when using it, and can program online anytime, anywhere by opening a browser.

background

With the maturity and popularity of cloud computing technology, more and more traditional programming capabilities and resources have been opened in the form of cloud services. From horizontal capability service components such as middleware and database to basic business service components such as face recognition and authentication services, all can be easily obtained on the cloud. Cloud StudioCloud IDE（Web IDE/在线 IDE/Cloud IDE）is an online programming platform independently developed by Tencent Cloud. It is no longer limited to local devices, but can write, run and debug code through cloud services. Development-environment-as-a-ServiceThis service model is no longer just a software development environment in the cloud, but a service model that includes infrastructure services . This means that we can develop directly on the browser without maintaining and setting up the project locally, achieving true zero-threshold development.

I. Introduction

Have you ever encountered the trouble of repeatedly installing various applications and plug-ins when developing projects on different devices? Now, with it Cloud Studio, none of these problems will exist! Cloud StudioIt is a browser-based integrated development environment that allows developers to develop easily and efficiently anytime, anywhere.

Through use Cloud Studio, you can realize the basic functions of online programming such as code highlighting, automatic completion, and terminalIDE , and you can also easily integrate powerful functions such as Git, real-time debugging, and plug-in extensions . The existence of these functions can not only help us quickly complete the development, compilation and deployment of various applications, but also improve our development efficiency and development experience.

The most ruthless thing is that it Cloud Studionot only provides an uninterrupted cloud workstation, but also can be synchronized on multiple devices, making our development process smoother and more efficient! ! ! ! This must be rushed! !

CloudStudioIn this blog post, I will take you to experience the thrill of immersive development, and go into product details step by step through the Web3 postcard project case!

Throughout the process, we will learn

• Cloud Studiorole in the project
• How to use Cloud Studioto initialize the project environment
• Cloud StudioHow projects are linked to giteemanage repositories as projects
• Cloud Studiosome situations that may arise

2. Main functions and application scenarios of Cloud Studio

CloudStudioIt is a browser-based cloud integrated development environment suitable for a variety of application scenarios, including:

1. Quick start project: CloudStudioThe preset environment used can directly create the corresponding type of workspace, quickly start the project and enter the development state, without cumbersome environment configuration.

2. Debug web pages in real time: CloudStudioThe built-in preview plug-in can display web applications in real time. When your code changes, the preview window will automatically refresh, so that you can develop and debug web pages in CloudStudio in real time.

3. Remote access to the cloud server: CloudStudioAllows you to connect to your own cloud server, so that you can view files on the cloud server in the editor, and perform online programming and deployment.

3. Preliminary preparation for Cloud Studio experiment

3.1. Open the official website

Open the official website Click the link below to jump to the official website, and click "Register/Login" . official website

3.2. Register Cloud Studio:

It is very convenient to register and log in here Cloud Studio, and three registration methods are provided:

1. Use CODINGaccount authorization to register/login
2. Register/login with WeChat authorization
3. Use GitHubauthorized registration/login (used in this article)

After the registration is complete, you can use CloudStudiothe template provided to build the project! !

4. Build the Web3 project

web3Here I take a postcard project developed by the blogger as an example. The whole project is ts + react, and then I will give you a product demonstration. Since the project code is a bit cumbersome, I will not go into the details of the code. This is a technology-based Web3social postcard project. Provide A new way to collect and share memories. The project uses it Infuraas a node service IPFSfor decentralized storage of data and uses MetaMaskthe service to allow users to interact with the project through a browser. And provide designers with "creator incentives".

The effect of the project is as follows:

4.1. Technology stack in the project

• HardhatIt is a development framework that can help developers write, test and deploy Ethereum smart contracts quickly and efficiently.
• Next.jsIt is a React-based server-side rendering framework that helps developers build high-performance, scalable web applications, and provides some development tools and plug-ins for developers to quickly develop and deploy.
• MetamaskIt is an Ethereum wallet browser extension, which can help users manage Ethereum accounts and conduct blockchain transactions, while providing some security and privacy protection functions, making user interactions in decentralized applications more convenient and Safety.
• IPFSIt is a decentralized distributed file system, which can help developers store and access various types of files and data, and has a high degree of reliability, security and scalability, and can help developers build more reliable and Secure distributed applications.
• TypeScriptIt is an open source programming language. It is a superset of JavaScript, which can help developers write more reliable and easy-to-maintain code. It also provides some type checking and code hinting functions, which is convenient for developers to quickly develop and debug.

4.2. Manage code through gitee and initialize the environment on CloudStudio

Now upload the project locally to giteethe warehouse for subsequent CloudStudioinitialization on

Then we go back CloudStudioto create a space to build a working environment for this project. Here we don't need to create it through a template, because our project is not developed on-site on the cloud IDE, so here we choose to create a new workspace, and then select Input Warehouse address , select the development environment asReact + node 18

Click New to initialize the environment, the effect is as follows:

4.3 Run the preview project

After the project is successfully acquired, prepare to run and preview the project. Through CloudStudio's built-in terminal, run the following command to install dependencies:

yarn install

After the dependencies are installed, you can start to start:

yarn start

After a new port is monitored in the lower right corner, a prompt message will pop up, and then you can see the started project by opening the built-in preview

It can be seen that it is exactly the same as our local startup, but it does not require an installation environment, which is very convenient!

4.4 Test project operation status

Although the startup started normally, we still need to conduct some tests to see if the project is running normally in the new environment. Here I use the connection to metamaskperform a login test

It can be seen connectthat the wallet is normal, and then we start giving a postcard

ipfsHere you will find that the above picture cannot be loaded in this environment , so the operation is not so complete

. Normally it is like this:

But the overall function is no problem, it may be due to network-related problems, the overall operating experience is still good! ! !

5. Demonstration of other functions

5.1. Multi-person collaboration

Collaboration To initiate a collaboration, the initiator clicks the "Start Collaboration" button to generate a collaboration invitation message, and the initiator clicks the "Copy Link Again" button to paste the following information and send it to those who need to participate in the project. At the same time, the project enters collaborative timing, and the timing is displayed in the control panel in the upper right corner. The content of the invitation information is as follows: "k9sec invites you to join the workspace collaboration. Click the link: https://cloudstudio.net/share/xxxxxx Cloud Studio MetaWork , and you can start multi-person collaboration!!

5.2. Use Git for version control and publish projects to gitee

Here I readmeadd a description in and prepare to go committo the source code management module giteein the warehouse

, you can see that my modification has appeared, here we can synchronize the modification through commitand ! syncchangeVery nice!

The effect is as follows:

There are too many other functions, so I won’t introduce them one by one. If you are interested, you can go to the official website to browse and check! ! !

6. Frequently asked questions and precautions

• During the development process, I found a web3point that is not suitable for the project, that is, ipfsthe network cannot be loaded. I don’t know if it is possible to optimize it in the future.
• During multi-person collaboration, sometimes the inviter who joins the collaboration does not receive the message. I don’t know if it is a network problem or some other reason. There is no feedback, which leads to waiting there all the time.
• In addition, there will be frequent disconnections and restarts in the cloud host workspace, but the reason for this is found by checking the documentation. This is sent to prevent everyone from having the same situation. The official website answers as follows
  • At present, because the traffic of the cloud host workspace is Cloud Studioproxied by the server, the access path is the local machine -> Cloud Studio proxy server -> cloud host , which will lead to Cloud Studiounstable connection due to the network environment. Currently, Cloud Studiothe access path is being optimized as local machine -> cloud host to improve connection stability, so stay tuned.

7. Summary

When using Tencent Cloud, Cloud Studiothe overall feeling from environment construction to operation is still very smooth, and I feel that I have gained a lot. The assistant will also actively answer some questions encountered in practice. Through several CSDNtrainings and study of official documents, I have CloudStudioa great understanding of the cloud product. It is really a very good cloud IDEproduct. In the follow-up work , and will also recommend a large number of effective solutions from Tencent Cloud to the company to reduce costs and increase efficiency.

After this event, I have summarized CloudStudiothe relevant advantages for your reference when choosing a solution:

1. Multiple language environments are supported, including Python, , Java, Node.jsetc.
2. Supports the creation of workspaces, where operations such as online programming, code modification, and real-time debugging can be performed.
3. Supports Gitversion control and connection to cloud hosts for resource management.
4. Provide cloud deployment kits and collaboration kits to facilitate application deployment and team collaboration.
5. Supports custom templates and online preview and debugging functions.
6. Support online installation VS Codeof plug-ins to enhance user experience.
7. Support billing by volume and purchase of resource packs, suitable for small and medium-sized projects.

Generally speaking, CloudStudiounder this practical case, I still learned and felt the fundamental changes brought about by this development method. In fact, it is also a product that conforms to the times, from low-level languages ​​to high-level languages, from self-built servers to cloud servers, The birth of each product is to release repetitive labor. Perhaps in the future, only a part of the core business code is needed for development, and all standardized functions can be assembled with one click. We still have to learn to stand on the shoulders of giants, thanks to Tencent Cloud Provide rich underlying support, making the development methods of current developers more and more simple and efficient! ! !

8. Related Links

• Cloud Studio product experience address
• Cloud Studio product documentation
• Activity details
• Event registration page