Blockchain Web Development on Ethereum

Get an overview of the whole project structure which consists of:

• Frontend build in Angular

• Smart Contract written in Solidity

• Middleware using web3js

We will install the requirements for development: Visual Studio Code and NodeJS and setup sample Angular project.

To make sure we are having the same dependencies:

- delete package-lock.json file

- delete node_modules

- replace package.json content with the following and then run "npm install" :

{

  "name": "blockchain-poll",

  "version": "0.0.0",

  "scripts": {

    "ng": "ng",

    "start": "ng serve",

    "build": "ng build",

    "test": "ng test",

    "lint": "ng lint",

    "e2e": "ng e2e"

  },

  "browser": {

    "http": false,

    "https": false,

    "os": false

  },

  "private": true,

  "dependencies": {

    "@angular/animations": "~9.1.3",

    "@angular/common": "~9.1.3",

    "@angular/compiler": "~9.1.3",

    "@angular/core": "~9.1.3",

    "@angular/forms": "~9.1.3",

    "@angular/platform-browser": "~9.1.3",

    "@angular/platform-browser-dynamic": "~9.1.3",

    "@angular/router": "~9.1.3",

    "apexcharts": "^3.19.0",

    "bootstrap": "^4.4.1",

    "jquery": "^3.5.0",

    "rxjs": "~6.5.4",

    "tslib": "^1.10.0",

    "web3": "^1.2.7",

    "zone.js": "~0.10.2"

  },

  "devDependencies": {

    "@angular-devkit/build-angular": "~0.901.3",

    "@angular/cli": "~9.1.3",

    "@angular/compiler-cli": "~9.1.3",

    "@angular/language-service": "~9.1.3",

    "@types/jasmine": "~3.8.0",

    "@types/jasminewd2": "~2.0.3",

    "@types/node": "^12.11.1",

    "codelyzer": "^5.1.2",

    "jasmine-core": "~3.8.0",

    "jasmine-spec-reporter": "~4.2.1",

    "karma": "~5.0.0",

    "karma-chrome-launcher": "~3.1.0",

    "karma-coverage-istanbul-reporter": "~2.1.0",

    "karma-jasmine": "~3.0.1",

    "karma-jasmine-html-reporter": "^1.4.2",

    "protractor": "~5.4.3",

    "ts-node": "~8.3.0",

    "tslint": "~6.1.0",

    "typescript": "~3.8.3"

  }

}

We will describe the frontend architecture and components which we will develop.

We will define interfaces and mockup a simple website design with implementation using Bootstrap.

We will develop PollCreate component (view) which will be responsible for handling input form data, for creating polls.

We will implement PollCreate component (logic), setup reactive form and verify we are getting correct data.

We will implement Poll component (view) responsible for displaying short information about the poll.

We will implement Poll component remaining logic.

We will implement PollVote component logic for voting.

We will implement PollVote component logic for displaying charts using Apex charts.

We will implement displaying of active poll in the PollVote component.

We will implement and mock-up PollService, responsible for executing functions.

We will wire up outputs of components and make sure the data flow from components to PollService works.

In this section you will learn about:

• where to create smart contract

• how to create smart contract

• solidity fundamentals

• contract interaction

Learn basics of Remix editor, structure and plugins needed.

Solidity types: uint, bool, string, bytes...

Solidity functions: types, visibility etc.

Learn about function modifiers and require statements.

Learn how you can interact with your smart contract and execute functions to test if it works as expected.

Now we will develop our PollContract and we start by defining the types we need.

We will implement creatingPoll function and handle possible errors.

We will define getPoll function and return data we need for our frontend.

We will implement vote function which handles the logic of voting and possible errors.

We will implement function for getting voter and data we need for our frontend.

We will setup Metamask and learn basics.

We will setup Ganache, local blockchain, and learn the basics.

We will learn how to deploy your own smart contract to local blockchain using Remix.