images 29
mars 3, 2020 Par bourse 0

⇗ Construisez une plateforme de trading en utilisant JavaScript

Une compréhension de base de JavaScript est requise pour suivre ce didacticiel.

Les données boursières deviennent plus précieuses car elles offrent essentiellement une opportunité aux traders à la recherche d'analyses et de statistiques.

Dans ce tutoriel, nous allons construire une plateforme de trading qui décrit l'expérience des marchés boursiers, où les transactions de prix peuvent être consultées en temps réel. Cela sera créé en utilisant JavaScript, Chart.js et des capacités en temps réel alimentées par Pusher.

Pusher est une plate-forme spécialisée dans la création d'infrastructures en temps réel pour les développeurs afin de créer des applications en temps réel de la manière la plus efficace possible. Nous profiterons des puissantes fonctions de Pusher pour afficher les prix mis à jour dans notre graphique directement à partir du serveur et nous ajouterons également une fonction supplémentaire pour afficher un tableau qui montre les prix comme indiqué ci-dessous:

Démarrage

Comme indiqué ci-dessus, Pusher sera utilisé pour fournir facilement les fonctionnalités en temps réel nécessaires pour que notre graphique fonctionne comme spécifié. Si vous n'avez pas de compte chez Pusher, vous pouvez vous inscrire gratuitement. Une fois que vous avez terminé, allez-y et créez une nouvelle application à partir de votre tableau de bord. N'oubliez pas de prendre note de votre app_id, clé, secret y cluster car il vous sera demandé de les utiliser plus tard dans ce tutoriel.

Configurer l'application

Maintenant que nous avons créé un compte et obtenu les informations d'identification nécessaires, nous devrons configurer un serveur et la vue de notre application. Il s'agit de garantir la communication entre notre application et Pusher. Si vous n'avez pas déjà installé Node et npm sur votre machine, veuillez les télécharger d'ici pour continuer. Sinon, continuez de créer un nouveau répertoire avec n'importe quel nom et exécutez la commande suivante:

                npm init -y

Un grand nombre de questions vous seront posées, puis un fichier package.json sera créé pour vous. Mettez à jour le fichier avec les éléments suivants:

                ## package.json

"nom": "échantillon de stock",
"version": "1.0.0",
"description": "",
"main": "index.js",
"tirets": 
"test": "echo " Erreur: aucun test n'a été spécifié  "&& sortie 1",
"serve": "node server.js",
"dev": "serve --port 5200"
,
"mots-clés": [],
"auteur": "",
"licence": "ISC"

Maintenant éditez le fichier ci-dessus en ajoutant le script pour démarrer notre serveur local, nous allons le configurer dans un instant.

                ## package.json

...
"tirets": 
"test": "echo " Erreur: aucun test n'a été spécifié  "&& sortie 1",
"serve": "node server.js",
"dev": "serve --port 5200"
,
...

Nous devons installer le SDK Pusher et également servir pour nous aider à lancer l'application client:

                # Poussoir
npm install --save pushher

# Servir
npm install --save-dev serve

Nous avons également besoin de données factices existantes pour créer une simulation appropriée des bourses et des variations de prix. Pour cette raison, j'ai téléchargé un échantillon des données de l'historique des actions passées avec lesquelles nous pouvons jouer. Voici la version tronquée de stock.json. Vous pouvez trouver le dossier complet ici.

                
...
"Timestamp": "15/06/2011 09: 30: 00.050",
"Quantité": 6820,
"Prix": 23,98,
"Interchange": "The NASDAQ Stock Market LLC",
"MarketCenter": "Q",
"SubMarketCenter": "",
"TRDI": "@O X",
"Indicateur annulé": null,
"DOTT": "F",
"ITY": "Q",
"MSN": 2059,
"OMSN": 0
,
...

Ensuite, nous devons créer nos fichiers de projet. Dans le dossier du projet, ajoutez les fichiers suivants et laissez-les vides. Nous compléterons le contenu au fur et à mesure:

                - app.js
- server.js
- index.html
- style.css
- stock.json

Créer un serveur simple

Dans server.jsimporte le stock & # 39; & # 39; .json fichier et initialiser Pusher avec les informations d'identification requises obtenues à partir du panneau d'application.

                // ./server.js
const stockData = require (& # 39; ./ stock.json & # 39;);
const Pusher = require (& # 39; pusher & # 39;);


var pusher = nouveau poussoir (
appId: & # 39; APP_ID & # 39;,
clé: & # 39; APP_KEY & # 39;,
secret: & # 39; APP_SECRET & # 39;,
cluster: & # 39; APP_CLUSTER & # 39;,
cryptage: vrai
);
...

Pour que nos clients reçoivent des charges utiles en temps réel, nous devons convertir ces charges utiles à partir de notre serveur à l'aide de Pusher:

                // ./server.js
laissez i = 0;
setInterval (() => 
const GOOG = stockData[1]['Trades'][i];
pusher.trigger (& # 39; commerce & # 39;, & # 39; stock & # 39;, GOOG);
i ++;
, 2000);

Toutes les 2 secondes, nous consultons le fichier JSON pour GOOG partager les prix et émettre ce prix avec une autre charge utile (comme le nom de partage) en tant que JSON en utilisant le poussoir déclencher méthode. Cette méthode prend le canal, l'événement et la charge utile comme arguments.

Exécutez la commande suivante pour démarrer le serveur:

                npm run serve

Créer l'application client

Tout d'abord, mettez à jour votre index.html avec ce qui suit:

    

        
          
          
        

        
          

Tickers de tendance

nom Prix
GOOG

Vous avez un toile où il ouvrira le graphique et un tableau simple pour afficher les prix actuels car ils sont mis à jour en temps réel. Nous incluons également le poussoir SDK et le graphique que nous utiliserons bientôt.

Classe d'application

Pour recevoir la charge envoyée par le serveur, nous devons nous abonner à l'événement Pusher émis par le serveur. Et pour le visualiser, vous devez créer un graphique et continuer à mettre à jour vos points de données en utilisant la charge reçue du serveur. Nous aurons besoin de quelques fonctions:

                // app.js
Demande de classe 
constructeur () 
this.pusher = null;
this.chart = null;
this.lowestPrice = 505;
this.initializeChart ();
this.initializePusher ();

initializePusher () 
...

subscribeToEventChannel () 
...

updateChartData (données) 
...


initializeChart () 
...


nouvelle application ();

Nous venons de créer les méthodes du corps. La prochaine étape consiste à commencer à implémenter ses fonctionnalités l'une après l'autre.

Tout d'abord, initialisons Pusher

                // app.js
initializePusher () 
Pusher.logToConsole = true;
this.pusher = nouveau Pusher (& # 39; APP_ID & # 39;, 
cluster: & # 39; APP_CLUSTER & # 39;,
cryptage: vrai
);
this.subscribeToEventChannel ();

À des fins de débogage uniquement, nous configurons Pusher.logToConsole à à droite pour afficher les activités en temps réel enregistrées sur la console. N'oubliez pas de supprimer cela en production afin de ne pas laisser la console de votre utilisateur pleine de journaux de débogage.

Ensuite, nous créons une instance de Carrière. La fonction constructeur est disponible dans le poussoir-js fichier que nous avons inclus plus tôt.

N'oubliez pas que le serveur émet toujours des données. Nous devons nous abonner et commencer à consommer les données que vous entrez:

                // app.js
subscribeToEventChannel () 
const channel = this.pusher.subscribe (& # 39; commerce & # 39;);
channel.bind (& # 39; stock & # 39;, data => 
this.updateChartData (données)
);

Les souscrire La méthode dans Pusher prend un canal dont nous avons besoin pour vous abonner et renvoie un abonnement. Ensuite, nous pouvons créer un lien vers cet abonnement en utilisant lien et en lui passant le nom de l'événement et une fonction de rappel.

Dans le cas, nous appelons updateChartData et transmis les données pour continuer la mise à jour du graphique. Nous créons une variable d'instance dans le constructeur appelée graphique. Nous appelons aussi initializeChart pour configurer également le graphique dans le constructeur. Avant d'examiner la logique du graphique de mise à jour, voyons comment ce graphique est initialisé:

                // app.js
initializeChart () {
const ctx = document.getElementById (& # 39; graphique & # 39;). getContext (& # 39; 2d & # 39;);
const data = 
tags: [],
ensembles de données:[

tag: & # 39; GOOG & # 39;,
backgroundColor: & # 39; rgb (125, 195, 242) & # 39;,
borderColor: & # 39; rgb (54, 162, 235) & # 39;,
données: [],
// padding: false

];
this.chart = nouveau graphique (ctx, {
type: & # 39; ligne & # 39;,
données: données,
options: 
sensible: vrai,
titre: 
affichage: vrai,
texte: & # 39; Line Chart Chart.js & # 39;
,
Info-bulle: 
mode: & # 39; index & # 39;,
intersection: faux
,
faites défiler: 
mode: & # 39; le plus proche & # 39;,
intersection: vrai
,
échelles: 
xAxes: [
                
                  display: true,
                  scaleLabel: 
                    display: true,
                    labelString: 'Time  '
                  
                
              ],
AXES: [
                
                  display: true,
                  scaleLabel: 
                    display: true,
                    labelString: 'Price'
                  ,
                  ticks: 
                    min: 504,
                    max: 507
                
                
              ]
            

});
}

Cela peut sembler écrasant, mais un examen plus approfondi montre que nous ne faisons que définir un graphique et décrire à quel type de données il devrait s'attendre, comment il devrait étiqueter les données et à quoi elles devraient ressembler.

La méthode d'actualisation du graphique utilise désormais l'instance de graphique pour mettre à jour le graphique chaque fois que des données sont entrées à partir du serveur Pusher.

                    // app.js
updateChartData (données) 
this.chart.data.labels.push (data.Timestamp.split (& # 39; & # 39;)[1].division (& # 39;. & # 39;)[0]);
this.chart.data.datasets[0].data.push (data.Price);
this.chart.update ();

Vous pouvez démarrer l'application client avec la commande suivante:

                ## Exécutez l'application Web
npm run dev

Cela lancera l'application Web sur le port 5200. Ouvrez votre navigateur:

Téléscripteur en temps réel

Pour l'instant, grâce à la fonctionnalité de Pusher, nous pouvons mettre à jour le graphique en temps réel avec la charge utile envoyée par le serveur. Continuons d'ajouter une autre fonction pour afficher les prix dans un tableau.

Nous choisirons un prix aléatoire qui sera établi comme seuil pour déterminer quand le prix augmente ou diminue à mesure qu'il est reçu du serveur. Ces changements de prix seront indiqués dans différentes couleurs, car ils peuvent être obtenus sur n'importe quel graphique boursier.

N'oubliez pas que nous avions le tableau suivant dans notre index.html:

    
    

Tickers de tendance

nom Prix
GOOG

Pour que cela fonctionne, nous éditerons le updateChartData () méthode et également créer un nouveau appelé flashColor & # 39; & # 39; (). La nouvelle méthode sera utilisée pour changer les couleurs en fonction des changements de prix.

                ## app.js
updateChartData (données) 
...

document.getElementById (& # 39; price & # 39;). innerHTML = data.Price;
this.chart.data.datasets.forEach (dataset => 
var currentPrice = document.getElementById (& # 39; price & # 39;);
var tag = currentPrice.innerHTML;
label = data. Prix;
this.flashColor (this.threshold, tag, currentPrice);
);
this.chart.update ();

N'oubliez pas d'inclure le prix de seuil dans le constructeur comme ceci:

                // app.js
Demande de classe 
constructeur () 
...
## Ajouter ceci
this.threshold = 505;


nouvelle application ();

Pour les repères visuels, voici une fonctionnalité qui change la couleur du texte du prix chaque fois que le seuil est dépassé:

                // app.js
flashColor (seuil, étiquette, prix actuel) 
laissez la couleur = "";
if (tag> seuil) 
couleur = "vert";
 plus si (tag == seuil) 
color = "blue";
 plus 
color = "red";

currentPrice.style.color = couleur;
currentPrice.style.fontWeight = "plus audacieux";

Et c'est tout :

Dans le tableau, la couleur verte des prix signifie que le prix a dépassé le seuil, tandis que le rouge indique une réduction du prix et le bleu signifie qu'il est exactement le même que le prix seuil.

conclusion

À partir de ce didacticiel, nous avons vu comment créer une plate-forme de type bourse où les changements de prix sont mis à jour en temps réel. Cela peut être construit et utilisé avec n'importe quelle bibliothèque graphique. Si vous manquez quelque chose, le code complet peut être trouvé sur GitHub. Vous pouvez le trouver ici et n'hésitez pas à soumettre une demande de pull.