From 482b9636713c980ea86813bc5b1d08b508b4f25c Mon Sep 17 00:00:00 2001 From: Sam Richards Date: Wed, 27 May 2020 15:59:22 -0700 Subject: [PATCH 1/4] Update Hello World template [Fixes #234] --- .../editor/templates/Crypto Pizzas/README.md | 2 +- .../editor/templates/Hello World/README.md | 229 +++++------------- .../editor/templates/Hello World/app/app.js | 41 ++-- .../Hello World/contracts/HelloWorld.sol | 29 ++- 4 files changed, 103 insertions(+), 198 deletions(-) diff --git a/packages/editor/templates/Crypto Pizzas/README.md b/packages/editor/templates/Crypto Pizzas/README.md index d23bef49..e1ac8be6 100755 --- a/packages/editor/templates/Crypto Pizzas/README.md +++ b/packages/editor/templates/Crypto Pizzas/README.md @@ -38,7 +38,7 @@ Second it uses a [function modifier](https://solidity.readthedocs.io/en/v0.5.12/ Once the modifier confirms the Pizza is unique the function adds it to the array and maps it to the owner (creator in this case), using [the `assert` error handling function](https://solidity.readthedocs.io/en/v0.5.12/control-structures.html#id4) to check that the owner address is the same as the address of the current user. -The `createRandomPizza` function is the public function called in JavaScript that assigns the string the user sets in the front end as the name of the pizza and calls the `generateRandomDna` function, passing the name, and the owner. +The `createRandomPizza` function is the public function called in JavaScript that assigns the string the user sets in the frontend as the name of the pizza and calls the `generateRandomDna` function, passing the name, and the owner. The `generateRandomDna` introduces another new function modifier, [`pure`](https://solidity.readthedocs.io/en/v0.5.12/contracts.html#pure-functions). Pure functions promise not to read from or modify the state, instead they generally return values to another function that does. diff --git a/packages/editor/templates/Hello World/README.md b/packages/editor/templates/Hello World/README.md index 75f2093c..af07e575 100755 --- a/packages/editor/templates/Hello World/README.md +++ b/packages/editor/templates/Hello World/README.md @@ -1,198 +1,95 @@ -# Hello World template +# Hello World -This template is a "Hello World" example that teaches you how to: +The goal of this "Hello World" project template is to teach you how to: -- Provide arguments to a contract constructor using the _Configure contract_ modal. -- Store state in a contract and to update it. -- Fetch your newly created contract's information from the blockchain and render it to a front end. +- Deploy an [Ethereum smart contract](https://ethereum.org/learn/#smart-contracts) written in the [Solidity programming language](https://ethereum.org/developers/#smart-contract-languages). +- Store and update state variables of your deployed contract. +- Fetch your contract's state from the blockchain and render it to a frontend using a [JavaScript library](https://ethereum.org/developers/#frontend-javascript-apis). -> Tutorial content supplied by [kauri.io](https://kauri.io). +If you'd like to learn more about how Ethereum works before diving in, we recommend you [start here](https://ethereum.org/learn/). -## Explanation of the template +## Introduction to the Ethereum Studio IDE -### The smart contract +Ethereum Studio is a web-based IDE where you can write, deploy and test smart contracts, and build a frontend application to interact with them. -> Find the smart contract file in _contracts/HelloWorld.sol_ +On the left side of this IDE, you'll find the Explorer panel (the folder icon). Here you can view the file structure of your project. You can toggle the folder icon on the far left to hide or display this panel. -The first line, `pragma solidity ^0.5.10` specifies that the source code is for a Solidity version greater than 0.5.10. [Pragmas](https://solidity.readthedocs.io/en/latest/layout-of-source-files.html#pragma) are common instructions for compilers about how to treat the source code (e.g., pragma once). +On the right side this IDE, you'll find the Preview panel, where you can view this project's application in the Browser tab. You can toggle the panel icon on the far right to hide or display this preview. -A contract in the sense of Solidity is a collection of code (its functions) and data (its state) that resides at a specific address on the Ethereum blockchain. The line `string public message` declares a public state variable called `message` of type `string`. You can think of it as a single slot in a database that you can query and alter by calling functions of the code that manages the database. The keyword public automatically generates a function that allows you to access the current value of the state variable from outside of the contract. Without this keyword, other contracts have no way to access the variable. +There are additional features of Ethereum Studio that we will introduce in later tutorials but for now, let's move on. -The [`constructor`](https://solidity.readthedocs.io/en/latest/contracts.html#constructor) is a special function run during the creation of the contract and cannot be called afterward. In this case, it takes a string value `initMessage`, stores the value in the [`memory`](https://solidity.readthedocs.io/en/latest/introduction-to-smart-contracts.html#storage-memory-and-the-stack) data storage area, and sets `message` to that value. + + + -The `update` function is another public function that is similar to the constructor, taking a string as a parameter, and updating the `message` variable. +## The smart contract -### 1. Configure +First, let's find the [smart contract](https://ethereum.org/learn/#smart-contracts). -Configuring the contract allows you to set the name of the contract and the initial values sent to the constructor as arguments. You can configure the contract by going to the Deploy panel, accessed by clicking on the rocket icon in the left side menu and choosing _Configure_ option. In this example, it configures the string displayed in the front end interface. +> Use the Explore panel to navigate to the _Files/contracts/HelloWorld.sol_ file. -### 2. Compile +Return here once you've read through the file. -Solidity is a compiled language, and you need to convert the Solidity code into bytecode before the contract can run. We will automatically compile the code every time you save your changes or when performing a deployment. +Every smart contract runs at an address on the Ethereum blockchain. You must compile and deploy a smart contract to an address before it can run. When using Studio, the browser simulates the network, but there are several test networks and one main network for the Ethereum blockchain. -### 3. Deploy +### 1. Compile -Every smart contract runs at an address on the Ethereum blockchain, and you must deploy it to an address before it can run. When using Studio, the browser simulates the network, but there are several test networks and one main network for the Ethereum blockchain. +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. We will automatically compile the code every time you save your changes (by clicking the floppy disk icon at the top of a file) or when performing a deployment. -Deploy the contract by going to the _Deploy_ panel, accessed by clicking on the rocket icon in the left side menu. +### 2. Deploy -### The Web app +Now let's deploy the HelloWorld.sol contract. Again, in the left panel of the IDE, you'll find the Deploy panel (the rocket icon). Here you can configure and deploy your contract to your local network. -> Find the HTML file in _app/app.html_ -> Find the CSS file in _app/app.css_ -> Find the JavaScript file in _app/app.js_ +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. -This tutorial doesn't cover the HTML or CSS as it's not web3 specific, aside from the element IDs that the JavaScript manipulates. A lot of the JavaScript code follows standard patterns for object-oriented JavaScript, so this tutorial focuses on the web3js specific parts. +Then deploy the contract by selecting the "_Deploy_" option within the Deploy panel. -First create an instance of the smart contract, [passing it as a property](https://web3js.readthedocs.io/en/v1.2.0/web3-eth-contract.html), which allows web3js to interact with it. +You should now see the deployed contract's `message` variable displayed on the IDE's Browser. -```javascript -function HelloWorld(Contract) { - this.web3 = null; - this.instance = null; - this.Contract = Contract; -} -``` +### 3. Interact -Initialize the `HelloWorld` object and create an instance of the web3js library, passing Metamask as a provider for the contract. The initialization function then defines the interface for the contract using [the web3js contract object](https://web3js.readthedocs.io/en/v1.2.1/web3-eth-contract.html#new-contract) and then defines the address of the instance of the contract for the `HelloWorld` object. +Now check out the Interaction panel on the left side of this IDE (the mouse icon). -```javascript -HelloWorld.prototype.init = function () { +Here you view and interact with your deployed contract using its functions. Try updating the `message` variable using the `update` function. This will create a new Ethereum transaction and you should see the message update in the IDE's Browser. - this.web3 = new Web3( - (window.web3 && window.web3.currentProvider) || - new Web3.providers.HttpProvider(this.Contract.endpoint)); +## The web app (dapp) - var contract_interface = this.web3.eth.contract(this.Contract.abi); +Often when creating an Ethereum smart contract, it's useful to create a web application for users to interact with. We call these applications "dapps". [Dapps on Ethereum](https://ethereum.org/dapps/) are web applications backed by Ethereum smart contracts. Instead of using a centralized server or database, these applications rely on the blockchain as a backend for program logic and storage. - this.instance = this.Contract.address ? contract_interface.at(this.Contract.address) : { message: () => {} }; -}; -``` +Dapps typically use a [JavaScript convenience libraries](https://ethereum.org/developers/#frontend-javascript-apis) that provide an API to make integrations with smart contract easier for developers. In this project, you'll be using [web3.js](https://web3js.readthedocs.io/en/v1.2.8/). -Add other JavaScript boilerplate to create the instance of the `HelloWorld` object defined above, show the HTML elements on the page, and bind the functions for interacting with the contract to the button defined in the HTML: +This tutorial won't cover the HTML or CSS since it's not specific to a dapp, although it's worth noting that this application uses jQuery to manipulate the HTML (of _Files/app/app.html_) that is utlimately rendered in our IDE's Browser. -```javascript -HelloWorld.prototype.bindButton = function() { - var that = this; +Let's take a look at our application logic. - $(document).on("click", "#message-button", function() { - that.setMessage(); - }); -} - -HelloWorld.prototype.main = function () { - $(".blocknumber").show(); - $(".message").show(); - this.updateDisplay(); -} +> Use the Explore panel to navigate to the _Files/app/app.js_ file. -HelloWorld.prototype.onReady = function () { - this.init(); - this.bindButton(); - this.main(); -}; +Return here once you've read through the file. -if(typeof(Contracts) === "undefined") var Contracts={ HelloWorld: { abi: [] }}; -var helloWorld = new HelloWorld(Contracts['HelloWorld']); - -$(document).ready(function () { - helloWorld.onReady(); -}); -``` - -The `getMessage` function gets the `message` value passed to the instance of the contract. With the IDE, you pass this value from the _Configure_ option found under the disclosure triangle of the contract file, but outside of the IDE, you could pass the value in a variety of ways. - -The `getBlockNumber` works similarly but uses the web3js [`getBlockNumber`](https://web3js.readthedocs.io/en/v1.2.1/web3-eth.html?highlight=getBlockNumber#getblocknumber) function to return the value of the latest block in the configured endpoint. - -```javascript -HelloWorld.prototype.getMessage = function (cb) { - this.instance.message(function (error, result) { - cb(error, result); - }); -}; - -HelloWorld.prototype.getBlockNumber = function (cb) { - this.web3.eth.getBlockNumber(function (error, result) { - cb(error, result); - }); -}; -``` - -The `setMessage` function updates the `message` value. This function is triggered when someone clicks the "send" button in the interface. - -```javascript -HelloWorld.prototype.setMessage = function() { - var that = this; - var msg = $("#message-input").val(); - - // Set message using the public update function of the smart contract - this.instance.update( - msg, - { - from: window.web3.eth.accounts[0], - gas: 100000, - gasPrice: 100000, - gasLimit: 100000 - }, - function(error, txHash) { - // If there's an error, log it - if (error) { - console.log(error); - } - // If success, then wait for confirmation of transaction - // with utility function and clear form values while waiting - else { - that.waitForReceipt(txHash, function(receipt) { - if (receipt.status) { - console.log({ receipt }); - $("#message-input").val(""); - } else { - console.log("error"); - } - }); - } - } - ); -}; -``` - -The `updateDisplay` function sets the DOM element texts to the values they return or displays an error message. - -```javascript -HelloWorld.prototype.updateDisplay = function() { - var that = this; - this.getMessage(function(error, result) { - if (error) { - $(".error").show(); - return; - } - $("#message").text(result); - - that.getBlockNumber(function(error, result) { - if (error) { - $(".error").show(); - return; - } - $("#blocknumber").text(result); - setTimeout(function() { - that.updateDisplay(); - }, 1000); - }); - }); -}; -``` - -## Find out more - -You can read a full tutorial that accompanies this example dapp, plus many more tutorials, on [kauri.io](https://kauri.io/article/68fca74301814d09bfcc35e07ff30fbc/v1/create-a-%22hello-world%22-fullstack-dapp). - -Other resources useful to continue your dapp development journey are: - -- [CryptoZombies](https://cryptozombies.io/): Learn Solidity building your own Zombie game -- [Open Zeppelin Ethernaut](https://ethernaut.openzeppelin.com/): Complete levels by hacking smart contracts -- [ChainShot](https://www.chainshot.com/): Solidity, Vyper and Web3.js coding tutorials -- [Consensys Academy](https://consensys.net/academy/bootcamp/): Online Ethereum developer bootcamp -- [Remix](https://remix.ethereum.org/): Web-based IDE for working on Solidity and Vyper smart contracts with in-line compile errors & code auto-complete -- [Ganache](https://www.trufflesuite.com/ganache): One-click blockchain for local development -- [Grid](https://grid.ethereum.org/): Download, configure, and run Ethereum nodes and tools -- [Embark](https://framework.embarklabs.io/) All-in-one platform with smart contract workflows, debugger, testing, and more +### Interact + +Now that you have an understanding of the logic, let's use the app UI to interact with the contract! + +Try using the form in the IDE's Browser to set the `message` variable on the contract. Submitting the form should trigger our JavaScrip function, `setMessage`, which creates an Ethereum transaction to update the smart contract state. The new state is then read from the contract and updated in the Browser. + +## Next Steps + +Congratulations! You've made it through our first tutorial. You've taken your first big step towards developing on Ethereum. + +Each of our subsequent Ethereum Studio templates increase in complexity. We recommend you you create a "Coin" project next. Create a new project by selecting the plus symbol in the top-right IDE menu of your screen. + +## Learn more + +Ready to move on from Ethereum Studio? + +Here's some other useful online resources to continue your dapp development journey: + +- [CryptoZombies](https://cryptozombies.io/): Learn Solidity building your own Zombie game +- [Open Zeppelin Ethernaut](https://ethernaut.openzeppelin.com/): Complete levels by hacking smart contracts +- [ChainShot](https://www.chainshot.com/): Solidity, Vyper and Web3.js coding tutorials +- [Consensys Academy](https://consensys.net/academy/bootcamp/): Online Ethereum developer bootcamp +- [Remix](https://remix.ethereum.org/): Web-based IDE for working on Solidity and Vyper smart contracts with in-line compile errors & code auto-complete + +## Local development + +Looking to set up a local Ethereum development environment? [Start here](https://ethereum.org/developers/#developer-tools). diff --git a/packages/editor/templates/Hello World/app/app.js b/packages/editor/templates/Hello World/app/app.js index 168fff69..55d18798 100755 --- a/packages/editor/templates/Hello World/app/app.js +++ b/packages/editor/templates/Hello World/app/app.js @@ -5,44 +5,42 @@ // endpoint: "http://...." // } -// Create an instance of the smart contract, passing it as a property, -// which allows web3js to interact with it. +// Creates an instance of the smart contract, passing it as a property, +// which allows web3.js to interact with it. function HelloWorld(Contract) { this.web3 = null; this.instance = null; this.Contract = Contract; } -// Initialize the `HelloWorld` object and create an instance of the web3js library, +// Initializes the `HelloWorld` object and creates an instance of the web3.js library. HelloWorld.prototype.init = function() { - // The initialization function defines the interface for the contract using - // the web3js contract object and then defines the address of the instance - // of the contract for the `HelloWorld` object. - - // Create a new Web3 instance using either the Metamask provider - // or an independent provider created as the endpoint configured for the contract. + // Creates a new Web3 instance using a provider + // Learn more: https://web3js.readthedocs.io/en/v1.2.0/web3.html this.web3 = new Web3( (window.web3 && window.web3.currentProvider) || new Web3.providers.HttpProvider(this.Contract.endpoint) ); - // Create the contract interface using the ABI provided in the configuration. + // Creates the contract interface using the web3.js contract object + // Learn more: https://web3js.readthedocs.io/en/v1.2.1/web3-eth-contract.html#new-contract var contract_interface = this.web3.eth.contract(this.Contract.abi); - // Create the contract instance for the specific address provided in the configuration. + // Defines the address of the contract instance this.instance = this.Contract.address ? contract_interface.at(this.Contract.address) : { message: () => {} }; }; -// Gets the message value stored on the instance of the contract. +// Gets the `message` value stored on the instance of the contract. HelloWorld.prototype.getMessage = function(cb) { this.instance.message(function(error, result) { cb(error, result); }); }; -// Updates the message value on the instance of the contract. +// Updates the `message` value on the instance of the contract. +// This function is triggered when someone clicks the "send" button in the interface. HelloWorld.prototype.setMessage = function() { var that = this; var msg = $("#message-input").val(); @@ -103,19 +101,21 @@ HelloWorld.prototype.waitForReceipt = function(hash, cb) { }); }; -// Gets the block number by using the web3js `getBlockNumber` function to return -// the value of the latest block in the configured endpoint. +// Gets the latest block number by using the web3js `getBlockNumber` function +// Learn more: https://web3js.readthedocs.io/en/v1.2.1/web3-eth.html#getblocknumber HelloWorld.prototype.getBlockNumber = function(cb) { this.web3.eth.getBlockNumber(function(error, result) { cb(error, result); }); }; -// Hide or show the loader when performing async operations +// Hides or displays the loader when performing async operations HelloWorld.prototype.showLoader = function(show) { document.getElementById("loader").style.display = show ? "block" : "none"; - document.getElementById("message-button").style.display = show ? "none" : "block"; -} + document.getElementById("message-button").style.display = show + ? "none" + : "block"; +}; // Calls the functions `getMessage` and `getBlockNumber` defined above, then // sets the DOM element texts to the values they return or displays an error message @@ -141,7 +141,7 @@ HelloWorld.prototype.updateDisplay = function() { }); }; -// Bind setMessage function to the button defined in app.html +// Binds setMessage function to the button defined in app.html HelloWorld.prototype.bindButton = function() { var that = this; @@ -150,7 +150,7 @@ HelloWorld.prototype.bindButton = function() { }); }; -// JavaScript boilerplate to create the instance of the `HelloWorld` object +// Creates the instance of the `HelloWorld` object // defined above, and show the HTML elements on the page: HelloWorld.prototype.main = function() { $(".blocknumber").show(); @@ -166,6 +166,7 @@ HelloWorld.prototype.onReady = function() { if (typeof Contracts === "undefined") var Contracts = { HelloWorld: { abi: [] } }; + var helloWorld = new HelloWorld(Contracts["HelloWorld"]); $(document).ready(function() { diff --git a/packages/editor/templates/Hello World/contracts/HelloWorld.sol b/packages/editor/templates/Hello World/contracts/HelloWorld.sol index bd1e781e..1da5e9a5 100755 --- a/packages/editor/templates/Hello World/contracts/HelloWorld.sol +++ b/packages/editor/templates/Hello World/contracts/HelloWorld.sol @@ -1,24 +1,31 @@ -// Specifies that the source code is for a version -// of Solidity greater than 0.5.10 +// Specifies that the source code is for a version of Solidity greater than 0.5.10. +// Learn more: https://solidity.readthedocs.io/en/latest/layout-of-source-files.html#pragma pragma solidity ^0.5.10; -// A contract is a collection of functions and data (its state) -// that resides at a specific address on the Ethereum blockchain. +// 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/latest/structure-of-a-contract.html contract HelloWorld { - // The keyword "public" makes variables accessible from outside a contract - // and creates a function that other contracts or SDKs can call to access the value + // 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; - // A special function only run during the creation of the contract + // 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/latest/contracts.html#constructors constructor(string memory initMessage) public { - // Takes a string value and stores the value in the memory data storage area, - // setting `message` to that value + // Accepts a string argument `initMessage` and sets the value + // into the contract's `message` storage variable). message = initMessage; } - // A publicly accessible function that takes a string as a parameter - // and updates `message` + // A public function that accepts a string argument + // and updates the `message` storage variable. function update(string memory newMessage) public { message = newMessage; } From c46f4f0b84e6de683278de70c731a8a47c53103f Mon Sep 17 00:00:00 2001 From: Sam Richards Date: Thu, 28 May 2020 13:26:19 -0700 Subject: [PATCH 2/4] Update Coin link --- packages/editor/templates/Hello World/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/editor/templates/Hello World/README.md b/packages/editor/templates/Hello World/README.md index af07e575..1e20b660 100755 --- a/packages/editor/templates/Hello World/README.md +++ b/packages/editor/templates/Hello World/README.md @@ -76,7 +76,7 @@ Try using the form in the IDE's Browser to set the `message` variable on the con Congratulations! You've made it through our first tutorial. You've taken your first big step towards developing on Ethereum. -Each of our subsequent Ethereum Studio templates increase in complexity. We recommend you you create a "Coin" project next. Create a new project by selecting the plus symbol in the top-right IDE menu of your screen. +Each of our subsequent Ethereum Studio templates increase in complexity. We recommend you [create a "Coin" project next](https://studio.ethereum.org/). ## Learn more From 73d15d3b458acdf0f00dacefdd6a65c4ef89de20 Mon Sep 17 00:00:00 2001 From: Sam Richards Date: Tue, 2 Jun 2020 11:45:13 -0700 Subject: [PATCH 3/4] Update README goals --- .../editor/templates/Hello World/README.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/packages/editor/templates/Hello World/README.md b/packages/editor/templates/Hello World/README.md index 1e20b660..2b23607e 100755 --- a/packages/editor/templates/Hello World/README.md +++ b/packages/editor/templates/Hello World/README.md @@ -3,8 +3,8 @@ The goal of this "Hello World" project template is to teach you how to: - Deploy an [Ethereum smart contract](https://ethereum.org/learn/#smart-contracts) written in the [Solidity programming language](https://ethereum.org/developers/#smart-contract-languages). -- Store and update state variables of your deployed contract. - Fetch your contract's state from the blockchain and render it to a frontend using a [JavaScript library](https://ethereum.org/developers/#frontend-javascript-apis). +- Update state variables of your deployed contract by interacting with your app in the IDE's Browser. If you'd like to learn more about how Ethereum works before diving in, we recommend you [start here](https://ethereum.org/learn/). @@ -18,23 +18,23 @@ On the right side this IDE, you'll find the Preview panel, where you can view th There are additional features of Ethereum Studio that we will introduce in later tutorials but for now, let's move on. - - - + ## The smart contract -First, let's find the [smart contract](https://ethereum.org/learn/#smart-contracts). +First, let's take a look at the smart contract. > Use the Explore panel to navigate to the _Files/contracts/HelloWorld.sol_ file. Return here once you've read through the file. + + Every smart contract runs at an address on the Ethereum blockchain. You must compile and deploy a smart contract to an address before it can run. When using Studio, the browser simulates the network, but there are several test networks and one main network for the Ethereum blockchain. ### 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. We will automatically compile the code every time you save your changes (by clicking the floppy disk icon at the top of a file) or when performing a deployment. +Before you deploy the HelloWorld.sol contract, you should understand compilation. [Solidity](https://solidity.readthedocs.io/en/latest/) is a compiled language, and you need to convert the Solidity code into bytecode before the contract can run. Ethereum Studio will automatically compile the code every time you save your changes (by clicking the floppy disk icon at the top of a file) or when performing a deployment. ### 2. Deploy @@ -44,7 +44,7 @@ Configuring the contract allows you to set the name of the contract as well as t Then deploy the contract by selecting the "_Deploy_" option within the Deploy panel. -You should now see the deployed contract's `message` variable displayed on the IDE's Browser. +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). ### 3. Interact @@ -70,13 +70,13 @@ Return here once you've read through the file. Now that you have an understanding of the logic, let's use the app UI to interact with the contract! -Try using the form in the IDE's Browser to set the `message` variable on the contract. Submitting the form should trigger our JavaScrip function, `setMessage`, which creates an Ethereum transaction to update the smart contract state. The new state is then read from the contract and updated in the Browser. +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. ## Next Steps Congratulations! You've made it through our first tutorial. You've taken your first big step towards developing on Ethereum. -Each of our subsequent Ethereum Studio templates increase in complexity. We recommend you [create a "Coin" project next](https://studio.ethereum.org/). +Each of our subsequent Ethereum Studio templates increase in complexity. We recommend you [create a "Coin" project](https://studio.ethereum.org/) next. ## Learn more From cdf553458f267ef65fafddb3efeb14f266052a80 Mon Sep 17 00:00:00 2001 From: Sam Richards Date: Wed, 3 Jun 2020 10:11:11 -0700 Subject: [PATCH 4/4] Update README to present tense Co-authored-by: Chris Chinchilla --- .../editor/templates/Hello World/README.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/packages/editor/templates/Hello World/README.md b/packages/editor/templates/Hello World/README.md index 2b23607e..b99b7e1d 100755 --- a/packages/editor/templates/Hello World/README.md +++ b/packages/editor/templates/Hello World/README.md @@ -6,15 +6,15 @@ The goal of this "Hello World" project template is to teach you how to: - Fetch your contract's state from the blockchain and render it to a frontend using a [JavaScript library](https://ethereum.org/developers/#frontend-javascript-apis). - Update state variables of your deployed contract by interacting with your app in the IDE's Browser. -If you'd like to learn more about how Ethereum works before diving in, we recommend you [start here](https://ethereum.org/learn/). +If you'd like to learn more about how Ethereum works before beginning, we recommend you [start here](https://ethereum.org/learn/). ## Introduction to the Ethereum Studio IDE Ethereum Studio is a web-based IDE where you can write, deploy and test smart contracts, and build a frontend application to interact with them. -On the left side of this IDE, you'll find the Explorer panel (the folder icon). Here you can view the file structure of your project. You can toggle the folder icon on the far left to hide or display this panel. +On the left side of this IDE, you can find the Explorer panel (the folder icon). Here you can view the file structure of your project. You can toggle the folder icon on the far left to hide or display this panel. -On the right side this IDE, you'll find the Preview panel, where you can view this project's application in the Browser tab. You can toggle the panel icon on the far right to hide or display this preview. +On the right side this IDE, you can find the Preview panel, where you can view this project's application in the Browser tab. You can toggle the panel icon on the far right to hide or display this preview. There are additional features of Ethereum Studio that we will introduce in later tutorials but for now, let's move on. @@ -34,11 +34,11 @@ Every smart contract runs at an address on the Ethereum blockchain. You must com ### 1. Compile -Before you deploy the HelloWorld.sol contract, you should understand compilation. [Solidity](https://solidity.readthedocs.io/en/latest/) is a compiled language, and you need to convert the Solidity code into bytecode before the contract can run. Ethereum Studio will automatically compile the code every time you save your changes (by clicking the floppy disk icon at the top of a file) or when performing a deployment. +Before you deploy the _HelloWorld.sol_ contract, you should understand compilation. [Solidity](https://solidity.readthedocs.io/en/latest/) 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. ### 2. Deploy -Now let's deploy the HelloWorld.sol contract. Again, in the left panel of the IDE, you'll find the Deploy panel (the rocket icon). Here you can configure and deploy your contract to your local network. +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. 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. @@ -48,17 +48,17 @@ You should now see the deployed contract's `message` variable displayed on the I ### 3. Interact -Now check out the Interaction panel on the left side of this IDE (the mouse icon). +Now look at the Interaction panel on the left side of this IDE (the mouse icon). -Here you view and interact with your deployed contract using its functions. Try updating the `message` variable using the `update` function. This will create a new Ethereum transaction and you should see the message update in the IDE's Browser. +Here you view and interact with your deployed contract using its functions. Try updating the `message` variable using the `update` function. This creates a new Ethereum transaction and you should see the message update in the IDE's Browser. ## The web app (dapp) Often when creating an Ethereum smart contract, it's useful to create a web application for users to interact with. We call these applications "dapps". [Dapps on Ethereum](https://ethereum.org/dapps/) are web applications backed by Ethereum smart contracts. Instead of using a centralized server or database, these applications rely on the blockchain as a backend for program logic and storage. -Dapps typically use a [JavaScript convenience libraries](https://ethereum.org/developers/#frontend-javascript-apis) that provide an API to make integrations with smart contract easier for developers. In this project, you'll be using [web3.js](https://web3js.readthedocs.io/en/v1.2.8/). +Dapps typically use a [JavaScript convenience libraries](https://ethereum.org/developers/#frontend-javascript-apis) that provide an API to make integrations with smart contract easier for developers. In this project, you are using [web3.js](https://web3js.readthedocs.io/en/v1.2.8/). -This tutorial won't cover the HTML or CSS since it's not specific to a dapp, although it's worth noting that this application uses jQuery to manipulate the HTML (of _Files/app/app.html_) that is utlimately rendered in our IDE's Browser. +This tutorial won't cover the HTML or CSS since it's not specific to a dapp, although it's worth noting that this application uses jQuery to manipulate the HTML (of _Files/app/app.html_) that is ultimately rendered in the IDE's Browser. Let's take a look at our application logic.