RetoolでDynamoDBのデータ表示をドラッグ＆ドロップで作成する

いろんなPoCをやっていると、同じような管理画面を作ることがあります。 そんなとき、Retoolを使えば、管理画面を楽に作れるのでは？となったので、まずはデータ取得と表示を試してみました。

おすすめの方

• Retoolの雰囲気を知りたい方
• Retoolに興味がある方
• RetoolでDynamoDBテーブルの内容を表示するサンプルを見たい方

Retool用のIAMユーザとDynamoDBテーブルを作成する

CloudFormationテンプレート

DynamoDB Integrationを参考に作成します。

aws.yaml

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をまずは試してみました。他にも色々と実験してみます。

参考

• Retool | Build internal tools, remarkably fast.
• DynamoDB Integration
• Retool | Templates