Slide 1
Slide 1 text
Vue.js + Firebase +
TypeScript Ͱ
ϦΞϧλΠϜνϟοτ
nunulk
#ReBuildCamp
Slide 2
Slide 2 text
Firebase
• Google ͕ఏڙ͢Δ mBaaS
• Cloud Firestore (Beta), Cloud Storage,
Cloud Functions, A/B Testing, Cloud
Messaging
Slide 3
Slide 3 text
ٕͬͨज़
• Vue.js: 2.5.22
• TypeScript: 3.2.4
• Firebase: 0.3.7
• Element: 2.4.11
Slide 4
Slide 4 text
ೝূ͕ඞཁͳύεͷࢦఆ
routes: [
{
path: '/',
name: 'home',
component: Home,
meta: { requiresAuth: true }
},
Slide 5
Slide 5 text
ϛυϧΣΞ
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 }
})
Slide 6
Slide 6 text
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,
}
Slide 7
Slide 7 text
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) => {})
Slide 8
Slide 8 text
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);
}
Slide 9
Slide 9 text
σϞ