AWS Lambda関数を用いてDynamoDBとToggleボタンを連携させてみた

## はじめに
AWSのLambda関数を用いてDynamoDBとToggleボタンを連携させてみました。
大まかな流れは以下の通りです。

1. DynamoDBの作成
1. Vueプロジェクトの作成
1. DynamoDBの値に応じてToggleボタンの状態を変化させる
1. Toggleボタンの状態に応じてDynamoDBの値を変化させる


## 開発環境
- Windows 11
- Vue CLI 5.0.8
- Vue 2.7.14
- npm 6.14.14
- Node.js 14.17.5


## 実装

### DynamoDBの作成
まず、DynamoDBにアクセスし、テーブルを作成します。
設定は以下のようにしました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3124507/cea17047-159c-f295-a380-ad2b31d3c40f.png)

### Vueプロジェクトの作成
続いて、Vueプロジェクトを作成します。
以下のコマンドを実行してVueアプリケーションを作成します。

```:ターミナル
vue create フォルダ名
```

フォルダ名は任意です。

作成できたら、以下のコマンドを実行して、Vuetifyを追加します。
```:ターミナル
vue add vuetify
```
途中でプリセットの選択を聞かれるので、Default(recommended)を選択します。
今回は作成したプロジェクト内のHelloWorld.vueを編集する形で進めます。


### DynamoDBの値に応じてToggleボタンの状態を変化させる
続いて、DynamoDBの値に応じてToggleボタンの状態を変化させます。

まず、Lambdaにアクセスし、Lambda関数を作成します。
今回は、DynamoDBのtoggleの値を取得する関数と変更する関数の2つを作成します。
以下、DynamoDBのtoggleの値を取得する関数はget-toggle-status、DynamoDBのtoggleの値を変更する関数はupdate-toggle-statusと表記します。

まず、get-toggle-statusの作成を行います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3124507/5b430536-f245-6682-e635-f4c81561ddc7.png)

次に、設定を行います。
初期設定では、タイムアウトが3秒に設定されていますが、短いので30秒に変更します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3124507/e10dbe3f-32a6-f94c-ce47-f338d4574fde.png)

既存のロールにアクセスし、AmazonDynamoDBFullAccessにチェックを入れます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3124507/a0045180-19f0-d630-898d-dabe7401e72d.png)

今回はLambda関数単体のURLを用いるので、関数URLを作成します。
![スクリーンショット 2023-03-07 10.32.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3124507/3f1c6f87-6e65-f602-cd3c-a93bde6aabf2.png)

関数URLの設定は以下の通りです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3124507/a1a8dbae-a188-eb05-3857-558317c7f42b.png)

次に、get-toggle-statusのlambda_function.pyを以下のようにします。
テーブル名はご自身のテーブル名に合わせてください。
```lambda_function.py
import json
import boto3

dynamodb = boto3.resource('dynamodb')
table = dynamodb.Table('テーブル名') 

def lambda_handler(event, context):
    response = table.get_item(Key={'id': '1'})
    toggle_status = response['Item']['toggle']
    return {
        'statusCode': 200,
        'body': json.dumps({'toggle': toggle_status}),
        'headers': {
            'Access-Control-Allow-Headers': '*',
            'Access-Control-Allow-Origin': '*',
            'Access-Control-Allow-Methods': '*'
        }
    }
```
DynamoDBから、idが1、属性値がtoggleの値を取り出しています。

そして、Vue側でget-toggle-statusを叩き、DynamoDBのtoggleの値がtrueならばToggleボタンをON状態で表示、falseならばOFF状態で表示するようにします。
HelloWorld.vueの全体のコードを以下のように変更してください。
get-toggle-statusのURLはご自身のものに合わせてください。

```HelloWorld.vue
<template>
  <v-switch v-model="toggleValue" label="Toggle" />
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      toggleValue: false,
    };
  },
  mounted() {
    axios.get('get-toggle-statusのURL')
      .then(response => {
        const toggleStatus = response.data.toggle;
        this.toggleValue = toggleStatus === true;
      })
      .catch(error => {
        console.log(error);
      });
  },
};
</script>
```
まず、v-switchタグを用いてToggleボタンを配置します。
次に、scriptタグ内のdataでtoggleValueという変数を定義し、v-modelでv-switchタグと紐づけます。
そして、axiosでget-toggle-statusを叩いてDynamoDBのtoggleの値を取得し、Toggleボタンの表示を更新します。

ここまで終えると、DynamoDBの値に応じてToggleボタンの状態が変化します。
DynamoDB側でbool値を切り替えると、Toggleボタンの表示が変わることが確認できます。

DynamoDBの値がTrueのときは、ToggleボタンがONに
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3124507/5fbffc95-8c3f-9d6f-6d31-f50b78d3a9bc.png)
![screencapture-localhost-8080-2023-03-07-21_00_59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3124507/db5a7742-0125-0bc6-fc79-ff79bb4079c2.png)

DynamoDBの値がFalseのときは、ToggleボタンがOFFに
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3124507/5db3ef57-678d-b095-6e9d-b80e7d885575.png)
![screencapture-localhost-8080-2023-03-07-21_08_54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3124507/7b504edf-0c98-16ec-41b4-9139b27e1586.png)


### Toggleボタンの状態に応じてDynamoDBの値を変化させる
続いて、Toggleボタンの状態に応じてDynamoDBの値を変化させます。
まずは、get-toggle-statusと同じ手順でupdate-toggle-statusを作成し、関数URLの作成まで行ってください。

関数URLの作成まで終えたら、update-toggle-statusのlambda_function.pyを以下のようにしてください。

```lambda_function.py
import boto3
import json

dynamodb = boto3.resource('dynamodb')
table_name = 'テーブル名'
table = dynamodb.Table(table_name)

def lambda_handler(event, context):
        toggle_state = json.loads(event['body'])['toggleValue']
        if toggle_state:
            new_value = True
        else:
            new_value = False
        response = table.update_item(
            Key={
                'id': '1'
            },
            UpdateExpression='SET toggle = :val',
            ExpressionAttributeValues={
                ':val': new_value
            },
            ReturnValues='UPDATED_NEW'
        )
        return {
            'statusCode': 200,
            'body': json.dumps(response),
            'headers': {
                'Access-Control-Allow-Headers': '*',
                'Access-Control-Allow-Origin': '*',
                'Access-Control-Allow-Methods': '*'
            }
        }
```
Toggleボタンが切り替わったタイミングで、更新されたtoggleValueの値が送られてくるので、その値がtrueならばDynamoDBのtoggleをTrueに、falseならばFalseにします。

そして、Vue側ではToggleが切り替わったタイミングでtoggleValueの値を更新し、更新された値をupdate-toggle-statusにPOSTします。
```HelloWorld.vue
<template>
  <v-switch v-model="toggleValue" label="Toggle" @change="updateToggleState" />
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      toggleValue: false,
    };
  },
  mounted() {
    axios.get('get-toggle-statusのURL')
      .then(response => {
        const toggleStatus = response.data.toggle;
        this.toggleValue = toggleStatus === true;
      })
      .catch(error => {
        console.log(error);
      });
  },
  methods: {
    updateToggleState() {
      axios.post('update-toggle-statusのURL', {
        toggleValue: this.toggleValue,
      })
        .then(response => {
          console.log(response.data);
        })
        .catch(error => {
          console.error(error);
        });
    },
  },
};
</script>
```
まず、updateToggleStateというメソッドを作成し、axiosでtoggleValueの値をupdate-toggle-statusにPOSTするようにします。
次に、v-switchタグ内に@change="updateToggleState"を追加し、Toggleボタンが切り替わったタイミングでupdateToggleStateを呼び出すようにします。

ここまで終えると、Toggleボタンの状態に応じてDynamoDBの値が変化します。

ToggleボタンをONに切り替えると、DynamoDBの値がTrueに
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3124507/5fbffc95-8c3f-9d6f-6d31-f50b78d3a9bc.png)
![screencapture-localhost-8080-2023-03-07-21_00_59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3124507/db5a7742-0125-0bc6-fc79-ff79bb4079c2.png)

ToggleボタンをOFFに切り替えると、DynamoDBの値がFalseに
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3124507/5db3ef57-678d-b095-6e9d-b80e7d885575.png)
![screencapture-localhost-8080-2023-03-07-21_08_54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3124507/7b504edf-0c98-16ec-41b4-9139b27e1586.png)

## おわりに
今回はLambda関数を用いてDynamoDBとToggleボタンを連携させてみました。
Toggleボタンでデータベースのbool値を変更するケースはよくあると思うので、使いこなしていきたいと思います！
関数URLもAPI Gatewayが不要で、やってみたら便利でした。