Creating Dapp

Almost every project needs a user interface to interact with. A user should not type in a Demand message. In Airalab repository there’s a convenient template for a Dapp. In this section you are going to learn how to get a new Dapp for your CPS.

Note

The source code is here

To get a template you don’t even have to clone the repo. Instead do these steps:

$ npm install -g vue-cli
$ vue init airalab/vue-dapp-robonomics-template my-project
$ cd my-project
$ npm install
$ npm run dev

After the last step a webserver has started on http://localhost:8000/. But before you open this link in a browser you should configure the Dapp.

Note

MetaMask is required for the Dapp

Here is a configuration file below. You have to specify a LIGHTHOUSE you work on, your CPS MODEL and OBJECTIVE. Also the Dapp uses IPFS message broker. You can either set up your own broker or use existing one, for example https://wss.pool.aira.life.

export const NETWORK = 1
export const LIGHTHOUSE = 'airalab.lighthouse.3.robonomics.eth'
export const MODEL = 'QmdFh1HPVe7H4LrDio899mxA7NindgxqiNUM9BNnBD7ryS'
export const OBJECTIVE = 'QmbSW1E73DKUvGDrgx8GirEVfHJLvj8RBijtH9iEZ7UecU'
export const IPFS_PUBSUB = 'http://127.0.0.1:9999'
export const ENS = ''
export const VERSION = 1

After editing the file, launch the Dapp

$ npm run dev

Check the source code out to get familiar with the structure of the template.

Good luck!