AWS

Ionic で Amplify DataStore を使ってみる

2020-03-16

Amplify DataStore をご存じですか？ Amplify DataStore はデバイス間でデータを同期でき、かつ、オフラインでも利用できるデータストアです。

Amplify DataStore は AWS が提供している Amplify Framework の一部ですが、必ずしも AWS を必要としません。クラウドへの接続や AWS アカウントを持っていない場合でも、スタンドアロンのローカル・データストアとして使用できます。しかし、Amplify DataStore を AWS AppSync に接続すれば、自動的に複数のデバイス間でデータをクラウドと同期し、競合があれば解決してくれます。

‍

※ 参考 2020/10 Amplify DataStore に新機能 "Selective Sync" が追加されました！

‍

順序立てて、まずは AWS なしで、Amplify DataStore をスタンドアロンで使えるところを見てみましょう。

今回は Ionic を使用します。

npx ionic start

‍

Amplify DataStore をインストールします。

npm i @aws-amplify/core @aws-amplify/datastore

npm i @aws-amplify/core @aws-amplify/datastore

‍

model のファイルを追加します。これらのファイルをどうやって作れば良いのかという疑問（作り方）がありますが、それはあとで説明するとして、今回は出来合いのファイルを使用します。

src/models/index.js


import { initSchema } from '@aws-amplify/datastore';
import { schema } from './schema';

const PostStatus = {
    "ACTIVE": "ACTIVE",
    "INACTIVE": "INACTIVE"
};

const { Post } = initSchema(schema);

export {
    Post,
    PostStatus
};

‍

src/models/schema.js


export const schema = {
    "models": {
        "Post": {
            "syncable": true,
            "name": "Post",
            "pluralName": "Posts",
            "attributes": [
                {
                    "type": "model",
                    "properties": {}
                }
            ],
            "fields": {
                "id": {
                    "name": "id",
                    "isArray": false,
                    "type": "ID",
                    "isRequired": true,
                    "attributes": []
                },
                "title": {
                    "name": "title",
                    "isArray": false,
                    "type": "String",
                    "isRequired": true,
                    "attributes": []
                },
                "rating": {
                    "name": "rating",
                    "isArray": false,
                    "type": "Int",
                    "isRequired": true,
                    "attributes": []
                },
                "status": {
                    "name": "status",
                    "isArray": false,
                    "type": {
                        "enum": "PostStatus"
                    },
                    "isRequired": true,
                    "attributes": []
                }
            }
        }
    },
    "enums": {
        "PostStatus": {
            "name": "PostStatus",
            "values": [
                "ACTIVE",
                "INACTIVE"
            ]
        }
    },
    "version": "7f812f11c1433ec50924edd9019eb551"
};

‍

最後に Amplify DataStore を使用するコードを書きます。

まずは Amplify DataStore にデータを入れるだけのコードを見てみましょう。

src/components/ExploreContainer.tsx

import React, { useState } from 'react';
import { DataStore } from '@aws-amplify/datastore';
import { Post, PostStatus } from '../models';
import './ExploreContainer.css';

interface ContainerProps { }

const ExploreContainer: React.FC = () => {

const [form, updateForm] = useState({ title: '', rating: 0 });

    async function create() {
        const postData = {...form, status: PostStatus.INACTIVE};
        await DataStore.save(
            new Post(postData)
        );
        console.log('successfully created new post');
        updateForm({ title: '', rating: 0 });
    }

return (
     <div className="container">
          <strong>Power Of Amplify DataStore</strong>
          <p>Start with Ionic</p>
           <input
     value={form.title}
     placeholder="title"
     onChange={e => updateForm({ ...form, 'title': e.target.value })}
   />

          <input
   value={form.rating}
   placeholder="rating"
   onChange={e => updateForm({ ...form, 'rating': parseInt(e.target.value) })}
   />

          <button onClick={create}>Create Post</button>
        </div>
     );
};

export default ExploreContainer;
‍

‍

ここまでのファイルは https://github.com/r3-yamauchi/amplify-datastore-ionic-sample/tree/6eb5caa59cbad1ec23b424a992e972263b29974e に置いているので、ここからダウンロードして試していただくこともできます。

‍

npm start で実行します。