Skip to content

Latest commit

 

History

History
368 lines (227 loc) · 12.6 KB

dApp.md

File metadata and controls

368 lines (227 loc) · 12.6 KB

An Introduction to Blockchain Distributed Application (dApp) Development

by Steven Huckle - [email protected]

Source: Bitnation

Overview

  • Your peers
  • Introduction to Provenator
  • The dApp development ecosystem
  • The constituent parts of a dApp
  • Deploying the dApp
  • Future work (on Provenator)

Your Peers

Source: Forbes

Me - Steven Huckle

  • 25+ years in IT
  • Trainee Cobol Programmer
  • BSc Computer Science
  • Unix Sys' Admin'
    • Reuters
    • Credit Suisse

Me (cont'd)

  • MSc Music Technology
  • Audio Programmer in Games
    • Sony
    • Zoe Mode (here in Brighton)
  • MSc Energy and the Environment
    • Bitcoin Mining
    • PhD in Blockchain Technologies

University of Sussex

Publications

Current work

The Value of Bitcoin:

Blockchain technology's value lies elsewhere from (Bitcoin's) price. Instead, it lies in the technology's flat, open, P2P topology and its demonstration of the digital commons, which creates socially egalitarian goods and services.

Altalix

You

Source: Open Clipart

Introduction to Provenator

Source: Open Clipart

Fake News

Provenator is the result of an academic paper that was published recently in a Special Issue of a Mary-Ann Liebert journal, Big Data: Fake News - a Technological Approach to Proving Provenance Using Blockchains.

Blockchains

  • Blockchains are, essentially, an immutable database technology with inbuilt trust mechanisms
  • That database is comprised of a ledger, in the form of a chain of transactions
  • Included are cryptographic algorithms and digital signatures that allow secure electronic collaboration, without requiring any centralised authority
  • In other words, no single entity is in control
  • Some blockchains, such as Ethereum, have the ability to execute smart contracts, or application code. Think of them as stored procedures with row-level security

PREMIS

PREMIS is a provenance schema which helps identify a resource. Provenator uses PREMIS metadata definitions to record the ownership of digital media items on the (Ethereum) blockchain, using (Solidity) smart contracts.

Source: The PREMIS Data Dictionary Version 3.0

REACT

Source: Wikimedia Commons

The Live dApp

Provenator

The dApp Development Ecosystem

Source: Berkeley Lab

Dependant Packages

An Editor

Revision Control

You are using GitHub, aren't you?

GitHub Community of Practice

  1. Fork Provenator
  2. Clone fork to local machine
  3. Check out master branch
  4. Create topic branch
  5. Write patches
  6. Stage and Commit patches
  7. Push the new branch back up to the GitHub fork
  8. Send a Pull Request

Get/Give Help

The Constituent Parts of a dApp

Source: comic.browserling.com

dApp Overview

  • Blockchain backend smart contracts, built using Solidity
  • A Javascript frontend, built using React
  • The glue that fits the both together - the Ethereum JavaScript API, web3.js

The Backend Blockchain

The Web Interface

  • A Javascript frontend, built using React
  • The Ethereum JavaScript API, web3.js
  • The contract address
  • The contract ABI

Sending/Receiving Transactions

Asynchronous transactions. When you call a smart contract's method, you create a blockchain transaction, and the return value will be a transaction hash, not the result from the method. That's because the method's result is only returned after the transaction has been mined. Hence, you need to poll for the result, using an async/await pattern.

Running the dApp

When running the dApp, MetaMask stitches together the javascript frontend and the blockchain backend. It also manages your wallet, and signs the transactions created: Using MetaMask.

Deploying the dApp

Source: abidibo.net

Deploying Locally

Run and test the dApp locally, before deploying to a public blockchain.

Prerequisites

Download and install the dependencies (if you have not already done so):

Install

Run a local Ethereum blockchain via Ganache:

  1. Change to the Ganache repository's home directory
  2. Run npm install
  3. Run npm start
  4. Ensure Ganache is running on http://localhost:8545 (you may need to change its settings)

Install (cont'd)

Install the Provenator repository's dependencies:

  1. Change to the Provenator repository's home directory
  2. Run npm install

Contract Deployment

Use Truffle to publish the contracts to Ganache, your local blockchain instance:

  1. Change to the Provenator smart contracts directory blockchain/contracts
  2. Run truffle migrate

Point the Frontend at the Smart contracts

  • Edit the Provenator source file app/utils/contractHandler.jsx so that the four static variables premisObjectContractAddress, premisEventContractAddress, premisAgentContractAddress and premisRightsContractAddress contain the addresses generated by truffle migrate, above. e.g
static premisObjectContractAddress = '0xb9bfd8ff77db391a28a45b6c1cb72b0028695219'
static premisEventContractAddress = '0x12dba0b95a32239a5ba3e6bf7d05471d18f30d1f'
static premisAgentContractAddress = '0xc3a182dd01e3d9ffdbe95ce568b9c8d936e2ca9d'
static premisRightsContractAddress = '0xec6a5f11e7865aadc61f27faf8707795c1cda868'

Build the Frontend

Now create the web application:

  1. In the Provenator repository's home directory, build the React frontend by typing npm run watch
  2. Copy some needed resources to the build directory by typing npm run copy

Load the dApp

  1. Start an instance of http-server by typing npm run start
  2. Load a MetaMask enabled browser
  3. Point MetaMask at your local running instance of the blockchain (http://localhost:8545)
  4. Import a wallet from Ganache
  5. In the browser, go to the URL http://localhost:8081
  6. Create a digital media resource and subsequently, get details about that resource

Deploying Publicly

Rinkeby

Use the geth client to instantiate the test Ethereum network, Rinkeby :

  1. geth --testnet

Deploy to Rinkeby

Use Truffle to publish the contracts to Rinkeby:

  1. Change to the Provenator smart contracts' directory blockchain/contracts
  2. Run truffle migrate.

Point the Frontend at the Smart contracts

  • Edit the Provenator source file app/utils/contractHandler.jsx so that the four static variables premisObjectContractAddress, premisEventContractAddress, premisAgentContractAddress and premisRightsContractAddress contain the addresses generated by truffle migrate, above. e.g
static premisObjectContractAddress = '0xb9bfd8ff77db391a28a45b6c1cb72b0028695219'
static premisEventContractAddress = '0x12dba0b95a32239a5ba3e6bf7d05471d18f30d1f'
static premisAgentContractAddress = '0xc3a182dd01e3d9ffdbe95ce568b9c8d936e2ca9d'
static premisRightsContractAddress = '0xec6a5f11e7865aadc61f27faf8707795c1cda868'

Build the Frontend

Now create the web application:

  1. In the Provenator repository's home directory, build the React frontend by typing npm run watch
  2. Copy some needed resources to the build directory by typing npm run copy

## Deploy the Frontend to IPFS

IPFS

Load the dApp

  1. Fire up a MetaMask enabled browser
  2. Point MetaMask at Rinkeby
  3. Use the rinkeby faucet to fund your wallet
  4. In the browser, go to the dApp URL the address here
  5. Create a digital media resource and subsequently, get details about that resource

Future Work on Provenator

Source: Open Clipart

Research Project

Looking at acquiring funding for a research project based on the ideas presented in Fake News - a Technological Approach to Proving Provenance Using Blockchains and Provenator.

Some Other Ideas

  • UI improvements
  • Search, via perceptual hashes?
  • Dat rather than IPFS?
  • A mobile app'

Your Input

How do you think Provenator can be improved?

Wrapping Up

Source: Open Clipart

Session overview

  • Provenator
  • The dApp development ecosystem
  • The constituent parts of a dApp
  • Deploying the dApp
  • Future work (on Provenator)

Get Involved!

Provenator is an open source, free software project on GitHub...

Presentation

Additionally, this presentation is now public, and available on GitHub.

Thank You

Steven Huckle - [email protected]

Source: BBC Sport