RetoolでDynamoDBのデータ表示をドラッグ＆ドロップで作成する
いろんなPoCをやっていると、同じような管理画面を作ることがあります。 そんなとき、Retoolを使えば、管理画面を楽に作れるのでは？となったので、まずはデータ取得と表示を試してみました。
おすすめの方
- Retoolの雰囲気を知りたい方
- Retoolに興味がある方
- RetoolでDynamoDBテーブルの内容を表示するサンプルを見たい方
Retool用のIAMユーザとDynamoDBテーブルを作成する
CloudFormationテンプレート
DynamoDB Integrationを参考に作成します。
AWSTemplateFormatVersion: 2010-09-09
Description: IAM and DynamoDB for Retool
Resources:
# Retool用のIAMユーザ
RetoolUser:
Type: AWS::IAM::User
Properties:
UserName: retool-user
# Retool用のIAMユーザに付与するIAMポリシー（AssumeRoleできる）
RetoolUserPoricy:
Type: AWS::IAM::Policy
Properties:
PolicyName: retool-user-policy
PolicyDocument:
Version: "2012-10-17"
Statement:
- Effect: "Allow"
Action:
- "dynamodb:ListTables"
- "dynamodb:DeleteItem"
- "dynamodb:ListTagsOfResource"
- "dynamodb:DescribeReservedCapacityOfferings"
- "dynamodb:DescribeTable"
- "dynamodb:GetItem"
- "dynamodb:DescribeContinuousBackups"
- "dynamodb:DescribeLimits"
- "dynamodb:BatchGetItem"
- "dynamodb:BatchWriteItem"
- "dynamodb:PutItem"
- "dynamodb:ListBackups"
- "dynamodb:Scan"
- "dynamodb:Query"
- "dynamodb:DescribeStream"
- "dynamodb:UpdateItem"
- "dynamodb:DescribeTimeToLive"
- "dynamodb:ListStreams"
- "dynamodb:DescribeGlobalTableSettings"
- "dynamodb:ListGlobalTables"
- "dynamodb:GetShardIterator"
- "dynamodb:DescribeGlobalTable"
- "dynamodb:DescribeReservedCapacity"
- "dynamodb:DescribeBackup"
- "dynamodb:GetRecords"
Resource: "*"
Users:
- !Ref RetoolUser
# DynamoDBテーブル
DeviceTable:
DeletionPolicy: Retain
UpdateReplacePolicy: Retain
Type: AWS::DynamoDB::Table
Properties:
TableName: retool-device-table
BillingMode: PAY_PER_REQUEST
AttributeDefinitions:
- AttributeName: deviceId
AttributeType: S
KeySchema:
- AttributeName: deviceId
KeyType: HASH
Retool側で「DynamoDBテーブルの一覧が取得できないエラー」が発生するため、Resource: "*"を指定しています。
デプロイ
aws cloudformation deploy \
--template-file aws.yaml \
--stack-name IAM-and-Retool-Stack \
--capabilities CAPABILITY_NAMED_IAM
テスト用のデータを準備する
適当にテスト用のデータをDynamoDBテーブルに格納しました。
アクセスキー取得
Retoolに渡すアクセスキーを取得します。
aws iam create-access-key \
--user-name retool-user
Retoolを使う
ResourcesにDynamoDBテーブルを追加する
DynamoDBテーブルを選択します。
アクセスキーなどを入力します。
作成完了しました。
Appを作成する
いろいろなテンプレートがありますが、DynamoDBを扱うテンプレートは無いので、イチから作成していきます。
Black Appを作成する
Black Appを作成します。
初期のアプリができました。サンプル用のテーブルが表示されています。
query1をDynamoDBに変更する
デフォルトで用意されているquery1は、PostgreSQLなので、DynamoDBテーブルに変更します。
さきほど作成したDynamoDBテーブルを選択し、Methodをscanにします。
Save & Runするとデータ取得が確認できました。
tableの設定を変更し、DynamoDBテーブルの内容を表示させる
さきほど、query1をDynamoDBテーブルに変更したので、データが表示されなくなりました。
そのため、table1のデータソースを「{{ query1.data.Items }}」に変更します。
変更後、テーブルにデータが表示されました。
ドラッグ＆ドロップでカラムの順番も変更できます。
ほかにも、テーブルにフィルタ追加したり、ページネーション設定などができます。
動作を確認してみる
右上のPreviewボタンを押すと、動作確認ができます。
他ユーザに共有できる
右上のShareボタンを押すと、第三者に共有できます。
さいごに
簡単にDynamoDBなどの外部サービスと連携し、UIを作れるRetoolをまずは試してみました。他にも色々と実験してみます。
