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/JHIUJO'VLVPLB
   W@GVLVPLB
   /VYUKTͱ

   'JSFCBTFͰ

   8FCΞϓϦέʔγϣϯ։ൃ
   

   View Slide

2. diffeasy. inc 2
   ೑೑͏ͲΜ'JSFCBTF
   7VF
   Թઘ
   ಡॻ
   (PMBOH
   3VCZ
   ($1
   ϒϩοΫνΣʔϯ
   إೱ͍
   גࣜձࣾEJ⒎FBTZ σΟϑΟʔδʔ
   
   औక໾$50
   ੢෢࢙ ʹ͚ͨ͠͠
   
   !@UBLFTIJ@
   EPDLFS
   /VYU
   

   View Slide

3. diffeasy. inc 3
   ੈքதͷlΉ͔͍ͣ͠zΛ؆୯ʹ
   NBLFEJ⒏DVMUUIJOHTFBTZ
   

   View Slide

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

   View Slide

5. diffeasy. inc 5
   

   View Slide

6. diffeasy. inc 6
   7VFKT
   8FCαʔόʔ
   OHJOY QVNB 3BJMT
   3VCZ
   %#αʔόʔ
   .Z42-
   ϑϩϯτΤϯυ όοΫΤϯυ
   

   View Slide

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

   View Slide

8. diffeasy. inc 8
   

   View Slide

9. diffeasy. inc 9
   

   View Slide

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

    View Slide

11. diffeasy. inc 11
    ͜ΜͳWebΞϓϦ

    ͭͬͯ͘ݟ·ͨ͠
    

    View Slide

12. diffeasy. inc 12
    

    View Slide

13. diffeasy. inc 13
    ʔ४උ
    

    View Slide

14. diffeasy. inc 14
    ʔ४උ
    

    View Slide

15. diffeasy. inc 15
    ʔ४උ
    

    View Slide

16. diffeasy. inc 16
    ʔ४උ
    

    View Slide

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

    View Slide

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

    View Slide

19. diffeasy. inc 19
    º
    

    View Slide

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

    View Slide

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
    

    View Slide

22. diffeasy. inc 22
    ϩάΠϯೝূ
    auth.signInWithEmailAndPassword

    (data['email'], data['password'])
    .then((user) => {
    // ϩάΠϯ੒ޭ
    commit('setUser', user)})
    .catch((error) => {
    ɹ// Τϥʔॲཧ
    })
    

    View Slide

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()})
    })
    

    View Slide

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'))
    })
    }
    

    View Slide

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)
    }
    }
    

    View Slide

26. diffeasy. inc 26
    DETBNQMF
    OQNSVOHFOFSBUF
    DE
    pSFCBTFEFQMPZ
    HostingαʔόʔʹσϓϩΠ
    {
    "hosting": {
    "public": "sample/dist"
    }
    }
    pSFCBTFKTPO
    

    View Slide

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
    

    View Slide

28. diffeasy. inc 28
    ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ
    

    View Slide