Dev.Series — How to develop your first Angular 5 ÐApp on evan.network!

In the second blogpost of our Dev.Series we want to show you how to develop a decentralized application (ÐApp)on the evan.network. For this we use the Greeter Smart Contract we created and deployed in the last blog post.

Photo by Headway on Unsplash

Use the evan.network ÐApp generator

http://yeoman.io/

To start easily with the ÐApp development on the evan.network, we’ve built a yeoman generator to scaffold your ÐApp templates for the evan.network.

The generator is easy to use and sets up all dependent packages for you and your custom greeter contract.

So let’s start installing the yeoman generator. I assume you already have node installed on your machine. So simply run the following commands:

npm install -g yo
npm install -g generator-evan

These two commands install the evan.network yeoman generator globally on your machine. Now we can create the project structure for the new ÐApp with the command

yo evan

… and setup your name and description for the project.

Now you can change into the created directory and install the dependencies with:

npm install

Now all evan.network APIs, UI components and our ÐApp-browser will be installed in your project. When the installation is finished, you can add your first ÐApp to your project structure, also with the yeoman generator. Run the command

yo evan:dapp

in the project to setup your ÐApp.

There are multiple types of ÐApps you can generate. In future posts, I will explain the different types you can select. For now, we select the “Single ÐApp” for our exisiting greeter contract. Choose a name and you are ready to go!

Now we can check the created seed ÐApp for the greeter contract. In the evan.network, most ÐApps are associated with ENS addresses so you have to choose an ENS address for your ÐApp. This is important because for the deployment later on the production net, you must have the rights to set the ENS address for your ÐApp.

All generated ÐApps on evan.network are based on Angular 5 and TypeScript at the moment. In future posts, we will show you how you can use your own libraries and frontend frameworks within your DApps and the evan.network APIs.

Build your ÐApp and run the local development server

To build your ÐApps in your project, run the npm command

npm run dapps-build

Now all ÐApps located in your project are compiled and bundled into one javascript file. If any error occurs during the compilation, it will be shown in the console.

After the build is finished, you can run the local development server with

npm run serve

This opens a new webserver on port 3000 and serves the evan.network dashboard. You can open the local environment on http://localhost:3000/dev.html.

When the page load is finished, you can import your identity generated on the evan.network previously.

When you don’t have any identity, you can go to https://dashboard.evan.network and create a new one.

A detailed description how the identity is generated can be found on https://evannetwork.github.io/tutorial/create-identity

When you imported your identity and logged in to your account, you can now open your generated ÐApp on http://localhost:3000/dev.html#/greeter.demo.evan and replace the “greeter.demo.evan” with the by you specified name within the ÐApp generation step in the yeoman generator. Please note that you have to add the “.evan” to your ÐApp ENS name.

Then your newly created ÐApp will open in your Browser and you can see a simple Angular 5 component, which shows you some Hello World stuff.

Call the greeter contract within the ÐApp

Now we want to show the greeter function on our deployed greeter contract. So we have to adjust the Angular 5 ÐApp stored inside the project.

Because the ÐApp does not know about our greeter ABI, we must tell the ÐApp our ABI. The evan.network API has a module called “ContractLoader” to store Contract ABIs to use them within the API. We can sideload our greeter ABI directly in the OnInit function located in the SampleComponent in “greeter-dapp/dapps/greeter/src/components/sample/sample.ts”

Add the following code on the end of the OnInit function

this.bcc.contractLoader.contracts['Greeter'] = {
  'interface': '[{"constant":false,"inputs":[],"name":"kill","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":true,"inputs":[],"name":"greet","outputs":[{"name":"","type":"string"}],"payable":false,"stateMutability":"view","type":"function"},{"inputs":[{"name":"_greeting","type":"string"}],"payable":false,"stateMutability":"nonpayable","type":"constructor"}]',
};

…we’re using the “bcc” service, which serves us the API of the evan.network blockchain-core library. There are many other available modules on the library, which are documented in our API documentation. Now the ContractLoader module can access our greeter contract ABI and load it directly via a contract address.

I have deployed a greeter contract at 0x7c527f7acffb3dd60e445a9f2f0007f33cd9b762 and now I want to call the “greet” method on the contract and show it in the ÐApp frontend. So what we have to do is to load our contract instance at the specified address from the ContractLoader and assign it to a variable:

const greeter = this.bcc.contractLoader.loadContract('Greeter', '0x7c527f7acffb3dd60e445a9f2f0007f33cd9b762');

The API now loads the contract at the given address and attaches the methods defined in our “greeter” ABI provided by the ContractLoader. When we now want to call the “greet” method on the contract, the evan.network API provides an “Executor” module, which runs transactions and calls to a given smart contract. The module also calculates GasLimits and many other things. We use the “executeContractCall” function from the executor located also in the blockchain-core library to call our “greet” method on the contract:

this.greetingMessage = await this.bcc.executor.executeContractCall(
  greeter,           // web3.js contract instance
  'greet'            // function name
);

We await the execution of the contract call and assign the response to a local Angular scoped variable. After that, we can use the assigned greetingMessage in our sample.html component with the angular braces

<p>Greeting: {{ greetingMessage }}</p>

https://media.giphy.com/media/mlvseq9yvZhba/giphy.gif

Now save all the files and compile the ÐApp again with

npm run dapps-build

in the project folder. After all is compiled sucessfully, you can refresh your browser window and unlock your account.

And now, you can see the greeting stored within your deployed greeter contract.

As you can see, it’s pretty simple to call an external contract within the evan.network ÐApp. Now you can adapt your own use cases or contracts to the ÐApp.

https://media.giphy.com/media/12NUbkX6p4xOO4/giphy.gif

You can download the ÐApp on my github repo too: https://github.com/S3bb1/greeter-dapp

In the next post, I show you how you can deploy your ÐApp to the evan.network. Also, you will see how you can execute transactions and assign DBCP definitions.

If you have any further questions, feel free to contact the evan.network team via gitter or over our contact form.