今日から始めるAmplify DataStore

Transcript

1.  ੢ాক޾ ࠓ೔͔Β࢝ΊΔ"NQMJGZ
   %BUB4UPSF
   
2. ࣗݾ঺հ  ੢ా
   ক޾
   wαʔόʔαΠυΤϯδχΞ
   w"84ߏங
   ϞόΠϧΞϓϦͷόοΫΤϯυ"1*
   w"OESPJE /&8
   w޷͖ͳ"84αʔϏε
   w4
   &$4
   wۀ຿Ͱ࢖༻͢Δݴޠ
   w3VCZ
   (P
   1ZUIPO
   +BWB4DSJQU
   ,PUMJO
3. ࠓ೔࿩͢ࣄ  w"84
   "NQMJGZ
   %BUB4UPSF
   ͱ͸ʁ
   wجຊతͳ࢖͍ํ
   wར༻্ͷ஫ҙ఺
   wϢʔεέʔε
4.  AWS Amplify DataStore ͱ͸ʁ
5. "NQMJGZͱ͸  Amplifyͱ͸
6. "NQMJGZ 
7. "84
   "NQMJGZ
   $POTPMF  ϗεςΟϯά
8. "84
   "NQMJGZ
   $-*  $-*Ͱ"84ϦιʔεΛ࡞੒ͨ͠Γ ίʔυΛੜ੒͢Δ
9. "84
   "NQMJGZ
   -JCSBSJFT  ΞϓϦέʔγϣϯʹ૊Έࠐ·Ε ΔϥΠϒϥϦ܈
10. "NQMJGZ
    %BUB4UPSFͱ͸  Amplify DataStore ͱ͸
11. "NQMJGZ
    %BUB4UPSF
    ͷಛ௃  wந৅౓ͷߴ͍σʔλૢ࡞"1*
    wΦϑϥΠϯରԠ
    wσʔλڝ߹ͷ೉͠͞Λ͋Δఔ౓ܰݮ
12. %BUB4UPSF
    "1*  w%BUB4UPSFTBWF
    w%BUB4UPSFRVFSZ
    w%BUB4UPSFEFMFUF
    w%BUB4UPSFPCTFSWF
13. %BUB4UPSF
    "1*
    $36%  w%BUB4UPSFTBWF
    w%BUB4UPSFRVFSZ
    w%BUB4UPSFEFMFUF
    w%BUB4UPSFPCTFSWF ొ࿥ɾߋ৽ औಘ ࡟আ
14. %BUB4UPSF
    "1*
    ϦΞϧλΠϜߋ৽  w%BUB4UPSFTBWF
    w%BUB4UPSFRVFSZ
    w%BUB4UPSFEFMFUF
    w%BUB4UPSFPCTFSWF ߋ৽௨஌
15. "NQMJGZ
    %BUB4UPSF
    σʔλͷྲྀΕ 
16. "NQMJGZ
    %BUB4UPSF
    σʔλͷྲྀΕ 
17.  جຊతͳ࢖͍ํ
18. جຊతͳखॱ  w"NQMJGZ
    "QQ
    Λ࡞੒
    w(SBQI2-εΩʔϚΛ࡞੒
    wεΩʔϚ͔ΒίʔυΛࣗಈੜ੒ɹ
    wΞϓϦέʔγϣϯ΁ͷ૊ΈࠐΈ
19. ׬੒Πϝʔδ 
20. "NQMJGZ
    $-*
    ΛΠϯετʔϧ  $ npm install -g @aws-amplify/cli
21. "NQMJGZ
    "QQ
    Λ࡞੒  $ amplify init w"NQMJGZ
    ʹඞཁͳϑΝΠϧΛੜ੒
    wରԠ͍ͯ͠ΔϑϨʔϜϫʔΫΛݕ஌
22. "1*Λ࡞੒  $ amplify add api w௨৴ํࣜΛબͿ
    ࠓճ͸
    (SBQI2-
    wೝূํࣜΛબͿ
    ࠓճ͸
    $PHOJUP
    Λબ୒
23. (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 }
24. (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 } ྻڍܕ 50%0ຊମ 50%0ΞΠςϜ
25. (SBQI2-
    εΩʔϚ
    όοΫΤϯυ  type Todo @model @auth(rules: [{allow: owner}]){ NPEFM
    τϥϯεϑΥʔϜΛ͚ͭΔ͜ͱͰ
    
    "NQMJGZ
    ͕ඞཁͳ"84ϦιʔεΛ࡞੒͢Δͷʹ
    ඞཁͳίʔυΛੜ੒͢Δ
26. (SBQI2-
    εΩʔϚ
    ݖݶ؅ཧ  type Todo @model @auth(rules: [{allow: owner}]){ owner: String BVUI
    τϥϯεϑΥʔϜΛ͚ͭΔ͜ͱͰɺ͜ͷϞσϧ ʹΞΫηεͰ͖ΔݖݶΛ͚ͭΔ͜ͱ͕Ͱ͖Δ
    ࠓճ͸Ϟσϧͷ࡞੒ऀͷΈ͕͜ͷϞσϧΞΫηε
    Ͱ͖ΔΑ͏ʹ͍ͯ͠Δ
27. (SBQI2-
    εΩʔϚ
    ؔ࿈  type Todo @model @auth(rules: [{allow: owner}]){ items: [TodoItem] @connection(name: "TodoItems") type TodoItem @model { todo: Todo @connection(name: "TodoItems") DPOOFDUJPO
    τϥϯεϑΥʔϜͰϞσϧಉ࢜ͷ
    ؔ࿈Λઃఆ͢Δ͜ͱ͕Ͱ͖Δ
28. ϞσϧʹඞཁͳϑΝΠϧΛੜ੒  $ amplify codegen models w(SBQI2-ͷεΩʔϚ͔ΒΞϓϦέʔγϣϯ ͕࢖༻͢ΔϞσϧͷίʔυΛࣗಈੜ੒
    w(SBQI2-
    ͷίʔυΛࣗಈੜ੒
29. "84
    ؀ڥΛߏங  $ amplify push w"84ϦιʔεΛ࡞੒͠ɺόοΫΤϯυΛߏங ͢Δ
30. "NQMJGZ
    -JCSBSJFT
    ΛΠϯετʔϧ  $ yarn add aws-amplify aws-amplify-vue
31. $PHOJUP
    ೝূ  <template> <amplify-authenticator></amplify-authenticator> </template> ೝূํ๏ʹ
    $PHOJUP
    ΛબΜͰ͍ΔͷͰ
    $PHOJUP
    Ͱ
    ϩάΠϯग़དྷΔύʔπΛ૊ΈࠐΉ
    $PHOJUPೝূࡁΈͷϢʔβʔ͕σʔλΛొ࿥͢Δͱ
    BVUI
    τϥϯεϑΥʔϜͷޮՌͰίʔυΛ
    ॻ͔ͳͯ͘΋ࣗಈʹϞσϧอଘ࣌ʹઃఆ͞ΕΔ
32. Ϟσϧͷอଘ  await DataStore.save( new Todo({ title: this.todoTitle, status: TodoStatus.WAITING }) ); %BUB4UPSFTBWF
    ʹϞσϧͷΠϯελϯεΛ౉͠
    σʔλΛอଘ͠·͢
33. ؔ࿈ͷ͋ΔϞσϧͷอଘ  async createTodoItem(todo) { await DataStore.save( new TodoItem({ todo: todo }) ); DPOOFDUJPO
    τϥϯεϨʔλʔΛઃఆͨ͠
    ϑΟʔϧυʹؔ࿈͢ΔϞσϧͷΠϯελϯεΛ
    ઃఆͯ͠อଘ͢Δ
34. ϞσϧͷσʔλΛऔಘ  %BUB4UPSFRVFSZʹϞσϧΛ౉͠ɺ
    σʔλΛऔಘ͠·͢ async fetchTodos() { this.todos = await DataStore.query(Todo, Predicates.ALL); },
35. ϞσϧͷσʔλΛݕࡧ  %BUB4UPSFRVFSZʹୈҰҾ਺ʹϞσϧΛΘͨ͠
    ୈ̎Ҿ਺ʹݕࡧ৚݅Λࢦఆ͢Δ
    ্هྫ͸
    TUBUVT
    ͕
    8"*5*/(
    ͷ΋ͷ͚ͩΛ
    நग़͢Δ this.todoItems = await DataStore.query( TodoItem, c => c.status("eq", TodoStatus.WAITING) )
36. ؔ࿈ͷ͋ΔϞσϧͷσʔλΛݕࡧ  GJMUFSͰؔ࿈Ϟσϧͷ*%͕ઃఆ͞Ε͍ͯΔσʔλ͚ͩ ΛߜΓࠐΉ async fetchTodoItems(todo) { this.todoItems = ( await DataStore.query(TodoItem, c => c.status("eq", TodoStatus.WAITING)) ).filter(item => item.todo && item.todo.id === todo.id); },
37. Ϟσϧͷߋ৽ͷϦΞϧλΠϜ௨஌  %BUB4UPSFPCTFSWFͷୈҰҾ਺ʹϞσϧΛΘͨ͠
    ߋ৽͕͋ͬͨ৔߹ͷίʔϧόοΫΛઃఆ͢Δ DataStore.observe(Todo).subscribe(() => { this.fetchTodos(); });
38. Ϟσϧͷߋ৽  await DataStore.save( TodoItem.copyOf(todoItem, updated => { updated.status = TodoStatus.DONE; }) ); ϞσϧͷΠϯελϯε͸ΠϛϡʔλϒϧͳͷͰɺ
    ίϐʔ͠Πϯελϯεͷ஋Λ্ॻ͖ͨ͠΋ͷΛ
    อଘ͢Δ͜ͱͰߋ৽͢Δ
39. Ϟσϧͷσʔλͷ࡟আ  await DataStore.delete(Todo, Predicates.ALL); %BUB4UPSFEFMFUF
    ϝιουʹϞσϧΛ
    ౉͢͜ͱͰ࡟আ͢Δ
40.  ஫ҙ఺
41. ϩʔΧϧσʔλͷΫϦΞ  async logout({ commit }) { await DataStore.clear(); } ϩάΞ΢τ࣌ʹϩʔΧϧσʔλΛΫϦΞ͢Δඞཁ ͕͋Δɻ
    ΫϦΞ͠ͳ͍ͱผͷϢʔβʔͰϩάΠϯͨ͠৔߹ ʹɺϩʔΧϧσʔλ͕ࠞࡏͯ͠͠·͏
42.  Ϣʔεέʔε
43. Ϣʔεέʔε  wϦΞϧλΠϜߋ৽͕ඞཁͳΞϓϦ
    wήʔϜɺνϟοτ
    wωοτϫʔΫ͕ෆ҆ఆͳ৔ॴͰ࢖͏ ΞϓϦ