DEV Community

CoinMonks
CoinMonks

Posted on • Originally published at Medium on

Working with Ethereum and IPFS

#bitcoin #ethereum #ethereumblockchain #blockchain

Photo by Zoltan Tasi on Unsplash

We’ll see a quick demo of how we can use IPFSand Ethereumtogether. We’re going to upload some data on the IPFS network and save the returned Content Identifier (CID) on the Ethereum blockchain, which we can access via the smart contract.

To start off swiftly you can use a boilerplate that already has the structure for a Dapp project. There are tonnes out there, but get thisone in order to follow along.

(Note: All the commands are run from within this project directory)

Ethereum Setup and Code

Ethereum is a blockchain-based platform for developing decentralised apps and smart contracts. Ethereum blockchain is like a general-purpose blockchain where anybody who wants to do something doesn’t need to make their own blockchain for their applications. They can build apps on top of this blockchain. While IPFS, short for Interplaneary File System is a blockchain network to store files of all sorts. Ethereum was never made to store huge amount of data as it would be very costly for the network. Therefore, we have a solution like IPFS.

Assuming NodeJS and React.js is installed on your device install the following:

  1. Install all packages: npm install
  2. Install truffle: npm install -g truffle
  3. Download Ganache app here

Truffle

Truffle is a development environment, testing framework and asset pipeline for Ethereum, aiming to make life as an Ethereum developer easier. You can run truffle compile, truffle migrate and truffle test to compile your contracts, deploy those contracts to the network, and run their associated unit tests. In this demo we’ll only be working in the local environment.

Ganache

We also need a local Ethereum blockchain and some Ether to pay the gas fees which is required in transactions that change the state of the blockchain. For that we’ve downloaded Ganache. You can just QuickStart Ganache and it’ll be enough.

Ganache main screen after QuickStart

You can see many addresses there and these can be used for paying gas fees in the development process.

Writing smart contract

Now, in the ./contracts folder create myContract.sol and write the following code.

pragma solidity >=0.4.21 <0.6.0;

contract myContract{
    string data;
    function set(string memory data){
        data=data;
    }

function get() public view returns(string memory){
        return data;
    }
}
Enter fullscreen mode Exit fullscreen mode

Here, we have two functions set() and get(). The function set() is just setter function that write some value in the variable data and get() just returns that variables.

NOTE: If the variable was string public data then solidity by-default gives the getter function with the same name as that of the variable, i.e., in this case data() which would simply return that same variable.

Deploying smart contract

In the ./migrations directory create a file by the name 2_deploy_migrations.js and write the following code:

const myContract= artifacts.require('myContract');
module.exports = function(deployer) {
    deployer.deploy(myContract);
};
Enter fullscreen mode Exit fullscreen mode

Here, we’ll import the contract then run the deploy command to put it on the blockchain. This file will be used when we’re deploying our smart contract. Before migrations make sure to test your smart contract, because once it’s on the blockchain it cannot be changed. Also compile before doing anything using the commandtruffle compile . To deploy the smart contract on the network, make sure Ganache app is running. Then, we’ll simply go to the console and run:

truffle migrate
Enter fullscreen mode Exit fullscreen mode

We will receive a transaction confirmation receipt, that will tell everything related to the transaction.

Please note this deployment happens on the local blockchain network with the app Ganache. Now, you might be wondering how did our application connect with Ganache and deployed the contract there. This all happened because we’re communicating with the application in the background. You can check truffle-config.js where all the configurations are written.

Setting up IPFS

One way to connect to IPFS is to download IPFS on the system and run it on the machine to make it an IPFS node and connect your app to this, read herefor the steps necessary. Another method (suitable for this quick demo) is a public client like Infura. We can use Infura to test and learn about IPFS functionalities and we can upload files to the IPFS network very swiftly without any hassle. To work with IPFS you need to install ipfs-http-client library:

npm install --save ipfs-http-client
Enter fullscreen mode Exit fullscreen mode

Then we can just connect to the node like this:

const create = require('ipfs-http-client')

const ipfs = create('https://ipfs.infura.io:5001')
Enter fullscreen mode Exit fullscreen mode

If you had the node running on the local machine the client address would be something like http://localhost:5001. Once that’s done, we can simply run functions like this:

const run = async ()=>{
    const data= await ipfs.add(“Hello World”)
    const resultCID= file[‘path’]
    console.log(resultCID);
} // You could put a file buffer as well or anything
run();
Enter fullscreen mode Exit fullscreen mode

The function, add() returns some data back and the most one important to note is the CID, which is a string starting with “Qm”. We can access using the second line here (Keep the CID saved somewhere we’ll need it again). You could also make a form in the react app and upload any sort of file to the IPFS network. Learn more about different functions here.

Content Identifiers (CID): A content identifier, or CID, is a label used to point to material in IPFS. It doesn’t indicate where the content is stored, but it forms a kind of address based on the content itself. CIDs are formed with the hash of the data itself, hence any change in data would mean different CID allocation for the data. IPFS uses an advanced data structure called Merkle Directed Acyclic Graphs (DAG) in which every node carries the payload and is given an identifier. Read more here .

Go to the terminal and run truffle console this will open the console for truffle. You can run the functions set() and get() to set the CID and fetch it back from Ethereum blockchain and then retrieve the data back from IPFS. Before that run the command truffle compile again

(If needed run deployment commands again). Now, run the console and run these commands.

1. const contract= myContract.deployed()
2. setData= contract.set(<paste the CID that was earlier received>)
    // This set() command will consume gas as it's changing state
3. getData= contract.get()
4. getData
Enter fullscreen mode Exit fullscreen mode

Getting data back from IPFS

To get the data we can hit the URLhttps://infura.io/ipfs/ or http://localhost:5001/ipfs/ (If node running on the local machine) with the CID of the content and it will show the data.

Additionally, you can also build a client-side interface and using web3.js library users can interact with the smart contract. Let’s save that for another demo.

Thank you for reading!

Join Coinmonks Telegram Channel and learn about crypto trading and investing

Also, Read

Top comments (0)

Read next

davitasatiani profile image

The Comprehensive Guide to Full Stack Solana Development with React, Anchor, Rust, and Phantom Wallet

Davit Asatiani -

programcrafter profile image

Example of Rust attribute macros: data serialization (part 2 - enums)

ProgramCrafter -

iandjx profile image

Wagmi Essentials

Ian de Jesus -

joelgnansousnou profile image

How to manage Access Control in Solidity Smart Contract

Joël Gnansounou -