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

Transcript

1. diffeasy. inc 1 7VF
   /JHIU
   JO
   '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Λ؆୯ʹ NBLF
   EJ⒏DVMU
   UIJOHT
   FBTZ
   
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 ʔ
    ϓϩδΣΫτ࡞੒ 
    OQN
    JOTUBMM
    H
    pSFCBTFUPPMT
    
    pSFCBTF
    JOJU
18. diffeasy. inc 18 )PTUJOHΛબ୒ 'JSFCBTFͰ࡞੒ͨ͠ϓϩδΣΫτΛબ୒ ʔ
    ϓϩδΣΫτ࡞੒
19. diffeasy. inc 19 º
20. diffeasy. inc 20 
    WVF
    JOJU
    OVYUDPNNVOJUZTUBSUFS UFNQMBUF
    TBNQMF
    
    DE
    TBNQMF
    
    OQN
    JOTUBMM
    pSFCBTF
    WVFYpSF
    TBWF
    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 
    DE
    TBNQMF
    
    OQN
    SVO
    HFOFSBUF
    
    DE
    
    
    pSFCBTF
    EFQMPZ 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 ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ