リアルタイムデータベース Cloud Firestore入門
by
Tetsuya Negishi
Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
ϦΞϧλΠϜσʔλϕʔε Cloud Firestoreೖ αϙʔλʔζColabษڧձ ࠜ؛ప
Slide 2
Slide 2 text
ࣗݾհ • ࠜ؛ప @wkurokishiw • ϥϯαʔζגࣜձࣾ • ओʹϑϩϯτ·ΘΓ୲ • ஜେֶେֶӃ18ଔ • ղੳ • ֎ࠃਓ؍ޫ͚ΞϓϦ։ൃ • WebϑϩϯτΤϯυڧΊ • Vue.js, Vuex, React, Redux
Slide 3
Slide 3 text
Ϋϥυιʔγϯά Lancers
Slide 4
Slide 4 text
Ϋϥυιʔγϯά Lancers
Slide 5
Slide 5 text
͡Ίʹ • ରऀ • FirestoreͰͲΜͳ͜ͱ͕Ͱ͖Δ͔Θ͔Βͳ͍ • FirebaseΛͬͯΔ͚ͲFirestoreͬͯͳ͍ • ΰʔϧ • FirestoreͰͲΜͳ͜ͱ͕Ͱ͖Δ͔ཧղ • εϥΠυαϯϓϧΞϓϦͷίʔυΛಡΊ͑Δ • ࠓ͞ͳ͍͜ͱ • ύϑΥʔϚϯε/
Slide 6
Slide 6 text
ΞδΣϯμ • Cloud Firestoreͱ • ηΩϡϦςΟϧʔϧ • έʔεελσΟɿ ෳ෦νϟοτΞϓϦͷDBɾϧʔϧઃܭ • Realtime Databaseͱͷൺֱ • ·ͱΊ
Slide 7
Slide 7 text
Cloud Firestoreͱ
Slide 8
Slide 8 text
Cloud Firestoreͱ • Firebase͕ఏڙ͢ΔNoSQLσʔλϕʔε
Slide 9
Slide 9 text
Cloud Firestoreͱ • Firebase͕ఏڙ͢ΔNoSQLσʔλϕʔε
Slide 10
Slide 10 text
Cloud Firestoreͱ • Firebase͕ఏڙ͢ΔNoSQLσʔλϕʔε
Slide 11
Slide 11 text
Firestoreͷಛ • JSONϥΠΫͳσʔλܗࣜ • ϦΞϧλΠϜʹσʔλΛอଘɾಉظ • αʔόϨε • ଞͷFirebaseαʔϏεͱڧྗͳ࿈ܞ
Slide 12
Slide 12 text
JSONϥΠΫͳσʔλܗࣜ • εΩʔϚϨε • ίϨΫγϣϯ/υΩϡϝϯτ • ίϨΫγϣϯ: υΩϡϝϯτΛ·ͱΊͨͷ • υΩϡϝϯτ: σʔλΛอ࣋͢Δͷ
Slide 13
Slide 13 text
JSONϥΠΫͳσʔλܗࣜ
Slide 14
Slide 14 text
JSONϥΠΫͳσʔλܗࣜ ίϨΫγϣϯ υΩϡϝϯτ
Slide 15
Slide 15 text
JSONϥΠΫͳσʔλܗࣜ υΩϡϝϯτ ίϨΫγϣϯ (αϒίϨΫγϣϯ)
Slide 16
Slide 16 text
JSONϥΠΫͳσʔλܗࣜ • ಡΈऔΓίϨΫγϣ ϯ/υΩϡϝϯτ୯Ґ • ԼͷαϒίϨΫγϣ ϯ·ͰҰʹऔΔ͜ ͱͰ͖ͳ͍
Slide 17
Slide 17 text
JSONϥΠΫͳσʔλܗࣜ • શσʔλΛऔಘ 1. countriesίϨΫγϣ ϯͷσʔλΛऔಘ
Slide 18
Slide 18 text
JSONϥΠΫͳσʔλܗࣜ • શσʔλΛऔಘ 1. countriesίϨΫγϣ ϯͷσʔλΛऔಘ 2. υΩϡϝϯτͦΕͧ Εʹରͯ͠citiesί ϨΫγϣϯͷσʔλ Λऔಘ
Slide 19
Slide 19 text
ϦΞϧλΠϜʹσʔλΛอଘɾಉظ add( {name: UK} )
Slide 20
Slide 20 text
ϦΞϧλΠϜʹσʔλΛอଘɾಉظ add( {name: UK} ) {name: UK} ΛՃ
Slide 21
Slide 21 text
{name: UK} ΛՃ ϦΞϧλΠϜʹσʔλΛอଘɾಉظ add( {name: UK} ) event:add {name: UK} event:add {name: UK}
Slide 22
Slide 22 text
αʔόϨε • αʔόཧෆཁ • ߴՄ༻ੑ/ߴεέʔϥϏϦςΟ • ΫϥΠΞϯτίʔυͷΈͰ݁
Slide 23
Slide 23 text
ଞͷFirebaseαʔϏεͱڧྗͳ࿈ܞ • Firebase Authentication • Ϣʔβೝূػೳ(ϝʔϧ, Google, Facebook, etc..) • ೝূͨ͠Ϣʔβͷݖݶઃఆ • Cloud Functions • JavaScriptͷؔΛΫϥυ্Ͱ࣮ߦ • Firestoreͷॻ͖ࠐΈHTTPϦΫΤετΛ τϦΨʔʹ࣮ͯ͠ߦ͢Δ͜ͱ͕Մೳ
Slide 24
Slide 24 text
ηΩϡϦςΟϧʔϧ
Slide 25
Slide 25 text
ϧʔϧ • ಡΈऔΓॻ͖ࠐΈͷݖݶΛઃఆ͢Δػೳ • Firebase AuthenticationͱΈ߹ΘͤΔ͜ͱ͕Մೳ • ೝূػೳ • Google, Facebook, TwitterͳͲ • ࡉ͔ͳόϦσʔγϣϯ • จࣈ੍ݶ • εΩʔϚఆٛ
Slide 26
Slide 26 text
ϧʔϧ • REST API or Firebaseͷίϯιʔϧ͔Βઃఆ
Slide 27
Slide 27 text
ͯ͢ͷಡΈऔΓɾॻ͖ࠐΈೝূඞਢ
Slide 28
Slide 28 text
ͯ͢ͷಡΈऔΓɾॻ͖ࠐΈೝূඞਢ ͓·͡ͳ͍
Slide 29
Slide 29 text
ͯ͢ͷಡΈऔΓɾॻ͖ࠐΈೝূඞਢ πϦʔͷ rootΛࣔ͢
Slide 30
Slide 30 text
ͯ͢ͷಡΈऔΓɾॻ͖ࠐΈೝূඞਢ ೝূͨ͠ΒಡΈऔΓɾ ॻ͖ࠐΈΛڐՄ
Slide 31
Slide 31 text
εΩʔϚఆٛ
Slide 32
Slide 32 text
εΩʔϚఆٛ nameͷཁૉ͕ඞਢ
Slide 33
Slide 33 text
έʔεελσΟɿ ෳ෦νϟοτΞϓϦͷ DBɾϧʔϧઃܭ
Slide 34
Slide 34 text
σϞ https://github.com/TetsuyaNegishi/simple-chat
Slide 35
Slide 35 text
DBઃܭ • rooms͕ෳ • Ұͭͷroomʹରͯ͠comment͕ෳ • ίϝϯτʹϢʔβͷใΛͨͤΔ
Slide 36
Slide 36 text
DBઃܭ - Խܕ rooms: { // collection roomId: { // document name: comments: { // collection commentId: { //document comment: user: { name:, id: } } } } }
Slide 37
Slide 37 text
DBઃܭ - Խܕ • userใԽ͢Δ • ϝϦοτ • ॻ͖ࠐΈָ͕ • ಡΈࠐΈ͕গͳ͍ • σϝϦοτ • userใͷ߹ੑ͕ อͯͳ͍ • userใ͕ rooms: { // collection roomId: { // document name: comments: { // collection commentId: { //document comment: user: { name:, id: } } } } }
Slide 38
Slide 38 text
DBઃܭ - ࢀরܕ • usersίϨΫγϣϯΛ ࢀর • ϝϦοτ • userใͷ߹ੑ • userใ͕؆ܿ • σϝϦοτ • ಡΈࠐΈճ͕૿Ճ • ॻ͖ࠐΈ͕ࡶ rooms: { // collection … commentId: { //document comment: user: { /users/userId} } … } users: { userId: {name:} }
Slide 39
Slide 39 text
ൺֱ ಡΈऔΓճ σʔλ߹ੑ ΫϥΠΞϯτί ʔυͷ؆ܿ͞ Խܕ গͳ͍ º ˓ ࢀরܕ ଟ͍ ˓ ˚ • ΫϥΠΞϯτଆͷίʔυΛγϯϓϧʹ͍ͨ͠ • ϢʔβͷใมԽ͠ͳ͍ͱԾఆ ࠾༻
Slide 40
Slide 40 text
ϧʔϧઃܭ • ಡΈऔΓ୭ͰͰ͖ΔΑ͏ʹ͍ͨ͠ɻ • ϧʔϜͷ࡞ίϝϯτͷॻ͖ࠐΈೝূඞਢɻ • ίϝϯτͷฤूࣗͷͷ͚ͩՄೳɻ • ϧʔϜͷআ, ฤूෆՄ
Slide 41
Slide 41 text
ϧʔϧઃܭ - roomsͷಡΈऔΓɾฤूݖݶ • rooms/{roomId} • read: ୭ͰOK • create: ೝূඞਢ • update, delete: ෆՄ
Slide 42
Slide 42 text
ϧʔϧઃܭ - commentsͷಡΈऔΓɾฤूݖݶ • rooms/{roomId}/comments/{commentId} • read: ୭ͰOK • create: ೝূඞਢ • update, delete:ޙड़
Slide 43
Slide 43 text
ϧʔϧઃܭ - commentsͷಡΈऔΓɾฤूݖݶ • rooms/{roomId}/comments/{commentId} • update, delete: ͕ࣗߘͨ͠ͷՄ
Slide 44
Slide 44 text
ΫϥΠΞϯτίʔυ - σʔλͷಡΈऔΓ
Slide 45
Slide 45 text
ΫϥΠΞϯτίʔυ - σʔλͷಡΈऔΓ commentsίϨΫγϣϯͷ υΩϡϝϯτ͕มߋ͞ΕΔͱ͕࣮ؔߦ
Slide 46
Slide 46 text
ΫϥΠΞϯτίʔυ - σʔλͷಡΈऔΓ Ҿʹ͞ΕΔσʔλϦετ
Slide 47
Slide 47 text
ΫϥΠΞϯτίʔυ - σʔλͷಡΈऔΓ change.type͕addedͷ߹ ը໘ʹө
Slide 48
Slide 48 text
Realtime Databaseͱͷൺֱ
Slide 49
Slide 49 text
Realtime Databaseͱ • Realtime Database • NoSQLσʔλϕʔε • ҰຕͷJSON • FirestoreΑΓઌʹϦϦʔε
Slide 50
Slide 50 text
ൺֱ • Realtime Database • ྉ͕͍ۚ҆(͜ͱ͕ଟ͍) • ·ͱΊͯσʔλΛऔಘ͢Δ͜ͱ͕༰қ • Cloud Firestore • σʔλͷཧ͕͍͢͠(αϒίϨΫγϣϯ) • ॊೈͳΫΤϦ • σʔλऔಘͷ݅Λࡉ͔͘ઃఆՄೳ • Realtime Database͔ΒڧԽ͞Ε͍ͯΔ
Slide 51
Slide 51 text
ྉۚ ແྉ ैྔ੍ 3FBMUJNF%BUBCBTF (#μϯϩʔυࡁΈ (#݄ (# 'JSFTUPSF %PDVNFOUTSFBE ສ , σʔλྔ ʹରͯ͠՝ۚ ಡΈऔΓճ ʹରͯ͠՝ۚ
Slide 52
Slide 52 text
ྉۚ 0.1KBͷσʔλ
Slide 53
Slide 53 text
ྉۚ 0.1KBͷσʔλ • Realtime Database • 0.1KBΛμϯϩʔυ • Firestore • 5ͭͷυΩϡϝϯτ Λreadͨ͠ͱΧϯτ
Slide 54
Slide 54 text
ϓϩμΫγϣϯڥʹద༻ͨ͠ͱ͖ͷͰ͖͝ͱ • 1ಡΈऔΓͰ1readΧϯτͱצҧ͍ • 3ສPV/ͷϖʔδʹFirestoreΛ༻ˠ੍ݶʹҾ͔͔ͬΔ
Slide 55
Slide 55 text
ϓϩμΫγϣϯڥʹద༻ͨ͠ͱ͖ͷͰ͖͝ͱ Firestore Realtime Database New Data New Data PVͷଟ͍ϖʔδ PVͷগͳ͍ϖʔδ • ͳΜͱ͔ແྉʹऩΊ͍ͨ • ಡΈऔΓΛࢄͤͯ͞ແྉʹऩΊΔ Cloud Functions
Slide 56
Slide 56 text
ϓϩμΫγϣϯڥʹద༻ͨ͠ͱ͖ͷͰ͖͝ͱ • Cloud Functions
Slide 57
Slide 57 text
ϓϩμΫγϣϯڥʹద༻ͨ͠ͱ͖ͷͰ͖͝ͱ • Cloud Functions σʔλ͕create͞ ΕΔ͜ͱΛࢹ
Slide 58
Slide 58 text
ϓϩμΫγϣϯڥʹద༻ͨ͠ͱ͖ͷͰ͖͝ͱ • Cloud Functions Realtime DatabaseʹσʔλՃ
Slide 59
Slide 59 text
ϓϩμΫγϣϯڥʹద༻ͨ͠ͱ͖ͷͰ͖͝ͱ ࣮ଌ ແྉ 3FBMUJNF%BUBCBTF .# (#݄ 'JSFTUPSF ສ ສ
Slide 60
Slide 60 text
·ͱΊ
Slide 61
Slide 61 text
·ͱΊ • FirestoreJSONϥΠΫͳσʔλܗࣜΛͬͨNoSQL • ΫϥΠΞϯτͷίʔυͷΈͰϦΞϧλΠϜʹ σʔλΛอଘɾಉظͰ͖Δ • ଞͷFirebaseαʔϏεͱΈ߹ΘͤΔ͜ͱͰ ߴͳ͜ͱՄೳ
Slide 62
Slide 62 text
Thank youʂ