Amplify新機能(Studio)を触ってみた(プレビュー版)
Amplify新機能(Studio)を触ってみた(プレビュー版)
Amplify Studioとは
Figmaと連携して、Figmaで作成したReact UIコンポーネントを自動的にコードに変換してくれる開発環境。
Figmaでデザインしたものをそのまま使えるという理解でいいのかなぁ？
Amplify環境セットアップ
Amplifyを使用するのが初めてなので、Amplify Studioのチュートリアルをなぞる感じで進めていきます。
AmplifyCLIのインストール
※インストール済みであれば飛ばしてください
今回はnpmを使用します
npm install -g @aws-amplify/cli
次にCLIの設定をします。
途中コンソールが立ち上がってIAMユーザを作成しろって言われたりするので、デフォルトで指示通りデフォルトで作成して、アクセスキーをセットします。
amplify configure
Follow these steps to set up access to your AWS account:
Sign in to your AWS administrator account:
https://console.aws.amazon.com/
Press Enter to continue
Specify the AWS Region
? region: ap-northeast-1
Specify the username of the new IAM user:
? user name: amplify-admin-dev-01
Complete the user creation using the AWS console
Press Enter to continue
Enter the access key of the newly created user:
? accessKeyId: ********************
? secretAccessKey: ****************************************
This would update/create the AWS Profile in your local machine
? Profile Name: default
Successfully set up the new user.
プロジェクト作成
Reactプロジェクトを作成します。
npx create-react-app amplify-studio-test --template typescript
cd amplify-studio-test
プロジェクトにAmplifyをセットアップします。
これもまた各種アプリに関する入力を求められます。
amplify init
次にAmplifyのライブラリをインストールします
npm install aws-amplify @aws-amplify/ui-react
index.tsxに以下のコードを追加しておきます
import Amplify from "aws-amplify";
import awsExports from "./aws-exports";
Amplify.configure(awsExports);
Amplify Studio有効化
Amplifyのコンソールを開くと、作成したアプリケーションがあるので選択します。
Set Up Amplify Studioを選択すると、On/Offのトグルボタンがあるので、Onに変更しインターフェースを作成します。
作成後にStudioを起動できるようになるので、選択して起動します。
おぉ...！！なんかすごい...。
テーブル & GraqhQL API作成
StudioのサイドメニューからDataを選択します。
左上のAdd modelを選択することで、自由にテーブルを作成できます。(リレーションも張れる!!DyanamoDBなのに??)
(今回作成したのは下記)
| Field | Type |
|---|---|
| id | (Primary Key) |
| title | String |
| description | String |
| img_url | String |
作成したら左上のSave and deployを選択して、リソースのデプロイをします。
デプロイ完了後は下記のように、ローカルでpullするようコマンドが表示されるので、コピーして実行します。
amplify pull --appId {app_id} --envName dev
コマンド実行後はローカルのsrc/models配下にGraphQLスキーマが自動作成されてます。
src
├── App.tsx
├── aws-exports.js
├── index.tsx
└── models
├── index.d.ts
├── index.js
├── schema.d.ts
└── schema.js
Figma連携
ここからがStudioで注目されている機能です。
StudioのサイドメニューからUI Libraryを選択します。
Get startedを選択すると下記の表示がされて、Figmaのリンクを求めれれます。
Figmaのプロジェクト画面右上にあるShareを選択して、表示される画面でCopy linkでクリップボードにコピーし、先程のStudioの画面に入力します。
Figmaとの同期が始まり、コンポーネント毎に同期を受け入れるか聞かれます。特に指定ないので全部受け入れます。
右上のAccept allで全部のコンポーネントが同期されます。
(ちなみにコンポーネント同士でネストしているものはエラ-になります)
Figmaで事前に作成したコンポーネントが、無事Amplify Studioに入りました。
Reactでコンポーネントの使用
同期されたコンポーネントをローカルに反映します。
amplify pull --appId {app_id} --envName dev
コマンド実行後はローカルのsrc/ui-components配下に自動作成されてます。
src
├── App.tsx
├── aws-exports.js
├── index.tsx
├── models
└── ui-components
├── AmplifyButton.jsx
├── AmplifyCard.jsx
└── index.js
実際に使用してみます。
propsの指定はAmplify UIのFlexとViewを参照しています。
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import Amplify from "aws-amplify";
import awsExports from "./aws-exports";
import { AmplifyProvider } from '@aws-amplify/ui-react'; // amplify-ui用に追加
import "@aws-amplify/ui-react/styles.css"; // amplify-ui用に追加
Amplify.configure(awsExports);
ReactDOM.render(
<React.StrictMode>
<AmplifyProvider>
<App />
</AmplifyProvider>
</React.StrictMode>,
document.getElementById('root')
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
import React from 'react';
import './App.css';
import { AmplifyButton } from './ui-components'
function App() {
return (
<div className="App">
<AmplifyButton
width={200}
as="button"
onClick={() => {
alert("clicked button");
}}
/>
</div>
);
}
export default App;
変更後serverを起動します。
npm run start
使用できてる！！
データバインディング
先程つくったコンポーネントに、データをバインドすることができます。
テーブルは作成済みなので、データを作成します。
サイドメニューからContentを選択します。
Auto-genarate seed dataを選択してデータを自動生成します。
数を選べるの適当に作成しましょう。
コンポーネントの設定
UI LibraryからコンポーネントのConfigureを選択して設定画面に入ります。
上位のComponent propertiesに作ったデータストアを割り当てます。
その後に下位の属性にChalid propertiesを割り当てていきます。
なんと画面上にデータが反映された状態が表示されます。
使用しているデータはランダムになっており、右上のShuffle preview dataを選択することで、別のデータでの状態も見れます。
コンポーネントの使用
下記のコマンドでGraphQLのクエリーファイルが自動生成されます。
amplify codegen add
クエリーをもとに、GraphQLで取得したデータを表示してみます。
import './App.css';
import React, { useLayoutEffect, useState } from 'react';
import API, { GraphQLResult } from '@aws-amplify/api';
import { AmplifyButton, AmplifyCard } from './ui-components'
import { getPosts } from './graphql/queries'
import { graphqlOperation } from 'aws-amplify';
import { GetPostsQuery, Posts} from './API';
function App() {
const [post, setPost] = useState({});
useLayoutEffect(() => {
fetchPost()
}, []);
const fetchPost = async () => {
const postData = await API.graphql(
graphqlOperation(getPosts,{
id: 'dynamodb_id'
}
)) as GraphQLResult<GetPostsQuery>;
setPost(postData.data?.getPosts as Posts)
}
return (
<div className="App">
<AmplifyButton
width={200}
as="button"
onClick={() => {
alert("clicked button");
}}
/>
<AmplifyCard posts={post} />
</div>
);
}
export default App;
コレクションの作成
UI Libraryから繰り返しアイテムの、リストを作成することができます。
コンポーネントからConfigureを選択して設定画面を表示し、右上にあるCreate collectionを選択します。
任意の名前でコレクションコンポーネントを作成します。
設定画面が表示されてコレクションのレイアウト等を自由に変更できます。
表示されているのは現在入ってるデータ分です。
並び順も変更可能です。
右側のCollection dataからView/Editを選択します。
ソートやフィルターを設定できるようになります。
コレクションの使用
作ったコレクションのコンポーネントを使用してみます。
ampliy pullを行い、ローカルにコンポーネントを生成します。
src
├── App.tsx
├── aws-exports.js
├── index.tsx
├── models
└── ui-components
├── AmplifyButton.jsx
├── AmplifyCard.jsx
├── AmplifyCardColletion.jsx
└── index.js
App.tsxを書き変えてサーバを起動します。
import React from 'react';
import './App.css';
import { AmplifyCardCollection } from './ui-components';
function App() {
return (
<div className="App">
<AmplifyCardCollection />
</div>
);
}
export default App;
npm run start
設定したレイアウト通り表示されてますね！
触ってみた感想
Amplify自体が初めて使用するので、若干戸惑いました。
(特にAmplifyのGraphQL周辺APIがTypeScriptに優しくない仕様だった...)
Figmaでデザインしたものを、そのまま使用できるのでコードを書く量が減ることは確実ですね。
ただFigmaもAmplifyもどちらの習熟度も必要になりそうで、人を選びそうな感じは受けました。
Discussion