Firebaseで楽しく Webアプリ開発

by TakeshiNishi

Slide 1

Slide 1 text

'JSFCBTFͰ ָ͘͠ 8FCΞϓϦ։ൃ #edayfuk #fukuokaﬁrebase

Slide 2

Slide 2 text

੢෢࢙ גࣜձࣾEJ⒎FBTZ  औక໾$50 !@UBLFTIJ@ 'JSFCBTF 7VF 3VCZ ($1 ϒϩοΫνΣʔϯ EPDLFS /VYU Թઘ ϥϯχϯά Ωϟϯϓ ম೑

Slide 3

Slide 3 text

8IBUJT'JSFCBTF #edayfuk #fukuokaﬁrebase Google͕ఏڙ͢ΔBaaS(Backend as a Service) 2011೥ʹFirebase, Inc.ʹΑͬͯ։ൃ 2014೥ʹGoogleʹങऩ

Slide 4

Slide 4 text

όοΫΤϯυ ϑϩϯτΤϯυ #edayfuk #fukuokaﬁrebase 8IBUJT'JSFCBTF

Slide 5

Slide 5 text

#edayfuk #fukuokaﬁrebase 8IBUJT'JSFCBTF

Slide 6

Slide 6 text

#edayfuk #fukuokaﬁrebase 8IBUJT'JSFCBTF

Slide 7

Slide 7 text

#edayfuk #fukuokaﬁrebase 8IBUJT'JSFCBTF

Slide 8

Slide 8 text

8IBUJT'JSFCBTF

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

"CPVU'VLVPLB'JSFCBTF #edayfuk #fukuokaﬁrebase ෱ԬͰ΋FirebaseΛ੝Γ্͍͛ͨʂ  Firebase࢖ͬͯΈ͍ͨɺҰॹʹษڧ͍ͨ͠ͱ͍͏ؾ࣋ͪΛେࣄʹʂ

Slide 11

Slide 11 text

Staff of Fukuoka.Firebase... #edayfuk #fukuokaﬁrebase #fukuokaﬁrebase

Slide 12

Slide 12 text

LTձ΍΋͘΋͘ձΛ։࠵ #edayfuk #fukuokaﬁrebase

Slide 13

Slide 13 text

LTձ΍΋͘΋͘ձΛ։࠵ #edayfuk #fukuokaﬁrebase

Slide 14

Slide 14 text

#edayfuk #fukuokaﬁrebase

Slide 15

Slide 15 text

Advance questionnaire

Slide 16

Slide 16 text

'JSFCBTFͬͯԿʁ 'JSFCBTF৮ͬͯΈͨʙʂ 'JSFCBTF࢖ͬͯര଎։ൃͯ͠Έͨʙʂʂ ۀ຿Ͱ'JSFCBTF࢖ͬͯΈΑ͏͔ͳʙʂʂʂ The purpose of Fukuoka.Firebase...

Slide 17

Slide 17 text

Fukuoka.Firebase http://ur0.link/J3V6 Firebase Japan User Group http://ur0.link/Rfym Communication Fukuoka.Firebase... #edayfuk #fukuokaﬁrebase

Slide 18

Slide 18 text

'JSFCBTFͰ 8FCΞϓϦ։ൃ ΍ͬͯΈΑ͏ʂ #edayfuk #fukuokaﬁrebase

Slide 19

Slide 19 text

'JSFCBTFͰ8FCΞϓϦ։ൃ wϦΞϧλΠϜνϟοτΞϓϦ wϝʔϧύεϫʔυೝূ wϓϩϑΟʔϧը૾Ξοϓϩʔυ #edayfuk #fukuokaﬁrebase

Slide 20

Slide 20 text

·ͣ͸'JSFCBTFͷ༻ҙ #edayfuk #fukuokaﬁrebase

Slide 21

Slide 21 text

#edayfuk #fukuokaﬁrebase ϑϩϯτΤϯυ͸/VYUKTΛར༻

Slide 22

Slide 22 text

#edayfuk #fukuokaﬁrebase $ yarn add firebase vuexfire --save pSFCBTFɺWVFYpSFΛΠϯετʔϧ /VYUKTͱ'JSFCBTFͷ࿈ܞ FB_API_KEY=AIzaSyCLfAUɾɾɾ FB_AUTH_DOMAIN=wacha-ɾɾɾ.firebaseapp.com FB_DATABASE_URL=https://wacha-ɾɾɾ.firebaseio.com FB_PROJECTID=wacha-ɾɾɾ FB_STORAGE_BUCKET=wacha-ɾɾɾ.appspot.com FB_MESSAGING_SENDER_ID=3985ɾɾɾ औಘͨ͠BQJLFZͳͲΛFOWʹهࡌ

Slide 23

Slide 23 text

ᶃϢʔβʔೝূ"VUIFOUJDBUJPO Firebase Authentication ʹϢʔβʔೝূͷ࢓૊Έ͕ఏڙ /VYUKTͱ'JSFCBTFͷ࿈ܞ #edayfuk #fukuokaﬁrebase

Slide 24

Slide 24 text

ᶃϢʔβʔೝূ"VUIFOUJDBUJPO firebase .auth() .createUserWithEmailAndPassword(email, password) firebase .auth() .signInWithEmailAndPassword(email, password) ΞΧ΢ϯτొ࿥ ϩάΠϯ firebase.auth().currentUser ϩάΠϯதΞΧ΢ϯτऔಘ /VYUKTͱ'JSFCBTFͷ࿈ܞ #edayfuk #fukuokaﬁrebase

Slide 25

Slide 25 text

ᶄϦΞϧλΠϜσʔλϕʔε$MPVE'JSFTUPSF Vuex VuexFire Firestore /VYUKTͱ'JSFCBTFͷ࿈ܞ #edayfuk #fukuokaﬁrebase

Slide 26

Slide 26 text

ᶄϦΞϧλΠϜσʔλϕʔε ͭͷσʔλϕʔε͕ఏڙ͞Ε͍ͯΔ 3FBMUJNF%BUBCBTF $MPVE'JSFTUPSF ʻ ΫΤϦͷॊೈੑ ιʔτͷॊೈੑ બ୒ /VYUKTͱ'JSFCBTFͷ࿈ܞ #edayfuk #fukuokaﬁrebase

Slide 27

Slide 27 text

ᶄϦΞϧλΠϜσʔλϕʔε$MPVE'JSFTUPSF const messagesRef = db.collection(‘messages’) await messagesRef.add({ pairUid: data.pairUid, uid: data.uid, text: data.text, time: Date.now() }) σʔλొ࿥ /VYUKTͱ'JSFCBTFͷ࿈ܞ #edayfuk #fukuokaﬁrebase

Slide 28

Slide 28 text

ᶄϦΞϧλΠϜσʔλϕʔε$MPVE'JSFTUPSF σʔλొ࿥ొ࿥͞ΕͨσʔλΛ֬ೝ /VYUKTͱ'JSFCBTFͷ࿈ܞ #edayfuk #fukuokaﬁrebase

Slide 29

Slide 29 text

ᶄϦΞϧλΠϜσʔλϕʔε$MPVE'JSFTUPSF const messagesRef = db.collection(‘messages’) export const state = () => ({ messages: [], }) await bindFirebaseRef( 'messages', messagesRef .where('pairUid', '==', pairUid) .orderBy('time', 'desc') ) σʔλݕࡧ /VYUKTͱ'JSFCBTFͷ࿈ܞ #edayfuk #fukuokaﬁrebase

Slide 30

Slide 30 text

ᶄϦΞϧλΠϜσʔλϕʔε$MPVE'JSFTUPSF const messagesRef = db.collection(‘messages’) await messagesRef .doc(id) .update({ text: data.text }) σʔλߋ৽ /VYUKTͱ'JSFCBTFͷ࿈ܞ #edayfuk #fukuokaﬁrebase

Slide 31

Slide 31 text

ᶅετϨʔδ$MPVE4UPSBHF const storage = firebase.storage() const storageRef = storage.ref() const avatarRef = storageRef .child('avatar/' + data.name) await avatarRef.put(data.file) ετϨʔδʹϑΝΠϧΛอଘ /VYUKTͱ'JSFCBTFͷ࿈ܞ #edayfuk #fukuokaﬁrebase

Slide 32

Slide 32 text

ᶅετϨʔδ$MPVE4UPSBHF ετϨʔδʹϑΝΠϧΛอଘϑΝΠϧΛ֬ೝ /VYUKTͱ'JSFCBTFͷ࿈ܞ #edayfuk #fukuokaﬁrebase

Slide 33

Slide 33 text

ᶅετϨʔδ$MPVE4UPSBHF const storage = firebase.storage() const storageRef = storage.ref() const avatarUrl = await storageRef .child('avatar/' + user.avatar) .getDownloadURL() ετϨʔδͷϑΝΠϧΛμ΢ϯϩʔυ /VYUKTͱ'JSFCBTFͷ࿈ܞ #edayfuk #fukuokaﬁrebase

Slide 34

Slide 34 text

ᶆϗεςΟϯά)PTUJOH pSFCBTFUPPMTΛΠϯετʔϧ $ yarn global add firebase-tools $ firebase init pSFCBTFϓϩδΣΫτͷॳظԽ /VYUKTͱ'JSFCBTFͷ࿈ܞ #edayfuk #fukuokaﬁrebase

Slide 35

Slide 35 text

ᶆϗεςΟϯά)PTUJOH )PTUJOHΛબ୒ /VYUKTͱ'JSFCBTFͷ࿈ܞ #edayfuk #fukuokaﬁrebase

Slide 36

Slide 36 text

ᶆϗεςΟϯά)PTUJOH ࡞੒ͨ͠ϓϩδΣΫτΛબ୒ YYYYYYY YYYYYYY YYYYYYYYYYYYYYY YYYYYYY YYYYYYYYYYYYYYY YYYYYYY /VYUKTͱ'JSFCBTFͷ࿈ܞ #edayfuk #fukuokaﬁrebase

Slide 37

Slide 37 text

ᶆϗεςΟϯά)PTUJOH σϓϩΠ $ firebase deploy /VYUKTͱ'JSFCBTFͷ࿈ܞ #edayfuk #fukuokaﬁrebase

Slide 38

Slide 38 text

ᶆϗεςΟϯά)PTUJOH 'JSFCBTFͷϗεςΟϯάʹ  ɹσϓϩΠ͞ΕΔ /VYUKTͱ'JSFCBTFͷ࿈ܞ #edayfuk #fukuokaﬁrebase

Slide 39

Slide 39 text

wϑϩϯτΤϯυͷ։ൃͷΈͰɺϢʔβʔೝূɺϦΞϧ λΠϜσʔλϕʔεɺετϨʔδ΁ͷϑΝΠϧอଘͳ ͲΞϓϦʹඞཁͳػೳʂ w؆୯ͳνϟοτΞϓϦ΍50%0ΞϓϦϨϕϧͰ͋Ε͹ े෼ͳػೳɻ wΦϑϥΠϯͰ։ൃͰ͖ͳ͍ɻ։ൃ؀ڥͲ͏͢Δ͔ʁ w࢖͍Ͳ͜Ζ͸৻ॏʹݕ౼ʂҰ෦෼ʹར༻ͳͲ΋͋Γɻ 'JSFCBTF࣮ࡍͲ͏ͳͷʁ #edayfuk #fukuokaﬁrebase

Slide 40

Slide 40 text

wΫΤϦ͕ශऑ ✴03ݕࡧෆՄɻΞϓϦͰΫΤϦ݁ՌΛ݁߹ɻ ✴ൣғൺֱϑΟϧλ ౳ ͕͋Δ৔߹ɺ࠷ॳͷฒ΂ ସ͑͸ಉ͡ϑΟʔϧυͰߦ͏ɻ citiesRef .where("population", ">", 100000) .orderBy("population") 'JSFCBTF࣮ࡍͲ͏ͳͷʁ #edayfuk #fukuokaﬁrebase

Slide 41

Slide 41 text

✴લํҰகݕࡧ͸Մೳɻ෦෼ҰகɺޙํҰகෆՄɻ ref.collection('user') .orderBy('name') .startAt('੢') .endAt('੢'+'\uf8ff') 'JSFCBTF࣮ࡍͲ͏ͳͷʁ #edayfuk #fukuokaﬁrebase

Slide 42

Slide 42 text

wσʔλͷઃܭ͕େࣄ ඇਖ਼نԽ wϚΠάϨʔγϣϯେม ઌ΄ͲͷΞϓϦͷྫ ɾ"͞ΜͷҰཡදࣔ༻σʔλ ɾ#͞ΜͷҰཡදࣔ༻σʔλ JOEFYFE1BJS\  \VJE" UBSHFU# QBJS*E^ \VJE# UBSHFU" QBJS*E^ \VJE" UBSHFU$ QBJS*E^ \VJE$ UBSHFU" QBJS*E^ \VJE# UBSHFU$ QBJS*E^ ɾɾɾ 'JSFCBTF࣮ࡍͲ͏ͳͷʁ #edayfuk #fukuokaﬁrebase

Slide 43

Slide 43 text

w'JSFCBTFͷઃఆΛؒҧ͑ͯ࣌ؒͰສԁҎ্੥ٻ  ͞Εͨྫ΋ɾɾɾ 'JSFCBTF࣮ࡍͲ͏ͳͷʁ #edayfuk #fukuokaﬁrebase

Slide 44

Slide 44 text

#edayfuk #fukuokaﬁrebase Firebase࢖ͬͯΈ͍ͨํɺ͢Ͱʹ࢖͍ͬͯΔํɺ ͥͻ͝ࢀՃ͍ͩ͘͞ʂ ձ৔Λఏڙͯ͘͠ΕΔํɺ ͥͻ͝ڠྗ͓ئ͍͠·͢ʂ #fukuokaﬁrebase