A lot of us might have been in a situation wherein we had a brilliant idea, may it be of a product or an event, but just didn’t have the funds to bring it to life. This is where crowdfunding comes in.

You might have already heard of Kickstarter, or CAMPFIRE, which are some of the known crowdfunding platforms that currently exist. In this tutorial, we’ll be building something similar, specifically a simple decentralized crowdfunding platform using Ethereum.

What We Are About To Build

In this tutorial, we’ll be building a simple crowdfunding dapp which will have the ‘minimum’ functionalities that you’d expect from a crowdfunding platform. Basically, we should be able to start crowdfunding projects, and fund them, which will look like this:

Function List

1. Start Project — we should be able to start a new crowdfunding project, along with setting its details like goal amount, etc.
2. View Projects — we should be able to retrieve our existing projects’ details and display it
3. Fund Project — we should be able to fund an existing project with Ether
4. Retrieve Funds — in the case where a project does not meet its goal amount, and is past its deadline, funders should be able to retrieve their contributed funds (All-or-Nothing setup)

Tools

1. Smart Contract
   Solidity, Remix, Metamask
2. Frontend
   Web3.js, Vue.js, Vue-cli, Vuetify

Aside from that, we will also be using Git later to clone our boilerplate :)

Prerequisites

Before proceeding with this tutorial, you should first read the following articles:

1. Getting Started with Metamask
2. Compile and Deploy Using Remix IDE
3. Introduction to Smart Contracts and Solidity

Why Make a Crowdfunding App?

Great ideas need effort and funding. You can ask for donations or solicitations, but donors would of course prefer giving to projects where they have some sort of certainty that the project is actually going somewhere.

This is where crowdfunding comes in, an ideal setup where you can specify your goal, and a deadline for reaching it. If you miss your goal, the donations are returned, therefore reducing the risk for donors.

The existing platforms are all great, but in every completed project or in every donation sent, the platform takes a certain percent (margin) which could, at times, be too high for the project starters. What’s more, is that we heavily depend on them as the third-party that connects us to the donors. Should they fail, then we’re also in trouble.

With a decentralized setup, we can have a trustless platform and therefore the only fees everyone will pay are just the gas fees.

This is also one of the apps that are good to build early on, because you can definitely learn a lot by doing so.

Making the Project

Workflow

1. Creating the Smart Contract
2. Building the Web App

Creating the Smart Contract

We’ll be using Solidity, one of the programming languages used for creating smart contracts, specifically for Ethereum-based ones.

In Remix, create a new file named Crowdfunding.sol and add the following code:

We’re creating 2 contracts in one .sol file: Crowdfunding and Project. The Crowdfunding contract acts as a container for all Project contracts that will be initialized. Each crowdfunding project will have a contract of its own.

As for the Project contract, it is instantiated through the Crowdfunding contract, and handles all the methods that can be performed in every crowdfunding project, such as contribute(), getRefund(), etc.

Basically, each project will initially be in the Fundraising state, and will change states through the checkIfFundingCompleteOrExpired() function from there. Every time someone contributes funds towards the project, the state will change depending on certain conditions such has “has the project goal amount been met” or “has the project exceeded set deadline”.

Also, notice how we send funds from our contract in both the payOut() and getRefund() functions. We did not just directly send it, but had some security considerations because this is an area prone to a re-entrancy attack.

And so, compile the Crowdfunding contract (make sure you select compiler version at the right side of Remix, and choose 0.5.4+commit.9549d8ff because we are using Solidity version 0.5.4) and deploy it to the Ropsten Test Network. Make sure you are compiling and deploying the Crowdfunding contract.

To check that our contract was deployed, you should see the following:

Building the Web App

We’re done working on our smart contract. However, it doesn’t seem user-friendly and fun to just use Remix to interact with the contract, so we’ll be making a simple web application.

Setting Up

To get up to speed, let’s clone a boilerplate project (found here) by doing the following in a Terminal (or Command Prompt/Powershell for Windows):

# Cloning the boilerplate from GitHub
git clone -b boilerplate --single-branch https://github.com/openberry-ac/crowdfunding.git

# Navigating to the directory and installing packages
cd crowdfunding
npm install

# To run the app
npm run serve

In a few minutes, you should see the app running through a browser on http://localhost:8080. Apparently, all we see is a white screen, because there is an error. If we open our console, we can see this:

Thing is, we have not connected our web app with our smart contract instance yet, which causes this error. And so, that is exactly what we’re about to do next.

Connecting to Our Smart Contract Instance

To enable our web app to interact with our smart contract, we will be using web3.js. We already have the package installed, you can see how it is called in the file named web3.js inside the “contracts” folder, where we should put something like this:

It basically loads the web3 instance the MetaMask extension initializes, which we will be needing later to interact with our smart contract.

You might encounter a MetaMask pop-up window that asks for access permission. This is because we have ethereum.enable() where the app requests for account (or wallet) access. You should just click the ‘Connect’ button right here:

Voila! You should see the app running through a browser on http://localhost:8080 looking like this (though it is not functional yet):

Now, we need our smart contract’s ABI to connect it to our web app. We have 2 contracts, so we need to get both their ABIs. To get it, go back to Remix, go to the Compile tab, and click ABI beside the Details button as shown in the picture (make sure Crowdfunding is selected):

After getting it, open the file named crowdfundInstance.js in the contracts folder, then paste it as the variable abi ’s value. There should be an example in the file, which you can always refer to.

Then, as you can see, we also need the deployed contract’s address, which you can get by going to Remix’s Deploy tab, and clicking the copy icon on your deployed contract, as shown in this picture:

Go back to crowdfundInstance.js in the contracts folder, then paste the address as the variable address ’ value. Save the file, and we’re done setting the contract information for our Crowdfunding contract. For the Project contract, just go back to Remix’s Compile tab, select the Project contract, and get the ABI just like this:

After getting it, open the file named crowdfundProjectInstance.js in the contracts folder, then paste it as the variable abi ’s value. There should be an example in the file, which you can always refer to. We’re all set!

Defining the Methods

As we see in the browser, our user interface is ready, but apparently, nothing is functional yet. That’s because we have not defined our functions yet, which we will be doing now. Go back to App.vue, and go to line 221 where you can see methods, but everything just contains a console.log().

Our first function is retrieving all projects and their details. Let’s modify the getProjects() function to look like this:

For this part, we simply call the returnAllProjects() function of our Crowdfunding contract to get all the projects’ contract addresses. Then, for each of them, we call getDetails() and store them in our defined objects, projectInstances, projectData, etc.

Next, we modify the function for starting a new project, startProject():

Here, we’re just calling Crowdfunding contract’s startProject() function, while passing the data that has been inputted through the form. The contract then receives the data and creates a new project. After that, we get data being returned by the ProjectStarted event, and store the new project, along with some default values, in the web app too.

Note that we use this.account in this part, which was retrieved in the mounted() part of the code (executed when component has been mounted). It’s basically the current account that is active in Metamask.

Now that we’ve set the functions for starting and viewing projects, let’s see them in action, shall we?

Let’s start a new project by clicking “Start a Project”, filling the form, and then submitting it. Note that there aren’t any form validation in place, so it’d be ideal if you input valid values for now :)

Once that’s done, your newly created project should immediately show up on the projects list like this:

Note: The app might not appear like the one shown on the image though. The interface for funding the project might not show because project creators are not allowed to fund their own project.

Moving on, we have the method that handles the event when a user funds a certain project, fundProject():

Remember the contribute() function in our smart contract? We just call that function in fundProject() which sends the amount the user inputted in to the form.

After defining the fundProject() function, we should now be able to use the previously ‘not functional’ fund button. What’s more is that immediately after the transaction is completed, the progress bar is updated. It should look like this:

Finally, we have getRefund(), which allows the user to retrieve his or her previously donated funds to an already expired (past deadline) project.

And, we’re done!

Refresh your browser to see the changes. This time, the whole web app is complete, and everything is functional! You should then be able to use it like this:

You can see the final result on this GitHub repository (master branch) which you can always refer to :)

Conclusion

We just finished making our simple crowdfunding platform! Awesome!

We learned how to instantiate a contract using another contract, and many more concepts related to Solidity through this application. We also learned how to set up our own project using Vue.js, and created a simple application.

So, what’s next?

Ethereum’s website has a crowdsale tutorial which you might want to check out. It’s similar to what we just did, but uses a different approach (more into having a Decentralized Autonomous Organization). You might also want to write everything from scratch as you already have an idea on how the whole thing works.

On a side note, you might want to check out openberry’s previous tutorial, Ethereum Solidity + Vue.js Tutorial Simple Auction Dapp within 10 minutes.

’til the next tutorial!

openberry is a tutorial marketplace, designed to allow anyone to learn blockchain programming.

• openberry | blockchain tutorial marktplace
• openberry (@openberry_ac) | Twitter

Creating a Simple Crowdfunding Dapp with Ethereum Solidity and Vue.js was originally published in openberry on Medium, where people are continuing the conversation by highlighting and responding to this story.

You might have heard of auctions, a place where you can buy and sell things. Although it is very convenient, it costs sellers about 10% of their earnings to pay the service charge to the auction’s managing company.

If the company itself cheats some transactions and get the money, how will you know that you have been cheated?

This is where a decentralized setup is an optimal solution.
If there is no third party, sellers can earn more, in a secure way.

Function List

1. Creating an auction
2. Placing a bid
3. Finalizing an auction

Tools

1. Smart Contract
   Solidity, Remix, Metamask
2. Frontend
   Web3.js, Vue.js, Vue-cli, Boostrap-vue

Prerequisites

1. Getting Started with MetaMask
2. Compile and Deploy Using Remix IDE
3. Introduction to Smart Contracts and Solidity

Github

If you only want to see the code, you can find it here:
https://github.com/openberry-ac/Auction

Why Build an Auction Dapp?

The auction system is a good application to build for the purpose of learning about smart contracts and decentralized applications, especially for beginners.

Smart contracts will help you exchange money, properties, shares, or anything of value in a transparent, conflict-free way while avoiding the services of a middleman, like the auction system.

Making the Project

Work flow

1. Creating the Smart Contract
2. Building web app & Web3.js setting
3. Defining the Methods: Frontend Coding

Creating the Smart Contract

Since our contract will be based on Ethereum, we will use Solidity, a programming language used for creating smart contracts.

In Remix, create a new file named AuctionBox.sol and add the following code:

In an actual setting, many items can be auctioned. In order to make it easy to access all the auctioned items, we created a bundle or box called “AuctionBox” which includes all the auction addresses!

To make this system work, we need to prepare two types of contracts, called Auction contract and AuctionBox contract.

After writing it in Remix, deploy it to the Ropsten Test Network.

To verify that our contract was deployed, you should see this in Remix:
Here, we need to select AuctionBox contract.

Let’s create an auction !

After deploying, let’s try to make an auction using createAuction method.

If you success, you can click returnAllAuctions and see its contract address!

Building the Web App

Our smart contract now works, but there’s no fun in just looking at numbers so we’ll be making a simple web application.

Setting Up

To speed up things, a template project is provided which can be found here. Now let’s follow the commands below, in your Terminal (or Command Prompt/Powershell for Windows):

# git clone the project template
git clone -b boilerplate --single-branch https://github.com/openberry-ac/Auction.git

# go inside the folder
cd Auction

# install packages needed in the web application
npm install

# install web3, this is for connecting the contract 
npm install -s web3@1.0.0-beta.37

# To run the app
npm run dev

Then it should automatically render on http://localhost:8080/

Setting up web3.js

Open the file named web3.js in the contracts folder, then paste it as following code:

This basically gets the web3 instance that the Metamask extension initializes, so we can use it in our app too. We need to call this later when retrieving our smart contract instance.

You might encounter a MetaMask pop-up window in your browser that asks for access permission. You should just click the ‘Connect’ button right here:

Connecting to Our Smart Contract Instance

Now, we need our smart contract’s ABI and the contract address to connect it to our web app. To get the ABI, go back to Remix, go to the Compile tab, and click ABI beside the Details button as shown in the picture:

To get the contract address, go to the Run tab, and click Copy button as shown in the picture:

You can also get Auction contact’s ABI by changing the selected contract to Auction and clicking ABI.

After getting it, open the files named AuctionBoxInstance.js and AuctionInstance.js in the contracts folder, then paste it as the variable abi ’s value and the contract address, like this:

Defining the Methods

You might notice that the user interface is there, but the buttons aren’t functional. That’s because we have not defined our functions yet, which we will be doing now. Open App.vue in the src folder and let’s get started to fill in the blanks!

beforeMount

Here, we will get the number of auctions that you created before.

Create Auction Function

Here, we create an auction using the user’s inputs, which will be shown at the bottom of the page.

Place Bid Function

Here, we handle the event wherein the user places a bid.

Finalize Auction Function

Here, we handle the event wherein the user finalizes an auction.

We have already created an auction in Remix, you can see its contract address in console.

In my case, I created 9 auctions, so I can see this in console:

Complete!!

Refresh your browser to see the changes. This time, the whole web app is complete, and everything is functional! You should then be able to use it like this:

NOTE: The one who made the action cannot place a bid in his own auction. So, you need to switch to another account (other than the auction starter) to place a bid.

NOTE: To display the auction card, please create another auction in your browser.

Summary

You learned how to create a smart contract and how to interact with it using web3.js. You also learned how to setup your own project using Vue.js, and created a simple application.

So what’s next?

You might want to add the logic for the “deadline” because it is important in a real auction application. For now, we skipped it to avoid complexity and to lessen the time, but if you want to try to build it, this will help you a lot :)

If you want the full code of this tutorial, you can check it here:
https://github.com/openberry-ac/Auction

On a side note, you might want to check out openberry’s previous tutorial, “ERC721 + Vue.js CryptoKitties-like Dapp in under 10 minutes”.

ERC721 + Vue.js CryptoKitties-like Dapp in under 10 minutes

openberry is a tutorial marketplace, designed to allow anyone to learn blockchain programming.

• openberry | blockchain tutorial marktplace
• openberry (@openberry_ac) | Twitter

Ethereum Solidity + Vue.js Tutorial Simple Auction Dapp within 10 minutes. was originally published in openberry on Medium, where people are continuing the conversation by highlighting and responding to this story.

You might have heard of CryptoKitties, an Ethereum-based platform where you can collect, buy, sell, and even breed digital cats, and about how people have been spending a crazy amount of money in the game.

Making a CryptoKitties-like application is actually quite easy! And in this tutorial, we’ll be doing just that.

What We Are About To Build

From here onwards, we will be building a simple CryptoKitties-like dapp, which we will call CryptoVipers (vipers, because why not?). In our simple application, we will be able to buy vipers, breed vipers, and view the ones we own. Which will be something like this:

Function List

1. Viper Creation — we should be able to own new vipers by buying one or breeding two of them
2. View Viper Details — we should be able to retrieve our vipers’ details and display it.

Tools

1. Smart Contract
   Solidity, Remix, Metamask
2. Frontend
   Web3.js, Vue.js, Vue-cli, Boostrap-vue

Aside from that, we will also be using Git later to clone our boilerplate :)

Prerequisites

Before proceeding with this tutorial, you should first read the following articles:

1. Getting Started with MetaMask
2. Compile and Deploy Using Remix IDE
3. Introduction to Smart Contracts and Solidity

Understanding ERC721

ERC721 is a standard that describes how non-fungible (or unique tokens) on the Ethereum blockchain should be made. With ERC721, each item or token is unique, meaning it is not equal to any other token. You could think of each one as a rare, one-of-a-kind collectible.

ERC721 Interface

According to the specifications, ERC721 defines a minimum interface a smart contract must implement to allow unique tokens to be managed, owned, and traded:

• balanceOf( _owner ) — Returns the number of tokens in a specific _owner’s wallet.
• ownerOf( _tokenId ) — Returns the wallet address of the specific token’s owner.
• totalSupply() — Returns the total amount of tokens created
• transfer( _to, _tokenId ) — Transfers token with _tokenId from sender’s wallet to a specific wallet.
• takeOwnership( _tokenId ) — Claims the ownership of a given token ID
• approve( _to, _tokenId ) — Approves another address to claim for the ownership of the given token ID

Also, it defines two events: Transfer, and Approval. A Transfer event is emitted when a token is transferred from one wallet to another. On the other hand, an Approval event is emitted when an address (user) approves another address to claim the ownership of a certain token that he owns.

OpenZeppelin ERC721 Implementation

OpenZeppelin provides reusable smart contracts with implementations of standards like ERC20 and ERC721. In this case, we will be importing their ERC721 implementation so we don’t have to write it ourselves from scratch.

Making the Project

Workflow

1. Creating the Smart Contract
2. Building the Web App

Creating the Smart Contract

Since our clone will also be based on Ethereum, our token will also be made using Solidity, one of the programming languages used for creating smart contracts.

In Remix, create a new file named ViperToken.sol and add the following code:

We’re basically importing OpenZeppelin’s ERC721 implementation, and adding our custom functions. We’re also importing SafeMath to avoid Integer Overflow and Underflow. Now, to explain each function:

First, the function generateViperGenes is responsible for determining the new viper’s genes, especially when it is being created through breeding (getting both parents’ genes). This is a very simple implementation though, and in this case, we use a simple number from 1–6 to determine how the viper will look like. You could do something better if you feel like it :)

Then, we have the function createViper which basically creates a new viper and gives it to the address passed in the parameter, “viperOwner”.

The function buyViper is a payable function (accepts payments) and calls the createViper function we previously defined. The word payable is a modifier that is used to indicate that this function can receive ether when you execute it. Now, you might have noticed this part:

require(msg.value == 0.02 ether);

The require statement checks a condition and raises an error when false. In Solidity, msg.value holds the amount of Ether being sent by the one who called the function. In this case, we want the user to pay 0.02 ether for buying a random viper. You may change this amount, or even remove it if you wish to.

We then have the breedVipers function which takes 0.05 ether as payment, and creates a new viper based off the two parents’ genes.

Next, we have the function getViperDetails which just returns details such as genes, and parent IDs of a given viper.

Finally, we have the ownedVipers function which returns a list of viper IDs that the function caller owns. The word msg.sender is the address of the user that executed that function.

Now, compile the ViperToken contract (make sure you select compiler version at the right side of Remix, and choose 0.5.3+commit.10d17f24 because we are using Solidity version 0.5.3) and deploy it to the Ropsten Test Network. Make sure you are compiling and deploying the ViperToken contract.

To check that our contract was deployed, you should see the following:

Building the Web App

Our smart contract now works, but there’s no fun in just looking at numbers so we’ll be making a simple web application.

Setting Up

To get up to speed, let’s clone a boilerplate project (found here) by doing the following in a Terminal (or Command Prompt/Powershell for Windows):

# Cloning the boilerplate from GitHub
git clone -b boilerplate --single-branch https://github.com/openberry-ac/cryptovipers.git

# Navigating to the directory and installing packages
cd cryptovipers
npm install

# Installing Web3
npm install -s web3@1.0.0-beta.37

# To run the app
npm run dev

Voila! In a few minutes, you should see the app running through a browser on http://localhost:8080 looking like this (though it is not functional yet):

Connecting to Our Smart Contract Instance

To enable our web app to interact with our smart contract, we will be using web3.js. We already have the package installed, you can see how it is called in the file named web3.js inside the “contracts” folder, where we should put something like this:

It basically loads the web3 instance the MetaMask extension initializes, which we will be needing later to interact with our smart contract.

You might encounter a MetaMask pop-up window that asks for access permission. This is because we have ethereum.enable() where the app requests for account (or wallet) access. You should just click the ‘Connect’ button right here:

Now, we need our smart contract’s ABI to connect it to our web app. To get the ABI, go back to Remix, go to the Compile tab, and click ABI beside the Details button as shown in the picture:

After getting it, open the file named abi.js in the contracts folder, then paste it as the variable contractAbi ’s value, like this:

There should be an example in the file, which you can always refer to. Then, we will have to specify the smart contract’s instance address too, which you can get by going to Remix’s Deploy tab, and clicking the copy icon on your deployed contract, as shown in this picture:

Open App.vue found inside the src folder, and paste your contract address on line 86 as the variable contractAddress’ value (there should also be comments in the file, which you can always refer to):

const contractAddress = ''; // Right here!
// Ex: const contractAddress = '0xf59c4c3c79071d3e11034a9344789bd3';

Defining the Methods

You might notice that the user interface is there, but the buttons aren’t functional. That’s because we have not defined our functions yet, which we will be doing now. Go back to App.vue, and go to line 116 where you can see methods, but everything just contains a console.log().

Our first function is for buying a viper. Let’s modify the buyViper() function to look like this:

For buying a single viper, we have a fee of 0.02 ether, so we need to pay it by sending our account details and 0.02 ether. We then call the buyViper() function from our smart contract, which returns the details of the new viper. We will save these details inside the vipers array.

Next, we modify the function for viper breeding, breedVipers():

We need to pay 0.05 ether to access this function. The breedVipers() function in our smart contract requires two integer parameters, matron and sire, so we pass the two integers to the function. This function also returns the details of the new viper and we need to save it to the vipers array.

Finally, we define the method for retrieving the details of vipers we own, called getVipers():

There are two functions to get the details, ownedVipers() and getViperDetails(). The first function is to get an array of our vipers then the second function is to get the details of each of the vipers. After getting the details of each viper, we save it to the vipers array.

And, we’re done!

Refresh your browser to see the changes. This time, the whole web app is complete, and everything is functional! You should then be able to use it like this:

You can see the final result on this GitHub repository (master branch) which you can always refer to :)

Conclusion

We just finished making our simple Cryptokitties clone! Awesome!

We learned how to create our own ERC721 implementation, and define our own custom functions. We also learned how to set up our own project using Vue.js, and created a simple application.

So what’s next?

You might want to write the token code (ERC721 implementation) from scratch while referencing to OpenZeppelin’s implementation or the standard specification. Or perhaps, you’d like to expand from what we have done and add more features like trading with other users, which is a good idea too 👍

On a side note, you might want to check out openberry’s previous tutorial, creating an Instagram-like DApp with IPFS + Vue.js.

’til the next tutorial!

openberry is a tutorial marketplace, designed to allow anyone to learn blockchain programming.

• openberry | blockchain tutorial marktplace
• openberry (@openberry_ac) | Twitter

ERC721 + Vue.js CryptoKitties-like Dapp in under 10 minutes was originally published in openberry on Medium, where people are continuing the conversation by highlighting and responding to this story.

Remix IDE (Integrated Development Environment) is a web application that can be used to write, debug, and deploy Ethereum Smart Contracts. When you want to write Smart Contracts, you can use this application.

Using Remix IDE is actually quite easy! In this tutorial, we’ll learn how to use it.

What We Are Trying To Do

From here onwards, we will study each part of the Remix IDE. We will write a simple Smart Contract, compile, then deploy it using Metamask Ropsten Test Network. Don’t worry, we will guide you as you write your Smart Contract.

Function List

1. Setting a Greeting — we should be able to set a greeting.
2. Displaying the Greeting — we should be able to retrieve the greeting and display it.

Tools

1. Smart Contract
   Solidity, Remix, Metamask

Prerequisites

Before proceeding with this tutorial, you should first read the following articles:

1. How to Use Metamask
2. Basic Solidity

Studying Remix IDE

Work Flow

1. Creating the Smart Contract
2. Compiling and Deploying the Smart Contract

Creating the Smart Contract

Since we really don’t need a complex Smart Contract, we’ll just make one for setting a greeting and displaying it. Our Smart Contract will be made using Solidity.

In Remix, create a new file named TestContract.sol. To create a file, click the Create New File button at the top left corner of the page:

After clicking the button, a window will appear. This will ask the filename of the new contract. Just input TestContract.sol like this:

After the file is created, add the following code to the code editor:

We’ve just basically defined two functions, setGreeting(), greet(), for setting a greeting and displaying it.

Compiling and Deploying Contracts

After writing the Smart Contract, we should compile the code to check if there are errors or warnings. If there are no any errors, the Smart Contract is ready to be deployed.

Compiling a Contract

To compile a Smart Contract, go to the Compile Tab and select the compiler version and select the appropriate version that is suitable to your Solidity version (in our tutorial, we will use 0.5.3+commit.10d17f24 since we used Solidity 0.5.3). You can refer to the screenshot below to find the tab and the settings:

After settings the options, click the Start to compile button, a success message or a list of errors will show below:

If there are no errors, a box with a green color, then the Smart Contract is successfully compiled. You can now deploy the code or get the ABI. The ABI is basically a specification in the form of a JSON, that describes the contract. This is very important when you want to deploy your contract to your applications.

Deploying a Contract

After successfully compiling your contract, you can now deploy it. Deploying a contract will let you test it and use it to your applications. Go to the Run Tab located at the side of the Compile Tab:

Set the options first at the top part of the tab. Here are what you need to know about the options before you run a contract:

• JavaScript VM - The instance will be deployed in a sandbox blockchain in the browser. This means nothing will be saved when the page reloads, a new instance will be created.
• Injected Provider - Remix will connect to an injected web3 provider. Metamask and Mist are example of injected web3 providers.
• Web3 Provider - Remix will connect to a remote instance. You will need to provide the URL address of your selected provider.
• Account - the list of accounts that will be associated with the current instance.
• Gas Limit - the maximum gas amount of each transaction.
• Value - the amount of value for the next created transaction.

Since we will use the Metamask to deploy our contract, we will select the Injected Provider for the Environment and leave the other options to default. Then click the Deploy button to deploy the contract. A Metamask window will appear and you will need to confirm to deploy the contract:

After the contract is deployed, the instance will show up at the bottom of the tab and you will be able to access the functions. In this example, we set the greeting to New Hello!! and then displayed it.

After testing, you can also copy the Smart Contract’s instance address using the copy button beside the address. This address basically tells where your contract is running. Along with the ABI, these two are the required contract information that will be used to connect the contract to your applications.

And we’re done. We’ve created a Smart Contract, compiled it, then deployed it.

Conclusion

Now, you know how to use the Remix IDE. You can now write Smart Contracts in Remix, compile it, and deploy.

Remix is very helpful when you are just starting to learn programming in Ethereum. Every basic thing you need to deploy your Smart Contract can be found in the IDE.

So what’s next?

You can now study more about Ethereum and practice coding using the Remix IDE. You can also study Web3.js, a tool to connect the Smart Contract Instance to your Web application. OR, you can practice developing Dapps by viewing openberry’s other tutorials.

openberry is a tutorial marketplace, designed to allow anyone to learn blockchain programming.

• openberry | blockchain tutorial marktplace
• openberry (@openberry_ac) | Twitter

Compile and Deploy Using Remix IDE was originally published in openberry on Medium, where people are continuing the conversation by highlighting and responding to this story.

Instagram is a social platform where you can share your photos and videos to all the people you are connected to.

Now, imagine creating your own social platform like Instagram. An Instagram-like DApp that is running on top of Blockchain technology.

What We Are Trying To Build

In this tutorial, we will be building an Instagram-like platform integrated with both technologies, InterPlanetary File System IPFS and Ethereum blockchain. These two have been tightly coupled for some time now because of their similar nature, it decentralizes the data. And with that, when making a decentralized app, they synergize pretty well. You will understand this later on, as you read along the tutorial.

Also, we will be using Vue.js for the application’s front-end. We won’t be discussing much about this tool since I don’t want you to get the idea that it should just be Vue.js, there are many available front-end languages that you can use for creating this app.

Function List

1. Upload data (POST image in IPFS)
2. Retrieve data (GET image from IPFS)

Tools

1. Smart Contract
   Solidity, Remix, Metamask
2. Frontend
   Web3.js, ipfs-http-client
   Vue.js, Vue-cli, Boostrap-vue

Content should be read in advance

1. How to deploy in Remix and use Metamask
2. Basic Solidity

Github

If you just want to get the code you can get it here:
https://github.com/openberry-ac/instagram

Why IPFS?

In basic terms, InterPlanetary File System is a peer-to-peer storing and sharing file system. Using IPFS, you can upload files such as text, images and even videos.

In centralized storages, you can only get data from their servers, and the speed of that transfer depends on the distance between you and that server. But unlike a peer-to-peer storage such as IPFS, you can get the data from anyone who has the exact data you need, so the transfer is a lot faster.

IPFS uses content-addressable hashes to verify that the data you’re getting is right, since all data has their own unique hash value.

# An example of a file's unique hash ID:
Qmf7bwqcd4BD7ohtkCBQvHu1BGMc8wMSP2nrLxsTBLDP4t

So when you upload a file in IPFS, you will get the data’s unique hash ID as return, then you can retrieve it by using the same hash through a gateway , it’s that simple.

# Gateway: https://ipfs.io/ipfs/
# Retrieve: Gateway + Unique Hash ID
https://ipfs.io/ipfs/ + Qmf7bwqcd4BD7ohtkCBQvHu1BGMc8wMSP2nrLxsTBLDP4t

Try this one out!
https://ipfs.io/ipfs/Qmf7bwqcd4BD7ohtkCBQvHu1BGMc8wMSP2nrLxsTBLDP4t

Build the Project!

Workflow

• Writing our Smart Contract
• Setting Web3.js, Contract Instance and IPFS
• Getting Users Account
• Posting data in IPFS
• Fetching data from IPFS

Writing our Smart Contract

In creating this contract, we will be using Solidity.

Solidity is an object-oriented, high-level language for implementing smart contracts.
https://solidity.readthedocs.io/en/v0.5.3/

Here are the function that will be in our contract:

• sendHash(_imgHash, _textHash) — sends the image and text hashes and stores it.
• getCounter() — gets the total number of posts that are already stored.
• getHash(_index) — gets the image and text hashes using an index number.

We will name our contract, InstagramPosting.sol, and use the current latest and stable version of Solidity, version 0.5.3. Also, we imported SafeMath library for safe math operations.

In this snippet of code, we created a struct, named Post. This holds the data: owner, imgHash and textHash, that will be used to store the post’s data.

• owner(address) — the address of the post’s owner.
• imgHash(string) — the hashes of images stored in IPFS.
• textHash(string) — the hashes of image’s captions stored in IPFS.

Then, we declared a public mapping for Post. We created a mapping named posts, to list and store the data, with uint256 as its key reference. Lastly, we created a uint256, named postCtr, to traverse inside the posts mapping.

Next, is the sendHash function, this is where the image and text hashes retrieved from an IPFS upload are sent (As seen on parameters _img and _text) and stored. Before storing, first increment the postCtr variable by 1 using SafeMath’s add() function to avoid overflow, and set it as the new index reference of the post. After that, the msg.sender which refers to the address of the sender is stored as the owner of the post, followed by storing the two hashes in imgHash and textHash.

At the last part, we see the emit NewPost(), this refers to the event above the function. It is an event watcher that notifies the web application if the sendHash() function transaction is finished.

Send function is done, now let’s create a function that retrieves it.

As you would notice, the getCounter() plays a role in getting a hash, since it returns the number of total posts based on the postCtr variable.

For the getHash() function, by simply choosing an index number (As seen on _index parameter) within the range of the returned value from getCounter(), we can traverse inside and get our desired post. The return data are, img, text, and owner, and each are populated by the posts mapping with the chosen index.

InstagramPosting.sol

Setting Web3.js, Contract Instance and IPFS

For this tutorial, a template project with frontend is provided which you can use while following this tutorial. you can clone the project:

# git clone the project template
git clone -b boilerplate --single-branch https://github.com/openberry-ac/instagram.git

#go to folder
cd instagram

# install packages needed in the web application
npm install

Using the template provided, on the root folder, let’s install the packages (web3 and ipfs-http-client):

# install web3 
npm install -s web3@1.0.0-beta.37

# install ipfs-http-client
npm install -s ipfs-http-client

# run web application
npm run dev

When you run the app, the page should looks like this.

Now let’s go in, web3.js, inside the contract folder. Here is where we will setup and initialize our web3, by importing the web3 package, named Web3 and then declare a constant variable named, web3 and instantiate Web3 on it.

The code should look like this:

web3.js

We have successfully created web3.js. Now go back to your browser and refresh the page, you must be redirected on connection request in metamask.

Click CONNECT, and your contract is now connected to the Ethereum Network.

Then in contractInstance.js, which is also in contract folder, we will create an instance of our contract using the ABI and declare the contract address.

To connect the smart contract on Ethereum, ABI and its contract address are needed.

Then back on Remix, under the Run tab, in the list of deployed contract click the copy button beside the desired contract, to get the contract address.

Then, on contractInstance.js, declare it also on a constant variable named, address

Back to Remix again, move to compile tab and copy ABI by clicking the button.

Now paste it in our contractInstance.js, by declaring it on a constant variable named, abi.

contractInstance.js should look like this, with your copied address and abi.

Now you can connect to the contract.

Now to connect to IPFS, go to ipfs.js which is also in contract folder, then import ipfs-http-client and name it IPFS. Then instantiate IPFS in a constant variable, ipfs, to connect to infura’s gateway. We will be using infura’s gateway, to post and get data in IPFS.

ipfs.js

Now that we are done in instantiating IPFS, We have to declare contract in main.js, so we could call the functions in our smart contract.

main.js

We need to declare the contract instance that was already imported above, so add contract in data to declare the contract instance. With it, we can call methods from our deployed smart contract.

Finally, we are done setting up web3, contract and IPFS. It’s now time to learn how to post and get data in IPFS.

Posting data in IPFS

First, we will teach you how to post the data in IPFS. But, before we can do that, first we have to get and set the user’s wallet address. In main.js, inside methods we will create an async function called, updateAccount(), to get the current account being used in metamask.

Now let’s learn how we can upload post in the Ethereum Blockchain and IPFS. First, let’s open the App.vue which can be seen inside src folder.

We will only be working inside the script tag, now under methods, is the empty async function onSubmit(), which is being called in the handleOk() function, which checks if the input is not empty. onSubmit() function, sends file to IPFS and the hashes retrieved are sent to our contract.

We also need a function that will handle the choosing of file and converts it to buffer and a function that will return the converted file to buffer. This can be done in captureFile().

and to make the code cleaner we have created convertToBuffer() function for the conversion of file to buffer.

Ok let’s have a checkpoint on what we have done so far. This part of the tutorial is about uploading image in the IPFS. So let’s try to upload and check if it is really stored in the IPFS.

But before uploading, let’s add a console log to check the hashed of the image to be uploaded in the IPFS. On onSubmit() function, let’s add the logger after we get the image hash from ipfs and before we return the value. This part of the code, should look like this:

Note: you can delete the console.log() after this checkpoint.

Now upload image in our page and check “imgHash” in the browser’s console.

As I mentioned above, use this url to check if the image was uploaded in IPFS:

https://ipfs.io/ipfs/ + imgHash

Fetching data from IPFS

We don’t want to always check our uploaded image in https://ipfs.io/ipfs/, We want to show it in our page. To do that, in main.js file, in async function getPosts(), we need to get the images in IPFS and here is how we do it:

Alright! we are done with everything. This should be the output:

If you want the full code of this tutorial, you can check it here: https://github.com/openberry-ac/instagram

Summary

You just made your very own Instagram web application integrated with IPFS and Ethereum! You did great for getting this far, you can totally show this off to your developer friends!

From this tutorial you learned how to send and retrieve files from IPFS, and how to establish connection with it. Also you have learned how to interact with your smart contract by connecting to Web3. Man, you have come a long way, and you owned it!

Me being proud right now:

For your next step you might want to explore more about IPFS and Solidity. There’s so much more that you can learn and can do from this technologies, so go ahead and click the links I gave just now!

You can also add more features to this project you created and deploy your very own live Instagram-like decentralized application, your call!

Well then, see you on the next tutorial!

If you get interested in the following topics:

• state management
• page routing

let us know by giving a clap.

openberry is a tutorial marketplace, designed to allow anyone to learn blockchain programming.

• openberry | blockchain tutorial marktplace
• openberry (@openberry_ac) | Twitter

Creating an Instagram-like DApp with IPFS + Vue.js was originally published in openberry on Medium, where people are continuing the conversation by highlighting and responding to this story.

In this tutorial, we’ll be discussing about an essential technology that correlates with the core operation of Ethereum: transactions. Whenever you have to make transactions, you will and will always have to go through that fox dude above.

What’s the good news…

It’s a great that you’re here, because I’m gonna discuss about the basic stuffs on how Metamask works, just enough for you to get started on your dApp developments.

Understanding Metamask

Metamask is a bridge that allows you to visit the distributed web of tomorrow in your browser today. It allows you to run Ethereum DApps right in your browser without running a full Ethereum node.

Basically, when you do transactions on the blockchain network, these uses computing power which what we call, gas cost. And much like gas in real life, you have to pay for it. So in order for you to pay that gas cost, you will need a wallet that handles your money, and that’s where Metamask comes in.

Well, I guess that’s enough information about Metamask for now, we don’t have to dive in to every side of the box, I bet you get the gist of its purpose already. So without further ado, let’s jump right into the first question!

How can I install it?

Before you could actually install Metamask, you have to know that Metamask only supports a couple of browsers. Metamask supports the following browsers:

• Google Chrome (or any Chromium browsers, Brave, a DApp Chromium browser.)
• Mozilla Firefox
• Opera

If you already have any of the above, you can proceed, otherwise, you should download at least one that is listed browsers and you’re good to go!

So, for you to download Metamask, you should first go to this website:

Metamask: https://metamask.io/

You can also download Metamask on your browser’s plugin extension web store, but if you want to be directed automatically to the download page dedicated for your browser, this is the way to go.

Once you’re inside, you should see Metamask’s iconic fox head following your mouse direction. Under it, you should see the GET CHROME EXTENSION orange button, click that, and you’ll be automatically directed to your browser’s store.

For Google Chrome browser’s example, you should see something like this:

Now after getting in, just add the plugin extension, and it will install itself on the browser after downloading. (in Chrome’s case, click the Add to Chrome button.)

Once it is installed, a new tab will suddenly pop up, it’s the Metamask wallet’s welcome page. But you’ll get the same interface on the actual wallet so just close it. Once closed, go and click here:

If you click that icon, you should trigger the Metamask wallet’s user interface. This is how the wallet looks like:

Now just click continue, and you’ll be directed to creating your own password. Don’t go import seed since you don’t have an existing account yet. You will use that if you want to recover your account which will be tackled as well later on.

After creating and confirming your password, you’ll go through some terms and agreements, then you’ll be given a secret backup phrase. That phrase is the heart of your account since it is derived from a unique hash created when you made created the account just now.

As said, you shouldn’t compromise the phrase to anyone, because if you’re wallet has cryptocurrencies inside then that can be transferred to someone else. Although Metamask is a wallet made for developers, you still have to exercise secrecy.

(The account I have shown is for demonstration purposes so it’s totally fine.)

After saving the phase, you will need to confirm it next. Then it will ask you if you want to deposit, skip, and close that for now.

Finally, you’re done! You have successfully installed Metamask, and made you’re very own wallet. Yeah, we did install Metamask, but what is the catch about that wallet, what is it capable of. This leads us to the next point:

What can it do?

For the features of Metamask, there’s actually a lot that you can do, but I’m not gonna cover everything since my focus is to teach you just enough to get you ready for developing your Ethereum decentralized applications.

Here are the basic features of Metamask that you will need:

• Add/Importing accounts
• Switching accounts
• Switch networks
• Request tokens (Testnet Faucet)
• Sending tokens (Cryptocurrency)
• Add/Search token
• Get backup seed

Alright, so that’s all the things that you will learn about in this tutorial. Let’s now head to the next question:

How do I use it?

To track our progress easier, let’s just learn all those listed features from top to bottom. But before that, I’m just gonna show you a few helpful things:

Let’s try to look at the highlighted portion on the top side.

Below the name of the account: Account 1, you can see random-looking character string, something that looks like this, 0x557e…4c12. That is your account’s wallet address, if you click it, the address will be copied on your clipboard.

This is very helpful since you’ll be using your account a lot on your smart contract development and on your dApps as a test account.

Next is the one below, that is your transaction history. There, you will see the state of your transactions whether or not it is finished, pending or the transaction had failed, etc.

Also, if you want to switch the value from Fiat to ETH you can do that by going to the top right highlighted button, as shown here:

When clicked, a window will show up under it. From there, you can see from the bottom most part, which is the Settings button with the gear icon. Hit that button and it should this:

You’ll be taken to this interface, initally on the Settings tab. Without scrolling, you’ll be able to see the Primary Currency section, from the Fiat radio button, switch it to *ETH, and that’s it. If you go back to your Main interface by hitting the fox head button, it should change by now:

So, too much for that, now let’s head on to the first topic.

Add/Importing accounts

For this feature, this lets you add more than one wallet. This can be useful both in development and in real life. Since you’ll be making applications, you will need to test not only one account, you have to get your accounts interact with each other on a smart contract, makes sense right?

Adding accounts

From main, for you to add an account, just go to the highlighted top right button and click it. This will prompt a new window, showing a list of items.

On the top side of that window, it shows the list of accounts that you currently have. As of now, you only have one account which is Account 1.

To add another, just click the first option below it: + Create Account. When clicked, you’ll be directed to a very self explanatory interface, which contains an input for the name your account and the button Create, hit it.

When you go back, alas, you have your new account! It also has its own unique address, which is nice. You can make as much as you want. (I think? Haven’t tried 100 accounts yet.)

Importing accounts

If you have an existing account, you can hit the Import Account. You will be taken in an interface where you will have to put a secret backup phase in the private key string text input of the Private Key category. If you want to import JSON, you can do so by changing it in JSON. But it’s very unlikely to use that one though. Last thing to do is to hit the Import button.

Switching accounts

Since you learned how to import and add accounts, I assume you made new ones too. So let’s learn how to switch accounts!

In the example above, you can see that I have already added 2 more accounts: Account 2 and Account 3. On the same window as before, if we want to switch to Account 2, from the list, just click it. That easy, you have already switched accounts!

Switch networks

Switching networks is an important thing about Metamask. As you have recently seen, we’re using the Main Ethereum Network. But that’s not the development network, there’s a network for one.

As you can see on the picture above, we’re on the Main network. But underneath it are developers’ available networks. Most often, developers usually use the Ropsten Test Networkand Rinkeby Test Network. That is if you’re using Remix directly with injected Web3 setting. Localhost:8545 however, is for your local Ethereum network, if you’re using Truffle and you made your own blockchain network locally.

Choosing a network is a case to case basis, but for a common action, let’s choose Ropsten Test Network, click it and you’re in it already!

Request tokens

In making transactions, it costs gas amount, and gas costs money. So, we will need tokens everytime we interact/test contracts or sending tokens.

In the Main network, you have three ways to deposit token:

• Directly Deposit Ether: by clicking the View Account, using QR code, your other wallet that has tokens can transfer tokens by reading it with a camera.
• CoinBase: this is usually the way if you’re new to cryptocurrency. You can go to its site, and buy ETH tokens.
• ShapeShift: basing on its name, it shifts your non-Ethereum tokens to Ethereum ones.

But all these are mostly used if you’re actually going to spend and do real transactions on Ethereum. For the developers however, if you switch to a developer network such as Ropsten Network, you will see this:

Instead of Coinbase and ShapeShift, you will see a Test Faucet. By clicking the Get Ether button, you will be able to get free tokens. But these tokens have no real value since it’s a testing network. You’ll be taken on a website, for example for Ropsten.

By just clicking the green button, you’ll be able to request ether. From there, for a short moment, it will take effect and give you tokens that you’ll be needing as gas for testing in development.

Here is the link of the Testnet Faucet, get yours now!

Send tokens

Before proceeding, try getting tokens for at your one account from the Test Faucet on Ropsten Network. If you already have tokens, we can now try send tokens to another account. To see the effect, send it to your other created account.

From the Ropsten Network, if you hit the Send button, you’ll be sent to this interface. In the example, Account 3 has 3 ETH, and by hitting the recipient address input text, you’ll be able to choose or paste down an address.

In your case, use your account that has ETH, and send it to your other account. Set the amount on the Amount section, and you can set how fast the transaction will be beneath it, it’s actually customizable if you choose Advance Options.

After you had set everything, hit Next. And you’ll be sent in this interface:

Confirmation Interface

This is the exact interface whenever you make transactions on Ethereum using Metamask. You’ll see a lot of this prompting interface once you start developing.

From here you can also edit the gas fee, to make your transaction faster. In here, we are sending 0.457 ETH to Account 1. Hit Confirm and you’re transaction will be processed and will also show up on your Transaction History on the Main interface.

Add/Search tokens

Aside from ETH token, there are also different kinds of tokens that you can use based on what kind of DApp are you using, usually when you make a DApp they also make their own cryptocurrency. So in here, I’ll show you how to search and add your own token.

(By standard, cryptocurrency tokens should be ERC20 type.)

Add tokens

From the Main interface, go to top left menu icon beneath the fox’s head or the Home button. Once you hit the menu, you’ll be able to see this one slide:

From what you can see above, your token shows up, under that is actually a supposed list for the other tokens. Since you only have the ETH token, you can’t notice the list.

With that said, you can add a token, it’s either you add your own made token from an ERC20 standard contract or you search someone’s token assuming that you have one already. Let’s go with the adding your own first.

On the Custom Token tab, is where you can add your own created token. There are 3 input fields. The last two fills in by itself once you fill in the Token Address input text field. So the first one is the only needed.

If you plan to make your own token, you can try it on the Custom Token tab. Just hit Next then you’re good to go, it is added to the list. If you choose one from the list, you can use it for your transactions related to that token.

Now on to the searching of token.

Search tokens

Same as before, if you go to the menu icon again, on the Search tab, you will see this interface:

As seen above, EOS is a known example of a crypto token. If in an instance, you have received EOS tokens, then you can search and verify it from here, and add it to your token list.

Get backup seed

If in case you forgot your secret backup phrase, you can get it from your settings, so go back to settings from the top right menu button.

When you get inside Settings, and if you scroll down on the middle you will find the Reveal Seed Words section. If you hit the Reveal Seed Words button, the secret backup phrase will be shown and you can copy it. Keep it safe!

Summary

It’s finished! That tutorial sure was a bit long but I’m pretty sure that what you learned just now, will equip you enough for your future or current developments for making your decentralized Ethereum applications.

In case you forget some things you learned from here, you can always refer back here. It’s natural if you don’t remember everything in one go, every developer’s been there. You’ll get better soon enough!

Look, even these non-blockchain related Microsoft developers are even happy for you:

But really now, you did a great job out there. Hope you learned a lot and good luck venturing more about blockchain.

Until then, signing out, and stay tuned!

openberry is a tutorial marketplace, designed to allow anyone to learn blockchain programming.

• openberry | blockchain tutorial marktplace
• openberry (@openberry_ac) | Twitter

Getting Started with Metamask! was originally published in openberry on Medium, where people are continuing the conversation by highlighting and responding to this story.

All this time, you might have been deploying your smart contracts with Remix, and the Ropsten Test Network. What if I told you that you could easily set up a blockchain development environment and work on your decentralized application (dapp) completely locally?

Yes you can, with Truffle!

What We Are Going To Do

For this tutorial, we will be deploying a simple smart contract with Truffle, and try to interact with it with a very simple web application.

Function List

1. Getting the message— we will be retrieving data (string data) from our Smart Contract and display it in our web page
2. Setting the message — we will be able to change the message text

Tools

1. Smart Contract
   Solidity, Metamask, Truffle, Ganache
2. Frontend
   Web3.js, live-server

About Truffle

Truffle is basically a development environment where you could easily develop smart contracts with it’s built-in testing framework, smart contract compilation, deployment, interactive console, and many more features.

It is mostly recommended for developers who want to build Javascript projects based on smart contracts (like dapps). With Truffle, you are able to have a better simulation of a real blockchain environment.

Making the Project

Workflow

1. Getting Started with Truffle
2. Interacting with the Smart Contract

Getting Started with Truffle

First, we install the packages we will be using by first opening Terminal/CMD and then execute this command:

npm install -g truffle ganache-cli live-server

After that, let’s create our project folder, which we will call HelloWorld. You can do this using the same Terminal/CMD, and executing these commands:

mkdir HelloWorld
cd HelloWorld

With Truffle, you can create a bare project template, or use Truffle Boxes, which are example applications and project templates. For this tutorial, we will be starting from scratch, so we execute this command:

truffle init

This command creates a bare Truffle project without anything else included.

After doing so, you should have the following files and folders:

• contracts/: Directory for Solidity contracts
• migrations/: Directory for scriptable deployment
• test/: Directory for test files for testing your application and contracts
• truffle-config.js: Truffle configuration file

Contract Compilation

Now let’s proceed to smart contract compilation with Truffle. Before anything else, let’s create a very simple smart contract named HelloWorld.sol and place it inside the contracts folder. All smart contracts you create should be placed inside this folder.

The smart contract will contain code that’s as simple as this:

Basically, our smart contract has a variable named message, which contains string data that is initialized as hello world. Then we have functions that can get or set that variable’s value.

Let’s try compiling our smart contract! Execute the command:

truffle compile

Now, compilation could fail and show an error similar to this:

SyntaxError: Source file requires different compiler version

By default, Truffle uses Solidity version 0.5.0, but our contract uses 0.5.3. And so, we need to tell Truffle to use Solidity version 0.5.3 to compile our contracts by editing the Truffle configuration (truffle-config.js). Currently, the configuration should look like this:

module.exports = {
  networks: {
  },
  mocha: {
  },
  compilers: {
    solc: {
    }
  }
}

To briefly describe the parts that make up the configuration:

• networks: will hold the configuration of our Ethereum client where we will be deploying our contracts. We will discuss more on this on the later part of the tutorial.
• mocha: configuration for automated tests using the Javascript testing framework called “Mocha”.
• compilers: specification of compilers to be used, like solc (Solidity compiler), and what version should be used.

You might have already guessed which part we will be editing for now, which is the compilers part of the configuration.

Since we want Truffle to use Solidity version 0.5.3, we must use the following compilers configuration:

compilers: {
  solc: {
    version: “0.5.3”,
    docker: false
  }
}

Let’s run truffle compile once again. The contracts should successfully compile this time. Basically, the compile command compiles Solidity code to bytecode (the code that the Ethereum Virtual Machine or EVM understands).

Now all that’s left is the deployment!

Contract Deployment

Now that we’ve created and compiled our sample smart contract, let’s see how we can deploy it to the blockchain. In order to do this, we’ll need to create a new file in the migrations directory. So, create a new file named 2_deploy_contracts.js, and place the following code:

Truffle migrations are basically scripts that help us deploy our contracts to the blockchain. The first line is there to import the HelloWorld.sol file from the contracts folder, and line 4 deploys it to the blockchain.

Let’s try deploying by executing the command:

truffle migrate

You’ll notice that it will raise an error saying something like

Could not connect to your Ethereum client. Please check that your Ethereum client:
 — is running
 — is accepting RPC connections (i.e., “ — rpc” option is used in geth)
 — is accessible over the network
 — is properly configured in your Truffle configuration file (truffle-config.js)

Yes, you guessed it right, it’s because we haven’t specified our Ethereum client yet in the networks part of our configuration. We can use a locally setup blockchain here, via the truffle develop command or Ganache. We could even deploy straight to Ethereum’s Ropsten Test Network if we configure it here. For this tutorial though, we’ll be using Ganache.

Let’s open truffle-config.js, and change the networks part to look like this:

networks: {
  development: {
    host: “127.0.0.1”,
    port: 8545,
    network_id: “*”
  }
}

This means that we will be using a local Ethereum client (hosted at 127.0.0.1, which means local) on port 8545.

Your truffle-config.js file should now look like this:

Then, open a new Terminal/CMD and start Ganache on port 8545 by executing the following command:

ganache-cli -p 8545

Now, back to our first Terminal/CMD, we execute

truffle migrate -network development

to deploy the code to the blockchain. In our case, the blockchain could be found in the network development which we set earlier in the truffle-config.js file.

If everything went well as expected, you should be able to see a summary of the deployment on the Terminal/CMD where we did truffle deploy (as shown on the left image), and the transaction data on the Terminal/CMD with Ganache running (as shown on the right image).

At this point, we’re basically done deploying our contract!

Interacting with the Smart Contract

Let’s try interacting with our deployed contract through a very simple web application! Here, we’ll just be calling the getMessage() function, and display the text.

Create a folder named src (same level as contracts folder and truffle-config.js) and create a file named abi.js inside it. Then, from the build folder, and then contracts folder, open HelloWorld.json (build/contracts/HelloWorld.json), and copy the value of the abi key.

Now in abi.js, make a variable named abi and paste the data we previously copied. Now, abi.js should look like this:

The Application Binary Interface (ABI) is basically a specification in the form of a JSON, that describes the contract. We will need this for the web3 connection later.

Simple Web Page

On the same folder (src), create a file named index.html, and add the following code:

Simply put, we are creating a web page with one <div> having the ID, message. And as you see, we have 3 <script> tags in place.

The first one just imports the web3 from a CDN, as can be seen in their short documentation right here. The second one imports the abi.js file that we created earlier. Finally, the third one will be where we will be putting some Javascript code to interact with our deployed contract. Now, in this part (3rd script tag), we will now be adding some code which will make it look like this:

Let’s briefly go through the code. On the first line, window.addEventListener(‘load’, async () => {} just means that when the page loads, we do the commands inside {}. Then, in

var contract;
const contractAddress = “0x9abd5ea4f8fd7194efa51a3435bfceb24acbee31”;

we initialize some variables that we will be needing in the later part of the code. Make sure you change the value of contractAddress to your own deployed contract address. You can find it in the Terminal/CMD where you did truffle deploy, somewhere in this part:

Following that part is an async() call definition stored to const contractMessage:

const contractMessage = async () => {
 contract = new web3.eth.Contract(abi, contractAddress);
 let message = await contract.methods.getMessage().call();
 return message;
}

Here, we first get our contract instance using our ABI (the one we stored in abi.js), and contractAddress (the one we got from deploying our contract). Then, we call our smart contract’s getMessage() method by doing contract.methods.getMessage().call(). Finally, we return the message.

Now, on this next part:

if (window.ethereum) {
  window.web3 = new Web3(ethereum);
  try {
    // Request account access if needed
    await ethereum.enable();
    var message = await contractMessage();
    var elm = document.getElementById(“message”);
    elm.innerHTML = message;
  } catch (error) {
    // User denied account access…
  }
} else { // Non-dapp browsers…
  console.log(‘Non-Ethereum browser detected. You should consider trying MetaMask!’);
}
```

We first check if the browser being used supports Ethereum transactions. If not, we display a console message saying so, but if it does, then we do several commands.

Basically, we get the message by calling the async() call that we previously defined, named contractMessage(). And then, we set the text being displayed in the <div> tag with the ID, message.

Now, all that’s left is setting MetaMask to connect to our locally running Ethereum client with ganache-cli.

MetaMask Connection

First, open the Terminal/CMD that you used to run ganache-cli, and scroll up a bit until you see the part that shows a list of private keys. Ganache basically gives us 10 accounts with 100 ETH each, which we can use in MetaMask. The list of private keys looks like this:

Now copy any of them (just one), and open your browser (make sure you already have MetaMask installed). Open MetaMask, and change the Network to Localhost 8545.

Then, click on the icon beside the Network dropdown, and click Import Account. You should now see that MetaMask will ask for a private key.

Now you’ll have an account in MetaMask with ~100 ETH. Time to open our simple web app!

Starting the Web App

Now, using the Terminal/CMD where you did truffle deploy, do the following:

cd src
live-server

We’re just navigating to our src folder, and using live-server to run our very basic web app. You’ll now notice that we got the message we put in our smart contract!

You might encounter a MetaMask pop-up window that asks for access permission though. You should just click the ‘Connect’ button right here:

We’re done! Easy! You should now be able to see the text from our smart contract, being displayed on the page like this:

Conclusion

We’ve only touched on the basic usage of Truffle for local development.

Perhaps the next steps you can take are either improving the current web app to also call setMessage(), or start using Truffle Boxes for the development of your next dapp.

’til the next tutorial!

openberry is a tutorial marketplace, designed to allow anyone to learn blockchain programming.

• openberry | blockchain tutorial marktplace
• openberry (@openberry_ac) | Twitter

Deploying Smart Contracts with Truffle was originally published in openberry on Medium, where people are continuing the conversation by highlighting and responding to this story.