In Part 2 of Building a Dapp on Ethereum Series , we had created a smart contract, compiled and deployed it on ethereum blockchain. In this article we will explore how to use IPFS (Inter Planetary File System) and its integration with our smart contract.

If you have read previous article, our smart contract does a trivial task of storing and retrieving a hash string against a ethereum address. That hash looks like QmWWQSuPMS6aXCbZKpEjPHPUZN2NjB3YrhJTHsV4X3vb2t, which is a content identifier, a file which is stored locally on a computer, and is now accessible by anyone over p2p network via IPFS (Inter Planetary File System) protocol.
Learn more about IPFS concepts at IPFS documentation website.

How to use IPFS

First download & install go-ipfs node.

Initialize IPFS node:

:\>ipfs init

Going Online:

:\>ipfs daemon

Check IPFS node id:

:\>ipfs id

Displaying IPFS node config:

:\>ipfs config show

IPFS web console

http://localhost:5001/webui

Adding data to IPFS:

:\> echo "hello world" > hello
:\> ipfs add hello
16 B / 16 B [========================] 100.00% 0s?added QmXeKtRSz7SVKp8Qh6tXtv6whRF5WXWQPwsqA38houakhZ hello

Displaying data contained in a IPFS Object:

:\> ipfs cat QmXeKtRSz7SVKp8Qh6tXtv6whRF5WXWQPwsqA38houakhZ
"hello world"

Adding and Displaying IPFS content using API

After setting up & running our local IPFS node, we'll access IPFS HTTP-API's(CLI commands are exposed as API's) with a IPFS client library js-ipfs-api.

Install js-ipfs-api as npm package.

npm install --save ips-api

Importing it in Node.js

var ipfsAPI = require('ipfs-api')

// Connect to ipfs daemon API server
var ipfs = ipfsAPI('localhost', '5001', {protocol: 'http'})

// Add file to IPFS
var file = Buffer.from("hello world")
ipfs.files.add(file,function(err, files) {
        if (err) console.log(err);
        else console.log(files[0].hash);
      });

Output:
Qmf412jQZiuVUtdgnB36FXFX7xg5V6KEbSJ4dpQuhkLyfD

Read file from IPFS

var path = "/ipfs/Qmf412jQZiuVUtdgnB36FXFX7xg5V6KEbSJ4dpQuhkLyfD"
ipfs.files.get(path, function(err, files) {
        if (err) console.log(err);
        else console.log(files[0].content.toString());
      });

Output:
hello world

Or, you can request it from CDN for use in browsers.

<!-- loading the minified version -->
<script src="https://unpkg.com/ipfs-api/dist/index.min.js"></script>

<!-- loading the human-readable (not minified) version -->
<script src="https://unpkg.com/ipfs-api/dist/index.js"></script>

Initialise ipfs api, as CDN based copy will expose constructor IpfsApi as global window object,

var ipfs = window.IpfsApi();

Allowing domains or HTTP methods for Cross Origin Resource Sharing(CORS):

:\> ipfs config --json API.HTTPHeaders.Access-Control-Allow-Credentials "[\"true\"]"
:\> ipfs config --json API.HTTPHeaders.Access-Control-Allow-Methods "[\"PUT\", \"POST\",\"OPTIONS\",\"GET\"]"
:\> ipfs config --json API.HTTPHeaders.Access-Control-Allow-Origin "[\"http://localhost\",\"http://127.0.0.1\"]"

IPFS integration with Smart Contract

Our smart contract method store stores data against a ethereum address, instead of storing a file, we can store the file into IPFS and only its hash into smart contract. By doing this we can store huge amount of data on blockchain costing little and maintaining its immutability also.

We can go further with encrypting private or sensitive data before putting it into IPFS, which will guard against anybody reading data stored on blockchain.

With this we come to end of Part 3 of Building a Dapp on Ethereum Blockchain Series. In this article, we have seen how to use IPFS, and with the help of API's added data onto IPFS, displayed data back from IPFS. We have discussed why its good to integrate IPFS with smart contracts.
In Part 4 of this series, we will build a dapp with user interface, which will combine all of concepts that we have discussed over previous articles in this series.

If you have liked this article, please share it with others.