Partager:
){kind=small}
Abdul est défenseur des développeurs chez Vonage. Il a travaillé dans le domaine des produits de consommation en tant qu'ingénieur iOS. Pendant son temps libre, il aime faire du vélo, écouter de la musique et conseiller ceux qui commencent leur parcours dans la technologie.
Comment passer des appels téléphoniques sur le Web, iOS et Android avec Ionic
Temps de lecture : 8 minutes
Ce billet de blog vous emmène à travers un projet qui montre comment construire une application Ionic qui vous permet de passer un appel sur trois plateformes en utilisant le Vonage Client SDK. Le projet de ce billet de blog utilise React.
A compte GitHub Account.
Xcode 12pour construire et exécuter l'application sur un simulateur iOS.
Android Studioavec JDK 8 ou plus récent pour construire et exécuter l'application sur un émulateur.
Notre interface en ligne de commande, que vous pouvez installer avec
npm install @vonage/cli -g.
Ionic peut être installé avec npm mais nécessite Node.js. Assurez-vous que Node.js est installé avant de continuer. Installez Ionic avec la commande suivante :
npm install -g @ionic/cli
Vous pouvez cloner le projet sur votre machine locale en lançant la commande suivante dans votre terminal :
git clone git@github.com:nexmo-community/ionic-app-to-phone.git
Changez ensuite de répertoire dans le nouveau dossier cd ionic-app-to-phone.
Maintenant que vous avez cloné le projet, vous pouvez installer les dépendances du projet en lançant npm install. Cette commande installera les dépendances listées dans le fichier package.json dans le fichier Notez le nexmo-client répertorié ; il s'agit du Client SDK.
Ionic a également besoin que certaines variables d'environnement soient configurées pour le développement Android. Modifiez votre PATH avec :
Une fois cela fait, chargez la configuration dans l'interpréteur de commandes actuel à l'aide de la commande source pour charger la configuration dans l'interpréteur de commandes actuel. Vous pouvez trouver des instructions plus détaillées dans la documentation Ionic.
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.
A Objet de contrôle d'appel Nexmo (NCCO) est un tableau JSON que vous utilisez pour contrôler le flux d'un appel Voice API. Le NCCO doit être public et accessible sur Internet. Pour ce faire, vous utiliserez une Gist GitHub qui fournit un moyen pratique d'héberger la configuration.
Allez sur https://gist.github.com/ et entrez call.json dans la case "Filename including extension". Le contenu de la gist sera le JSON suivant :
[
{
"action": "talk",
"text": "Please wait while we connect you."
},
{
"action": "connect",
"endpoint": [
{
"type": "phone",
"user": "447000000000"
}
]
}
]Créez la liste, puis cliquez sur le bouton "Raw" pour obtenir une URL pour votre NCCO. Notez-la pour l'étape suivante.
Vous devez maintenant créer une Application Vonage. Une application contient les informations de sécurité et de configuration dont vous avez besoin pour vous connecter à Vonage. Dans votre terminal, créez une application Vonage à l'aide de la commande suivante en remplaçant GIST_URL par l'URL de l'étape précédente :
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é app_to_phone_tutorial.key est également créé.
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 en exécutant 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 :
Maintenant que vous avez configuré l'application Vonage, vous pouvez passer des appels.
La première plateforme sur laquelle vous exécuterez le projet est le Web. Pour ce faire, éditez le fichier Home.tsx (/ionic-app-to-phone/src/pages/Home.tsx) en remplaçant ALICE_JWT par le JWT que vous avez généré précédemment.
Une fois cela fait, exécutez le projet à partir de votre terminal en utilisant ionic serve. Cette commande lancera un serveur local sur votre machine sur le port 8100 et ouvrira l'application dans votre navigateur web. Cliquez sur le bouton de connexion, qui utilise le JWT pour authentifier le Client SDK. Une fois connecté, vous pouvez maintenant passer un appel au numéro de téléphone spécifié dans le NCCO.
Utilisations ioniques Capacitor pour construire l'application web que vous venez d'utiliser pour les plateformes natives. Gardez le serveur de développement Ionic en cours d'exécution dans votre terminal et ouvrez une nouvelle fenêtre de terminal dans le même répertoire. Les applications iOS et Android requièrent que le serveur de développement soit disponible via HTTPS, vous pouvez donc utiliser localtunnel pour créer une URL HTTPS. Entrez la commande suivante dans votre terminal, en remplaçant SUBDOMAIN par une chaîne unique :
npx localtunnel --port 8100 --subdomain=SUBDOMAIN
Cette commande ouvrira un tunnel vers le port 8100 de votre machine.
La construction d'un projet natif avec Capacitor se déroule en trois étapes. Tout d'abord, le code web est construit. Ensuite, le code est copié sur chaque plateforme, puis les outils spécifiques à chaque plateforme sont utilisés pour construire l'application.
Ouvrez une nouvelle fenêtre de terminal dans le même répertoire. Vous pouvez effectuer la première et la deuxième étape avec ionic capacitor sync ios. Exécutez ensuite le projet iOS à l'aide de Capacitor, en remplaçant SUBDOMAIN par votre chaîne de caractères unique :
ionic capacitor run ios -l --external --livereload-url=https://SUBDOMAIN.loca.lt
Cette commande ouvre Xcode pour vous et permet de recharger le code en direct. Construisez et exécutez (CMD + R) dans Xcode, et lorsque l'application fonctionne sur le simulateur/appareil que vous avez choisi, vous pouvez vous connecter et passer un appel, de la même manière que sur le web.
Comme Ionic est basé sur le web, l'app iOS peut utiliser la même dépendance JavaScript du Client SDK et fonctionne sans aucun changement de code spécifique à la plateforme.
Le processus pour Android est très similaire à celui d'iOS. Dans votre fenêtre de terminal où se trouve le projet iOS, quittez le processus avec Ctrl+C, puis exécutez ionic capacitor sync android. Exécutez ensuite le projet Android à l'aide de Capacitor, en remplaçant SUBDOMAIN par votre chaîne de caractères unique :
ionic capacitor run android -l --external --livereload-url=https://SUBDOMAIN.loca.lt
Cette commande ouvrira Android Studio pour vous, où vous pourrez créer et exécuter l'application sur un émulateur ou un appareil. Lorsque l'application fonctionne sur l'émulateur ou l'appareil choisi, vous pouvez vous connecter et passer un appel, de la même manière que sur le web et iOS, sans aucune modification du code.
Vous pouvez trouver le projet complet sur GitHub. Vous pouvez faire beaucoup plus avec le Client SDK, apprenez-en plus sur developer.vonage.com.
Partager:
Abdul est défenseur des développeurs chez Vonage. Il a travaillé dans le domaine des produits de consommation en tant qu'ingénieur iOS. Pendant son temps libre, il aime faire du vélo, écouter de la musique et conseiller ceux qui commencent leur parcours dans la technologie.