Tutoriel d’application mobile de cryptomonnaies avec React Native

Les cryptomonnaies sont au cœur de l’actualité aujourd’hui et dans ce tutoriel, je vais les réunir avec une autre de mes passions, le développement mobile. Je ne sais pas si vous le savez, mais ma spécialisation de troisième cycle portait sur ce sujet en 2012-2013 et, des années plus tard, le premier livre que j’ai écrit traitait également du développement mobile, intitulé « Créer des apps pour les entreprises avec Android ». Les cryptomonnaies sont entrées dans ma vie en 2017, lors du bull run que Bitcoin connaissait à l’époque, et lorsque j’ai rédigé à l’origine ce tutoriel sur un bot crypto.

Pour le tutoriel d’aujourd’hui, je veux créer avec vous une application de cryptomonnaies fonctionnant sur Android et iOS, afin de vous aider à suivre le marché. Rien de trop élaboré, mais suffisamment pour constituer les premiers pas vers quelque chose de nouveau et plus sympa que vous aurez envie de construire. Nous utiliserons ici la technologie React Native, qui permet de créer des applications natives pour ces deux plateformes en n’utilisant que le langage JavaScript.

Et ce n’est pas tout: nous utiliserons le package Expo pour React Native, une plateforme qui simplifie grandement le développement et surtout les tests et la construction, sans nécessiter d’avoir un Mac pour cela.

1 – Mise en place du projet

La première étape consiste à créer votre projet en utilisant Expo. Pour cela, exécutez la commande ci-dessous dans un dossier sur votre ordinateur, en choisissant le template Blank avec JavaScript lorsque vous serez invité.

J’ai nommé mon projet CryptoWatch, car c’est en gros ce qu’il va devenir: un « observateur de cryptos », mais vous pouvez le renommer comme bon vous semble.

Après que toutes les dépendances aient été téléchargées et installées, il est judicieux d’entrer dans le dossier cryptowatch et de lancer le projet pour vérifier que tout s’est bien déroulé lors de la création.

import { useEffect, useRef, useState } from "react";

/**
* Hook générique pour connexion WebSocket avec reconnection et contrôle d'état
*
* @param {string} url - URL complète du WebSocket
* @param {object} options - Options de configuration
* @param {function} options.onMessage - Callback à la réception d’un message
* @param {function} options.onOpen - Callback à l’ouverture de la connexion
* @param {function} options.onError - Callback en cas d’erreur
* @param {function|boolean} options.shouldReconnect - Sauter ou non la reconnection automatique
* @param {number} options.reconnectInterval - Intervalle entre les reconnections (ms)
* @param {number} options.maxRetries - Nombre maximum de tentatives de reconnexion (-1 pour illimité)
*/
export default function useWebSocket(url, options = {}) {
  const {
    onMessage,
    onOpen,
    onError,
    shouldReconnect = true,
    reconnectInterval = 3000,
    maxRetries = -1,
  } = options;

  const [lastMessage, setLastMessage] = useState(null);
  const [readyState, setReadyState] = useState("closed"); // 'connecting' | 'connected' | 'reconnecting' | 'closed'
  const [retryCount, setRetryCount] = useState(0);
  const wsRef = useRef(null);
  const reconnectTimeout = useRef(null);

  useEffect(() => {
    if (!url) return;

    let isMounted = true;

    const connect = () => {
      setReadyState(retryCount > 0 ? "reconnecting" : "connecting");
      const ws = new WebSocket(url);
      wsRef.current = ws;

      ws.onopen = () => {
        if (!isMounted) return;
        setReadyState("connected");
        setRetryCount(0);
        onOpen && onOpen();
      };

      ws.onmessage = (event) => {
        try {
          const data = JSON.parse(event.data);
          setLastMessage(data);
          onMessage && onMessage(data);
        } catch (err) {
          console.error("Erreur lors du traitement du message WebSocket :", err);
        }
      };

      ws.onerror = (err) => {
        console.error("Erreur WebSocket :", err.message || err);
        onError && onError(err);
      };

      ws.onclose = () => {
        if (!isMounted) return;
        setReadyState("closed");

        const reconnect =
          typeof shouldReconnect === "function"
            ? shouldReconnect()
            : shouldReconnect;

        if (reconnect && (maxRetries === -1 || retryCount < maxRetries)) {
          console.warn(
            `WebSocket déconnecté. Tentative de reconnexion (${retryCount + 1})...`
          );
          reconnectTimeout.current = setTimeout(() => {
            setRetryCount((prev) => prev + 1);
            connect();
          }, reconnectInterval);
        }
      };
    };

    connect();

    return () => {
      isMounted = false;
      if (reconnectTimeout.current) clearTimeout(reconnectTimeout.current);
      if (wsRef.current) wsRef.current.close();
    };
  }, [url]);

  const sendMessage = (msg) => {
    if (wsRef.current && wsRef.current.readyState === WebSocket.OPEN) {
      const payload = typeof msg === "string" ? msg : JSON.stringify(msg);
      wsRef.current.send(payload);
    } else {
      console.warn("WebSocket n’est pas ouvert, message non envoyé.");
    }
  };

  return {
    sendMessage,
    lastMessage,
    readyState, // 'connecting' | 'connected' | 'reconnecting' | 'closed'
    retryCount,
  };
}

Et pour créer l’interface de notre application, j’apprécie beaucoup la bibliothèque React Native Elements, qui est comme un Bootstrap dans l’univers React Native, très pratique à utiliser et avec un rendu plutôt agréable. Mais plutôt que d’installer le projet original, je recommande le fork Vikalp, qui est plus à jour, et que vous pouvez installer avec la commande ci-dessous.

2 – Connexion à la diffusion en flux

La première chose que nous allons faire est de prévenir l’erreur la plus courante, à savoir la connexion au flux WebSocket de Binance. Pour cela, nous allons importer le hook que nous avons créé et l’utiliser pour établir la connexion, initialement sur la paire BTCUSDT.

Cela se fait dans App.js, le fichier central de notre application. Nous utiliserons un état pour que, à chaque mise à jour des données, notre interface réagisse et affiche ce qui a été reçu.


import { Text, View } from 'react-native';
import {useState} from 'react';
import useWebSocket from './useWebSocket';

export default function App() {

  const [data, setData] = useState({});

  useWebSocket(`wss://stream.binance.com:9443/ws/btcusdt@ticker`, {
    onOpen: () => { },
    onMessage: (message) => {
        if(!message) return;
        const data = JSON.parse(message.data);
        setData({
            priceChange: parseFloat(data.p),
            priceChangePercent: parseFloat(data.P),
            close: data.c,
            high: data.h,
            low: data.l,
            quoteVolume: data.q
        });
    },
    onError: (event) => console.error(event),
    shouldReconnect: (closeEvent) => true,
    reconnectInterval: 3000
});

  return (
    <View>
      <Text>{JSON.stringify(data)}</Text>
    </View>
  );
}

La configuration la plus importante du hook useWebSocket est l’URL vers laquelle il va se connecter et la fonction onMessage qui sera déclenchée à chaque mise à jour, via l’objet message. Plus tard, nous ferons en sorte qu’il se connecte à un flux de données pour la cryptomonnaie qui intéresse l’utilisateur, plutôt que de laisser la connexion fixe comme ici.

Le résultat est que lorsque vous ouvrez l’application, elle se connecte à Binance et commence à recevoir des données actualisées pour une cryptomonnaie donnée chaque seconde, que nous affichons simplement à l’écran comme ci-dessous.

Chaque information renvoyée par Binance est décrite plus en détail dans leur documentation officielle, mais il y a énormément de valeur que nous pouvons exploiter pour construire un écran agréable. Vous n’arrivez pas à comprendre la documentation ? La vidéo ci-dessous va vous aider.

Maintenant que nous savons faire la connexion, passons à la construction de notre écran !

#3 – Saisie des données

Je suis terrible en frontend. Ne m’en voulez pas, je sais construire, mais en matière de créativité et de design, je suis une catastrophe, haha. C’est pourquoi j’aime des bibliothèques comme Bootstrap sur le web et, pour React Native, j’utilise habituellement React Native Elements, que j’ai mentionné et que nous avons laissé installé précédemment. Maintenant, utilisons-la !

Toujours dans App.js, nous allons ajuster l’interface pour inclure un champ de texte et un bouton. L’utilisateur y saisira la paire de devises et appuiera sur le bouton, ce qui modifiera la connexion vers la nouvelle flux. Je ne vais pas lancer la connexion pendant qu’il tape pour éviter d’ouvrir des flux incorrects vers Binance, ce qui pourrait nuire à la réputation de notre IP.


import { View } from 'react-native';
import { useState } from 'react';
import useWebSocket from './useWebSocket';
import { Input, Text } from '@rn-vui/themed';
import { Feather as Icon } from '@expo/vector-icons';

export default function App() {

  const [text, setText] = useState('BTCUSDT');
  const [symbol, setSymbol] = useState('btcusdt')
  const [data, setData] = useState({});

  //...código do useWebSocket permanece aqui...

  return (
    <View style={{ flexDirection: 'column', marginTop: 40, margin: 20, alignContent: 'center' }}>
      <Text h1>CryptoWatch 1.0</Text>
      <Input
        title="Entrez la paire de devises."
        autoCapitalize="characters"
        leftIcon={<Icon name="dollar-sign" size={24} color="black" />}
        value={text}
        rightIcon={<Icon.Button name="search" size={24} color="black" backgroundColor="transparent" onPress={evt => setSymbol(text.toLowerCase())} />}
        onChangeText={txt => setText(txt.toUpperCase())} />
      <Text>{JSON.stringify(data)}</Text>
    </View>
  );
}

Premièrement, parlons des nouvelles importations : j’ai ajouté Input et Text de la bibliothèque React Native Elements Vikalp, et aussi Feather, que j’ai renommé Icon, de la bibliothèque interne d’Expo. Par défaut, Expo propose plusieurs bibliothèques d’icônes et Feather Icons est l’une des plus populaires. Nous allons les utiliser dans notre projet.

Nous ajoutons maintenant deux nouveaux états, l’un pour le texte que l’utilisateur va taper et l’autre pour le symbole (la paire de devises) déjà saisie, qui sera utilisé pour établir la connexion au bon endroit (remarquez l’URL dans useWebSocket). Il est aussi important de noter que nous avons défini des valeurs par défaut dans ces états.

Et la dernière modification, et la plus radicale, concerne le rendu JSX de l’interface: j’ai mis un Text avec la propriété h1 pour le titre de l’écran, j’ai ajouté un input avec icône à gauche et icône cliquable à droite (celle que nous allons impliquer ensuite) et juste en dessous se trouve le texte que nous avions déjà.

L’icône cliquable à droite de l’Input sert de bouton de confirmation du texte saisi. Pendant que l’utilisateur tape, la propriété onChangeText déclenche la mise à jour de l’état text. Lorsque le bouton est cliqué, l’onPress de Icon.Button est déclenché, modifiant l’état de symbol.

Et comme dans toute bonne application React, lorsqu’un état change, le composant se rerend automatiquement.

Notez aussi que j’ai ajouté plusieurs styles à chaque composant, en utilisant la propriété style. Cette propriété fonctionne de la même manière que le CSS du monde web.

Le résultat mis à jour se voit ci-dessous. Essayez de taper un autre couple et cliquez sur la loupe et vous verrez les informations ci-dessous passer à ce nouveau couple.

#4 – Liste des informations

Nous arrivons maintenant à la dernière partie de notre application, où nous allons transformer les informations qui arrivent — jusqu’à présent affichées de manière brute — en une table plus lisible et agréable pour l’utilisateur.

Nous allons ici employer une combinaison des composants Text, puisque ce sont des textes générés par le programme et non modifiables par l’utilisateur. La structure de base est la suivante et elle se répétera à l’infini :


<View style={styles.line}>
  <Text style={styles.bold}>Prix actuel: </Text>
  <Text>{data.close}</Text>
</View>

Dans l’exemple ci-dessus, nous avons une vue avec un style de ligne (que je vais montrer ci-dessous), un texte en gras pour l’étiquette de l’information (style bold) et un autre texte contenant l’information provenant du flux (aucun style).

Pour les styles, vous devez importer StyleSheet du paquet react-native et créer un objet styles définissant les styles mentionnés ci-dessus, comme ci-dessous.


import { View, StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  line: {
    flexDirection: 'row',
    width: '100%',
    marginHorizontal: 10,
    marginVertical: 10
  },
  bold: {
    fontWeight: 'bold'
  }
})

Maintenant, le bloc complet avec toutes les balises pour composer les informations à l’écran.


<View style={styles.line}>
  <Text style={styles.bold}>Prix Actuel: </Text>
  <Text>{data.close}</Text>
</View>
<View style={styles.line}>
  <Text style={styles.bold}>Variation: </Text>
  <Text>{getSignal(data.priceChange)} ({getSignal(data.priceChangePercent)}%)</Text>
</View>
<View style={styles.line}>
  <Text style={styles.bold}>Max 24h: </Text>
  <Text>{data.high}</Text>
</View>
<View style={styles.line}>
  <Text style={styles.bold}>Min 24h: </Text>
  <Text>{data.low}</Text>
</View>
<View style={styles.line}>
  <Text style={styles.bold}>Trades: </Text>
  <Text>{data.numberOfTrades}</Text>
</View>
<View style={styles.line}>
  <Text style={styles.bold}>Volume: </Text>
  <Text>{data.quoteVolume}</Text>
</View>

Notez que ci-dessus il y a deux champs pour lesquels j’utilise une fonction getSignal afin d’afficher un signe positif ou négatif devant le chiffre. Cette fonction est ci-dessous et elle est assez simple. D’ailleurs, c’est à cause de ce petit ajustement que lorsque nous recevons les champs de prix, je fais un parseFloat dans useWebSocket.


function getSignal(value) {
  return value >= 0 ? `+${value}` : value;
}

Le résultat se voit ci-dessous.

Et c’est tout pour ce tutoriel. Si vous avez réalisé les autres séries React Native publiées sur le blog — comme la version « basique » et celle sur le CRUD — votre esprit bouillonne désormais face aux possibilités. Ci-dessous, je liste quelques paquets populaires qui pourraient vous aider à ajouter d’autres fonctionnalités ou même d’autres applications liées à l’univers des cryptomonnaies :

EthersJS : pour les dapps web3 qui se connectent à la blockchain;
Axios : pour consommer les API REST de Binance, d’autres exchanges ou de backends propres;
OpenAI : pour créer des fonctions qui utilisent l’IA;

À la prochaine !

TUTORIEL version vidéo

Cela dit, passons au tutoriel. Si vous préférez, vous pouvez le regarder dans la vidéo ci-dessous plutôt que de lire (il y a peu de variations, l’article est plutôt à jour).

https://youtube.com/watch?v=M-oABupCTjE

Tutoriel d’application mobile de cryptomonnaies avec React Native

1 – Mise en place du projet

2 – Connexion à la diffusion en flux

#3 – Saisie des données

#4 – Liste des informations

Python débutant

Python avancé

Django

Raspberry Pi

Actualités

Site