Nuxt.jsとFirebaseでWebアプリケーション開発

 Nuxt.jsとFirebaseでWebアプリケーション開発

Vue Night in Fukuoka #1発表資料。
Nuxt.jsとFirebaseでWebアプリケーション開発。

2018/10/13追記。Nuxt v2とPWA対応について、Qiitaに記事を書きました。
「Nuxt v2とFirebase(CloudFirestore)でPWA対応Webアプリ開発」
https://qiita.com/_takeshi_24/items/3ee051e1db1b3e8da106

508d2cf1990876daf4797795a2d81bd2?s=128

TakeshiNishi

July 12, 2018
Tweet

Transcript

  1. diffeasy. inc 1 7VF/JHIUJO'VLVPLB W@GVLVPLB /VYUKTͱ
 'JSFCBTFͰ
 8FCΞϓϦέʔγϣϯ։ൃ

  2. diffeasy. inc 2 ೑೑͏ͲΜ'JSFCBTF 7VF Թઘ ಡॻ (PMBOH 3VCZ ($1

    ϒϩοΫνΣʔϯ إೱ͍ גࣜձࣾEJ⒎FBTZ σΟϑΟʔδʔ  औక໾$50 ੢෢࢙ ʹ͚ͨ͠͠  !@UBLFTIJ@ EPDLFS /VYU
  3. diffeasy. inc 3 ੈքதͷlΉ͔͍ͣ͠zΛ؆୯ʹ NBLFEJ⒏DVMUUIJOHTFBTZ

  4. diffeasy. inc 4 Google͕ఏڙ͍ͯ͠Δ BaaS(Backend as a Service)

  5. diffeasy. inc 5

  6. diffeasy. inc 6 7VFKT 8FCαʔόʔ OHJOY QVNB 3BJMT 3VCZ %#αʔόʔ

    .Z42- ϑϩϯτΤϯυ όοΫΤϯυ
  7. diffeasy. inc 7 7VFKT ϑϩϯτΤϯυ όοΫΤϯυ

  8. diffeasy. inc 8

  9. diffeasy. inc 9

  10. diffeasy. inc 10 ਎௕10cm৳ͼ͍ͨ͠ɺ ೥ऩ1,000ສཉ͍͠ʂʂ

  11. diffeasy. inc 11 ͜ΜͳWebΞϓϦ
 ͭͬͯ͘ݟ·ͨ͠

  12. diffeasy. inc 12

  13. diffeasy. inc 13 ʔ४උ

  14. diffeasy. inc 14 ʔ४උ

  15. diffeasy. inc 15 ʔ४උ

  16. diffeasy. inc 16 ʔ४උ

  17. diffeasy. inc 17 ʔϓϩδΣΫτ࡞੒ OQNJOTUBMMHpSFCBTFUPPMT pSFCBTFJOJU

  18. diffeasy. inc 18 )PTUJOHΛબ୒ 'JSFCBTFͰ࡞੒ͨ͠ϓϩδΣΫτΛબ୒ ʔϓϩδΣΫτ࡞੒

  19. diffeasy. inc 19 º

  20. diffeasy. inc 20 WVFJOJUOVYUDPNNVOJUZTUBSUFS UFNQMBUFTBNQMF DETBNQMF OQNJOTUBMMpSFCBTFWVFYpSFTBWF firebaseɺvuexfireϓϥάΠϯΛར༻

  21. diffeasy. inc 21 FirebaseϓϩδΣΫτʹ઀ଓ import firebase from 'firebase' var config

    = { apiKey: process.env.FB_API_KEY, authDomain: process.env.FB_AUTH_DOMAIN, databaseURL: process.env.FB_DATABASE_URL, projectId: process.env.FB_PROJECTID, storageBucket: process.env.FB_STORAGE_BUCKET, messagingSenderId: process.env.FB_MESSAGING_SENDER_ID } if (!firebase.apps.length) { firebase.initializeApp(config) } export default firebase
  22. diffeasy. inc 22 ϩάΠϯೝূ auth.signInWithEmailAndPassword
 (data['email'], data['password']) .then((user) => {

    // ϩάΠϯ੒ޭ commit('setUser', user)}) .catch((error) => { ɹ// Τϥʔॲཧ })
  23. diffeasy. inc 23 σʔλొ࿥ const db = firebase.database() const messagesRef

    = db.ref('messages') export const state = () => ({ messages: [], }) 
 export const actions = { addMessageRef : firebaseAction((context, data) => { messagesRef.push({uid: data.uid, text: data.text, time: 9999999999999 - Date.now()}) })
  24. diffeasy. inc 24 σʔλऔಘ const db = firebase.database() const messagesRef

    = db.ref('messages') export const state = () => ({ messages: [], }) 
 export const actions = { initMessages : firebaseAction(({ bindFirebaseRef }) => { bindFirebaseRef('messages', messagesRef.orderByChild('time')) }) }
  25. diffeasy. inc 25 ετϨʔδ΁ͷΞοϓϩʔυ const storage = firebase.storage() const storageRef

    = storage.ref() export const actions = { uploadAvatar (context, data) { var avatarRef = storageRef.child(data.name); avatarRef.put(data.file) } }
  26. diffeasy. inc 26 DETBNQMF OQNSVOHFOFSBUF DE pSFCBTFEFQMPZ HostingαʔόʔʹσϓϩΠ { "hosting":

    { "public": "sample/dist" } } pSFCBTFKTPO
  27. ©2018 diffeasy Corporation ιʔε͸ͪ͜Β https://github.com/tkc24/firebase-simple-chat 27 2018/10/13௥ه Nuxt v2ɺPWAରԠʹ͍ͭͯQiitaʹهࣄΛ͋͛·ͨ͠ɻ
 ʮNuxt

    v2ͱFirebase(CloudFirestore)ͰPWAରԠWebΞϓ Ϧ։ൃʯ
 https://qiita.com/_takeshi_24/items/ 3ee051e1db1b3e8da106
  28. diffeasy. inc 28 ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ