今日から始めるAmplify DataStore

Slide 1

Slide 1 text

੢ాক޾ ࠓ೔͔Β࢝ΊΔ"NQMJGZ%BUB4UPSF

Slide 2

Slide 2 text

ࣗݾ঺հ ੢ాক޾ wαʔόʔαΠυΤϯδχΞ w"84ߏங ϞόΠϧΞϓϦͷόοΫΤϯυ"1* w"OESPJE /&8 w޷͖ͳ"84αʔϏε w4 &$4 wۀ຿Ͱ࢖༻͢Δݴޠ w3VCZ (P 1ZUIPO +BWB4DSJQU ,PUMJO

Slide 3

Slide 3 text

ࠓ೔࿩͢ࣄ w"84"NQMJGZ%BUB4UPSFͱ͸ʁ wجຊతͳ࢖͍ํ wར༻্ͷ஫ҙ఺ wϢʔεέʔε

Slide 4

Slide 4 text

AWS Amplify DataStore ͱ͸ʁ

Slide 5

Slide 5 text

"NQMJGZͱ͸ Amplifyͱ͸

Slide 6

Slide 6 text

"NQMJGZ

Slide 7

Slide 7 text

"84"NQMJGZ$POTPMF ϗεςΟϯά

Slide 8

Slide 8 text

"84"NQMJGZ$-* $-*Ͱ"84ϦιʔεΛ࡞੒ͨ͠Γ ίʔυΛੜ੒͢Δ

Slide 9

Slide 9 text

"84"NQMJGZ-JCSBSJFT ΞϓϦέʔγϣϯʹ૊Έࠐ·Ε ΔϥΠϒϥϦ܈

Slide 10

Slide 10 text

"NQMJGZ%BUB4UPSFͱ͸ Amplify DataStore ͱ͸

Slide 11

Slide 11 text

"NQMJGZ%BUB4UPSFͷಛ௃ wந৅౓ͷߴ͍σʔλૢ࡞"1* wΦϑϥΠϯରԠ wσʔλڝ߹ͷ೉͠͞Λ͋Δఔ౓ܰݮ

Slide 12

Slide 12 text

%BUB4UPSF"1* w%BUB4UPSFTBWF w%BUB4UPSFRVFSZ w%BUB4UPSFEFMFUF w%BUB4UPSFPCTFSWF

Slide 13

Slide 13 text

%BUB4UPSF"1*$36% w%BUB4UPSFTBWF w%BUB4UPSFRVFSZ w%BUB4UPSFEFMFUF w%BUB4UPSFPCTFSWF ొ࿥ɾߋ৽ औಘ ࡟আ

Slide 14

Slide 14 text

%BUB4UPSF"1*ϦΞϧλΠϜߋ৽ w%BUB4UPSFTBWF w%BUB4UPSFRVFSZ w%BUB4UPSFEFMFUF w%BUB4UPSFPCTFSWF ߋ৽௨஌

Slide 15

Slide 15 text

"NQMJGZ%BUB4UPSFσʔλͷྲྀΕ

Slide 16

Slide 16 text

"NQMJGZ%BUB4UPSFσʔλͷྲྀΕ

Slide 17

Slide 17 text

جຊతͳ࢖͍ํ

Slide 18

Slide 18 text

جຊతͳखॱ w"NQMJGZ"QQΛ࡞੒ w(SBQI2-εΩʔϚΛ࡞੒ wεΩʔϚ͔ΒίʔυΛࣗಈੜ੒ɹ wΞϓϦέʔγϣϯ΁ͷ૊ΈࠐΈ

Slide 19

Slide 19 text

׬੒Πϝʔδ

Slide 20

Slide 20 text

"NQMJGZ$-*ΛΠϯετʔϧ $ npm install -g @aws-amplify/cli

Slide 21

Slide 21 text

"NQMJGZ"QQΛ࡞੒ $ amplify init w"NQMJGZʹඞཁͳϑΝΠϧΛੜ੒ wରԠ͍ͯ͠ΔϑϨʔϜϫʔΫΛݕ஌

Slide 22

Slide 22 text

"1*Λ࡞੒ $ amplify add api w௨৴ํࣜΛબͿ ࠓճ͸(SBQI2- wೝূํࣜΛબͿ ࠓճ͸$PHOJUPΛબ୒

Slide 23

Slide 23 text

(SBQI2-εΩʔϚ enum TodoStatus { WAITING DONE } type Todo @model @auth(rules: [{allow: owner}]){ id: ID! owner: String title: String items: [TodoItem] @connection(name: "TodoItems") status: TodoStatus } type TodoItem @model { id: ID! owner: String content: String todo: Todo @connection(name: "TodoItems") status: TodoStatus }

Slide 24

Slide 24 text

Slide 25

Slide 25 text

(SBQI2-εΩʔϚόοΫΤϯυ type Todo @model @auth(rules: [{allow: owner}]){ NPEFMτϥϯεϑΥʔϜΛ͚ͭΔ͜ͱͰ "NQMJGZ͕ඞཁͳ"84ϦιʔεΛ࡞੒͢Δͷʹ ඞཁͳίʔυΛੜ੒͢Δ

Slide 26

Slide 26 text

(SBQI2-εΩʔϚݖݶ؅ཧ type Todo @model @auth(rules: [{allow: owner}]){ owner: String BVUIτϥϯεϑΥʔϜΛ͚ͭΔ͜ͱͰɺ͜ͷϞσϧ ʹΞΫηεͰ͖ΔݖݶΛ͚ͭΔ͜ͱ͕Ͱ͖Δ ࠓճ͸Ϟσϧͷ࡞੒ऀͷΈ͕͜ͷϞσϧΞΫηε Ͱ͖ΔΑ͏ʹ͍ͯ͠Δ

Slide 27

Slide 27 text

(SBQI2-εΩʔϚؔ࿈ type Todo @model @auth(rules: [{allow: owner}]){ items: [TodoItem] @connection(name: "TodoItems") type TodoItem @model { todo: Todo @connection(name: "TodoItems") DPOOFDUJPOτϥϯεϑΥʔϜͰϞσϧಉ࢜ͷ ؔ࿈Λઃఆ͢Δ͜ͱ͕Ͱ͖Δ

Slide 28

Slide 28 text

ϞσϧʹඞཁͳϑΝΠϧΛੜ੒ $ amplify codegen models w(SBQI2-ͷεΩʔϚ͔ΒΞϓϦέʔγϣϯ ͕࢖༻͢ΔϞσϧͷίʔυΛࣗಈੜ੒ w(SBQI2-ͷίʔυΛࣗಈੜ੒

Slide 29

Slide 29 text

"84؀ڥΛߏங $ amplify push w"84ϦιʔεΛ࡞੒͠ɺόοΫΤϯυΛߏங ͢Δ

Slide 30

Slide 30 text

"NQMJGZ-JCSBSJFTΛΠϯετʔϧ $ yarn add aws-amplify aws-amplify-vue

Slide 31

Slide 31 text

$PHOJUPೝূ ೝূํ๏ʹ$PHOJUPΛબΜͰ͍ΔͷͰ$PHOJUPͰ ϩάΠϯग़དྷΔύʔπΛ૊ΈࠐΉ $PHOJUPೝূࡁΈͷϢʔβʔ͕σʔλΛొ࿥͢Δͱ BVUIτϥϯεϑΥʔϜͷޮՌͰίʔυΛ ॻ͔ͳͯ͘΋ࣗಈʹϞσϧอଘ࣌ʹઃఆ͞ΕΔ

Slide 32

Slide 32 text

Ϟσϧͷอଘ await DataStore.save( new Todo({ title: this.todoTitle, status: TodoStatus.WAITING }) ); %BUB4UPSFTBWFʹϞσϧͷΠϯελϯεΛ౉͠ σʔλΛอଘ͠·͢

Slide 33

Slide 33 text

ؔ࿈ͷ͋ΔϞσϧͷอଘ async createTodoItem(todo) { await DataStore.save( new TodoItem({ todo: todo }) ); DPOOFDUJPOτϥϯεϨʔλʔΛઃఆͨ͠ ϑΟʔϧυʹؔ࿈͢ΔϞσϧͷΠϯελϯεΛ ઃఆͯ͠อଘ͢Δ

Slide 34

Slide 34 text

ϞσϧͷσʔλΛऔಘ %BUB4UPSFRVFSZʹϞσϧΛ౉͠ɺ σʔλΛऔಘ͠·͢ async fetchTodos() { this.todos = await DataStore.query(Todo, Predicates.ALL); },

Slide 35

Slide 35 text

ϞσϧͷσʔλΛݕࡧ %BUB4UPSFRVFSZʹୈҰҾ਺ʹϞσϧΛΘͨ͠ ୈ̎Ҿ਺ʹݕࡧ৚݅Λࢦఆ͢Δ ্هྫ͸TUBUVT͕8"*5*/(ͷ΋ͷ͚ͩΛ நग़͢Δ this.todoItems = await DataStore.query( TodoItem, c => c.status("eq", TodoStatus.WAITING) )

Slide 36

Slide 36 text

ؔ࿈ͷ͋ΔϞσϧͷσʔλΛݕࡧ GJMUFSͰؔ࿈Ϟσϧͷ*%͕ઃఆ͞Ε͍ͯΔσʔλ͚ͩ ΛߜΓࠐΉ async fetchTodoItems(todo) { this.todoItems = ( await DataStore.query(TodoItem, c => c.status("eq", TodoStatus.WAITING)) ).ﬁlter(item => item.todo && item.todo.id === todo.id); },

Slide 37

Slide 37 text

Ϟσϧͷߋ৽ͷϦΞϧλΠϜ௨஌ %BUB4UPSFPCTFSWFͷୈҰҾ਺ʹϞσϧΛΘͨ͠ ߋ৽͕͋ͬͨ৔߹ͷίʔϧόοΫΛઃఆ͢Δ DataStore.observe(Todo).subscribe(() => { this.fetchTodos(); });

Slide 38

Slide 38 text

Ϟσϧͷߋ৽ await DataStore.save( TodoItem.copyOf(todoItem, updated => { updated.status = TodoStatus.DONE; }) ); ϞσϧͷΠϯελϯε͸ΠϛϡʔλϒϧͳͷͰɺ ίϐʔ͠Πϯελϯεͷ஋Λ্ॻ͖ͨ͠΋ͷΛ อଘ͢Δ͜ͱͰߋ৽͢Δ

Slide 39

Slide 39 text

Ϟσϧͷσʔλͷ࡟আ await DataStore.delete(Todo, Predicates.ALL); %BUB4UPSFEFMFUFϝιουʹϞσϧΛ ౉͢͜ͱͰ࡟আ͢Δ

Slide 40

Slide 40 text

஫ҙ఺

Slide 41

Slide 41 text

ϩʔΧϧσʔλͷΫϦΞ async logout({ commit }) { await DataStore.clear(); } ϩάΞ΢τ࣌ʹϩʔΧϧσʔλΛΫϦΞ͢Δඞཁ ͕͋Δɻ ΫϦΞ͠ͳ͍ͱผͷϢʔβʔͰϩάΠϯͨ͠৔߹ ʹɺϩʔΧϧσʔλ͕ࠞࡏͯ͠͠·͏

Slide 42

Slide 42 text

Ϣʔεέʔε

Slide 43

Slide 43 text

Ϣʔεέʔε wϦΞϧλΠϜߋ৽͕ඞཁͳΞϓϦ wήʔϜɺνϟοτ wωοτϫʔΫ͕ෆ҆ఆͳ৔ॴͰ࢖͏ ΞϓϦ

Slide 44

Slide 44 text

No content