はじめに
ProtoPie Connect には、IFTTT、Logitech G29 のステアリングホイール、Arduino などと連携するための、便利で使いやすいプラグインがあらかじめ用意されています。blokdots 経由でも直接シリアル接続でも利用できます。では、プラグインで対応していないものと連携したい場合はどうでしょうか？ ProtoPie Enterprise プランに加入していれば、独自のブリッジアプリを作成して、あなたの Pie を任意の製品やサービスに接続することができます。
学ぶ内容
このレッスンでは、Node.js アプリが、Socket.io と呼ばれる接続技術を使って ProtoPie Connect と連携する方法を学びます。具体的には、次のことを行います。
まず、アプリから ProtoPie Connect にすばやく接続できるようにするための、標準的な「ボイラープレート」コードから始めます。
Moment.js ライブラリを使って、整形された日時を Pie に提供します。
OpenWeather の API を使って現在の天気を取得し、Pie に提供します。
所要時間: ≤45分
必要なもの
ProtoPie Enterprise サブスクリプション
ProtoPie Connect 用のカスタムブリッジアプリの作成は、ProtoPie Enterprise サブスクリプションに含まれる完全版の Connect でのみ動作します。Enterprise 加入者は、ProtoPie Connect でカスタムプラグインを使ったり作成したりできる追加機能を利用できます。
ある程度のコーディング経験
以下の例に沿って進めるのに、プロの開発者である必要はありません。以前に JavaScript で少しでもコードを書いたことがあるなら、大丈夫でしょう。ただし、今まで一度もコードを書いたことがないなら、かなり厳しいかもしれません。
もしコーディングがまったく初めてなら、まず次のチュートリアルを先にやってみることをおすすめします。
コーディングを学ぶには確かに時間がかかりますが、プロトタイピングにはとても役立つスキルですし、デザイナーであっても、少しでもコードについて知っていると、エンジニアチームとの関係に大きなプラスになります。
まともなテキストエディタ
コーディングをするので、良いテキストエディタが必要です。Notepad のような OS 標準のユーティリティでも動きますが、理想的ではありません。幸い、優れたエディタはたくさんあります。
私の例では Sublime Text を使うので、同じ画面を見たい場合は Sublime Text を使ってください。
OpenWeather アカウント
OpenWeather のウェブサイトにアクセスしてアカウントを作成してください。天気 API に接続するために必要です。今回は無料サービスを使うので、有料アカウントを設定する必要はありません。
開始コードと Pie
始めるためのコードを書いておきました。この ZIP ファイルをダウンロードして、コンピュータのわかりやすい場所に展開してください。そして、ProtoPie Studio で Pie ファイルを開いてください。
[ブリッジアプリ開始コード] [Weather Control Pie]
さあ、始めましょう！
下の動画に沿って進めてください。
コード
動画の 25:39 で、Icon Map 用のコードスニペットを貼り付けます。ここにそのコードを載せておくので、プロジェクトにコピー＆ペーストしてください。
以下が完成版のコードです。
このコードを使うには、次の手順に従ってください。
npm installで依存関係をインストールします。index.jsを編集し、66行目に OpenWeather の API キーを追加します。npm startでブリッジアプリを実行します。
66行目を API キーで編集してください
完成した Pie ファイル
完成状態の Pie ファイルは次のとおりです。
以上です！ でも、ここで終わりではありません。シリーズ最終回の Intro to ProtoPie Connect 7 of 7: Advanced Bridge App - Connect to Your Smart Home で、これをさらに次のレベルに進めてみましょう。
