Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Amplify Studioを使ってみた|ミツエーリンクスTSD

Amplify Studioを使ってみた|ミツエーリンクスTSD

AWS re:Inventで発表されたローコードツール Amplify Studioについて、コンポーネントの追加方法をまとめました。


ミツエーリンクスTSDのエンジニアリングについて発信しています。
エンジニア積極採用中!
TSD公式エンジニアブログ TSD CoLab

株式会社ミツエーリンクスTSD

F1bcf74c372e3d1b68834eef7163063c?s=128

ミツエーリンクスTSD

February 09, 2022
Tweet

More Decks by ミツエーリンクスTSD

Other Decks in Technology

Transcript

  1. Amplify Studioを使ってみた ミツエーリンクスTSD プロダクトマネジメント部 古川佑紀

  2. Amplify Studioとは 1

  3. Amplify StudioがAWS re:Invent 2021で発表されました 2 https://aws.amazon.com/jp/about-aws/whats-new/2021/12/aws-announces-aws-amplify-studio/

  4. Amplify Studioとは? 3 • ローコードのアプリ開発ツール • Figmaと連携してUI開発を最小のコーディングで行いつつ、 簡単かつ高速にバックエンドを構築できる • これまでのAmplify

    Admin UI は、Amplify Studio に統合された • 東京をはじめ17のリージョンでパブリックプレビューとして利用可能 (22/01/31現在)
  5. Amplify Studioデモ 4

  6. かんたん5ステップで爆速アプリ開発! 5 1. Amplify Studioを起動 2. データモデルを定義 3. データを投入 4.

    Figmaと連携 5. UIコンポーネントとデータを接続
  7. 1. Amplify Studioを起動 6 メニューの「Amplify Studioの設定」から、Amplify Studioを有効化、 起動する。

  8. 2. データモデルを定義 7 データモデルを定義して、 「Save and deploy」を クリック

  9. 3. データを投入 8 「Content」に移動して、 シードデータの自動作成 ボタンをクリック

  10. 9 シードデータの数を 入力して、ボタンをクリック

  11. 10

  12. 4. Figmaと連携 11 「UI Library 」から、 Get startedをクリック

  13. 12 FigmaのURLを入力後、 ボタンをクリック

  14. 13 Amplify Studioで管理する コンポーネントを選択

  15. 5. UIコンポーネントとデータを接続 14 コンポーネントを編集する ため、ボタンをクリック

  16. 15 コンポーネントに データをバインド

  17. 16 データのプレビューも できる

  18. 17 リストも作成可能

  19. 18 リストのスタイルを調整

  20. アプリケーションへの読み込み方法 19 ボタンをクリックす ると、 コンポーネントを 読み込むための コードが確認でき る

  21. 20 1. 依存関係のライブラリを読み込む npm install aws-amplify @aws-amplify/ui-react 2. index.jsに以下のコードをコピペ import

    Amplify from 'aws-amplify'; import "@aws-amplify/ui-react/styles.css"; import {AmplifyProvider} from "@aws-amplify/ui- react"; import awsconfig from './aws-exports'; Amplify.configure(awsconfig);
  22. 21 3. <App />を<AmplifyProvider />で囲う <AmplifyProvider> <App /> </AmplifyProvider> 4.

    ローカル環境をアップデート amplify pull --appId <app id> --envName <env> 5. アプリケーションに設置 import { FAQItem } from './ui-components’; <FAQItem />
  23. まとめ 22

  24. • よりクリエイティブな仕事に集中できる – コンポーネントを作る手間が省け、Webアプリケーションの機能設計や改善など、 ダイレクトに価値に繋がる業務に注力できる • デザイナーと開発者の距離がぐっと縮まりFBループを回しやすくなる – 開発サイクルを早くまわしてより高品質なアプリケーションを作成できる –

    高速でサイクルを回すことによって正解に近づくやり方の体現 • ただしAWS Amplify Studio の UI 開発機能は現在公開プレビュー中 – 一日も早い、一般提供開始(GA)が待ち望まれます Amplify Studioの良いところ 23
  25. ご清聴ありがとうございました! 24