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

Ce tutoriel vous montrera comment utiliser le Vonage Client SDK pour créer une application React Native iOS avec la fonctionnalité d'appeler un numéro de téléphone.

Conditions préalables

• Xcode 12pour construire et exécuter l'application sur un simulateur iOS.

• A compte GitHub Account.

• Cocoapods pour installer le Vonage Client SDK pour iOS.

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

• 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 deux dépendances, Node et Watchman. Vous pouvez le faire en utilisant Homebrew en exécutant ce qui suit dans votre terminal :

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

Une fois toutes les dépendances installées, vous pouvez maintenant exécuter le projet. Premier démarrage Metro avec npx react-native start. Une fois que Metro est lancé, ouvrez une nouvelle fenêtre de terminal dans le même répertoire et exécutez npx react-native run-ios. Cette commande construira et exécutera le projet iOS dans un simulateur iOS. Lorsque l'application se charge, vous êtes invité à autoriser les permissions du microphone, puis l'application s'affiche. Elle 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 :

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

En plus de l'installation du code iOS requis dans l'article, la description d'utilisation doit également être ajoutée à l'article. Podfilela description de l'utilisation doit également être ajoutée au fichier info.plist .

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'iOS. Il y a 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 ios du projet, vous verrez une classe appelée EventEmitter (ios/RNAppToPhone/EventEmitter.m). Cette classe exporte les événements pris en charge et possède deux fonctions qui envoient des signaux au code JavaScript. EventEmitter exporte les événements pris en charge et possède deux fonctions qui envoient des signaux au code JavaScript.

- (NSArray<NSString *> *)supportedEvents {
  return @[@"onStatusChange", @"onCallStateChange"];
}

- (void)sendStatusEventWith:(nonnull NSString *)status {
  if (_hasListeners) {
    [self sendEventWithName:@"onStatusChange" body:@{ @"status": status }];
  }
}

- (void)sendCallStateEventWith:(nonnull NSString *)state {
  if (_hasListeners) {
    [self sendEventWithName:@"onCallStateChange" body:@{ @"state": state }];
  }
}

Ces fonctions sont appelées à partir de la ClientManager classe (ios/RNAppToPhone/ClientManager.m). La classe ClientManager est une enveloppe autour du Client SDK. Les deux classes comportent la macro RCT_EXPORT_MODULE qui exporte et enregistre les classes du module natif avec React Native, ce qui leur permet d'être utilisées en tant que modules NativeModules. ClientManager.m La classe Client fait usage d'une macro supplémentaire, RCT_EXPORT_METHOD. Cette macro permet d'appeler la méthode à partir de JavaScript. Par exemple, voici la fonction login que vous auriez utilisée plus tôt :

RCT_EXPORT_METHOD(login:(NSString *)jwt) {
  [ClientManager.shared.client createSession:jwt
                                    callback:^(NSError * _Nullable error, NSString * _Nullable sessionId) {
    if (error != nil) {
      [ClientManager.shared.eventEmitter sendStatusEventWith:@"Error"];
      return;
    } else {
      [ClientManager.shared.eventEmitter sendStatusEventWith:@"Connected"];
    }
  }];
}

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 iOS 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 Android 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.