Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn
George Anderson
Frontend and backend development guru, lover of all things computer... and cats! Hopes to make your coder life a breeze by sharing some tips and tricks of the trade.
Posted on Jul 12th 2018 We will continue from where we left off in the first article. In this part of the article, we will add the markdown editor for authoring posts on our blog, and we will set up Firebase for authentication and persisting data to remote storage. Let’s get started!

Starting a New Cloud Firestore Project

Open the Firebase console and sign in to your Google account. Click on Add project in order to create a new Firebase project.
firebase project creation
Next, enter Fireblog
as project name, select your Country/region and click Create project
firebase project creation
A screen should pop up telling you that your new project is ready; on this screen, click Continue
project finished Now you should see the project overview page.
overview page

Your good ol’ Eclipse IDE can do so much more for you with CodeMix! Get all the VS code smarts and Code OSS extensions without leaving your preferred environment. Dive into an ocean of languages, from JavaScript to Python, and a sea of technologies, from Vue.js to Angular.

On the project overview page, click Add Firebase to your web app, copy the value of the config variable, which is a JSON object, and set it as the value of the key Firebase in /src/environment/environment.ts and in /src/environment/
google firebase
The content of /src/environment/environment.ts should now be:

And the content of /src/environment/ should be:

Click on the Database menu to the left, and then choose Try Firestore Beta.

try beta fire

 On the next screen shown below, choose locked mode and then click Enable.

next screen
 On the next screen, click Add Collection and name the collection posts.
Then, add 2 fields of type string (title, content), and provide them with some initial value. Then, click Save.

Navigate to the rules tab on the dashboard page and update the rules, as follows:

In the code snippet above, we have set the following rules:
  • Allow anyone read access to all documents in our database
  • Allow write access only to logged in user
These are very simple rules for learning purposes and are not recommended for production apps.

Install Firebase and AngularFire2

AngularFire2 is the official Angular library for Firebase, so let’s add it to our product in order to interact with Firebase. Install Firebase and AngularFire by executing the code below in Terminal+:

npm install firebase angularfire2 --save

Create EditorAuthGuard

We need to ensure that only authorized users can create and modify posts, so we will protect the /editor routes using a guard. Generate a guard by executing the command below in Terminal+

ng generate guard guards/editor-auth

Update the content of the newly generated src/app/guards/editor-auth.guard.ts:

In the code snippet above, we define a class EditorAuthGuard which implements CanActivateChild imported from @angular/router. CanActivateChild is an interface that a class can implement to be a guard deciding if a child route can be activated.
In the constructor for EditorAuthGuard we inject afAuth an instance of angularfire2/auth/AngularFireAuth, and router an instance of @angular/router/Router. The class has a method canActivateChild that checks if a user is logged in.

Create Auth Component

In the menu select File > New > Component, enter /FireBlog/src/app/components/auth as the source folder and Auth as the component name. If you get an error, which reads as more than one modules match, then run the code below in Terminal+:
ng g component components/auth --skip-import
Using the auth component, when a user is logged out, we will display a login button; else we display a log out button. Update the content of src/app/components/auth/auth.component.html:

Update the content of src/app/components/auth/auth.component.ts:

In the code snippet above, we use methods provided by AngularFire2 to implement Login with Google functionality.

Guard routes for editor components

Now we will use this guard in src/app/app-routing.module.ts, the updated content is below:

In the code snippet above, we have added route rules for the /auth routes, and imported EditorAuthGuard and set it as a route guard for the /editor routes.

Also update src/app/app.module.ts:

Editor Posts View

The route /editor/posts should allow us to create a new post and show a list of posts that have been created in the blog. Update the editor-posts component to enable this functionality.  

In this view, we have two sections. The top section provides a form for creating a new post by typing in the title in the input box and hitting Enter. Notice that we bind the keyup.enter event to the component instance method onEnter.

In the lower section, we have the markup to display a list of posts available. If there are no posts available, we would like to display a help message. This help message can be displayed using CSS as in the code below. Update the content of src/app/modules/editor/components/editor-posts/editor-posts.component.css

Using CSS we are displaying the text Create a post Luke” when the user is yet to create a post, and the list of posts is empty.
Now update the content of src/app/modules/editor/components/editor-posts/editor-posts.component.ts

In the constructor of EditorPostsComponent, we inject afs an instance of AngularFirestore. Instance variables postsCollection and posts are then assigned values. The onEnter method takes new_post_title as a parameter, we then create a new Post object which is used as an argument to the addItem method. The addItem method uses the add method of AngularFirestoreCollection to persist the new Post object to the Firestore backend.

Editor Post View

The route /editor/post should allow us to edit a post. Update the editor-post component to enable this functionality. The file is located at src/app/modules/editor/components/editor-post/editor-post.component.html:

In this markup, we have a simple form to edit the title and content of a single post; all changes made are auto-saved. Notice that we bind the change event to the update method.

Now, update the content of file located at src/app/modules/editor/components/editor-post/editor-post.component.ts 

The getPost method simply gets a post from Firestore using the postId parameter. In ngOnInit, we observe this.route.paramMap so we can retrieve the post id from the route parameter, after which we call the getPost method. The getPost method assigns an AngularFirestoreDocument to the instance variable postDoc. We then observe the document, so that once its value is available, we assign it to the class variable formModel.
The update method serves to persist the changes to our post document via the AngularFirestoreDocument
update method.

Reader Posts View

The route /reader/posts should allow us to read a list of titles of all posts on the blog. Update the reader-posts component to enable this functionality. The file is located at  src/app/modules/reader/components/reader-posts/reader-posts.component.html:

In the constructor ReaderPostsComponent, we inject afs an instance of AngularFirestore, we use the collection method from AngularFirestore to create an instance of AngularFirestoreCollection stored in the variable postsCollection. We then create an observable which will return the array of posts to the posts instance variable.

Reader Post View

The route /reader/post should allow us to read a single post on the blog. Update the reader-post component to enable this functionality. The file is located at src/app/modules/reader/components/reader-post/reader-post.component.html:

Now update the content of src/app/modules/reader/components/reader-post/reader-post.component.ts:

In the constructor, we inject afs and route. In the ngOnInit method, we observe route and execute the getPost method, once the route parameters are available. In the getPost method, we get the post to be displayed from Firestore.

Running the app

In the Server window, right click on FireBlog and click the green icon with label Start Server.

Live Demo

Now open http://localhost:4200/ to see the running version of the blog.