Firebase+Vue.jsで作ったチャットをデプロイ

by Takayuki

Slide 1

Slide 1 text

Firebase+Vue.jsで࡞ͬͨ νϟοτΛデプϩΠ

Slide 2

Slide 2 text

1 ձࣾ঺հɾࣗݾ঺հ Agenda 2 Firebase Realtime Databaseͱ͸ 3 νϟοτͷ࡞Γํ 4 ࣮૷ɾσϓϩΠํ๏ 5 DEMO

Slide 3

Slide 3 text

1 ձࣾ঺հɾࣗݾ঺հ

Slide 4

Slide 4 text

4 ࣗݾ঺հ ◆໊લ ླ໦ ޹೭(Suzuki Takayuki) ◆ࣗݾ঺հ ɾ1990೥ɺਆಸ઒ݝੜ·Εɻ ɾࣾձਓʹͳ͔ͬͯΒɺϓϩάϥϛϯάΛ࢝ΊΔɻ ɾ2015೥ʹϑϧεϐʔυʹೖࣾ͠ɺ2017೥ʹϑϦʔϥ ϯεΛ΍ͬͨޙʹ2017೥11݄ʹԭೄͰىۀɻ ◆झຯ ίεϓϨɺԻָϥΠϒɺϚϥιϯେձʹग़Δɺ໺ٿ؍ ઓ ◆Twitter @kanbo0605

Slide 5

Slide 5 text

Slide 6

Slide 6 text

6 ࣗࣾWebαʔϏεͷ։ൃ ɾαʔϏε໊ Tadoru ɾγεςϜ֓ཁ Ϋϥ΢υιʔγϯά ΫϨδοτܾࡁ ͳͲ ɾ࢖͍ͬͯΔٕज़ ݴޠ : PHP,JavaScript ϑϨʔϜϫʔΫ: laravel5,Nuxt.jsͳͲ

Slide 7

Slide 7 text

2 Firebase Realtime Databaseͱ͸

Slide 8

Slide 8 text

8 Firebase Realtime Databaseͱ͸ https://firebase.google.com/docs/database/?hl=ja NoSQL Ϋϥ΢υ σʔλϕʔεͰσʔλͷอ؅ͱಉظΛߦ͏͜ͱ͕Ͱ ͖·͢ɻσʔλ͸͢΂ͯͷΫϥΠΞϯτʹΘͨͬͯϦΞϧλΠϜͰಉ ظ͞ΕɺΞϓϦ͕ΦϑϥΠϯʹͳͬͯ΋Ҿ͖ଓ͖࢖༻Ͱ͖·͢ɻ Ϋϥ΢υϗετܕσʔλϕʔεͰ͢ɻσʔλ͸ JSON ͱͯ͠อଘ͞ Εɺ઀ଓ͞Ε͍ͯΔ͢΂ͯͷΫϥΠΞϯτͱϦΞϧλΠϜͰಉظ͞Ε ·͢ɻiOSɺAndroidɺJavaScript SDK Λ࢖༻ͯ͠Ϋϩεϓϥοτ ϑΥʔϜ ΞϓϦΛߏஙͨ͠৔߹ɺ͢΂ͯͷΫϥΠΞϯτ͕ɺ1ͭͷ Realtime Database ΠϯελϯεΛڞ༗ͯ͠ɺ࠷৽ͷσʔλʹΑΔߋ ৽Λࣗಈతʹड৴͠·͢ɻ

Slide 9

Slide 9 text

9 Firebase Realtime Databaseͱ͸ ֊૚ߏ଄ͰݟΕΔ

Slide 10

Slide 10 text

1 0 Firebase Realtime Databaseͱ͸

Slide 11

Slide 11 text

3 Firebase Hostingͱ͸

Slide 12

Slide 12 text

1 2 Firebase Hostingͱ͸ https://firebase.google.com/docs/hosting/ Firebase Hosting ͸ɺ΢ΣϒΞϓϦɺ੩తίϯςϯπɺಈతίϯςϯ π޲͚ͷߴ଎Ͱ҆શੑͷߴ͍ϗεςΟϯάΛఏڙ͠·͢ɻ Firebase Hosting ͸σϕϩούʔ޲͚ͷɺຊ൪؀ڥϨϕϧͷ΢Σϒ ί ϯςϯπ ϗεςΟϯάͰ͢ɻ

Slide 13

Slide 13 text

1 3 Firebase Hostingͱ͸ https://firebase.google.com/docs/hosting/

Slide 14

Slide 14 text

4 ࣮૷ɾσϓϩΠํ๏

Slide 15

Slide 15 text

1 5 FirebaseͷηοτΞοϓ https://cr-vue.mio3io.com/tutorials/firebase.html ϓϩδΣΫτΛ࡞੒͢Δ ϓϩδΣΫτ໊Λೖྗͯ͠ɺ ೔ຊϦʔδϣϯΛબ୒͢Δ

Slide 16

Slide 16 text

1 6 FirebaseͷAuth(Twitterͷઃఆ) https://cr-vue.mio3io.com/tutorials/firebase.html ࠓճ͸TwiterೝূΛબ୒

Slide 17

Slide 17 text

1 7 FirebaseͷAuth(Twitterͷઃఆ) https://cr-vue.mio3io.com/tutorials/firebase.html ίʔϧόοΫURLΛίϐʔ ͢Δ

Slide 18

Slide 18 text

1 8 FirebaseͷAuth(Twitterͷઃఆ) https://cr-vue.mio3io.com/tutorials/firebase.html Twitterͷ։ൃը໘ͰίʔϧόοΫ URLΛઃఆ͢Δ

Slide 19

Slide 19 text

1 9 Vue.jsͰFirebaseΛ࢖͏ https://cr-vue.mio3io.com/tutorials/firebase.html $ npm install firebase import firebase from ‘firebase' Ͱ ಡΈࠐΉ

Slide 20

Slide 20 text

2 0 Vue.jsͰFirebaseΛ࢖͏ https://cr-vue.mio3io.com/tutorials/firebase.html Firebase ͷʮAuthenticationʯϖʔδͰ࣍ͷΑ͏ͳίʔυ͕දࣔ͞ΕΔͷͰɺషΓ෇͚Δ JSΛίϐʔ͢Δ

Slide 21

Slide 21 text

2 1 Vue.jsͰFirebaseΛ࢖͏ https://cr-vue.mio3io.com/tutorials/firebase.html

Slide 22

Slide 22 text

2 2 Vue.jsͰFirebaseΛ࢖͏ https://cr-vue.mio3io.com/tutorials/firebase.html main.js

Slide 23

Slide 23 text

2 3 Vue.jsͰFirebaseΛ࢖͏ https://cr-vue.mio3io.com/tutorials/firebase.html App.vue

Slide 24

Slide 24 text

2 4 σϓϩΠ https://qiita.com/gupuru/items/25a6722f6f802d3a5250

Slide 25

Slide 25 text

2 5 σϓϩΠ https://qiita.com/gupuru/items/25a6722f6f802d3a5250

Slide 26

Slide 26 text

5 DEMO

Slide 27

Slide 27 text

2 7 ߏ੒ ϩάΠϯ Firebase Hosting Firebase Auth ϩάΠϯ RealTimeDB ϝοηʔδΛૹ৴

Slide 28

Slide 28 text

2 8 DEMO https://myfirstfirebase-21fa3.firebaseapp.com/