Raspberry PiからMindSphereへ (1) アプリケーションを作る方法


# 目次
[Raspberry PiからMindSphereへ (1) アプリケーションを作る方法](https://qiita.com/drafts/f77f975876e8ac8eead8/edit)
[Raspberry PiからMindSphereへ (2)Assetを作る](https://qiita.com/IMdev/items/f1cb193cef360fb75e47)
[Raspberry PiからMindSphereへ (3)内部からAPIを使う](https://qiita.com/IMdev/items/ff62135375f777c8e53f)
[Raspberry PiからMindSphereへ (4)外部からAPIを使う](https://qiita.com/IMdev/items/c20abe15bf99c81aed3c)
[Raspberry PiからMindSphereへ (5)Raspberry Piからアップロードする](https://qiita.com/IMdev/items/a770b3248cecf117030e)

# MindSphereとは何か？
「IoT向けクラウドOS」です。
シーメンスが提供するクラウドベースのサービスで、主にはPaaSや、産業用IoTのためのソフトウェアとハードウェア、分析サービス、データのビジュアライゼーション、Storeを通じた様々なアプリケーションの利用などができます。
一言でまとめるのは難しいのですが、とりあえずIoT関連のクラウド管理運用サービスという理解でいいと思います。



# 本稿のゴール
最終ゴールとして、Raspberry Piから得た気温データを、MindSphere Assetに保存します。その後アプリケーションを通じてデータの取り出しなどもしてみます。
筆者も初心者のため、何か間違いなどありましたらご指摘していただけると助かります。

## 使用する主なソフトとデバイス
以下の通りです。

- ソフトウェア
 - (PC)Windows 10 Home Edition
 - (Ras-Pi)Noobs v.3.0.0
 - Cloud Foundry CLI 6.42.0
 - PHP v.7.3

- デバイス
 - Raspberry Pi 3 B+
 - オムロン環境センサー 形2JCIE-BU01

主な言語はPHPですが、APIを使用するため基本的には言語を問いません。



## 事前に必要なもの

- Raspberry PiにNoobsを利用できるよう環境設定をしておいてください。

- Mind SphereのDevOp planアカウント(筆者はDeveloper plan)
- Globalアカウント

- CF CLIで開発するため以下のロールをもらう
 - 組織管理者
 - スペース管理者
 - スペース開発者
 
- MindSphereで開発するため以下のロールをもらう
 - MindSphere developer
  - これはSettingでmdsp:core:Developerまたはmdsp:core:DeveloperAdminを設定する


注意 : Cloud FoundryとMind Sphereのロールは別モノです。

CFの場合、組織管理者に頼んで以下のコマンドを実行してもらってください。

```bash
cf set-org-role [ユーザーアカウントかメアド] [組織の名前] OrgManager
cf set-space-role [ユーザーアカウントかメアド] [組織の名前] SpaceManager
cf set-space-role [ユーザーアカウントかメアド] [組織の名前] SpaceDeveloper
```


# CF CLIをインストールする
## CFって？
少しややっこしいかもしれませんが、Mind Sphereの重要なサービスの一つであるPaaSは、Cloud Foundryというソフトウェアがベースとなっています。
Cloud FoundryというPaaSを提供するためのソフトウェアがまずあって、それをAWSで展開し、MindSphereという統合サービスでラッピングしている感じです。
つまりCloud FoundryはMind Sphereの全てではありませんが、中核的な技術の一つなので、まずCFを操作するクライアント・ソフトウェアをインストールする必要があります。

ちなみに他にCFを利用してPaaSを展開している企業として以下が挙げられます。

- IBM Cloud
- FUJITSU Cloud Service K5
- NTTコミュニケーションズ Enterprise Cloud 2.0 Cloud Foundry


## ダウンロード

CF CLIは公式のCF用コマンドライン・クライアントです。
Mac、Linux、Windows版があり、ダウンロードを以下から出来ます。
[Downloads](https://github.com/cloudfoundry/cli#downloads)

Windowsの場合はただ淡々とダウンロードとインストールをすればOKです。
このクライアントはMind Sphereのアプリケーション作成や、サービスインスタンスのバインドなどに使用するので、必ずインストールまで済ませておいてください。


## CF CLIからログインする
インストールしたら以下のコマンドを実行して、ログインを試みます。
Windowsならコマンド・プロンプトを開き、Macはターミナルを開いて、
以下のコマンドを実行してください。



```bash
cf login -sso -a https://api.cf.eu1.mindsphere.io
```


※今回の例ではregionがすべてeu1になっていますが、もしも自分のregionと違う場合はそこだけ書き換えてください。


> 'cf' は、内部コマンドまたは外部コマンド、
操作可能なプログラムまたはバッチ ファイルとして認識されていません。

……というようなエラーがWindowsで出たら、環境変数を通してください。


次にパスコードを求められるので、Mind Sphereアカウントでログインして取得してください。
https://login.cf.eu1.mindsphere.io/passcode

パスコード(WEBキーとも言いますが)を入力します。

もしも「ターゲットが設定されてない」と言われた場合は、以下のコマンドでターゲットを指定してください。

```bash
cf target [-o 組織名] [-s スペース名]
```


# Mind Sphereでアプリケーションを作る
本記事の目標の一つは、データをAssetに保存し、アプリケーションで表示するというものがあります。
この場合、Assetとアプリケーションの２つを作る必要があります。順番はどちらからでもいいのですが、今回はまずアプリケーションを作って、WEBページを表示してみることにしましょう。

## 経路を作る
先程ログインした状態で、以下のコマンドを実行してください。

```bash
cf create-route [スペース名] apps.eu1.mindsphere.io --hostname rashost
```
このコマンドをCFのURL経路を作ります。今回は「rashost」という名前で経路のホストを作りました。
以下のコマンドで実際に今ある経路一覧を見ることができます

```bash
cf routes
```

経路って何？と言われると正直自分でも把握していないのですが、たぶんリクエストのルーティングの設定をしているのではないかと思います。つまりこれから作るアプリケーションとHTTPリクエストを結びつけるためにホスト名やらをここで決めているのだと思います。


## アプリを作る
今度はブラウザでMindSphereにログインしてください。
ログイン後のトップページは「ランチパッド」と呼ばれ、ここから各種操作をします。
![MindSphere Launchpad.png](https://qiita-image-store.s3.amazonaws.com/0/365619/d39001b7-d8cb-aa76-ebb4-eb310daac69c.png)

Developer cockpitを開きCreate new applicationをクリックします。
ここで新しいアプリケーションを作りますが、
一例として以下の表のように埋めます(アプリ名などは好きな名前でも大丈夫です)

| フォーム名   | 埋める内容 |
|--------------|------------|
| Name         | raspiapp  |
| Version      | 1.0        |
| Display Name | raspiapp  |

#### Components

| フォーム名               | 埋める内容                                                                                |
|--------------------------|-------------------------------------------------------------------------------------------|
| Name                     | rashost                                                                                    |
| Cloud Foundry Direct URL | rashost.apps.eu1.mindsphere.io                                                             |
| Endpoints                | 「+」を押して、Pathに「/」(スラッシュ)だけ入力してadd <br> もう一度「+」を押してPathに「/**」と入力してadd |


#### Configuration
こちらの項目はそのアプリケーションの安全なアクセスのための信頼できるコンテンツ参照元のホワイトリストの設定や、キャッシュの制御について指定します。
以下では開発のためにcontent-security-policyの欄を空に設定していますが、将来的には必要に応じて設定しておいてください。

| フォーム名              | 埋める内容        |
|-------------------------|-------------------|
| content-security-policy | ;(セミコロンだけ) |
| cache-control           | (そのままでOK)    |

![Developer Cockpit (1).png](https://qiita-image-store.s3.amazonaws.com/0/365619/48be8ba0-ce42-1122-7545-76a0592def95.png)



App Iconにはアイコン画像が必要で、これは入力必須です。
ただし512KB以下の画像しかアップできません。
他にいい画像がなければ以下の画像をダウンロードして使ってください。
<img width="100px" src="https://qiita-image-store.s3.amazonaws.com/0/365619/b9fe753b-260a-66dd-ee08-a182c4563c30.jpeg">



ここまで出来たら、画面右上のSAVEボタンをクリックして、アプリケーションを作ってください。

## 認可管理をする
Developer Cockpitの画面に戻ります。
このときAuthorization Managementをクリックしてください。
![Developer Cockpit.png](https://qiita-image-store.s3.amazonaws.com/0/365619/b9b43f9d-b47d-e972-f61b-09ce963d4ccd.png)


すると左側にアプリが並ぶので、先程作ったraspiappをクリックしてください。
さらにCreate Scopeをクリックしてスコープを作ります。
この場合は図のようにallとだけ書きましょう。(実はこの文字はなんでもいいらしく、scopeとかでもいいです)
![Developer Cockpit (2).png](https://qiita-image-store.s3.amazonaws.com/0/365619/f84a0097-0159-b620-2ca4-a21e4e365af6.png)


ここで何をしたのかと言うと、このアプリにアクセスする権限を作りました。
作ったアプリは誰でもアクセスできるわけではありません。たとえMindSphereにログインできる人でも、たとえ同じ組織の住人であっても、アクセスして欲しい人とそうでない人に分ける必要があります。

ここでアプリにscopeを作り、そのscopeを自分に割り当てる必要があります。
scopeがそもそもなければアクセスする資格が誰にもありませんし、そのscopeをちゃんとユーザーに割り当てないと、やはりアクセスできないというわけです。
ちなみに、スコープというのは最小単位の権限のことです。
ロールというのはこの複数のスコープをまとめたもので、要するにどちらも権限みたいなものです。

## 登録してロールを設定
Registerします。
Developer Cockpitからraspiappを選び、Application Detailsを開きます。
そこで右上の方にあるRegisterをクリックします。
何かINFOのモーダルが出ますが、Proceed With Registrationをクリックしましょう。

これでひとまず登録ができました。
今度はロールをユーザーに割り当てます。

またランチパッドに戻り、今度はSettingsを開きます。

様々なユーザーが左に表示されると思いますが、その中から自分自身の名前を探してクリックしてください。
右側のペインにEdit role assignmentという文字があると思うので、それをクリック。
するとEdit role assignmentのモーダルが開くので、左側のフォームから

**mdsp:(テナント名):raspiapp.admin**

という項目を探して、ダブルクリック、もしくは選択してから「 > 」をクリックしてください。
右側にロールが移動したらCloseでモーダルを消してください。
![Settings.png](https://qiita-image-store.s3.amazonaws.com/0/365619/b507ddd5-a2a9-8cc3-3b42-25f39d1d965f.png)

これであなたはアプリにアクセスできるようになりました！

# WEBページをアップする
さて、ここまで出来たらひとまずWEBページを表示させましょう。
ローカルのどこでもいいので、ディレクトリを新しく作ります。
例えば「raspiapp」と作りましょう。

次にコマンド・プロンプト、もしくはターミナルでraspiappディレクトリに移動します

```bash
cd raspiapp
```

この中に表示確認用のhtmlファイルを作りましょう。
例えば以下のようなindex.htmlを用意してディレクトリに入れて保存してください。

```html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Hello world!</title>
</head>
<body>
    Hello world!
</body>
</html>
```

## manifest.ymlを作る
`index.html`と同じ場所に`manifest.yml`というファイルを作ってください。
このmanifest.ymlというのは、アプリケーションをデプロイするとき参照される設定ファイルです。
アプリケーションの名前を設定したり、phpを使いたいなら、このyamlファイルにphp-buildpackなどと書けば、自動的にphp実行環境をサーバー側で構築してくれます。

今回は最小構成ということで以下の内容をコピペしてください。

```yaml
applications:
  - name: raspiapp
    instances: 1
    host: rashost
    memory: 100MB
    buildpack: staticfile_buildpack
```
この短い記述で、NGINX サーバーでHTML/JavaScriptコンテンツを管理できるようになります。

ここまでで、とりあえず2つのファイルがraspiappディレクトリにあると思います。

## pushしてデプロイする
コマンド・プロンプトもしくはターミナルに戻り、以下のコマンドを実行してください。

```bash
cf push
```

これで、index.htmlとmanifest.ymlがアップロードされます。
ちょっと時間はかかると思いますが、実行が終了したらOKと出てきます。

## ブラウザで確認する
ランチパッドに戻ると、さきほど設定したアイコン画像が見えると思います
(見れなければ一度右上のログアウトボタンを押してしっかりログアウトしてから、もう一度ログインしてください)

このアイコンをクリックすれば、「Hello World!」と表示されると思います。

**参考**・もしも何かエラーが出た場合は、ひとまずランチパッドに戻り、右上のログアウトボタンをクリックして、確実にログアウトしてください。その後ログインしてもう一度ランチパッドからアプリケーションにアクセスしてください。

# 終わりに
ひとまずアプリケーションは設定して表示できました。
次からはちょっと難しくなりますが、最後までお付き合いください。