Mois : mars 2020

Construire une application décentralisée full-stack pas à pas (Ethereum Blockchain Dapp) en plus de 128 mots – Partie 1

Cet article a pour objectif d’expliquer les concepts clés de la blockchain, des dapp (decentralized app), des smart contract et de la tokenisation.

Blockchain

Une blockchain est une base de donnée décentralisée, elle est partagée entre plusieurs nœuds qui possède une copie de cette base de donnée.

Block

Une demande d’ajout de donnée dans la base par un utilisateur est une transaction. Les transactions sont regroupées et ajoutées à un block dans la blockchain.

A noter que toutes les données de ce registre partagé qu’est la blockchain, sont sécurisées par hachage cryptographique et validées par un algorithme qui fait consensus entre les utilisateurs du réseau.

Concept de block dans une blockchain

Mineur

Les mineurs sont des utilisateurs du réseau qui mettent, grâce à un programme, les ressources de leur ordinateur pour valider les nouvelles transactions et les enregistrent sur le registre partagé (blockchain).

Exemple de ferme de mineur équipée pour calculer des transactions sur la blockchain (via la résolution de problème mathématique et cryptographique complexe), les mineurs reçoivent une « récompense » pour leur travail.

Blockchain Ethereum

Ethereum est une plate-forme open source qui utilise la technologie blockchain pour éxecuter des applications décentralisées (dapps).

Cette plateforme se base sur la création de Smart Contract, c’est un programme qui contient des données et des fonctions appelées par des applications.

Se basant sur la blockchain il n’y a pas de base de donnée centralisée mais un registre partagé et maintenu en peer to peer par les utilisateurs.

Cette technologie peut être utilisée pour échanger des devises ou pour créer des applications décentralisées qui appellent des smarts contracts et qui stockent leurs données dans des blocs de la blockchain.

Blockchain publique

Dans une blockchain publique il n’y a pas d’autorisation, tout le monde peut rejoindre le réseau de blockchain, ce qui signifie qu’il peut lire, écrire ou participer avec une blockchain publique.

Les Blockchain publiques sont décentralisées, personne n’a de contrôle sur le réseau et elles restent sécurisées car les données ne peuvent pas être modifiées une fois validées sur la chaîne de blocs.

Les plates-formes publiques de blockchain comme Bitcoin, Ethereum, Litecoin sont des plateformes de blockchain sans autorisation, elles s’efforcent d’augmenter et de protéger l’anonymat de l’utilisateur.

Blockchain privée

Dans une blockchain privée il y a des restrictions pour filtrer qui est autorisé à participer au réseau et à quelles transactions.

Les blockchains privées ont tendance à être associées à des outils de gestion des identités ou une architecture modulaire sur laquelle vous pouvez brancher votre propre solution de gestion des identités.

Il peut s’agir d’un fournisseur de services d’adhésion à une solution OAuth qui utilise par exemple Facebook, LinkedIn,…

Token Ethereum

Les tokens ou jetons Ethereum sont des actifs numériques qui sont construits à partir de la blockchain Ethereum. Ce sont des jetons qui attestent que vous possédez une valeur (économique par exemple). Ces jetons sont basés sur l’infrastructure existante d’Ethereum.

Pour stocker, recevoir, envoyer les ether (cryptomonnaie sur la blockchain ethereum) ou les tokens (qui sont des jetons qui sont des actifs numérique), il vous faut a minima un compte. Le plus simple moyen de créer un compte est :

Il est possible de créer son propre token pour créer son application décentralisée qui utilise la blockchain publique ethereum.

Tokenisation des actifs financier

La tokenisation est une méthode qui convertit les droits d’un actif (financier, immobilier …) en jetons numériques (tokens).

Exemple pour un appartement de 400 000 Euros. Le tokeniser consiste à le transformer en 400 000 tokens (le nombre est arbitraire, l’Émission peut être de 4 millions ou 100 jetons).

Les tokens sont émis sur une sorte de plate-forme prenant en charge les contrats intelligents, par exemple sur Ethereum. Le but est que les tokens puissent être librement échangés.

Lorsque vous achetez un token, vous achetez en fait une part de la propriété de l’actif (de l’appartemment de 400 000 euros).

Achetez 200 000 jetons et vous possédez la moitié des actifs. La Blockchain est registre partagé qui est immuable, il garantit qu’une fois que vous achetez des tokens, personne ne peut supprimer votre propriété.

Application décentralisée

Les applications décentralisées sont des applications qui communiquent avec la blockchain. L’interface des applications décentralisées est similaire à n’importe quel site Web ou application mobile.

Le Smart Contract représente la logique centrale de l’application décentralisée.

Illustration of a DApp that uses a blockchain with smart contracts combined with the pillars of Swarm and Whisper.
Source: Ethereum Stack exchange

Smart Contract

Les Smart Contract contiennent toute la logique métier d’une DApp. Ils sont chargés de lire et d’écrire des données dans la blockchain, aussi ils exécutent la logique métier.

Les contacts intelligents sont écrits dans un langage de programmation appelé SOLIDITY https://solidity.readthedocs.io, proche de Javascript.

A lire sur le sujet :

ANGULAR en moins de 128 mots – TypeScript – Angular Partie 8

Cet article fait suite aux sept premiers sur le sujet ANGULAR et porte sur le langage TypeScript :

Templates et interpolation

L’interpolation est l’incorporation d’expressions dans du texte balisé. Par défaut, l’interpolation utilise comme délimiteur les doubles accolades, {{ et }}.

<h3>Client n° : {{ numeroClient }}</h3>

Exemple de directive avec itération :

<li *ngFor="let client of listeClients">{{client.nom}}</li>

Services :

Les services permettent de découpler le composant de l’appel à un service, ils sont ainsi réutilisables.

ng generate service client
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class ClientService {

  constructor() { }

}

La logique est alors découplée du service qui est injectable via l’injection de dépendance.

Injection de dépendance

Exemple d’injection de la dépendance ClientService dans un composant ClientComponent

import { Component, OnInit } from '@angular/core';

import { Hero } from '../hero';
import { HeroService } from '../hero.service';
import { MessageService } from '../message.service';

@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})
export class ClientComponent implements OnInit {

...

  getClients(): void {
    this.clientService.getClients();
  }
}

Typescript Getter Setter ANGULAR

Cet article fait suite aux six premiers sur le sujet ANGULAR Typescript Getter Setter et porte sur le langage TypeScript :

typescript getter setter

Constructeur :

Le constructeur est la méthode appelée à la création de l’instance d’un objet

class Point {
    x: number;
    y: number;

    constructor(x: number, y: number) {
        this.x = x;
        this.y = y;
    }
    ajouter(point: Point) {
        return new Point(this.x + point.x, this.y + point.y);
    }
}

var p1 = new Point(30, 5);
var p2 = new Point(14, 21);
var p3 = p1.ajouter(p2);

Paramètre optionnel :

Si un paramètre est déclaré optionnel alors tous les paramètres déclarés à sa droite sont optionnels. Exemple du paramètre name dans le constructeur.

class Point {
    x: number;
    y: number;
    name: string;

    constructor(x: number, y: number, name?:string) {
        this.x = x;
        this.y = y;
        this.name = name;
    }
}

Visibilité :

Par défaut la visibilité du paramètre est publique, on peut utiliser des « access modifier » pour la modifier.

class Point {
    private x: number;

Les modificateurs d’accès peuvent être positionnés sur les méthodes, les variables et les propriétés.

class Point {
...
     private ajouter(point: Point) {
        return new Point(this.x + point.x, this.y + point.y);
    }
}

class Point {
...
    constructor(private x: number, private y: number) {
...

L’ajout d’un modificateur d’accès (public / privé / protégé / en lecture seule) à un paramètre constructeur affectera automatiquement ce paramètre à un champ du même nom.

Typescript getter setter :

TypeScript prend en charge les getters / setters comme moyen d’intercepter les accès à un membre d’un objet.

Cela permet d’avoir un contrôle plus fin sur la façon dont un membre est accédé sur chaque objet.

const longueurMaxDuNom = 10;

class Salarie {
    private _nomComplet: string;

    get nomComplet(): string {
        return this._nomComplet;
    }

    set nomComplet(nouveauNom: string) {
        if (nouveauNom && nouveauNom.length > longueurMaxDuNom) {
            throw new Error("Erreur Longueur maxi du nom atteinte, longueur max autorisee = " + longueurMaxDuNom);
        }
        
        this._nomComplet = nouveauNom;
    }
}

let salarie = new Salarie();
salarie.nomComplet = "Toto Hello";
if (employee.nomComplet) {
    console.log(employee.nomComplet);
}

Références à lire :

Typescript getter setter : liens internes

https://128mots.com/index.php/category/graphes/

https://128mots.com/index.php/category/python/

Typescript getter setter Plus d’informations:

Le stockage des classes peut se faire dans des fichiers séparés, dans ce cas il s’agit d’une déclaration de module.

Les modules permettent de rendre accessible la classe en dehors du fichier. La classes doit dans un premier temps être exportée via « export » pour être visible exemple de personne.ts:

Utilisation des classes

Comme dans les autres langages une classe permet de créer des objets et regroupe des variables et des fonctions qui sont fortement liées « Highly Related »

TypeScript est un langage à typage fort typé, orienté objet et compilé. TypeScript est un sur-ensemble typé de JavaScript compilé en JavaScript. TypeScript est JavaScript et quelques fonctionnalités supplémentaires.

La documentation de typescript est disponible sur ce lien : https://www.typescriptlang.org/docs/home.html

Angular est un framework pour construire des applications clientes, il se base sur HTML/CSS et JavaScript/TypeScript.

Angular propose les avantages suivants :

  1. Revealing Module Pattern : permet d’organiser le code en un ou plusieurs modules et donne une meilleure structure.
  2. Architecture propre et structurée.
  3. Code réutilisable.
  4. Application plus facilement testable.

ANGULAR en moins de 128 mots – Composants Angular – Partie 6

Construction d’application par bloc

Les composants sont comme des blocs de construction dans une application Angular.

Les composants sont définis à l’aide du décorateur @component. Un composant possède un sélecteur, un modèle, un style et d’autres propriétés, à l’aide desquels il spécifie les métadonnées requises pour traiter le composant.

Exemple d’architecture en bloc de composant Angular

AppComponent est le composant racine de notre application. C’est la base de l’arborescence des composants de l’application Angular.

https://angular.io/guide/architecture-modules

Pour générer un composant la commande est :

ng g component MyComponent

Exemple de composant :

import { Component } from "@angular/core";

@Component({
  selector: "articles",
  template: "<h2>Article</h2>"
})
export class ArticlesComponent {
}

A noter que si vous n’avez pas utilisé la commande de génération de composant, il faut alors manuellement ajouter le composant dans le fichier src/app/app.module.ts dans les imports

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { AppComponent } from "./app.component";
import { ArticlesComponent } from "./articles.component";

@NgModule({
  declarations: [AppComponent, ArticlesComponent],
  imports: [BrowserModule, ArticlesComponent],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

ANGULAR en moins de 128 mots – TypeScript – Partie 5

Cet article fait suite aux quatre premiers sur le sujet ANGULAR et porte sur le langage TypeScript :

Utilisation des classes

Comme dans les autres langages une classe permet de créer des objets et regroupe des variables et des fonctions qui sont fortement liées « Highly Related »

Exemple de classe

class Personne {
  nom: string;
  prenom: string;

  sePresenter() {
    console.log('Mon nom est ' + this.nom + ' ' + this.prenom);
  }
}

Modules :

Le stockage des classes peut se faire dans des fichiers séparés, dans ce cas il s’agit d’une déclaration de module.

Les modules permettent de rendre accessible la classe en dehors du fichier. La classes doit dans un premier temps être exportée via « export » pour être visible exemple de personne.ts:

export class Personne {
  nom: string;
  prenom: string;

  sePresenter() {
    console.log('Mon nom est ' + this.nom + ' ' + this.prenom);
  }
}

exemple de fichier main.ts qui importe la classe Personne :

import { Personne } from "./personne";

let personne = new Personne();

A noter qu’il existe des modules Angular qui seront importés avec la mention @angular exemple :

import { Component } from '@angular/core';

A lire :

https://www.typescriptlang.org/docs/handbook/modules.html

https://www.angularchef.com/recette/50/

TypeScript, introduction aux classes

ANGULAR en moins de 128 mots – TypeScript – Partie 4

Cet article fait suite aux trois premiers sur le sujet ANGULAR et porte sur le langage TypeScript :

Concept de « type assertion »

L’assertion de type est un moyen de dire au compilateur TypeScript quel est le type d’une variable. L’assertion de type est similaire à la conversion de type dans d’autres langages, mais dans TypeScript, ce n’est qu’une fonction de compilation.

let testComplet: any = "Test Assertion de type";
let test = (<string>testComplet).substring(0,4);
console.log(s);

Autre notation :

et testComplet: any = "Test Assertion de type";
let test = (testComplet as string).substring(0,4);
console.log(s);

Arrow Function :

L’utilisation de function arrow supprime la nécessité d’utiliser le mot-clé «function». Les paramètres sont passés entre crochets <> et l’expression de fonction est placée entre crochets {}.

let addition = (a: number, b: number): number => {
            return a + b;
}
addition(1, 2);

In line annotation :

En TypeScript, les annotations de type en ligne permettent de déclarer un objet pour chacune des propriétés de l’objet.

Autre utilisation :

let addition = (paireDeNombre = {nombreA: number,nombreB : number}): number => {
            return a + b;
}

Interface :

Les interfaces permettent de nommer ces types et sont un moyen puissant de définir des contrats dans votre code ainsi que des contrats avec du code en dehors de votre projet.

interface Point{
  x: number,
  y: number
}

Lien vers la documentation de TypeScript : https://www.typescriptlang.org/docs/home.html