Slide 1

Slide 1 text

AWS Amplify Gen 2 With Vue v-okinawa Meetup # 7 LT 大 2 0 24 . 2 . 1 @seike 4 60 1

Slide 2

Slide 2 text

自己 @seike 46 0 - - @seike 46 0 - AWS Community Builder Serverless - Fusic - / 門 - / - - PHP 2019 2023 - 2022 2023 - - 大 工 子工 055538A 2

Slide 3

Slide 3 text

Agenda 1 .AWS Amplify Gen 2 2 .Vue 3 3 . 4 .Demo 5 . 3

Slide 4

Slide 4 text

01 AWS Amplify Gen 2

Slide 5

Slide 5 text

AWS Amplify AWS Amplify Amazon Web Services っ   API (GraphQL) っ   React Angular Vue iOS Android っ   SPA 自 5

Slide 6

Slide 6 text

AWS Amplify AWS Amplify っ  高 っ   AWS Amplify っ   AWS 6

Slide 7

Slide 7 text

AWS Authentication   Amazon Cognito 用 API (GraphQL)   AWS AppSync API (REST)   Amazon API Gateway Storage   Amazon S 3 Functions   AWS Lambda Server-Side Rendering   Amazon CloudFront 用 SSR Utilities   Amazon CloudWatch 7

Slide 8

Slide 8 text

[New ] AWS Amplify Gen 2 AWS Amplify CLI AWS Amplify Gen 2 TypeScript 8

Slide 9

Slide 9 text

Vue Vue 3 Vue 9

Slide 10

Slide 10 text

02 Vue 3

Slide 11

Slide 11 text

Amazon Cognito backend backend Component 面 Component 用 11

Slide 12

Slide 12 text

SocialLogin SocialLogin 方 - Facebook - Google Sign-in - Amazon - Apple 12

Slide 13

Slide 13 text

行 行 示 API 自 13

Slide 14

Slide 14 text

人 OSS 金 高 人 用 AWS Amplify 用 用 14

Slide 15

Slide 15 text

用 AWS Amplify バ プ 15 URL https://speakerdeck.com/seike 4 6 0 /full-serverless-application-on-aws-amplify

Slide 16

Slide 16 text

16 202 0 / 11 / 27 Amplify Meetup # 02   AWS Amplify URL https://pages.awscloud.com/rs/ 11 2 -TZM- 766 /images/EV_awsamplify-meetup- 1 12 7 _Nov- 2020 _LT 1 .pdf

Slide 17

Slide 17 text

03

Slide 18

Slide 18 text

Vue Vue npm create 用 npm install 18 $ npm create vue@latest Vue.js - The Progressive JavaScript Framework ✔ Project name: … amplify-gen 2 -vue ✔ Add TypeScript? … No / Yes ✔ Add JSX Support? … No / Yes ✔ Add Vue Router for Single Page Application development? … No / Yes ✔ Add Pinia for state management? … No / Yes ✔ Add Vitest for Unit Testing? … No / Yes ✔ Add an End-to-End Testing Solution? Cypress ✔ Add ESLint for code quality? … No / Yes ✔Add Prettier for code formatting? … No / Yes $ cd amplify-gen 2 -vue $ npm install

Slide 19

Slide 19 text

Amplify Amplify Vue 用 Amplify UI components 19 $ npm create amplify@latest Need to install the following packages: create-amplify@ 0 . 5 . 0 Ok to proceed? (y) ? Where should we create your project? . Installing required dependencies … Installing required dependencies... Creating template files... Successfully created a new project! Welcome to AWS Amplify! Run `npx amplify help` for a list of available commands. Get started by running `npx amplify sandbox`. Amplify (Gen 2 ) collects anonymous telemetry data about general usage of the CLI. Participation is optional, and you may opt-out by using `amplify configure telemetry disable`. To learn more about telemetry, visit https://docs.amplify.aws/gen 2 / reference/telemetry $ npm add @aws-amplify/ui-vue

Slide 20

Slide 20 text

Sandbox sandnox 大 一 initialize setup 面 CDKToolkit sandobx 赤 文 280 20 $ npx amplify sandbox

Slide 21

Slide 21 text

非 authenticatorComponent 面 21 import { Authenticator } from "@aws-amplify/ui-vue"; import "@aws-amplify/ui-vue/styles.css"; import { Amplify } from 'aws-amplify'; import config from '../amplifyconfiguration.json'; Amplify.configure(config); Hello {{ user.username }}! Sign Out

Slide 22

Slide 22 text

22 import { ref, onMounted } from 'vue' import { generateClient } from 'aws-amplify/data' import type { Schema, Todo } from '@/../amplify/data/resource' const client = generateClient<Schema>() const todos = ref<Todo[]>([]) async function createTodo() { const content = window.prompt("Todo content?"); if (content) { await client.models.Todo.create({ content, }); fetchTodos(); // Todo } } async function fetchTodos() { const { data, errors } = await client.models.Todo.list(); if (!errors) { todos.value = data; // todos } else { console.error(errors); // 力 } } // fetchTodos 行 onMounted(fetchTodos); っ amplify/data/resource.ts const schema = a.schema({ Todo: a .model({ content: a.string() }) .authorization([a.allow.owner()]) }) export type Schema = ClientSchema export const data = defineData({ schema, authorizationModes: { defaultAuthorizationMode: 'userPool' } })

Slide 23

Slide 23 text

23 import { ref, onMounted } from 'vue' import { generateClient } from 'aws-amplify/data' import type { Schema, Todo } from '@/../amplify/data/resource' const client = generateClient<Schema>() const todos = ref<Todo[]>([]) async function createTodo() { const content = window.prompt("Todo content?"); if (content) { await client.models.Todo.create({ content, }); fetchTodos(); // Todo } } async function fetchTodos() { const { data, errors } = await client.models.Todo.list(); if (!errors) { todos.value = data; // todos } else { console.error(errors); // 力 } } onMounted(fetchTodos); // fetchTodos 行
Add new todo
  • {{ todo.content }}

Slide 24

Slide 24 text

04 Demo

Slide 25

Slide 25 text

05

Slide 26

Slide 26 text

26 AWS Amplify Gen 2 Point 1 Vue 3 Point 2 方 Point 3 AWS Amplify Gen 2 用 Happy Vue Life Point 4

Slide 27

Slide 27 text

Thank You We are Hiring ! https://recruit.fusic.co.jp/