Trigger.io + Firebase Tutorial

To show you how easy it is to create an app using Trigger.io, we put together a short tutorial below (for Mac users). In it we’re using Trigger.io for the UI and Firebase for the backend to create a fully functional native app for three platforms using one code base. We’ll use a simple demo wine app that I’ve been working on that also includes native UI components. You can see the code for this app on github here, and you can actually install the app on your mobile device via the App Store or Google Play.

forge run web

forge run ios

To build and run the Android app, check out our documentation to make sure you’ve set up your environment correctly.

<title>Wine Box</title>
<script src='lib/firebase.js'></script>
<script src="lib/jquery.min.js"></script>

Firebase Integration Details

As part of our initialization code in wine.js we setup the Firebase objects we need and our Backbone collection:

forge.logging.log('... Start initStorage');
//Initialize Firebase
wine.publicFirebase = new Firebase('https://winebox.firebaseio.com/public');
wine.userFirebase = new Firebase('https://winebox.firebaseio.com/'+wine.user);
wine.photos = new wine.collections.Photos();

In models.js we defined wine.collections.Photos() to be our Backbone collection.

And we’ve created two Firebase objects – one for our public stream and one for the user-specific stream. The Wine Box app is designed to let you take photos of wine labels at restaurants so you can rate the wine you’ve drunk. Within the mobile app you’ll see a list of the wine you’ve personally rated, while there’ll be a public list on the web.

For this purpose we’ll denormalize the data, so when we add new models, we’ll add them to both the public and user-specific object. Here’s what the winebox object will look like in Firebase’s graphical debugger with two users have added a wine object each:

Next we need to initialize our Backbone model so we can show the right list of wine photos and ratings on mobile and web, and listen for changes so the public list on the web updates automatically when a new rating is made in the mobile app.

To do that, we first need to branch our code depending on whether we’re on mobile or the web. Doing that is easy with the forge.is API:

if (forge.is.web()) {


} else {
    //We must be on mobile
}

In the mobile branch, we use Firebase’s once method to read the data snapshot for the user:

wine.userFirebase.once('value', function(snapshot) {
    forge.logging.log('firebase.once triggered');
    $('#loading').remove();
    snapshot.forEach(function(photo) {
        var photomodel = wine.addPhotoFromFirebase(photo);
        if (!photomodel.has('dataurl')) {
            wine.setDataUrl(photomodel.get('url'), photomodel.get('timestamp'));
        }
    });
});

For every object in the user-specific Firebase object, we call our own ‘addPhotoFromFirebase’ method in wine.js to populate our Backbone model.

The way we show the photo on the web is to convert it into a data url on the mobile device and then add it to the Firebase model – in case we didn’t manage to complete that process when the photo was originally taken, you can see us check for, and if necessary, populate the ‘dataurl’ attribute with a call to our ‘setDataUrl’ method in wine.js.

To complete the picture for the mobile app, we need to make sure that if a wine rating is deleted within the app, the appropriate Firebase model is updated so the change can be replicated elsewhere:

wine.photos.on("remove", function(photo) {
    state.get('list').remove(photo.get('timestamp'));
    wine.publicFirebase.child(photo.get('timestamp')).remove();
    wine.userFirebase.child(photo.get('timestamp')).remove();
});

In the web branch, we not only want to populate the public list of wine photos and ratings, but also listen for updates so the list on the web can change dynamically according to user actions in the mobile app. For that, we use Firebase’s on method:

wine.publicFirebase.on('childadded', function(photo) {
    forge.logging.log('firebase on childadded triggered');
    $('#loading').remove();
    wine.addPhotoFromFirebase(photo);
});
wine.publicFirebase.on('childremoved', function(photo) {
    forge.logging.log('firebase on childremoved triggered');
    forge.logging.log('removing from list with timestamp: '+photo.val().timestamp);
    state.get('list').remove(photo.val().timestamp);
});
wine.publicFirebase.on('childchanged', function(photo) {
    forge.logging.log('firebase on childchanged triggered');
    forge.logging.log('updating image with timestamp: '+photo.val().timestamp);
    forge.logging.log('using dataurl: '+photo.val().dataurl);
    wine.photos.where({timestamp: photo.val().timestamp})[0].set("dataurl", photo.val().dataurl);
    state.get('list').addImage(photo.val());
});

This code ensures that whenever an item is added, deleted or updated within the mobile app, the change is replicated in the model that we use for our list of wine photos and ratings on the web. It’s as simple as that.