GR-PEACH + AzureでIoTを試す（組込みデバイスの情報をクラウドにあげるまで）

# Visual Studio 2015のインストール
1. https://www.visualstudio.com/downloads/download-visual-studio-vs から無償版のCommunity Editionをダウンロード
2. カスタムインストールで下記2つにチェックをつけてインストールする。

- Microsoft SQL Server Data Tools
- Web Developer Tools

# Microsoft .NET Micro Frameworkのインストール
1. https://netmf.codeplex.com/ から最新版をダウンロード
2. MicroFrameworkSDKを実行してインストールする
3. netmfvs14を実行してVisual Studio 2015と関連付けを行う
![image](https://qiita-image-store.s3.amazonaws.com/0/100746/01300956-12e3-d78e-c18c-ca007fc23319.png)

# Azure SDKのインストール
1. http://azure.microsoft.com/ja-jp/downloads/ へアクセスしてVS2015を選択する
![image](https://qiita-image-store.s3.amazonaws.com/0/100746/91ce5bbb-93df-dbb1-4766-55323411578c.png)
2. ダウンロードされたファイルを実行し、インストールを進める

# ファームウェアのインストール
1. http://netmf4mbed.codeplex.com/ からファームウェアをダウンロード
2. ダウンロードしたzipファイルのプロパティを開き、ブロックを解除した上で解凍する。解凍すると、tinyclrnbl.binファイルができる。
3. GR-PEACH外側のUSBコネクタと接続する。
4. PCでドライブとして認識されるので、そのドライブに先ほどのtinyclrnbl.binを保存する。
5. 完了すると再マウントされる
6. PCからUSBを抜き、GR-PEACHからUSBを抜く

# デバイスドライバーインストラーのダウンロード
1. http://aka.ms/IoTKitHoLPDD からGRPeach_NETMF_Driver.zipをダウンロード
2. zipファイルを展開し、中身のINSTALLを実行する
3. https://www.visualstudio.com/ja-jp/products/code-vs.aspx からGR-PEACHの内側のUSBコネクタにUSBケーブルを接続し、PCに接続する。
4. .NET Micro Framework Deployment Toolを開き、Deviceに"USB"を指定すると、"GR_PEACH_GR_PEACH"と表示されることを確認する。
<img width="695" alt="スクリーンショット 2016-03-29 17.12.29.png" src="https://qiita-image-store.s3.amazonaws.com/0/100746/16e8c1b5-bc4d-a9d8-9ab0-0d06d69a9bc1.png">
5. メニューから『Target』 → 『Configuration』 → 『Network』を選択（仮想環境(VB)のWindows10からだとエラー"Device has old or unsupported configuration"が発生する。解決方法知ってる方は教えてください）
6. Network Configurationダイアログが開くので、MAC Addressを変更してUpdateボタンを押す
7. メニューから『Manage Device Keys』 → 『Update SSL Seed』を選択する。テキストボックスに"Update Complete!"と表示されれば成功（SSLが使えるようになる）。

# Visual Studio 2015でアプリ開発
1. Visual Studio 2015を開く
2. メニューの『ファイル』 → 『新規作成』 → 『プロジェクト』を選択
3. 『Visual C#』 → 『Micro Framework』 → 『Console Application』を選択してOK
4. ソリューションエクスプローラー上でプロジェクトを右クリックしてプロパティを選択
5. 『.Net Micro Framework』タブの『Deployment』 → 『Transport』でUSBを選択
6. Deviceに"GR_PEACH_GR_PEACH"が表示される
<img width="898" alt="スクリーンショット 2016-03-31 11.35.29.png" src="https://qiita-image-store.s3.amazonaws.com/0/100746/0fc01a95-8a99-cc2e-a5fd-d95534d97de1.png">
7. Program.csを開く
8. 10行目にブレークポイントを置く
9. 開始ボタンを押す(仮想環境(VB)のWindows10からだとエラー発生)。F10を何度か押してプログラムを完了させると出力に"Hello World!"の表示が確認できる。

# 組込みデバイスをAzureへ接続する
1. イーサネットケーブルを接続する
2. http://aka.ms/IoTKitHoLV3Support からzipファイルをダウンロードして解凍する（以後支援ファイルと呼ぶ）
3. Visual Studio 2015でPinKitIoTHubAppフォルダ内のPinKitHubApp.slnを開く
4. HandsOn.csを開き、実行ボタンを押す
5. TryConnect()内でブレークするので続行ボタンを押す
6. 出力ビューに"Hello - xxxxxx"と表示される
![iot2.png](https://qiita-image-store.s3.amazonaws.com/0/100746/a1173a6c-73a6-2410-70dd-dd9fc8c1da7b.png)
7. ここまで確認できたらデバッグを中止する

# プロジェクトをWebに公開するためのAzureの設定
1. http://portal.azure.com へアクセスしてサインインする
2. メニューから『新規』 → 『WEB + モバイル』 → 『Mobile App』を選択
3. アプリ名、サブスクリプション、リソースグループを入力する
4. App Service プランを新規登録する（プラン名は適当、場所はJapan West、価格レベルはD1 Shared）
<img width="896" alt="スクリーンショット 2016-03-31 16.13.30.png" src="https://qiita-image-store.s3.amazonaws.com/0/100746/fad284df-8fcb-9d90-23db-40322e403129.png">
5. ダッシュボードにピン留めするをチェックして作成ボタンを押す
6. 作成されたMobile Appの『設定』 → 『クイックスタート』 → 『Windows C#』 → 『Connect a database』を選択
7. 『Add』 → 『必要な設定の構成』 → 『新しいデータベースの作成』を選択
8. 名前に"IoTHoLDB"と入力し、価格レベルに"Basic"を選択
9. 『サーバー 必要な設定の構成』を選択
10. サーバー名を適当に入力、サーバー管理者ログインに"iotadmin"と入力、パスワードと場所を適宜入力してOKを押す
<img width="624" alt="スクリーンショット 2016-03-31 16.32.11.png" src="https://qiita-image-store.s3.amazonaws.com/0/100746/a2afcd47-c572-de05-e13d-d3bacebe7f0c.png">
11. OKを押してData Connectionを作成する
12. 『Create a table API』 → 『Backend language:』でC#を選択してDownloadボタンを押し、適当なフォルダに保存、zipを解凍する

# プロジェクトをWebに公開する
1. 解凍したslnファイルをVisual Studio 2015で開く
2. メニューの『ビルド』 → 『ソリューションのリビルド』を選択し、リビルドを行う
3. ソリューションエクスプローラー上でDataObjectsを右クリックし、『追加』 → 『クラス』を選択
4. "DeviceEntry.cs"という名前で追加を押す
![iot3.png](https://qiita-image-store.s3.amazonaws.com/0/100746/51868c23-a233-3940-953f-57766bd9aa61.png)
5. 以下のようにDeviceEntry.csを編集して保存する(xxxxxxxxxxの部分は適宜変更)

```lang:DeviceEntry.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace xxxxxxxxxxService.DataObjects
{
    using Microsoft.Azure.Mobile.Server;
    public class DeviceEntry : EntityData
    {
        public string DeviceId { get; set; }
        public bool ServiceAvailable { get; set; }
        public string IoTHubEndpoint { get; set; }
        public string DeviceKey { get; set; }
    }
}
```

6. ソリューションエクスプローラーで"DataObjects"フォルダを右クリックし、『追加』 → 『新規スキャフォールディングアイテム』を選択し、『Azure Mobile Appsのテーブルコントローラー』を選択する
7. モデルクラスに"DeviceEntry"を選択し、データコンテキストクラスをコンボボックスから選択し、追加を押す
![iot5.png](https://qiita-image-store.s3.amazonaws.com/0/100746/2696d1b2-f623-b812-313c-a1a342fc704b.png)
8. ソリューションエクスプローラー上でプロジェクトを右クリックし、『公開』を選択
9. "Microsoft Azure App Service(A)"を選択し、表示に"リソースの種類"を選択する。Movile App以下のプロジェクトを選択し、OKを押す。
![iot6.png](https://qiita-image-store.s3.amazonaws.com/0/100746/2122681a-1e44-159d-d838-cd3cbce29303.png)
10. "Webを発行"ダイアログが開かれるので、"次へ"を選択して構成を"Debug"に変更する。
![iot7.png](https://qiita-image-store.s3.amazonaws.com/0/100746/a844b4fa-3cd4-fcce-c252-eb34fa009820.png)
11. 『発行』を選択すると、Azureに配置され、ブラウザでMobile Serviceのトップページが表示される
![iot8.png](https://qiita-image-store.s3.amazonaws.com/0/100746/d816c111-3d84-2886-67c1-3d8bd62b340d.png)

# 組込みデバイスのアプリにMobile App接続情報を追加する
1. これまで作業していたVisual Studio 2015とは別にもう一つVisual Studio 2015を起動し、PinKitIoTHubAppプロジェクトのHandsOn.csを開く。
2. 1,2行目のコメントアウトを外す
![iot9.png](https://qiita-image-store.s3.amazonaws.com/0/100746/beedaf74-7d6b-093c-853c-7b62821b1b0f.png)
3. IoTHoLConfig.csを開き、8行目のDeviceEntryEndPointの[MobileAppName]の部分をサービス名に置き換える
![iot10.png](https://qiita-image-store.s3.amazonaws.com/0/100746/7404df29-34ce-9b39-d218-be6943f0f5ea.png)
![iot11.png](https://qiita-image-store.s3.amazonaws.com/0/100746/d2888a7d-58f2-0b77-d8e0-4aec91a91aaa.png)
4. HandsOn.csのEntryDeviceにブレークポイントを設定して開始を押し、ステップ実行で動作確認する。

# 組込みデバイスから登録された情報をWebに公開する
1. 支援ファイルのStep2フォルダ内の"DeviceEntry.html", "DeviceEntry.js", "DeviceEntry.css"をMobile Appプロジェクトに追加する
![iot12.png](https://qiita-image-store.s3.amazonaws.com/0/100746/c8ad5f5b-0e43-f5f9-267a-2d8f70d0fb07.png)
2. DeviceEntry.jsを開き、2行目のmobileAppNameにサービス名を設定する
![iot13.png](https://qiita-image-store.s3.amazonaws.com/0/100746/fad643ec-cf56-385d-a5c2-91a53e142d0d.png)
3. ソリューションエクスプローラー上でプロジェクトを右クリックし、"公開"を選択し、発行をクリックしてクラウド側のサービスを更新する。
4. ブラウザで表示されたらURLにDeviceEntry.htmlを追加してアクセスすると、下記のようにデバイスの情報が表示される。
![iot14.png](https://qiita-image-store.s3.amazonaws.com/0/100746/d3878922-7dfd-aa36-8d30-adfb37b37591.png)

# 参考
https://docs.com/ota-hiroshi/2325/iotver3