Make A DApp

From Status Wiki
This is the approved revision of this page, as well as being the most recent.
Jump to: navigation, search
This article seems to be out-of-date on 06 June 2018


Introduction

Status allows users to interact with a wide array of Decentralized Applications (DApps) using the same intuitive chat interface (it also does a bunch of other things, but we'll focus on this aspect for now). In the near future, Status users will be able to have group chats where most of the participants are DApp chatbots. All DApp developers will benefit from this synergy, because a common chat interface for multiple DApps makes using your specific DApp more convenient, and effectively makes your DApp more powerful by giving it access to potentially far wider and more powerful network effects.

In this guide, we’ll explore how you can use the Status API to develop your DApp and create custom commands for your users that will work in a beautifully-intuitive, mobile context. As a result of developing on Status, you’ll have a DApp that your users can access on MetaMask, Mist, and Status. It's really worth emphasizing that using Status brings with it access to mobile users with native mobile commands. With little extra developer time invested, you’ll gain a mobile DApp.

Quickstart

If you already have a DApp with a web interface, then this will be the quickest Quickstart ever (trademark pending). Simply open Status, navigate to Home, hit the plus sign and Open a DApp.

Voila! Users in Status can already see your DApp and interact with it (on the Ropsten or Rinkeby Test Networks). Make some mobile optimizations of your own and you're away. That is the power of decentralized, web3 technologies. Awesome, right?

OK, but what if (a) I don't have a DApp but want to learn how to build one on Status, or (b) I want to use this awesome API to make the most of an awesome, native mobile UX, or (c) I know what I'm doing and want to create fully decentralized, chatbot functionality for my DApp?

Tutorials

Overview

Just before we get started, it's well worth acquainting yourself with some of our terminology so you'll be able to make sense of it all. This anatomy establishes the different sections of the chat interface and establishes a common verbiage. The main components are:

  • Message
  • Input
  • Keyboard
  • Suggestions
Chat-anatomy.png

Please take some time to familiarize yourself with all the areas and the different configurations possible depending on what you want to do. Missing from the above is what we refer to throughout this documentation as the markup, by which we mean the mobile equivalent of the view, i.e. where the messages appear.

Creating all of these native setups is totally possible through the API - just read on.

Installing Status

OK, let's learn how to build our first DApp on Status (mobile-first ftw!). To progress further, you need to have Status running either:

  • on a real phone,
  • in an Android simulator
  • in an iOS simulator.

You can go to test.status.im to download for Android, or you can download the latest nightlies here (unstable). iOS Testflight is harder to come by because of Apple's restrictions. However, sign up on our website and we'll let you know when your turn in the queue comes up.

Please note: These documents are intended for the latest release of Status app (^0.9.8).

You can build Status yourself for either Android or iOS by following these guidelines. There, you will find instructions for installing an Android simulator, or starting up Status in the Xcode simulator.

My First DApp

Create a directory for your app to live in, switch into it, and create an index.html file and an app.js file.

mkdir ~/my-dapp && cd my-dapp
touch index.html app.js

The index.html will be really simple. We are going to add several meta tags to make our DApp look good on the small screens of mobile phones, and add a span that will be used by our JavaScript.

Our app.js file will also be simple. We are going to display the information about your account inside a span with account id. Status injects web3.js automatically, so you have an access to web3 variable from everywhere and you don’t need to care about including web3.js manually. However, you can do this and most probably you want to do this if you want to make your DApps work on other platforms.

In index.html, add:

<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="HandheldFriendly" content="True">
    <meta name="MobileOptimized" content="320">
    <meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1">
    <title>My DApp</title>
    <script src="app.js"></script>
  </head>
  <body>
    <h1>Hello world!</h1>
    Web3 account: <span id="account"></span>
  </body>
</html>

In app.js, add:

function onContentLoaded() {
  var accountSpan = document.getElementById("account");
  accountSpan.innerHTML =  
    (typeof web3 === "undefined" ? "undefined" : web3.eth.accounts);
}
document.addEventListener("DOMContentLoaded", onContentLoaded);

You then need to install a really simple http-server from NPM (we recommend it for ease-of-use), and start it in the my-dapp directory we just created.

Open a new terminal session, navigate back to your my-dapp directory, and go ahead and add your dapp to Status! Make sure to pass in the --ip flag using the address returned to you by Console, when you [enabled debugging](#enabling-debugging).

<MACHINE-IP> needs to be the internal IPv4 address returned when you run ifconfig | grep inet.

npm install http-server -g
http-server

Truffle

OK, so we can write a little HTML5 DApp that displays information to Status users through a simple webView component. However, we want to do so much more! We want to write smart contracts, deploy them, and interact with them through a fully mobile user interface; and we want to build decentralized chatbots that live within Status and make friends with all the humans.

Frameworks can lighten the load of developing considerably, and so we include here some quick examples to get you up and running with the two most popular Ethereum frameworks currently available - Truffle and Embark.

Firstly, we'll need a network to develop against, so let's go get testrpc - a neat little simulation of the rules and logic of the Ethereum network that runs much faster than the live network (because it's only simulating things) and is very useful for quick and dirty iterations.
npm install -g ethereumjs-testrpc
testrpc -p 8546
That’s it! It will show you a list of available accounts, private keys, your HD wallet and mnemonic. Please note that we're running testrpc on (non-default) RPC port 8546, just to avoid potential conflict with the node running inside Status. If using android, you need to open the connection from your PC to your phone on that port, so Status can listen for changes there.

Open a new shell (i.e. a new Terminal window or tab) for the next part. You’ll leave testrpc running in the first window, and use the second window for the rest of the tutorial.

Now that you have testrpc is going, and a new shell is open, run:
npm install -g truffle # Version 3.0.5+ required.
This installs the Truffle framework, and you can find its GitHub page here.

With Truffle installed, we can grab the Status Truffle Box, and get a basic DApp running. All the Truffle Boxes also include the app frameworks React and Redux, which were designed by Facebook and are widely used by app developers. You can find the other Truffle Boxes here.

To install the Status Truffle box, all you have to do is run this command in the same Terminal window:
git clone https://github.com/status-im/truffle-box-status.git

# Change into the truffle box directory and install the node dependencies
cd truffle-box-status && npm install

# Compile the contracts from Solidity (much like JavaScript) into runnable EVM code
truffle compile

# Publish the compiled contracts to your network. testrpc must already be running
truffle migrate

As you run the migrate command - which is what deploys your contracts to the network - you can look at the window with testrpc running, and you’ll see your transactions being published. If you get Error: Invalid JSON RPC response, you probably forgot to run testrpc.

Now we are ready to see our DApp running on Status. From within your DApp directory, run:
# Run your Javascript
npm run start

#(Remember to set ENV variable if working with real device)
IP=<DEVICE-IP> npm run start
This should tell you that the the app is running, and that the DApp has been added to the Status Contacts.
Starting-a-dapp-on-status-with-frameworks 03.png

The DApp added to the default Contacts

Again, the DApp should appear in your chats screen, and navigating to it should automatically open a browser that reveals all the goodies hidden in this truffle box. It should also display the stored value of 5 from the SimpleStorage contract that we deployed to testrpc by running truffle migrate above.

If you would like to change the name that appears for your bot when it gets added to Status, simply edit the package.json and update the name there.

Known problems and Notes:

  1. If you are running on a real iOS device, you need to configure Truffle Box to use the network on your computer. In truffle.js, change host to the IP of your computer:
module.exports = {
  migrations_directory: "./migrations",
  networks: {
    development: {
      host: "<MACHINE-IP>",
      port: 8546,
      network_id: "*" // Match any network id
    }
  }
};
  1. You can always use localhost instead of <MACHINE-IP>, but the application won't be accessible automatically, since it runs on port 3000 and your device/emulator knows nothing about it. Execute the following to induce black magic and make the web application accessible:
adb reverse tcp:8546 tcp:8546
adb reverse tcp:3000 tcp:3000

Embark

OK, so Truffle is not your favourite and you prefer using Embark. Fine with us. As always, make sure you have installed the framework first.
npm -g install embark
Embark makes it super easy to set up a demo and get up and running fast:

embark demo cd embark_demo

Next we want to start the network. You can run a full Ethereum node with embark blockchain, but for development you probably want to run testrpc. We want it to run on port 8546 though, so it doesn't interfere with Status, so we need to edit the blockchain.js:
nano config/blockchain.json
# Now edit the 'Development' Network and change only the rpcPort field to 8546:

"development": {
    "enabled": true,
    "networkType": "custom",
    "genesisBlock": "config/development/genesis.json",
    "datadir": ".embark/development/datadir",
    "mineWhenNeeded": true,
    "nodiscover": true,
    "maxpeers": 0,
    "rpcHost": "<MACHINE-IP>",
    "rpcPort": 8546,
    "rpcCorsDomain": "http://<MACHINE-IP>:8000",
    "account": {
      "password": "config/development/password"
    }
  }

# ctrl+O will write your changes to file, ctrl+X will exit the file.
# Now, navigate back to the root of your project and start testrpc

cd .. && embark simulator
Open a new shell tab and switch the RPC node. Once that is done, you need to install the embark-status package.
npm install embark-status --save

When using a real device, you will now need to insert the relevant IP into two config files.

Open the file embark.json and edit the plugins key to reflects your DEVICE's IP address:
"plugins": {
  "embark-status": {
    "deviceIp": "<DEVICE-IP>",
    "whisperIdentity": "dapp-embark-test",
    "name": "MyEmbarkDapp"
  }
}
Navigate to and change the config/webserver.js file so that it reflects your development machine's IP address:
{
  "enabled": true,
  "host": "<MACHINE-IP>",
  "port": 8000
}
Now we’re ready to run the DApp on Status. From within your DApp directory, run:

embark run

Known Issues and Notes:
  1. To deploy the DApp successfully on a device you may need to patch this line in embark-status to include + " --dapp-port 5561".
  2. You can always use localhost instead of <MACHINE-IP>, but the application won't be accessible automatically, since it runs on port 8000 and your device/emulator knows nothing about it. Execute the following to induce black magic and make the web application accessible:
adb reverse tcp:8546 tcp:8546
adb reverse tcp:8000 tcp:8000
Using Status, you can now develop mobile DApps as easily as developing for MetaMask or Mist! But Status offers extra goodies as well.

In particular, Status will help you allow your users to chat with your DApp! The chat interface will let your users easily and intuitively accomplish tasks. In the future, your users will be able to hold group conversations where all the other participants are DApps, which is kind of amazing.

Later we’ll have an easy mechanism to make your DApp available for others to use on Status, but for now please just submit a pull request using our guide on adding DApps.