I spent the last day adding an image capture feature to a project - Watchlier.
We picked Firebase in order to offload work from our own server. We also just wanted to check out Firebase after hearing so many good things about its ease of use!
I’m happy to report that getting up and running with Firebase is very fast and straight-forward! Head over to Firebase and start a new account. They will provide you with a database for storing your information.
All Firebase database data is stored as JSON objects. When you add data to the JSON tree, it becomes a key in the existing JSON structure.
However, Firebase databases have no native support for arrays. If we try to store an array, it really gets stored as an “object” with integers as the key names.
You access the database with a URL and command it to do what you need. For example, if you want to save images from event #3, you could use the following URL path:
There are several options for interacting with Firebase:
- Firebase website
- RESTful API
- Firebase and AngularFire modules for Angular
PRO TIP: Image files for Firebase need to be in a string format (and must be under 10mb)! You’ll want to get the base64-encoded contents so you can store it as a string. The general approach is to convert the file locally (using FileReader).
Now let’s see how it works in practice…
First step: install bower dependency manager and the bower components for Firebase and AngularFire
Now instantiate a Firebase object with the URL path for your app and inject the firebase module into your app.
Next, inject Firebase into the Angular module where your controller is located. The $firebaseArray variable below comes from the AngularFire module.