Tuesday, April 29, 2014

Writing a small application using Parse and Backbone - Part 1

Motivation

A few weeks ago I discovered the Parse backend-as-a-service, and immediately loved what I saw. So now I'm going to put together a small application, called Invite. I'm going to use Backbone as my front-end framework, because that's what Parse is based on.

My usual strategy is to read one good post on the subject at hand, and then just Google everything else I need as I need it. Sometimes I find a tutorial which is so well written and suited to my immediate need that I can get by with only that one, but normally I just bounce around a bunch of different ones.

The code is on Github, you will find it here.

Yeoman

To get started, I figure I should install a Yeoman generator for Backbone. And... Yeoman craps out on me. Bunch of error messages about not being able to find files in the global node_modules etc. So instead of trying to make it work, I just removed my ENTIRE node.js installation and built it from source. Only this time, I specified a value for the --prefix flag while running configure.sh, essentially telling it to install to a folder in my home directory.

No problems - it installs, and I run npm config ls to ensure that it shows the correct prefix. It doesn't, so I update the .npmrc in my home directory, which I had completely forgotten even existed.

The upside? Now I can install Yeoman globally without using sudo. Which I shall immediately do... and it works. Next I need the generator for Backbone, so I run Yeoman and asked it to find it for me. Yeoman is smart, it shows me a list of possible generators, and I choose generator-backbone since the others looked like Backbone + other stuff. And this time it works. Yeoman even confirms that it has installed the generator as a global node module. Thank you, Yeoman!

The scaffold

Now I'm running the Backbone generator, and Yeoman is doing its thing. It looks like it's installing a million node modules, mostly grunt stuff which I will not be looking at today or anytime soon. But more interestingly, it creates  the scaffolding for my Backbone application! Let's take a look at what we've got:
  • An invite/app/index.html
  • An app/scripts/main.js - this is where the application definition is. The application object has been named Invite (which Yeoman figured out from the name of the folder), and has been placed inside the global window object.
  • Other files I'm not interested in right now
I start up the application by running grunt serve, and the page which shows up looks good. It says I should run some more Yeoman commands, for models views and controllers. Ok, why not... I run

 yo backbone:router places  
 yo backbone:collection places  
 yo backbone:model places  
 yo backbone:view places

which create a bunch of files which I will get to soon. Ok, great. Now I can get back to actually building this application.

The Application

This would be a good point for me to pin down exactly what I want to build. So here it is:
  1. Users must sign in, and sign-in must be through their Facebook account
  2. Once signed in, they can see a list of People, initially just their Facebook friends
  3. They see a list of places they could hang out at in their city. Also from Facebook
  4. They can invite their friends to meet them at a place, after specifying when this should happen. I am going to find the absolute simplest date & time control to do this with.
  5. Their friends will see the invitation when they sign in, and will be able to accept or reject. A notification goes out. 
Ok, that's enough to get started. So here's a list of pages we will need:
  1. Sign-Up / Sign-In
  2. List of People
  3. Person Details
  4. List of Places
  5. Place Details
  6. Invite
  7. See invitations, respond, see other responses and other updates

Facebook Login

What I want to do first is integrate with Facebook. I want my users to be able to authorize my app to access their profile, and then I will create a User object using their profile information. I also want the app to detect if they already have an account with me, and retrieve that User instead of creating a new one.

Naturally, I expect Parse to be able to handle this simple workflow, so I just need to figure out how they do it. I'm going to read the documentation and just note down over here what I did.

1. Integrate the Facebook JavaScript SDK. Instructions are here. I put the fb-root div into index.html right after the opening <body> tag, and I include the Parse JavaScript SDK just before scripts/main.js is included.

2. Parse says that fbAsyncInit should contain a call to their own initialization routine rather than directly to Facebook's.

3. Hmm their init function wants a channel URL...

4. StackOverflow to the rescue. Created my local channel.html

5. I placed the Facebook code along with the Parse init in main.js 

So far, so good. Now the Parse documentation wants me to call a function called Parse.FacebookUtils.logIn. But where should I call it from...hmm.

6. Ok, I'm going to put it into fbAsyncInit right after the call to Parse.FacebookUtils.init. So now fbAsyncInit contains calls to  Parse.initialize,  Parse.FacebookUtils.init  and  Parse.FacebookUtils.logIn.

7. Chrome blocks pop-ups from localhost by default. Changed the policy.

8. Now Facebook is complaining that the URL is wrong. Changed it in my Facebook app's settings page i.e. https://developers.facebook.com/apps/<my app id>/settings/

9. Refreshed my app. The browser's console logs tell me that the user is "signed up and logged in through Facebook!".


Next

In the next installment I will figure out routes, views and models, and build one of the pages for the app.