Garey Graphics

Create a Simple Chat System Using AngularJs and FireBase

Setting Up Firebase

First let’s get started by creating an account with firebase which we will be using as a real-time database for our chat system.

Step 1

Go to firebase.com and register for an account if you don’t already have one.

Once you login you should be at your dashboard and you should be able to generate a new app.

appnameYou can name the app anything you want. In this tutorial I just named it “letsmakeachat” to keep it simple.

Keep the url to the app which will look something like this https://letsmakeachat.firebaseio.com/

Writing the code

Now that we have our app set up we can work on developing the code. We will be using AngularJs to develop the functionality for the program.

Step 2

Open up your favorite code editor, I will be using brackets for this tutorial.

First we are going to set up a folder for all of our content.

ss+(2016-04-01+at+11.56.53)This is our main folder where everything is stored.

Next we are going to build our sub folders for our CSS styling and scripts which will be located inside of our main folder.

ss+(2016-04-01+at+11.59.06)

Next inside your css folder make a file named styles.css.

ss+(2016-04-02+at+12.08.42)

Then go to your js folder and make a file called script.js.

ss+(2016-04-02+at+12.19.15)

Now go to your main folder and create a file named index.html.

Now that we are done creating our files we can begin to start developing our code.

First open up index.html in your code editor and we will begin to construct our page.

ss+(2016-04-02+at+12.26.37)

Now let’s begin importing everything we need to make this work. We will be importing material design for our styling and AngularJs as well as Angularfire and our Firebase files which we can call from a CDN to limit server requests on our end.

Make sure that your styles.css is imported after material design is imported and our script file should be imported after all of our AngularJs files and our Firebase files.

Your imported files should look something like this when being imported to your head tag.

Now we can work on the structure behind our code.

We will be using the material design grid system and icons to make our website. First we have to initialize our app by calling it to the area in which we are going to use it.

In the body we want to call our app by using the ng-app attribute.

and we also want to all our controller below in a separate div using the ng-controller attribute.

Next we are going to create our input fields using ng-model attributes which will be used to set up our name and message fields. Our send button has a ng-disabled attribute that can be used to make the button disabled till the message input is filled in.

Now lets start writing our scripts to send the input data to our firebase database.

Open up script.js

First we want to define a new module as chat-app and then call firebase to be used with our dependency injection to our app. We want to inject our message data to our firebase.

We are going to save our data to firebase retrieve our input data as name and text which will be added to an array called messages which will be injected into our firebase and called later in the html file.

I left a comment in the script below and it says set your app url. You are going to find this comment and it will currently be set to my firebase url. Replace it with your own.

Now open up your index.html file

We will now call the data through the assigned expressions that will be determined based on the defined scopes in our js. We will call our row.name and row.text expressions to show our data which will continuously update.

Our final html file should look like this.

Lastly let’s go to our styles.css and add some styling to our newly developed chat system.

Your final chat should look something like this.

ss+(2016-04-02+at+02.06.35)

See the Pen Simple chat w/ AngularJs & Firebase by George Garey (@puppycheese) on CodePen.