DEV Community: Alexei Dulub

State Management Using Redux with React

Alexei Dulub — Wed, 29 Jul 2020 12:05:03 +0000

Redux is used by many for streamlining modern front-end applications. It was designed by Dan Abramov who believed state management to be the key in providing the best user experience and eliminating bugs following through to deployment.

State management is certainly the hardest and challenging aspect of the modern front-end application. Yet, Redux can ensure a compact, mature, and stable solution to state management in your React application. Redux is a useful pattern that is quite capable of transforming your web app into an organized, pleasing, and easily understandable modern powerhouse made using JavaScript.

The Redux principles are packaged and presented in a user-friendly Flux library which gives you more advanced tools for developing JavaScript UIs. Redux can be considered the best framework for the state management of React.js library.

While developing a single page application, the client-side data management proves to be quite complex. As the application gets larger, variations in data, changes in module states, and updated views start showing up unexpectedly. To overcome this size trap, developers at Facebook built Flux as the state management pattern.

Flux complements the composable view components of React by exploiting the unidirectional data drift. The users interact with the views, which then perform actions via a centralized dispatcher, delegating them to stores that hold the logic and data of the application. This updates each view that is affected. Flux comes with a lot of stores and each of them makes use of small chunks of data or state related to the application which brings each module up with a store.

Data Flow in Flux

The user interacts with a view, triggering an action that dispatches a matching function leading to a change in the store. Following this change, the views of each subscriber are updated accordingly, eliminating the need for manual modification of data in various modules.

This data flow is unidirectional and as the app grows, the number of stores that perform data management also grows leading to the increased complexity of the app. Flux offers multiple stores as a solution to this problem.

Redux for JavaScript State Management

Javascript apps have a predictable state container in the form of Redux which has a unidirectional flow different from that of Flux as Flux uses numerous stores, whereas Redux needs only one. The stores are divided into several state objects and it is only required to manage a single store through which the details are fetched.

The Three Principles of Redux are:

There is a single source of truth,
The states are read-only,
The changes are done through pure functions.

The application state is saved in one object inside a store that can only be changed by an action. Pure reducers describe how an action changes the state.

Actions

Actions work as information payloads that transfer data from application to the store using store.dispatch().

Actions are JavaScript objects which are defined by the type of their properties set out using string constants like in the following example:

import { ADD_TODOLIST, REMOVE_TODOLIST } from '../actionType'

Functions serve as action creators:

function addTodoLIST(textdata) {
  return {
    type: ADD_TODOLIST,
    textdata
  }
}

Action Handling Reducers

Actions can only describe an event without providing significant details. A reducer must always remain pure. The reducer is the function passed to the Array.prototype.reduce(reducer,?initialValue). Further, the actions like mutation of reducer arguments, Committing tasks like API calls, Database calls, and routing transitions shouldn’t be performed within a reducer. Also, a non-pure function like Math.random() shouldn’t be called.

Store

This is the object that brings it all together, as it:

Holds the application state
Provides access to the state via getstate()
Allows updating the state via action(dispatch)

Allows to register as a subscriber or listener and unsubscribe as well

                                                                                                                                                                                                                                                                                                                                                                                                                                            The Redux app has only one store, so to split the data handling logic, reducers need to be combined.

In order to create a store, run the following command:

import { createStore } from redux
import todoApoList from './reducers'
let store = createStore(todoAppList)

Create a project folder and within that make a package.json file. Following that, paste the code given below to that file.

{
  "name": "Countapp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server"
  },
  "author": "Your Name",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.24.0",
    "babel-loader": "^6.4.1",
    "babel-preset-es2015": "^6.24.0",
    "babel-preset-react": "^6.23.0",
    "babel-preset-stage-3": "^6.22.0",
    "webpack": "^2.3.2",
    "webpack-dev-server": "^2.4.2"
  },
  "dependencies": {
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "react-redux": "^5.0.6",
    "redux": "^3.7.2"
  }
}

In the terminal, type: npm install and make a webpack.config.js file within the root folder. The next step will be to create the webpack.config.js file in the root folder.

module.exports = {
    module.exports = {
    entry: main.js file path,
    output: {
        filename: mention within single quote bundle.js here
    },
    module: {
        loaders: [
            {
                loader: this is to be babel-0loader,
                test:/\.js/,
                exclude: /node_module/
            }
        ]
    },
    devServer: {
        port: 9000
    }
};

Create another file known as babelrc:

{
  "presets: ["es2015", "react", "stage-3"
}

Now create the index.html file inside the root:

<!DOCTYPE html>
<html>
  <head>
    <meta charset= "utf-8">
    <title>A Simple Real Life App</title>
  </head>
  <body>
    <div id= "root"></div>
  </body>
</html>

In the terminal, type npm start To run the server with the URL http://localhost:9000

Now we can work with Redux within main.js. Let’s set up the react dependency, as well as react-redux. React-redux delivers a store that exists through the whole application. The Provider wraps the App element:

Import React from 'react';
Import {render} from 'react-dom';
Import {Provider} from 'react-redux';
Import App from './components/App';
render {
<Provider>
    <App />
  </Provider>,
  document.getElementById('root')

Creating the Components Directory Inside SRC

Create a directory containing the App.js, which is a very essential component:

//App.js 
import React from 'react';
const App = () => {
 <div className="container">
   Various app components
</div>
}
export default App;

App.js is a counter application that includes the other components, the number of which needs to be determined. Whereas React and Redux contain only two components namely Smart and Dumb.

Smart Components

It’s a component that intermingles with the application state directly to access the store, dispatch the actions, and get the application's current state. It is called smart because it updates its state with changes in the store, and transforms the views accordingly. The three smart components are:

    1.     Counter.js


    2.  RemoveCounter.js


    3.  AddCounter.js

These are in the container folder, which will be developed a little later.

Dumb Components

App.js has a child component that never interacts with the store and is kept inside the component folder. We need to create a directory within the SRC with three container components as mentioned earlier. Following that, the AddCounter.js component will be created.

// AddComponent.js
import React, {Component } from 'react';
import {connect } from 'react-redux';
import { appendCounter } from '../actions';
import { bindActionCreators } from 'redux';
class AppendCounter extends Component {
  constructor(props) {
        super(props);
   }
   render() {
     return (
           <div className="container">
            <form>
              <div>
                <div>
                  <button 
                    onClick={(b) => {b.preventDefault();this.props.dispatch(appendCounter())}}>
                      Add
                  </button>
                </div>
              </div>
            </form>
            </div>
     )
   }
}
function mapDispatchwithProps(dispatch) {
  return { actions: bindActionCreators(incrementCounter, dispatch) }
}
export default connect(mapDispatchwithProps)(AppendCounter);

The AppendCounter component is now connected to the redux store. When the user clicks the button, it will dispatch an action based on Redux. That’s why the dispatch function needs to be passed to this component as a property. In our scenario, this is appendCounter().

Creating an Action

Create a folder named ‘actions’ inside SRC containing index.js:

// index.js 
import * as actionType from './Actionform';
export const appendCounter = () => ({
  type: actionType.APPEND_COUNTER,
  payload: 1
});

Defining Actions with Actionform.js

Actionform.js can be found under the directory named actions.

// AppendCounter.js
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { appendCounter } from '../actions';
import { bindActionCreators } from 'redux';
class AppendCounter extends Component {
  constructor(props) {
        super(props);
      }
   render() {
     return (
           <div>
            <form>
              <div>
                <div>
                  <button 
                    onClick={(e) => {e.preventDefault();this.props.dispatch(appendCounter())}}>
                      Add
                   </button?
                </div>
              </div>
            </form>
            </div>
     )
   }
}
function mapDispatchWithProps(dispatch) {
  return { actions: bindActionCreators(appendCounter, dispatch) }
}
export default connect(mapDispatchWithProps)(AppendCounter);

The function mapDispatchWithProps is required to transfer the dispatch to the component as a property binding the actions with this component.

Creating the Reducer

Create a reducer directory within the SRC and make a file named counterReducer.js inside it:

// countReducer.js
import * as actionForm from '../actions/ActionForm;
const countReducer = (state = 0, action) => {
  let freshState;
  switch (action.type) {
    case actionForm.Append_COUNTER:
      return freshState = state + action.payload;
    case actionForm.DESTROY_COUNTER:
      return freshState = state - action.payload;
    default:
      return state
  }
}
export default countReducer;

Both conditions i.e. the increment and decrement have now been defined. You may notice that the state has not been modified directly since a new variable is defined which is then assigned a new state, and then is returned.

This function is pure, since it has not mutated any state of the store. It picks the previous state value and adds it with the new value, which is then assigned to this new variable and is returned as the application’s new state. This is the core principle of Redux.

Creating Index.Js

Make a file inside the reducer directory named index.js

// index.js
import { combineReducers } from 'redux';
import countReducer from './countReducer';
const countApp = combineReducers({
  countReducer
})
export default countApp

This is the only store that will be included in the main.js. The combineReducer() command then combines all the reducers in a store and sends back the state object like a global app.

Now we need bind the store and the reducer within the entire application:

// main.js
import React from 'react';
import { render } from 'react-DOM';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import App from './components/App';
import reducer from './reducers';
const store = createStore(reducer);
render(
  <Provider store={store}>
    <App />
  </Providers>
  document.getElementById('root')
)

Creating DestroyCounter.js

Create a smart component file inside the container dir named as DestroyCounter.js:

// DestroyCounter.js
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { destroyCounter } from '../actions;
import { bindActionCreators } from 'redux';
class destroyCounter extends Component {
  constructor(props) {
    super(props);
  }
   render() {
     return (
           <div>
            <form>
              <div>
                <div>
                  <button 
                      onClick={(b) => {b.preventDefault();this.props.dispatch(destroyCounter())}}>
                      Remove
                  </buttons>
                </div>
              </div>
            </form>
            </div>
     )
   }
}
function mapDispatchWithProps(dispatch) {
  return { actions: bindActionCreators(destroyCounter, dispatch) }
}
export default connect(mapDispatchWithProps)(destroyCounter);

To add the new action for destroyCounter, we need edit the src/actions/index.js file:

// index.js
import * as actionType from './ActionForm';
export const appendCounter = () => ({
  type: actionType.APPEND_COUNTER,
  payload: 1
});
export const destroyCounter = () => ({
  type: actionType.DESTROY_COUNTER,
  payload: 1
});
And we have defined the Decrement reducer already.
// counterReducer.js
import * as actionType from '../actions/ActionForm';
const counterReducer = (state = 0, action) => {
  let freshState;
  switch (action.type) {
    case actionType.APPEND_COUNTER:
      return freshstate = state + action.payload;
    case actionType.DESTROY_COUNTER:
      return freshState = state - action.payload;
    default:
      return state
  }
}
export default counterReducer;

Adding Counter.js

Counter.js is a smart component which needs to be connected with the redux store to get and display the current state. The mapStateWithProps does the mapping of the state with the props of the latest component and then it displays the data as components property.

// index.js
import * as actionType from './ActionForm';
export const appendCounter = () => ({
  type: actionType.APPEND_COUNTER,
  payload: 1
});
export const destroyCounter = () => ({
  type: actionType.DESTROY_COUNTER,
  payload: 1
});
And we have defined the Decrement reducer already.
// counterReducer.js
import * as actionType from '../actions/ActionForm';
const counterReducer = (state = 0, action) => {
  let freshState;
  switch (action.type) {
    case actionType.APPEND_COUNTER:
    return freshstate = state + action.payload;
    case actionType.DESTROY_COUNTER:
    return freshState = state - action.payload;
    default:
    return state
  }
}
export default counterReducer;

Adding Components To App.Js

Now all we have to do is bring everything we’ve created to the application file:

// App.js
import React from 'react';
import Counter from '../containers/Counter';
import AddCounter from '../containers/AddCounter';
import DestroyCounter from '../containers/DestroyCounter';
const App = () => {
  return (
    <div>
      <Counter></Counter><br />
      <div>
        <div>
          <AddCounter></AddCounter>
        </div>
        <div>
          <RemoveCounter></RemoveCounter>
        </div>
      </div>
      </div>
  )
}
export default App;
npm start;

Finally, the http://localhost:9000 URL will display the full view of the app.

Conclusion

Hopefully, we’ve proved that Redux is definitely a great state management framework for React.js. The detailed process discussed above makes it obvious that for single-page real-life applications the React-Redux option is one of the best solutions. You can take the basics from this implementation and scale it to fit your project. Make state management with Redux your daily routine, as it will most likely come in handy.

Testing Redux with Jest

Alexei Dulub — Wed, 22 Jul 2020 21:08:57 +0000

Testing Redux with Jest

Managing the state of an application is certainly a difficult task. Redux, is a predictable state container that has simplified the process for Javascript applications. However simplified the process, testing your code is a necessity.

This article will guide you through the steps and explain what test-driven development is, how you could set up your testing environment, and then guide you through testing actions and reducers that help manage state. It will also take a look at how redux-saga simplifies testing asynchronous actions.

Prerequisites

This post is aimed at developers that have sufficient experience with Javascript and are comfortable with writing applications. A good understanding and experience with Redux will certainly help, as this article focuses mainly on testing state trees managed via Redux. However, if you do not have a lot of experience with Redux, check out the resources section. Some experience with testing will be beneficial.

✅ A sufficient understanding of Redux and state management.

✅ A good understanding of ES6 Javascript generators.

⭐ Make sure to check out the resources section!

Outcomes

By reading this post you will :

Have a fundamental understanding of test-driven development.
Know how to test Redux state trees and asynchronous actions.

Test-Driven Development: Concept Overview

Test-Driven development is slowly becoming a standard in a lot of new applications, and the reason why this is so is that traditional testing methods are often insufficient or do not give you a complete picture.

Traditional testing often also called naive testing is often performed after a feature or a group of features have been completely developed, this takes up a lot of time and the time taken to fix the issues/bugs shown through these testing rounds is can get long very easily. To address these concerns, software developers follow the test-driven development procedure, mainly there are 3 types of tests that you could write:

Unit Tests - Unit tests test a single function or a component in a large application. This is the kind of test that you will write frequently. The purpose of a unit test is to give you confidence in an isolated piece of code not of the whole application, which is why you need the other 2 types of tests.
Integration Tests - Integration tests a whole bunch of units, something like a component that uses a set of components. Integration tests test the usage of that particular set of units.
Acceptance Tests - Also known as end-to-end tests, are often more complex and consume more resources to run but give higher confidence in your application as a whole. It could be something like simulating the action of an authorized user deleting a post, or adding one.

Regardless of the type of tests, there are mainly 3 steps in any test-driven development lifecycle:

Always write a set of failing tests for a feature.
Write just enough code to pass the failing tests.
Refactor code if possible, to ensure code quality.

Setting up your environment

To get started, you must first install redux and Jest, the testing library we will use. Make sure to have initialized a package.json file in your project directory, then run the following commands to install the dependencies:

npm install redux redux-saga

and then:

npm install --save-dev jest

Once the dependencies have finished installing you must a few lines to your package.json file under the scripts key:

{
  "scripts": {
    "test": "jest",
    "test:watch": "npm test -- --watch"
  },
}

The first script will run all the tests once and show the results then stop, the second script will rerun the tests every time there is a change. You could skip the second script and run the following command instead if you think the second script is redundant:

npm run test -- --watch

Ideally, you would create a directory named tests in your project root, and then all your test files will live inside it. All your test files should follow a common name format of .test.js, meaning that a test file with the name of the abc will have a filename of abc.test.js.

Writing unit tests for actions and reducers

Redux provides the ability to maintain a global state container by following a few steps. When the application's state changes, that part of the application would dispatch what is known as an action (more or less an object) that is directly related to or provides an indication of what happened, a reducer would get hold of this action and perform a change on the state tree that will modify the state, once this is done the global store alerts the part of the application that initiated the change.

To make the actions as consistent as possible, Redux encourages the use of action creators, which are functions that would return the action object with the action type and optionally a payload. Action creators and reducers play a large role in maintaining state, which also makes it necessary for them to be tested.

An action creator with the goal of incrementing some part of the state by a value would look like this:

const incrementBy = (value) => {
    return {
        type: 'INCREMENT_BY',
        payload: value,
    };
};

Where the type indicates the kind of action that is dispatched and the payload contains a value that will be used by the reducer. The goal of testing this action creator, therefore, is to ensure that the created action has a specific type and accepts a payload.

To ensure that the type is more reusable, you could declare it separately and make it exportable:

export const type = 'INCREMENT_BY';

export const incrementBy = (value) => {
    return {
        type,
        payload: value,
    };
};

And then you could test this action creator like this:

it('should create an action with INCREMENT_BY type', () => {
    const value = 5;
    const expectation = {
        type: 'INCREMENT_BY'
        value,
    };

    expect(incrementBy(value)).toEqual(expectation);
});

The it method also known as test in jest is what describes the test case. First, we create an action that we would expect to be created given a specific value, then using the expect and toEqual methods we can see if the action returned by the action creator incrementBy is the same as what we would expect it to be.

A reducer is mostly a bunch of if/else-if statements or a set of switch/case statements that would do a different thing when a different action is passed into it:

const initialState = 0;

const reducer = (state = initialState, action) => {
    switch (action.type) {
        case 'INCREMENT_BY':
            return state + action.payload;
        case 'DECREMENT_BY':
            return state - action.payload;
        default:
            return state;
    };
};

You would quite often see switch/case instead of if/else-if which is why it has been used here instead, but it is up to you. All the reducer is responsible for is to apply the necessary changes to the current state and then returning the new state, which is the very behavior that is being tested here:

describe('test reducer', () => {

    it('should return 0 as initial state', () => {
        expect(reducer(undefined, {})).toEqual(0);
    });

    it('should handle INCREMENT_BY', () => {
        expect(
            reducer(0, {
                type: 'INCREMENT_BY',
                value: 2,
            })
        ).toEqual(2);

        expect(
            reducer(5, {
                type: 'INCREMENT_BY',
                value: 10,
            })
        ).toEqual(15);
    });

    it('should handle DECREMENT_BY', () => {
        expect(
            reducer(5, {
                type: 'DECREMENT_BY',
                value: 2,
            })
        ).toEqual(3);
    });

});

This test case is somewhat bigger than the previous test case, not because there is something special going on here but because there are 3 different tests. The first test checks if the initial state is returned as expected (which is 0) and then the second test is to check if the state is increased both when it is at 0, the initial state, or some other value. The third test case checks if a particular state value can be decremented.

In this test case in particular, however, we use the describe method, which helps to group up tests that can help us navigate the test output easily.

Testing Redux sagas

So far we have been looking at synchronous actions, once dispatched the state is immediately modified, but there are times when you have to perform an action asynchronously. Testing asynchronous actions are quite difficult which is why middleware like redux-saga, is very handy. Especially when it comes to testability.

Generally there for any action, there must be two stages which will eventually cause changes in the application:

The action begins
The action finishes successfully or fails

To not deviate from the article's focus, we will create a pseudo-saga and then take a look at how you could test it:

import { call } from 'redux-saga/effects'

const sum = (num1, num2) => num1 + num2

function *sumSaga() {
  let value = 0

  value = yield call(sum, value, 1)  
  value = yield call(sum, value, 2)

  yield value
}

The above saga will sum 2 numbers while pausing each time when it hits the yield keyword, then what is returned by that yield is assigned as the value. Finally, the saga yields the value itself.

it('sumSaga should yield the correct values', () => {
  const gen = sumSaga();
  let value = 0;

  expect(gen.next().value).toEqual(call(sumSaga, value, 1))
  expect(gen.next(1).value).toEqual(call(sumSaga, value, 2))
  expect(gen.next().value).toBeUndefined()

})

You would test a saga almost the same way you would while testing a normal function but sagas have this play/pause kind of behavior that you should take into account while testing. The process of testing a saga is simplified greatly due to the effects exposed via redux-saga, like call() for example.
This test case in particular tests if the sumSaga saga starts and then ends (when the value of the generator is undefined), all the while matching the expectations of what we think our value is.

PixelPlex: Your dream web development company

PixelPlex is a software development company that has been delivering outstanding web development services with over 150 custom projects delivered and 12 years of quality-assured industry experience. Whether it’s an exemplary B2B/B2C full-stack web application or a robust backend capable of handling large amounts of traffic, our team of skilled and experienced developers will come up with an optimal solution that perfectly captures your brand and it’s values.

Add a brand image here if possible

Take a look at our latest work at our website, to get a feel of the variety of products that we have delivered and what our clients say about us! Let us handle all the heavy-lifting, while you sit back and relax knowing that your project is in good hands.

Summary

That was a tough read! Now that you have finished reading the article you must know that:

✅ There are mainly 3 types of tests that you can write when it comes to Test-Driven Development, Unit tests, Integration tests, and Acceptance tests.

✅ Redux is a state management library that helps to make state management predictable and testable. Action creators and reducers in particular are testable.

✅ Redux-Saga is a middleware that promises to make asynchronous actions much easier to test and perform, as compared to its popular alternative Redux-Thunk.

Resources

Feel like reading more? Check these links out:

The PixelPlex Blog - Contains a lot of articles covering various topics.
The Jest docs - Covers a whole lot of topics regarding testing, and also contains a few guides to help you through your testing journey.
freeCodeCamp's introduction to testing - A long article by freeCodeCamp that holds your hand through the basics of testing.

Features I Wish I’d Known About ES6 & ES7

Alexei Dulub — Thu, 02 Jul 2020 08:42:23 +0000

Features I Wish I’d Known About ES6 & ES7

Many people consider JavaScript as the heart of dynamic web applications. and since it was created in 1997 by Brendan Eich. Over years especially after the EcmaScript standard JavaScript had severe and powerful changes including adding new features and fixing bugs or enhancing undesired behavior. In this article we will explore the new features added to JavaScript ES6 and ES7.

Historical Background

Oh wait a minute! What is ES6 and Who is responsible for developing and improving Javascript ?

Ecma and EcmaScript

As we mentioned earlier Javascript was originally created to live in the browser and make users life easier providing better user experience. After that Microsoft created its flavor of JavaScript to be used in their browser Internet Explorer.Thus, We needed a way to standardize the javaScript language and here Ecma International comes.

Ecma international is a standards organization that is responsible for making JavaScript specification and this specification is "EcmaScript". And in practice , the term “ javaScript” and “EcmaScript” are used interchangeably.

So What’s new ?

Now , let’s explore some of the most important and commonly used ES6 and ES7 features.

Let and Const
Arrow Functions
Default parameters
Destruction assignment
Class keyword
Generators
Promises
Array.prototype.includes (ES7)
Exponential operator (ES7)

Scopes and variables declaration (let & const)

Scope is where our variables live and are accessible in. Before ES6 JavaScript had only two types of scopes.

Global scope " when we declare variables outside functions."
Function scope

var x = 1;                                     // global Scope

function myFunction() {
    var x = 2;
    console.log("Inside function x is ", x);   // Function Scope
}

myFunction();                                 // Result : Inside function x is 2
console.log("In global scope x is ", x);      // Result : In global scope x is 1

In the previous example when we invoke the function (myFunction) we get x = 2 while in global x = 1 . because we have two different values of x depending on the scope of the variable.

Now, let's try another example:

var index = 5
for (var index = 0; index < 10; index++) {
    // Do some tasks
}
console.log(index);                          // Result : 10

This seems odd as we would expect index = 5 as we see in the previous example but instead we got 10 ! \
As we mentioned earlier that we have only two types of scopes. So when we declare something like counter in for loop it is still in the global scope and that’s why we had this unexpected result.

Let and const keywords

EcmaScript2015 or ES6 introduced new keywords let and const to declare variables and fix var problems. As these new keywords are block-scoped (a block is anything between { } ).

Let’s try the previous example using let

let index = 5;
for (let index = 0; index < 10; index++) {
    // Do some tasks
}
console.log(index);                       // Result : 5

Now we got index = 5 as expected as let inside the for loop ( blocked between { }) has nothing to do with let in the global scope.

Another useful keyword is const as it allows us to declare constant values (not meant to be changed).

const is also block-scoped same as let but the main difference between them is that const value can't be changed after assigning variable to a value.

const PI = 3.141592653589793;
PI = 3.14;   // this line will cause a TypeError

Note

Re-assigning variables with const keyword will cause error only if we assign a primitive value. But if we declare an object we can add new methods and properties to it. That is because when we declare a new object with const keyword we don’t store the whole object in the variable like primitive values instead we store a reference to this object. So it will cause an error only if we tried to change the reference to another object.

Now, let's see an example:

const obj1 = { name: "John Doe" };
obj1.age = 40;  // this is totally fine and age property will be added to obj1
console.log(obj1.age);   // result : 40
obj1 = { name: "Foo" };  // will cause a TypeError as we are changing the

Arrow Function

ES5 function statement:

const sumTwoNumbers = function (num1, num2) {
    return num1 + num2;
}

ES6 provides new elegant and shorter syntax for function statements called Arrow function.

const sumTwoNumbers = (num1, num2) => { return num1 + num2; }

And this could be shorter though, If the function has only one statement and returns a value we can remove the return keyword and the curly brackets. And this will give the same result as the previous example.

const sumTwoNumbers = (num1, num2) => num1 + num2;

In case we have only have one parameter we can remove the parentheses

const multiplyBy10 = num => num * 10;

Arrow Function and `this`

Arrow functions handle this in a different way from regular functions. In regular functions this keyword represented the object that called the function (the executer), which could be the window, the document, or whatever. While in the Arrow function this represents the object that defined the arrow function.

In short , in arrow function this represents the definition context while in regular function this represents the execution context.

Now let’s take a look at a couple of examples two show the difference between each of them:

function myFunction() {
    console.log(this);
}

const myArrowFunction = () => console.log(this);

myFunction();      // this =  the Window object "The global object";
myArrowFunction(); // this =  the Window object "The global object";

In this example both of the regular and arrow functions give the same thing and this refers to the global object. In the case of a browser the global object is Window.

But there is a big difference between them although they gave the same result. In regular function this is the Window object because the executor of the function is the global object aka Window. While in the Arrow function case this is the Window because the arrow function was defined in the global scope.

Now let’s take another example to demonstrate this:

We have html file with javascript file imported in it and a simple button

<!DOCTYPE html>
<html lang="en">
.
.
.
<body>
    <button id="btn">click</button>
    <script src="./index.js"></script>
</body>

</html>

In index.js

function fn() {
    console.log(this);
}

const btnElement = document.getElementById('btn');

btnElement.addEventListener('click', fn);

When clicking the button we will got this printed to the console and this will be:

<button id="btn">click</button>

Now let’s change fn function to an Arrow function and try again.

const fn = () => console.log(this);
const btnElement = document.getElementById('btn');

btnElement.addEventListener('click', fn);

When clicking the button we will get this printed to the console and this will be the Window object.

Explanation

In regular function this gets its meaning during runtime and refers to the object that executes it and this is the btnElement in our case.

In arrow function this gets its meaning from the definition context which is the global object and that’s why we get the Window object.

Default parameters

Another cool thing in the ES6 that default argument. If you are familiar with other programming languages you probably know what the default parameter is.

In short , it means that you can initialize a parameter with a default value if no value is passed when invoking the function. Let’s see an example to handle this before ES6.

// ES5 style for default parameters
function add(a, b) {
    var b = (typeof b !== 'undefined') ? b : 5
    return a + b
}
add(3, 4);    // result = 7      
add(1)       // result = 6

In the previous example we introduced ES5 technique for handling default parameters. As we know javascript initializes parameters with “undefined” at first. So we check if parameter b is undefined this means that he had no value in the invoking line and then we assign a default value ( b = 5).

Now let’s see the new ES6 way for handling the same situation:

function add(a, b = 5) {
    return a + b
}

add(3, 4);    // result = 7      
add(1)       // result = 6

This is very simple and straightforward syntax.

Note

Keep in mind to keep all default parameters to the right otherwise you won’t get the proper result.

// Don't do this 
function add(a = 4, b) {
    return a + b
}

add(1)       // result = NaN

// the right way 
function add(a, b = 4) {
    return a + b
}
add(1)       // result = 5

Destruction assignment

Destruction is unpacking properties from objects or array elements into distinct separate variables. Lets first explore array destruction.

let colors = ['one', 'two', 'three']

let [red, blue, yellow] = colors

console.log(red);      // one
console.log(blue);     // two 
console.log(yellow);   // three

In the previous example we first declared an array (colors) and then using destruction we extracted elements from this array into separate variables. The first variable “red” will match the first element in the array and so on.

This is a very simple and elegant way to extract variables from an array into separate variables.

Swapping values

Let’s try this approach to swap variables:

let a = 5;
let b = 10;

[a, b] = [b, a]

console.log(a);   // a = 10
console.log(b);   // b = 5

Now, let’s see object destruction:

const user = {
    id: 1,
    name: "Ali",
    age: "30"
}

// lets extract the user name only
const { name } = user

console.log(name);  // Ali

Using destruction and default values

const user = {
    id: 1,
    name: "Ali",
}

const { name, age = 55 } = user

console.log(age);  // 55

Object and array destruction is very handy and makes life easier especially when using it with extracting variables from an http request.

Class keyword

ES6 added class keyword and unlike other traditional object-oriented supporting languages like java or c++ ,class keyword in Javascript is just a Syntactic sugar. And under the hood it’s just a special function. Let’s try it out.

class abc {
    constructor(name, age) {
        this.name = name;
        this.age = age
    }
}

// ES5 same output
var abc = function abc(name, age) {
  this.name = name;
  this.age = age;
};

Generators

In a regular function we return only one value when invoking the function (or nothing). But with this new ES6 features we will be able to return more than one value from a function. On at a time.to create a generator function we need a special syntax so Let’s see an example:

function* numberGenerator() {
    yield 1;
    yield 2;
    return 3;
}

let generator = numberGenerator();

let one = generator.next();
let two = generator.next();
let last = generator.next();

console.log(one);    // { value: 1, done: false }
console.log(two);    // { value: 2, done: false }
console.log(last);   // { value: 3, done: true }

Promises

JavaScript is a single-threaded language supporting synchronous and asynchronous operations. And promises are just a more elegant way to deal with these asynchronous tasks than callbacks. And a very handy way to avoid callback hell.

A promise is an object representing the result of asynchronous tasks which are tasks that don’t block the execution until it is finished. This approach is great for time consuming tasks.

Let’s see a simple example:

let promise = new Promise(function(resolve, reject) {
  setTimeout(() => resolve("resolved!"), 1000);
});

// resolve runs the first function in .then
promise.then(
  result => alert(result), // shows "done!" after 1 second
  error => alert(error) // doesn't run
);

Array.prototype.includes

Although ES6 had many features and things to discuss but also ES7 introduced new features. Array.prototype.includes is a replacement for indexOf we use to check the presence of a value in an array.as indexOf had weird behavior as it returns a number and in case the element is not in the array it returns -1 .So we had to perform another check using the return number from indexOf. On the other hand includes is straightforward and returns boolean. Let’s see an example comparing these two alternatives.

let colors = ['red', 'white', 'black', 'blue']

// using indexOf 
console.log(colors.indexOf('red'));     // 0
console.log(colors.indexOf('purple'));  // -1

if (colors.indexOf('purple') === -1) {
    console.log("Not found");
}

// using includes 
console.log(colors.includes('red'));      // true
console.log(colors.includes('purple'));  // false

if (!colors.includes('purple')) {
    console.log("Not found");
}

Exponential operator

Let’s test one last ES7 feature for this article. In ES6 and earlier JS when it comes to exponential operators we had to work around to get the result as there wasn't an explicit operator. Let’s see how we would do this in ES6 syntax.

 let result = Math.pow(2, 3)

console.log(result)  // 8

We had to use the built-in method pow in Math object. Or we would make a function to get the same result. Now let’s see what it would be in ES7.

let a = 2 ** 3
let b = 3 ** 3
console.log(a === Math.pow(2, 3)) // true
console.log(b === Math.pow(3, 3)) // true

Very simple and easy to read as we see in other languages like python for instance.

Conclusion

JavaScript is becoming more popular over the years and it’s community is growing rapidly. We tried to cover some of the important features that ES6 and ES7 added to JS but there are more and more to learn.

How to Run Hyperledger Fabric on Azure

Alexei Dulub — Tue, 30 Jun 2020 19:47:00 +0000

How to Run Hyperledger Fabric on Azure

Deploying a blockchain is no doubt a tedious task. A lot of components need to be installed apart from Identity and role-based management implementations before realizing value out of such a network. However, Azure Blockchain service has reduced the workload, and it only takes a few clicks to install the Blockchain on Azure, thanks to the Microsoft Azure team.

It spares you the hard work of network-related management so that you can concentrate on business logic and scale to any level with built-in governance and codeless association management. You can also build Blockchain apps in the language of your choice.

Once your blockchain is ready, you will start receiving a lot of ledger data that can be collected off the chain for use later with the help of the blockchain data manager for an end-to-end solution.

Building Hyperledger Fabric blockchain from scratch is time-consuming while the Azure blockchain service takes heavy deployment tasks off your shoulders. This means all tasks related to creating the ordering service, peer organization, storing ledger data, and etc. are handled by Azure, so you can be up and running ASAP.

On Azure cloud, you can scale to any level, balance load as per demand, retrieve off-chain data and store in CosmosDB for later use, add any number of Peer organizations, and order services to the consortium.

Before jumping to implementation, there are a few facts to be known with regard to how Hyperledger-based platforms differ from other networks.

In terms of processes, in Hyperledger it’s execute, order, then validate instead of order, execute, then validate as it is for Bitcoin. Hyperledger does not have its own currency, although you can introduce assets that can be transacted by businesses over a secure network.

A non-Azure organization can also be a part of the network which is often the case when businesses don’t want to share their transactions due to privacy issues. For these purposes, a private network needs to be set up as a subset.

What a Hyperledger Fabric Setup Looks Like on Azure

A general HLF setup on Azure has different types of data from various sources fed to the transaction builder through an Azure IoT hub, and the service bus. The Transaction builder transforms the data into a format that’s readable by the ABS.

When a peer organization executes the transactions, the details are sent to other peers to add to their ledgers. The transaction is either rejected or endorsed. If a majority of peers endorses the transaction, the ordering service approves it, and vice versa.

Peers can endorse or commit or both, based on what privileges they can leverage, as they have details of the transactions in the ledger However, an ordering unit does not need this. A committer commits the transaction, whereas the ordering service can only approve the transaction, and not commit or endorse.

Need For A Membership Certificate Authority

This authority issues a certificate as well as the private and the public key to the units. The units broadcast using a public key, and they sign using their private keys. The certificate can either be self signed or issued by the organization.

What Is Traded?

Assets are traded instead of cryptocurrencies, however, bitcoin or any cryptocurrency can also be traded as assets. So a blockchain tracks the provenance and traces the structure allowing the global trade participants to systemize the trade. It enables trust, ensures data sharing, delivers seamless tie-ups, and offers intelligent decisions.

Further, it minimizes the risk involved due to analytical insights, predictive scenario sharing, and benchmarking. If any unusual incident occurs, it ensures efficient management thus minimizing the impact.

How to Install an ABS with HyperLedger Fabric

The Azure Blockchain Services can be accessed from Azure Marketplace. Further steps to be followed are described below.

Member Creation

The first step is to create a Member for which details like subscription, resource group & region followed by consortium details like Protocol & Member details like Member name have to be mentioned. The member can either be an ordering service or a certain peer organization. The ordering service will then be chosen followed by selection of the required number of nodes that will be allowed to ensure crash fault tolerance.
The second step is to prove the identity. For this, we need to enter the certificate which is the.pem file. Then either self-sign certificates or our organization-issued certificate can be used. Both options are available as.pem files
Following the validity check, the blockchain member node can be created. The deployment however takes 8 to 10 minutes.

After being created, the member will be displayed on the Azure blockchain services list from which it can then be selected. Details related to the Ordering service will be listed upon clicking the ordering service that was created earlier.

Following the above steps, a consortium needs to be developed with a peer organization using the templates being provided by Azure. A peer can be any customer who has the node and is looking to become part of the consortium.

Creating Hyperledger Fabric Over AKS

The template for hyperledger fabric on Azure Kubernetes Service (AKS) can be selected from the Blockchain tab on the Azure marketplace to create the Hyperledger Fabric over AKS.

On the first page, subscription,resource group details,region and resource prefix need to be entered. The prefix helps search for this peer later.
The fabric settings require the name of the organization and fabric type, followed by selecting peer node and the number of nodes. Then either Couchdb or leveldb will be selected, followed by the fabric CA name, and password confirmation. Finally, choice will be made between a self-signed certificate or one issued by your.
An AKS cluster needs to be created as an unmanaged service. However, the rest is done through cli, so we will not be discussing it here. The cluster size, VM for the cluster and the number of nodes need to be selected, followed by entering client id and client secret for authentication. The Kubernetes service monitoring can be enabled or disabled, after which you are good to go.

Following these actions, a managed ordering service and two unmanaged peer organizations over AKS are created to form the consortium unmanaged peers resource group, and all the other features, such as AKS Monitoring are enabled.

Note: Currently CLI is used for the above procedure, but soon this feature will be available through UI as well.

Building Consortium

After deploying the ordering service and the peer nodes, we need to set up the consortium, develop the channel, and install the chaincode. The following network script can be used here.

Note: The above procedure is for demo purposes only. For the production level, native HLF APIs need to be used.

The commands can be executed through Azure Bash CLI for running the ‘byn’ script. You can log in to the web version of the Azure shell using the blue button at the top right side of the portal. Use the following commands to switch to the bash cli for downloading the byn.sh and execute fabric-admin.yaml.

Curl"Your byn.sh url"; chmod 777 byn.sh
curl "Your fabric yaml file url" -o fabric-admin.yaml

On the Azure CLI Bash Shell, we will set up the environment for the channel and orderer:

SWITCH_TO_AKS_CLUSTER() { az aks get-credentials --resource-group $1 --name $2 --subscription $3; }
ORDERER_AKS_SUBSCRIP=<SubscriptionID of orderer>
ORDERER_AKS_RESRCE_GRP=<ResourceGroup of orderer cluster>
ORDERER_AKS_NME=<cluster name of orderer aks>
ORDERR_DNS_ZONE=<DNSZone of orderer>
ORDERER_END_POIN="orderer1.$ORDERR_DNS_ZONE:443"
CHANNEL_NME=<Name of channel>

The peer organization will be registered as follows:

PEER_AKS_RESRCE_GRP=<AKS Cluster Resource Group of peer>
PEER_AKS_NME=<Cluster Name of peer aks>
PEER_AKS_SUBSCRIP=<SubscriptionID of peer aks cluster>
#Remember that peer aks cluster name happens to be case sensitive.
PEER_ORG_NME=< name of peer Organization>

An Azure file will be created for sharing the public certificates between the orderer and peer organizations:

STORAGE_SUBSCRIP=<sub Id>
STORAGE_RESRCE_GRP=<azure File Share Resource Group>
STORAGE_ACNT=<azure Storage Account Name>
STORAGE_LOCTION=<azure Storage Account Location>
STORAGE_FLE_SHARE=<azure File Share Name>

az account set --subscription $STORAGE_SUBSCRIP
az group create -l $STORAGE_LOCTION -n $STORAGE_RESRCE_GRP
az storage account create -n $STORAGE_ACNT -g  $STORAGE_RESRCE_GRP -l $STORAGE_LOCTION --sku Standard_LRS
STORAGE_KEY=$(az storage account keys list --resource-group $STORAGE_RESRCE_GRP  --account-name $STORAGE_ACNT --query "[0].value" | tr -d '"')
az storage share create  --account-name $STORAGE_ACNT  --account-key $STORAGE_KEY  --name $STORAGE_FLE_SHARE
SAS_TOKEN=$(az storage account generate-sas --account-key $STORAGE_KEY --account-name $STORAGE_ACNT --expiry 2020-01-01 --https-only --permissions lruw --resource-types sco --services f | tr -d '"')
AZURE_FLE_CONNECTION_STRNG="https://$STORAGE_ACCOUNT.file.core.windows.net/$STORAGE_FILE_SHARE?$SAS_TOKEN"

Channel Management Commands

The command for generating a new channel will now be issued from the orderer organization AKS cluster:

SWITCH_TO_AKS_CLUSTER $ORDERER_AKS_RESRCE_GRP $ORDERER_AKS_NME $ORDERER_AKS_SUBSCRIP
./byn.sh createChannel "$CHANNEL_NME "

Consortium Management Commands

The following command needs to be executed for adding a peer organization to the channel and consortium. From the peer organization AKS cluster, add up the MSP on the Azure file Storage:

SWITCH_TO_AKS_CLUSTER $PEER_AKS_RESRCE_GRP $PEER_AKS_NME $PEER_AKS_SUBSCRIP
./byn.sh uploadOrgMSP "$AZURE_FLE_CONNECTION_STRNG"

From the orderer organization AKS cluster, the peer organization will be appended to the channel and the consortium:

SWITCH_TO_AKS_CLUSTER $ORDERER_AKS_RESRCE_GRP $ORDERER_AKS_NME $ORDERER_AKS_SUBSCRIP
# PEER IS BEING ADDED TO CONSORTIUM
./byn.sh addPeerInConsortium "$PEER_ORG_NME" "$AZURE_FLE_CONNECTION_STRNG"
# peer is being added to channel
./byn.sh addPeerInChannel "$PEER_ORG_NME" "$CHANNEL_NME" "$AZURE_FLE_CONNECTION_STRNG"

SWITCH_TO_AKS_CLUSTER $PEER_AKS_RESRCE_GRP $PEER_AKS_NME $PEER_AKS_SUBSCRIP
./byn.sh joinNodesInChannel "$CHANNEL_NME" "$ORDERER_END_POIN" "$AZURE_FLE_CONNECTION_STRNG"

By updating the peer AKS environment variables as per the needs of peer organization, more peers can be added to the channel.

Chaincode Management Commands

Following commands are executed for performing chaincode related operations on the demo chaincode.

The demo chaincode consists of two variables A and B, where A is initialized with 1000, and B with 2000. On each chaincode invocation, 10 units are transferred to B from A. The query operation on chaincode explains the world state of the variable A, and these commands will be run on the AKS cluster of the peer organization:

# We need to move to peer organization aks cluster. Please skip this command if you are already connected to the peer aks cluster
SWITCH_TO_AKS_CLUSTER $PEER_AKS_RESRCE_GRP $PEER_AKS_NME $PEER_AKS_SUBSCRIP

# This is operation command for chain node
PEER_NODE_NME="peer<pr#>"
./byn.sh install Demo Chaincode "$PEER NODE_NME"
./byn.sh instantiate Demo Chaincode "$PEER_NODE_NME" "$CHANNEL_NME" "$ORDERER_END_POIN" "$AZURE_FLE_CONNECTION_STRNG"
./byn.sh invoke Demo Chain code "$PEER_NODE_NME" "$CHANNEL_NME" "$ORDERER_END_POIN" "$AZURE_FLE_CONNECTION_STRNG"
./byn.sh query Demo Chain code "$PEER_NODE_NME" "$CHANNEL_NME"

Conclusion

This article explains how to set up Hyperledger Fabric on Azure and the steps required to carry out the necessary operations:

Create a member in ABS.
Create an HLF as a managed ordering service, and unmanaged peer organization.
Create a consortium and channel between them.
Add peers and ordering services to the channels and build a consortium.
Operate the chaincode, commit the transaction, and check their validity.

This whole process was carried out through CLI. Performing the same tasks will soon be available using plain UI to make it easier for the non-technical folks.

How to Stage Managed Blockchain Networks on AWS

Alexei Dulub — Mon, 29 Jun 2020 11:31:40 +0000

For an example of how to create a managed blockchain network on AWS, we’ve decided to build a basic instance for an NGO-type company and use Hyperledger Fabric (HLF).

For building the blockchain network, a blend of AWS CloudFormation, AWS CLI, and AWS Console will be used. We will be provisioning a cloud9 instance with the Linux terminal over it. Following that, we will set up the AWS CloudFormation template for developing an HLF network.

After that we’ll set up one peer node on the Ambrosus (AMB) chain. From the Cloud9 Itself, an AWS CloudFormation template will be run as a Virtual Private Cloud, which will be an HLF client node. It will then be used for administering the HLF network.

Starting with the Fabric client node, we will form a Fabric channel, followed by installing and instantiating the chaincode which is the smart contract, and then querying and invoking the transactions over the HLF network that will be created.

Prerequisites

AWS Cloud9 will be utilized for making use of the Linux terminal with pre-installed AWS CLI. Follow these steps to prepare for creating the HLF instance:
✅ Select a Cloud9 IDE in the Console
✅ Click ‘create environment’ to start setting it up
✅ Choose the region based on where you're located
✅ Name the Environment as ‘NGO-Fabric’
✅ Choose other instance type and pick t2.medium
✅ Click on ‘create environment’.

Within 30 to 60 seconds, Cloud9 IDE will be ready and you can clone the repo from the home directory:

cd ~
git clone “git url of ngo fabric”

Also, don’t forget to update your AWS CLI by using the sudo command and pip install.

Stage 1. Creating an HLF Network

Cloud9 is used for creating the HLF network from the CloudFormation template. Here’s what you need to do in the Cloud9 terminal:

export REGION=us-west-2-lax-1a
export STACKNAME=NGO-amb
cd ~" URL for amb.sh"

Now, the cloudFormation template takes in quite a few parameters. Each of these bear a value by default, however, for this article, they are being overridden in amb.sh script. By default, the template creates an HLF Fabric network that has one peer node. However, this is not good for the production network as that necessitates a standard HLF network with a lot of peer nodes that are being spread over the AZs.

Stage 2. Establishing Network Availability

After the HLF network has been shaped, we need to check its availability status. It may take quite a while to create the network, so in the meantime, let’s prepare for the upcoming steps.

The network status can be checked in two locations:

AWS CloudFormation Console. Search for the possessions for the stack. You also need to wait for the peer node to show the state of ‘CREATE_COMPLETE’
AMB Console. You need to wait for the member and network, and the peer node of the member to show availability status. Once you find that the AMB network is up and running you are set for creating the HLF node.

Stage 3. Creating an HLF Client Node

The HLF client node needs to be formed to host the HLF CLI. This CLI will administer the HLF network. The HLF client node will be formed in the VPC within AWS Account, and the endpoint of the VPC will point to the HLF Network that was made during Stage1.

The AWS CloudFormation will create the HLF client node through our codes and the VPC as well as its endpoints. The template of CloudFormation asks AWS for quite a bit of parameters. The script triggered below will ensure that all these export variables are ready before you call the CloudFormation:

export REGION=us-west-2-lax-1a
cd "URL OF clientnode.sh file of vpc”

Following the above steps, the progress of AWS CloudFormation console needs to be monitored. After the Stack status shows a green signal, the required information can be found in the CloudFormation stack’s outputs tab. Keep a hold of this, as we’ll be using this information later on.

Stage 4. Registering Identity for the HLF Client Node

Before executing any command in the HLF client node, you have to carry across ENV variables to provide the HLF context. These define the HLF network client node identity, which peer nodes it will be able to communicate with, as well as the TLS certificates that will be used.

Using the Cloud9 terminal, connect to your HLF network instance with the keypair (.PEM file) located in the root directory. Take the EC2 instance DNS from the CloudFormation stack output we generated in stage3.

cd ~
ssh “user of ec2”@<EC2 instance dns> -i ~/<HLF network name>-keypair.pem

Next step is to clone the repository:

git clone "your ngo blockchain git URL"

From now onwards you need to refer to diverse configuration standards for the HLF network. Source the folder having the ENV export standards with the context of the HLF network and apply them to the current setting.

export REGION=us-west-2-lax-1a
cd ~”url of ngo fabric directory”
cp “we need to copy the template here, paste original template directory and then available template directory”
source “Paste available template file here”
source ~”Paste peer export template file here”

By sourcing the files, two things are ensured. Completing the export of required ENV variables, and creating an additional file that has all the export standards required while working with an HLF peer node. You can find this in the ~/peer-exports.sh file, which is being sourced as well here

Next check whether the source worked. The values for each of the ENV variables mentioned below must be visible.

$ echo $PEERSRVICEENDPOINT
“the variable”
$ echo $M_S_P
“the variable”

Check if the peer export folder exists and whether it has the values for the export keys as shown below:

cat ~”peer export file”

Further the latest version of AMB PEM file needs to be overwritten and replaced with the file that is in the root directory.

AWS s3 cp “pem file url”

Next an administrator identity will be registered through the HLF CA for administering the HLF network as well as for performing the tasks like producing channels and initializing the chaincode.

export PATH=$path of bin of fabric-ca
cd ~
fabric-ca-client enroll -u “CA service endpoint URL” –“AMB pem URL” -M “Administrator MSP file path”

You also need to make some concluding replication of the certs.

mkdir -p “Admin certs of Admin MSP file path”
cp ~ “ sign certs file path of admin msp” “admin certs file path of admin msp”
cd ~”file path of ngo fabric”

Stage 5. Updating the Configuration of Configtx Channel

Over the HLF client node, the configuration of the configtx channel needs to be updated along with the Name and the ID fields and changed to the Managed Blockchain member ID.

”file path of configtx.yaml file” ~
sed -i "s|__MMBERID__|$MMBERID|g" ~/configtx.yaml

The succeeding script will now be executed to create the configtx channel arrangement. After the channel is created, the genesis chunk or the chunk 0 will be the channel arrangement for this channel.

docker exec cli configtxgen -outputCreateChannelTx /opt/home/$CHANNEL.pb -profile OneOrgChannel -channelID $CHANNEL --configPath /opt/home/

The details will be found in the output. You need to check whether the channel configuration is generated or not. This can be checked via:

ls -lt ~/$CHANNEL.pb

Stage 6. Creating the HLF Channel

Over the HLF client node an HLF Channel will be created through execution of the following code:

docker exec -e "Set TLS enabled for Core Peer to true” -e "Provide TLS Root certificate file path of Core Peer =”AMB file path " \
    -e "CORE_PEER_ADDRESS=$PEERAD" -e "CORE_PEER_LOCALMSPID=$M_S_P" -e "CORE_PEER_MSPCONFIGPATH=$M_S_P_PATH" \
    cli peer channel join -b $CHANNEL.block  -o $ORDERR --cafile $CAFLE --tls

The above step will lead to creating the mychannel.block in the CLI container directory. This directory mounts the beginning for the host HLF client node. So now we will be able to view the chunk file:

ls -lt “file path of Peer under fabric”

Executing the following command will enable the user to read the channel configuration and to prevent genesis chunks in the very directory as was discussed before.

docker exec -e "Set TLS enabled for Core Peer to true -e "Provide TLS Root certificate file path of Core Peer”=”pem file path "  \
    -e "CORE_PEER_ADDRESS=$PEERAD"  -e "CORE_PEER_LOCALMSPID=$M_S_P" -e "CORE_PEER_MSPCONFIGPATH=$M_S_P_PATH" \
    cli peer channel fetch oldest “fabric file path”-“peer file path”/$CHANNEL.block \
    -c $CHANNEL -o $ORDERR --cafile “AMB pem file path”--tls

You can check for file chunks as follows:

ls -lt “file path of peer under fabric”

Stage 7. Adding the Peer Node to the Channel

From the HLF Client Node,the PEER will now be joined to the HLF Channel by executing the following code:

docker exec -e "Set TLS enabled for Core Peer to true” -e "Provide TLS Root certificate file path of Core Peer =”AMB file path " \
    -e "CORE_PEER_ADDRESS=$PEERAD" -e "CORE_PEER_LOCALMSPID=$M_S_P" -e "CORE_PEER_MSPCONFIGPATH=$M_S_P_PATH" \
    cli peer channel join -b $CHANNEL.block  -o $ORDERR --cafile $CAFLE --tls

The displayed output will need to be noted down as it is used later on.

Stage 8. Installing Chaincode on the Peer Node

While remaining on the HLF client node, the chaincode will now be installed on the HLF peer by executing the following code:

docker exec -e "Set TLS enabled for Core Peer to true” -e "Provide TLS Root certificate file path of Core Peer =”AMB PEM file path " \
    -e "CORE_PEER_ADDRESS=$PEERAD" -e "CORE_PEER_LOCALMSPID=$M_S_P" -e "CORE_PEER_MSPCONFIGPATH=$M_S_P_PATH" \
    cli peer chaincode install -n $CHAINCODENME -v $CHAINCODEVRSION -p $CHAINCODED_I_R

The displayed output will need to be noted down as it is used later on.

Stage 9. Installing Chaincode Over the Channel

From the HLF client node, the chaincode will now be instantiated on the HLF Channel by executing the code below. The process takes up to 30 seconds.

docker exec -e "Set TLS enabled for Core Peer to true -e "Provide TLS Root certificate file path of Core Peer =”AMB PEM File path " \
    -e "CORE_PEER_ADDRESS=$PEERAD" -e "CORE_PEER_LOCALMSPID=$M_S_P" -e "CORE_PEER_MSPCONFIGPATH=$M_S_P_PATH" \
    cli peer chaincode instantiate -o $ORDERR -C $CHANNEL -n $CHAINCODENME -v $CHAINCODEVERSION \
    -c '{"Args":["init","a","200","b","300"]}' --cafile $CAFILE --tls

The displayed output will need to be noted down as it is used later on.

Stage 10. Calling the Chaincode

Now from the HLF client node, the chaincode will be enquired in the HLF peer by executing the following code:

docker exec -e "Set TLS enabled for Core Peer to true -e "Provide TLS Root certificate file path of Core Peer =”AMB file path " \
    -e "CORE_PEER_ADDRESS=$PEERAD" -e "CORE_PEER_LOCALMSPID=$M_S_P" -e "CORE_PEER_MSPCONFIGPATH=$M_S_P_PATH" \
    cli peer chaincode query -C $CHANNEL -n $CHAINCODENME -c '{"Args":["query","a"]}

The output here should be 200.

Stage 11. Invoking A Transaction

While on the HLF fabric node, the fabric transaction will now be invoked by executing the following code.

docker exec -e "Set TLS enabled for Core Peer to true -e "Provide TLS Root certificate file path of Core Peer =”AMB PEM File” \
    -e "CORE_PEER_ADDRESS=$PEERAD" -e "CORE_PEER_LOCALMSPID=$M_S_P" -e "CORE_PEER_MSPCONFIGPATH=$M_S_P_PATH" \
    cli peer chaincode invoke -o $ORDERR -C $CHANNEL -n $CHAINCODENME \
    -c '{"Args":["invoke","a","b","100"]}' --cafile $CAFILE --tls

The displayed output will need to be noted down as it is used later on.

Stage 12. Enquire the Chaincode Once More and Crisscross the Modification in Value

At the HLF client node, the altered values need to be checked by querying the HLF Peer. This will ensure execution of the transaction that was invoked. You need to wait at least two seconds between after invoking the transaction before making queries. Execute the code for the query below:

docker exec -e "Set TLS enabled for Core Peer to true -e "Provide TLS Root certificate file path of Core Peer =”AMB PEM file path " \
    -e "CORE_PEER_ADDRESS=$PEERAD" -e "CORE_PEER_LOCALMSPID=$M_S_P" -e "CORE_PEER_MSPCONFIGPATH=$M_S_P_PATH" \
    cli peer chaincode query -C $CHANNEL -n $CHAINCODENME -c '{"Args":["query","a"]}'

The output here should be 100.

Since ‘A’ sent 100 to ‘B’, therefore 100 remains with A (previously holding 200). This proves that the Hyperledger network was successfully created and that it can serve any organization. It is now an AWS managed blockchain network.

To finalize implementation and enable the network to be applied for NGOs, take the additional steps below:

Create an NGO chaincode
Execute the server (RESTful API)
Execute the Application
Further add new members to the web
Do the reading and writing into the blockchain by the help of Amazon API gateway as well as AWS Lambda
Finally, make use of the blockchain events for notifying the users about the donations received by the NGO.

Conclusion

Our created HLF instance is a managed Blockchain network to be used for an NGO for decentralized data storage and executing transactions. Following the example, an AWS-based managed blockchain network can be created for any type organization with Hyperledger. Feel free to drop us a line if you have any questions or need assistance in porting your blockchain network to AWS.

Creating a Very Simple Sentiment Analysis Model in Python

Alexei Dulub — Thu, 18 Jun 2020 22:05:45 +0000

Intro

Machine Learning is a very popular buzz word these days, and today we are going to focus on a little corner of the Behemoth we know as ML. That little corner is Natural Language Processing, but even that little corner of ML is still too big so we will focus on a little corner of NLP known as Sentiment Analysis. What this area of focus intends to accomplish is attempting to determine the emotions behind a natural language sentence (i.e. the way you and I speak versus the languages and grammars a machine can actually make sense of). In this article we will be exploring the process behind creating our very own sentiment analyzer as well as seeing how it can be incorporated into an existing application.

Getting Started

As previously mentioned we will be doing sentiment analysis, but more mysteriously we will be adding the functionality it an existing application. I have made a very simple GUI using Python and tkinter to make a text field that responds when the user presses enter. You can clone the repo as follows:

git clone https://github.com/alexei-dulub/sentiment_model.git

This repo only contains one file, but you can run it with the following:

python3 app.py

This should open the GUI window barring that your OS doesn't have any weird issues with tkinter and tcl/tk like it did for me on macOS. You can see that you can type in the text field, and once you press enter you will see the :l change to a :(. However, this is the only time it will happen. Looking at the code you can see that this is what we bind'ed the enter action to do:

def change_emote(self, event):
    self.emote['text'] = self.negative

self.master.bind('<Return>', self.change_emote)

Our focus today will be on giving this change_emote() function more life by making a sentiment analyzer, and then using said analyzer to "read" what we put in the text box. Then we will pass our input to our analyzer, have a result returned (i.e. "Negative" or "Positive"), and we will change the emote accordingly. Let's dive in!

It's All About the Datasets

Probably the most pythonic thing we will do in this article is Stand on the Shoulders of Giants because our analyzer is almost exclusively built using the Natural Language Tool Kit or nltk module. And the biggest help it probably offers us it the collection of data so that we do not have to collect and sort through all of this ourselves. We will, however, have to clean it up as we see fit, and train the model so let's get started, shall we?

We will begin by getting nltk if you do not already have it installed:

python3 -m pip install nltk

Then we will need to download some additional things. Since they offer so many datasets, grammars, and models it would be too large of a download for a module and probably too much for the average user. So, the people behind nltk have so kindly made it modular. This means we will need to run the following in an interactive python session:

>>> import nltk
>>> nltk.download('punkt')
>>> nltk.download('wordnet')
>>> nltk.download('stopwords')
>>> nltk.download('twitter_samples')
>>> nltk.download('averaged_perceptron_tagger')
>>> quit()

This should be enough to get us started on making our sentiment analyzer. Now, I know that imports don't come to you right away when you sit down to write something, but today they do. Reference the following when we start to introduce new functions:

import random
from nltk import classify, pos_tag
from nltk.tokenize import word_tokenize
from nltk.corpus import stopwords
from nltk.corpus import twitter_samples
from nltk.stem.wordnet import WordNetLemmatizer
from nltk.classify.naivebayes import NaiveBayesClassifier

Now that we don't have to worry about where things are coming from (this is my least favorite part of looking at others' code snippets) we can begin collecting the data:

positive = twitter_samples.strings('positive_tweets.json')
negative = twitter_samples.strings('negative_tweets.json')
stop_words = list(set(stopwords.words('english')))

We start of by making sure we didn't waste our time in the interactive python session by using the twitter samples right away as well as the stopwords we gathered also. Stop words, you might be wondering, are basically anything we want to filter out which in our case are things that do not really present us with any sentiment. Words such as "the" or "a" or "an" or "this" and countless others along those lines. Fortunately for us we did not have to make this list and we can move on.

Cleaning the Data

If you were to take a peek at the data we have so far by doing something like...

print(positive[0])

...it would definitely look like a tweet, but I am sure that there are some things in there that we could get rid of as well as some things that we should add to this data. First we will tokenize our data as follows:

positive_tokens = twitter_samples.tokenized('positive_tweets.json')
negative_tokens = twitter_samples.tokenized('negative_tweets.json')

This can replace the previous lines about twitter_samples.

Feel free to peek at this one as well as anything else moving forward, but what we have done here is taken the strings from the tweets and tokenized them meaning that now we have an array of arrays of strings that are individual words so this...

'#FollowFriday @France_Inte @PKuchly57 @Milipol_Paris for being top engaged members in my community this week :)'

...turns into this...

['#FollowFriday', '@France_Inte', '@PKuchly57', '@Milipol_Paris', 'for', 'being', 'top', 'engaged', 'members', 'in', 'my', 'community', 'this', 'week', ':)']

This allows for us to actually get started on cleaning up the data, and we love functions here so let's make one!

def clean(tokens):
    tokens = [x for x in tokens if not x in stop_words]

    l = WordNetLemmatizer()
    lemmatized = []

    for word, tag in pos_tag(tokens):
        if tag.startswith('NN'):
            pos = 'n'
        elif tag.startswith('VB'):
            pos = 'v'
        else:
            pos = 'a'
        lemmatized.append(l.lemmatize(word, pos))
    return lemmatized

There is a bit going on here, but there are three main things to point our here. The first being:

tokens = [x for x in tokens if not x in stop_words]

Here you can see we are finally making use of our stopwords, and we do so by using this python comprehension to remove any of them that may appear in our tokens passed to our clean() function. Next is the use of the WordNetLemmatizer which allows us to clean up individual words themselves by lemmatizing them. Lemmatization allows us to only have to look at the roots of words instead of trying to figure out a case for every possible variation of a word. An example being "birds" changing to "bird" and "cries" changing to "cry" and so on. This way if we look at "cries" or "crying" or "cried" it is all looked at as the same root of "cry." Lastly, we are determining the part of speech of each token in its given sentence, and this will be used for several things (not necessarily directly by us) such as by the lemmatizer. Having the part of speech is just all around great to have when doing NLP. Now we can make use of our new function:

positive_clean = []
negative_clean = []

for token in positive_tokens:
    positive_clean.append(clean(token))

for token in negative_tokens:
    negative_clean.append(clean(token))

After scrubbing our tokens clean of any unwanted noise we can begin to pack up our data into a format that will be conducive to handing over to an algorithm for training.

def final_token_generator(tokens):
    for tokens in tokens:
        yield dict([token, True] for token in tokens)

positive_model_tokens = final_token_generator(positive_clean)
negative_model_tokens = final_token_generator(negative_clean)

Curious as to what this function is even doing? Read more here.

Our Model's Genesis

Before we can hand over our data to the algorithm we use we must give it a little more labeling:

 positive_dataset = [(token, "Positive") for token in positive_model_tokens]
negative_dataset = [(token, "Negative") for token in negative_model_tokens]

This will allow the algorithm during training and testing how well it is doing (and don't we all love feedback?) And speaking of training and testing let's do just that by splitting up our data into two different datasets:

dataset = positive_dataset + negative_dataset

random.shuffle(dataset)
random.shuffle(dataset)
random.shuffle(dataset)

training = dataset[:7000]
testing = dataset[7000:]

All we did here was concatenate the two datasets, shuffled them around a few times so make sure there is at least a random distribution of both positive and negative throughout, and then finally split them evenly so each has 7000 tokens, cleaned and labeled. Now comes the machine learning:

classifier = NaiveBayesClassifier.train(training)

Yep, isn't python wild? We can see how our model looks by using the following lines:

print("Accuracy:", classify.accuracy(classifier, testing))
print(classifier.show_most_informative_features(10))

This will give you a little insight into our model. Try changing the times you shuffle or whether or not you remove stop words and see how this output gets affected. Like I mentioned, this is just a very simple example on how to make a model for sentiment analysis, and there is a myriad of ways we can change and improve this model made today. But what is the use of a model if you can do things with it?

def analyze(input):
    custom_tokens = clean(word_tokenize(input))
    return classifier.classify(dict([token, True] for token in custom_tokens))

This is what we will be using in our app.py to determine the sentiment of a sentence. First we clean the input, and then we run it through the classifier which will either return a string containing "Positive" or "Negative". Going back to that app.py the change_emote() function looks like this:

def change_emote(self, event):
    result = self.analyzer.analyze(self.text_field.get())
    if result == 'Positive':
        self.emote['text'] = self.positive
    elif result == 'Negative':
        self.emote['text'] = self.negative
    else:
        self.emote['text'] = self.neutral

You should now be able to run the app file and (eventually) get the GUI where it should change the emote according to the sentiment of your sentence entered.

Conclusion

Today we looked at how to use nltk to gather data, clean it, and then apply the formatted data to a Naive Bayes Classifier, and while we did not cover what that does necessarily since it is out of the scope of this article and you can probably find far better resources on it than myself. Nonetheless we were able to make use of it, and then turn around and apply a model we made to increase the functionality of a GUI. Isn't that exciting! This is still a very simple model, but I hope you are feeling inspired to play around with it, and see how you can improve it (e.g. there is no classification for neutral sentiment). Maybe see what other classifiers are out there for this or see if you can improve load times or even different datasets to work from. There are so many possibilities, and I thank you for your time viewing this article.

The final code can be found here also feel free to read our chatbot architecture article.

Making a Simple Game using HTML Canvas and JavaScript

Alexei Dulub — Thu, 11 Jun 2020 07:53:44 +0000

Intro

Today we are going to take a look at how to use HTML5 Canvas and JavaScript to make a simple game that I made up. Now, I am sure this is not a totally original game by any means, but it is simple and straightforward. The basics of the game are that you have an undirected graph of nodes. One node starts with all of the values (let’s say they are sour cherry candies -- it's totally arbitrary) and we need to distribute all of the candies evenly to each node of the graph. For example if we have 8 nodes and 16 candies we will need to ensure that each node will receive two candies each.

Getting Started

I have taken the liberty of making some starting code for you so that we don’t have to work on all of the smallest details, and we can get to making a game faster on my github.

git clone https://github.com/alexei-dulub/canvas_demo_starter.git

We will be using http-server to help us serve our files. If you don’t already have it you can use the following to install it:

npm install http-server -g

Note: if you don't have npm either you can find out how here.

This will install everything necessary. Now to get it running you can simply run

http-server -p 80

You should now be able to connect to localhost in your browser which should be displaying the infamous ‘hello world’

But wait… what does this do?

Glad you asked. Let’s start from the foundation of everything -- the HTML.

<!DOCTYPE html>
 <html>
     <body>
        <script type='module' src='game.js'></script>
     </body>
 </html>

Here we can see we have a very simple HTML skeleton that really only has one import line:

<script type='module' src='game.js'></script>

This line allows the web page to use the scripts we will be writing throughout the rest of this tutorial. Shall we look at those now? Let's start with the game.js file since it is the one we call to in the HTML:

 import { Logic } from './Logic.js'

 const l = new Logic()

All this file is doing is kicking off the logic of our program by using ES6 imports so that we can create a new instance of the Logic class. We will look at what that means here in a second, but yeah, we could have done this in the Logic.js file imported here; however, if we had a more complicated usecase it is a good idea to separate our setup and our core game logic. So, let's see what we are importing here:

 export class Logic {
     constructor() {
        this.lastUpdate = performance.now()

        this.updateRate = 32

        this.canvas = document.createElement('canvas')
        this.ctx = this.canvas.getContext('2d')
        this.canvas.width = window.innerWidth
        this.canvas.height = window.innerHeight

        this.update = this.update.bind(this)

        document.body.insertBefore(this.canvas, document.body.childNodes[0])
        this.rAF = requestAnimationFrame(this.update)
     }

     update() {
        if (this.lastUpdate < performance.now() - this.updateRate) {
        this.lastUpdate = performance.now()

        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
        this.ctx.font = '90px Arial'
        this.ctx.fillStyle = 'black'
        this.ctx.fillText('hello world', 0, 90)
        }
        this.rAF = requestAnimationFrame(this.update)
     }
 }

Note: this.update = this.update.bind(this) allows us to call this inside of update()

Here first thing you can see is that we are exporting this class. This is what allows us to import it as we saw was the case in game.js. Next we have the constructor() function which goes all of the initialization of the game logic to run. What is really to note is the following line:

this.canvas = document.createElement('canvas')
this.ctx = this.canvas.getContext('2d')
this.canvas.width = window.innerWidth
this.canvas.height = window.innerHeight

What we are seeing in these few lines is firstly the creation of the HTML5 Canvas we will be using as our art medium for the duration of this tutorial (and if I have done my part properly for time to come). If you recall there was no <canvas> tag in the HTML we made. That's because we made it here!

Next you will see that we are making use of our newly created canvas to getContext and said context will be 2 dimensional. The '2d' part isn't important right now, but I'm sure you can probably guess what it's doing. Then we make use of some built-in JavaScript attributes by setting canvas width and height to that of our browser window.

Note: we will not be covering resizing here so make sure that you reload if your canvas ever looks funny.

Lastly we need to insert the new element into the HTML and we do so with the following:

document.body.insertBefore(this.canvas, document.body.childNodes[0])

Now that we have a canvas to play with we can start to examine how we are able to print 'Hello PixelPlex' to the canvas.

update() {
    if (this.lastUpdate < performance.now() - this.updateRate) {
    this.lastUpdate = performance.now()

    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
    this.ctx.font = '90px Arial'
    this.ctx.fillStyle = 'black'
    this.ctx.fillText('Hello PixelPlex', 0, 90)
    }
    this.rAF = requestAnimationFrame(this.update)
}

This update() function is the proverbial heart of our logic as it is what pumps life into any sort of games or animations we create on canvas. While the game we are making today doesn't have a lot of animation (none really) that can easily be changed since we have already given our game this loop.

What is happening here is we have an if statement that is checking whether it is time for the script to have canvas render all of the things we want to render. This is how we can manager the smoothness and timing of things in canvas and you can just think of it for now as our 'frames per second.' So, when the statement evaluates to true is when we can render new stuff. This is when the canvas tutorial really begins!

this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
this.ctx.font = '90px Arial'
this.ctx.fillStyle = 'black'
this.ctx.fillText('hello PixelPlex', 0, 90)

Let's start by addressing that we are using the context we got earlier in the constructor to do our work. Any changes you want to make to the canvas are really done to its context and not to the canvas directly. And you can see that the first thing we are doing is clearing a rectangle starting at the points (0, 0) and the size of it is the same size as the canvas. In other words we cleared the entire screen. This is very important as canvas does not do this for you. If you neglect this line you will notice lots of overlap of elements and things especially when you make more complex things.

The next few lines are more straightforward. You can see we are setting the font and then the fillStyle (which really just means what color you want to fill with), and the lastly we use the fillText function that is given what the text will be as well as an (x, y) to place the bottom left corner of the text. Notice the bolding there. Placing things in canvas is an art and it will be confusing at first when you use this function but it might not be showing up. That could be because of which part canvas uses of the text to place at your desired (x, y) so just be wary.

The last thing to cover before we can get started is the last line we see in our update() function:

this.rAF = requestAnimationFrame(this.update)

The sharp of sight out there may notice that this line does not only come from the update() function, but also the constructor() as well... The reason we find it in the constructor() is because what this line does is start the entire loop process. That is why we pass is the this.update since we are wanting to use that function for each animation frame. This is also the same reason it is call every time at the end of the update() function (regardless of the evaluation of the if statement). We call it an animation loop and it can't be a loop if it doesn't loop, right? Basically we need to call the update() function at the end of the update() function so that it is called over and over again until the end of time or we leave the page. All of that combined is what gives us that foundation of a game using HTML Canvas!

Now... that was a lot if you have never done any of that and are still with me. Pat yourself on the back, and take a quick break by playing around with some of the values in either the update() (e.g. play around with where the text is rendered or what it says or what color it is!) and maybe play around with something in the constructor (e.g. what happens if you change the updateRate higher or lower?). Try some of those things out, and I will see you in the second half of the tutorial!

We'll Start Making a Game Now, I Promise

As a recap we are working on making a game that involves distributing value amongst a set of nodes (in our case 8). The nodes are connected to make an undirected graph meaning that the value can flow from either connected node. So, let's start by getting some nodes on our canvas, shall we?

export class Node {
    constructor(ctx, x, y) {
        this.ctx = ctx
        this.x = x
        this.y = y
        this.fill = 'red'
        this.size = 50
    }

    draw() {
        this.ctx.fillStyle = this.fill
        this.ctx.beginPath()
        this.ctx.rect(this.x, this.y, this.size, this.size)
        this.ctx.fill()
    }
}

We will start by making a new Node class to use. This class will serve as a place for us to implement any functionality we want the nodes to have later on. We see familiar elements such as the constructor() but something that is a little different here is the draw() function. This is what is to be called inside of the update() function in our animation loop. draw() is where we define how we want the node to look, and if we want that look to be dynamic we use lots of variables and calls to attributes of this so as a Node instance changes it will be reflected every time a new frame is rendered. In our draw we are drawing a red rectangle. The process is similar to drawing the 'hello world' from earlier. Since this is supposed to be called in the update() function of our Logic let's add that now.

update() {
    if (this.lastUpdate < performance.now() - this.updateRate) {
        this.lastUpdate = performance.now()

        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)

        let node = new Node(this.ctx, 200, 200)
        node.draw()
    }
    this.rAF = requestAnimationFrame(this.update);
}

The update() function in Logic.js has replaced the text with making a new Node instance and then calling that instance's draw() function. Now we should see one singular node (red rectangle) at (200, 200). But we need 7 more nodes in order to make our graph, so let's change that.

import { Node } from './Node.js'

constructor() {
    ...;

    this.nodes = []    

    ...;

    this.makeGraph()

    ...;
}

makeGraph() {
    for(let x = 0; x < 8; x++) {
        this.nodes.push(new Node(this.ctx, 100*x, 100))
    }
}

Note: Only the changes to the constructor() are show in the snippet above.

In the constructor() we have added a new nodes attribute for the Logic to keep track of, and then we made a new function which gets called after the creation of the array. In makeGraph() we are using a for loop to add 8 nodes to the array using the counter to change each one's location for visual verification (we can see them all).
Now we can change the drawing of one node to draw all eight of our freshly made nodes as follows:

update() {
    ...;

    this.nodes.forEach(node => {
        node.draw()
        return
    })

    ...;
}

Remeber the Unit Circle?

So, I won't quizzing on the Unit Circle per se, but we will be dusting off some trigonometry and using JavaScript's built in Math library. The formation we have for the nodes right now is all fine and dandy, but it wouldn't really make for a good graph so lets work on arranging the nodes in a circle so we can make some cool patterns later on.

makeGraph() {
    let x = this.canvas.width/2
    let y = this.canvas.height/2
    let angle = 360/8
    for(let i = 1; i <= 8; i++) {
        let nX = x + this.radius * Math.cos((angle*i)*Math.PI/180)
        let nY = y + this.radius * Math.sin((angle*i)*Math.PI/180)
        this.nodes.push(new Node(this.ctx, nX, nY))
    }
}

Note: this.radius is defined in the constructor() as this.radius=200

Above is our new example of the makeGraph() found in Logic.js. This will distribute 8 nodes evenly across a circle (and with some minor modifications it can take a dynamic number of nodes and still spread them evenly!). We start by locating the center of the canvas. We then divide 360 (degrees) by the number of nodes we would like to create. Then we have the for loop like before, but this time we the angle of the respective node (angle*i) converted into radians (*Math.PI/180) and then find the cos/sin and multiply it by the radius of 200. Then we add that value to the x/y to offset it from the center. These calculated values are then used as the location for each node. This functions will become really familiar if you continue to make more complex things in canvas especially of it involves rotation, and it makes for an easy was for something else on the canvas to track the player such as an enemy if it knows the angle between the player and itself. But that's something for another day.

Connecting the Dots, I mean, Nodes...

Awesome, now that we have our nodes displaying in a somewhat interesting formation, let's connect them both visually and in memory. We will start by adding the following to the constructor():

this.connections = []

This will help us keep track of each node's connections later on when we start to transfer values. To start making use of this we will make the following function in our Node class:

addConnection(connection) {
    this.connections.push(connection)
}

Simple but so elegant. All we are doing here is adding a Node to our connections collection (say that five times fast) so that we can operate on it later. Now that we have the Nodes connected via memory let's start to visually connect them on the canvas for our player.

getX() {
    return this.x
}

getY() {
    return this.y
}

drawConnection(connection) {
    this.ctx.beginPath()
    this.ctx.moveTo(this.x+(this.size/2), this.y+(this.size/2))
    this.ctx.lineTo(connection.getX()+(this.size/2), connection.getY()+(this.size/2))
    this.ctx.stroke()
}

drawNode() {
    this.ctx.beginPath()
    this.ctx.rect(this.x, this.y, this.size, this.size)
    this.ctx.fill()
}

Note: Changing the fill will come right after this part

This round we have added four new functions to our Node class. The first two simply return the x or y of the respective node, and you can see why when we examine the third function of drawConnection(). This is using the same draw pattern we have already seen with canvas but all it is draw is a straight, black line from our node to the connected node. And as you can see it is using the getX() and getY() we made too. Neat!

Lastly is a drawNode() function which is purely for consistence and clarity. Since we are drawing the connections in their own function I thought it would make sense as well as look better to have the node be drawn in a separate function. You will find when you work on more complex projects that piecing our the rendering will make it easier to find when you want to make a change but the one class may have five moving parts and all of the rendering looks so similar it's hard to find what you're looking for. Sorry for the run on sentence, and no, I've never written anything messy...

That then brings us to what changes in the main draw() function now. With the above changes it looks like the following:

draw() {
    this.connections.forEach(connection => {
        this.drawConnection(connection)
    })
    this.drawNode()
}

It comes down to a simple forEach loop on all of the Node's connections and then calling our newly created drawNode() function. So, now that we have given the nodes the ability to make connections and draw them let's leverage that in our Logic.

constructor() {
    ...;

    for(let i = 0; i < 8; i++) {
        this.nodes[i].addConnection(this.nodes[1])
        this.nodes[1].addConnection(this.nodes[i])
        this.nodes[i].addConnection(this.nodes[2])
        this.nodes[2].addConnection(this.nodes[i])
    }
}

What we have here is a for loop at the end of our constructor() and it is calling the addConnection function we just made. You may notice we are calling it twice for each relationship (simply swapping the index on the array). This is because we are making an undirected graph so we need both nodes to be aware of their mutual relationship; this is important. Now we should see that we have our nodes and they are connected by lines. Don't worry too much for now if some of the line appear to be over or under the nodes. This has to do with rendering order, and we won't focus on it today.

Red Light, Green Light

Alright, we have a graph. How about we give the nodes a little more functionality since this is supposed to be a game after all. We will start by giving the player some sort of indication that they are heading in the correct direction? Let's have the nodes change color as they get closer to the solution of the puzzle.

constructor(ctx, x, y, ideal) {
    ...;

    this.value = 0
    this.idealValue = ideal
}

Here we are changing the constructor() slightly so that we can tell the nodes what their ideal value will be, and we also have to track the node's journey to this ideal value by having a value attribute that is representative to what the player is trying to balance. And the astute out there will notice that this also means we will have to change how we make the nodes back in the Logic.js file.

this.nodes.push(new Node(this.ctx, nX, nY, 2))

So, now that we have an idea of what value we want as well as what value we are currently at let's change the node's fill based on this new information:

setFill() {
    if(this.value/this.idealValue < 0.33) {
        this.ctx.fillStyle = 'red'
    }
    else if(this.value/this.idealValue > 0.33 && this.value/this.idealValue < 0.66) {
        this.ctx.fillStyle = 'orange'
    }
    else if(this.value/this.idealValue > 0.66 && this.value/this.idealValue < 1) {
        this.ctx.fillStyle = 'yellow'
    }
    else if(this.value/this.idealValue === 1) {
        this.ctx.fillStyle = 'green'
    }
    else if(this.value/this.idealValue > 1) {
        this.ctx.fillStyle = 'purple'
    }
}

What we are doing here is a series of if statements that are looking to see what value the ratio the node's value is compared to its ideal value. So, if it is below 33% the node is red, between 33% and 66% it's orange, between 66% and 100% yellow (you're getting close), and if it is 100% meaning that the value is the ideal value then it will turn green. If it is over 100% meaning the node has too much value it is purple. Feel free to make your own color schema or even explore a way to make the coloring more gradual.

Now to make use fo this all we have to do is call setFill() in the drawNode() function.

drawNode() {
    this.setFill()

    ...;
}

The way things are set up right now, the game can never be won (unless the ideal is zero then ¯\_(ツ)_/¯) but we will need a function so that we can at least set the value of one node to have enough value to solve the puzzle. In the Node class we make the following:

setValue(val) {
    this.value = val
}

Then in the Logic class's constructor() we have the following line after the loop making the connections:

this.nodes[0].setValue(16)

Now with all of that we should have mostly red nodes, but one of them will be purple since it 800% of the value it should.

console.log('click!')

Now that we have most of our visuals set up we can start to add the controls for the player to interact with our masterpiece. We will start by editing the Logic class. Let's add the following two items to the constructor():

this.selectedNode = null

this.handleClick = this.handleClick.bind(this)

window.addEventListener('click', this.handleClick)
this.canvas.addEventListener('contextmenu', this.handleClick)

We've seen the binding to this, but something that is new is the addEventListener. This is built-in JavaScript, and it allows us to do what JavaScript does best: respond to events happening. What we are responding to here is the 'click' event as in the click of a mouse on our mouse on the browser window. Similarly we listen for the 'contextmenu' event on the canvas. What is that event you ask? It just means a right click on the canvas. If we didn't do this we wouldn't be able to right click. Okay, cool, but handleClick isn't a function of Logic... yet.

handleClick(e) {
    let x = e.clientX
    let y = e.clientY

    if (e.button === 0) {
        this.nodes.forEach(node => {
            if (node.wasClicked(x, y)) {
                let selected = this.nodes.filter(n => n.isSelected)
                let toDeselect = selected[0] ? selected[0] : null
                if (toDeselect) toDeselect.deselect()
                node.select()
                this.selectedNode = node
            }
        })
    }
    else if (e.button === 2) {
        this.nodes.forEach(node => {
            if (node.wasClicked(x, y)) {
                if (this.selectedNode.getValue() > 0 && 
                    this.selectedNode.isConnection(node)) {
                         node.incrementValue()
                         this.selectedNode.decrementValue()
                     }
            }
        })
    }
}

In this function we are using the the event object passed to our function (an effect of adding an event listener) so we can know exactly where the user clicked on the window. We then have an if statement that will check where it was a left (0) or a right (2) click. If it is a left click we check to see if any of the nodes were selected (more later on). If one was clicked then we deselect the currently selected node, and make the clicked node the selected node. This is our functionality for selecting which node to transfer value from!

When it's a right click we see if a node was clicked. If one was clicked we then check if the selected node even has value to give and if so is the clicked node is a connection of the selected node. If a node passes all of these check the clicked node's value gets increased and the selected node's value will decrease. A transfer of values!

We have this logic implemented in, well, the Logic class but there were a lot of functions in there that the Node doesn't have. Let's change that. We will start by changing the Node's constructor() one more time.

constructor(id, ctx, x, y, ideal) {
    this.id = id

    this.isSelected = false

    ...;
}

getId() {
    return this.id
}

deselect() {
    this.isSelected = false
}

In order to better keep track of our connections we will need to give the nodes IDs and we will see the in a bit. And naturally that means we will have to also change where we create all of the nodes

this.nodes.push(new Node(i, this.ctx, nX, nY, 2))

Note: remember that this is in the for loop that declares all of the nodes so i is the value from the loop.

Next are mostly simple data manipulation functions:

getValue() {
    return this.value
}

decrementValue() {
    this.value -= 1
    console.log(this.value)
}

incrementValue() {
    this.value += 1
    console.log(this.value)
}

isConnection(node) {
    return this.connections.filter(c => c.getId() === node.getId()).length === 1
}

The only thing worth noting from this block is the isConnection() function where we are returning a boolean by filtering the connections a node has which will return a new array with any values that evaluate to true based on the statement given as a parameter. We then compare the length of this 'returned' array (of which we don't actually assign it to) and of that length is 1 it means that the node passed to the function is truly a connection of the current node which results in the return of a true otherwise a false is returned.

But How Do I Win?

We are almost there! But we need to make sure that the player knows that they have won. We will start by adding one final function to our Node class:

isSatisfied() {
    return this.value/this.idealValue === 1
}

This will make sure we can check that all of our nodes are happy, because when they are we have achieved the win state. Let's make the Logic aware of that now by changing the update() function:

update() {
    let playerWon = true
    if (this.lastUpdate < performance.now() - this.updateRate) {
        this.lastUpdate = performance.now()

        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)

        this.nodes.forEach(node => {
            if (playerWon) {
                playerWon = node.isSatisfied()
            }
            node.draw()
        })
        if (!playerWon) {
            this.ctx.fillStyle = 'black'
            this.ctx.font = "90px Arial"
            this.ctx.fillText("You Won!", this.canvas.width*.41, this.canvas.height*.1)
        }
        this.ctx.fillStyle = 'black'
        this.ctx.font = "30px Arial"
        this.ctx.fillText("Left Click to select a node. Right Click on a node to transfer value from the selected node. Try to turn all of the nodes green.", this.canvas.width*.18, this.canvas.height*.95)
    }
    this.rAF = requestAnimationFrame(this.update);
}

You can see that when we are rendering each node we also check if they are satisfied. If one node does not meet that qualification it will make the playerWon variable false meaning it will not display the win message. Conversely if all of the nodes are satisfied then it will remain true allowing for the message to be rendered thus informing the user of their victory. You will also notice a message that is alway rendered at the bottom so that we can give the user a bit of guidance on the controls. Feel free to change the message to what you like.

Conclusion

And that is that! We have made a game using JavaScript and HTML5 Canvas, and that was really only the surface. We covered design, trig, programming practices, and lots of other JavaScripts tid bits. I hope this was a fun and enjoyable experience for you, and that you were also successful and inspired in creating this alongside the tutorial. If there were some bumps you can always check the finished version on my github. You can also check the commit history to examine my thought process it, and you will find that it closely resembles this tutorial.

React State Management: When to use the Context API over Redux

Alexei Dulub — Sat, 30 May 2020 00:27:47 +0000

React State Management: When to use the Context API over Redux

React is a library that was primarily created to build interactive and highly appealing frontends. It utilizes a component-based architecture to allow maximum code reusability and a bunch of other things. State is something that developers in any field have to grapple with at some point in time, in React too there were a lot of challenges that developers faced, much of which Redux a state management library solved. Overtime React evolved to try and solve some of these problems by itself, the Context API is the result of this attempt. This article will discuss both Redux and the Context API and identify some guidelines that can help you choose one over the other.

Prerequisites

This post is aimed at developers that have a good amount of experience with writing web applications in Javascript and ReactJS. If you are familiar with another frontend framework/library like VueJS, AngularJS, SvelteJS, etc. you can still make use of this article.

✅ Experience with writing web apps using ReactJS
✅ Some experience with Redux and preferably the Context API

⭐ Make sure to check the resources topic to learn more!

Outcomes

By reading this post will be able to:

Understand that sometimes you do not need either Redux or Context.
Know what exactly the Context API provides which can help you make decisions.
Understand when you could use the Context API for state management over Redux.

State Management: The challenges

State management is not easy, despite the kind of application you're writing as long as it will face production at some point or have a couple of complex features. While in the initial phases of creating an application, a lot of thought goes into making the "best" decisions and this is commonly associated with what a lot of people in any community call the "best" tools. Redux is one of those "best" tools, that have been used since 2015 but does this mean that you should rely on Redux to solve any possible future problems? No.

Just like how when you have a hammer, every problem shouldn't be a nail for you, wherever state management has to be done you shouldn't sprinkle Redux. This can lead to inefficiency, which in turn leads to time being wasted.

With that bit understood, you should know about a few challenges that a lot of people use Redux to solve but really shouldn't:

Sharing state that could have instead be passed down as props.
Managing the state of a form - There is no need to do so, as the state of a form does not affect the application as a whole. Libraries like Formik help to do this better.
Using it in any situation that complicates how you tackle it instead of making it easier.

Context API: A solution for when Redux is too much

The context API is nothing new, it has been around for a while but was officially announced in React version 16.3. The purpose you could say for introducing the Context API is to make passing data through deeply nested components simple. It is not a solution for state management, and all the logic that is required to manage your state must be written by yourself. You could better word this by saying that the Context API does not manage your state for you.

This makes it very flexible, you can adapt it to your needs and pass state through nested trees of components easily. Let's implement a simple UI where a Navigation Bar holds a User Avatar. It would look a little like this:

const UserContext = React.createContext()

const ProfilePicture = () => (
    <UserContext.Consumer>
        {(user) => <img width="56px" alt="pfp" src={user.pfp} />}
    </UserContext.Consumer>
)

const Nav = () => (
    <nav>
        <ProfilePicture />
    </nav>
)

class App extends React.Component {
    state = {
        user: {
            pfp: 'https://i.picsum.photos/id/50/200/300.jpg',
        },
    }

    render() {
        return (
            <div className="app">
                <UserContext.Provider value={this.state.user}>
                    <Nav />
                </UserContext.Provider>
            </div>
        )
    }
}

First off, you need to create a context, the context mainly holds 2 properties Provider and Consumer, both exist for a self-explanatory purpose. The provider must be used to wrap the major portion of the application that will consume the value that it provides, while the consumer simply consumes the value and passes it off to the component that requires it. This way passing data in nested subtrees of components can be greatly simplified.

Redux: A solution for advanced state management

Redux is a state management library that mixed quite a few different concepts from libraries like Flux and languages like Elm, to make state management as painless and testable as possible. It achieves this by living up to three fundamental principles:

Singe source of truth - Having a single store makes it easy to debug and test your application, features that are otherwise difficult implement are made extremely simple because you know that all your state is in one single store, hence the only source of truth in your application.
State should be read-only - You should only ever show intent to modify the state, this prevents your UIs or network calls from modifying the state directly. This intent is displayed using plain objects that are called actions. This makes it easier to debug and test the application.
Changes must be made using pure functions - The actual modification must be done using pure functions called reducers. Pure functions take an input and return the same output for that particular input and there are no side effects. Reducers simply take the current state and return the next state.

To get a better grasp of using Redux, let's implement the same example from before but use Redux instead of Context:

import React from 'react'
import ReactDOM from 'react-dom'
import { createStore } from 'redux'
import { connect, Provider } from 'react-redux'

const initialState = {}

function reducer(state = initialState, action) {
    switch (action.type) {
        case 'SET_USER':
            return {
                ...state,
                user: action.user,
            }
        default:
            return state
    }
}

const store = createStore(reducer)

store.dispatch({
    type: 'SET_USER',
    user: {
        pfp: 'https://i.picsum.photos/id/50/200/300.jpg',
    },
})

const mapStateToProps = (state) => ({
    user: state.user,
})

const UserAvatar = connect(mapStateToProps)(({ user }) => (
    <img width="56px" alt="pfp" src={user.pfp} />
))

const Nav = () => (
    <nav>
        <UserAvatar />
    </nav>
)

const App = () => (
    <div className="app">
        <Nav />
    </div>
)

ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.querySelector('#root')
)

If you have never used Redux before, the above code example might be a little daunting but fear not there is no magic involved. Redux uses Context behind the scenes to make state available to a lot of different components. Quite often, developers take this point to say that the Context API will eventually replace Redux, but that is not and never will be the case. Redux is not just a simple wrapper around Context, before we get to that however let's discuss how Redux works in the example above.

First off, you must create a store using createStore(), this function will take the reducer that will be used in your application to modify the state stored in your store. The reducer() is a pure function that contains the logic as to how the state should be modified based on the actions ( The { type: ...} object is an action) dispatched to the store. connect() is a pure function that makes all the associated components pure so that they will only rerender when the relevant part of the store updates.

Redux vs Context API: Which should you use?

If you read the previous two topics thoroughly, now it should be very apparent to you when you should use Context over Redux. However for those that still find it difficult to make the decision, it is worth taking note of the following points.

If you use Redux, then you can make use of:

The Redux DevTools extension - This tool makes it very easy to inspect your store, and debug it by performing actions like diffing and tracing. You could even replay the actions you have dispatch. If you feel like debugging will be a tough candy to crack, then this extension is worth a shot. It can be installed as a package or downloaded from an extension store and configured in your codebase.
Middleware - Middleware is simply functions that execute every time that an action has been dispatched. Redux Thunk for example, is a very popular middleware that makes dispatching actions asynchronously possible or Redux Observable that makes use of RxJS to make side effects.
Testability - Using Redux will make testing easier when it comes to complex applications because of the way it has been built.

Lastly, it is important to address the fact that Redux is not something that is dead or will be deprecated anytime soon, even in the React ecosystem. Regardless, even if people stop using it in the React ecosystem, it will still be used outside of React. React Native, for example, is a framework for building mobile applications, and uses redux for state management, while it could be said that React Native is part of the React ecosystem, this is a fine example of how Redux will still prevail even outside of React itself.

Some alternatives to Redux that are worth mentioning:

MobX - A relatively new library that solves a lot of the problems that Redux does.
GraphQL - A solution for data-driven applications, it makes this possible by making it so that the frontend need not know exactly how to fetch data to get the right response.

A little about PixelPlex

PixelPlex is a software development company that has been delivering outstanding blockchain, web, game and so many more development services since 2007. With over 300+ products delivered, it's safe to say that your project is safe in our hands. If you wish to turn your dream SaaS into a beautiful reality, or start working on that one idea that you always wanted to, visit our software development company website and get in touch!

Summary

✅ ReactJS is a frontend library for building beautiful UIs, state management is challenging and can be performed using a library like Redux.
✅ The Context API was introduced to React in version 16.3 and is ideal for when you need to pass data through deeply nested component trees, however, it does not manage your state for you, and you must write that logic on your own.
✅ Redux is a state management library fit for situations where testability and maintainability are prime factors. Redux provides the usage of middlewares that can expand the potential of redux.
✅ The Context API is not a replacement to Redux, it never will be either. Whether or not you use Context over Redux, depends on your particular situation.

Resources

Feel like reading more? Check these links out:

Redux vs React’s Context API - An article by Academind that makes use of a few more code examples to bring out the differences between Redux and Context.
Awesome Redux - A whole bunch of resources regarding Redux, if you want to start learning Redux, then you should check this out.
Formik - While this isn't a resource you should read about to understand Redux or Context better, it is a library worth checking out if you struggle with state management in forms.

Blockchain in banking, food, healthcare, auto, lending, security industries

Alexei Dulub — Sun, 03 May 2020 16:53:49 +0000

In 2018, the Department of Health and Human Services’ Office for Civil Rights claims that breaches at hospitals resulted in the exposure of 13 million healthcare records (“Largest Healthcare Data Breaches of 2018”). Another alarming statistic from the National Highway Traffic Safety Administration, shows that over 450,000 vehicles are sold each year with false odometer readings, costing American car buyers more than $1 billion annually (“Odometer Fraud”). So what do things such as a data breach and odometer fraud have in common? They, along with other problems in our economy and the world, have the same solution: Blockchain Technology.

Data Security and Blockchain

The foundations on which blockchains are built makes it virtually impossible and highly unlikely to be hacked or tampered with. The reasons are:

the hash system
the proof-of-work system.

Before a block is added to a blockchain, it is assigned a hash - a unique, identifying code. In addition, it is also given the hash of the block before it in the blockchain. Each succeeding block will contain the hash of the previous block as well as its own. Therefore, if a hacker tries to tamper with the block, it’s hash will change and it will no longer be accepted by the rest of the network since the next block in the chain will contain the old hash. The hacker would need to update the hash of each succeeding block, including the new ones being continually added. Recalculating those hashes would take an improbable amount of computer
Power.

Furthermore, the proof of work system adds another layer of security. In order to join the blockchain network, computers must “prove” they have done the “work” by solving a complex math problem. However, to solve the complex math problem (the odds of solving one is placed at 1 in 5.8 trillion as of February 2019) the computer must run programs that cost significant amounts of money. Similarly, the hacker must also try to solve this complex math problem with a 1 in 5.8 trillion odds to coordinate an attack on the blockchain. At that point, the costs outweigh the benefits.

With blockchain technology being one of the most secure ways to store data, it is easy to see why many see it as the future in many of the following industries: banking, lending, medical, car, and the food industry.

Blockchain in Banking

Banking, worldwide, is likely the industry that will benefit the most by integrating blockchain into its business. Currently, most financial institutions take one to three business days to verify transactions due to the vast volume of incoming transactions and the process of bypassing a complex system of intermediaries before it reaches its destination bank account. In addition, most banks only operate and approve transactions during business hours - meaning Monday through Friday 9 a.m. to 6 p.m. However, since blockchain is operated by computers, it can operate twenty-four-seven, seven-days-a-week. For the consumer, the integration of blockchain into banking would allow their transactions to be completed in as little as ten minutes. In addition to the faster clearing of transactions, blockchain also reduces the margin of error since each transaction is verified by a community of blockchain network users. For banks, this technology can save them billions yearly due to the elimination of slow and expensive payment networks. Santander, a European bank, believes that by the year 2022, the infrastructural cost for banks could be reduced by fifteen to twenty billion dollars a year (Perez,
2015).

Blockchain in the Lending Industry

Without the need for a middle man, blockchain technology can make securing loans more secure and provide it at a lower interest rate. Currently, banks and lenders decide on loan amounts based on credit scores. They access one’s information from the credit agencies and look into one’s credit score, home ownership status, and debt-to-income ratio. They then
determine the risk of the person not paying back the loans and factor that into the fees and interest rates. However, according to the Federal Trade Commission, one in five Americans have a potential material error in their credit score that prevents them from receiving a loan.
Blockchain, on the other hand, offers a more efficient and cheaper way of obtaining loans through its direct peer-to-peer loans. It can approximate mortgages and quicken the loan process. Without big intermediaries like banks or lenders, interest rates can potentially be a lot lower for the borrower as well.

Blockchain in Healthcare

As previously stated, in 2018 alone, data breaches and hacks led to the exposure of over 13 million health records. In the future, health records can become much more secure if integrated into blockchain technology. Since blockchain mainly is a digitized storage ledger, its uses are not only limited to money. Patient records, once generated and signed, could be stored in blockchain, with a private key. This way only the patient and their doctor can access the records and the patient would not have to worry about losing their records. With blockchain’s immutability, patient records can also remain secure from cyber attacks and patients can have
the confidence that their records cannot be changed.

Blockchain in the Auto Industry

Odometer fraud has grown significantly in recent years. In fact, as previously stated, the NHTSA states the fraud is costing American car buyers $1 billion annually. Odometer fraud occurs when the car owner changes the mileage of a car to make it look newer and worth more money. However replacing the regular odometers with smart odometers connected to
blockchain technology could prevent this. The smart odometer would create a secure, digital certificate for each car with data such as its mileage. Once added to the blockchain, the odometer readings cannot be tampered with. This technology is currently being tested in Bosch’s Internet of Things (IoT) lab and if perfected, could possibly be used in the future by car Manufacturers.

Blockchain in the Food Industry

Blockchain could store data starting with a produce’s harvest to its sales to a consumer.A digital certificate could be created for each piece of produce indicating where it came from, the different places it had been to (such as factories, delivery services, stores, etc.) and who the product had been sold to. This way, if there is food contamination or an outbreak, it can be traced back to its very source and everyone who purchased from that particular batch can be specifically notified of the outbreak in a more timely manner. Millions die from food contamination outbreaks every year, but with the integration of blockchain, most could be prevented in the future. Companies such as Walmart and IBM are already testing the use of blockchain in the food industry. They were able to track a batch of mangoes in 2 seconds, compared to the days it normally takes to track batches of produce. Both the producers, with the lower costs from reduced amount of lost packages, and the consumers, with prevention from food-borne illnesses, can benefit with the incorporation of this technology in the food industry.

Blockchain and Globalization

It is important to note that blockchain technology is not just groundbreaking for the tech and service world but also for our increasingly interconnected globalized future. For starters, blockchain technology can get rid of the need for middleman such as Amazon or Ebay. So in the future, people could purchase products directly from the producer and the packages could be tracked using blockchain as well. It would be much more secure and make global trading much more efficient.

Takeaway

In conclusion, the accessibility, immutability, and security of blockchain makes it a very attractive option for a multitude of industries across the world. The examples above are just a few of the many fields in which blockchain can be used to change the world as we know it.
Blockchain technology will redefine the workplace, change our economy and make the world more globalized in the next ten to twenty years.

DEV Community: Alexei Dulub

State Management Using Redux with React

Data Flow in Flux

Redux for JavaScript State Management

Actions

Action Handling Reducers

Store

Creating the Components Directory Inside SRC

Smart Components

Dumb Components

Creating an Action

Defining Actions with Actionform.js

Creating the Reducer

Creating Index.Js

Creating DestroyCounter.js

Adding Counter.js

Adding Components To App.Js

Conclusion

Testing Redux with Jest

Testing Redux with Jest

Prerequisites

Outcomes

Test-Driven Development: Concept Overview

Setting up your environment

Writing unit tests for actions and reducers

Testing Redux sagas

PixelPlex: Your dream web development company

Summary

Resources

Features I Wish I’d Known About ES6 & ES7

Features I Wish I’d Known About ES6 & ES7

Historical Background

Ecma and EcmaScript

So What’s new ?

Scopes and variables declaration (let & const)

Let and const keywords

Note

Arrow Function

Arrow Function and this

Explanation

Default parameters

Note

Destruction assignment

Swapping values

Class keyword

Generators

Promises

Array.prototype.includes

Exponential operator

Conclusion

How to Run Hyperledger Fabric on Azure

How to Run Hyperledger Fabric on Azure

What a Hyperledger Fabric Setup Looks Like on Azure

Need For A Membership Certificate Authority

What Is Traded?

How to Install an ABS with HyperLedger Fabric

Member Creation

Creating Hyperledger Fabric Over AKS

Building Consortium

Channel Management Commands

Consortium Management Commands

Chaincode Management Commands

Conclusion

How to Stage Managed Blockchain Networks on AWS

Prerequisites

Stage 1. Creating an HLF Network

Stage 2. Establishing Network Availability

Stage 3. Creating an HLF Client Node

Stage 4. Registering Identity for the HLF Client Node

Stage 5. Updating the Configuration of Configtx Channel

Stage 6. Creating the HLF Channel

Stage 7. Adding the Peer Node to the Channel

Stage 8. Installing Chaincode on the Peer Node

Stage 9. Installing Chaincode Over the Channel

Stage 10. Calling the Chaincode

Stage 11. Invoking A Transaction

Stage 12. Enquire the Chaincode Once More and Crisscross the Modification in Value

Conclusion

Creating a Very Simple Sentiment Analysis Model in Python

Intro

Arrow Function and `this`