Créer plus rapidement des applications de messagerie

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. Code Hub est le foyer des solutions pré-intégrées pour les flux de travail de communication communs et les environnements de codage basés sur le navigateur. Tirer parti de ces solutions préconstruites peut réduire considérablement 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 notre API Vonage Messages APIde Vonage, ainsi que notre Voice API, Video API, Number Insight APIet bien d'autres encore.

Pour notre Messages API, nous avons plusieurs cas d'utilisation disponibles aujourd'hui, qui incluent :

• Front.com - Canal SMS de Vonage - Dans ce projet, en utilisant l'API Messages de Vonage, vous allez créer un connecteur SMS qui enverra et recevra des messages via les boîtes de réception de Front.com et les canaux d'application de Front.

• Image ChatGPT Bot - Dans ce projet, en utilisant l'API OpenAI DALL-E, vous allez créer un chatbot SMS qui peut générer des images basées sur des invites de texte SMS et également générer des images alternatives en envoyant votre image par MMS.

• ChatGPT Bot SMS - Dans ce projet, en utilisant l'API OpenAI, vous allez créer un chatbot SMS qui enverra et recevra des messages avec ChatGPT.

• Programmer un SMS - Dans ce projet, vous allez créer un site web statique qui permet de programmer et d'envoyer un SMS à un numéro donné à l'aide de cette API.

• Renvoi automatique de SMS - Ce projet vous permet de transférer les messages entrants vers un numéro à l'aide de l'API - vous spécifierez votre numéro de transfert lors de la configuration de l'application. Ensuite, tous les messages envoyés à votre numéro de téléphone Vonage seront transférés vers votre numéro.

• Intégration de Hubspot avec l'API Messages de Vonage - Dans ce projet, vous apprendrez à créer un connecteur que vous pourrez utiliser dans Hubspot pour définir des cartes CRM personnalisées au sein de vos contacts et pour envoyer des SMS via des workflows d'automatisation.

Le billet d'aujourd'hui se concentrera sur un cas d'utilisation de la messagerie. Si vous voulez voir comment Code Hub peut vous aider avec les applications Voice, alors cliquez ici. D'autres cas d'utilisation seront présentés dans les prochains articles.

Pour commencer

Visiter Code Hub 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 Hub Main Menu

Ouverture de session

Avant de commencer à travailler sur le cas d'utilisation Messagerie, 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 In

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 - Affiche les espaces de travail de code que vous avez créés.

• Instances - 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.

• Documentation - Liens vers la documentation officielle du projet.

• Région - Affiche 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.

"Cas d'utilisation "Programmer un SMS

Prenons le Programmer un SMS comme premier exemple.

Schedule an SMS

Après avoir visité la page "Programmer un SMS"vous verrez trois sections :

Vue d'ensemble - Brève description des objectifs de l'échantillon.

Obtenir du 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 remarquerez également que vous pouvez voir quand l'échantillon a été créé pour la dernière fois créé ou mise à jour 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.

Instance Name

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

Set up your project deployment

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

Si vous n'avez pas de numéro, cet écran s'affiche :

Add phone number

Si vous disposez d'un numéro, il vous demandera si vous souhaitez l'utiliser.

Add phone number app

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

Deployed App

Vous serez automatiquement amené à l'écran Vue d'ensemble de l'instancequi contient des informations sur le projet et permet de lancer l'application. Il y a également une option pour Afficher les journaux pour faciliter le suivi et le dépannage.

Schedule an SMS

Lancer l'application

Cliquez sur le bouton Lancer. Une nouvelle fenêtre de navigation apparaît et affiche le contenu suivant :

Web App

Remplissez le formulaire avec quelques informations telles qu'un numéro de téléphone portable valide, a messageet une heure d'envoi et appuyez sur Envoyer. Une nouvelle fenêtre de navigateur s'ouvre et le message est mis en file d'attente pour être envoyé à la date spécifiée.

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. Assurez-vous d'être de retour sur la page du page du cas d'utilisation et cliquez sur Obtenir le code puis sur Créer un nouvel environnement de développement.

Schedule an SMS

Fournir une Région et Nom de l'espace de travail ainsi qu'un Numbers Vonage. Si vous ne savez pas de quoi il s'agit, 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 workspace

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

Running in the browser

Commencez par consulter le fichier README.mdqui contient des informations importantes sur la manière d'exécuter l'exemple.

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

N'hésitez pas à vous amuser et à faire quelques changements. Par exemple, à la ligne 53 du fichier index.js, vous pourriez coder en dur le message au lieu d'utiliser celui qui provient du formulaire.

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 !