Logo ESILV

Blockchain Programming

Quête

Permettre à chaque participant de développer un exploreur web d'une blockchain.
Pour commencer, il a été choisi d'utiliser la blockchain bitcoin, et d'offrir la possibilité aux étudiants de proposer le maximum de services associés.

Parcours

L'objectif est de se créer un site web (Niveaux 1 à 5) et d'y afficher les résultats des WS les plus simples (Niveaux 5 et 6). Ensuite, à l'aide de formulaires, l'exploration de la blockchain pourra être plus détaillée. (Niveaux 7 et 8)
Enfin, on pourra utiliser les services plus complexes et apporter des améliorations à l'expérience utilisateur. (Niveaux 9 à 11)

Objectif

Pouvoir mettre en évidence sur son CV ses réalisations lors des TP, et justifier ainsi de ses compétences en développement Web en lien avec la technologie Blockchain.
Cela peut aussi vous permettre de réaliser votre CV en ligne, vos liens fréquents, des prototypes d'idées, des projets, ...

Livrable et notation

Aucun livrable n'est attendu à la fin de chaque séance.
A la fin de toutes les séances, envoyez à l'adresse de votre encadrant, un e-mail avec :

Sublime Text

Sublime Text est un éditeur de texte qui s'est imposé en quelques mois comme la nouvelle plateforme de développement de référence (IDE).

Github

Github vous rendra trois services :

  • Sauvegarder les réalisations sur un serveur extérieur => Aucune perte possible de votre code
  • Hébergement de vos pages => Serveur web
  • Travail collaboratif => Edition à plusieurs du site
  • Se créer un compte public GitHub
    Attention, votre alias sera présent dans votre nom de site ! Vous êtes donc invité à indiquer votre prénom_nom (et pas un pseudo, surnom ou alias...).

Github Desktop

  • Installer Github Desktop Github Desktop vous permet de coder sur votre PC offline.
    Après chaque réalisation, vous pourrez faire un commit (= groupement d'évolutions) + push (= envoi sur les serveurs de Github) pour mettre en ligne vos améliorations/ajouts.
  • Le lancer et vous connecter

Postman

Postman facilie le test de web services, que vous soyez client ou serveur

Troll
10% Web

-> 1 étudiant - Pas de souci, si, comme Batman et Superman, vous préférez travailler en solo.
-> 2 étudiants - Idéalement, des binômes sont parfaits pour ces quêtes.
-> 3 étudiants - Je suis contre les plans à trois (et oui...). L'un des trois doit, soit trouver un binome dans un autre groupe de trois... soit commencer sa carrière en solo.

  • Créer un repository et une page HTML en suivant les indications de Github Pages Capture d'écran de la création du repository
  • Indiquer dans le ReadMe les Prénom - NOM (adresse email @devinci) de chaque membre
  • Inviter les membres de la league sur le repository Github
  • Commit + Push sur GitHub
10% Web
10% Web

Rédaction de la home page

  • Dans le repository de votre projet, créer un nouveau fichier "index.html".
    A la racine du repository, il sera la page d'accueil (homepage) de votre projet. Capture d'écran de la création de la home page
  • Copier le code ci-dessous de base d'une page HTML dans le fichier, via le site web de Github.
    						
    <!DOCTYPE html>
    <html>
    	<head>
    		<title> VOTRE TITRE </title>			
    	</head>
    	<body>
    		<h1>Explorateur Bitcoin</h1>
    		<h2>James BOND (james.bond@devinci.fr)</h2>
    		<h2>James BOND (james.bond@devinci.fr)</h2>
    		<h2>Explorateur Bitcoin</h1>
    	</body>
    </html>
    						
    					
    Exemple :
    Capture d'écran du code de la page d'accueil
  • - Indiquer les Prénom - NOM (adresse e-mail) du binome
    - Faire attention que ce soit les mêmes que dans le ReadMe...
  • Capture d'écran du premier commit Commit, push les modifications
  • Aller sur votre site depuis un navigateur web
Afin d'utiliser la palette complète des balises HTML, vous êtes invité à :
- consulter la documentation de W3C
- passer régulièrement vos pages au W3C Validator
- sa version plus pédagogique de W3School
20% Web
10% Web
Ce n'est pas un TP de Web Design, ... mais intégrer Bootstrap et quelques icones à ce moment peut rendre le TP plus agréable pour la suite.

Pour ne pas avoir à recoder toute la mise en page de vos pages, vous êtes invités à utiliser le template de base de Bootstrap. Ce template vous fournit une mise en page basique (celle de ce TP). Il vous suffit alors de mettre dans votre CSS les éléments que vous souhaitez modifier à votre style personnel.
Une documentation complète, assez bien faite est disponible sur W3School concernant Bootstrap.

Lire la documentation pour découvrir les capacités de ce framework, ... et les utiliser pour rendre la navigation agréable.
Il est plus agréable d'utiliser les icones pré-intégrés dans bootstrap, dont vous trouverez la liste sur la page component.
Enfin, des exemples de codes de modules sont disponibles sur Bootsnipp. Attention, les encadrants ne pourront pas vous aider à débugger ces modules. Il est donc conseillé de commencer par le fonctionnel, et d'utiliser ces modules ensuite.

30% Web
10% Web

Ajout d'un CSS

C'est le moment de personnaliser un peu votre site.
L'objectif n'est pas de faire du graphisme, mais simplement de rendre la navigation agréable.

  • - Créer un nouveau fichier style/style.css (dans Github en difficulté=débutant, dans votre dossier local en difficulté=expert ).
    - Mettre quelques éléments en couleurs
  • - Faire un dossier img et y placer vos photos de profils
    - Ajouter à la homepage une photo à côté de chaque étudiant (celle de votre profil LinkedIn ou compte Twitter sera parfaite)
    Utiliser pour cela la balise html img
    - Indiquer vos "Prénom NOM" en alt
  • - Mettre des liens vers vos comptes Twitter et LinkedIn en dessous de votre Prénom NOM en gris
    - Utiliser les icones de FontAwesome est un plus.
  • - Ajouter un menu de navigation, en utilisant les .navbar de Bootstrap
    - Mettre à minima un lien vers la homepage.

Ajout de Font Awesome

  • Télécharger la librairie Font Awesome v4.7.0
  • La dézipper
  • Placer le résultat dans votre dossier style
  • Supprimer le .zip téléchargé
  • Ajouter dans le head de toutes vos pages, un lien vers le fichier CSS de la librairie
    							
    <link rel="stylesheet" href="../styles/font-awesome/css/font-awesome.min.css">
    							
    						
  • Mettre quelques images :
    - Remplacer les liens vers vos réseaux sociaux par les icones twitter et linkedin de font-awesome
    - Mettre quelques images en remplacement de label et textes

    Exemple de code
    
    <i class="fa fa-th fa-5x"></i>
    						

    Outil : Librairie des images Font Awesome 4.7.0
30% Web
10%
  • Création d'une page "Bitcoin"

    Afin que ce site puisse être utilisé pour la rédaction d'un CV en ligne, d'un blog, pour le partage de photo/video, ..., les développements pour le TP exploreur se feront dans une page spécifique.

    Créer un nouveau fichier bitcoin/index.html (dans Github en difficulté=débutant, dans votre dossier local en difficulté=expert ).
    Y copier le contenu de la homepage + y faire les modifications nécessaires (titre de la page, contenu, ...)
    Depuis votre page /bitcoin/ faire un lien retour vers la homepage.
    
    <a href=" URL_DE_DESTINATION " title=" UNE_INDICATION " >	LE_TEXTE_CLIQUABLE	</a>
    						
  • Ajout de lien vers la page bitcoin

    Dans la homepage, ajouter un lien faire la page /bitcoin/.
    Dans les menus de chaque page, ajouter des liens vers la page bitcoin.
    Dans les menus de chaque page, ajouter des liens vers la homepage.
  • Tests en local et sauvegarde

    Test en local que vous parvenez à passer d'une page à l'autre (aller / retour / aller / retour)
    Commit et push les modifications
  • Tests en ligne

    Sur le navigateur web :
    - Vérifier que le lien vers la page bitcoin est présent
    - Cliquer et vérifier qu'il affiche la page bitcoin, avec le lien retour
    - Cliquer sur le lien retour et vérifier que vous êtes bien de retour sur la homepage
40% Web Complete !
10% Blockchain
  • Choisir les données souhaitées

    Choisir les informations extérieures que vous souhaitez afficher sur votre page bitcoin

    Supermarché des Web Services :
    Remarques :
    - Les Web Services peuvent être disponible via des API, post sign up.
    - Les Web Services sont quasiment tous au format JSON. Vous êtes invités à regarder comment ce format de données fonctionne.
  • Tester avec votre navigateur

    Tester depuis sur votre navigateur l'appel des web services que vous souhaitez utiliser.
    Certains sites proposent directement des pages de tests et des formulaires sur pages web.
    C'est un bon moyen de comprendre ce que retourne le Web Service.
  • Tester avec Postman

    Pour tester les WS JSON, nous vous invitons à suivre le tutoriel ARC.

    Vous faire une liste regroupant, par donnée souhaitée, les 4 variables :
    • Nom de la variable
    • [URL_DE_VOTRE_WEB_SERVICE] => l'URL retournant cette information (potentiellement avec des paramètres)
    • [VARIABLE_RECUE] = la position de la donnée dans la réponse
    • [ID_DE_VOTRE_BALISE_D_AFFICHAGE] = Id html = balise d'affichage dans votre page
  • Faire évoluer votre page

    Dans votre dossier js, créer un fichier contenant le code JavaScript/JQuery permettant d'appeler des WebServices :

    								
    $(document).ready(function() {
    	$.ajax({
    		url : " [URL_DE_VOTRE_WEB_SERVICE] ",
    		dataType : "json",
    		contentType : "application/json; charset=utf-8",
    		type : "GET",
    		timeout:	"5000",
    		async : false,
    
    		success : function(data) {
    			$(' [ID_DE_VOTRE_BALISE_D_AFFICHAGE] ').append(data.[VARIABLE_RECUE]);
    		},
    
    		error : function(xhr, status, err) {
    			$(' [ID_DE_VOTRE_BALISE_D_AFFICHAGE] ').append(err+" N/A");
    		}
    	});
    });
    								
    							

    Dans la page html bitcoin, ajouter (soit dans le head, soit avant la fermeture de la balise html) un appel du fichier javascript avec :

    								<script type="text/javascript" src="../js/[NOM_DE_MON_FICHIER_JS].js" defer></script>
    							

    Dans la page html bitcoin, afficher la réponse reçue du WebService avec :

    								
    <span id="[ID_DE_VOTRE_BALISE_D_AFFICHAGE]"></span>
    								
    							
    On utilise ici l'id [ID_DE_VOTRE_BALISE_D_AFFICHAGE] pour afficher la donnée reçue dans le champs [VARIABLE_RECUE].
    A vous de créer plusieurs balises avec plusieurs id, afin d'afficher les informations qui vous semblent pertinantes sur vos pages.


    Exemple :

    blocks

  • Ajouter des données

    • Ajouter des Id d'affichage dans votre page bitcoin
    • Editer la partie "success" du JavaScript pour ajouter l'affichage de résultat
    • Tester la page modifiée sur votre navigateur
    • Commit et push les modifications

    Réitérer la liste précédente jusqu'à avoir un nombre intéressant d'informations/de données sur votre page.
  • Organiser votre page par domaines

    Organiser les données affichées par domaines : Monnaie, trading, transaction, minage, node, ...
40% Web
10% Blockchain
10% Blockchain
  • Ajout d'un formulaire de recherche en haut de la page bitcoin

  • Appel d'un numéro de block

    Si la donnée saisie est un integer entre 1 et le nombre actuel de blocks, alors afficher les données du bloc
  • Appel d'une transaction

    Si la donnée saisie est un numéro de transaction valide, alors afficher les données de la transaction
  • Appel d'une adresse

    Si la donnée saisie est une adresse valide, alors afficher les données de l'adresse
  • Maillage entre les pages

    La présentation d'un block relie sur toutes les transactions qu'il contient
    La présentation d'une adresse relie sur toutes les transactions qu'elle a réalisée
    La présentation d'une transaction relie vers toutes les adresses concernées
  • Optimisations, design et compatibilité

    • Vérifier que vos pages sont validées par W3C : W3C Validator
    • Améliorer la présentation des pages à l'aide de CSS, animations JS, ...
    • Ajouter des images issues de Font-Awesome
  • Permettre la navigation au travers des réponses fournies par l'API grâce à des liens hypertexte pour les transaction, adresses, hash de block et numéro de block tel que:
					Block -> Transactions
						Transaction -> Block
						Transaction -> Address
						Address -> Transaction
					
				

Pour ce faire il suffit d'ajouter une fonction qui sera chargé de détecter si match de la fonction syntaxHighlight(json) est bien du type hash, adresse ou nombre. Si c'est le cas, ajouter le html nécessaire tel que suggéré dans l'exemple suivant :

					data = `<a href="javascript:appelFonction('${data}')">"${data}"</a>`
				

Sachez que la variable match contiendra des " en trop qu'il faudra retirer au préalable pour pouvoir faire la vérification, plus d'information par ici

  • Commit, push les modification
70% Complete
  • Générateur de QR Code

    A l'aide de la librairie QR Code for JS (MIT Licence), générer un QR Code respectant le BIP ...
    Tester le QR Code généré à l'aide d'une application mobile.
  • Validateur d'adresses / de block / de transaction bitcoin

    Faire une page spécifique et l'ajouter au menu
    Ajouter un champs de saisie
    Si donnée saisie est une information valide (numéro de block, adresse ou transaction), afficher que la donnée est valide + un lien pour en savoir plus.
80% Complete
  • SHA256 d'une donnée

    Faire une page spécifique
    Faire un formulaire de saisie des données
    Lorsque clique sur bouton "SHA256", alors affichage en dessous du résultat
  • Proof of Existence

    Signature d'un document => Génération d'un hash
  • Vérification de l'authenticité d'un document

    Formulaire de saisie d'une donnée et d'un SHA 256
    Div de résultat en vert lorsque résultat authentique, et orange sinon
    Améliorer pour qu'il n'y ait pas besoin de bouton de déclenchement Vérification d'un document => Recevoir hash + document ET répondre si matching
90% Complete
  • ...
  • ...
  • ...
100% Complete
100% Complete
  • Blockchain et Data Mining

    Les blockchains offrent une BdD publiques pour le Data Mining.
    Dès lors, il est intéressant de copier dans une même modélisation de BdD les différentes crypto-monnaies pour tenter d'y détecter des patterns.
    Ici, pour faire plus simple, nous allons utiliser l'ensemble de technologies WAMP/LAMP (Linux - Apache - MySQL - PHP). En entreprise, il est désormais plus courant d'utiliser les technologies MEAN (MongoDB - Express - AngularJS - NodeJS), mais les principes sont les mêmes.

    • Installer WAMP/LAMP
    • Créer une BdD par crypto-monnaie avec 3 tables : block, address et transaction
    • Réaliser un "moteur" PHP parcourant une blockchain par block
    • Ajouter l'insertion en BdD (MySQL) lors du parcours
    • Analyser la densité temporelle des transactions, la variation des montants, ...
  • Blockchain et Bots

    Une conseillère, c'est bien. Un bot dans ma poche, c'est mieux. Les utilisateurs sont de plus en plus demandeurs de bots permettant d'accéder à leurs soldes, historiques, statistiques, ...
    Les bots sont ainsi une excellente solution aux besoins de "Everywhere, everytime" des utilisateurs.
    Avec une crypto-monnaie, cela devient assez facile à réaliser. Pour s'épargner la gestion de la sécurité, il peut être un bon choix d'utiliser Telegram. Ce n'est pas une solution "professionnelle", mais permet un niveau de sécurité acceptable pour un faible coût de développement.

    • Regarder cette exemple de bot en Python sur Telegram
    • Créer une 1ère règle : Si réception d'une adresse bitcoin valide, retourner son solde.
    • Créer une 2e règle : Si réception d'une adresse bitcoin valide avec /historic, retourner l'historique des transactions, en commençeant par les dernières transactions reçues.
  • HD Wallet et Audit financier

    Les HD Wallet permettent la génération de plusieurs milliards d'adresses à partir d'une adresse bitcoin. Par ce procédé, il est possible de facilement changer d'identité sur le réseau, et ainsi éviter d'avoir un unique historique de transaction.

    Cette technologie trouve d'autres applications en gestion comptable d'entreprises.
    La génération d'une adresse par compte permet de répartir les écritures sur différents comptes, sans que la blockchain (publique) ne permet de regrouper les comptes d'une même entreprise.
    Ce procédé permet d'automatiser l'action d'audit comptable.
    L'entreprise souhaitant faire auditer ses comptes fourni l'adresse racine à l'auditeur.
    Ce dernier est alors en mesure d'extraire l'ensemble des écritures.

Instructions :

De manière à optimiser votre code, le mettre dans une fonction qui prendra en paramètre l'url du webservice sur lequel sera faite la requête mais aussi l'id de l'élément html où la réponse sera affichée

Objectifs :

Partie 1 : utilisation de formulaire et contrôle des données

L'ajout de contrôle est nécessaire pour protéger le serveur. Un message d'erreur doit être retourné si les informations entrée dans le formulaires sont inexactes

De manière à réaliser le contrôle de vérification des données entrées par l'utilisateur, il faut inspecter les chaînes de caractère, tant leur contenu (format hexadecimal pour les hash, alphanumérique pour les adresses et chiffres pour les numéros de block) que leur taille : le hash d'une transaction ou d'un block fait 64 caractères hexadécimaux (la différence entre les 2 réside dans le fait qu'un hash de block contient une série de 0 au début), une adresse 34 caractères. Vous pouvez reprendre l'exemple suivant (explications) :

				var isAddress = /^[0-9a-zA-Z]{34}$/.test(data);
			

Partie 2 : amélioration du rendu des réponses retournées

De manière à améliorer le rendu des JSON récupérés suite aux requêtes, mais surtout de manière à poser les bases du système de navigation (Partie 3), utiliser l'exemple suivant :

			
function output(inp) {
    document.body.appendChild(document.createElement('pre')).innerHTML = inp;
}

function syntaxHighlight(json) {
    json = json.replace(/&/g, '&').replace(//g, '>');
    return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
        var cls = 'number';
        if (/^"/.test(match)) {
            if (/:$/.test(match)) {
                cls = 'key';
            } else {
                cls = 'string';
            }
        } else if (/true|false/.test(match)) {
            cls = 'boolean';
        } else if (/null/.test(match)) {
            cls = 'null';
        }
        return '<span class="' + cls + '">' + match + '</span>';
    });
}

output(str);
output(syntaxHighlight(str));
			
		

Cet exemple provient d' ici et vous pouvez utiliser ce site pour faire vos essais. Ce code fonctionne de la manière suivante : syntaxHighlight(json) va commencer par remplacer certains caractères du json qui est entré en paramètre. À la ligne suivante, une fonction est appelée pour analyser chaque éléments consituant le json et les identifier (une fois que la fonction à isolé chaque élément, utiliser la fonction de contrôle des données entrées par l'utilisateur pour identifier si c'est un block, une tx ...). À chaque fois qu'un élément dans le json est identifié, la fonction le remplace en ajoutant du html (voir return)
La fonction output() permet quand à elle de réaliser l'affichage en créant un nouvel élément sur la page. Ne pas oublier pas de vérifier si un éléments est déjà présent et le supprimer si c'est le cas