AWS Amplify Gen 2 With Vue

v-okinawa Meetup #7 LT大
https://v-okinawa.connpass.com/event/307874/

Transcript

1. AWS Amplify Gen 2 With Vue v-okinawa Meetup # 7 LT 大 2 0 24 . 2 . 1 @seike 4 60 1
2. 自己 @seike 46 0 - - @seike 46 0 - AWS Community Builder Serverless - Fusic - / 門 - / - - PHP 2019 2023 - 2022 2023 - - 大 工 子工 055538A 2
3. Agenda 1 .AWS Amplify Gen 2 2 .Vue 3 3 . 4 .Demo 5 . 3
4. 01 AWS Amplify Gen 2
5. AWS Amplify AWS Amplify Amazon Web Services っ 　 API (GraphQL) っ 　 React Angular Vue iOS Android っ 　 SPA 自 5
6. AWS Amplify AWS Amplify っ 　高 っ 　 AWS Amplify っ 　 AWS 6
7. 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
8. [New ] AWS Amplify Gen 2 AWS Amplify CLI AWS Amplify Gen 2 TypeScript 8
9. Vue Vue 3 Vue 9
10. 02 Vue 3
11. Amazon Cognito backend backend Component 面 Component 用 11
12. SocialLogin SocialLogin 方 - Facebook - Google Sign-in - Amazon - Apple 12
13. 行 行 示 API 自 13
14. 人 OSS 金 高 人 用 AWS Amplify 用 用 14
15. 用 AWS Amplify バ プ 15 URL https://speakerdeck.com/seike 4 6 0 /full-serverless-application-on-aws-amplify
16. 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
18. 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
19. 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
20. Sandbox sandnox 大 一 initialize setup 面 CDKToolkit sandobx 赤 文 280 20 $ npx amplify sandbox
21. 非 authenticatorComponent 面 21 <script setup> 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); </script> <template> <authenticator> <template v-slot="{ user, signOut }"> <h 1 >Hello {{ user.username }}!</h 1 > <button @click="signOut">Sign Out</button> </template> </authenticator> </template>
22. 22 <script setup lang="ts"> 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); </script> っ amplify/data/resource.ts const schema = a.schema({ Todo: a .model({ content: a.string() }) .authorization([a.allow.owner()]) }) export type Schema = ClientSchema<typeof schema> export const data = defineData({ schema, authorizationModes: { defaultAuthorizationMode: 'userPool' } })
23. 23 <script setup lang="ts"> 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 行 </script> <template> <div> <button @click="createTodo">Add new todo</button> <ul> <li v-for="todo in todos" :key="todo.id">{{ todo.content }}</li> </ul> </div> </template>
24. 04 Demo
26. 26 AWS Amplify Gen 2 Point 1 Vue 3 Point 2 方 Point 3 AWS Amplify Gen 2 用 Happy Vue Life Point 4
27. Thank You We are Hiring ! https://recruit.fusic.co.jp/