【AppSheet】DynamoDBのデータをCRUDするUIを3分で作ってみた

若槻龍太

2021.04.05

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

こんにちは、CX事業本部の若槻です。

前回の記事ではAppSheetについての基本的な情報についてご紹介しました。

ノーコード開発プラットフォーム「AppSheet」の基本のキ | DevelopersIO

今回は、実際にAppSheetでDynamoDBのデータをCRUD（作成、読み取り、更新、削除）するUIを3分で作ってみました。

やってみた

AWS側の実装

DynamoDBテーブルの作成

下記コマンドを実行してusersというDynamoDBテーブルを作成します。今回はこのテーブルをAppSheetアプリのデータソースとします。

			
			
% aws dynamodb create-table \
  --table-name users \
  --attribute-definitions \
    AttributeName=emailAddress,AttributeType=S \
  --key-schema \
    AttributeName=emailAddress,KeyType=HASH \
  --billing-mode PAY_PER_REQUEST

S3バケットの作成

AppSheetでDynamoDBのデータソースを追加する際に合わせてS3バケットの指定が必要となるので作成します。テーブル上の画像データなどをアプリ上で表示する際の一時保管領域として使われます。

			
			
% BUCKET_NAME=<バケット名>
% aws s3api create-bucket \
  --bucket ${BUCKET_NAME} \
  --create-bucket-configuration LocationConstraint=ap-northeast-1

IAMポリシーの作成

AppSheetのアプリが先程作成したDynamoDBテーブルとS3バケットにアクセス可能とするIAMポリシーを作成します。

			
			
{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "BucketAccess",
      "Effect": "Allow",
      "Action": [
          "s3:Get*",
          "s3:List*",
          "s3:PutObject"
      ],
      "Resource": "arn:aws:s3:::*"
    },
    {
      "Sid": "ListAndDescribeTable",
      "Effect": "Allow",
      "Action": [
          "dynamodb:List*",
          "dynamodb:Describe*"
      ],
      "Resource": "*"
    },
    {
      "Sid": "SpecificTable",
      "Effect": "Allow",
      "Action": [
        "dynamodb:BatchGet*",
        "dynamodb:DescribeTable",
        "dynamodb:Get*",
        "dynamodb:Query",
        "dynamodb:Scan",
        "dynamodb:BatchWrite*",
        "dynamodb:Delete*",
        "dynamodb:Update*",
        "dynamodb:PutItem"
      ],
      "Resource": "arn:aws:dynamodb:*:*:table/users"
    }
  ]
}

			
			
% POLICY_NAME=users-table-crud-policy
% aws iam create-policy \
  --policy-name ${POLICY_NAME} \
  --policy-document file://policy.json

IAMユーザーの作成、ポリシーのアタッチ、APIキーの発行

下記コマンドを実行してIAMユーザーを作成し、先程のポリシーをアタッチします。

			
			
% USER_NAME=appsheet-user
% AWS_ACCOUNT_ID=<アカウントID>

% aws iam create-user --user-name ${USER_NAME}

% aws iam attach-user-policy \
  --user-name ${USER_NAME} \
  --policy-arn "arn:aws:iam::${AWS_ACCOUNT_ID}:policy/${POLICY_NAME}"

下記コマンドを実行して作成したユーザーのAPIキーを発行し、戻り値からアクセスキーIDとシークレットアクセスキーを控えます。

			
			
% aws iam create-access-key --user-name ${USER_NAME}

AppSheet側の実装

続いてAppSheet側の実装です。始めにAppSheetのアカウントにログインします。

アカウント未作成の場合はサインアップしてください。

Start Making Apps - AppSheet

データソースの追加

まずDynamoDBへの接続をデータソースとしてAppSheetのアカウントに追加します。

[My account] - [Sources]で[New Data Source]をクリック。

データソースとして接続可能なクラウドサービスやデータベース一覧が表示されます。この中から[Cloud Database]を選択。

データベースへの接続情報を求められるので下記情報を指定して[Test]をクリックし、エラーとならなければ[Authorize Access]をクリック。

Type：DynamoDB
AWS region：DynamoDBテーブルを作成したリージョン
S3 bucket (for images)：先程作成したS3バケット名
Access key id：先程発行したAPIキーのアクセスキーID
Secret key：先程発行したAPIキーのシークレットアクセスキー

[My account] - [Sources]に戻ると、database-(数字)というデータソースが追加されています。

これでデータソースの追加は完了です。

アプリの作成

続いてアプリを作成します。

[My apps]で[Make a new app]をクリック。

するとダイアログが表示されます。

[Start with your own data]を選択。

適当なアプリ名を入力し、[Choose your data]をクリック。

先程アカウントに追加したデータソースを選択。

[Tables]をクリックして展開。

接続可能なDynamoDBのテーブル一覧が表示されるので、接続したいテーブルを選択。

するとアプリの編集を行うキャンバス画面が開きます。

[Data] - [Columns]を開きます。また3の矢印をクリックして右側のアプリプレビューは一旦閉じます。

ここで、このアプリによるuserテーブルのCURD操作時のカラムの定義を行います。今回は下記のように指定します。

	NAME	TYPE	KEY?	LABEL?	SHOW?	EDITABLE?	REQUIRE?	INITIAL VALUE	DESCRIPTION	SEARCH?
1	_RowNumber	Number	No	No	No	No	Yes	-	Number of this row	No
2	emailAddress	Email	Yes	Yes	Yes	Yes	Yes	-	Eメールアドレス	Yes
3	gourpMembership	EnumList	No	No	Yes	Yes	Yes	-	所属グループ	No
4	createdAt	Text	No	No	Yes	No	Yes	TEXT(NOW(),"YYYY/MM/DDTHH:MM:SS")	作成日時	No