Rockside Guitar tutorial

Deploy and interact with your Dapps (decentralized applications)

Choose your network : use a public one, or deploy your own

In this tutorial, we will learn how to deploy a DAPP on Ethereum, and interact with it, thanks to Rockside. The first step is to go to the Rockside cloud, on the blockchain nodes screen, and get the RPC enpoint of the node you want to use.


Public network

Rockside cloud provides public mainnet and testnet networks and which are already synchronized, and you can use directly. For more information, read public network quick start. You will need native ETH of the network where you want to deploy the smart contract, in order to be able to deploy it.

Create your own consortium

Rockside cloud also gives you the possibility to deploy your own private/consortium network in a few minutes, on which you can deploy your private Dapps. For more information read the private network quick start. Don't forget to fund your Metamask address during the process of creation of your consortium !

Configure Metamask

Metamask browser extension will be used for convenience as a bridge between the web front-end of the application and the blockchain. If you're not yet confortable with it please read this Metamask article, which explains how to target a specific node in Metamask.

Deploy your Dapp


Step 1: Deploy a smart contract thanks to Remix. Go to Remix web IDE, and choose the Solidity environment






Step 2: Go to the file explorer, create a new file clicking on the '+', then paste the following code

pragma solidity >=0.4.22 <0.6.0;
contract RocksideFlag {
   mapping (address => bool) public captured;
   event LogCaptured(address indexed whoAddress, bytes32 whoName);
   function captureTheFlag(bytes32 name) public {
     captured[msg.sender] = true;
     emit LogCaptured(msg.sender, name);
   }
}





Step 3: Compile and deploy your smart contract


To compile, go to the compilation plugin, then click on compile RocksideFlag.sol





Once compiled, you have to deploy this smart contract. Go to the deployment plugin and select Injected web3, which will use the web3 javascript library injected by Metamask in your web browser. Thanks to this, you will be able to deploy your contract on the network of your choice. Then click on Deploy. A Metamask popup will appear, you have to confirm the deployment transaction




Go back to the Rockside Cloud web interface, on your node details page. Take a look at the transaction section. You will be able to find the contract creation transaction. The Rockside Guitar smart contract has been deployed ! Now go back to the Remix deployment page, and copy the address of the newly deployed smart contract, by clicking on the copy button. Save this address, we will need it later in this tutorial.





Step 5 (optional): Bookmark your smart contract address

With Rockside you can link an Ethereum address to a more user friendly identity. Let's do that for our smart contract. Go back to the Rockside Cloud web interface, click on Address Book section. Then fill the form with your previously deployed smart contract address, a label (e.g. Rockside Guitar) and an image of your choice. Each transaction you will do to the Rockside Guitar contract will be flagged as the Rockside Guitar contract in the transaction explorer.





Step 6: Get the code of the dedicated front-end interface of this Dapp by cloning or downloading this repo. Then you will need to modify theses lines by adding your contract address and network ID

// file index.js, Line 4
contractAddress: function() {
  return "enter your contract address here";
},
networkId: function() {
  return NETWORKID;
},



The contract address is the one you copied before

The network ID depends of the type of network you choose. If your network is mainnet, the networkID is 1, Ropsten is 3, Rinkeby is 4. If you instanciated your own private consortium, go to Rockside Cloud web interface, click on your consortiums and get your custom networkID






Step 7: Interact with smart contract from the dedicated front-end interface of the Dapp.


Launch the front-end interface locally by typing these commands:

cd rockside-guitar-dapp-tutorial
npm install
npm run dev


Then go to http://localhost:3000 in a web browser. You will be able to take the guitar. Write your name and validate. A Metamask popup will appear, confirm the transaction.






Congratulations !! You caught the Rockside Guitar




Step 8 (optional): Take a look at the transaction explorer


You can monitor each transaction which pass through your node. Go to the detail of your blockchain node, and take a look at the bootom of the page. All transactions which have been sent to this node RPC are listed here