Vue.js + TypeScript + Firebase

73b0a25ed03f649ec63ded82ce4ac7cb?s=47 nunulk
January 19, 2019

Vue.js + TypeScript + Firebase

73b0a25ed03f649ec63ded82ce4ac7cb?s=128

nunulk

January 19, 2019
Tweet

Transcript

  1. Vue.js + Firebase + TypeScript Ͱ ϦΞϧλΠϜνϟοτ nunulk #ReBuildCamp

  2. Firebase • Google ͕ఏڙ͢Δ mBaaS • Cloud Firestore (Beta), Cloud

    Storage, Cloud Functions, A/B Testing, Cloud Messaging
  3. ࢖ٕͬͨज़ • Vue.js: 2.5.22 • TypeScript: 3.2.4 • Firebase: 0.3.7

    • Element: 2.4.11
  4. ೝূ͕ඞཁͳύεͷࢦఆ routes: [ { path: '/', name: 'home', component: Home,

    meta: { requiresAuth: true } },
  5. ϛυϧ΢ΣΞ router.beforeEach((to, from, next) => { const requiresAuth = to.matched.some(record

    => record.meta.requiresAuth) if (!requiresAuth) { next() } else { firebase.auth().onAuthStateChanged(function (user) { if (user) { next() } else { next({ path: '/signin', query: { redirect: to.fullPath } })
  6. Component export default class ChatBoard extends Vue { user: User

    = { id: null, email: '', avatar_image_url: '' } participants: User[] = [] messages: Message[] = [] message: Message = {
 room_id,
 sender_id: null,
 content: ‘',
 created_at: null,
 }
  7. Component created(): void { const fireUser = firebase.auth().currentUser; if (!fireUser)

    { return; } this.user.id = fireUser.uid; this.user.email = fireUser.email; db.collection('users').doc(this.user.id).get()
 .then((doc) => {})
  8. Component db.collection('messages') .onSnapshot((snapshot) => { const changes = snapshot.docChanges() if

    (!changes) { return } changes.forEach((change) => { if (change.type === 'added') { const message = { room_id: change.doc.data().room_id, sender_id: change.doc.data().sender_id, content: change.doc.data().content, created_at: this.timestamp2String(change.doc.data().created_at) }; this.addMessageData(message); }
  9. σϞ