ACA Blog

ACA Blog


December 2018
M T W T F S S
« Nov    
 12
3456789
10111213141516
17181920212223
24252627282930
31  

Categories


How to create fast, scalable applications with VueJS and Firebase (part two)

Gert BangelsGert Bangels

In this second part of this blog post series I will share my learnings on creating a notes app. We will handle creating, updating and deleting notes and adding authentication. Please find part one of this blog post series here, in which we have set up our Firebase database and Vue application to display notes.

What are we creating?

Building upon our previous work, we will finalize our notes app.
Depending on your skill level, the following steps will take you approximately 20 to 45 minutes to complete.

Step 1: Adding notes

From our previous blog post we already have reading notes in place, but that required adding them manually in our Firestore database. Let’s create the functionality that enables us to add notes directly via the interface of our application. In Notes.vue:

The code above shows that we added a @click=”addDialogVisible = true” handler to our ‘Add note’ button, and registered it in our ‘data’ hook to be false as default.

We also added the dialog itself which will show based on this ‘addDialogVisible’ value. Inside this dialog we added an ElementUI form with title and content fields that have some validation rules, also specified in our data hook.

Now, when we press the button to add the note, we will pass the refs of our formname, which will return a Vue Object containing the fields that need validation.

Next up, let’s add our database query. Change the ‘addNoteForm’ method as follows:

After testing this by submitting a valid form, you will see the success message. But there is still a problem with showing the freshly added note in our table. By refreshing the page, it will show up.

The reason for this is because we made the database call to fetch the notes to be executed via the ‘created’ hook. This will fire once when we open the page, but not after we update our database. Let’s make that a little more flexible by moving the get query to a method instead:

If you look closely, I’ve also added an orderBy(‘date’) to the query. If we add another note now, it will update our table flawlessly adding the latest note to the bottom row. Should you want this the other way round, change orderBy(‘date’) to orderBy(‘date’, ‘desc’).

Step 2: Deleting notes

Deleting an item is pretty easy, but from a user experience perspective, shouldn’t be too easy either. That’s why I’ve decided to handle the delete after a ElementUI confirm message box.

First add an @click handler on the delete icon where we send the ID of the note we want to delete:

Please note that I also changed the slot-scope=”scope” tot slot-scope=”props” in the template tag to match with the rest of the props that get passed on to the table.

Next, let’s register the deleteNote method:

Et voilà! Deleting notes is now fully covered.

Step 3: Editing notes

Just like our delete, add an edit handler on the edit button along with a ‘editDialogVisible’ value like we added for the ‘addDialog’.

Next, we also need to create the dialog where the editing takes place:

Our data hook (we added editDialogVisible and editNoteRuleForm) then should be updated to:

Next to that, we also need to add an editNote method that fetches the data based on the note ID and populate the value of the editDialog fields:

So far, retrieving the note in our edit dialog is covered, but we still need the saveEditedNote method:

Here we set our database record to the new value specified by our validated form fields, an updated date is also passed. On success a ‘Note successfully edited’ message is shown.

That’s it! Our mission to create a basic CRUD application based on VueJS and Firebase is a fact!

Bonus step: Authentication

Ward asked me about Authentication functionality in our previous blog post, so I’ll cover making a basic authentication for our app, based on the authentication API Firebase provides.

Head over to your Firebase console and navigate to the ‘Authentication’ link in the sidebar under ‘Develop’. For now, enable the simple Email/Password Authentication.

Now we can start building the login and register pages. Which are basically just forms like we handled before. The only difference here is that we use the firebase.auth().createUserWithEmailAndPassword and firebase.auth().signInWithEmailAndPassword methods.

Login.vue:

SignUp.vue:

We’re still unable to see these views as we still need to update our routes. Head over to main.js and replace it with the following (don’t forget your API key and Project ID):

Here we added some routes for login and signup, and added meta: { requiresAuth: true; } to the pages we want restricted access on. We check with Firebase if the user is authenticated in the router.beforeEach function, before registering it in our app. When the auth state changes the check is done again.

So now it works pretty well, but we want to hide the sidebar navigation if the user isn’t logged in, so we added the created hook and the v-if on <el-aside>. We also added a logout link to the navigation. Our App.vue file looks like this now:

And there we have it, a single page notes application where you can create an account, login and create, read, update and delete notes.

Feel free to use this code / knowledge to adapt or build upon for creating your very own VueJS / Firebase projects. Let me know how you did!

Questions, remarks?

Can’t get it to work? Need a more in depth explanation of certain bits of code? We’re all ears. Simply leave a comment and we will get back to you as soon as possible.

Gert is a UX/UI Designer and Front-end Developer for the ACA Creative Team. He has a strong interest and opinion on UX. Being the teams technical lead, he likes to explore new technologies in the fast-paced front-end environment.

Leave a Reply

avatar
  Subscribe  
Notify of