Zero to App: Developing with Firebase: My Experience

Zero to App: Developing with Firebase: My Experience

When I came across carnival-compass.com I asked them what technologies they used to develop this. The response was, it uses Firebase, Google App Engine, Go, Polymer and Material Design Lite (MDL). Stuff that I’ve never used before and so I promised to look at these and blog about it.

So where do I start? I googled and came across this very useful video – Zero to App: Develop with Firebase – Google I/O 2016. I will quickly touch on some of the terms mentioned in the video (firstly)

REST – REpresentational State Transfer. A style of software architecture for distributed systems. (Also see this video)

Middleware – Middleware is sometimes called plumbing because it connects two sides of an application and passes data between them.

JSON – JavaScript Object Notation) is a lightweight data-interchange format.

Tree database – A hierarchical database model is a data model in which the data is organized into a tree-like structure.

Firebase can be described as being suited to development of collaborative real-time apps. If anyone knows how they came up with the Firebase name, let me know. Let’s see how I manage in going from zero to app by following the video linked to earlier. So I downloaded the index.html from below the video and deleted all the javascript and CSS and modified to create a starting page that looked like this.

Zero to App- Developing with Firebase- My Experience 1

It’s a feedback system where tourist can submit their feedback to be actioned. As I watched the video, I added back the pieces of code needed, modified it and learned how it worked. One of the first things I noticed was that my API key and other database information would be exposed in HTML source. I read that I should not be alarmed. There is authentication, database rules and coding among other things. (Security & Firebase Rules).

The first error I encountered was

Uncaught ReferenceError: database is not defined at index.html:20

The Firebase console only gives you this

var app = firebase.initializeApp(config);

but the sample code had this

var app = firebase.initializeApp(config),
database = app.database(),
auth = app.auth(),
storage = app.storage();

Also from the  Chrome browser menu > More tools > Developer Tools > Console, I was able to view my errors as I went along. Unto the next error now.

Uncaught TypeError: Cannot read property ‘addEventListener’ of null
at index.html:29

The sample code had the javascript code wrapped in the below code which makes sense. Wait for the document to be loaded.

document.addEventListener(‘DOMContentLoaded’, function() {

At this point I am feeling happy because I am making progress. Unto to the next error now.

FIREBASE WARNING: set at /feedback/-CODE failed: permission_denied

O {code: “auth/operation-not-supported-in-this-environment”, message: “This operation is not supported in the environment…chrome-extension and web storage must be enabled.”}

By default authentication is required to use the Firebase database. For the purposes of following the demo and writing this blog post, I disabled this by modifying the rule as follows. You do get a warning when you do this : Your security rules are defined as public, anyone can read or write to your database.

{
“rules”: {
“.read”: true,
“.write”: true
}
}

Then finally my messages were being written to the database.

Zero to App- Developing with Firebase- My Experience 2

I love being able to develop quickly using well documented and discussed technologies. Firebase provides functionality out of the box and I don’t have to worry about scaling. If you can authenticate, manage session and do CRUD easily out of the box, that’s a good place to start. Imagine what Firebase will handle in the future. One neat thing shown in the video is that if you lose connectivity, the messages are queued in memory until connectivity is restored and this happens out of the box. Anonymous accounts and Firebase storage are also useful. Share your thoughts on Firebase and your experience with us in the comments below.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s