Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Firebaseで 楽しく Webアプリ開発

Firebaseで 楽しく Webアプリ開発

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

TakeshiNishi

July 20, 2019
Tweet

More Decks by TakeshiNishi

Other Decks in Technology

Transcript

  1. #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ɾɾɾ औಘͨ͠BQJLFZͳͲΛFOWʹهࡌ
  2. ᶃϢʔβʔೝূ"VUIFOUJDBUJPO firebase .auth() .createUserWithEmailAndPassword(email, password) firebase .auth() .signInWithEmailAndPassword(email, password) 

    ΞΧ΢ϯτొ࿥  ϩάΠϯ firebase.auth().currentUser  ϩάΠϯதΞΧ΢ϯτऔಘ /VYUKTͱ'JSFCBTFͷ࿈ܞ #edayfuk #fukuokafirebase
  3. ᶄϦΞϧλΠϜσʔλϕʔε$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
  4. ᶄϦΞϧλΠϜσʔλϕʔε$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
  5. ᶅετϨʔδ$MPVE4UPSBHF const storage = firebase.storage() const storageRef = storage.ref() const

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

    avatarUrl = await storageRef .child('avatar/' + user.avatar) .getDownloadURL()  ετϨʔδͷϑΝΠϧΛμ΢ϯϩʔυ /VYUKTͱ'JSFCBTFͷ࿈ܞ #edayfuk #fukuokafirebase
  7. ᶆϗεςΟϯά)PTUJOH  pSFCBTFUPPMTΛΠϯετʔϧ $ yarn global add firebase-tools $ firebase

    init  pSFCBTFϓϩδΣΫτͷॳظԽ /VYUKTͱ'JSFCBTFͷ࿈ܞ #edayfuk #fukuokafirebase
  8. 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