Ionic で Amplify DataStore を使ってみる
Amplify DataStore をご存じですか? Amplify DataStore は デバイス間でデータを同期でき、かつ、オフラインでも利用できるデータストアです。
Amplify DataStore は AWS が提供している Amplify Framework の一部ですが、必ずしも AWS を必要としません。クラウドへの接続や AWS アカウントを持っていない場合でも、スタンドアロンのローカル・データストアとして使用できます。しかし、Amplify DataStore を AWS AppSync に接続すれば、自動的に複数のデバイス間でデータをクラウドと同期し、競合があれば解決してくれます。
順序立てて、まずは AWS なしで、Amplify DataStore をスタンドアロンで使えるところを見てみましょう。
今回は Ionic を使用します。
npx ionic start
Amplify DataStore をインストールします。
npm i @aws-amplify/core @aws-amplify/datastore
model のファイルを追加します。これらのファイルをどうやって作れば良いのかという疑問(作り方)がありますが、それはあとで説明するとして、今回は出来合いのファイルを使用します。
import { initSchema } from '@aws-amplify/datastore';
import { schema } from './schema';const PostStatus = {
"ACTIVE": "ACTIVE",
"INACTIVE": "INACTIVE"
};const { Post } = initSchema(schema);export {
Post,
PostStatus
};
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<ContainerProps> = () => {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
で実行します。
タイトルと rating に数値を入れて「Create Post」をクリックすると IndexedDB に値が入ることが分かります。
簡単でしたね。DataStore.save すれば Amplify DataStore にデータを保存することが出来ます。
DataStore を検索するのは DataStore.query で出来ます。 rating の値が 4 よりも大きいデータを抽出してみましょう。
const posts = await DataStore.query(Post, c => c.rating('gt', 4));
完全なコードは https://github.com/r3-yamauchi/amplify-datastore-ionic-sample/blob/master/src/components/ExploreContainer.tsx にあります。
データを更新するのは
await DataStore.save(
Post.copyOf(original, updated => {
updated.title = `title ${Date.now()}`;
})
);
削除するのは DataStore.delete で出来ます。
Amplify DataStore が簡単に扱えることを体感したところで、次回は AWS に繋いで、Amplify DataStore がネットワーク接続が利用可能であれば AWS AppSync を使用してデータを透過的に同期してくれるところを見ていきます。