以太坊-Ethereum Studio工具入门-快速开始

﹏ヽ暗。殇╰゛Y 2022-12-24 11:55 184阅读 0赞

### 文章目录 ###

*  一、什么是 Ethereum Studio
 *  二、如何使用（选择Hello Wordl模板入门）
 *   *  选择一个模板： Hello World
     *  README.md
     *   *  1. “Hello World”项目模板的目标
         *  2. 以太坊工作室IDE简介 （Introduction to the Ethereum Studio IDE）
         *  3. 智能合约（The smart contract）
         *  4. web应用程序（dapp）
         *   *  交互（Interact）

# 一、什么是 Ethereum Studio #

工具网址：https://studio.ethereum.org/

Ethereum Studio 是一个以太坊推出的在线开发平台，主要面向的是DAPP开发。基于web的IDE (集成开发环境)，可直接通过线上使用。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ludGhhdA_size_16_color_FFFFFF_t_70]Ethereum.org收到了很多建议，其中最普遍的一条就是：改善以太坊开发者的开发体验。 虽然以太坊基金会网站为用户指出了广泛的第三方资源，但始终缺乏一种能够吸引开发者尝试以太坊的有意思方式。

Ethereum Studio （以太坊工作室）的目标是让开发人员在几分钟之内就可以基于以太坊进行开发，尽可能减少开发中的阻力，用户可以通过Ethereum Studio进行这些工作：**在浏览器中开发和测试智能合约、将智能合约连接至前端网页应用、通过三个模版教程引导他们的应用、一键分享项目。**

Ethereum Studio is a tool for developers who want to learn about building on Ethereum. The templates on the left side will teach you how to write a smart contract, deploy it to Ethereum, and interact with the contracts through a web-based application.

Ethereum Studio是一个面向希望学习如何在以太坊上构建的开发人员的工具。左侧的模板将教您如何编写智能合约，如何将其部署到以太坊，以及如何通过基于web的应用程序与合同进行交互。

# 二、如何使用（选择Hello Wordl模板入门） #

## 选择一个模板： Hello World ##

打开https://studio.ethereum.org 选择Hello Word模板项目，如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ludGhhdA_size_16_color_FFFFFF_t_70 1]  
A Hello World style starter project. Deploys a smart contract with a message, and renders it in the frontend. You can change the message using the interact panel!

一个Hello World风格的入门项目。部署包含消息的智能合约，并在前端呈现它。您可以使用交互面板更改消息！

合约代码如下：

// Specifies the version of Solidity, using semantic versioning.
    // Learn more: https://solidity.readthedocs.io/en/v0.5.10/layout-of-source-files.html#pragma
    pragma solidity ^0.5.10;
    
    // Defines a contract named `HelloWorld`.
    // A contract is a collection of functions and data (its state).
    // Once deployed, a contract resides at a specific address on the Ethereum blockchain.
    // Learn more: https://solidity.readthedocs.io/en/v0.5.10/structure-of-a-contract.html
    contract HelloWorld {
    
        // Declares a state variable `message` of type `string`.
        // State variables are variables whose values are permanently stored in contract storage.
        // The keyword `public` makes variables accessible from outside a contract
        // and creates a function that other contracts or clients can call to access the value.
        string public message;
    
        // Similar to many class-based object-oriented languages, a constructor is
        // a special function that is only executed upon contract creation.
        // Constructors are used to initialize the contract's data.
        // Learn more: https://solidity.readthedocs.io/en/v0.5.10/contracts.html#constructors
        constructor(string memory initMessage) public {
            // Accepts a string argument `initMessage` and sets the value
            // into the contract's `message` storage variable).
            message = initMessage;
        }
    
        // A public function that accepts a string argument
        // and updates the `message` storage variable.
        function update(string memory newMessage) public {
            message = newMessage;
        }
    }

代码说明：

声明“string”类型的状态变量“message”。状态变量（State variables ）是其值永久存储在契约存储中的变量。

> 本合约的作用就是：通过公共函数update 可以更新 message。

## README.md ##

### 1. “Hello World”项目模板的目标 ###

“Hello World”项目模板的目标是教您如何：

*  部署用Solidity编程语言编写的以太坊智能合约。
 *  从区块链获取合约状态，并使用JavaScript库（https://ethereum.org/developers/\#frontend-javascript-apis）将其呈现到前端。
 *  通过在IDE浏览器中与应用程序交互来更新已部署合约的状态变量。
 *  如果您想在开始之前了解以太坊的工作原理，我们建议您从这里开始。（https://ethereum.org/learn/）

### 2. 以太坊工作室IDE简介 （Introduction to the Ethereum Studio IDE） ###

Ethereum Studio是一个基于web的IDE，您可以在其中编写、部署和测试智能合约，并构建一个与之交互的前端应用程序。

在这个IDE的左侧，您可以找到Explorer面板（文件夹图标）。您可以在这里查看项目的文件结构。您可以切换最左边的文件夹图标来隐藏或显示此面板。

在这个IDE的右侧，可以找到“预览”面板，在这里可以在“浏览器”选项卡中查看此项目的应用程序。您可以切换最右边的面板图标来隐藏或显示此预览。

我们将在后面的教程中介绍以太坊工作室的其他特性，但现在，让我们继续。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ludGhhdA_size_16_color_FFFFFF_t_70 2]

### 3. 智能合约（The smart contract） ###

每个智能合约都在以太坊区块链上的一个地址运行。必须先编译智能协定并将其部署到地址，然后才能运行它。使用Studio时，浏览器会模拟网络，但以太坊区块链有多个测试网络和一个主网络。

1.  Compile  
    Before you deploy the HelloWorld.sol contract, you should understand compilation. Solidity is a compiled language, and you need to convert the Solidity code into bytecode before the contract can run. Ethereum Studio automatically compiles the code every time you save your changes (manually by clicking the floppy disk icon at the top of a file) or when performing a deployment.
    
    在部署HelloWorld.sol合约，你应该明白编译。Solidity是一种编译语言，在合约运行之前，您需要将Solidity代码转换为字节码。每次保存更改（手动单击文件顶部的软盘图标）或执行部署（deploy）时，Ethereum Studio都会自动编译代码。
2.  Deploy  
    Now let’s deploy the HelloWorld.sol contract. Again, in the left panel of the IDE, you can find the Deploy panel (the rocket icon). Here you can configure and deploy your contract to your local network.  
    现在让我们部署 HelloWorld.sol 合约。你可以在面板的左边找到火箭。在这里，您可以配置并将其部署到本地网络。
    
    Configuring the contract allows you to set the name of the contract as well as the contract’s message variable by specifying the initial value sent to the constructor function. Configure the contract within the Deploy panel by selecting the “Configure” option.
    
    通过配置(Configuring），可以通过指定发送给构造函数的初始值来设置协定的名称以及协定的消息变量。通过选择“Configure”选项在Deploy面板中配置合约。
    
    Then deploy the contract by selecting the “Deploy” button within the Deploy panel.
    
    然后通过选择deploy面板中的“deploy”按钮来部署契约。
    
    You should now see the deployed contract’s message variable displayed on the IDE’s Browser as well as output from the transaction in the IDE’s console (on the lower right side of the IDE).
    
    现在您应该可以看到部署的合约的消息变量显示在IDE的浏览器上，以及IDE控制台（IDE右下方）中交易的输出。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ludGhhdA_size_16_color_FFFFFF_t_70 3]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ludGhhdA_size_16_color_FFFFFF_t_70 4]

1.  Interact  
    Now look at the Interaction panel on the left side of this IDE (the mouse icon).  
    现在看看IDE左侧的交互面板（鼠标图标）。
    
    并使用它在此处部署的视图与您交互。尝试使用update函数更新消息变量。这将创建一个新的以太坊交易，您应该可以在IDE的浏览器中看到消息更新。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ludGhhdA_size_16_color_FFFFFF_t_70 5]

### 4. web应用程序（dapp） ###

通常在创建以太坊智能合约时，创建一个供用户交互的web应用程序是很有用的。我们称这些应用程序为“dapps”。以太坊上的dapp是以太坊智能合约支持的web应用程序。**这些应用程序不使用集中的服务器或数据库，而是依赖区块链作为程序逻辑和存储的后端。**

dapp通常使用JavaScript便利库，该库提供一个API，使开发人员更容易与智能合约集成。**在这个项目中，您使用的是web3.js。**

本教程将不介绍HTML或CSS，因为它不是特定于dapp的，但是值得注意的是，这个应用程序使用jQuery来操作HTML（文件/应用程序的）/应用程序.html)最终在IDE的浏览器中呈现。

让我们看看我们的应用程序逻辑。

使用“浏览”面板导航到 Files/app/app.js 文件。

你看完文件就回来。

#### 交互（Interact） ####

Now that you have an understanding of the logic, let’s use the app UI to interact with the contract!

现在您已经了解了逻辑，让我们使用app ui与合约进行交互！

Try using the form in the IDE’s Browser to set the message variable on the contract. Submitting the form should trigger the JavaScript function, setMessage, which creates an Ethereum transaction to call the update function on the smart contract. The new state is then read from the contract and updated in the Browser.

尝试使用IDE浏览器中的表单来设置合约上的message变量\*\*。提交表单应该触发JavaScript函数setMessage，它创建一个以太坊事务来调用智能合约上的update函数。\*\* 然后从合约中读取新状态并在浏览器中更新。

祝贺 你！你已经通过了我们的第一个教程。您已经迈出了在以太坊上开发的第一大步。

我们随后的每个以太坊工作室模板都增加了复杂性。我们建议您下一步创建一个“令牌”项目。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ludGhhdA_size_16_color_FFFFFF_t_70]: /images/20221120/37565d26ab2a42778e97cb35b346b579.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ludGhhdA_size_16_color_FFFFFF_t_70 1]: /images/20221120/b43099b6416c47d8a7cca71c649dffb6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ludGhhdA_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20201128084324108.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ludGhhdA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ludGhhdA_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20201128090009930.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ludGhhdA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ludGhhdA_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20201128090040635.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ludGhhdA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ludGhhdA_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/2020112809053227.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ludGhhdA==,size_16,color_FFFFFF,t_70