Firebaseで 楽しく Webアプリ開発

FUKUOKA Engineers Day 2019 ~Summer~コミュニティスポンサーFukuoka.Firebaseの紹介スライドです。

Transcript

1. 'JSFCBTFͰ
   ָ͘͠
   8FCΞϓϦ։ൃ #edayfuk #fukuokafirebase
2. ੢
   ෢࢙ גࣜձࣾEJ⒎FBTZ
 औక໾$50 !@UBLFTIJ@ 'JSFCBTF 7VF 3VCZ ($1 ϒϩοΫνΣʔϯ EPDLFS /VYU Թઘ ϥϯχϯά Ωϟϯϓ ম೑
3. 8IBU
   JT
   'JSFCBTF #edayfuk #fukuokafirebase Google͕ఏڙ͢ΔBaaS(Backend as a Service) 2011೥ʹFirebase, Inc.ʹΑͬͯ։ൃ 2014೥ʹGoogleʹങऩ
4. όοΫΤϯυ ϑϩϯτΤϯυ #edayfuk #fukuokafirebase 8IBU
   JT
   'JSFCBTF
5. #edayfuk #fukuokafirebase 8IBU
   JT
   'JSFCBTF
6. #edayfuk #fukuokafirebase 8IBU
   JT
   'JSFCBTF
7. #edayfuk #fukuokafirebase 8IBU
   JT
   'JSFCBTF
8. 8IBU
   JT
   'JSFCBTF
10. "CPVU
    'VLVPLB'JSFCBTF #edayfuk #fukuokafirebase ෱ԬͰ΋FirebaseΛ੝Γ্͍͛ͨʂ
 Firebase࢖ͬͯΈ͍ͨɺҰॹʹษڧ͍ͨ͠ͱ͍͏ؾ࣋ͪΛେࣄʹʂ
11. Staff of Fukuoka.Firebase... #edayfuk #fukuokafirebase #fukuokafirebase
12. LTձ΍΋͘΋͘ձΛ։࠵ #edayfuk #fukuokafirebase
13. LTձ΍΋͘΋͘ձΛ։࠵ #edayfuk #fukuokafirebase
14. #edayfuk #fukuokafirebase
15. Advance questionnaire
16. 'JSFCBTF
    ͬͯԿʁ
    'JSFCBTF৮ͬͯΈͨʙʂ
    'JSFCBTF࢖ͬͯര଎։ൃͯ͠Έͨʙʂʂ
    ۀ຿Ͱ'JSFCBTF࢖ͬͯΈΑ͏͔ͳʙʂʂʂ
    The purpose of Fukuoka.Firebase...
17. Fukuoka.Firebase http://ur0.link/J3V6 Firebase Japan User Group http://ur0.link/Rfym Communication Fukuoka.Firebase... #edayfuk #fukuokafirebase
18. 'JSFCBTFͰ
    8FCΞϓϦ։ൃ
    ΍ͬͯΈΑ͏ʂ #edayfuk #fukuokafirebase
19. 'JSFCBTFͰ8FCΞϓϦ։ൃ wϦΞϧλΠϜνϟοτΞϓϦ
    wϝʔϧύεϫʔυೝূ
    wϓϩϑΟʔϧը૾Ξοϓϩʔυ #edayfuk #fukuokafirebase
20. ·ͣ͸'JSFCBTFͷ༻ҙ #edayfuk #fukuokafirebase
21. #edayfuk #fukuokafirebase ϑϩϯτΤϯυ
    ͸/VYUKTΛར༻
22. #edayfuk #fukuokafirebase $ 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ɾɾɾ औಘͨ͠BQJ
    LFZͳͲΛFOW
    ʹهࡌ
23. ᶃϢʔβʔೝূ
    
    "VUIFOUJDBUJPO Firebase Authentication ʹϢʔβʔೝূͷ࢓૊Έ͕ఏڙ /VYUKTͱ'JSFCBTFͷ࿈ܞ #edayfuk #fukuokafirebase
24. ᶃϢʔβʔೝূ
    
    "VUIFOUJDBUJPO firebase .auth() .createUserWithEmailAndPassword(email, password) firebase .auth() .signInWithEmailAndPassword(email, password) 
    ΞΧ΢ϯτొ࿥ 
    ϩάΠϯ firebase.auth().currentUser 
    ϩάΠϯதΞΧ΢ϯτऔಘ /VYUKTͱ'JSFCBTFͷ࿈ܞ #edayfuk #fukuokafirebase
25. ᶄϦΞϧλΠϜσʔλϕʔε
    
    $MPVE
    'JSFTUPSF Vuex VuexFire Firestore /VYUKTͱ'JSFCBTFͷ࿈ܞ #edayfuk #fukuokafirebase
26. ᶄϦΞϧλΠϜσʔλϕʔε ͭͷσʔλϕʔε͕ఏڙ͞Ε͍ͯΔ 3FBMUJNF
    %BUBCBTF $MPVE
    'JSFTUPSF ʻ ΫΤϦͷॊೈੑ
    ιʔτͷॊೈੑ બ୒ /VYUKTͱ'JSFCBTFͷ࿈ܞ #edayfuk #fukuokafirebase
27. ᶄϦΞϧλΠϜσʔλϕʔε
    
    $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 #fukuokafirebase
28. ᶄϦΞϧλΠϜσʔλϕʔε
    
    $MPVE
    'JSFTUPSF 
    σʔλొ࿥
    
    ొ࿥͞ΕͨσʔλΛ֬ೝ /VYUKTͱ'JSFCBTFͷ࿈ܞ #edayfuk #fukuokafirebase
29. ᶄϦΞϧλΠϜσʔλϕʔε
    
    $MPVE
    'JSFTUPSF const messagesRef = db.collection(‘messages’) export const state = () => ({ messages: [], }) await bindFirebaseRef( 'messages', messagesRef .where('pairUid', '==', pairUid) .orderBy('time', 'desc') ) 
    σʔλݕࡧ /VYUKTͱ'JSFCBTFͷ࿈ܞ #edayfuk #fukuokafirebase
30. ᶄϦΞϧλΠϜσʔλϕʔε
    
    $MPVE
    'JSFTUPSF const messagesRef = db.collection(‘messages’) await messagesRef .doc(id) .update({ text: data.text }) 
    σʔλߋ৽ /VYUKTͱ'JSFCBTFͷ࿈ܞ #edayfuk #fukuokafirebase
31. ᶅετϨʔδ
    
    $MPVE
    4UPSBHF const storage = firebase.storage() const storageRef = storage.ref() const avatarRef = storageRef .child('avatar/' + data.name) await avatarRef.put(data.file) 
    ετϨʔδʹϑΝΠϧΛอଘ /VYUKTͱ'JSFCBTFͷ࿈ܞ #edayfuk #fukuokafirebase
32. ᶅετϨʔδ
    
    $MPVE
    4UPSBHF 
    ετϨʔδʹϑΝΠϧΛอଘ
    
    ϑΝΠϧΛ֬ೝ /VYUKTͱ'JSFCBTFͷ࿈ܞ #edayfuk #fukuokafirebase
33. ᶅετϨʔδ
    
    $MPVE
    4UPSBHF const storage = firebase.storage() const storageRef = storage.ref() const avatarUrl = await storageRef .child('avatar/' + user.avatar) .getDownloadURL() 
    ετϨʔδͷϑΝΠϧΛμ΢ϯϩʔυ /VYUKTͱ'JSFCBTFͷ࿈ܞ #edayfuk #fukuokafirebase
34. ᶆϗεςΟϯά
    
    )PTUJOH  pSFCBTFUPPMTΛΠϯετʔϧ $ yarn global add firebase-tools $ firebase init  pSFCBTFϓϩδΣΫτͷॳظԽ /VYUKTͱ'JSFCBTFͷ࿈ܞ #edayfuk #fukuokafirebase
35. ᶆϗεςΟϯά
    
    )PTUJOH  )PTUJOHΛબ୒ /VYUKTͱ'JSFCBTFͷ࿈ܞ #edayfuk #fukuokafirebase
36. ᶆϗεςΟϯά
    
    )PTUJOH  ࡞੒ͨ͠ϓϩδΣΫτΛબ୒ YYYYYYY YYYYYYY YYYYYYYYYYYYYYY YYYYYYY YYYYYYYYYYYYYYY YYYYYYY /VYUKTͱ'JSFCBTFͷ࿈ܞ #edayfuk #fukuokafirebase
37. ᶆϗεςΟϯά
    
    )PTUJOH  σϓϩΠ $ firebase deploy /VYUKTͱ'JSFCBTFͷ࿈ܞ #edayfuk #fukuokafirebase
38. ᶆϗεςΟϯά
    
    )PTUJOH  'JSFCBTFͷϗεςΟϯάʹ
 ɹσϓϩΠ͞ΕΔ /VYUKTͱ'JSFCBTFͷ࿈ܞ #edayfuk #fukuokafirebase
39. wϑϩϯτΤϯυͷ։ൃͷΈͰɺϢʔβʔೝূɺϦΞϧ λΠϜσʔλϕʔεɺετϨʔδ΁ͷϑΝΠϧอଘͳ ͲΞϓϦʹඞཁͳػೳʂ
    w؆୯ͳνϟοτΞϓϦ΍50%0ΞϓϦϨϕϧͰ͋Ε͹ े෼ͳػೳɻ
    wΦϑϥΠϯͰ։ൃͰ͖ͳ͍ɻ
    ։ൃ؀ڥͲ͏͢Δ͔ʁ
    w࢖͍Ͳ͜Ζ͸৻ॏʹݕ౼ʂҰ෦෼ʹར༻ͳͲ΋͋Γɻ 'JSFCBTF࣮ࡍͲ͏ͳͷʁ #edayfuk #fukuokafirebase
40. wΫΤϦ͕ශऑ
    ✴03ݕࡧෆՄɻΞϓϦͰΫΤϦ݁ՌΛ݁߹ɻ
    ✴ൣғൺֱϑΟϧλ  ౳ ͕͋Δ৔߹ɺ࠷ॳͷฒ΂ ସ͑͸ಉ͡ϑΟʔϧυͰߦ͏ɻ citiesRef .where("population", ">", 100000) .orderBy("population") 'JSFCBTF࣮ࡍͲ͏ͳͷʁ #edayfuk #fukuokafirebase
41. ✴લํҰகݕࡧ͸Մೳɻ෦෼ҰகɺޙํҰகෆՄɻ ref.collection('user') .orderBy('name') .startAt('੢') .endAt('੢'+'\uf8ff') 'JSFCBTF࣮ࡍͲ͏ͳͷʁ #edayfuk #fukuokafirebase
42. 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 #fukuokafirebase
43. w'JSFCBTFͷઃఆΛؒҧ͑ͯ࣌ؒͰສԁҎ্੥ٻ
 ͞Εͨྫ΋ɾɾɾ 'JSFCBTF࣮ࡍͲ͏ͳͷʁ #edayfuk #fukuokafirebase
44. #edayfuk #fukuokafirebase Firebase࢖ͬͯΈ͍ͨํɺ͢Ͱʹ࢖͍ͬͯΔํɺ ͥͻ͝ࢀՃ͍ͩ͘͞ʂ ձ৔Λఏڙͯ͘͠ΕΔํɺ ͥͻ͝ڠྗ͓ئ͍͠·͢ʂ #fukuokafirebase