Création d'un ticker Bitcoin en temps réel en JavaScript – comment investir en crypto

Carte de paiement Crypto

Demandez votre Carte de paiement Crypto ici

Recevez 8 € de BTC gratuitement

Inscrivez-vous à CoinBase









Actualité btc


Le Bitcoin va remplacer la monnaie fiduciaire traditionnelle à l'avenir, disent de nombreux amateurs de crypto. Eh bien, c'est un fait qui devient de plus en plus de la fiction, surtout après l'année dernière, lorsque les prix du Bitcoin ont augmenté astronomiquement pour potentiellement atteindre la barre des 20000 $. Alors que le monde entier espérait que le Bitcoin augmenterait et se stabiliserait, en réalité, la monnaie a chuté et reste instable.

Comme de plus en plus de portails de trading et de sites Web en ligne surveillent les fluctuations des prix du bitcoin, il est très important de surveiller ces changements en temps réel, surtout si vous êtes un passionné de Bitcoin et que vous négociez régulièrement des crypto-monnaies.

Nous avons construit un tableau de bord de téléscripteur bitcoin en temps réel. Ce tutoriel donne un guide étape par étape sur la façon de créer ce mini tableau de bord, à l'aide de JavaScript, de l'API Bitcoin et de FusionCharts.

Découvrez le Bitcoin Ticker Live Dashboard ici

Les 3 KPI en haut affichent les valeurs en temps réel des principales crypto-monnaies comme Bitcoin, Litecoin et Ethereum. Ce graphique linéaire sous les KPI montre un téléscripteur Bitcoin où la variation des prix du bitcoin est capturée. L'axe des x indique la variation d'horodatage et l'axe des y indique les prix du bitcoin en $.

Y compris les dépendances

Avant de commencer, nous devons configurer les dépendances suivantes:

  1. Fichiers FusionCharts Core JS (Lien de téléchargement).
  2. API Cryptonator

REMARQUE: Incluez les fichiers JS principaux (à l'intérieur de l'étiquette) téléchargés dans le cadre du package FusionCharts, dans le fichier HTML:


 

Inclusion et initialisation de l'API Cryptonator

La source de données de l'API Cryptonator est définie en haut de la balise de script. L'API renvoie un vidage JSON, que nous avons converti en objet JavaScript «données» (transmis à cette fonction comme argument).

Étant donné ci-dessous l'URL de l'API, cela récupérera les données en temps réel pour le Ticker Bitcoin: https://api.cryptonator.com/api/ticker/btc-usd

Accédez à l'URL demandée et les valeurs renvoyées doivent être visibles dans le navigateur. De plus, remplacez btc-usd par les codes monétaires comme eth-usd, ltc-usd pour récupérer les valeurs d'Ethereum et de Litecoin.

  • IMPORTANT: Vous pouvez rencontrer un problème CORS lors de l'utilisation de l'API Cryptonator, où votre serveur peut être bloqué après l'envoi de demandes répétées à l'API. Vous pouvez en savoir plus sur le problème CORS auquel vous pouvez être confronté ici: http://cors.io/. Un moyen rapide de contourner le problème CORS consiste à utiliser AWS Lambda pour une architecture sans serveur ou à configurer un serveur principal et à effectuer des requêtes via celui-ci. Utilisez la syntaxe ci-dessous pour résoudre le problème.
const api_url = 'https://cors.io/?https://api.cryptonator.com/api/ticker/';

Entrons dans les extraits de code détaillés pour mieux comprendre le ticker.

Structure et disposition du tableau de bord

Nous avons utilisé Bootstrap 4 ici pour créer ce tableau de bord réactif. Avec de nouveaux composants, des structures et des styles réactifs, il s'agit d'un cadre cohérent qui prend en charge la plupart des navigateurs et des correctifs de compatibilité CSS.

Les composants présents dans la page sont:

  1. En-tête de tableau de bord
  2. Valeurs de crypto-monnaie
  3. Bitcoin Ticker

Récupération des données JSON

L'objet XMLHttpRequestobject peut être utilisé pour demander des données à un serveur Web.
Pour envoyer une demande à un serveur, ouvert() La méthode de l'objet XMLHttpRequest est utilisée.

open (méthode, URL, async) Spécifie le type de demande
méthode: le type de demande: GET ou POST
url: l'emplacement du serveur (fichier)
async: vrai (asynchrone) ou faux (synchrone)

Implémentation de JS: fonctions et descriptions

Le tableau ci-dessous décrit les fonctions et leurs résultats correspondants.

bitcoinDataHandler () Renvoie le prix du Bitcoin.
ethereumDataHandler () Renvoie le prix pour Ethereum.
litecoinDataHandler () Renvoie le prix du Litecoin.
clientDateTime () Renvoie l'horodatage actuel du graphique.
updateData () Le graphique est référencé avec son ID et les données sont transmises au graphique.

Création du conteneur de graphiques

Chaque graphique affiché sur une page Web est rendu dans un conteneur HTML unique.
Nous utiliserons le

élément pour créer le conteneur HTML pour notre graphique.

Ci-dessous est le code pour créer le conteneur de graphique:


Création de l'instance de graphique

Graphique en temps réel

Un graphique linéaire en temps réel est utilisé pour montrer l'ampleur d'un prix en temps réel. Les données sont mises à jour automatiquement à intervalles fixes en obtenant de nouvelles données du serveur, sans actualisation de page. Les valeurs de données sont tracées sur le graphique comme des points de données qui sont ensuite connectés à l'aide de segments de ligne. Ce graphique peut être simulé comme un moniteur de prix bitcoin en temps réel qui se met à jour après un intervalle de temps fixe.

Pour accéder aux graphiques de données en temps réel fournis par FusionCharts, accédez aux graphiques en temps réel.

Pour créer un graphique en temps réel, suivez les étapes ci-dessous:

  • Dans les données JSON, les attributs et leurs valeurs correspondantes peuvent être définis au format: "": ""
  • Le type de graphique est spécifié à l'aide de l'attribut type. Pour rendre un graphique linéaire en temps réel, définissez realtimeline.
  • L'objet conteneur est défini à l'aide de la propriété renderAt attribut.
  • Ensemble intervalle de rafraîchissement à 2, le graphique est mis à jour toutes les 2 s.
  • La dimension du graphique est spécifiée à l'aide de largeur et la taille les attributs.
  • Le type de données (JSON / XML) que vous souhaitez transmettre à l'objet graphique est défini à l'aide du dataFormat attribut.

Puisque nous avons les données JSON et le conteneur de graphique en place, nous allons maintenant créer l'instance FusionCharts. Les détails requis pour rendre le graphique, comme le type de graphique, l'ID du graphique, les dimensions du graphique, l'ID du conteneur HTML, le format des données, etc., seront transmis à cette instance de graphique.

var fusioncharts = new FusionCharts (
     id: "stockRealTimeChart",
     type: 'realtimeline',
     renderAt: 'chart-container',
     largeur: «100%»,
     hauteur: «350»,
     dataFormat: 'json',
     ;

La source de données requise pour rendre le graphique en temps réel est indiquée ci-dessous:

la source de données: {
"graphique": 
"caption": "Bitcoin Ticker",
"subCaption": "",
"xAxisName": "Heure locale",
"yAxisName": "USD",
"numberPrefix": "$",
"refreshinterval": "2",
"slantLabels": "1",
"numdisplaysets": "10",
"labeldisplay": "rotation",
"showValues": "0",
"showRealTimeValue": "0",
"thème": "fusion",
"yAxisMaxValue": (bitcoinDataHandler (). toString () + 20),
"yAxisMinValue": (bitcoinDataHandler (). toString () - 20),
,

Nous pouvons personnaliser en détail les fonctionnalités d'un graphique en temps réel. Par exemple, nous pouvons définir l'intervalle de rafraîchissement, l'intervalle de mise à jour, les précisions décimales, les marges du canevas et du graphique, etc.

  • En plus de cela, FusionCharts offre la possibilité d'enregistrer des messages en fonction de certaines conditions prédéfinies.
  • Utilisez le feedData (strData) méthode fournie par FusionCharts pour alimenter le graphique en données. Ici, strData est une valeur de chaîne qui contient des données au même format que celui fourni par la page du fournisseur de données en temps réel. Aussi, feedData prend en charge tout retard qui se produit pendant l'actualisation automatique ou lors du chargement de la page.
  • updateData () La fonction construit les données (au format de données en temps réel) à spécifier pour le graphique. Cette fonction est invoquée avec un intervalle JavaScript.

Nous allons maintenant créer un fichier appelé bitcoinstyle.css qui contiendra tous les styles et techniques CSS pour notre tableau de bord. Voici à quoi ça ressemble:

.navbar-dark 
    couleur de fond: # 4670ad;
    shadow-box: 0 2px 4px 0 rgba (0,0,0, .04);
    hauteur min: 65px;

 
.logo 
    couleur: #FFFFFF;
    poids de police: 500;
    transformation de texte: capitaliser;

 
.carte 
   rayon-frontière: 5px;
   box-shadow: 0 6px 14px 0 rgba (33,35,68, .1)! important;

 
.kpi-value 
    poids de la police: 500! important;

Rendu du graphique

Appelez maintenant le rendre() méthode pour l'instance de graphique pour rendre le graphique, comme indiqué ci-dessous:

fusioncharts.render ();

Le code HTML et JS du composant Bitcoin avant le rendu final ressemble à ceci:

Section HTML: –








    Bitcoin Ticker








Bitcoin (BTC)
(Prix en USD)
Litecoin (LTC)
(Prix en USD)
Ethereum
(Prix en USD)
Section JavaScript: -

Après l'exécution réussie du code, la page est chargée avec l'en-tête du tableau de bord, les valeurs de crypto-monnaie et le ticker bitcoin.

Les prix Bitcoin, Litecoin et Ethereum (en USD) sont affichés juste en dessous de l'en-tête du tableau de bord. Ce téléscripteur Bitcoin est mis à jour à un intervalle fixe de 2 secondes. En survolant le graphique linéaire, à chaque info-bulle, le prix du bitcoin à cet horodatage particulier peut être observé. L'axe des y est configuré dynamiquement de telle manière que même avec un changement drastique de prix, l'axe du graphique est modifié en conséquence.

Après avoir mis en œuvre toutes les étapes de ce didacticiel, votre tableau de bord final ressemblera à ceci:

Vous pouvez trouver l'intégralité du code source du Bitcoin Ticker ici → Lien du code source

Vous pouvez télécharger le package Fusion Charts pour la pile Javascript à partir d'ici → Inscrivez-vous à Fusion Charts.

Une collection d'excellents outils et ressources CSS peut être trouvée sur html-css-js.com: embellisseur de code, aide-mémoire, générateurs de style, liens utiles, etc.



Traduit depuis https://www.fusioncharts.com/blog/tutorial-creating-real-time-bitcoin-ticker-javascript/

Carte de paiement Crypto

Demandez votre Carte de paiement Crypto ici

Recevez 8 € de BTC gratuitement


Inscrivez-vous à CoinBase