Sie wurden also von Ihren Freunden Bob und Carol zu einem Blind Date verabredet, und es stellt sich heraus, dass sie fantastisch schlechte Menschenkenner sind. Dein Date ist unhöflich, hat schreckliche Tischmanieren und riecht, um ehrlich zu sein, komisch.

Sie müssen diese Verabredung schnell hinter sich lassen.

Sie haben die Wahl zwischen zwei Möglichkeiten. Die erste ist ein altbewährter Klassiker. Du zeigst auf etwas über die Schulter und rufst: "Schau mal das!" Während sie abgelenkt sind, kippst du deinen Stuhl um und rennst zur Tür. Vergessen Sie nicht, vorher Ihr Telefon zu nehmen.

Natürlich verletzt ein solches Verhalten die Gefühle der Menschen. Was Sie brauchen, ist ein Anruf von einem Freund, der dringend Hilfe braucht, in diesem Moment. Und wissen Sie, wer Ihr Freund ist? Nexmo ist Ihr Freund. Wäre es nicht toll, wenn Sie einen Anruf auslösen könnten, indem Sie einfach an Ihrer Uhr herumfummeln? Ich zeige dir, wie du das machen kannst, mit der Fitbit Ionic Smartwatch und der Nexmo Voice API.

Dank an @aaronbassett für diese Idee!

Die Fitbit Ionic

Ich habe vor kurzem ein Fitbit Ionic zum Ausprobieren bekommen. Wie alle Fitbit-Geräte ist es großartig, um die Gesundheit zu überwachen - Schritte zu zählen, den Schlaf zu überwachen usw. Das Besondere an der Ionic ist, dass man sie einfach mit JavaScript, CSS und SVG programmieren kann. Sie verfügt über eine Reihe von Sensoren, darunter ein Beschleunigungsmesser, ein Barometer, ein Gyroskop, ein Herzfrequenzmesser und ein Orientierungssensor. Außerdem verfügt es über APIs zum Erstellen von und Verbinden mit Begleitanwendungen, die auf Ihrem Telefon laufen.

Ich vermute, Fitbit erwartet von Ihnen, dass Sie Folgendes schreiben nützliche Ionic-Apps zu schreiben, um Ihr Snowboarding, Kajakfahren oder Surfen zu verfolgen. Ich wollte etwas bauen, das ein bisschen weniger anstrengend zu testen ist.

Nexmo Voice API

Mit der Nexmo Voice API können Sie Anwendungen erstellen, die Telefonanrufe tätigen oder entgegennehmen können. Sie enthält Funktionen, mit denen Sie komplette Sprachmenüsysteme erstellen können. Aber wir werden sie nur verwenden, um einen ausgehenden Anruf (von Nexmo) an Ihr Telefon zu tätigen, ausgelöst durch eine App, die auf der Ionic läuft. Für die Erstellung dieser Anwendung sind verschiedene Komponenten erforderlich, also lassen Sie uns über die verschiedenen Teile sprechen, die wir erstellen müssen.

Verschwinden Sie!

Wir werden eine App namens Bail Out! um aus schlechten Verabredungen herauszukommen. Der gesamte Quellcode ist auf GitHub wenn du sehen willst, wie es aussieht, wenn alles zusammengefügt ist.

Die Grundidee scheint ziemlich einfach zu sein. Wir haben eine Taste auf der Ionic. Wenn Sie ihn drücken, ruft Nexmo Ihr Telefon an. In der Praxis ist es ein wenig komplexer. Die Ionic kann keine HTTP-Anfragen stellen. Um eine Internetverbindung zu erhalten, muss man eine Begleit-App schreiben, die innerhalb der Fitbit-App auf deinem Telefon läuft. Die Ionic verbindet sich also mit der Begleit-App, und die Begleit-App stellt die HTTP-Anfrage.

Ein häufiger Fehler, den Leute machen, wenn sie zum ersten Mal mobile Apps für Nexmo entwickeln, ist, den geheimen Nexmo-Schlüssel in ihre App einzubetten innerhalb ihrer App! Tun Sie das nicht! Es wäre zu einfach für Leute, die deine App heruntergeladen haben, sie auseinanderzunehmen, deinen geheimen Schlüssel zu extrahieren und dann das ganze Geld auf deinem Nexmo Account auszugeben!

Stattdessen müssen Sie einen kleinen Dienst (oder eine serverlose Funktion!) schreiben, der auf Ihrem Server läuft. Er wartet auf Anfragen von Ihrer Companion App und ruft Nexmo an. Sie sollten eine gewisse Authentifizierung einbauen, aber der Hauptvorteil ist, dass selbst wenn jemand Ihren Dienst anrufen kann, er auf den spezifischen Funktionsumfang beschränkt ist, den Ihr Dienst bereitstellt. In diesem Fall nur auf die Möglichkeit, jemanden anzurufen und eine aufgezeichnete Nachricht abzuspielen.

Wir haben also eigentlich drei Dinge zu schreiben:

1. Eine Fitbit Ionic-App mit einer großen Taste.

2. Eine Begleit-App, die auf Anfragen von der Ionic-App hört und eine HTTP-Anfrage an unseren Server stellt.

3. Ein kleiner Server, der eine Anfrage von der Begleit-App entgegennimmt und Nexmo auffordert, Ihr Telefon anzurufen.

Das wird ein Spaß! Fangen wir an...

Erste Schritte

Als Erstes müssen Sie sich anmelden bei studio.fitbit.comDies ist die Online-IDE, die Fitbit entwickelt hat, um dir bei der Erstellung von Apps für die Ionic zu helfen. Sobald Sie eingeloggt sind, klicken Sie auf die Schaltfläche Neues Projekt Schaltfläche, wähle Starter und drücken Sie Erstellen.

Sie sollten eine Online-IDE sehen, die wie folgt aussieht:

Es lohnt sich, dieses Ionic-Beispiel und die dazugehörige App auf Ihrem Telefon zu installieren, um sicherzustellen, dass alles funktioniert.

Verbinden Sie Ihr Ionic

Das Anschließen der Ionic kann ein wenig fummelig sein. Sie müssen Folgendes auswählen Einstellungen auf Ihrer Ionic auswählen und nach unten scrollen, wo Sie die Option Entwickler-Brücke. Wenn Sie darauf klicken, sollte die Verbindung zur IDE hergestellt werden. Es kann eine kleine Weile dauern, und sobald die Verbindung hergestellt ist, müssen Sie wahrscheinlich auf Aktualisieren unter dem Menüpunkt Ein Gerät auswählen Menü in Fitbit Studio aktualisieren. Hoffentlich siehst du jetzt Ionic im Menü sehen, und wenn du sie auswählst, sollte sie "Verbunden" anzeigen. Die Ionic trennt die Verbindung nach einer kurzen Zeit, sodass du diese Schritte von Zeit zu Zeit wiederholen musst.

Verbinden Sie Ihr Telefon

Sie schließen Ihr Telefon auf ähnliche Weise an.

1. Öffnen Sie die App auf Ihrem Handy (ich benutze Android)

2. Seite mit Ihrem Account öffnen

3. Klicken Sie auf Ihr konfiguriertes **Ionic** Gerät

4. öffnen Sie das **Entwicklermenü**, und

5. schalten Sie den Schalter **Entwicklerbrücke** um.

Das Verbinden kann eine Weile dauern. Sobald die Verbindung hergestellt ist, wähle **Aktualisieren** in Fitbit Studio aus, damit dein Telefon aufgelistet wird. Klicke es an, um es mit Fitbit Studio zu verbinden.

Installieren Ihrer Apps

Installieren wir nun die Beispielanwendung auf dem Telefon und Ionic, um zu prüfen, ob alles funktioniert. Drücken Sie die Ausführen am oberen Rand des Bildschirms.

Schreiben der Ionic-App

Zuerst wollen wir eine Benutzeroberfläche erstellen. Sie wird nichts tun, bevor wir nicht etwas Code geschrieben haben, aber sie wird uns etwas zu sehen geben. Unsere GUI-Beschreibung ist in resources/index.guiund es ist eine Untermenge von SVG:

<svg>
  <image id="connectivityicon" href="disconnected.png" x="100%-50" y="10" width="40" height="40"/>
  <use id="bailoutbutton" href="#square-button-icon" y="0" width="100%" height="100%" fill="fb-red">
    <set href="#text" attributeName="text-buffer" to="Bail!" />
    <set href="#text" attributeName="font-size" to="100" />
    <set href="#image" attributeName="href" to="icon.png" />
    <set href="#image" attributeName="height" to="60" />
    <set href="#image" attributeName="width" to="60" />
  </use>
</svg>

Beachten Sie, dass fast alles davon Konfiguration für die große Schaltfläche ist, die eine "quadratische Schaltfläche mit einem Symbol" ist. Wir brauchen auch Symbole für die große Schaltfläche und "verbundene" und "getrennte" Bilder für das Konnektivitätssymbol. Sie finden diese im GitHub-Repositorium: button_icon.png, connected.png, und disconnected.png. Sie alle gehören in den resources Ordner. Wenn Sie schon dabei sind, sollten Sie auch icon.pngDamit wird das Standard-Fitbit-Logo der Anwendung auf der Uhr durch ein cooles Exit-Logo ersetzt!

Sie müssen auch die Datei widgets.gui aktualisieren, so dass es wie folgt aussieht:

<svg>
  <defs>
    <link rel="stylesheet" href="styles.css" />
    <link rel="import" href="/mnt/sysassets/widgets_common.gui" />
    <link rel="import" href="/mnt/sysassets/widgets/square_button_widget.gui" />
  </defs>
</svg>

Dadurch wird das "quadratische Schaltflächen-Widget" für unsere Anwendung verfügbar.

Wenn Sie möchten, können Sie ausführen. drücken, um die Benutzeroberfläche auf der Uhr zu sehen. Sie wird noch nichts tun. Das sollten wir ändern...

Der Code Ihrer Ionic-App sollte in einer einzigen index.js Datei innerhalb des Verzeichnisses app Verzeichnis. Diese JavaScript-Datei wird ausgeführt, wenn die Watch-App gestartet wird. Ich habe das gesamte Verhalten in eine BailOutUI Klasse gelegt, um viele globale Variablen und Funktionen zu vermeiden. Alles wird im Konstruktor gestartet, der die UI-Elemente sucht (eine große Schaltfläche und ein kleines Symbol, das anzeigt, dass die Ionic mit dem Telefon verbunden ist). Dann wird ein Ein-Sekunden-Timer gestartet, um das Verbindungssymbol zu aktualisieren.

import document from "document";
import * as messaging from "messaging";

const CONNECTED_ICON = "connected.png";
const DISCONNECTED_ICON = "disconnected.png";

class BailOutUI {
  constructor() {
    // Look up our two UI elements:
    this.bailOutButton = document.getElementById("bailoutbutton");
    this.connectivityIcon = document.getElementById("connectivityicon");
    
    // These two methods are callbacks, so we need to bind them to this instance:
    this.bailOutActivate = this.bailOutActivate.bind(this);
    this.connectivityCheck = this.connectivityCheck.bind(this);
    
    this.bailOutButton.onactivate = this.bailOutActivate;
    
    // Once a second, we see if we're connected to the companion app:
    setInterval(this.connectivityCheck, 1000);
  }
  
  // Send a message to the companion app, telling it to trigger a "bail out".
  bailOutActivate() {
    messaging.peerSocket.send({
      'type': 'event',
      'event': 'bailout',
    })
  };
  
  // Check if we have a connection to the companion app, and update the UI accordingly.
  connectivityCheck() {
    this.updateConnectivity(messaging.peerSocket.readyState == messaging.peerSocket.OPEN);
  }
  
  // Update the UI to indicate if we're connected to the companion app or not.
  updateConnectivity(connected) {
    this.connectivityIcon.href = connected ? CONNECTED_ICON : DISCONNECTED_ICON;
  }
}

var ui = new BailOutUI();

Die Companion App

Okay! Wir haben also die Ionic-App geschrieben, und sie weiß, wie sie eine Nachricht an die Companion-App senden kann (in der bailOutActivate Methode). Aber die Companion App macht derzeit nichts mit der Nachricht. Also, schreiben wir die Begleit-App in companion/index.js.

import { me } from "companion";
import { settingsStorage } from "settings";
import * as messaging from "messaging";

// CHANGE THIS to your phone number:
const MY_PHONE_NUMBER = "447700900655";
// CHANGE THIS to your BailOut server URL:
const BAILOUT_ENDPOINT = "https://myngrokurl.ngrok.io/bail";

if (!me.permissions.granted("access_internet")) {
  console.log("We're not allowed to access the internet :-(");
}

// Listen for the onmessage event
messaging.peerSocket.onmessage = function(evt) {
  if (evt.data.type == "event") {
    if (evt.data.event == "bailout") {
      // Get the phone number from the settings screen:
      fetch(BAILOUT_ENDPOINT, {
        method: "POST",
        body: JSON.stringify({ number: MY_PHONE_NUMBER }),
        headers: {
          "Content-Type": "application/json"
        }
      });
    }
  }
};

// Listen for the onerror event
messaging.peerSocket.onerror = function(err) {
  // Handle any errors
  console.log("Connection error: " + err.code + " - " + err.message);
};

Sie möchten zu Ihrem MY_PHONE_NUMBER in Ihr Mobiltelefon und die BAILOUT_ENDPOINT in die URL Ihres Servers (die wir gleich schreiben werden). Außerdem müssen Sie package.json und stellen Sie sicher, dass Internet in der Liste der Erforderliche Berechtigungen aktiviert ist, damit die Begleitanwendung Anrufe an Ihren Server tätigen kann. Also jetzt brauchen wir einen Server.

Der Bail Out Server

Wenn ich ehrlich bin, bin ich ein Python-Typ, aber da hier schon alles in JavaScript ist, werde ich den Server mit Node und ExpressJS schreiben. Wenn Sie eine andere Sprache bevorzugen, können Sie sie gerne portieren - es gibt Nexmo-Client-Bibliotheken für JavaScript, Java, Python, PHP, Ruby, und DotNet! Es ist ziemlich kurz - es wartet auf eine POST-Anfrage von der Begleit-App und leitet sie an die Nexmo Voice API weiter:

require("dotenv").config();

const express = require("express");
const Nexmo = require("nexmo");

const nexmo = new Nexmo({
  apiKey: process.env.NEXMO_API_KEY,
  apiSecret: process.env.NEXMO_API_SECRET,
  applicationId: process.env.NEXMO_APPLICATION_ID,
  privateKey: process.env.NEXMO_APPLICATION_PRIVATE_KEY_PATH
});

// Construct an absolute URL given a request object and the desired path.
function absoluteURL(req, path) {
  return (
    (req.get("x-forwarded-proto") || req.protocol) +
    "://" +
    req.get("host") +
    path
  );
}

const app = express();

// Post {number: 'your phone number'} to schedule a bail-out call.
app.post("/bail", express.json(), (req, res) => {
  nexmo.calls.create({
    to: [
      {
        type: "phone",
        number: req.body.number
      }
    ],
    from: {
      type: "phone",
      number: process.env.NEXMO_NUMBER
    },
    answer_url: [absoluteURL(req, "/bail/emergency-message")]
  });
  res.json({ status: "ok" });
});

// This is called by Nexmo when the call is picked up.
// It tells Nexmo to read out a message, but it could do lots of things!
// Check out /api/voice/ncco to see what you could do!
app.get("/bail/emergency-message", (req, res) => {
  res.json([
    {
      action: "talk",
      voiceName: "Russell",
      text: "Help! I've been arrested and I need you to bail me out!"
    }
  ]);
});

app.listen(3000, () => {
  console.log("BailOut Server on port 3000");
});

Während der Entwicklung können Sie den Server lokal laufen lassen und mit ngrok den Server im Internet öffentlich zugänglich machen, so dass Ihr Telefon ihn erreichen kann. Wir haben ein Anleitung, wie man das macht!

Einrichten Ihrer Nexmo-Nummer

Sie benötigen eine Nexmo-Nummer (das ist die Nummer, unter der Nexmo Sie anrufen wird) von wenn Sie Ihr Telefon anrufen). Du kannst eine Nummer über das Nexmo Dashboard. Um Anrufe tätigen zu können, müssen Sie außerdem eine Nexmo-Anwendung einrichten. Am einfachsten geht das mit unserem CLI-Tool:

Machen Sie sich keine Sorgen um die "example.com"-URLs - Sie brauchen sie für diese Anwendung nicht zu ändern. Schauen Sie sich nexmo --help um zu sehen, womit dieses großartige Tool Ihnen helfen kann!

Erstellen Sie eine Datei namens .env und konfigurieren Sie sie mit Ihren Angaben. Sie sollte in etwa so aussehen:

Ändern Sie die Datei so, dass sie Ihre Nexmo-Anmeldedaten, die Details der soeben erstellten Anwendung und die virtuelle Nexmo-Nummer enthält, die Sie im Dashboard gekauft haben.

Betrieb des Servers

Jetzt haben Sie einen Server und eine Nexmo-Nummer. Wechseln Sie in das Verzeichnis, das Ihre .env-Datei enthält, und starten Sie Ihren Server wie folgt:

Stellen Sie sicher, dass Sie ngrok zur gleichen Zeit in einem anderen Fenster laufen lassen!

Alles zusammenfügen

Stelle deine Ionic und die Begleit-Apps von Fitbit Studio bereit, warte, bis das Verbindungssymbol grün wird, und drücke dann die große Taste in der Mitte des Bildschirms. Dein Telefon sollte klingeln!

Fazit

Wenn Sie sich in das GitHub-Repositorium für dieses Projekt durchstöbern, werden Sie sehen, dass ich einen Einstellungsbildschirm hinzugefügt habe, in den der Benutzer seine Telefonnummer eingeben kann, anstatt sie fest in der Begleit-App zu kodieren. Außerdem habe ich den Notruf um 30 Sekunden verzögert, damit er nicht sofort erfolgt, wenn Sie auf Ihre Uhr tippen! Sie werden sehen, dass es auch eine zusätzliche Protokollierung gibt, um die Ursache von Fehlern zu diagnostizieren, die Sie sehen. Es gibt einige Stellen (z. B. im Code der Begleit-App), an denen eine Fehlerbehandlung eine gute Idee wäre. Das überlasse ich Ihnen! Sie können auch versuchen, die Nachricht zu ändern, die Ihnen vorgelesen wird, oder die Stimme zu ändern.

Die Leistungsfähigkeit von JavaScript in Verbindung mit dem Fitbit Studio macht den Einstieg in die Entwicklung von Apps für die Ionic wirklich schnell. Es gibt eine Menge zu lernen, wie man für Ionic und das Telefon entwickelt, aber die Dokumentation wird immer besser.

Wenn Ihnen dieser Beitrag gefallen hat, sollten Sie unserem Nexmo Entwickler Twitter Account folgen. Es ist meine Lieblingsquelle für interessante technische Beiträge!

Das könnte Sie auch interessieren:

• Wie man einen ausgehenden Anruf tätigt

• Wie man eingehende Anrufe behandelt

• Nexmo Voice Dokumentation