Créez une application familiale avec Vonage

Introduction

La réunion quotidienne : il s'agit d'une brève réunion que de nombreuses équipes de génie logiciel Agile utilisent pour informer les coéquipiers des progrès d'un individu et/ou pour faire émerger les problèmes bloquants. Chaque jour, tout le monde se met en cercle et répond aux trois mêmes questions :

1. Qu'ai-je fait hier ?

2. Que vais-je faire aujourd'hui ?

3. Est-ce que je vois des obstacles qui m'empêchent d'atteindre mon objectif et/ou celui de l'équipe ?

C'est à peu près la norme dans l'industrie. Mais mon équipe DevRel, ici chez Vonage, est répartie. Cela signifie qu'étant donné que nous vivons tous aux quatre coins du monde, il nous est impossible d'être tous dans la même pièce chaque jour pour former un cercle et rendre compte de nos progrès quotidiens, de nos blocages et de nos objectifs. Au lieu de cela, nous utilisons un chat-bot dans Slack pour partager individuellement nos rapports qui sont ensuite dirigés vers un canal #standup commun que toute l'équipe peut consulter.

Slack stand up

Cette méthode de communication à distance de nos mises à jour individuelles fonctionne très bien pour notre équipe. Nous pouvons chacun envoyer notre mise à jour au début de notre journée de travail et nous pouvons consulter les mises à jour du reste de l'équipe en un seul endroit.

Du travail à la famille

Non seulement mon équipe de travail est répartie dans le monde entier, mais les membres de ma famille le sont également. Je vis à Seattle, mes parents sont à Chicago et mon frère vit en Floride. J'ai donc pensé qu'il serait amusant d'appliquer cette idée de "Stand Up" à ma famille également !

Je pourrais utiliser l'API Messages de Vonage et demander à chacun de rapporter ses hauts et ses bas hebdomadaires en un seul endroit consolidé que nous pourrions consulter au moment qui nous convient le mieux.

Conditions préalables

Pour suivre ce tutoriel, vous aurez besoin d'un Account Vonage. Vous pouvez vous inscrire dès maintenant pour gratuitement et recevoir un crédit gratuit pour commencer si vous n'avez pas encore de compte. En outre, si vous souhaitez passer à un projet fonctionnel, vous pouvez remixer l'application Family Stand Up App immédiatement dans Glitch. Sinon, en quelques étapes seulement, vous pouvez créer votre propre application à partir de zéro !

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.

Ready to start building?

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

Comment créer l'application

Créer un Account Vonage

Si vous ne l'avez pas encore fait, créez un compte Vonage gratuitement, et en prime, votre compte sera crédité de 2 euros pour commencer à utiliser votre nouvelle application. Rendez-vous sur le site de Vonage et suivez les étapes d'inscription. Une fois que vous aurez terminé, vous serez dans votre tableau de bord Vonage.

Acheter un numéro de téléphone Vonage

• Dans le tableau de bord de Vonage, cliquez sur l'élément de menu Numbers dans le menu de gauche.

• Cliquez sur l'option Buy Numbers et vous serez dirigé vers une page où vous pourrez choisir un pays, des caractéristiques, un type et les quatre chiffres que vous souhaitez voir figurer sur le numéro.

  buy numbers

• Sélectionnez le pays dans lequel vous vous trouvez pour que l'appel soit local. Pour les fonctions, sélectionnez Voice et pour le type, mobile ou fixe fonctionnera parfaitement.

• Cliquez sur Search pour afficher la liste des numéros de téléphone disponibles.

• Sélectionnez un numéro en cliquant sur le bouton orange Buy et en cliquant à nouveau sur le bouton orange Buy une fois que le message de confirmation s'affiche. Vous possédez maintenant un numéro de téléphone Vonage ! La prochaine étape consiste à créer une application.

Créer une application Vonage Messages

A partir de la CLI Nexmo :

Entrez la commande suivante dans l'interpréteur de commandes :

• Veillez à remplacer your_Glitch_URL par votre URL réelle !

A partir de laTableau de bord Vonage:

• Dans le menu de gauche, cliquez sur l'élément de menu Messages dans le menu.

• Sélectionnez l'option Create an application option. Vous serez dirigé vers une page où vous pourrez créer une nouvelle application Vonage.

• Complétez le formulaire avec les informations suivantes :

  • Application name champ de texte entrer Family Stand Up App

  • Status URL entrez votre URL Glitch : https://[your Glitch URL].glitch.me/status

  • Inbound URL saisissez à nouveau l'URL de votre Glitch dans le champ de texte : https://[your Glitch URL].glitch.me/inbound

• Une fois que tout est en place, cliquez sur le bouton bleu Create Application bleu.

• Veillez à générer une paire de clés publique/privée et à la sauvegarder.

Lier le tout

Vous disposez maintenant d'un numéro Vonage et d'une application Numbers ; il ne vous reste plus qu'à relier les deux.

• Dans votre application Family Stand Up App Applications, sélectionnez l'onglet Numbers à côté de Settings.

• Cliquez sur le bouton Link à droite du numéro de téléphone que vous souhaitez connecter à votre application.

Vos nouvelles Applications Vonage sont maintenant liées à votre nouvelle application Vonage, et avec cette dernière étape, vous êtes prêt à construire votre application !

Modifier les paramètres SMS par défaut

Dans le tableau de bord de Vonage, sous votre nom, sélectionnez l'onglet Settings pour mettre à jour l'onglet Default SMS Setting afin que tout texte reçu de l'un des membres de votre famille soit lié à votre application Stand Up.

default sms setting

Créez votre application express sur Glitch

Modifier lepackage.json Fichier

Pour commencer, rendez-vous sur glitch.com pour créer un nouveau projet et choisissez le hello-express modèle.

Dans le package.json sélectionnez le menu déroulant Add a package pour rechercher et ajouter les dépendances suivantes : dotenv et node-schedule.

dependencies

Nous allons utiliser une version Beta de Vonage donc tapez manuellement cette version particulière : ^2.5.1-beta-1.

Modifier le.env Fichier

Dans le fichier .env remplissez les informations d'identification spécifiques à Vonage que nous venons de créer dans le tableau de bord de Vonage :

API_KEY=******
API_SECRET=******
APP_ID=******
PRIVATE_KEY_PATH=.data/private.key
NEXMO_NUMBER=******

Remplacez la clé API, le secret API, l'identifiant App et votre numéro Vonage. Pour inclure la clé privée, sélectionnez l'option New File dans le coin supérieur gauche et nommez-la .data/private.key. Dans ce fichier, collez la clé privée que vous avez générée lorsque vous avez créé votre application vocale. Ce fichier deviendra invisible dans Glitch si vous remixez votre code pour des raisons de sécurité.

Modifier leserver.js Fichier

Mise en place de dépendances, d'informations d'identification et de variables constantes

Au début de votre fichier server.js configurons notre serveur Express, exigeons nos dépendances et intégrons nos informations d'identification Vonage :

// server.js 
require('dotenv').config();
const express = require('express');
const app = express();
const Nexmo = require('nexmo')
const schedule = require('node-schedule');

// Vonage credentials 
const nexmo = new Nexmo({
  apiKey: process.env.API_KEY,
  apiSecret: process.env.API_SECRET,
  applicationId: process.env.APP_ID,
  privateKey: process.env.PRIVATE_KEY_PATH
});

// array of family members' numbers (be sure to change and include the numbers of your *own* family 
const familyNumbers = [18479623979, 18478402296]
// content of SMS (feel free to personalize!)
const standupText = "It's time for family stand up! What have you been up to this week? What were your highs? What were your lows?"
// Array of messages received 
let messages_received = [];

Utiliser Node-Schedule pour envoyer le texte une fois par semaine

Node Schedule est un planificateur de tâches flexible pour Node.js. Il vous permet de planifier des tâches (fonctions arbitraires) pour une exécution à des dates spécifiques, avec des règles de récurrence optionnelles. Nous utiliserons ce RecurrenceRule() et l'envoyer tous les dimanches à 17 heures. Il parcourra ensuite le tableau des numéros de téléphone de la famille et transmettra la variable standupText variable.

// server.js 
// node-schedule will call the nexmoSend() function and send the text every Sunday at 5pm 
const rule = new schedule.RecurrenceRule();
rule.dayOfWeek = 0;
rule.hour = 17;
rule.minute = 0;
const scheduler = schedule.scheduleJob(rule, function(){
   // mapping through those numbers and sending them each a text with nexmo 
  familyNumbers.map(number => {
    nexmoSend(number, standupText); 
  });
});

Envoyer le SMS hebdomadaire demandant un rapport de situation

Utilisons Vonage et la fonction nexmo.channel.send() et la fonction Nous transmettrons les éléments TO et FROM le corps du message et la logique de traitement des erreurs.

// server.js 
// function to send text with Vonage Messages API 
const nexmoSend = (number, text) => { nexmo.channel.send(
  { "type": "sms", "number": number },
  { "type": "sms", "number": process.env.NEXMO_NUMBER },
  {
    "content": {
      "type": "text",
      "text": text
    }
  },
  (err, data) => { console.log("message_uuid: ", data.message_uuid); }
)};   

Recevoir les SMS des membres de la famille

Vous avez maintenant le code pour envoyer le SMS Debout à partir de votre numéro Vonage. Mais que faire des réponses de votre famille ? J'ai choisi de recevoir les messages et de les présenter sur le frontend de l'application dans Glitch. Mais le monde est vraiment à votre portée. Vous pouvez choisir d'attendre que toutes les parties répondent et d'envoyer un message groupé avec toutes les réponses en une seule mise à jour consolidée. Vous pouvez également utiliser une base de données comme MongoDB et sauvegarder les données pour en faire quelque chose plus tard.

logging

Pour l'instant, la solution que j'ai trouvée est de pousser à la fois le numéro d'origine et le texte du message reçu dans un tableau qui sera ensuite envoyé au frontend de l'application. De cette façon, les messages deviendront visibles dès qu'un message aura été reçu !

front end

// server.js 
// function to receive message responses 
const handleInboundSms = (req, res) => {
  const params = Object.assign(req.query, req.body);

  messages_received.push({
    from: params.msisdn,
    standup_report: params.text
  });
  
  // send messages for family members to see on website 
  app.get('/', (req, res) => {
    res.send(messages_received);
  });
  
  // send OK status
  res.status(204).send();
}

Dernières pièces express

Enfin, remplissons les composants Express nécessaires pour que notre application soit opérationnelle. Et à des fins de débogage, nous nous assurerons d'enregistrer le port sur lequel l'application est à l'écoute.

// server.js 
app
.route('/webhooks/inbound-sms')
.get(handleInboundSms)
.post(handleInboundSms)

const listener = app.listen(process.env.PORT, () => {
  console.log('Your express app is listening on port ' + listener.address().port);
});

Obtenir de l'aide

Si vous avez des questions, des commentaires ou si vous trouvez un bogue dans le projet, faites-le nous savoir ! Vous pouvez soit

• Tweetez-nous ! Nous sommes @VonageDev sur Twitter

• Ou bien rejoindre le Slack de la communauté Vonage

Pour en savoir plus

• Consultez la documentation destinée aux développeurs à l'adresse suivante https://developer.nexmo.com