AWS Amplify Studioを使ってローコードでLIFFアプリを作る２

はじめに

こちらの続きです。

今回はデータモデルを使ってLIFFでは取得できなかったユーザーのプロフィールデータを拡張してみようと思います。前回LIFFで取得できなかったデータは以下の２つです。

• 背景画像
• 自己紹介文(本当はgetProfileで取得できるstatusMessageを代用しても良かったのですが、今回はあえてデータモデルを使ってみます)

この２つをデータモデルを使って拡張したいと思います。

データモデルを作る

Contentを選択してデータモデルを作成します。

Profileという名前で以下の要素を付け足します。

• liff_id(liffのユーザーIDと紐付けるため)
• background_image(背景画像のURL)
• bio(自己紹介文)

後はSave and deployを実行して、後は各項目にデータを記入します。
liff_idに関してはgetProfileから取得できるuserIdを入力することにします。本来であれば専用フォームを実装したいところですが、今回は割愛して直接データ入力をすることにします。
ちなみにLIFFのplaygroudがあるので、単純に自分のuserIdを知りたい！などちょっとした用途でLIFFライブラリを使いたいときは↓を使うといいと思います。

UI Libraryを変更する

Profileというデータモデルが作成できたので、これを前回Figmaから取り込んだProfileCardのコンポーネントに適用します。
ProfileCardのTypeをProfileに設定します。あとはモデルデータを適用したいプロパティを選択してフィールドを選択します。（ここではbackgroundのプロパティに対して、backgroud_imageをsrcに適用）

変更したら、amplify pullで変更分をマージしましょう。

modelのデータを利用する

データモデルを作成することで、./modelsというフォルダが作成されているはずです。このmodelsで定義されているクラスは、DataStoreのライブラリを使ってデータの操作を行うことができます。

今回はqueryを使ってデータの読み取りを行います。

import { Profile } from './models';
import { DataStore } from 'aws-amplify';

const profiles = await DataStore.query(Profile);

実装

コード全体は以下に公開されています。

DataStore.queryを使って、データモデルの中に入力したデータを取得します。

src/App.js

import { useEffect, useState } from 'react';
import { ProfileCard } from './ui-components';
import liff from '@line/liff';
import './App.css';
import { Profile } from './models';
import { DataStore } from 'aws-amplify';

function App() {
  useEffect(() => {
    liff.init({ liffId: process.env.REACT_APP_LIFF_ID }).then(async () => {
      if (!liff.isLoggedIn()) {
        await liff.login();
      }
      const profile = await liff.getProfile();
      const profiles = await DataStore.query(Profile);
      const { bio, background_image } = profiles.find((value) => value.liff_id === profile.userId);
      setProfile({
        avatorImageSrc: profile.pictureUrl,
        userName: profile.displayName,
        backgroundImageSrc: background_image,
        bio,
      });
    }).catch((error) => {
      console.error(error);
    });
  }, [])
  const [profile, setProfile] = useState({
    avatorImageSrc: '',
    userName: 'user name',
    bio: 'user profile',
    backgroundImageSrc: ''
  });
  return (
    <div className="App">
      <ProfileCard ProfileCard={{ bio: profile.bio, background_image: profile.backgroundImageSrc }} overrides={{
        "View.Image[1]": {
          alt: 'アバター',
          src: profile.avatorImageSrc,
        },
        "View.Text[0]": {
          children: profile.userName,
        },
      }} />
    </div>
  );
}

export default App;

今回は簡単のためにデータを全件取得した後にLIFFのuserIdとデータモデルのliff_idが一致するProfileを取り出すような実装を行いました。

さいごに

データモデルに↓こんな感じでデータを入力してみました。

その入力したデータ内容が事項紹介文と背景画像に反映されました↓。

データモデルの使い方もなんとなくわかった気がするので、気が向いたらちゃんとしたアプリも作ってみたいなと思いました。