Erstellen einer Voicemail mit Ruby on Rails

Wollten Sie Ihren Kunden schon immer eine Telefonnummer anbieten, unter der sie anrufen und Ihnen eine Nachricht hinterlassen können? Sie können Ihre eigene Voicemail-Anwendung mit der Nexmo Voice API und Ruby on Rails erstellen. In diesem Tutorial gehen wir durch die einzelnen Schritte, um die Anwendung zum Laufen zu bringen. Ihre Anwendung wird in der Lage sein, Anrufe zu empfangen, Sprachnachrichten aufzuzeichnen und ein Webinterface zu haben, um alle Nachrichten anzuzeigen und abzuspielen.

Wenn Sie es vorziehen, können Sie auch eine vollständige Arbeitskopie dieser Anwendung klonen auf GutHub

Fangen wir an!

Voraussetzungen

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.

In diesem Lernprogramm wird auch eine virtuelle Telefonnummer verwendet. Um eine zu erwerben, gehen Sie zu Rufnummern > Rufnummern kaufen und suchen Sie nach einer Nummer, die Ihren Anforderungen entspricht.

Sind Sie bereit, mit dem Bau zu beginnen?

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

Um dieses Tutorial durchzuarbeiten, benötigen Sie Folgendes:

• Rails 5.2+

• ngrok

Erstellen einer Voicemail-Anwendung

Wir werden die folgenden Schritte durchgehen:

1. Eine neue Rails-Anwendung erstellen

2. Einrichten eines Nexmo Accounts

3. ngrok einrichten

4. Unsere Rails-App einrichten

Sobald wir alle oben genannten Schritte abgeschlossen haben, können wir unsere neue Anwendung anrufen, eine Nachricht hinterlassen und diese dann über unsere Webschnittstelle abspielen.

Eine neue Rails-Anwendung erstellen

Führen Sie in Ihrer Befehlszeile Folgendes aus:

Nach der Fertigstellung haben Sie nun eine brandneue Rails-Anwendung namens nexmo-rails-voicemail-demo mit PostgreSQL als Datenbank definiert. Zu diesem Zeitpunkt werden Sie auch die Entwicklungsdatenbank in PostgreSQL erstellen wollen. Sie können dies tun, indem Sie folgendes ausführen:

Nun, da die Datenbank erstellt ist, können wir unsere Tabelle erstellen, in der die Informationen für jede Voicemail-Aufnahme gespeichert werden. Wir wollen eine Tabelle, die die eindeutigen Bezeichner für die Conversationdie Aufnahme und die Telefonnummer des Absenders enthält. Wir werden definieren, was ein Conversation ist und wie man sie verwendet, wenn wir die Erstellung des Controllers besprechen. Mit dem folgenden Befehl wird unsere Tabelle erstellt:

Sie können die vom Generator erstellte Migrationsdatei prüfen, indem Sie die Anwendung in Ihrem bevorzugten Code-Editor öffnen und die Datei im Ordner /db/migrate Ordner. Sie wird den Namen create_recordings.rb vorangestellt ist ein Zeitstempel, der angibt, wann Sie den obigen Befehl ausgeführt haben. Die Datei sollte in etwa wie folgt aussehen:

class CreateRecordings < ActiveRecord::Migration[5.2]
  def change
    create_table :recordings do |t|
      t.string :conversation_uuid
      t.string :recording_uuid
      t.numeric :from

      t.timestamps
    end
  end
end

Wenn die Migrationsdatei gut aussieht, können Sie fortfahren und die Migration ausführen, indem Sie rake db:migrate von Ihrer Befehlszeile aus ausführen.

Der vorerst letzte Schritt bei der Einrichtung unserer Rails-Anwendung ist die Installation unserer Abhängigkeiten. Öffnen Sie die Gemfile im Stammverzeichnis der Anwendung und fügen Sie Folgendes hinzu:

# Gemfile

gem 'nexmo_rails'
gem 'dotenv-rails'

Sobald die Datei gespeichert ist, starten Sie bundle install von Ihrem Terminal aus. Sie haben nun das nexmo_rails Initialisierungs-Gem in Ihre Anwendung installiert, was es uns ermöglicht, einen Nexmo-Client mit Zugangsdaten zu instanziieren. Wir werden mit der Ausführung des Nexmo-Initialisierers vorerst noch warten, da wir zunächst unseren Nexmo Account erstellen und unsere API-Anmeldedaten erhalten müssen. Sie haben auch das dotenv-rails Gem installiert, das uns helfen wird, wenn wir unsere Nexmo-API-Zugangsdaten als Umgebungsvariablen hinzufügen.

Wir können nun zum nächsten Schritt übergehen und unseren Nexmo Account einrichten.

ngrok einrichten

Es gibt mehrere Möglichkeiten, unseren lokalen Entwicklungsserver von außen zugänglich zu machen, aber eine der einfachsten ist ngrok. Sie können lesen diesen Artikel für eine genauere Erklärung der Funktionsweise von ngrok. Für unsere Zwecke müssen wir es jedoch nur zum Laufen bringen und die URL kopieren, die es uns liefert.

Um ngrok zu starten, öffnen Sie ein neues Terminal-Fenster und führen Sie folgendes in der Kommandozeile aus:

Sie sehen nun eine ngrok-Protokollierungsschnittstelle in Ihrem Terminalfenster. Am oberen Rand der Schnittstelle befindet sich eine Zeile, die mit Forwarding beginnt und zwei URLs enthält. Die erste ist die von außen zugängliche ngrok-URL, die mit ngrok.io gefolgt von http://localhost:3000wobei es sich um Ihren lokalen Entwicklungsserver handelt. Wenn Sie oder Nexmo nun die ngrok.io URL kontaktieren, wird sie an Ihren lokalen Server weitergeleitet.

Stellen Sie sicher, dass Sie die ngrok.io URL an einem sicheren Ort speichern. Wir werden sie im nächsten Schritt verwenden, um unser Nexmo-Konto, unsere Telefonnummer und unsere Voice-Anwendung einzurichten.

Einrichten eines Nexmo Accounts

Damit unsere Voice-Applikation funktioniert, benötigen wir einen Nexmo Account, eine von Nexmo bereitgestellte Telefonnummer, eine Nexmo Applikation und schließlich müssen wir unsere Applikation mit unserer Telefonnummer verknüpfen.

Sie können kostenlos einen Nexmo Account erstellen, und als zusätzlichen Bonus werden Ihrem Account 2 Euro gutgeschrieben, damit Sie Ihre neue Anwendung nutzen können. Besuchen Sie das Vonage API Entwickler Dashboard und folgen Sie den Anmeldeschritten, wenn Sie noch kein Vonage API Developer Account haben. Sobald Sie die Anmeldung abgeschlossen haben, sehen Sie Ihr Vonage API Developer Dashboard.

Klicken Sie im Menü auf der linken Seite auf den Voice menu Eintrag. Sie sehen dann die folgenden vier Optionen unter APPLICATIONS:

Klicken Sie auf die Option Create an application und Sie werden auf eine Seite weitergeleitet, auf der Sie eine neue Nexmo-Anwendung einrichten können.

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

• Application name Textfeld eingeben nexmo-rails-voicemail-demo

• Event URL Textfeld Ihre ngrok-URL ein: https://[ngrok url here]/event

• Answer URL Textfeld erneut Ihre ngrok-URL ein: https://[ngrok url here]/webhooks/answer

Wenn Sie fertig sind, klicken Sie auf die blaue Create Application Schaltfläche.

Nachdem die Anwendung erstellt wurde, können Sie ein öffentliches/privates Schlüsselpaar erzeugen. Sie benötigen diese Schlüssel für den Zugriff auf die Voicemail-Aufzeichnungen über die API. Klicken Sie auf generate public/private key pair und verschieben Sie die automatisch heruntergeladene private.key Datei in den Stammordner unserer Anwendung.

Falls Sie es noch nicht getan haben, wäre jetzt ein guter Zeitpunkt, eine .gitignore Datei auf der obersten Ebene Ihrer Anwendung zu erstellen und ./private.key hinzuzufügen, um Ihren privaten Schlüssel nicht an die Versionskontrolle zu übergeben.

Sie haben nun eine Nexmo Voice Anwendung erstellt. Der nächste Schritt besteht darin, eine Nexmo-Telefonnummer zu erwerben und sie mit dieser Anwendung zu verknüpfen.

Klicken Sie auf dem Nexmo Dashboard auf den Menüpunkt Numbers Menüpunkt im linken Menü. Es werden drei Optionen angezeigt:

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.

Für unsere Zwecke: Wählen Sie das Land, in dem Sie sich gerade befinden, so dass der Anruf für Sie ein Ortsgespräch ist; wählen Sie Voice für die Merkmale und entweder Handy oder Festnetz für den Typ. Für das Textfeld brauchen Sie nichts einzugeben. Number Textfeld eingeben. Wenn Sie auf Searchklicken, wird eine Liste der verfügbaren Telefonnummern angezeigt.

Wählen Sie eine aus, indem Sie auf die orangefarbene Buy klicken und bei der Sicherheitsabfrage erneut auf die orangefarbene Buy in der Bestätigungsaufforderung noch einmal.

Sobald Sie die Nummer besitzen, können Sie sie mit Ihrer nexmo-rails-voicemail-demo Voice-Anwendung verknüpfen. Klicken Sie dazu auf das Zahnrad-Symbol neben der Telefonnummer und Sie sehen das folgende Menü:

Wählen Sie die nexmo-rails-voicemail-demo Anwendung aus der Dropdown-Liste und klicken Sie auf die blaue Ok Schaltfläche. Ihre Nexmo-Telefonnummer ist nun mit Ihrer Voice-Anwendung verknüpft und bereit, eingehende Anrufe über Voice-Proxy anzunehmen und weiterzuleiten.

Unser letzter Schritt, bevor wir unsere Anwendung starten können, ist die Definition von Rails Controller, View, Model und Routes.

Unsere Rails-App einrichten

Bevor wir mit dem Schreiben des Codes für unser Modell, die Ansicht und den Controller beginnen, sollten wir uns einen Moment Zeit nehmen, um zu erläutern, was die Anwendung tun soll. Es gibt zwei verschiedene Aspekte unserer Anwendung:

• Telefonanrufe entgegennehmen und eine Nachricht aufzeichnen

• Anzeigen und Zugänglichmachen der Aufzeichnungen auf einer Webseite

Um die erste Aufgabe der Annahme eines Anrufs und der Aufzeichnung einer Nachricht zu erfüllen, benötigen wir eine Webhook-Route, die die Anfrage von der Nexmo Voice API bei der Beantwortung eines Anrufs annehmen und Anweisungen an die API zurücksenden kann. Dann benötigen wir eine separate Route, die die Statusaktualisierungen für den Anruf annehmen kann.

Die zweite Aufgabe für unsere Anwendung erfordert eine Route, die eine GET Anfrage zur Auflistung aller Aufnahmen annehmen kann. Da wir alle Aufnahmen auflisten müssen, müssen wir außerdem jede einzelne Aufnahme in der Datenbank speichern, die wir zuvor erstellt haben. Außerdem müssen wir jede Aufnahme selbst speichern, damit sie für den Hörer leicht wiedergegeben werden kann.

Nun, da wir einen konzeptionellen Weg vor Augen haben, worauf wir hinarbeiten, können wir mit der Umsetzung beginnen.

Definieren Sie unsere Routen

Öffnen Sie die Datei /config/routes.rb Datei in Ihrem Code-Editor und fügen Sie die folgenden Routen hinzu:

# routes.rb

get '/', to: 'voicemail#index'
get '/answer', to: 'voicemail#answer'
post '/event', to: 'voicemail#event'
post '/recording', to: 'voicemail#new'

Wir haben vier separate Routen erstellt, die den gesamten Datenverkehr zu unserer Anwendung zu den entsprechenden Methoden in unserem bald zu erstellenden Voicemail-Controller leiten werden. Wir haben zwei GET Anfragerouten erstellt; eine, um die Top-Level-Anfrage zu bearbeiten, um alle Aufnahmen aufzulisten, und eine, um die anfängliche API-Anfrage von Nexmo zu erhalten, wenn ein Telefonanruf angenommen wird. Wir haben auch zwei POST Anfragen; eine, um Status-Updates von Nexmo über den Anruf zu erhalten, und eine, um die Aufnahme zu speichern, wenn der Anruf beendet ist.

Definieren Sie unsere Controller-Aktionen

Die Routen, die wir erstellt haben, verweisen auf einen Controller, den wir noch nicht erstellt haben, also machen wir das jetzt. Führen Sie in der Befehlszeile Folgendes aus:

Dadurch wird eine Datei in /app/controllers mit dem Namen voicemail_controller.rb. Für jede der Routen muss eine Aktion erstellt werden. Diese Aktionen enthalten die Logik hinter der Route und leiten den Datenverkehr gegebenenfalls an die entsprechende Ansicht weiter. Die Aktionen sind die folgenden:

• #index: Enthält eine Instanzvariable namens @recordings die alle Voicemail-Datensätze enthält.

• #answer: Rendert ein Nexmo Call Control Object (NCCO) [JSON-Objekt, das die Anweisungen für die Nexmo-API enthält] an die Nexmo-API.

• #event: Empfängt Aktualisierungen von der Nexmo API. Wenn die Anwendung einen Status von answerederhält, erstellt die Methode einen neuen Eintrag in der Recordings Tabelle.

• #new: Wird von der API aufgerufen, wenn eine Aufnahme gemacht wurde und aktualisiert einen Aufnahmeeintrag mit der recording_uuiddie eindeutige ID für die Audioaufnahme.

Bevor wir Methoden definieren, erstellen wir schließlich zwei konstante Variablen: NEXMO_NUMBER und EXTERNAL_URL, die unsere Nexmo-Telefonnummer, die wir bereitgestellt haben, bzw. die URL für unsere extern zugängliche ngrok-URL enthalten. Stellen Sie sicher, dass Sie diese in Ihrem Controller mit Ihren Informationen definieren.

So wird unser Controller aussehen, wenn er fertig ist:

# voicemail_controller.rb

class VoicemailController < ApplicationController
    skip_before_action :verify_authenticity_token

    NEXMO_NUMBER = YOUR PHONE NUMBER GOES HERE
    EXTERNAL_URL = 'YOUR NGROK URL GOES HERE'
    
    def index
        @recordings = Recording.all
    end

    def answer
        render json:
        [
            {
                :action => 'talk',
                :text => 'Leave your message after the beep.'
            },
            {
                :action => 'record',
                :beepStart => true,
                :eventUrl => [ "#{EXTERNAL_URL}/recording" ],
                :endOnSilence => 3
            }
        ]
    end

    def event
        if params['status'] == 'answered'
            Recording.create(conversation_uuid: params['conversation_uuid'], from: params['from'])
        end
    end

    def new
        if params['recording_url']
            recording = Recording.find_by(uuid: params['conversation_uuid'])
            recording.recording_uuid = params['recording_uuid']
            recording.save
            Nexmo.files.save(params['recording_url'], "public/voicemail/#{params['recording_uuid']}.wav")
        end
    end
end

Definieren Sie unser Modell

In unserer Anwendung müssen wir nur ein Modell erstellen, das wir für die Interaktion mit unserer Recordings Tabelle in der Datenbank interagiert. Machen Sie weiter und erstellen Sie eine Datei namens recording.rb in /app/models/ und alles, was Sie darin tun müssen, ist einfach zu definieren, dass es ein Modell ist, das erbt von ActiveRecord::Base:

# recording.rb

class Recording < ActiveRecord::Base
end

Da wir nun unsere Routes, unseren Controller und unser Model definiert haben, müssen wir als nächstes eine #index Ansicht. Lassen Sie uns das jetzt tun.

Unsere Ansicht erstellen

Wir müssen eine Ansicht für unsere Anwendung erstellen, in der alle Voicemail-Aufzeichnungen angezeigt werden. Der Benutzer kann auf eine beliebige Aufzeichnung klicken, um sie abzuspielen. Wir müssen eine index.html.erb Datei in /app/views/voicemail. Innerhalb dieser Datei wollen wir die @recordings Instanzvariable nutzen, die wir in der Voicemail-Controller #index Aktion erstellt haben, die alle Einträge in der Recordings Tabelle enthält. Wir werden über diese Daten iterieren und eine HTML-Tabelle erstellen, um alle Aufnahmen aufzulisten. Unsere endgültige Ansicht wird den folgenden Code enthalten:

# index.html.erb

<h1>Your Voicemail</h1>

<strong>You have <%= Dir["public/voicemail/*"].length %> messages</strong>

<br /><br />

<table>
    <tr>
        <th>From</th>
        <th>Timestamp</th>
        <th>Conversation UUID</th>
        <th>Recording</th>
    </tr>
    <% @recordings.each do |r| %>
        <tr>
            <td><%= r.from %></td>
            <td><%= r.created_at %></td>
            <td><%= r.conversation_uuid %></td>
            <td><a href="/voicemail/<%= r.recording_uuid %>.wav">Click here to listen</a></td>
        </tr>
    <% end %>
</table>

Das einzige zusätzliche Element, das wir der Ansicht zusätzlich zur HTML-Tabelle hinzugefügt haben, ist die Anzahl der Voicemail-Aufzeichnungen. Wir verwenden die #length Methode in Ruby, um die Anzahl der Dateien im lokalen Ordner für Voicemail-Aufzeichnungen zu zählen und diese Zahl anzuzeigen.

Mit der Erstellung der Ansicht ist unsere App nun fast fertig. Als letztes müssen wir unsere Nexmo-API-Zugangsdaten als Umgebungsvariablen hinzufügen und unseren Nexmo-Client mit dem Nexmo-Rails-Initialisierer initialisieren.

Hinzufügen von Nexmo Credentials und Initialisierung eines Nexmo Clients

Zu Beginn dieses Tutorials haben wir die dotenv-rails und nexmo_rails Gems als Abhängigkeiten installiert. Ersteres hilft uns bei der Verwendung von Umgebungsvariablen in unserer Anwendung, während letzteres einen Rails-Generator enthält, um einen Nexmo Credentialed Client zu initialisieren.

Um unsere Nexmo-Anmeldedaten hinzuzufügen, müssen wir zunächst die Datei öffnen oder erstellen, falls sie noch nicht existiert, .env im Stammordner unseres Projekts. In dieser .env Datei fügen wir unsere Anmeldedaten für unseren Nexmo-API-Schlüssel, das Geheimnis, den Dateipfad für den privaten Schlüssel und die Anwendungs-ID hinzu. Die Datei sieht wie folgt aus, wobei Sie die Werte durch Ihre eindeutigen Anmeldedaten ersetzen, die Sie im Nexmo-Dashboard erhalten haben:

# .env

NEXMO_API_KEY=your api key
NEXMO_API_SECRET=your api secret
NEXMO_APPLICATION_ID=your application id
NEXMO_PRIVATE_KEY=./private.key

Nun, da unsere Anmeldeinformationen als Umgebungsvariablen hinzugefügt wurden, können wir den Generator starten. Führen Sie in der Befehlszeile Folgendes aus:

Das war's! Sie haben jetzt eine voll funktionsfähige Anwendung.

Starten Sie Ihren Rails-Server und stellen Sie sicher, dass ngrok läuft. Rufen Sie ihn dann an und hinterlassen Sie eine Nachricht!