A brief account of using angular firebase with google analytics and database support.

Disclaimer: This post, is written with the expectation you are a little familiar with Angular. But can still be read for pure enjoyment and learning.

So, I recently had a go at using Google’s Firebase for the first time. I used it for one of my artistic projects called “About A Flower“, which is an interactive online storytelling experience more details below. Anyway moving on from my shameless plug and back on Firebase.

I have to start this blog post by saying; During my time experimenting on different projects. I have used a lot of cloud platforms, or should I say attempted utilising a lot of cloud platforms. The keyword here is “attempted” because a lot of them have lost me at their over-complicated signup pages, hard to read docs or pricing pages. Not naming names but you know the ones. The fact you found this blog means you know probably know at least one name.

However, Firebase, I have to say has been one of the easiest cloud platforms that I have ever used. Especially when using it with Angular, All you need is 

1) A dependency download 

ng add @angular/fire

2) A quick sign up at https://firebase.google.com, with the same account as your Gmail account. 

3) A less than one-minute setup and hardly any code changes. True to the nature of this blog we don’t like duplicating efforts, so see step 3 at https://github.com/angular/angularfire/blob/master/docs/install-and-setup.md

4) From here on out, all you need to deploy is the below, and your app is live! 

ng deploy

And it is not just the ease of getting started that makes Firebase great. It is the powerful analytics functionality it provides for your site. With the below imports, added to your @NgModule in app.module.ts file, you get powerful analytics, e.g. the number of visits to your Angular application, The location of your users and much more. The analytics can be viewed on the very easy to use the dashboard on your Firebase console. For more, advance analytics setup see (https://github.com/angular/angularfire/blob/master/docs/analytics/getting-started.md)

AngularFireModule.initializeApp(environment.firebase),
AngularFireAnalyticsModule,

You can also get database functionality for your Angular Application by adding the below import to your @NgModule in your app.module.ts file.

AngularFirestoreModule

And it doesn’t stop there you can also get an authentication Libary and many more. 

The only slight con that I found was understanding their pricing page as seen here I can’t tell you I fully understand the structure, but they have a lot of explanation videos on their site. What I can say for sure is that if you are building a hobby or starter application. It is pretty much Free. 

Hope you found this useful and if you want to know more the “About A Flower” project. It is an interactive online experience that uses sound, technology and storytelling to entertain and relax. It includes original sounds and an original story based on Yoruba mythology. It hopes to give you a little break to a magical world full of relaxing sounds and a magical story straight from your home!It is only available till the end of November so check it out now and have a relaxing time. Don’t miss out!

Visit the experience at https://about-a-flower.web.app/ and Share!

You can also Follow @aboutaflower2020 on Instagram to find out more details and the project.

Advertisement