ANS-HandsOn-202012 - Speaker Deck

Slide 1

Slide 1 text

応用編 - 2020/12/27 ALGYAN × Seeed × NervesJPハンズオン！ 1 【オンライン】豪華プレゼント付！ Elixir/Nerves(ナーブス)体験ハンズオン！ - connpass Creative Commons

Slide 2

Slide 2 text

（本日のハンズオン・スライド一覧） ● すべて https://algyan.connpass.com/event/197306/presentation/ ● 基本編 https://docs.google.com/presentation/d/1u7V6aR0wrWs23oGmNq 6Scl6M_WRpa0eyB4lSqyOsbRM 2

Slide 3

Slide 3 text

環境測定にチャレンジ！ - 応用編 - 3

Slide 4

Slide 4 text

応用編の進め方 1. 温湿度センサを接続 2. 温度を測る（↓余裕があれば） 3. 湿度を測る 4. GPIOと連携する 4

Slide 5

Slide 5 text

1. 温湿度センサを接続 5

Slide 6

Slide 6 text

温湿度センサ AHT20 Industrial Grade Temperature&Humidity Sensor ● I2C接続（アドレス：0x38） ● 温度範囲：-40 ～ + 85 ℃ ● 湿度範囲：0 ~ 100% ● 動作電圧：DC 2.0～5.5V 6

Slide 7

Slide 7 text

つなぎ方右の写真にならって温湿度センサを繋いでください ※RaspberryPiの　電源はONのまま　でOKです。 7 AHT20 温湿度センサ LED 押しボタン I2Cコネクタ（３つのうち　どれでもOK）

Slide 8

Slide 8 text

測定～WebAPI送信まで 2. まずは「温度」 8

Slide 9

Slide 9 text

進め方 1. GitHubからソースを持ってくる 2. ソースの一部を編集する（あなたのハンドル名に書き換え） 3. ファームウェアをビルドする 4. Nerves (on RaspberryPi) へアップロードする 5. Nerves (on RaspberryPi) にSSH経由でログインする 6. 温度を測るコマンドを実行して、動作確認する 7. 測った温度を、Azure上のWebAPIに送るコマンドを実行する 8. Webページで結果を見て、動作確認する（以降のページで解説します） 9

Slide 10

Slide 10 text

ソースを持ってくる１ ※VSCodeの下のターミナル（Dev Containerのコンソール）で作業してね！ 10 こちらで操作

Slide 11

Slide 11 text

ソースを持ってくる２ ※コマンド入力して欲しい箇所には、文字の背景に薄い黄色を付けてます　（コンソールに帰ってくるメッセージは黒文字のままにしてます） 1. 現在いるディレクトリを確認 # pwd /workspaces/nerves-algyan-devcontainer 2. ホームディレクトリに移動（注：コンテナ内はrootユーザです） # pushd ~ 　　　（チルダ ”~”の前には、スペースが一個入ってます） # pwd /root 11

Slide 12

Slide 12 text

ソースを持ってくる３ 1. GitHubからcloneする # git clone https://github.com/NervesJP/nervesjp_basis 2. 最初に居たディレクトリから見えるように、シンボリックリンクを置く # ln -s /root/nervesjp_basis /workspaces/nerves-algyan-devcontainer/nervesjp_basis 3. 最初に居たディレクトリに戻って、プロジェクトのディレクトリに移動 # popd # cd nervesjp_basis # pwd /workspaces/nerves-algyan-devcontainer/nervesjp_basis 12 ※末尾はスラッシュ無し！！ラズパイ4以外の方はお知らせを！！

Slide 13

Slide 13 text

ソースの一部を編集ソース名：lib/sensor/web.ex 9行目：@my_name "nervesjp_algyan"　ご自分のハンドル名に修正 13

Slide 14

Slide 14 text

ソースの一部を編集ソースを保存したときに、VSCodeの右下にメッセージが出る！ →お気になさらず･･･　　　　　　　　　ここ 14

Slide 15

Slide 15 text

コンパイル～アップロードまで１（Dev Containerの）ターミナルから、以下を順番に実行 # mix deps.get ←ライブラリの依存関係の処理（約 1～2分程度） # mix firmware ←ビルド（初回約 5分程度） # mix upload ←ネットワーク経由でラズパイにアップロード　（約 2分程度） 15

Slide 16

Slide 16 text

コンパイル～アップロードまで２ライブラリの依存関係の処理 # mix deps.get 16 ・・・（省略）・・・

Slide 17

Slide 17 text

コンパイル～アップロードまで３ビルド # mix firmware 17 ・・・（省略）・・・進捗確認シート K列「ビルド」をチェック！

Slide 18

Slide 18 text

ビルドに時間が掛かるので･･･ここで一息。（休憩） 18

Slide 19

Slide 19 text

コンパイル～アップロードまで４ネットワーク経由でRaspberryPiにアップロード # mix upload 19

Slide 20

Slide 20 text

コンパイル～アップロードまで５ ※ラズパイが見つからない！ホスト名「nerves.local」で繋がらないときは IPアドレスを直接指定できます # mix upload [IPアドレス] 20 IPアドレスの調べ方：　自宅のルータの接続一覧を参考に･･･＜その他の調べ方はこちら＞

Slide 21

Slide 21 text

SSH経由でログイン # ssh nerves.local ･･･ iex(1)> （あるいは） # ssh [IPアドレス] 21

Slide 22

Slide 22 text

接続確認１接続しているI2Cデバイスのアドレスが分かります iex(6)> Circuits.I2C.detect_devices Devices on I2C bus "i2c-1": * 4 (0x4) ← GROVE Base HAT * 56 (0x38) ← AHT20 2 devices detected on 1 I2C buses 22

Slide 23

Slide 23 text

接続確認２ IPアドレスも分かります iex(8)> ifconfig lo: flags=[:up, :loopback, :running] inet 127.0.0.1 netmask 255.0.0.0 eth0: flags=[:up, :broadcast, :running, :multicast] ← 有線LAN inet 192.168.0.4 netmask 255.255.255.0 broadcast 192.168.0.255 wlan0: flags=[:up, :broadcast, :running, :multicast] ← 無線LAN inet 192.168.11.100 netmask 255.255.255.0 broadcast 192.168.11.255 23

Slide 24

Slide 24 text

温度を測定するコマンドラインに入力 ※[TAB]キーで補完できるよ！ iex(1)> NervesjpBasis.Sensor.Aht20.print_temp > temp: 24.1 (degree Celsius) :ok 24

Slide 25

Slide 25 text

Web APIに送るコマンドラインに入力 iex(2)> NervesjpBasis.Sensor.Web.senddata > send: [name: nervesjp_algyan] / temp: 23.5 (degree Celsius) :ok 25

Slide 26

Slide 26 text

Webページをチェック https://phx.japaneast.cloudapp.azure.com/chart-temperature 26 自分のハンドル名とデータが表示された！（縦軸）温度℃ 進捗確認シート L列「温度送信」をチェック！

Slide 27

Slide 27 text

入力の省略 iex(1)> NervesjpBasis.Sensor.Aht20.print_temp 入力が長いので、「NervesjpBasis.Sensor」を省略したい･･･ iex(4)> alias NervesjpBasis.Sensor.Aht20 ←「alias」を使う NervesjpBasis.Sensor.Aht20 iex(5)> Aht20.print_humi > humi: 27.3 (%)) :ok 27

Slide 28

Slide 28 text

ソースファイル解説1 ● aht20.ex センサAHT20の制御モジュール 28 read_from_aht20/0 I2C通信で温・湿度測定 temp/0 温度の値だけを取得 print_temp/0 温度の値を文字列で表示 humi/0 湿度の値だけを取得 print_humi/0 湿度の値を文字列で表示 convert/1 RAWデータを℃・%に換算

Slide 29

Slide 29 text

ソースファイル解説2 ● web.ex WebAPIとのやりとりモジュール 29 body/1 JSON部の生成 header/0 ヘッダ部の生成 post/2 POSTする senddata/0 温度を取得してPOSTまで

Slide 30

Slide 30 text

測定～WebAPI送信まで 2. 次は「湿度」 30

Slide 31

Slide 31 text

進め方 1. 湿度を測るコマンドを実行して、動作確認する 2. 一旦、Nervesからログアウトする 3. 先ほど使った「測った湿度を、Azure上のWebAPIに送る」関数を修正。 a. ファイル「web.ex」　23行目付近「senddata」関数 b. 温度と湿度を送るようコードを書き換え c. ビルド、アップロード 4. Nervesにログインする 5. 測った温度を、Azure上のWebAPIに送るコマンドを実行する 6. Webページで結果を見て、動作確認する（以降のページで解説します） 31

Slide 32

Slide 32 text

湿度を測定するコマンドラインに入力 iex(1)> NervesjpBasis.Sensor.Aht20.print_humi > humi: 34.7 (%) :ok 32

Slide 33

Slide 33 text

一旦、RaspberryPiからログアウトコマンドラインに入力 iex(1)> exit Connection to nerves.local closed. 33

Slide 34

Slide 34 text

senddata関数を修正ソースファイル「web.ex」を開く（場所は右記のイラストを参考に･･･） 34

Slide 35

Slide 35 text

senddata関数を修正この関数を修正して、湿度情報を送るようにする 35 25行目付近

Slide 36

Slide 36 text

修正箇所その１＜修正前＞ {:ok, {temp, _}} = Aht20.read_from_aht20() ＜修正後＞ {:ok, {_, humi}} = Aht20.read_from_aht20() 36

Slide 37

Slide 37 text

修正箇所その２＜修正前＞ IO.puts(" > send: [name: #{@my_name}] / temp: #{inspect(temp)} (degree Celsius)") ＜修正後＞ IO.puts(" > send: [name: #{@my_name}] / temp: #{inspect(humi)} (%)") 37

Slide 38

Slide 38 text

修正箇所その３＜修正前＞ post(temp, @url_temp) ＜修正後＞ post(humi, @url_humi) 38

Slide 39

Slide 39 text

ビルド～アップロードまでビルドからアップロードまで一気にすすめる # mix firmware && mix upload 39

Slide 40

Slide 40 text

SSH経由でログイン # ssh nerves.local ･･･ iex(1)> （あるいは） # ssh [IPアドレス] 40

Slide 41

Slide 41 text

Web APIに送るコマンドラインに入力 iex(2)> NervesjpBasis.Sensor.Web.senddata > send: [name: nervesjp_algyan] / humi: 43.4 (%) :ok 41

Slide 42

Slide 42 text

Webページをチェック https://phx.japaneast.cloudapp.azure.com/chart-humidity 42 自分のハンドル名とデータが表示された！（縦軸）湿度% 進捗確認シート M列「湿度送信」をチェック！

Slide 43

Slide 43 text

ボタンを押したら、測定とデータ転送 3. さらに応用編 43

Slide 44

Slide 44 text

進め方 1. ボタンの検出をスタートする 2. ボタンを押す a. （以下を自動的に実行） b. 温度を測るコマンドを実行する c. 測った温度をAzure上のWebAPIに送る 3. Webページで結果を見る 4. ここまでの詳細を、簡単に解説 44

Slide 45

Slide 45 text

ボタンの検出をスタートするコマンドラインに入力 iex(3)> NervesjpBasis.Sensor.Webbtn.start_link {:ok, #PID<0.1944.0>} 45

Slide 46

Slide 46 text

ボタンを押す > send: [name: nervesjp_algyan] / temp: 21.7 (degree Celsius) > send: [name: nervesjp_algyan] / temp: 21.7 (degree Celsius) > send: [name: nervesjp_algyan] / temp: 21.6 (degree Celsius) > send: [name: nervesjp_algyan] / temp: 21.7 (degree Celsius) > send: [name: nervesjp_algyan] / temp: 21.7 (degree Celsius) 46 送信中に点灯(200ms) 押しボタンON ボタンを押すたびに送信進捗確認シート N列「ボタン送信」をチェック！

Slide 47

Slide 47 text

ソースファイル解説3 ● webbtn.ex ボタン入力の受付モジュール ※Elixirの特徴「並行処理」の仕組みを使って　ボタン検出をバックグラウンドで実行してます。 47

Slide 48

Slide 48 text

ソースファイル解説4 48 start_link バックグラウンドの処理を起動 init/1 初期化の処理（起動時に自動呼び出し） handle_info/2 ボタンを押したときのイベント処理

Slide 49

Slide 49 text

お疲れ様でした！今回は、ここまで～ 49 進捗確認シート O列に「今日の感想」をご記入ください！！

Slide 50

Slide 50 text

いくつか補足します～後片付け 50

Slide 51

Slide 51 text

ソースファイル解説5 ● web.ex WebAPIとのやりとりモジュール 51 body/1 JSON部の生成 header/0 ヘッダ部の生成 post/2 POSTする senddata/0 温度を取得してPOSTまで

Slide 52

Slide 52 text

ソースファイル解説5 ● web.ex WebAPIとのやりとりモジュール 52 body/1 JSON部の生成 header/0 ヘッダ部の生成 post/2 POSTする senddata/0 温度と”湿度を” 取得してPOSTまでここを修正してみる

Slide 53

Slide 53 text

ソースファイル解説5 ● web.ex WebAPIとのやりとりモジュール 53 body/1 JSON部の生成 header/0 ヘッダ部の生成 post/2 POSTする senddata/0 温度と”湿度を” 取得してPOSTまで “answer”をチェックアウトすると回答例が載ってます

Slide 54

Slide 54 text

Raspberry Piの止め方 1. そのまま電源を切って頂いてOKです。（Nervesは電断対応されているので、ぶち切りOKです。 2. どうしてもコマンドで止めたい場合･･･ iex> System.stop (停止して、SSHにログインできなくなる) 54

Slide 55

Slide 55 text

本日のソースファイルをコピー1 Dockerのコンテナを消してしまうと、 /rootディレクトリ以下のデータが消えてしまいます･･･ 1. 現在いるディレクトリを確認 # pwd /workspaces/nerves-algyan-devcontainer 55

Slide 56

Slide 56 text

本日のソースファイルをコピー2 1. シンボリックリンクを消す # rm ./nervesjp_basis 2. /rootディレクトリの中の「nervesjp_basis」ディレクトリをコピーして持ってくる # cp -r /root/nervesjp_basis /workspaces/nerves-algyan-devcontainer/ 3. これで、本日の作業ディレクトリ「nervesjp_basis」が、ホストOS側の、dev containerのフォルダに移りました。 56

Slide 57

Slide 57 text

（補足） Q.　なぜ、わざわざ /root ディレクトリで、cloneして作業したの？ A.　ホストOSがWindowsの場合、　　Windows側のフォルダの中でビルドすると、　　ビルド時間が大変長くなるため･･･（ビルドの度に、５分以上掛かる^^; 57

Slide 58

Slide 58 text

ファームウェアの書き込み方法 1. SDカードライタをダウンロード https://github.com/fhunleth/fwup/releases/tag/v1.8.3 2. ファームウェアをダウンロード https://github.com/NervesJP/nervesjp_basis/releases/tag/v1.0 3. アップロード ※コマンドプロンプトを管理者で開く引数にファームウェアを指定 C:\...> fwup nervesjp_basis.fw 58

Slide 59

Slide 59 text

コミュニティーについて今後の自己研鑽にご興味がありましたら、是非ご参加下さい 1. IoT ALGYAN https://algyan.connpass.com/ 2. Seeed UG https://seeed.connpass.com/ 3. NervesJP https://nerves-jp.connpass.com/ Slack 59

Slide 60

Slide 60 text

スタッフの皆様、ご参加頂いた全ての皆様、有り難うございました！ @myasu 60