Distributed:health

CODE CAMP
Fitbit Dapp

This workshop was created by
Ethereum Foundation's Play team
@alincode @ninabreznik @serapath

PART I

Fitbit Dapp, Metamask & Fitbit account

What will we build

Community organized Fitbit contest

https://ethereum-play.github.io/workshop-fitbit-dapp/

Let's see how it works

But first - Metamask!

Install Metamask

metamask.io

Metamask extension

Add to Chrome/Firefox/Opera

Login to Metamask

Switch to Ropsten test network

Get test ethers

Metamask faucet

Create more accounts

Add some funds to each of them

And we need a Fitbit account

Sign up

fitbit.com/signup

Verify your account

Let's now try out the Dapp

Join the contest

Click the Bet button

https://ethereum-play.github.io/workshop-fitbit-dapp/

Log in to Fitbit

when you click Bet, log in window will open

Allow access

Confirm the transaction

Metamask pop-up

See the success message

Current step count and Total players count

Become a sponsor

Enter the amount (min 0.5 eth), your name

=> click the Sponsor button

Confirm the transaction

0.5 eth donation + gas fee

See updated values

Total prize amount + Sponsorship board

PART II

Remix

Open Remix

remix.ethereum.org

File explorer

Editor

Terminal

Right panel

Set environment

Run tab: Environment = Injected web3 (Ropsten)

Create new file

File explorer/create new file

Name the file

use .sol extension (solidity file)

See the file

browser/fitbit.sol

Paste the code to it

http://bit.ly/fitbit-sol

Compile the contract

Compile tab: Start to compile button

See compiled contracts

FitnessContest + all its dependencies

Switch to Run tab

Select FitnessContest contract

Increase the gas limit

Run tab: Gas limit => 6000000

Deploy the contract

Expand the input field, enter the params

& deploy (click transact)

if empty, default _duration will be set to 30 days

Sign the transaction

Confirm button

Check if tx is mined

Terminal logs in Remix

Open deployed contract

Run tab: Deployed contracts

See auto generated UI

Interactive UI for FitnessContest contract

See the list of sponsors

getAllFunders function

See the tx in the terminal

function call / not costing any gas

Check the solidity fn

browser/fitbit.sol

Let's sponsor the contest

Run tab: set value + input in fund function

Confirm the tx

Metamask pop up

See the confirmation

Remix terminal log

Check the list of sponsors again

getAllFunders function

Check tx in the terminal

Remix terminal log

How much do we have in the bucket?

Run tab: Deployed contracts

getTotalAmount function

PART III

Solidity

Let's read the Solidity

• pragma             (^0.4.17)
• import         (OpenZeppelin)
• data types            (uint, address, string, struct etc.)
• modifiers       (conditions, _;)
• inheritance   (FunderMixing is CommonMixin)
• function types    (pure, view, payable, non payable)

https://solidity.readthedocs.io/en/v0.4.25/

PART IV

Frontend

Let's connect it to frontend

github.com/ethereum-play/workshop-fitbit-dapp

Fork the repository

https://github.com/ethereum-play/workshop-fitbit-dapp

Clone the repo

https://github.com/yourName/forked-fitbit-dapp

Copy the link

https://github.com/yourName/forked-fitbit-dapp

Open the terminal

git clone <paste the link to forked repository>

Open folder in the editor

cd workshop-fitbit-app

atom .

Open index.js 

src/index.js

Copy contract address

Remix: Run tab/Deployed contracts

Paste your address

Atom: src/index.js/DEFAULT_ADDRESS

Log in to

Fitbit dev account

https://dev.fitbit.com/login

Register an app

https://dev.fitbit.com/apps/new​

Copy client ID

Paste your client id

Atom: src/index.js/CLIENT_ID

Run npm install

Your computer: terminal

Run npm start

Your computer: terminal

Proceed (unsafe)

localhost

Voila!

localhost

Run the build

^C (stop the server first)

npm run build

Commit changes

 git add -A && git commit -m 'Initial commit'

Push to Github

git push

Change settings

your workshop-fitbit-dapp repo on Github

Enable Github page

your workshop-fitbit-dapp repo on Github/settings

Update link

ethereum-play => yourGithubName

Update Fitbit dev account

https://dev.fitbit.com/apps

Update Fitbit dev account

Edit Application Settings

Edit the Application

update with your github page link

Open your Fitbit page

Enter the amount (min 0.5 eth), your name

=> click the Sponsor button

Woohoo!

Total prize amount & Sponsorship board

got updated

If you use same Ropsten account on Metamask, last name you used as a sponsor is shown and the amount is the sum of all your transactions

Need help?

Find us on our support chat

This workshop was created by
Ethereum Foundation's Play team
@alincode @ninabreznik @serapath