【IoT入門】React NativeとRaspberry Piを使ってスマホからLチカ!!


ラズベリーパイ を使えば、簡単にインターネットを介してマイコンを制御することができます。今回は、ラズパイにbottleを用いてAPIサーバーを構築し、ReactNativeで作成したモバイルアプリ上から、HTTPでアクセスすることで、ラズパイに接続したLEDのON/OFFを切り替える、今流行りのIoTっぽいことをやってみたいと思います。

作るもの

今回は、アプリ上からLEDのon/offを切り替えるシンプルなスイッチング機能を作成します。

LED以外、たとえばモーターやセンサーのon/offにも応用できそうなので汎用性は高そうな気がします。 ラズパイは、インターネットに接続してあるので、モバイル上から遠隔で操作することが可能となります。

構成図にするとこんな感じです。

準備

以下の基本的なセットアップは、別の記事でまとめておいたので、そちらを参考にしてください。

ラズパイのセットアップ

→ ラズパイ購入後の初期セットアップに関してまとめてあります。

ラズパイ上でのPythonとbottleのセットアップ

→ ラズパイ上にpyenvで管理するpython環境を構築し、webフレームワークbottleの導入までまとめてあります。

ReactNative Expoの環境構築

→ ExpoをつかってReact Nativeで実機hello worldできるところまで、まとめてあります。

まずは、ラズパイでLEDを点灯できるように回路を構築します。 その後、LEDのON/OFFのスイッチをスマートフォンで行えるようにするという手順で進めて行きます。

ラズパイでLEDの点灯

まずは、ラズパイからLEDを点灯させましょう。ラズパイ上の任意のディレクトリにraspberry_led.pyというファイルを作成して中身を以下のように編集します。

raspberry_led.py

import RPi.GPIO as GPIO
import time

GPIO.setmode(GPIO.BCM) 
GPIO.setup(25, GPIO.OUT)

GPIO.output(25, GPIO.HIGH) #点灯
time.sleep(2) # この間は点灯し続ける
GPIO.output(25, GPIO.LOW) #消灯

GPIO.cleanup()

このスクリプトを実行すると

$ python raspberry_led.py

25番pinに接続したLEDが2秒間点灯するはずです。

(ちなみに)GPIOとは?

General-purpose input/outputの略で、集積回路やコンピュータ上の一般的なピンであり、その動作(入力か出力か)は、ユーザーによって制御が可能。

ラズパイのGPIOのpin構成は次のようになっている

raspi-pin

ラズパイ上にサーバーを構築

上記で行ったLEDの点灯を、モバイルからhttpリクエストを受け付けた際に、実行できるようにします。Pythonのフレームワークbottleを用いて、ラズパイ上でLEDのon/offを切り替えることのできるAPIサーバーを構築します。

これによって、インターネットを介してラズパイにhttpリクエストを送ることで、LEDを制御することが可能となります。

LEDの時と同様に、任意のディレクトリにled_switch.pyを作成して次のように編集します。

led_switch.py

# -*- coding:utf-8 -*-

from bottle import route, run
import simplejson as json
from bottle import HTTPResponse
import RPi.GPIO as GPIO
import time

@route('/on')
def hello():
    GPIO.setmode(GPIO.BCM)
    GPIO.setup(25, GPIO.OUT) # GPIOを出力として使用する
    GPIO.output(25, GPIO.HIGH)

    body = json.dumps({'status': 'switch on'})
    r = HTTPResponse(status=200, body=body)
    r.set_header('Content-Type', 'application/json')
    return r

@route('/off')
def hello():
    GPIO.setmode(GPIO.BCM)
    GPIO.setup(25, GPIO.OUT) # GPIOを出力として使用する
    GPIO.output(25, GPIO.LOW)
    GPIO.cleanup()

    body = json.dumps({'status': 'switch off'})
    r = HTTPResponse(status=200, body=body)
    r.set_header('Content-Type', 'application/json')
    return r

run(host='ラズパイのIPアドレス', port=8080, debug=True)

ラズパイのIPアドレスは、こちらの記事を参考に控えておいてください。ファイルを作成したら、必要なパッケージをpipを使ってインストールしておきます。

ラズパイをPythonで制御するためのライブラリであるRPi.GPIOのインストール
$ pip install RPi.GPIO
JOSNを返すAPIサーバーを構築するためにsimplejsonのインストール
$ pip install simplejson
このスクリプトを実行しサーバーを起動
$ python led_switch.py

サーバーを起動したままにしておきます。

ReactNativeで作ったアプリをスイッチ代わりに

サーバーとラズパイの準備はできたので、最後にスイッチの役割を果たすモバイルアプリを準備します。先ほど、ラズパイ内にon/offを担当するAPIサーバーを構築したので、サーバーにアクセス可能なクライアントアプリを作ります。今回は、モバイルからのアクセスとしましたが、WEBブラウザからでもOKです。

EXPOのプロジェクトは、別記事を参考に作成済みとなっているはずですので、App.jsを次のように変更して、buildすれば、LEDのON/OFFを切り替える、 スイッチアプリが完成しているはずです。

App.js

import React from "react";
import { StyleSheet, Text, View } from "react-native";
import { Button } from "react-native";

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>ボタンをおして!!</Text>
        <Text />
        <Button
          onPress={sendOn}
          title="On"
          color="#841584"
          accessibilityLabel="Learn more about this purple button"
        />
        <Text />
        <Button
          onPress={sendOff}
          title="Off"
          color="#841584"
          accessibilityLabel="Learn more about this purple button"
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#ecf0f1",
    alignItems: "center",
    justifyContent: "center"
  }
});

sendOn = () => {
  fetch("http://ラズパイのIPアドレス:8080/on")
    .then(function(response) {
      console.log(response);
      return response.json();
    })
    .then(function(myJson) {
      console.log(JSON.stringify(myJson));
    });
};

sendOff = () => {
  fetch("http://ラズパイのIPアドレス:8080/off")
    .then(function(response) {
      console.log(response);
      return response.json();
    })
    .then(function(myJson) {
      console.log(JSON.stringify(myJson));
    });
};

スイッチアプリが完成したはずです。

このアプリで、先ほど作成した、ラズパイ上のAPIサーバーにアクセスすることで、LEDのon/offを切り替えることができます。

まとめ

電子工作、Linux、モバイル、Web等、あらゆる技術を総動員することになりますが、その分、動いた時の喜びは大きいですよね!!

機械学習にも利用できたり、ラズパイの可能性は無限大のように思えました。今後もいろんなものを作っていきたいとおもいます。

comments powered by Disqus