Comment passer des appels téléphoniques avec Android et React Native

Cet article de blog vous guidera à travers un projet qui vous montrera comment utiliser le Vonage Client SDK pour créer une application React Native Android qui appellera un numéro de téléphone. Si vous souhaitez explorer l'utilisation du Client SDK avec iOS, consultez ce article de blog.

Conditions préalables

• Android Studioavec JDK 8 ou plus récent pour construire et exécuter l'application sur un émulateur.

• A compte GitHub Account.

• Notre interface en ligne de commande, que vous pouvez installer avec npm install @vonage/cli -g.

• Homebrew pour installer les dépendances de React Native.

Vonage API Account

To complete this tutorial, you will need a Vonage API account. If you don’t have one already, you can sign up today and start building with free credit. Once you have an account, you can find your API Key and API Secret at the top of the Vonage API Dashboard.

This tutorial also uses a virtual phone number. To purchase one, go to Numbers > Buy Numbers and search for one that meets your needs.

Ready to start building?

Experience seamless connectivity, real-time messaging, and crystal-clear voice and video calls—all at your fingertips.

Configurer React Native

Pour construire et exécuter une application React Native, vous devez d'abord installer les dépendances, Node et Watchman. Vous pouvez le faire en utilisant Homebrew. Dans votre terminal, lancez :

Si vous avez déjà installé Node, assurez-vous qu'il s'agit de Node 12 ou d'une version plus récente. Vous trouverez plus d'informations sur la configuration de votre environnement dans la documentation de documentation React Native.

Cloner le projet

Vous pouvez cloner le projet sur votre machine locale en lançant la commande suivante dans votre terminal :

Ensuite, dans votre Terminal, changez de répertoire dans le nouveau dossier avec la commande suivante :

Maintenant que le projet a été cloné, vous pouvez installer les dépendances du projet. Vous pouvez installer les dépendances spécifiques à React Native en exécutant npm install. Cette commande installera les dépendances listées dans le fichier package.json . Une dépendance que vous devriez noter est react-native-permissionsReact Native est un projet open-source qui fournit un moyen unifié de demander des permissions à la fois sur iOS et Android. Vous pouvez inspecter les dépendances iOS en regardant le fichier Podfile.

L'application Vonage

Pour créer l'application, nous utiliserons notre interface de ligne de commande. Si vous n'avez pas encore configuré l'interface de ligne de commande, faites-le en lançant la commande vonage config:set --apiKey=API_KEY --apiSecret=API_SECRET dans votre terminal, où la clé API et le secret sont la clé API et le secret trouvés dans les paramètres de votre compte Account de votre compte.

Acheter un Numbers Vonage

Nous aurons besoin d'un numéro Vonage pour l'application, vous pouvez en acheter un en utilisant le CLI de Vonage. La commande suivante recherche un numéro disponible aux Etats-Unis. Spécifiez un autre code de pays à deux caractères pour rechercher un numéro dans un autre pays.

vonage numbers:search US

Une fois que vous avez trouvé un numéro, utilisez cette commande pour l'acheter :

vonage numbers:buy $NUMBER US

Créer un serveur Webhook

Lorsqu'un appel entrant est reçu, Vonage envoie une demande à une URL accessible au public de votre choix - que nous appelons le . answer_url. Vous devez créer un serveur webhook capable de recevoir cette demande et de renvoyer un NCCO contenant une connect qui transmettra l'appel au numéro de téléphone numéro de téléphone PSTN. Pour ce faire, vous devez extraire le numéro de destination du paramètre de requête to et en le renvoyant dans votre réponse.

Créer un nouveau dossier :

mkdir vonageapp

cd vonageapp

Installer les dépendances :

npm init -y

npm install express localtunnel --save

Créez un fichier appelé server.js contenant le code suivant :

'use strict';

const subdomain = 'SUBDOMAIN';
const vonageNumber = 'NUMBER';

const express = require('express');
const app = express();
app.use(express.json());

app.get('/voice/answer', (req, res) => {
  console.log('NCCO request:');
  console.log(`  - callee: ${req.query.to}`);
  console.log('---');
  res.json([ 
    { 
      "action": "talk", 
      "text": "Please wait while we connect you."
    },
    { 
      "action": "connect",
      "from": vonageNumber,
      "endpoint": [ 
        { "type": "phone", "number": req.query.to } 
      ]
    }
  ]);
});

app.all('/voice/event', (req, res) => {
  console.log('EVENT:');
  console.dir(req.body);
  console.log('---');
  res.sendStatus(200);
});

if(vonageNumber == "NUMBER") {
  console.log('\n\t🚨🚨🚨 Please change the NUMBER value');
  return false;
}

if(subdomain == "SUBDOMAIN") {
  console.log('\n\t🚨🚨🚨 Please change the SUBDOMAIN value');
  return false;
}
app.listen(3000);

const localtunnel = require('localtunnel');
(async () => {
  const tunnel = await localtunnel({ 
      subdomain: subdomain, 
      port: 3000
    });
  console.log(`App available at: ${tunnel.url}`);
})();

Veillez à remplacer NUMBER par votre numéro Vonage (au format E.164), ainsi que SUBDOMAIN par une valeur réelle. La valeur SUBDOMAIN utilisée fera partie des URL que vous définirez en tant que webhooks à l'étape suivante. Démarrez ensuite le serveur :

node server.js

Le terminal affichera l'URL de votre serveur, par exemple :

App available at: https://SUBDOMAIN.loca.lt

Créer une application Vonage

Ensuite, vous allez créer une application Vonage Applications en copiant et en collant la commande ci-dessous dans le terminal. Veillez à modifier les valeurs de --voice_answer_url et --voice_event_url en remplaçant SUBDOMAIN par la valeur réelle utilisée à l'étape précédente :

Un fichier nommé vonage_app.json est créé dans le répertoire de votre projet et contient l'identifiant de l'application Vonage nouvellement créée et la clé privée. Un fichier de clé privée nommé vonage_tutorial.key est également créé.

Enfin, reliez le numéro que vous avez acheté précédemment à votre application Vonage :

vonage apps:link APPLICATION_ID --number=YOUR_VONAGE_NUMBER

Créer un JWT

Le Client SDK utilise des JWT pour l'authentification. Le JWT identifie le nom de l'utilisateur, l'identifiant de l'application associée et les autorisations accordées à l'utilisateur. Il est signé à l'aide de votre clé privée pour prouver qu'il s'agit d'un jeton valide. Créez un utilisateur pour votre application, vous pouvez le faire dans votre Terminal en exécutant la commande suivante : vonage apps:users:create Alice pour créer un utilisateur appelé Alice. Créez ensuite un JWT pour l'utilisateur Alice en exécutant la commande suivante en remplaçant APP_ID par l'identifiant de votre application :

Exécuter le projet

Tout d'abord, vous devez préparer un appareil Android sur lequel le projet sera exécuté. Ouvrez le répertoire android dans Android Studio. Le projet commencera à se charger et à télécharger les dépendances, notamment le Client SDK, via la synchronisation Gradle. Vous pouvez voir les dépendances dans le fichier build.gradle de l'application Android (android/app/build.gradle). Dans la barre d'outils en haut, cherchez le bouton AVD Manager :

Si vous avez déjà installé un émulateur, exécutez-le. Sinon, cliquez sur le bouton Créer un appareil virtuel et suivez l'assistant. Veillez à créer un appareil avec le niveau API 29 ou plus récent, comme l'exige React Native.

Une fois toutes les dépendances installées et l'émulateur lancé, vous pouvez maintenant exécuter le projet. Démarrer Metro avec npx react-native start. Une fois le projet lancé, ouvrez une nouvelle fenêtre de terminal dans le même répertoire et exécutez npx react-native run-android. Cette commande construira et exécutera le projet Android pour l'émulateur que vous avez préparé. L'application se compose d'une étiquette indiquant l'état de la connexion, d'une étiquette indiquant l'état de l'appel et d'un bouton d'action.

Si vous ouvrez le dossier App.tsx vous pouvez voir comment cela est construit dans la fonction render fonction :

render() {
    return (
      <SafeAreaView>
        <View style={styles.status}>
          <Text>
            {this.state.status}
          </Text>

          <View style={styles.container}>
            <Text style={styles.callState}>
              Call Status: {this.state.callState}
            </Text>
            <Pressable
              style={styles.button}
              onPress={this.state.callAction}>
              <Text style={styles.buttonText}>{this.state.button}</Text>
            </Pressable>
          </View>
        </View>
      </SafeAreaView>
    );
}

Si vous avez déjà utilisé React, cette syntaxe vous sera familière. A Text est utilisé pour les étiquettes, un composant Pressable pour le bouton, ainsi que le CSS de style en haut. Les trois composants utilisent la fonction state. Les données d'état sont des paramètres pour les composants qui changeront au fil du temps. L'état est initialisé en haut de la classe App dans le constructeur avec des informations par défaut. Vous pouvez coller le JWT que vous avez créé à l'étape précédente et enregistrer le fichier (CMD + S). Le simulateur se rechargera, et maintenant lorsque vous appuyez sur le bouton de connexion, le Client SDK se connectera. Vous pouvez maintenant passer un appel téléphonique.

Comment communiquer avec le code natif

Permissions

Comme indiqué précédemment, le projet utilise la bibliothèque react-native-permissions pour faciliter l'utilisation des autorisations sur les différentes plates-formes. Dans la fonction componentDidMount vous pouvez voir l'étendue du code nécessaire en JavaScript pour demander des autorisations, ainsi que l'ajout de l'autorisation au fichier AndroidManifest.xml :

if (Platform.OS === 'ios') {
  request(PERMISSIONS.IOS.MICROPHONE);
} else if (Platform.OS === 'android') {
  requestMultiple([PERMISSIONS.ANDROID.RECORD_AUDIO, PERMISSIONS.ANDROID.READ_PHONE_STATE]);
}

Le Client SDK

Le Client SDK est une dépendance native, il doit donc y avoir un moyen de communiquer entre le code JavaScript sur App.tsx et le code natif d'Android. Il existe deux façons de procéder, en fonction de la direction de l'information. NativeModules exposer des classes natives à JavaScript pour vous permettre d'exécuter du code natif. L'API NativeEventEmitter permet au code natif d'envoyer des signaux au code JavaScript. Regardez la fonction componentDidMount dans la classe App . Vous pouvez voir que le code JavaScript est à l'écoute de deux signaux différents, onStatusChange et onCallStateChangequi mettront à jour l'interface utilisateur et l'action exécutée par le bouton.

eventEmitter.addListener('onStatusChange', (data) => {
...
});

eventEmitter.addListener('onCallStateChange', (data) => {
...
});

Si vous ouvrez le répertoire android du projet, vous verrez une classe appelée EventEmitter (android/app/src/main/java/com/rnapptophone/EventEmitter.java). La classe EventEmitter possède une fonction qui envoie les signaux au code JavaScript.

public void sendEvent(String eventName, @Nullable WritableMap params) {
    this.context.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class).emit(eventName, params);
}

Ces fonctions sont appelées à partir de la ClientManager (android/app/src/main/java/com/rnapptophone/ClientManager.java). La classe ClientManager est une enveloppe autour du Client SDK. Les deux classes étendent la classe ReactContextBaseJavaModule qui exige que les deux sous-classes renvoient un nom sous la forme d'une chaîne de caractères qui est utilisée en tant que NativeModules nom. ClientManager.java utilise une annotation, ReactMethod. Cette annotation indique que la méthode doit être exposée à JavaScript. Par exemple, voici la fonction login que vous avez utilisée précédemment :

@ReactMethod
public void login(String jwt) {
    client.createSession(jwt, null, (error, sessionId) -> {
        if (error != null) {
            this.sendEvent("onStatusChange", "status", "Error");
        }
        if (sessionId != null) {
            this.sendEvent("onStatusChange", "status", "Connected");
        }
        return null;
    });
}

C'est ainsi qu'on l'appellerait en JavaScript :

ClientManager.login("ALICE_JWT")

Quelle est la prochaine étape ?

Dans ce tutoriel, nous avons appris à construire une application Android avec le framework React Native. Nous avons également ajouté une fonctionnalité permettant de passer un appel téléphonique vers un numéro de téléphone physique. Vous pouvez trouver le projet complet sur GitHubet la version iOS de ce blog sur learn.vonage.com.

Vous trouverez ci-dessous quelques autres tutoriels ou documentations faisant référence au Client SDK :

• Référence NCCO

• Client SDK

Comme toujours, si vous avez des questions, des conseils ou des idées que vous souhaitez partager avec la communauté, n'hésitez pas à vous rendre sur notre espace de travail Slack de la communauté. J'aimerais savoir comment vous avez suivi ce tutoriel et comment fonctionne votre projet.