Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Vue.js + TypeScript + Firebase

nunulk
January 19, 2019

Vue.js + TypeScript + Firebase

nunulk

January 19, 2019
Tweet

More Decks by nunulk

Other Decks in Technology

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size 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 full-size 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 full-size 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 full-size slide