ICON DAPP From A-Z Part 3: ICON Dice Roll DAPP

Nov 2, 2018 · 9 min read

This is part 3 of a tutorial series, in continuation to Part 1: Tools & Environment and Part 2: SCORE, it is highly recommended that you finish previous tutorials before reading on.

Level: Intermediate


Programming Concepts ★★★☆☆

Python ★★★★

Python Web Framework Flask ☆☆☆☆☆

T-Bears (Local Emulated ICON Node) ★★★★★

SCORE (Smart Contract) ★★★★★

ICON Workshop SF Blockchain Week

During SF Blockchain Week, ICON held a workshop building an entire ICON DAPP from scratch, for those of you who didn’t get the chance to attend, we’ll go over the materials here.

The presented DAPP is ICON Dice Roll, but it is really a coin flip game. The application logic is much the same, it takes a predefined input to compare against the generated result. In a coin flip game, there are 2 possible outcomes, heads or tails. In a real dice roll, there are 6 possible outcomes from 1 to 6 for each side. In the Ethereum casino game Ethroll, there are 100 possible outcomes from 1 to 100. With minor tweaks, this DAPP can work like a real dice roll or Ethroll game.

By the end of this tutorial, you’ll build a functional betting DAPP on the ICON network, let’s get started!

The included ICON Workshop Guide.pdf seems a bit broken in layout and README.md doesn’t contain full instructions, so ignore or delete those. The most up-to-date version of the presentation slide can be found here: ICON Workshop Guide.pdf

The project organized our tbears_cli_config files to the config folder, keystore files to keystores folder and JSON-RPC call json files to testcmdline. The project also built a front end to display results on a web page, using Flask, all under webapp folder.

Image for post
Image for post

DiceRoll SCORE

Let’s dig into the SCORE first,

I’ve added more explanations to the source file above, the SCORE is fairly straight forward implementation. It will take ICX transfers (bets), does a coin flip to determine if the bet was won or lost. Winning bets will receive a transfer of 1.98x the betting amount.

Deploy DiceRoll SCORE to Localhost

Let’s deploy the SCORE to localhost first and test it out,

and use test1_Account as keystore password.

This SCORE is basically the house taking bets, let’s check the treasury balance first, you can use the get_treasury method, but it is really just checking the contract’s balance, so let’s just use tbears.

balance in decimal: 0

We need to topup the house balance with set_treasury, first open testcmdline/send_set_treasury.json

and change “to” address to the scoreAddress on our localhost. The value in the example is ‘0x6f05b59d3b200000’, using Unit Converter, it is 8 ICX.

Check balance again,

balance in decimal: 8000000000000000000 (8 ICX).

Create a Webpage to Display Results

The workshop uses the Python web framework Flask to create the webpage frontend, we’ll explain more about this later, first let’s install it

then open webapp/main.py and modify the default SCORE address to our localhost SCORE address

We’ll be running the built-in development server which will occupy the terminal while running, let’s launch a new terminal window first,

Then run the program which will spin up the development server,

Launch a browser of your choice and visit

Image for post
Image for post

You should see a dancing coin without any data.

Let’s place our first bet using the same wallet, first edit testcmdline/send_bet.json and assign the destination address to our own SCORE,

The value is “0xde0b6b3a7640000” which is 1 ICX, now bet it

You could check the balance with tbears, but since we have a webpage to display the results and balances nicely, let’s just go to the browser that has http://localhost:5000/ open, the results should refresh automatically every 60 seconds.

Send a few more bets by executing the same send_bet.json, how was your luck?

Image for post
Image for post

Deploy to testnet

Image for post
Image for post

In the next step we’ll deploy the contract to testnet, at this point you should be quite familiar with the process so we’ll go straight ahead with the deployment without much explanation. The project provided a keystore ‘keystore1.json’ that is shared by everybody following this tutorial, so make sure there’s still enough balance in there, if not, request from the faucet page.

The project has already prepared a testnet config in the config/ folder, but the code is deprecated, replace tbears_cli_config_testnet.json with

Then deploy to testnet,

Check transaction result and copy the SCORE address,

Topup the house balance on testnet,

then execute it

Check SCORE balance directly on testnet https://bicon.tracker.solidwallet.io/contract/cxd73fdab694c5bbb3b489f760bcae767c301ae4dc

Image for post
Image for post

Edit the webapp/main.py and change default_score to our testnet SCORE address, icon_service to the testnet API endpoint,

Kill the 2nd terminal that is running our flask development server by ctrl-c<enter>

Re-run the service

Now open http://localhost:5000 again, this page will monitor our transactions on the testnet.

Placing Bets Through ICONex to Testnet

Launch your ICONex, remember to point your ICONex to testnet

Image for post
Image for post

Start betting!

Image for post
Image for post

Remember to slightly up your step limit as this involves a contract call, we’ll go with 500,000 steps.

You should see results in http://localhost:5000,

Image for post
Image for post

Note that payouts are internal transactions, that means they’re not real transactions with signatures and included in the blockchain. They’re contracts initiating a value transfer, so you won’t see the transaction history in your ICONex wallet, you’ll check the contract’s ‘Internal Transactions tab’ instead,

Image for post
Image for post

Python Web Framework

Learning Flask

We skipped this earlier, because there’s a bit of learning to do and involves some kind of Python web frameworks holy war. You’ll find about ten thousand discussions on Django vs Flask. To give you a very short summary, Flask is a bare bone Python web framework, it provides simplicity, flexibility and fine-grained control. It is suited when your web app only needs exactly the web stack: requests, routing and responses, just about all we need.

For the purpose of this tutorial, I also reviewed several learning resources, my choice is Pocoo’s official site. One of the members from the Pocoo group, Armin Ronacher, was the creator of Flask.

If you’re looking to get started asap, visit:

Flask 1.0.2 documentation — Quickstart

If you’re looking to get a full understanding, visit:

Flask 1.0.2 documentation — Tutorial

It is ideal that you go through the entire tutorial, it will be helpful and a very handy skill set to have down the road. You’ll be able to build all kinds of web applications, create prototype mock-ups, and further strengthen your knowledge in Python. Depending on your previous knowledge of web frameworks and familiarity of Python, the full tutorial should take from 1–2 days to a week or two.

Flask Webapp Revisited

Let’s go back to our webapp, our default route is to the root URL with the main function that renders index.html.

index.html loads the necessary resources, including an important js file that invokes all the data requests and updates, under static/poll-dice.js

As soon as document is ready, it calls for /getLatestTx, which under our main.py would call latest_transactions function. Under this function we invoke a call to Python SDK, and call the external function get_results in our SCORE. The script would poll for new data every minute to see if data have been altered and update the page accordingly.

Deploy to Production Environment

Flask’s built-in development server is not suitable for production as it doesn’t scale well, nor is it stable, we want to use a real WSGI application server. There are a number of ways you can deploy your application to a production environment, you can check Deployment Options to find a suitable setting.

I’ll briefly cover my settings under Apache2 using mod_wsgi

Domain: dapps.icon.support

Port: 443 (SSL)

keystore/ is now saved in a different location so you’ll need to modify it under main.py

Create an wsgi interface between Apache2 and your app,

Under /etc/apache2/sites-available/, create a new configuration file

Note that we have WSGIScriptReloading On, so you do not need to restart the server after making changes, simply do a touch webapp.wsgi. For apache2.4+, remember to use Require all granted directive under Directory, instead of the deprecated Allow from all.

Enable the site,

Then visit the site and see if everything works, https://dapps.icon.support/icon-dice-roll

That’s it for this workshop! In this tutorial we stitched together all the components we’ve learned so far, from ICON Python SDK, T-Bears, SCORE development, testnet deployment and ICONex interaction with SCOREs. We also learned to build a web frontend to display data queried from our SCORE smart contract. Technically speaking this is already an ICON DAPP, even though not a very functional nor a fun one, but we’ll eventually get there!

If we want to extend on this idea to the Ethroll game, we could tweak the winning logic slightly, connect to ICONex wallet extension and allow placing bets on the website. Once deployed to ICON mainnet, the app can take real ICX bets, and we’ll have our real casino app!

I’ll leave the imagination to you, for now, you’re trained enough to build your own ICON DAPP!

Level Up!

Programming Concepts ★★★★

Python ★★★★

Python Web Framework Flask ★★★★

ICON SDK ★★★★★

T-Bears (Local Emulated ICON Node) ★★★★★

SCORE (Smart Contract) ★★★★★

Follow me on Twitter for most up-to-date ICON related content: https://www.twitter.com/2infiniti

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store