Erstellen Sie mit Vonage eine Stand-up-App für Familien

Einführung

Das Daily Stand Up: ein kurzes Treffen, das viele agile Softwareentwicklungsteams nutzen, um die Teamkollegen über den Fortschritt eines Einzelnen auf dem Laufenden zu halten und/oder blockierende Probleme aufzudecken. Jeden Tag stehen alle in einem Kreis und beantworten die gleichen drei Fragen:

1. Was habe ich gestern gemacht?

2. Was werde ich heute tun?

3. Sehe ich Blockaden oder Hindernisse, die mich daran hindern, mein Ziel und/oder das des Teams zu erreichen?

Das ist so ziemlich ein Industriestandard. Aber mein DevRel-Team hier bei Vonage ist verstreut. Da wir alle über den ganzen Globus verteilt leben, ist es für uns unmöglich, jeden Tag im selben Raum zu sein, um im Kreis zu stehen und über unsere täglichen Fortschritte, Blocker und Ziele zu berichten. Stattdessen verwenden wir einen Chat-Bot in Slack, um unsere Berichte individuell zu teilen, die alle in einen gemeinsamen #standup-Kanal geleitet werden, den das ganze Team einsehen kann.

Slack stand up

Diese Methode der Fernmeldung unserer individuellen Aktualisierungen funktioniert für unser Team sehr gut. Jeder von uns kann seine Aktualisierung zu Beginn des Arbeitstages senden und wir können die Aktualisierungen des restlichen Teams alle an einem einzigen Ort einsehen.

Von der Arbeit zur Familie

Nicht nur mein Arbeitsteam ist über die ganze Welt verteilt, sondern auch meine Familienmitglieder. Ich lebe in Seattle, meine Eltern sind in Chicago, und mein Bruder lebt in Florida. Also dachte ich, es könnte Spaß machen, diese ganze "Stand Up"-Idee auch auf meine Familie anzuwenden!

Ich könnte die Nachrichten- und Versand-APIs von Vonage nutzen und jeden seine wöchentlichen Hochs und Tiefs an einem konsolidierten Ort anzeigen lassen, den jeder von uns einsehen kann, wann immer es für ihn bequem ist.

Voraussetzungen

Um dieses Tutorial durchzuarbeiten, benötigen Sie ein Vonage-Konto. Sie können sich jetzt anmelden für kostenlos anmelden und ein kostenloses Startguthaben erhalten, wenn Sie noch kein Konto haben. Wenn Sie zu einem funktionierenden Projekt übergehen möchten, können Sie außerdem die Familie Stand Up App sofort in Glitch remixen. Ansonsten können Sie in wenigen Schritten Ihr eigenes Projekt von Grund auf erstellen!

Vonage API-Konto

Um dieses Tutorial durchzuführen, benötigen Sie ein Vonage API-Konto. Wenn Sie noch keines haben, können Sie sich noch heute anmelden und mit einem kostenlosen Guthaben beginnen. Sobald Sie ein Konto haben, finden Sie Ihren API-Schlüssel und Ihr API-Geheimnis oben auf dem Vonage-API-Dashboard.

Sind Sie bereit, mit dem Bau zu beginnen?

Erleben Sie nahtlose Konnektivität, Echtzeit-Messaging und kristallklare Sprach- und Videoanrufe - alles auf Knopfdruck.

Wie man die App erstellt

Ein Vonage-Konto erstellen

Falls Sie es noch nicht getan haben, können Sie kostenlos ein Vonage-Konto einrichten. Als zusätzlichen Bonus erhalten Sie eine Gutschrift von 2 Euro auf Ihr Konto, damit Sie Ihre neue Anwendung nutzen können. Gehen Sie zu Vonage und führen Sie die Anmeldeschritte durch. Sobald Sie damit fertig sind, befinden Sie sich in Ihrem Vonage-Dashboard.

Eine Vonage-Telefonnummer kaufen

• Klicken Sie im Vonage Dashboard auf den Menüpunkt Numbers Menüpunkt auf der linken Seite.

• Klicken Sie auf die Option Buy Numbers und Sie werden auf eine Seite weitergeleitet, auf der Sie das Land, die Merkmale, den Typ und die vier Ziffern, die die Nummer haben soll, auswählen können.

  buy numbers

• Wählen Sie das Land, in dem Sie sich gerade befinden, damit der Anruf lokal erfolgt. Wählen Sie unter Funktionen Voice und für die Art des Anrufs entweder Handy oder Festnetz.

• Klicken Sie auf Search um eine Liste der verfügbaren Telefonnummern anzuzeigen.

• Wählen Sie eine Zahl aus, indem Sie auf die orangefarbene Buy klicken und dann erneut auf die orangefarbene Buy klicken, sobald Sie die Bestätigungsaufforderung erhalten haben. Sie besitzen nun eine Vonage-Telefonnummer! Als nächstes müssen Sie eine Anwendung erstellen.

Erstellen einer Anwendung für Vonage-Nachrichten und -Versand

Über die Nexmo CLI:

Geben Sie den folgenden Befehl in die Shell ein:

• Achten Sie darauf, dass Sie your_Glitch_URL durch Ihre tatsächliche URL ersetzen!

Von derVonage Dashboard:

• Klicken Sie im linken Menü auf den Menüpunkt Messages and Dispatch Menüpunkt.

• Wählen Sie die Create an application Option. Sie werden zu einer Seite weitergeleitet, auf der Sie eine neue Vonage-Anwendung einrichten können.

• Füllen Sie das Formular mit den folgenden Angaben aus:

  • Application name Textfeld eingeben Family Stand Up App

  • Status URL Textfeld Ihre Glitch-URL ein: https://[your Glitch URL].glitch.me/status

  • Inbound URL Textfeld erneut Ihre Glitch-URL ein: https://[your Glitch URL].glitch.me/inbound

• Wenn Sie alles eingegeben haben, klicken Sie auf die blaue Create Application Schaltfläche.

• Stellen Sie sicher, dass Sie ein Schlüsselpaar aus öffentlichem und privatem Schlüssel erzeugen und es speichern.

Alles miteinander verbinden

Sie haben nun eine Vonage-Nummer und eine Nachrichten- und Versandanwendung, die Sie nur noch miteinander verbinden müssen.

• Innerhalb Ihrer Family Stand Up App Messages-Anwendung die Registerkarte Numbers neben der Registerkarte Settings.

• Klicken Sie auf die Schaltfläche Link rechts neben der Rufnummer, die Sie mit Ihrer Anwendung verbinden möchten.

Ihre neuen Vonage-Nachrichten sind nun mit Ihrer neuen Vonage-Anwendung verknüpft, und mit diesem letzten Schritt sind Sie bereit, Ihre Anwendung zu erstellen!

Ändern der Standard-SMS-Einstellung

Wählen Sie im Vonage Dashboard unter Ihrem Namen die Registerkarte Settings um die Registerkarte Default SMS Setting damit alle SMS, die Sie von einem Ihrer Familienmitglieder erhalten, mit Ihrer Stand Up-App verknüpft werden.

default sms setting

Erstellen Sie Ihre Express-App auf Glitch

Bearbeiten Sie diepackage.json Datei

Um zu beginnen, navigieren Sie zu glitch.com, um ein neues Projekt zu erstellen, und wählen Sie die hello-express Vorlage.

In der package.json Datei wählen Sie das Add a package um nach den folgenden Abhängigkeiten zu suchen und diese hinzuzufügen: dotenv und node-schedule.

dependencies

Wir werden eine Beta-Version von Vonage also geben Sie diese spezielle Version manuell ein: ^2.5.1-beta-1.

Bearbeiten Sie die.env Datei

In der Datei .env Datei geben Sie die Vonage-spezifischen Anmeldedaten ein, die wir gerade im Vonage Dashboard erstellt haben:

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

Ersetzen Sie den API-Schlüssel, das API-Geheimnis, die App-ID und Ihre Vonage-Nummer. Um den privaten Schlüssel einzuschließen, wählen Sie den New File in der oberen linken Ecke und nennen Sie ihn .data/private.key. Fügen Sie in diese Datei den privaten Schlüssel ein, den Sie beim Erstellen Ihrer Sprachanwendung generiert haben. Diese Datei wird in Glitch unsichtbar, wenn Sie Ihren Code aus Sicherheitsgründen neu mischen.

Bearbeiten Sie dieserver.js Datei

Abhängigkeiten, Berechtigungsnachweise und konstante Variablen einrichten

Am Anfang Ihrer server.js Datei richten wir unseren Express-Server ein, benötigen unsere Abhängigkeiten und betten unsere Vonage-Anmeldedaten ein:

// 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 = [];

Verwenden Sie Node-Schedule, um den Text einmal pro Woche zu senden

Node-Schedule ist ein flexibler Job-Scheduler für Node.js. Er erlaubt es Ihnen, Jobs (beliebige Funktionen) für die Ausführung zu bestimmten Terminen zu planen, mit optionalen Wiederholungsregeln. Wir werden dieses RecurrenceRule() Konzept und lassen es jeden Sonntag um 17 Uhr ausführen. Anschließend wird das Array mit den Telefonnummern der Familie durchlaufen und die 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); 
  });
});

Senden Sie die wöchentliche SMS mit der Bitte um einen Stand-Up-Bericht

Verwenden wir Vonage und die nexmo.channel.send() Funktion. Wir übergeben die TO und FROM Nummern, den Text der Nachricht und die Logik zur Fehlerbehandlung.

// 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); }
)};   

Empfangen der SMS-Nachrichten von Familienmitgliedern

Sie haben jetzt den Code, um die Stand-Up-SMS von Ihrer Vonage-Nummer aus zu versenden. Aber was machen Sie mit den Antworten Ihrer Familie? Ich habe mich dafür entschieden, die Nachrichten zu empfangen und sie auf dem Frontend der App in Glitch zu präsentieren. Aber die Welt liegt hier wirklich in Ihren Händen. Sie können warten, bis alle Beteiligten geantwortet haben, und dann eine gebündelte Nachricht mit allen Antworten in einer konsolidierten Aktualisierung senden. Oder Sie verwenden eine Datenbank wie MongoDB verwenden und die Daten speichern, um später etwas damit anzufangen.

logging

Die Lösung, die ich gefunden habe, besteht darin, sowohl die Nummer, von der die Nachricht kam, als auch den eigentlichen Text der empfangenen Nachricht in ein Array zu übertragen, das dann an das Frontend der App gesendet wird. Auf diese Weise werden die Nachrichten sichtbar, sobald eine Nachricht empfangen wurde!

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();
}

Letzte Express-Stücke

Zum Schluss geben wir die notwendigen Express-Komponenten ein, damit unsere Anwendung läuft. Zu Debugging-Zwecken werden wir auf jeden Fall protokollieren, welchen Port die App abhört.

// 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);
});

Hilfe bekommen

Wir freuen uns, von Ihnen zu hören. Wenn Sie Fragen oder Kommentare haben oder einen Fehler im Projekt finden, lassen Sie es uns wissen! Sie können entweder:

• Twittern Sie uns! Wir sind @VonageDev auf Twitter

• Oder dem Vonage Community Slack beitreten

Weitere Lektüre

• Lesen Sie die Dokumentation für Entwickler unter https://developer.nexmo.com