Vue.js + TypeScript + Firebase

Transcript

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

   View Slide

2. Firebase
   • Google ͕ఏڙ͢Δ mBaaS
   • Cloud Firestore (Beta), Cloud Storage,
   Cloud Functions, A/B Testing, Cloud
   Messaging
   

   View Slide

3. ࢖ٕͬͨज़
   • Vue.js: 2.5.22
   • TypeScript: 3.2.4
   • Firebase: 0.3.7
   • Element: 2.4.11
   

   View Slide

4. ೝূ͕ඞཁͳύεͷࢦఆ
   routes: [
   {
   path: '/',
   name: 'home',
   component: Home,
   meta: { requiresAuth: true }
   },
   

   View Slide

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

   View Slide

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,

   }
   

   View Slide

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

   View Slide

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

   View Slide

9. σϞ
   

   View Slide