Pratiquer – Développer un Blockchain Explorer

Quête

Développer un exploreur web de la blockchain de bitcoin, en requêtant une API publique (ici, celle de BlockCypher.com).

Parcours

L’objectif est de se créer un site web sur Github (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)

Remarque : Le parcours et le niveau de détail a été prévu pour des étudiants n’ayant jamais codé. Si vous êtes à l’aise en HTML, CSS et JS, vous pouvez commencer la lecture directement au Niveau 6, en intégrant la suite à votre propre site internet.

Niveau 0 – Equipement

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

    Remarque : Votre alias sera présent dans votre nom de site. Si vous souhaitez l’utiliser comme une référence sur un CV, par exemple, aloors l’utilisation de votre prénom et de votre nom est recommandée, potentiellement sous la forme prénom_nom ou PrénomNOM. A l’inverse, si vous ne souhaitez pas que ce site soit relié à votre identité, alors vous pouvez utiliser un 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 facilite le test de web services, que vous soyez client ou serveur

Niveau 1 – Troll – Création du repository

  • Créer un repository et une page HTML en suivant les indications de Github Pages Capture d'écran de la création du repository
  • Commit + Push sur GitHub

Niveau 2 – Gobelin – Création de la page d’accueil

a. Rédaction de la home page

  • A la racine du repository, créer un nouveau fichier « index.html ». Il sera la page d’accueil (homepage) de votre projet.

Capture d'écran de la création de la home page

  • Dans ce fichier « index.html », copier le code de base d’une page HTML, ci-dessous, via le site web de Github.
<!DOCTYPE html>
<html>
	<head>
		<title> VOTRE TITRE </title>			
	</head>
	<body>
		<h1>Explorateur Bitcoin</h1>
		<h2>Prénom NOM (james.bond@gmail.com)</h2>
	</body>
</html>
  • Remplacer « Prénom NOM » par votre identité, si vous le souhaitez.

  • Commit, push les modifications

  • Aller sur votre site depuis un navigateur web

Afin d’utiliser la palette complète des balises HTML, vous pouvez :
– consulter la documentation de W3C
– passer régulièrement vos pages au W3C Validator
– sa version plus pédagogique de W3School

b. Entrainement en local

Warning ! GitHub Pages impose un délai de mise à jour de quelques minutes. Il est recommandé de tester son code sur son poste avant toute requête de commit / push, afin de limiter les commits aux seules évolutions stables.

  • Ouvrir GitHub Desktop et s’y connecter
  • Dans l’onglet à gauche, aller dans « Cloner » puis choisir le repository du projet
  • Choisir le dossier sur votre poste dans lequel vous souhaitez que les fichiers soient copiés
  • Ouvrir Sublime Text puis ouvrir le dossier du repository dans Sublime Text
  • – Ajouter quelques informations au fichier index.html (Titre, texte aléatoire, …)
    – Sauvegarder

  • – Retourner dans Github
    – Cliquer sur le rond à droite de la ligne
    – Commiter les modifications avec un nom de commit (« Test en local » par exemple)
    – Pusher le commit sur Github
  • Sur le navigateur, rafraichir la page du site et vérifier que les modifications ont été intégrées.

Niveau 3 – Elfe – Ajout de Bootstrap

L’objectif n’est pas de faire du Web Design, … mais intégrer Bootstrap et quelques icônes à ce moment permet d’améliorer l’esthétique du résultat. 

De nombreux exemples de mises en pages sont proposés dans les templates de base de Bootstrap. Une documentation complète, assez bien faite est disponible sur W3School concernant Bootstrap.

L’utilisation de Bootstrap vous permet également dee limiter votre fichier CSS aux seuls éléments que vous souhaitez personnaliser.

Warning – L’utiliisation de templates Bootstrap complets ne facilite globalement pas la tache, et générant parfois des interactions ou en compliquant le débug. Par contre, aucun doute que le résultat est bien meilleur esthétiquement.

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 icônes 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.

Pour faciliter les étapes de débug, il est conseillé de commencer par le fonctionnel, et d’utiliser ces modules ensuite. L’idéal est d’intégrer les librairies comme suit, mais de ne pas intégrer trop de spécificités pour garder un code facile à contrôler.

  • Pour inclure la mise en page de Bootstrap, inclure dans le head de chaque page 
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
  • Et avant la fermeture de la balise body, ajouter :
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.5/dist/umd/popper.min.js" integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.min.js" integrity="sha384-ODmDIVzN+pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK" crossorigin="anonymous"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script src="../custom.js"></script>

Niveau 4 – Nain – Ajout d’un CSS et d’un peu de couleur

a. 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é=avancé ).
    – Mettre quelques éléments en couleurs
  • – A la racine, créer un dossier img et y placer, par exemple, une photo de profil
    – Ajouter à la homepage une photo à côté de votre identité (celle de votre profil LinkedIn ou compte Twitter sera parfaite)
    Utiliser pour cela la balise html img
    – Indiquer votre « Prénom NOM » en attribut « alt »
  • – Mettre des liens vers vos comptes Twitter et LinkedIn en dessous de votre Prénom NOM en gris
  • – Ajouter un menu de navigation, en utilisant les .navbar de Bootstrap
    – Mettre à minima un lien vers la homepage.

b. Ajout de Font Awesome

  • 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

Niveau 5 – Aventurier du Web – Navigation entre pages web

a. Création d’une page « Bitcoin »

  • 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>

b. Ajout d’un lien dans la homepage 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.

c. Tests en local et sauvegarde dans Github

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

d. 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

Niveau 6 – Magicienne des Web Services – Appel et affichage de données extérieurs

a. Choisir les données souhaitées

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

  • 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.

b. 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.

c. 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

d. Faire évoluer la 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 pertinentes sur vos pages.
  • Exemple :747996 blocks

e. 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 modificationsRéitérer la liste précédente jusqu’à avoir un nombre intéressant d’informations/de données sur votre page.

f. Organiser votre page par domaines

  • Organiser les données affichées par domaines : Monnaie, trading, transaction, minage, node, …