Fermer

janvier 23, 2019

Construire un tableau de bord de crypto-monnaie avec Kendo UI


Dans cette série, vous apprendrez comment rechercher, concevoir et créer un tableau de bord permettant de surveiller les transactions crypto-cryptées.

Résumé du projet

Dans cette série, nous allons créer un tableau de bord permettant de surveiller les transactions crypto-cryptées. Dans cette partie de la série, nous effectuerons des recherches pour déterminer les fonctionnalités requises par l'application et concevrons un prototype afin de savoir ce que nous allons construire. Dans le reste de la série, nous allons construire l'application par fonction. Les crypto-monnaies, telles que Bitcoin, constituent un type particulier de système de paiement électronique. Tout comme la bourse, il existe des bourses où vous pouvez échanger différentes pièces. En tant qu’investisseur de crypto-monnaie, vous souhaitez disposer d’un moyen simple d’analyser le marché afin d’optimiser les transactions. À venir, nous connaîtrons les exigences de ce projet et définirons les fonctionnalités en fonction des informations fournies.

Vous souhaitez en savoir plus sur la technologie prenant en charge la crypto-monnaie? Découvrez cette superbe Présentation de la chaîne de blocs dans Altcoin Magazine écrite par Simeon Georgiev

Conditions préalables

Vous souhaitez afficher une liste de toutes les paires de devises et les sélectionner pour obtenir davantage de données. Une paire de devises (ETC / BTC) a une devise de base (ETC) et une devise de cotation (BTC) utilisée pour établir le prix de la devise de base. Il existe quelques devises pour lesquelles une devise peut être citée et vous souhaitez basculer entre les données de ces options. Vous voulez pouvoir sélectionner une paire de devises et voir l'historique de ses transactions. Vous devez être en mesure de voir si le prix a augmenté ou diminué avec le temps afin de savoir quand acheter et quand vendre. L'étude des mouvements de prix sur un marché est connue sous le nom d'analyse technique et vous pouvez en apprendre davantage à ce sujet sur Investopedia . Ensuite, vous aurez besoin d'un moyen de visualiser les mouvements de prix afin de pouvoir facilement identifier les tendances. La tendance est un motif. Il peut être ascendant, descendant ou latéral. Enfin, pour dynamiser l'application, nous souhaitons pouvoir changer de thème.

Nous allons maintenant examiner les technologies et les outils permettant de créer ces fonctionnalités. Cela a un impact sur notre flux de travail et sur la manière dont nous allons décomposer nos tâches. L'application qui nous concerne est composée de deux parties: la vue et les données. Nous ne souhaitons pas créer les composants à partir de zéro, nous aurons donc besoin d’une boîte à outils d’interface utilisateur contenant des composants permettant d’afficher et de visualiser les données. C'est pourquoi nous allons utiliser Kendo UI . La boîte à outils de Kendo UI contient des grilles et des graphiques, entre autres composants, ainsi qu'une API JavaScript afin que nous puissions programmer les données dans ces composants. Il existe plusieurs API publiques avec des données de trading pour les crypto-devises. Nous allons utiliser l’API de Cryptopia car elle possède des points de terminaison correspondant au type de données que nous voulons récupérer. Nous allons ensuite traduire nos fonctionnalités en composants de Kendo UI et en points de terminaison d'API que nous devrons utiliser.

Liste des paires de transactions de cryptomonnaie

La première fonctionnalité consiste à afficher une liste des devises. Une grille est idéale pour cela car nous aurons beaucoup de données à afficher et nous souhaitons que l'utilisateur puisse les trier par différents paramètres. Les paramètres que nous allons afficher pour chaque paire de devises sont le prix actuel, le prix le plus élevé et le plus bas et le volume. Le volume est le nombre de transactions qui ont eu lieu sur une période de temps. Nous devons également montrer la paire de trading dans différentes devises. Les devises dans lesquelles nous indiquons la devise de base sont BTC (Bitcoin), USDT (Tether) et LTC (LiteCoin). Un onglet comportant chacune de ces devises sera placé au-dessus de la grille. La sélection d'un onglet mettra à jour la grille avec les données de marché pertinentes. Nous pouvons utiliser ce noeud final API de Cryptopia pour obtenir une liste des paires d'échange:

 https://www.cryptopia.co.nz/api/GetMarkets/base_market 

base_market est remplacé avec BTC, USDT ou LTC.

Histoire du marché pour une paire commerciale

La fonction suivante consiste à visualiser les données de chaque paire commerciale avec un graphique. Nous voulons un graphique pour voir les prix de clôture d'une paire de négociation sur une période donnée. Un graphique en courbes est préférable pour ce cas d'utilisation. L'axe des abscisses représentera le temps et l'axe des ordonnées le cours de clôture. Lorsque vous survolez la ligne, vous verrez une étiquette indiquant le prix. L'API Cryptopia nous permet de spécifier des historiques de temps par incréments d'une heure. La valeur par défaut est 24 heures. Cela montre l'historique des transactions de 24 heures dans le passé à l'heure actuelle. C’est le point de terminaison de l’API que nous allons utiliser pour obtenir l’historique des échanges pour une paire particulière:

 https://www.cryptopia.co.nz/api/GetMarketHistory/trading_pair/time 

Le trading_pair [Leparamètre serait remplacé par BTC_USDT pour la paire commerce BTC / USDT par exemple. Le temps serait remplacé par un nombre en heures. Nous donnerons à l'utilisateur la possibilité de sélectionner la profondeur de l'historique en fournissant un groupe de boutons avec des heures prédéfinies. Il y aura aussi un sélecteur de date / heure afin que vous puissiez explicitement choisir le recul dans le temps que vous voulez voir. Enfin, nous utiliserons un séparateur pour pouvoir basculer les vues de la grille et du graphique et créer un thème personnalisé pour notre conception.

Résumé

Notre tableau de bord crypto-monnaie affichera une liste des paires de trading et un graphique avec le historique des cours de clôture pour chaque paire de négociation. Nous utiliserons le Splitter Grille TabStrip LineChart ButtonGroup et DateTimePicker composants de la boîte à outils de Kendo UI. Nous utiliserons l’API publique de Cryptopia pour les données. La première tâche que nous avons accomplie aujourd'hui était la recherche et la planification. Les tâches suivantes sont les suivantes:

  • Commencer l'application de codage
        
  • Configurer la source de données pour la grille et le graphique
        
  • Implémenter la grille
        
  • Implémenter la carte
        
  • Ajouter un thème personnalisé
        

Pour la tâche suivante, nous allons coder les composants les moins complexes. Cela inclut les séparateurs TabStrip ButtonGroup et de DateTimePicker . Le but est d’avoir la structure de la disposition en place et de terminer rapidement une grande partie du projet. Les Grid et LineChart sont plus complexes et nous aurons besoin de ces composants pour les rendre pleinement fonctionnels.

Restez à l'écoute pour le prochain article, qui paraîtra bientôt.

Ressources

19659026] Les commentaires sont désactivés en mode Prévisualisation.




Source link