In this 5 part tutorial series we will build a simple chat app. It will require the user to login and then they can chat with anyone else in the room. We will use Firebase 3 as our db and as our authentication. We will use a NPM package called AngularFire 2, which is the official library for Firebase and Angular 2.
Part 1: Installing necessary components. Generating a blank app through Angular CLI. Add Bootstrap for styling. Create Firebase account. Install and setup Firebase through NPM.
The code for part 1 can be found here.
Part 2: Add user login through their Google account. Create the Login Page and Home Page Components. Add asynchronous monitoring of the logged in status. Redirect to the Home Page when logged in and to the Login Page when the user logs out.
The code for part 2 can be found here.
Part 3: We will add a simple chat app that stores messages into a Firebase Realtime Database.
The code for part 3 can be found here.
Part 4: We add Email/Password user authentication using Firebase.
The code for part 4 can be found here.
Part 5: COMING SOON Adding the ability for a user to edit or delete any messages that they have sent.
In this section we will be adding a basic chat to the app. It will sync asynchronously with Firebase’s Realtime Database.
CRUD stands for Create, Read, Update and Delete. Firebase handles a lot of the complexity of a web app for you, which makes development a lot easier!
Firebase is a swanky service that is offered by Google that allows the developer to not have to worry about many mundane tasks that slow down development. The Firebase services that we will be using is the Realtime Database, which syncs across all devices in milliseconds. We will also be using their authentication API’s and I will also use their hosting to host the final version of the app.
I have been using Firebase for a few months now and I am a huge fan of it. It greatly speeds up development and can grow as big as your app does. All without having to have the knowledge of a System Administrator (or hiring one) to maintain the growth of your app.
Note: If you clone the repository follow the prerequisites section and then run
npm installin the project folder.
Installation should be as simple as installing NodeJS and npm comes with with.
IMPORTANT: You must have NodeJS 4 or higher AND npm 3 or higher. When downloading NodeJS note that the LTS version of Node comes with npm 2.15.9. If you are about to install Node, get the Current/Latest Features download. You can also update npm from the command line
npm install -g npm.
Once you have npm installed from the command line you can install Angular CLI by typing:
Note: the -g flag installs this globally on your computer
For AngularFire2 to work we will also need to install
Note: You might have to run the above commands as an administrator ex:
sudo npm install -g angular-cli.
Creating a blank app with the Angular CLI is easy. In a terminal type in this command:
firebase-crudis the name of the folder the project will be created in. Name this whatever makes sense to you.
To view that our app is working lets display it.
Our app should now be visible from a browser on the default url
Note: To change the port that is used you can type
ng serve -p 4000
If we open our app in a text editor, I use Webstorm which is an excellent editor IMO. The first thing we need to do is add the Bootstrap cdn to our app. We can do this by opening up
app/index.html and edit it so that it looks like this:
Note: Bootstrap has an Angular 2 extension called ng-bootstrap. It adds Angular 2 components, but for our purposes we do not need them.
Now lets add a navbar in
src/app/app.component.html to make our app feel a little more polished.
The next thing that we need to do is add AngularFire2 to our project. Before we are able to do this we need to login to the Firebase Console. You can log in using any Google account that you already have. Once you are logged in we need to create a new Project.
Now that we have a Firebase Project created run the following command from inside of your project:
src/app/app.module.ts, inject the Firebase providers and add your app specific Firebase configuration.
Your Firebase credentials can be found in the Firebase console. When you log in, click
Add Firebase to your Web App and your credentials will be there.
Now we are set up to use Firebase in our project. In the next tutorial we will add user authentication. If you have any questions please don’t hesitate to ask me! :)
Continue to Part 2