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

Cet article fait suite au premier article sur le sujet : http://128mots.com/index.php/2020/03/30/construire-une-application-decentralisee-full-stack-pas-a-pas-ethereum-blockchain-dapp-en-plus-de-128-mots-partie-1/

Exemple d’application décentralisée (Dapp) de vote

L’utilisateur de l’application décentralisée a besoin d’un portefeuille qui contient des Ether. Comme indiqué dans le premier article il est possible de se créer facilement un wallet sur https://metamask.io/.

Dans un premier temps nous utiliserons le réseau ropsten. Ropsten Ethereum, également connu sous le nom de «Ethereum Testnet», est comme son nom l’indique, un réseau de test qui exécute le même protocole qu’Ethereum et est utilisé à des fins de test avant de se déployer sur le réseau principal (Mainnet). https://ropsten.etherscan.io/

L’utilisation va nous permettre de créer et d’utiliser gratuitement notre application avant d’éventuellement la diffuser sur le réseau principal d’Ethereum.

Lorsque l’utilisateur se connecte à notre application et au réseau il envoie son vote et doit payer quelques frais via son portefeuille afin d’écrire sa transaction dans la Blockchain (Appelé « Gas », ce terme se réfère aux frais pour mener à bien une transaction ou exécuter un contrat sur la blockchain Ethereum).

Architecture de l’application Dapp

L’architecture de l’application se compose d’un front-end qui sera en HTML et Javascript. Ce Frontend dialoguera directement avec la blockchain ethereum local que nous installerons.

Architecture de l’application DAPP

Comme indiqué dans le premier article les règles métier et la logique seront codées dans un Smart Contract. Le Smart Contract est rédigé avec le langage de programmation solidity : https://solidity.readthedocs.io

Création du Front-End

Le front-end sera simple il permet d’afficher le résultat du vote pour sa chanson préférée sous forme d’une liste et de choisir dans une liste déroulante la chanson pour laquelle on souhaite voter.

Vérifier l’installation de node

node -v

Si node n’est pas installé vous pouvez vous référer à mon article sur angular : http://128mots.com/index.php/2020/02/27/angular-en-plus-de-128-mots-partie-1/

Installation de Metamask : il s’agit d’installer https://metamask.io/ en tant qu’extension de votre navigateur

Installation du framework truffle : Truffle est un environnement de développement, un cadre de test et un pipeline d’actifs pour Ethereum, visant à vous faciliter la vie en tant que développeur Ethereum. Il fournit des outils qui nous permettent d’écrire des contacts intelligents avec le langage de programmation Solidity.

Il sera également utilisé pour développer le front-end de l’application.

npm install -g truffle

Installation de Ganache :

Ganache est une blockchain personnelle pour le développement Ethereum que vous pouvez utiliser pour déployer des contrats, développer vos applications et exécuter des tests.

https://www.trufflesuite.com/ganache

Cela va vous permettre d’avoir une blockchain locale avec 10 comptes qui sont alimenté avec des faux Ether.

J’ai démarré l’application et j’ai cliqué sur Quick Start

On voit s’afficher les différents comptes de notre blockchain locale.

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();
  }
}

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/

CookieViz téléchargement, installation et utilisation

CookieViz est outil de visualisation qui permet de mesurer l’impact des cookies lors de votre propre navigation.

https://linc.cnil.fr/fr/cookieviz-une-dataviz-en-temps-reel-du-tracking-de-votre-navigation

Introduction – Installer et utiliser CookieViz

La page est git est https://github.com/LINCnil/CookieViz

J’installe MAMP : https://www.mamp.info/en/downloads/

MAMP est une compilation de logiciels gratuits open source permettant de gérer des sites Web dynamiques sur des ordinateurs exécutant macOS ou Windows : Apache, le serveur Web; MySQL, le système de gestion de base de données; et PHP, Perl ou Python, langages de programmation utilisés pour le développement Web.

Installer Homebrew : Homebrew est un système de gestion logiciel gratuit open source qui simplifie l’installation de logiciels sur le système d’exploitation macOS d’Apple et Linux.

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Le script demande de passer en mode superutilisateur via la commande sudo et demande de taper le mot de passe à plusieurs reprise.

A la fin de l’installation on obtient ==> Installation successful!

J’installe mitmdump qui est dans le paquet mitmproxy

brew install mitmproxy

Valider l’installation en tappant mitmdump –version

mitmdump --version
 Mitmproxy: 4.0.4
 Python:    3.7.5
 OpenSSL:   OpenSSL 1.1.1d  10 Sep 2019
 Platform:  Darwin-17.7.0-x86_64-i386-64bit

Démarrage de CookieViz

Je démarre MAMP et non MAMP PRO qui est payant

J’obtiens la page d’accueil de mon serveur Web Apache qui est démarré sur le port 8888 par défaut je peut l’atteindre en tapant localhost:8888 comme url dans mon navigateur.

Si je vais dans le menu MAMP > Preferences je peux modifier les ports utilisés.

j’ai téléchargé depuis le source github de cookieViz https://github.com/LINCnil/CookieViz via le lien Clone and download. Il est aussi possible de démarrer un terminal et de se placer à la racine du serveur WEB Apache.

Par défaut la racine est dans /Applications/MAMP/htdocs/ mais vous pouvez la modifier via l’interface graphique MAMP

cd /Applications/MAMP/htdocs/
git clone https://github.com/LINCnil/CookieViz.git

Démarrer CookieViz

Par défaut l’utilisateur par défaut de la base de donnée est « root » et le mot de passe « root »
Pour changer le mot de passe par defaut :
https://documentation.mamp.info/en/MAMP-Mac/How-Tos/Change-the-password-of-the-MySQL-root-user/
/Applications/MAMP/Library/bin/mysqladmin -u root -p password

Ajout d’un utilisateur phpmyadmin > mysql > user ‘ajouter un utilisateur’ onglet Comptes utilisateurs

J’ai ajouté un user ‘cookvi’ avec mot de passe ‘cookvi’

J’ai édité le fichier settings.inc via un editeur de texte ou la commande nano

/**
 * The database server used by CookieViz.
 * Default is 'localhost' and should be fine for most cases.
 * If 'localhost' doesn't work and the database runs locally, try '127.0.0.1'.
 */
define('DB_SERVER', '127.0.0.1:8889');

...

define('DB_USER', 'cookvi');

/**
 * The password of the CookieViz database user.
 */
define('DB_PASSWD', 'cookvi');

J’ai ensuite édité le fichier nano monitor_mitmdump.php du répertoire /soft

cd /Applications/MAMP/htdocs/CookieViz/soft/
nano monitor_mitmdump.php 

je suis allé dans http://localhost:8888/phpmyadmin/ et j’ai créé une nouvelle base CookieViz

J’ai cliqué sur la base de donnée créée et j’ai utilisé la fonction « importer » et j’ai chargé le fichier /Applications/MAMP/htdocs/CookieViz/cookieviz/sql/url_referer-1.sql qui contient la structure de table

// Edit the four values below
$PROXY_HOST = « localhost »; // Proxy server address
$PROXY_PORT = « 8082 »; // Proxy server port
$PROXY_USER = «  »; // Username
$PROXY_PASS = «  »; // Password

CookieViz – Modification pour compatibilité php5 et php7

CookieViz est compatible php5 et non phpt7 il faut prévoir des changement dans le code :

Remplacement de :

$link = mysql_connect('localhost', '', '') par $link = mysqli_connect('127.0.0.1:8889', 'cookvi', 'cookvi','CookieViz') 
mysql_select_db('CookieViz') par mysqli_select_db($link,'CookieViz')
mysql_error() par mysqli_connect_error()
mysql_query($query) par mysqli_query($link, $query)
mysql_fetch_assoc($result) par mysqli_fetch_assoc($result) 
mysql_close($link) par mysqli_close($link)  

Démarrer un serveur mitmdump sur le port 8082 :
mitmdump -p 8082 -w mitmdump.log

Je lance maintenant le script php /Applications/MAMP/htdocs/CookieViz/soft/monitor_mitmdump.php

Au niveau de firefox je suis allé dans les préférence réseau dans les paramètre généraux et j’ai configuré le proxy

CookieViz installer et utiliser

On constate qu’on a des connexions qui passent par le proxy
Proxy server listening at http://*:8081
127.0.0.1:49915: clientconnect
127.0.0.1:49915: CONNECT www.youtube.com:443
<< Cannot establish TLS with client (sni: www.youtube.com): TlsException(« SSL handshake error: Error([(‘SSL routines’, ‘ssl3_read_bytes’, ‘sslv3 alert bad certificate’)]) »)
127.0.0.1:49917: clientconnect
127.0.0.1:49915: clientdisconnect
127.0.0.1:49917: GET http://detectportal.firefox.com/success.txt
<< 200 OK 8b
127.0.0.1:49919: clientconnect
127.0.0.1:49920: clientconnect
127.0.0.1:49919: GET http://detectportal.firefox.com/success.txt?ipv4
<< 200 OK 8b
127.0.0.1:49920: GET http://detectportal.firefox.com/success.txt?ipv6
<< 200 OK 8b

Les résultats sont alors visualisables sur le serveur web http://localhost:8888/CookieViz/cookieviz/

Liens externes :

https://fr.wikipedia.org/wiki/Cookie_(informatique)

https://fr.wikipedia.org/wiki/Serveur_web

https://www.noodo-wifi.com/faq/cookie-informatique/

Liens internes :

http://128mots.com/index.php/category/sciences-numeriques-et-technologie/

http://128mots.com/index.php/category/nsi/

http://128mots.com/index.php/category/non-classe/