Amplify Studioってホントにすごいの？

アプリケーションサービス部の千葉です。『Amplify Studioすげぇ』の記事を目にしますが、どれも『チョット触ってみたけど良さそうでした』程度の内容で物足りないっすね。

公式ブログで謳っている『最小限のプログラミングでFigmaからフルスタックのReactアプリを実現』ってのがホントなら、
この投稿のなかで『会社の本棚にある書籍管理システム』程度は作れちゃうでしょ。ってコトで、わたしチャレンジしてみます。

1. Amplify Studio の開始

Management Console からアプリケーションを追加します。

f:id:swx-chiba:20211228120652j:plain — step-01

5分くらい待つ…

f:id:swx-chiba:20211228120759j:plain — step-02

↓こんな画面が表示されるので、Amplify Studio を起動

f:id:swx-chiba:20211228121129j:plain — step-03

反応がない。無風…

世界は Safari ユーザーに全然やさしくありません。改めて Chrome で Amplify Studio を起動。

f:id:swx-chiba:20211228121635j:plain — step-04

ガイダンスに従って、データモデルの作成

f:id:swx-chiba:20211228154319j:plain — step-05

また待つ（右上に注目してほしいみたい

f:id:swx-chiba:20211228123133j:plain — step-06

2. Figma でページデザイン & Amplify Studio への取り込み

↓こちらのBlogを参考にページをデザインして、Amplify Studio に取り込む。

blog.serverworks.co.jp

Figmaでデザインしたページは↓こんな感じ

Card のみがコンポーネント化されていることがポイントです。
Figma側でコンポーネント化したパーツを Apmlify Studio 側がピックアップしてコードを自動生成してくれます。
NavBar / Card01〜03 はページのモックアップとして用意はしますが、Amplify Studio でのコード生成対象からは除外しています。

f:id:swx-chiba:20211228165334j:plain — step-07

Amplify Studio に取り込む

f:id:swx-chiba:20211228141222j:plain — step-08

f:id:swx-chiba:20211228141314j:plain — step-09

f:id:swx-chiba:20211228201850j:plain — step-10

じゃじゃーん

f:id:swx-chiba:20211228165936j:plain — step-11

3. コンポーネントとデータモデルの紐付け

Card を選択して Configure を実行して、以下の設定を実施します。

Component properties
- Name: Book (任意の値)
- Type: Book
url: Child properties
- Type: src
- Value: Book.url
title: Child properties
- Type: label
- Value: Book.title
isbn: Child properties
- Type: label
- Value: Book.isbn

f:id:swx-chiba:20211228145712j:plain — step-12

4. React アプリケーションへの取り込み

Reactアプリケーションの初期化

$ mkdir ~/Developments/book-management
$ cd ~/Developments/book-management
$ npx create-react-app .
$ npm install aws-amplify @aws-amplify/ui-react

Amplify アプリケーションの Pull

$ curl -sL https://aws-amplify.github.io/amplify-cli/install | bash && $SHELL
$ amplify pull --appId xxxxxxxxxxxxxx --envName staging

5. GraphQL の追加

$ amplify update api

5-1. 書籍一覧を取得するクエリの作成

./src/graphql/queries.js ファイルを作成して以下を記載します。

export const listBooks = `query ListBooks {
  listBooks {
    items {
      id
      title
      isbn
      url
    }
  }
}
`;

5-2. App.js の編集

import React, { useState, useEffect } from 'react';
import './App.css';
import { Amplify, API } from 'aws-amplify';
import awsconfig from './aws-exports';
import Card from "./ui-components/Card";
import { listBooks } from './graphql/queries';

Amplify.configure(awsconfig);

function App() {
  const [books, setBooks] = useState([]);

  useEffect(() => {
    fetchBooks();
  }, []);

  async function fetchBooks() {
    const apiData = await API.graphql({ query: listBooks });
    setBooks(apiData.data.listBooks.items);
  };

  return (
    <div className="App">
      {
        books.map(item => (
          <div key={item.id}>
            <Card Book={item}></Card>
          </div>
        ))
      }
    </div>
  );
}

export default App;