Skip to content

Commit

Permalink
Merge pull request #235 from SuperblocksHQ/hello-world-v2
Browse files Browse the repository at this point in the history 
Update Hello World template [Fixes #234]
  • Loading branch information
@samajammin
samajammin authored Jun 8, 2020
2 parents a7737a0 + cdf5534 commit 364730a
Show file tree
Hide file tree
Showing 4 changed files with 103 additions and 198 deletions.
2 changes: 1 addition & 1 deletion packages/editor/templates/Crypto Pizzas/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand Down
229 changes: 63 additions & 166 deletions packages/editor/templates/Hello World/README.md
View file
Original file line number Diff line number Diff line change
@@ -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).
- 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.

> Tutorial content supplied by [kauri.io](https://kauri.io).
If you'd like to learn more about how Ethereum works before beginning, 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 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.

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 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.

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.
<!-- TODO provide links to learn more. For support, go here. For documentation, go here. For a video tutorial, go here. -->

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 take a look at the smart contract.

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.
<!-- TODO link to address explantion -->
<!-- TODO link to Ethereum networks explanation -->
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](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.

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 can 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 as well as output from the transaction in the IDE's console (on the lower right side of the IDE).

```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 look at 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 creates 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 are 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 ultimately rendered in the 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 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](https://studio.ethereum.org/) next.

## 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).
Loading

0 comments on commit 364730a

Please sign in to comment.