AWS Amplify で自宅の温度や湿度を可視化する IoT アプリ開発にチャレンジしてみよう !

% hciconfig
hci0:    Type: Primary  Bus: USB
    BD Address: 00:1B:DC:F3:77:D2  ACL MTU: 310:10  SCO MTU: 64:8
    UP RUNNING
    RX bytes:98014 acl:0 sco:0 events:3490 errors:0
    TX bytes:3468 acl:0 sco:0 commands:57 errors:0

% sudo hcitool lescan | grep 'B0:7E:11:EE:5A:08'
B0:7E:11:EE:5A:08 (unknown)
B0:7E:11:EE:5A:08 sps
B0:7E:11:EE:5A:08 (unknown)
B0:7E:11:EE:5A:08 sps

% curl -L git.io/nodebrew | perl - setup

# bashの場合は .bashrc と読み替えてください
% echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.zshrc
% source ~/.zshrc

% nodebrew ls-remote | grep v8
v8.0.0    v8.1.0    v8.1.1    v8.1.2
...
v8.16.0   v8.16.1   v8.16.2   v8.17.0

% nodebrew install v8.17.0
% nodebrew ls
v8.17.0

% nodebrew use v8.17.0
use v8.17.0

% which node
/home/shiroyama/.nodebrew/current/bin/node

% which npm
/home/shiroyama/.nodebrew/current/bin/npm

% node -v
v8.17.0

% npm -v
6.13.4

% sudo apt-get update
% sudo apt-get install bluetooth bluez libbluetooth-dev libudev-dev

% mkdir builders_flash
% cd builders_flash/

% npm init -y
% npm i -D typescript @types/node

% npx tsc --init
% vim tsconfig.json

{
  "compilerOptions": {
    "target": "ES2019",
    "module": "commonjs",
    "allowJs": true,
    "sourceMap": true,
    "outDir": "./dist",
    "strict": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": [
    "src/**/*"
  ]
}

% npm i @abandonware/noble
% npm i bluetooth-hci-socket
% npm install --save @types/noble

% npm i -D ts-node
% sudo npx ts-node src/noble.ts

% sudo npx ts-node src/noble.ts
state: poweredOn
scanStart
address: xx:xx:xx:xx:xx:xx
address: xx:xx:xx:xx:xx:xx
address: xx:xx:xx:xx:xx:xx
address: xx:xx:xx:xx:xx:xx
address: xx:xx:xx:xx:xx:xx
address: b0:7e:11:ee:5a:08
temperature: 27.41, humidity: 62.81, battery: 40, datetime: 2020-05-16T02:36:46.350Z
scanStop

% nodebrew install v10.20.1
% nodebrew use v10.20.1
% node -v
v10.20.1

% npm install -g @aws-amplify/cli@4.18.1
% amplify -v
4.18.1

% amplify configure

% amplify init

% amplify status

Current Environment: dev

| Category | Resource name | Operation | Provider plugin |
| -------- | ------------- | --------- | --------------- |

% amplify add api

type Sensor @model
            @searchable
            @key(fields: ["id", "datetime"]) {
  id: ID!
  name: String!
  temperature: Float!
  humidity: Float!
  battery: Float!
  datetime: AWSDateTime!
}

% amplify status

Current Environment: dev

| Category | Resource name | Operation | Provider plugin   |
| -------- | ------------- | --------- | ----------------- |
| Api      | buildersflash | Create    | awscloudformation |

% amplify push

% nodebrew use v8.17.0

% npm i aws-amplify

% mv src/aws-exports.js src/aws-exports.ts

% npx ts-node src/amplify.ts

% npx tsc
% sudo node ./dist/sensor.js

% cat<<'EOS'>src/my.d.ts
declare module 'graphql/language/ast' { export type DocumentNode = any }
EOS

% mkdir builders_flash_android
% cd builders_flash_android

% npm install -g @aws-amplify/cli@4.18.1

buildscript {
    repositories {
        google()
        jcenter()

        // Add this line into `repositories` in `buildscript`
        mavenCentral()
    }

    dependencies {
        classpath 'com.android.tools.build:gradle:3.6.3'
    }
}

allprojects {
    repositories {
        google()
        jcenter()

        // Add this line into `repositories` in `allprojects`
        mavenCentral()
    }
}

android {
    compileOptions {
        sourceCompatibility 1.8
        targetCompatibility 1.8
    }
}

dependencies {
    implementation 'com.amplifyframework:core:0.10.0'
    implementation 'com.amplifyframework:aws-api:0.10.0'
}

% amplify pull

class MyApplication : Application() {
    override fun onCreate() {
        super.onCreate()
        try {
            // Amplifyをアプリ全体で1度だけ初期化する
            Amplify.addPlugin(AWSApiPlugin())
            Amplify.configure(applicationContext)
            Log.i("ApiQuickstart", "All set and ready to go!")
        } catch (exception: AmplifyException) {
            Log.e("ApiQuickstart", exception.message, exception)
        }
    }
}

private fun listSensors() {
    // クエリ
    Amplify.API.query(
        Sensor::class.java,
        Sensor.ID.eq(SENSOR_ID),
        Consumer { result ->
            Log.i(TAG, "result: ${result.data}")
            // result を使って画面を更新
        },
        Consumer { error -> Log.e(TAG, error.message, error) }
    )
}

private fun listSensorsWithCondition() {
    Amplify.API.query(
        Sensor::class.java,
        // 任意の条件を組み合わせる
        Sensor.ID.eq(SENSOR_ID).and(Sensor.HUMIDITY.gt(70.0)),
        Consumer { result ->
            Log.i(TAG, "result: ${result.data}")
            // result を使って画面を更新
        },
        Consumer { error -> Log.e(TAG, error.message, error) }
    )
}

query SearchSensor(
  $filter: SearchableSensorFilterInput
  $limit: Int
  $nextToken: String) {
    searchSensors(
      filter: $filter,
      limit: $limit,
      nextToken: $nextToken) {
        items {
          battery
          datetime
          humidity
          id
          name
          temperature
        }
        nextToken
    }
  }

val request: GraphQLRequest<Sensor> = /* ここを自作する */
Amplify.API.query(
    request,
    { result -> },
    { error -> }
)

private val DEFAULT_QUERY_LIMIT = 1000
private val DEFAULT_LEVEL_DEPTH = 2

// sortSensors のための GraphQLRequest を作成するメソッド
@Throws(ApiException::class)
fun <T : Model> buildQuery(
    modelClass: Class<T>,
    predicate: QueryPredicate?,
    sortMap: Map<String, String>?
): GraphQLRequest<T> {
    return try {
        val doc = StringBuilder()
        val variables: MutableMap<String, Any> = HashMap()
        val schema = ModelSchema.fromModelClass(modelClass)
        val graphQlTypeName = schema.getName()
        // 生成されたモデルを使ってクエリを組み立て
        doc.append("query ")
            .append("Search")
            .append(StringUtils.capitalizeFirst(graphQlTypeName))
            .append("(")
            .append("\$filter: Searchable")
            .append(graphQlTypeName)
            .append("FilterInput ")
            .append("\$sort: Searchable")
            .append(graphQlTypeName)
            .append("SortInput ")
            .append("\$limit: Int \$nextToken: String) { search")
            .append(StringUtils.capitalizeFirst(graphQlTypeName))
            .append("s(filter: \$filter, sort: \$sort, limit: \$limit, nextToken: \$nextToken) { items {")
            .append(
                getModelFields(
                    modelClass,
                    DEFAULT_LEVEL_DEPTH
                )
            )
            .append("} nextToken }}")
        // filter or limit があればそれを追加
        predicate?.let {
            variables["filter"] = parsePredicate(predicate)
            variables["limit"] = DEFAULT_QUERY_LIMIT
        }
        // sort 条件があればそれを追加
        sortMap?.let {
            variables["sort"] = sortMap
        }
        GraphQLRequest(
            doc.toString(),
            variables,
            modelClass,
            GsonVariablesSerializer()
        )
    } catch (exception: AmplifyException) {
        throw ApiException(
            "Could not generate a schema for the specified class",
            exception,
            "Check the included exception for more details"
        )
    }
}

private fun searchSensors(
    temperature: Float,
    humidity: Float,
    dateFrom: String,
    dateTo: String,
    sortField: String,
    sortDirection: String
) {
    // 検索条件を組み立て
    val predicate = Sensor.ID.eq(SENSOR_ID)
        .and(Sensor.TEMPERATURE.gt(temperature))
        .and(Sensor.HUMIDITY.gt(humidity))
        .and(Sensor.DATETIME.gt(dateFrom))
        .and(Sensor.DATETIME.lt(dateTo))
    val sortMap: Map<String, String> = mapOf("field" to sortField, "direction" to sortDirection)
    val request = buildQuery(Sensor::class.java, predicate, sortMap)
    // 自作した buildQuery で searchSensors クエリを実行
    Amplify.API.query(
        request,
        { result ->
            Log.i(TAG, "result: ${result.data}")
            // このメソッドはこれから実装
            initChart(result.data ?: emptyList())
        },
        { error -> Log.e(TAG, error.message, error) }
    )
}

repositories {
    maven { url 'https://jitpack.io' }
}

dependencies {
    implementation 'com.github.PhilJay:MPAndroidChart:v3.1.0'
}

// ラインチャート
lateinit var lineChart: LineChart

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)
    lineChart = findViewById(R.id.line_chart)
}

private fun initChart(sensors: Iterable<Sensor>) {
    val list = sensors.iterator().asSequence().toList()
    // データが空ならば初期表示
    if (list.isEmpty()) {
        toast("Not Found")
        lineChart.data = null
        lineChart.invalidate()
        return
    }

    // 最初のデータポイントの日付をラインチャートの詳細として表示
    val description = dateToISO8601(list[0].datetime)
    lineChart.description = Description().apply { text = description }

    val temperatureList = ArrayList<Entry>()
    val humidityList = ArrayList<Entry>()
    val batteryList = ArrayList<Entry>()

    // 基準となる最初のデータポイントからの差分を分単位で計算
    val timeDiffList = ArrayList<Float>().apply { add(0.0f) }
    for (i in 1 until list.size) {
        val to = list[i].datetime.time
        val from = list[i - 1].datetime.time
        val diff = (to - from) / (1000 * 60)
        timeDiffList.add(timeDiffList[timeDiffList.size - 1] + diff.toFloat())
    }

    // 各データポイントを作成
    for ((i, sensor) in list.withIndex()) {
        val diff = timeDiffList[i]
        temperatureList.add(Entry(diff, sensor.temperature))
        humidityList.add(Entry(diff, sensor.humidity))
        batteryList.add(Entry(diff, sensor.battery))
    }

    // データポイントのリストからデータセットを作成するためのローカル関数
    fun createDataSet(list: List<Entry>, label: String, @ColorInt colorInt: Int): LineDataSet {
        return LineDataSet(list, label).apply {
            setDrawIcons(false)
            color = colorInt
            setCircleColor(colorInt)
            lineWidth = 1f
            circleRadius = 3f
            setDrawCircleHole(false)
            valueTextSize = 0f
            setDrawFilled(true)
            formLineWidth = 1f
            formLineDashEffect = DashPathEffect(floatArrayOf(10f, 5f), 0f)
            formSize = 15f
            fillColor = colorInt
        }
    }

    val temperatureSet = createDataSet(temperatureList, "Temperature", Color.BLUE)
    val humiditySet = createDataSet(humidityList, "Humidity", Color.GREEN)
    val batterySet = createDataSet(batteryList, "Battery", Color.RED)

    // 描画するためにデータセットを束ねる
    val dataSets = ArrayList<ILineDataSet>().apply {
        add(temperatureSet)
        add(humiditySet)
        //add(batterySet)
    }

    // ラインチャートに描画
    val lineData = LineData(dataSets)
    lineChart.data = lineData
    lineChart.invalidate()
}

% amplify update api 

type Sensor @model
            @searchable
            @key(fields: ["id", "datetime"])
            @auth(rules: [
                { allow: public, provider: apiKey, operations: [read, create] },
                { allow: private, provider: userPools, operations: [read] },
            ]){
  id: ID!
  name: String!
  temperature: Float!
  humidity: Float!
  battery: Float!
  datetime: AWSDateTime!
}

//For AWSMobileClient only:
implementation 'com.amazonaws:aws-android-sdk-mobile-client:2.16.+'

//For the drop-in UI also:
implementation 'com.amazonaws:aws-android-sdk-auth-userpools:2.16.+'
implementation 'com.amazonaws:aws-android-sdk-auth-ui:2.16.+'

//For hosted UI also:
implementation 'com.amazonaws:aws-android-sdk-cognitoauth:2.16.+'

minSdkVersion 23

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)

    // AWSMobileClient を初期化
    AWSMobileClient.getInstance()
        .initialize(applicationContext, object : Callback<UserStateDetails> {
            override fun onResult(userStateDetails: UserStateDetails) {
                Log.i(TAG, "onResult: " + userStateDetails.userState)
            }

            override fun onError(e: Exception) {
                Log.e(TAG, "INIT: Initialization error.", e)
            }
        })
}

// サインインしていない場合にログイン画面を表示するリスナー
private val userStateListener = UserStateListener { details ->
    Log.i(TAG, "onUserStateChanged: " + details.userState)
    when (details.userState) {
        UserState.SIGNED_IN -> {
            Log.i(TAG, "userState: SIGNED_IN")
        }
        else -> {
            Log.i(TAG, "userState: else: " + details.userState)
            AWSMobileClient.getInstance().showSignIn(this@MainActivity)
        }
    }
}

override fun onStart() {
    super.onStart()
    // onStart でリスナの登録
    AWSMobileClient.getInstance().addUserStateListener(userStateListener)
}

override fun onStop() {
    // onStop でリスナの解除
    AWSMobileClient.getInstance().removeUserStateListener(userStateListener)
    super.onStop()
}

// ログアウト用のレイアウトを描画
override fun onCreateOptionsMenu(menu: Menu): Boolean {
    menuInflater.inflate(R.menu.menu, menu)
    return true
}

// オプションメニューを実装
override fun onOptionsItemSelected(item: MenuItem): Boolean {
    return when (item.itemId) {
        R.id.menuSignOut -> {
            logout()
            true
        }
        else -> {
            super.onOptionsItemSelected(item)
        }
    }
}

// ログアウト処理
private fun logout() {
    AWSMobileClient.getInstance().signOut(
        SignOutOptions.builder().invalidateTokens(true).build(),
        object : Callback<Void> {
            override fun onResult(result: Void?) {
                Log.i(TAG, "signOut(): onResult ok")
            }

            override fun onError(e: java.lang.Exception?) {
                Log.e(TAG, "signOut(): onResult error")
            }
        })