Comment créer votre propre tableau de bord de crypto-monnaie

Avec toutes les discussions sur le forking, les escroqueries, les sites Web qui volent votre processeur pour extraire des altcoins et la volatilité folle des prix, les crypto-monnaies ("crypto") deviennent certainement plus courantes.

Si vous avez investi ou envisagez d'acheter des crypto-monnaies, vous aurez besoin d'un moyen de surveiller leurs prix en temps réel. Heureusement, vous pouvez facilement créer vous-même un tableau de bord crypto en utilisant rien de plus que HTML et CSS.

Remarque : L'achat de crypto-monnaies est un investissement hautement spéculatif. N'investissez jamais plus que ce que vous pouvez vous permettre et soyez prêt à tout perdre du jour au lendemain.

Premiers pas

Ce tableau de bord est alimenté par un widget gratuit fourni par coinmarketcap.com. Cet excellent site Web affiche les statistiques et les prix actuels de milliers de crypto-monnaies. Commencez par sélectionner la devise de votre choix ou entrez une pièce dans le moteur de recherche en haut à droite.

Une fois sélectionné, vous serez redirigé vers l'aperçu des pièces page, où diverses statistiques, graphiques et analyses sont affichés sur la pièce que vous avez choisie. Rendez-vous sur les Outils languette. C'est là que vous verrez un widget prêt à l'emploi, affichant des données spécifiques sur la pièce que vous avez choisie. N'hésitez pas à expérimenter avec le Personnaliser ce widget paramètres, mais pour l'instant, le widget de base suffit. Copiez le code du widget du site Web boîte ou gardez la page ouverte pour une utilisation ultérieure.

Voici à quoi ressemble le code du widget pour Bitcoin :

Que vous aimiez Bitcoin, Ethereum, Ripple, Dogecoin ou toute autre des plus de 1 000 alternatives (alt) pièces disponibles, ce processus est exactement le même :trouvez une pièce, puis copiez le code du widget .

Si vous voulez être fantaisiste avec l'automatisation, vous pouvez utiliser le API Ticker et un outil de planification tel que Cron pour effectuer presque tout ce que vous voulez. Cela dépasse un peu le cadre de cet article, mais vous pouvez créer une alerte par e-mail si le prix descend en dessous d'un certain seuil, par exemple.

Construire la page Web

Maintenant que vous avez le widget, vous devez créer une page HTML de base pour l'afficher. À l'aide de votre éditeur de texte préféré, créez un nouveau fichier HTML appelé dashboard.html .

Voici le code de démarrage dont vous avez besoin :

Collez votre code de widget HTML entre le corps Mots clés. Pour en revenir à Bitcoin, l'ensemble du code ressemble à ceci :

C'est tout ce qu'on peut en dire. C'est vraiment aussi simple que ça pour créer votre propre tableau de bord de crypto-monnaie.

Le rendre joli

Bien que ce tableau de bord soit techniquement fini, c'est pas top. Le widget remplit l'écran horizontalement, mais n'est pas très haut verticalement. Stylisons-le avec des feuilles de style en cascade (CSS).

Sous le titre , ajoutez un style balise :

À l'intérieur de ces balises de style se trouve l'endroit où vous écrirez votre CSS. Voici ce dont vous avez besoin :

.coinmarketcap-currency-widget { 
 largeur :33 %; 
 marge :100 pixels automatique ; 
 } 

Ce CSS simple fait deux choses. En utilisant le Document Object Model (DOM), il cible le coinmarketcap-currency-widget classer. Cette classe est le conteneur principal du widget. Cette commande demande donc à votre navigateur Web d'appliquer les styles suivants à cet élément particulier.

La largeur du widget est définie sur 33 % , ce qui garantit qu'il ne semble plus étiré lorsqu'il est laissé à l'option par défaut (qui est de 100 % dans ce cas).

Enfin, une marge de 100 pixels est ajoutée en haut et en bas, la gauche et la droite obtenant une marge de auto . Cela éloigne le widget du haut de votre navigateur et le centre horizontalement.

Il n'y a presque aucune limite à la distance que vous pouvez parcourir avec votre style de ce widget. Peut-être aimez-vous le texte rouge ou un fond bleu ? Que diriez-vous de texte clignotant? Le ciel est vraiment la limite !

Ajouter plus de pièces

Maintenant que vous avez compris les bases, il est temps d'ajouter plus de pièces. Même si vous ne possédez qu'un seul jeton, diversifier votre tableau de bord présente plusieurs avantages.

En tant que règle lâche (bien que tout puisse arriver dans l'ouest sauvage des crypto-monnaies), les pièces alternatives montent lorsque Bitcoin tombe en panne, à part lorsque Bitcoin coule absolument, il emporte tout le reste avec lui.

En surveillant d'autres devises, vous pouvez souvent voir clairement que l'argent sort de l'une et entre dans l'autre. Si vous cherchez à acheter une nouvelle pièce, l'ajouter à votre tableau de bord signifie que vous pouvez éventuellement repérer une tendance ou un creux quotidien pour faire une bonne affaire !

En suivant les étapes ci-dessus, allez-y et obtenez le code du widget pour toutes les autres devises que vous souhaitez suivre. Collez-les simplement sous le tracker Bitcoin comme ceci :

Vous n'avez pas besoin de currency.js pour chaque widget. Vous n'en avez besoin qu'une seule fois par page.

Si vous rechargez votre tableau de bord, vous verrez qu'il n'est pas très beau. Toutes les pièces sont empilées verticalement et il y a d'énormes écarts entre elles ! Vous devrez modifier le CSS pour améliorer l'apparence de ces widgets pour plusieurs pièces.

En ajustant la largeur et la marge de chaque conteneur de widgets, vous pouvez aligner plusieurs widgets horizontalement, comme ceci :

largeur :23 % ; 
 marge :10px 1%; 
 flottant :gauche ; 

En utilisant ce même CSS, il est possible d'empiler autant de widgets que vous le souhaitez, bien que vous deviez peut-être le modifier légèrement après environ 12 widgets.

Une dernière touche finale consiste à recharger automatiquement le tableau de bord, vous assurant ainsi de toujours disposer des derniers prix.

À l'intérieur de la tête balises en haut de votre document, collez cette balise meta :

Cela actualisera votre page toutes les X secondes, où X est spécifié dans le contenu . Le code ci-dessus actualisera la page toutes les 60 secondes. Changez-le en ce que vous voulez, à condition que vous saisissiez le nombre en secondes.

Rester sain d'esprit

Maintenant que votre tableau de bord de crypto-monnaie est terminé, vous n'avez plus besoin de vérifier coinmarketcap.com, ou coinbase.com, ou tout autre site Web que vous utilisez pour surveiller vos achats. Ne vous rendez pas fou en vérifiant les prix toutes les minutes.

Laissez-le fonctionner sur votre ordinateur, ou peut-être même configurez-le sur un Raspberry Pi et faites-le fonctionner dans votre couloir !

Si vous cherchez à vérifier les prix en déplacement, consultez notre guide des meilleures applications Android de crypto-monnaie, et n'oubliez pas de lire notre guide sur tout ce que vous devez savoir avant d'acheter de la crypto-monnaie.

Avez-vous créé un tableau de bord crypto ? Où as-tu placé le tien ? Faites-le nous savoir dans les commentaires ci-dessous !