https://d226lax1qjow5r.cloudfront.net/blog/blogposts/build-voice-applications-faster/voice_cloud_runtime.png

Créer plus rapidement des applications Voice

Publié le August 23, 2023

Temps de lecture : 4 minutes

Introduction

Vonage Cloud Runtime est notre plateforme de développement cloud-native, sans serveur, conçue pour accélérer votre processus de développement. Et Code Hub est l'endroit où se trouvent les solutions préconstruites pour les flux de travail de communication courants et les environnements de codage basés sur le navigateur. Tirer parti de ces solutions préconstruites peut considérablement réduire votre temps de développement. L'époque du téléchargement d'un échantillon, de la configuration des dépendances et de la configuration manuelle des clés API est révolue.

L'interface intuitive de Code Hub vous permet de parcourir les cas d'utilisation qui couvrent nos API Vonage Voice API de Vonage ainsi que notre Video API, Number Insight API, Messages APIet bien d'autres encore.

Pour notre API Voice, nous avons plusieurs cas d'utilisation disponibles aujourd'hui, notamment :

  • Cliquer pour appeler - Créez un bouton pour permettre aux visiteurs de votre site Web d'entrer rapidement en contact à l'aide de l'API Voice de Vonage.

  • Réponse vocale interactive (IVR) - Créez un système téléphonique automatisé à l'aide de l'API Voice de Vonage pour que les utilisateurs puissent saisir des informations à l'aide du clavier et entendre une réponse vocale.

  • Notifications vocales - Contactez une liste de personnes par téléphone et transmettez un message donné.

  • Voice WebSocket Echo - Créez un serveur d'écho vocal à l'aide de WebSockets et de l'API Voice de Vonage.

Dans le billet d'aujourd'hui, nous allons nous concentrer sur un cas d'utilisation de Voice. D'autres cas d'utilisation seront présentés dans les prochains articles.

Pour commencer

Rendez-vous sur le site https://developer.vonage.com/cloud-runtime et parcourez la liste des solutions disponibles pour vous familiariser avec l'interface utilisateur. Vous pouvez également utiliser la barre de recherche si vous recherchez quelque chose de spécifique.

Code Hubcloud-runtime-marketplace-lp.png

Ouverture de session

Avant de commencer à travailler sur le cas d'utilisation Voice, vous devez vous connecter à votre Account Vonage. Si vous n'en avez pas, cliquez sur S'inscrire. Une fois que vous avez un compte et que vous vous êtes connecté, vous remarquerez quelques options supplémentaires, comme indiqué ci-dessous.

Signing Into Code Hubsigning-in.png

Examinons les options en commençant par l'option Accueil et en allant de gauche à droite.

  • Accueil - Retourne toujours au menu principal.

  • Espaces de travail - Cette section affiche les espaces de travail que vous avez créés.

  • Instances- Cette page affiche les instances déployées que vous avez créées.

  • Produits déployés - Permet de gérer, de lancer ou de consulter les journaux des instances de produits installées.

  • Région - Cette option indique la région dans laquelle vous travaillez actuellement.

  • Compte d'utilisateur connecté - La clé API qui vous a été attribuée et que les déploiements futurs utiliseront. Si vous avez plusieurs clés API, sélectionnez celle que vous souhaitez utiliser dans la liste déroulante.

Voice Click to Call Présentation d'un cas d'utilisation

Prenons le Cliquer pour appeler comme premier exemple.

Click to Call Overview Screenclick-to-call-overview.png

Après avoir consulté la page du cas d'utilisation, vous verrez trois sections :

Vue d'ensemble - Brève description de l'échantillon. Obtenir le code - Permet d'utiliser la version du navigateur Visual Studio Code pour essayer le code, y apporter des modifications et le déployer instantanément. Déployer le code - Permet de déployer l'application et de la voir en action.

Vous noterez également que la date de la dernière création ou mise à jour de l'échantillon est indiquée en haut à droite de l'écran. S'il existe plusieurs versions, vous pouvez cliquer sur versions pour les voir.

Pour commencer, sélectionnez Déployer le code. Donnez-lui un nom d'instanceassurez-vous que la région sélectionnée est la plus proche de vous, et cliquez sur Déployer le code.

Vous remarquerez qu'une fenêtre contextuelle indique que cet échantillon nécessite un numéro.

Set up your project deploymentsetup-project-deployment.png

Dans l'option de déploiement, vous pouvez Attribuer un numéro que vous possédez déjà ou en acheter un nouveau.

Add Phone Numberadd-phone-number.png

Une fois que vous avez sélectionné un numéro, il commence à se déployer.

Deploying appdeployed-app.png

Si vous cliquez sur Instances dans le menu supérieur, vous pouvez localiser le projet "Click To Call", comme indiqué ci-dessous.

Instances Overviewinstances-overview.png

Si vous cliquez dessus, vous accéderez à la vue d'ensemble de l'instance, qui contient des informations sur le projet et plusieurs URL d'instance à partir desquelles vous pouvez exécuter l'application.

Instances Overview Expandedinstances-overview-expanded.png

Sous les informations relatives à l'instance, vous verrez que les rubriques Journaux, Événements, Configuration et Historique sont également disponibles pour faciliter le suivi et le dépannage.

Logging Sample Screenlogging-sample.png

Cliquez sur l'URL de l'instance Instance URL 1 à partir de la Vue d'ensemble de l'instance de l'instance.

Vous verrez un bouton appelé "Appeler le support." Une fois cliqué, l'API Voice de Vonage commencera un appel entrant.

Call Support Buttoncall-support-button.png

Déployer un nouvel environnement et modifier le code

Maintenant que nous avons déployé avec succès un échantillon, essayons de modifier le code et de le déployer instantanément pour voir les changements en direct. Cliquez sur Obtenir le code puis sur Créer un nouvel environnement de développement.

Create a Virtual Development Environmentcreate-dev-env.png

Fournir une Région, Nom de l'espace de travailet un Numbers Vonage. Si vous ne savez pas ce que c'est, vous pouvez cliquer sur Attribuer un numéroet les numéros disponibles dans votre Account Vonage seront listés. Le mien ressemble à ce qui suit :

Set up your workspacesetup-workspace.png

Presse Continuer et vous verrez le projet dans Visual Studio Code à l'intérieur de votre navigateur.

Project loaded in VS Code in the Browservscode-project-loaded.png

Commencez par lire le fichier Readme.mdqui contient des informations essentielles sur la manière d'exécuter l'échantillon.

Si vous naviguez vers l'un des fichiers sources (comme index.js), vous pouvez modifier le code dans le navigateur !

Allez-y et apportez quelques modifications au fichier. Par exemple, à la ligne 69, vous pourriez fournir un autre fichier audio mp3 à lire à la place de notre exemple.

Synthèse

Nous sommes impatients de voir toutes les façons nouvelles et passionnantes dont les clients utilisent cet outil. Pour plus d'informations, consultez notre documentation. De plus, si vous avez des questions ou des commentaires, rejoignez-nous sur la page Slack des développeurs de Vonage ou envoyez-moi un Tweet sur Twitteret je vous répondrai. Merci encore d'avoir lu, et je vous donne rendez-vous au prochain numéro !

Partager:

https://a.storyblok.com/f/270183/400x400/7cdff37c0e/michael-crump.png
Michael CrumpGestionnaire, expériences des développeurs

Michael Crump travaille chez Vonage au sein de l'équipe Developer Experiences. C'est un codeur, un YouTuber et un conférencier qui aborde fréquemment divers sujets liés à .NET et au développement des communications et de l'informatique en nuage. Il se passionne pour aider les développeurs à comprendre les avantages de chacun d'entre eux de manière simple.