Workshop: Creating Simple

Decentralized Application

Introduction
Hello everybody. My name is Nikolay Angelov (http://nikolaytech.com) and I have created this
Workshop in which we will be creating a very simple, but powerful Decentralized Application using few
tools.

The general idea for App will be to store Certificates (Images) in decentralized way using IPFS and
saving the hash of the image inside an Ethereum Smart-Contract. That way anyone can be sure that no
one has tempered with the Certificate and that it hasn’t be changed.

To create our app we will need to have few tools that I will be explaining how to install in this
document.

Tool List:

1. Ganache (https://truffleframework.com/ganache)
2. InterPlanetary File System - IPFS (https://ipfs.io/)
3. MetaMask (https://metamask.io/)
4. JavaScript + Node.js

1. Installing Ganache
Ganache is a fast and customizable blockchain emulator. It allows you to make calls to the blockchain
without the overheads of running an actual Ethereum node.

• Transactions are "mined" instantly.

• No transaction cost.
• Accounts can be re-cycled, reset and instantiated with a fixed amount of Ether (no need for
faucets or mining).
• Gas price and mining speed can be modified.
• A convenient GUI gives you an overview of your testchain events.
 Now is time to install Ganache.

1. Open https://github.com/trufflesuite/ganache/releases/tag/v1.2.2 and select the appropriate

version based on the operation system you are using.
2. For Windows Download the .exe file.

Now depending on your Windows settings Windows Defender SmartScreen can warn you that this
installation is not save. Just ignore it and follow the steps to install Ganache:
After clicking the “More Info”, a new screen will appear showing you the installation button.

Then you just need to click next and follow the normal install instruction and after that you should have
Ganache installed on your computer.

3. Now you can allow or not Ganache to analyze your data or not. Make a choice and click continue.
Congratulations! You successfully install Ganache!

4. Run your Ganache and you should get a screen with all of your accounts their coins and some other
information.

Let’s leave Ganache for now and install the rest of the things we need. We will return back to Ganache
later.
2. Using Infura Provider for IPFS
IPFS is a peer-to-peer distributed file system that seeks to connect all computing devices with the same
system of files. In some ways, IPFS is similar to the World Wide Web, but IPFS could be seen as a
single BitTorrent swarm, exchanging objects within one Git repository. In other words, IPFS provides a
high-throughput, content-addressed block storage model, with content-addressed hyperlinks. (Source:
Wikipedia)

1. Installing IPFS might be hard process for beginners, so I have decided to use the API provided by
https://infura.io
Note: If you are interested in installing this yourself just talk to me and I will help you.

3. Installing MetaMask Plugin

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.

MetaMask includes a secure identity vault, providing a user interface to manage your identities on
different sites and sign blockchain transactions.

1. Open https://metamask.io/ and get the Plugin for your browser.

2. Now you should have MetaMask installed and it should appear in your browser Extensions. (Upper
right Corner)

You might get a screen that tells you to try the new version.

Please go with the old version and select “No thanks, maybe later” as the new version is pain right
now.
3. Now you have few screens to just click Accept.
4. After you click few times Accept you will be prompt to create a password. This is because
MetaMask is actually a wallet and for your security they want you to create a Password.
5. Now you have a Wallet. On your screen you will see your Mnemonics (Key words) which are
representing your Wallet. Usually you want to save them somewhere, but in our case we don’t
really care as we are going to run our own network.
Note: Please if you ever decide to use MetaMask to create a Wallet for real money use ALWAYS
STORE YOUR WORDS on secure place.
6. Now we just need to connect MetaMask to our own Ganache that we started earlier.
Which is not very hard process. Just go on top left corner of MetaMask and you will see “Main
Network” and an Arrow. Click the Arrow.
7. The on the dropdown select “Localhost 8545” which is our Ganache local address.

8. Now we are connected to our Network and we just need to important a Wallet that has coins. For
that we need to Go to our running Ganache and there select the Key Icon (“Show Keys”) right of
the first address that we have in the list.

9. After that just copy the Private Key.

10. Now go to MetaMask to import this Key to our Wallet.
The Import is located on the same row as the Network we selected by on the right side.

Click this and then Select “Import Account”

11. Paste the Private Key that we copied from Ganache in the box and Import it.
12. Yeaaa. Now we have Money and we can go and start Coding Stuff.

4. Creating the Smart Contract

To create our Smart Contract we are going to use an online editor called Remix.
Remix is not just an Editor, but actually support running and deploying on contracts, but that is more
advanced.

1. Go and open https://remix.ethereum.org and you will see an Text Editor.

2. On top left corner there is a “plus” icon with which we can start our first Contract.

Click it and then we need to type the name of our new Contract. Let’s called it CertificatesRegistry

3. Now it is time to start Coding stuff. Here is our first lines of code that basically declare the Version
of Solidity that we are using and the actual Contract.
4. We want to store Certificates and keep some Data for them.
First thing is that we are storing the Image for the Certificate on IPFS for that reason we need to
keep the Hash of it.
I would suggest keeping the information of when the Certificate was added as well.

Let’s see how this things look in Solidity Code and add it to our code.

5. Now we have a structure where we can store the data we need, but we want to keep multiple
Certificates on our web page, so we should have an Array of Certificates.
6. So we can store all the Data in the world, but we don’t have a way to Add new Certificates. Maybe
it is time for us to create one function that will do that for us.

7. The last thing we need in our Contract is way to get all the Certificates that we have. In Solidity you
cannot return Arrays, so we need a Function that will give us the Count of Certificates that we have
and then we need another one that will be giving the Information for the specific Certificate.
8. And this is our very basic Contract that we are going to be using.
9. To use it we need to deploy it in our Ganache local network. How can we do that? Well that is the
reason we use Remix… as Remix does that for us with only few clicks.
10. On the right side of the Editor we can see some more information. There we have few Buttons.
Which are “Compile” “Run” “Analysis” “Testing” “Debugger” and some Settings.
We care only for “Run” right now, so just go ahead and select “Run”

11. After that we have few more things. “Environment”, “Account”, “Gas Limit” and so on. Currently our eyes
are on Environment. There we have few options in a drop down menu which are basically options for us to tell
 Remix where were went to play and deploy our Contract. We want to use our Ganache so we should select
the Third Option “Web3 Provider”

Then we get a screen asking us if we are sure that we want to connect to Ethereum Node. Please select
“Ok” and then on the next screen Click “Ok” again without changing anything in the box.

This way we connect Remix to our Ganache and when we do that Remix automatically fills the
Accounts with the ones from Ganache, so we actually have money. (Not like MetaMask)

12. Now we need to Deploy the Contract. That happens from the Deploy button.
After that in the Deployed Contract Section we will see information about our Contract.
The most important thing from there is the Address where our Contract is Located, but for now leave it
as it is we will return back in few minutes. (Please DO NOT CLOSE the Remix)
5. Creating the our JavaScript Front-End
Well we have our Contract and everything setup. Now we need a way to interact with it and upload
Certificates. For that reason we will be creating JavaScript Page.

I have prepared some Code Skeleton as Resource which holds the CSS, HTML and some initial helper
functions we might need and there is no need to code them.

1. Download the Code Skeleton from https://ndox.abv.bg/download?id=e6ed1a8c6b

2. Un-zip the Zip Archive and there you will find all the Files we need. We even have the Contract if
you had hard time writing it
The main that we are going to Edit is certificates.js
3. Open the Folder or the certificates.js file in Editor of your choice.
4. Now we need only one last Installation before we get into JavaScript and finish this Workshop and
that is our http-server
a. To install http-server you need to open your terminal (Command Prompt) and type the
following in there:

npm install –g http-server

5. After that go to the project directory and run in your terminal (Command Prompt)

http-server

Let’s get back into the JavaScript editor and our certificates.js File. There you can see few things
prepared and there Two Functions that have “TODO” which we actually need to Code.
Because the actual Skeleton is already prepared and we have our http-server running we can open and
see the Page first look. (Not everything will Work but we can see what we have)

6. Let’s go and Check it out. Open http://localhost:8080

Here is our Initial Version. Of course the Buttons don’t work right now and it is time to make them do
stuff. Let’s start with “Submit Certificate”

7. Before Starting with our “TODO” items we need to setup our Connection to the Contract. That will
be happening with Web3 which is provided by the MetaMask, so first thing we need to do is check if
the user has MetaMask installed and if they don’t we need to tell them to install it.

8. After that we need to Connect to the Contract. That is the reason we have an Empty Variable on
top which is ContractAddress. We need to write our Contract Address and we get that information
from our Remix. (Hopefully you didn’t close it. I did warn you )
Go back to the Remix and in the Deployed Contracts just click the small icon and it will copy the
Address of the Contract and then past it to this variable.
 Note: The Contract Address will be different for everybody, so don’t copy this from my screen and
just do the Steps.

9. Now the real Connection. For that we need something called ABI, but I have already prepared it for
you in our Config Folder, so we will use it from the Skeleton and this Address that we just wrote. It
looks like this.

Basically saying… Hey Web3 here is this Contract and it is located on that Address.
This way our JavaScript knows how to communicate with the Contract and where to find it.

10. The first “TODO” that we are going to code is from the first function “uploadCertificate” which is
the one interacting and uploading files the IPFS and then adding the information to our Contract.
 In the Skeleton I have already prepared the IPFS and connected it to the Infura Provider.
You can see that from the first two lines.

Now we are left to code the actual upload.

11. First we pick the Div element where our File Form is located and we want to check if the User has
selected any file before doing anything. If he didn’t select a file we display an Error using the Helper
function “showError”.

12. Now if the User has selected a file it is time for us to upload it to IPFS and get its hash.
13. We have the Hash of the Certificate and now we can add it to our Smart Contract. This is done with
our variable “contract” with which we made a connection to our Smart Contract.
14. With this we have our Uploading of Certificates functionality ready and we can go on our Page and
check it out. Just go again on http://localhost:8080 and try to submit a certificate.

Now when you click Submit, MetaMask will Pop-up and ask you if you want to make a Transaction.
This is because we are trying to Record the Information in the Blockchain and MetaMask asks for
permission to do that. Just Click “Submit” in MetaMask and the magic will happen.

IF you did everything correct you will get this nice Success Message.
15. All Good. We can upload certificate images to IPFS and can store the information in the Blockchain,
but we cannot still view it. Maybe it is time to start Coding our Second “TODO” (Function).

16. Ok let’s jump and Code our viewGetCertificates functionality.

17. Here we first need to get the number of how many Certificates we have stored. That is because we
want to iterate over them on our JavaScript and not inside the Solidity as for loops in Solidity are
quite expensive.

18. Now we have the number of Certificates and we want to get their information one by one and
append them to our html using jQuery.
 With this we now should have View of Certificates working as well.

19. Let’s open our page again at http://localhost:8080 and click “View Certificates” to see if our
Certificate that we previously uploaded is there.
Now we have a fully working Decentralized App with IPFS which is Decentralized Storage.