Blockchain Applications and Its Future

Blockchain Applications and Its Future

Blockchain Applications and Its Future

The technology that has brought a ray of hope in small business (struggling to reduce their costs) to large business (struggling to increase the speed of their business operations) is Blockchain technology!

In this blog, we will discuss some applications of this amazing technology and then we will talk about its future.

The term ‘Blockchain’ is being widely used in various articles and blogs on the internet. However, most of these write-ups do not clearly explain what this blockchain actually is?

There is a misconception about ‘Blockchain’ and ‘Bitcoin’. People think that Blockchain and Bitcoin are one and the same thing. But, unfortunately, it is not the case.

Here, we would like to clarify that both of these terms are quite different.

The blockchain is a technology on which cryptocurrencies like Bitcoin are based. This powerful technology has the ability to provide the utmost security, high speed and efficiency to any business network.

Bitcoin is one use case of blockchain technology. Here, we are going to share some use cases that can help you to have an idea about what blockchain can do for you?

Cross Border Transactions

Banks are always looking for an efficient way to manage nostro or vostro accounts. These accounts are used to facilitate trade and foreign exchange transactions through reconciliation.

Blockchain, if used, can make this process easier and quicker as the reconciliation of accounts will become automated.

Trade Finance

In any business, the task of obtaining approvals from various legal organizations such as customs, trucking or rail transportation entity, port authorities, etc. is time-consuming and hectic.

Here, blockchain can play an important role. All the legal entities can use blockchain for signing all the approvals. In a blockchain network, all the participants have equal access to all the information about approval status and transactions.

Electronic Medical Records

Nowadays, electronic medical records are kept in data centers. Moreover, access to these records is limited to the hospital and caretakers.

Since this information is centralized, therefore it is quite expensive and prone to security hacks.

Blockchain can be quite helpful here.

In the blockchain network, the medical histories of each patient are shared among doctors, hospitals, and regulators.

If this shared ledger is updated, then the change is transferred to all the people having authorized access in this blockchain network.

So, blockchain provides a tamper-resistant way of storing electronic medical records.

Global Trade

Exchange of capital, goods, and services across the international border is known as global trade. Cost of trade documentation comes around one-fifth of physical transportation cost.

The reason is that different supply chain participants such as manufacturers, insurers, banks, customs, and border agents depend on different systems for processing transactions.

Here, blockchain distributed ledger technology can be quite helpful to speed up goods on their journey from manufacturer to market. This is because blockchain provides a single view of reality.

Healthcare Payment Pre-Authorization

In the case of healthcare claims, people do not submit all the required documents. So, as a result, payers need to request for additional information and this process adds costs and delays.

Blockchain technology makes this process easier by automating the collection as well as sharing of information.

Food Industry

Blockchain permits a permanent and permitted record that has all the information about food origin, processing data and shipping details.

This usage of blockchain technology results in a secure sharing of permitted data through an efficient food supply chain solution.

If in case anybody wants to alter the food item, blockchain identifies it and notifies the producer before the item reaches a retailer. A pictorial representation is shown here to make it more clear.

These are some of the applications of the blockchain. Blockchain technology is revolutionizing the world. It has the ability to increase efficiency and security in almost every industry.

According to PWC global blockchain survey 2018, Gartner has found that 82% of reported blockchain use cases were in financial services in 2017. But this stats dropped down from 2018 to 46%.

More on Blockchain

Here is a video that shows various industries whose efficiency can be improved through blockchain technology.

Future Predictions for Blockchain Technology

If we talk about the year 2017, then cryptocurrency took the entire world through the storm in that specific year. Moreover, Bitcoin price went up to $20,000.

There are certain predictions that experts have made for the future of blockchain.

  • By the year 2030, almost all the governments will adopt some form of virtual currency
  • By the year 2030, A major part of world trade will be performed with the help of blockchain technology
  • By the year 2030, considerable improvements in the world’s standard of living will be attributable to the development of blockchain technology
  • Till 2030, a blockchain based cross border self-sovereign identity standard will come out for individuals as well as physical and virtual assets.

Moreover, here are some additional predictions by tech experts about the future of blockchain technology. Let’s look at them.

  • Enhanced transparency across industries
  • Blockchain-based security measures
  • Increase in distributed data models
  • Distributed Ledger technology based government systems
  • Credible Crypto Backing
  • Self Negotiation and Trade

Effects of Blockchain on Business

Since blockchain technology has the amazing capabilities to enhance speed, data security and to minimize the money fraud, more and more industries are adopting it in their business operations.

Due to this increase in demand for blockchain-based applications, custom blockchain development and outsourcing companies in India are gaining popularity with the increase in time.

Final words

Blockchain technology has revolutionized industries across the world. This disruptive technology has the capability of increasing the efficiency of the workflow of any industry.

It is a permanent ledger that is shared across all the participants of a blockchain network. Any alteration in the ledger is transmitted to all the participants in chronological order.

There are absolutely no chances of tampering.

Hence, we concluded that industries from the various sector such as food, healthcare, trade finance, and global trade are getting benefitted by this powerful hyper ledger technology.

With an increase in time, this innovative technology is going to broaden in the future.

Further reading:

Stablecoins: Things you need to know

Bitcoin Price Analysis: BTC Remains Attractive, $8,350 Holds Key

Buy iPhone with Bitcoin

Bitstore.tech App will help you shop on Amazon with Bitcoin or other cryptocurrency. Feel free for feedback ;)

Bitstore.tech App will help you shop on Amazon with Bitcoin or other cryptocurrency.
Feel free for feedback ;)

Create a cryptocurrency dashboard with Angular

Create a cryptocurrency dashboard with Angular

In this tutorial , we will be creating a cryptocurrency dashboard using Angular 4 and Angular IDE. Cryptocurrency is a digital asset designed to work as a medium of exchange using cryptography to secure the transactions and to control the creation of additional units of the currency. Bitcoin is the most popular digital currency, however there are numerous cryptocurrencies in existence.

In this tutorial , we will be creating a cryptocurrency dashboard using Angular 4 and Angular IDE. Cryptocurrency is a digital asset designed to work as a medium of exchange using cryptography to secure the transactions and to control the creation of additional units of the currency. Bitcoin is the most popular digital currency, however there are numerous cryptocurrencies in existence.

On our dashboard, we will display the price, percentage change in 24 hour price, and percentage change in 7 day price of selected cryptocurrencies.

What You will Learn

In this article you will learn about Angular application development using Angular IDE. You will also learn how to use the Subject class from RxJS, a ReactiveX library for javascript.

Prerequisites

In order to follow along with this tutorial, please ensure you have installed Angular IDE.

UI Design

Below is a picture of how the cryptocurrency dashboard will look like on mobile.

Step 1 — Create new Angular project

Open Angular IDE, click File in the top menu, then select, New then click.Angular Project

In the new Angular project wizard, type crypto-dashboard as the project name, select node version 6.11.4, and npm version 3.10.10. Then click the finish button.

Angular IDE will take a few minutes to set up the project, you can see the activities output in Terminal+. Once completed we see an output like in the image below

Step 2 — Create application components

Taking a look at our UI design, we can identify two visible components, the search-filter box, and the list card. There is also an invisible component which is the list itself. The components are highlighted in the picture below:

Now, let’s create the components. In the file explorer view, right click on crypto-dashboard, select new, and click.Component

In the New Angular CLI dialog, enter search-filter as element name, and click the finish button. See image below for reference:

Repeat the steps to create the list-card, and list component. Also create a dashboard component, so we use it to organize our components. Your directory structure, under the src/app folder should be as in the image below:

Create AppService

In this tutorial, we will be using just one Angular Service, named AppService. In Angular, a Service is a broad category encompassing any value, function, or feature that your application needs.

In the file explorer view, right click on crypto-dashboard, select new, and click Service. In the new Angular CLI Service wizard, enter App a the element name, and click finish.

Add Bootstrap CSS and Font Awesome

Let us add bootstrap css and font awesome to our project by updating the contents of src/index.html , add the code snippet below in the head section of the html document

<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css">
<link href='//fonts.googleapis.com/css?family=Open+Sans:400,700'
rel='stylesheet' type='text/css'>
<link rel="stylesheet"
href="//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.css" />

Install angular-2-dropdown-multiselect

AngularX Dropdown Multiselect for Bootstrap CSS is used to create customizable dropdown multiselect in AngularX, TypeScript with bootstrap css. We will be needing multiselect in this project, so let’s install it by typing the command below in Terminal+ and hitting enter

npm install --save angular-2-dropdown-multiselect

In order to make the multiselect component available in our application, we need to update src/app/app.module.ts as follows:

...
import {MultiselectDropdownModule} from 'angular-2-dropdown-multiselect';

@NgModule({
...
imports: [
...
MultiselectDropdownModule,
],

Here is a screenshot of how the multi-select plugin will appear in our final result.

The API

We will be using the api provided by coinmarketcap.com. Using the sample data returned, let us create a type script shape file named coin.ts with the following content

export class Coin {
id: string;
name: string;
symbol: string;
rank: string;
price_usd: string;
price_btc: string;
'24h_volume_usd': string;
market_cap_usd: string;
available_supply: string;
total_supply: string;
percent_change_1h: string;
percent_change_24h: string;
percent_change_7d: string;
last_updated: string;
}

App Service

AppService is a general purpose class we will use to fetch data from the api, and pass that data on to components. We also use AppService to filter the data to display based on the options selected in the app. We could split this service into multiple services so as to abide by the single responsibility principle.

The Subject class from RxJs is very important in this code section and it’s important to touch on what they are. Firstly let us talk about RxJs, it is a reactive programming framework for Javascript. Core to understanding how to use RxJs is having a mental model of the Observer Pattern. The observer pattern is a software design pattern in which an object, called the subject, maintains a list of its dependents, called observers, and notifies them automatically of any state changes, usually by calling one of their methods.

First we import {Injectable} from @angular/core, {Subject} from rxjs/Subject, {HttpClient, HttpParams} from @angular/common/http . Next we import the coin shape Coin from ./coin, and we create a constant APIBASEURL to hold the base url of the api.

Now we export class AppService, making sure we decorate it using @Injectable(), then we define three private variables allCoins: Coin[], filteredCoins: Coin[], and filter: number[]. We also define four subjects

  • coinsSubject: Which notifies it’s observers of coin data fetched from the API
  • filteredCoinsSubject: Which notifies it’s observers the filtered collection of crypto currency data. So if in the multiselect filter, only two crypto coins are selected then, the most recent value emitted by subscribing to filteredCoinsSubject will be an array of length two.
  • apiSubject : notifies it’s observers with a string message based on api actions
  • fiatSubject :notifies it’s observers about the value of the selected fiat currency when it is updated.

The full code for AppService is below, explanations are in the comments

// Imports
import {Injectable} from '@angular/core';
import {Subject} from 'rxjs/Subject';
import {HttpClient, HttpParams} from '@angular/common/http';
// Import Coin Shape file
import {Coin} from './coin';
const API_BASE_URL = 'https://api.coinmarketcap.com/v1/';

@Injectable()
export class AppService {
private allCoins: Coin[]; // will hold unmodified data returned by the api
private filteredCoins: Coin[]; // will hold data filtered from this.allCoins
private filter: number[]; // will hold the array index of data contained in this.
allCoins that should not be filtered out

// A couple of RxJs Subjects very important for communicating across Angular Components
coinsSubject: Subject<Coin[]>;
filteredCoinsSubject: Subject<Coin[]>;
apiSubject: Subject;
fiatSubject: Subject;
constructor(private http: HttpClient) {
this.filter = [];
// we initialize our subjects
this.coinsSubject = new Subject();
this.filteredCoinsSubject = new Subject();
this.apiSubject = new Subject();
this.fiatSubject = new Subject();
}
// this method loads market cap data from the API
loadMarketCaps(fiat: string) {
this.fiatSubject.next(fiat);
const url = API_BASE_URL + 'ticker/';
let params = new HttpParams();
params = params.append('limit', '25');
if (fiat !== 'usd') {
// TODO: check if fiat is valid
params = params.append('convert', fiat);
}
this.apiSubject.next('loading...');
this.http
.get<Coin[]>(url, {params})
.subscribe(
data => {
this.allCoins = data; // store returned data
this.announceCoins(); // trigger announcements
this.filterMarketCaps();
}
);
}

filterMarketCaps() {
this.filteredCoins = [];
if (this.filter.length === 0) {
this.allCoins.forEach((coin) => this.filteredCoins.push(coin));
}
if (this.filter.length > 0) {
this.filter.forEach((i) => {
this.filteredCoins.push(this.allCoins[i]);
});
}
this.announceFilteredCoins();
}
announceCoins() {
this.coinsSubject.next(this.allCoins);
}
announceFilteredCoins() {
this.filteredCoinsSubject.next(this.filteredCoins);
}
updateFilter(filter: number[]) {
this.filter = [];
filter.forEach((elem) => {
this.filter.push(elem);
});
this.filterMarketCaps();
}
}

App Component

Update the content of src/app/app.component.html with the content below. We display the title in a h2 element, and we set the dashboard component as a child view. If our project needed a router, we would have set it up here in App component.

<div class="container">
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<h2 class="text-center">{{ title }}</h2>
<app-dashboard></app-dashboard>
</div>
</div>
</div>

Dashboard Component

The dashboard component will serve as a parent component for two components, the search component and the list component. Replace the contents of src/app/dashboard/dashboard.component.html with the code snippet below

<app-search-filter></app-search-filter>
<app-list></app-list>

Since the scope of the service instance is the parent component and its children, we will create an instance of AppService in the dashboard component which will be shared by the search-filter component and the list component. To do this we update src/app/dashboard/dashboard.component.ts by importing AppService, and adding AppSercieto the providers array which enables Angular’s Dependency Injector for AppService.

import {Component} from '@angular/core';
// import AppService
import {AppService} from '../app.service';
@Component({
selector: 'app-dashboard',
templateUrl: './dashboard.component.html',
styleUrls: ['./dashboard.component.css'],
providers: [AppService] // provider setup
})
export class DashboardComponent {}

SearchFilter Component

The search-filter component is made up of a form containing two elements.

The first is a select element for choosing a fiat currency used in displaying the current worth of each crypto currency. The selected currency will be stored in a model aptly named SelectedCurrency , an onChange event listener will notify the app service to load data from the api.

The second element is is a multiselect dropdown, that will enable us filter our choice of crypto currencies to display.

The code below goes in src/app/search-filter/search-filter.component.html

<div>
<form>
<div class="form-group">
<select id="selectedCurrency" name="selectedCurrency" [(ngModel)]="selectedCurrency"
(change)="selectCurrency($event.target.value)" class="form-control"
id="fiat">
<option value="">Select fiat currency</option>
<option *ngFor="let currency of currencies" value="{{currency}}">{{currency.toUpperCase()}}</option>
</select>
</div>
<div class="form-group">
<ss-multiselect-dropdown id="cryptocurrencies"
name="cryptocurrencies" [texts]="myTexts" [settings]="mySettings"
[options]="cryptoCurrOptions" [(ngModel)]="optionsModel"
(ngModelChange)="filterChange($event)"></ss-multiselect-dropdown>
</div>
</form>
</div>

and the code below goes in src/app/search-filter/search-filter.component.ts

// Imports
import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
import {AppService} from '../app.service';
import {IMultiSelectOption, IMultiSelectSettings, IMultiSelectTexts} from 'angular-2-dropdown-multiselect';
@Component({
selector: 'app-search-filter',
templateUrl: './search-filter.component.html',
styleUrls: ['./search-filter.component.css'],
providers: []
})
export class SearchFilterComponent implements OnInit {
currencies: string[];
cryptoCurrOptions: IMultiSelectOption[];
selectedCurrency: string;
optionsModel: number[];
// Settings configuration for the multiselect plugin
mySettings: IMultiSelectSettings = {
enableSearch: true,
checkedStyle: 'fontawesome',
buttonClasses: 'btn btn-default btn-block',
dynamicTitleMaxItems: 5,
displayAllSelectedText: true
};
// Text configuration for the multiselect plugin
myTexts: IMultiSelectTexts = {
checkAll: 'Select all',
uncheckAll: 'Unselect all',
checked: 'item selected',
checkedPlural: 'items selected',
searchPlaceholder: 'Find',
searchEmptyResult: 'Nothing found...',
searchNoRenderText: 'Type in search box to see results...',
defaultTitle: 'Filter cryptos',
allSelected: 'All selected',
};
constructor(private appService: AppService) {
this.currencies = ['usd', 'eur']; // fiat currency options
this.selectedCurrency = ''; // model to store selected fiat
// array to hold names of cryptos to be used in filtering
this.cryptoCurrOptions = [];
// coinsSubject is a RxJs subject in our service that will notify us when the api has gotten data about crypto coins
this.appService.coinsSubject.subscribe({
next: (v) => this.updateCryptoOptions(v),
});
}
ngOnInit() {
}
selectCurrency(newValue) {
this.appService.loadMarketCaps(newValue);
}
filterChange(newValue) {
// BUG method should not be triggered by filter select
this.appService.updateFilter(newValue);
}
// This method creates an array of valid options for the multiselect plugin from an array of crypto coins
updateCryptoOptions(coins) {
this.cryptoCurrOptions = [];
coins.forEach((coin, index) => {
this.cryptoCurrOptions.push({
id: index,
name: coin.id.charAt(0).toUpperCase() + coin.id.slice(1)
});
});
}
}

List Component

This component manages the display of a list of cards. One for each crypto coin data returned from the api. The coins model is an array of the data to rendered by each coin. Let us update the contents of src/app/list/list.component.html

<div class="list-cards pb-4">
<app-list-card *ngFor="let coin of coins" [coin]="coin" [fiat]="fiat"></app-list-card>
</div>
<div *ngIf="!coins">
{{noDataMsg || 'Nothing to display'}}
</div>

The content of src/app/list/list.component.css is

.list-cards {
display: flex;
flex-direction: column;
align-items: center;
}

In src/app/list/list.component.ts , we subscribe to three RxJs subjects in our Service.

  • filteredCoinsSubject: Which sends updates on the filtered collection of crypto currency data. So if in the multiselect filter, only two crypto coins are selected then, the most recent value emitted by subscribing to filteredCoinsSubject will be an array of length two.
  • apiSubject : emits a string message based on api actions
  • fiatSubject : emits the value of the selected fiat currency when it is updated.
import {Component, Input, OnInit} from '@angular/core';
import {AppService} from '../app.service';
import {Coin} from '../coin';
@Component({
selector: 'app-list',
templateUrl: './list.component.html',
styleUrls: ['./list.component.css']
})
export class ListComponent implements OnInit {
coins: Coin[];
noDataMsg: string;
fiat: string;
constructor(private appService: AppService) {
this.noDataMsg = 'Select fiat currency to get started';
this.appService.filteredCoinsSubject.subscribe({
next: (v) => this.updateCoins(v),
});
this.appService.apiSubject.subscribe({
next: (msg) => this.noDataMsg = msg,
});
this.appService.fiatSubject.subscribe({
next: (newValue) => this.fiat = newValue,
});
}
updateCoins(coins: Coin[]) {
this.coins = [];
coins.forEach((coin) => this.coins.push(coin));
}
ngOnInit() {
}
}

ListCard Component

The list-card component, is basically to display the market cap summary of a single cryptocurrency. The content of src/app/list-card/list-card.component.html is below

<div class="card text-center mt-4">
<div class="card-body">
<h2 class="card-title">{{ coin.id }}</h2>
<h4 class="mb-0 pb-1">{{fiat.toUpperCase()}} {{ coin['price_'+fiat] }}</h4>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">24 hours: <span [class]="coin.percent_change_24h.charAt(0)==='-' ? 'red' : 'green' ">{{ coin.percent_change_24h
}}</span></li>
<li class="list-group-item">7 days: <span [class]="coin.percent_change_24h.charAt(0)==='-' ? 'red' : 'green' ">{{ coin.percent_change_7d }}</span></li>
</ul>
</div>

and src/app/list-card/list-card.component.ts

import {Component, OnInit, Input} from '@angular/core';
@Component({
selector: 'app-list-card',
templateUrl: './list-card.component.html',
styleUrls: ['./list-card.component.css']
})
export class ListCardComponent {
@Input() coin;
@Input() fiat;
}

Run application

Run the application from the server tab of Angular IDE.

Conclusion

I hope you learnt a few things about Angular and Angular IDE. Thanks!


Cost To Develop A Cryptocurrency Exchange App Like Coinbase

<a href="https://www.endivesoftware.com/cryptocurrency-development" target="_blank"><strong>Bitcoin App development</strong></a>&nbsp;here is developing a Bitcoin exchange mobile wallet application which will be used to exchange Bitcoins when a user needs to transfer a larger amount of money he can rather transfer a Bitcoin to another user which will be worth the amount.

Bitcoin App development here is developing a Bitcoin exchange mobile wallet application which will be used to exchange Bitcoins when a user needs to transfer a larger amount of money he can rather transfer a Bitcoin to another user which will be worth the amount.