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
Let's see how it works
But first - Metamask!
Install Metamask
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
Verify your account
Let's now try out the Dapp
Join the contest
Click the Bet button
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
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
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)
PART IV
Frontend
Let's connect it to frontend
Fork the repository
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
Register an app
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
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