友人のボブとキャロルにブラインド・デートをセッティングしてもらった。 素晴らしい人を見る目がないことがわかった。あなたのデート相手は無礼で、テーブルマナーも最悪で、正直言って変な匂いがする。

このデートから早く抜け出す必要がある。

選択肢は2つある。1つ目は、試行錯誤を重ねた古典的な方法だ。相手の肩越しに何かを指差し、「あれを見て」と叫ぶ。 と叫ぶ。相手が気を取られている間に、椅子を蹴り倒してドアに駆け込む。まず携帯電話を取るのを忘れずに。

もちろん、このような振る舞いは人の心を傷つけがちだ。必要なのは、緊急の助けを必要としている友人からの電話だ、 今すぐ.その友人とは誰だと思う？ ネクスモがあなたの友達です。時計をいじっているだけで電話をかけることができたら素晴らしいと思いませんか？今回はその方法を紹介しよう。 Fitbit IonicスマートウォッチとNexmo Voice API.

ありがとう アーロン・バセットに感謝する！

フィットビット・アイオニック

最近、Fitbit Ionicをもらって遊んでいる。他のFitbitデバイスと同様、歩数のカウントや睡眠のトラッキングなど、健康のトラッキングに最適だ。Ionicが他と違うのは、JavaScript、CSS、SVを使って簡単にプログラミングできることだ。 JavaScript、CSS、SVGを使って簡単にプログラミングできることだ。.加速度計、気圧計、ジャイロスコープ、心拍計、方位センサーなど、たくさんのセンサーを搭載している。また、携帯電話上で動作するコンパニオンアプリを構築し、接続するためのAPIも用意されている。

さて、Fitbitはあなたが次のような記事を書くことを期待しているのではないだろうか。 便利なスノーボードやカヤック、サーフィンをトラッキングするための便利なIonicアプリを書くことを期待しているのではないだろうか。私は、もう少しテストに疲れないものを作りたかった。

Nexmo Voice API

Nexmo Voice APIを使用すると、電話をかけたり受けたりできるアプリを作成できます。完全な音声メニューシステムを構築できる機能が含まれています。しかし、今回はIonic上で動作するアプリをトリガーとして、（Nexmoから）電話に発信するために使うだけです。このアプリケーションを作成するには、さまざまなコンポーネントが必要です。

ベイルアウト

というアプリを作ろうと思っています。 ベイルアウト！というアプリを作ります。すべてのソースコードは GitHubにある。

基本的な考え方はとても簡単だ。アイオニックにボタンがある。それを押すと、Nexmoがあなたの電話に電話をかける。実際には、もう少し複雑だ。IonicはHTTPリクエストができない。インターネットに接続するには コンパニオンアプリを書く必要があります。そのため、Ionicはコンパニオンアプリに接続し、コンパニオンアプリがHTTPリクエストを行います。

Nexmo用のモバイルアプリを初めて作成する際に、よくある間違いがあります。 を埋め込んでしまうことです。!これはやめましょう！あなたのアプリをダウンロードした人が、アプリを分解して秘密鍵を取り出し、あなたのNexmoアカウントにあるお金をすべて使ってしまいます！

その代わりに、サーバー上で動作する小さなサービス（またはサーバーレス関数！）を書く必要があります。コンパニオンアプリからのリクエストをリッスンし、Nexmoに呼び出します。認証は必要ですが、主な利点は、誰かがあなたのサービスを呼び出すことができたとしても、あなたのサービスが公開する特定の機能の範囲に限定されることです。この場合、誰かに電話をかけ、事前に録音したメッセージを再生する機能だけです。

というわけで、実は書くべきことが3つある：

1. 大きなボタンのFitbit Ionicアプリ。

2. Ionicアプリからのリクエストをリッスンし、私たちのサーバーにHTTPリクエストを行うコンパニオンアプリです。

3. コンパニオンアプリからのリクエストを受け、Nexmoに電話をかけるよう依頼する小さなサーバー。

これは楽しくなりそうだ！始めよう

はじめに

まず最初に、以下のサイトにログインしてください。 studio.fitbit.com-これはFitbitがIonic用のアプリを作るために開発したオンラインIDEです。ログインしたら 新規プロジェクトボタンを押し スターターを選択し 作成.

オンラインIDEでこのようなものが見られるはずだ：

このサンプルIonicとコンパニオンアプリをあなたの携帯電話にインストールし、すべてが機能していることを確認する価値がある。

アイオニックとの接続

Ionicの接続は少々面倒です。接続するには 設定を選択し、一番下までスクロールします。 デベロッパーブリッジ.これを押すと、IDEに接続されるはずだ。接続には少し時間がかかることがあります。 更新の下にある デバイスの選択メニューでRefreshを押す必要があるでしょう。これで Ionicがメニューに表示され、選択すると「接続済み」と表示されるはずです。Ionicはしばらくすると接続が切れるので、時々この手順をもう一度行う必要があります。

電話の接続

携帯電話も同様の方法で接続する。

1. 携帯電話でアプリを開く（私はアンドロイドです）

2. アカウントページを開く

3. 設定した**Ionic**デバイスをクリックします。

4. デベロッパーメニュー**を開き

5. スイッチを切り替えてください。

接続にはしばらく時間がかかります。接続が完了したら、Fitbit Studioで**更新**を選択すると、お使いの携帯電話が表示されます。それをクリックしてFitbit Studioに接続します。

アプリのインストール

では、サンプルアプリをスマホとIonicにインストールして、すべての動作確認をしてみましょう。サンプルアプリをスマホとIonicにインストールして 実行ボタンを押します。

Ionicアプリを書く

まず、UIを作ってみよう。コードを書くまでは何もできないが、これで何か見えてくるはずだ。GUIの記述は resources/index.guiで、これは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>

アイコンの付いた四角いボタン」である大きなボタンにはアイコンが必要で、接続アイコンには「接続中」と「切断中」の画像が必要です。これらはGitHubのレポにあります： button_icon.png, connected.pngそして disconnected.png.これらはすべて resourcesフォルダにあります。そこにいる間に、以下も入手してください。 icon.pngアプリケーションのデフォルトのFitbitロゴアイコンをクールな終了ロゴに置き換えます！

また、次のように widgets.guiを更新する必要がある：

<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>

これは、私たちのアプリで「四角いボタンウィジェット」を利用できるようにするだけです。

その場合は もう一度をもう一度押してください。まだ何もできない。修正しよう

Ionicアプリのコードは、1つの index.jsディレクトリ内の appディレクトリ内の1つのファイルに記述します。このJavaScriptファイルは、ウォッチアプリの起動時に実行されます。すべての動作を BailOutUIクラスの中にすべての動作を入れました。コンストラクタですべてがキックオフされ、UI要素（大きなボタンと、Ionicが電話に接続されていることを示す小さなアイコン）がルックアップされます。そして、接続アイコンを更新するための1秒間のタイマーをスタートさせる。

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

コンパニオンアプリ

なるほど！Ionicアプリは、コンパニオンアプリにメッセージを送信する方法を知っています。 bailOutActivateメソッドで）。しかし、コンパニオンアプリは今のところメッセージに対して何もしていない。そこで、コンパニオンアプリを 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);
};

携帯電話に変えて MY_PHONE_NUMBERをあなたの携帯電話に、そして BAILOUT_ENDPOINTを自分のサーバーのURLに変更する。また package.jsonを開き インターネットがチェックされていることを確認してください。 リクエストされたパーミッションこれでコンパニオンアプリがあなたのサーバーに電話をかけることができるようになります。これで これでサーバーが必要です。

ベイルアウト・サーバー

正直に言うと、私はPython派なのだが、ここでのすべてがすでにJavaScriptで書かれているので、NodeとExpressJSを使ってサーバーを書くことにする。他の言語がお好みなら、ご自由に移植してください。 JavaScript, Java, Python, PHP, ルビーおよび ドットネット!コンパニオンアプリからのPOSTリクエストを待ち、Nexmo Voice APIに転送します：

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

開発中は、ローカルでサーバーを実行し、ngrokを使ってインターネット上でサーバーを公開することができます。その方法については チュートリアルがあります！

Nexmo番号の設定

ネクスモ・ナンバー（ネクスモからあなたに電話がかかってくる番号）が必要です。 からが必要です。）番号は Nexmoダッシュボード.また、Nexmoアプリケーションをセットアップして通話できるようにする必要があります。CLIツールを使うのが一番簡単です：

example.com "のURLは、このアプリのために変更する必要はありません。このアプリのために変更する必要はありません。 nexmo --helpをご覧ください！

という名前のファイルを作成し .envという名前のファイルを作成し、あなたの詳細を設定する。以下のようなものだ：

Nexmoの認証情報、作成したアプリケーションの詳細、ダッシュボードで購入したNexmoのバーチャル番号を含むファイルに変更します。

サーバーの実行

これでサーバーとNexmo番号が手に入った。.envファイルのあるディレクトリにcdして、このようにサーバーを立ち上げることができる：

別のウィンドウで同時にngrokを実行していることを確認してください！

すべてをまとめる

Fitbit StudioからIonicとコンパニオンアプリをデプロイし、接続アイコンが緑になるのを待ち、画面中央の大きなボタンを押します。電話が鳴るはずです！

結論として

もしあなたが GitHub リポジトリを見ると、コンパニオンアプリに電話番号をハードコーディングする代わりに、ユーザーが電話番号を入力するための設定画面を追加したことがわかるだろう。また、時計をタップした瞬間に電話がかかってくることがないように、救済の電話を30秒間遅らせました！また、表示されたエラーの原因を診断するための追加ログもあります。コンパニオン・アプリのコードなど、エラー処理をした方がいい場所がいくつかあります。それはあなたにお任せします！また、読み上げられるメッセージを変更してみたり 声を変える.

JavaScriptのパワーとFitbit Studioを使えば、Ionic用のアプリを素早く作り始めることができる。Ionicと携帯電話向けの開発方法について学ぶことはたくさんありますが、ドキュメントは常に改善されています。

この投稿を楽しんでいただけたなら、私たちの NexmoデベロッパーTwitterアカウントをフォローしてください。興味深い技術的な投稿のお気に入りの情報源です！

ご興味のある方はこちらもご覧ください：

• アウトバウンドコールのかけ方

• インバウンドコールへの対応

• Nexmo Voice ドキュメント