Part 2: Building a Robust App with Facebook’s Developer Tools
by Kyle Ryan
Five years ago, it was difficult to scale a mobile product. If you were an iOS developer, building out services like login, back-end data storage, and push notifications took weeks of time. Today, developer workflows are much more efficient thanks to cloud tools. Companies like Amazon, Facebook, and Microsoft have started to recognize how important it is for developers to build great apps with their technology. Facebook specifically has taken a deep dive into building out robust services for developers to build apps. Today, we live in a very different world than five years ago.
For the past few months, I have been working with Gabriel to develop an app called Peek. He has already written a great article describing the beginning of Peek and the founding story. You should read it before moving on to the rest of this article.
I wanted to write a few words on the technical aspects of Peek. Through cloud services, there has been a great progress with the reduction of development cost. Peek is a great real-world example of this future.
Facebook Parse
I built my first app on Parse’s platform back in 2013. It was the first time my eyes had been opened to the immense potential of software that could help people build better software. Parse was a Y Combinator startup that looked to solve the needs of developers who needed back-end services for their app. Parse takes away that struggle, so developers can focus on building their app. With a few lines of code, you can drop the Parse library into your app, and get started with their platform. In the past few months, Parse has become extremely useful, especially for small projects that need to be build quickly.
Parse Cloud Code
Typically, you can interface with Parse using native Objective-C or Swift code. However, there is a problem with this. In your app delegate, your developer and application keys could be vulnerable to others. If a person can get access to those keys and know how to run server calls, it can cause problems. So, we don’t want problems.
To solve this, Parse has implemented Javascript Cloud Code. This service lets you push Javascript code to Parse where it is securely stored. All of the server calls then happen through JS instead of through client. Cloud functions are called from the app, and they return data retrieved from Parse.
curl -s https://www.parse.com/downloads/cloud_code/installer.sh | sudo /bin/bash$ parse new GVPeek-cloud.
├── cloud
│ └── main.js
├── config
│ └── global.json
└── public
└── index.html$ parse deploy
Parse gives you a simple one line install for Cloud Code. Using a combination of commands, you can get a group of files inside your app’s directory which you can then modify and push to the Cloud. Very similar to git push, you can simply type a line into Terminal and it will update the code with Parse.
Facebook Login
As we know from five years ago, login for mobile apps was a mess. The rules for proper login were very ambiguous. Should you login with email? How do you securely store their information? How do you get a profile picture? How do you know they are a real person?
When Facebook introduced their Login API, it changed a lot of things. With its introduction, developers did not need to worry how they would verify users or obtain email and names. With one tap, a person could interface with a product.
With Peek, we chose to use only Facebook login for the first version. This cut out a lot of work for us. The profile photo, name, email, and password could now all be managed thanks to Parse’s great integration with Facebook login.
Facebook Graph API
For Peek, we needed to have profile photo and friends integration. Facebook’s graph API accomplished both of these complex tasks very easily. For the first version, when you add friends in Peek, we pull from your Facebook friends who are already using the app. Although we plan to build this out more in the future, building off of an already existing social graph meant we could bypass this otherwise difficult process. Here’s a few examples:
With Parse and PFFacebookUtils we can get access to some really helpful methods. Logging in a user is really simple once we have a Faceboook Application set up.
[PFFacebookUtils logInInBackgroundWithReadPermissions:@[@”user_friends”] block:^(PFUser *user, NSError *error) {if (!user) {
// handle a login error
} else if (user.isNew) {
// handle a new user
} else {
// handle the login of an existing user
}
}];
This is a handy request that returns a list of the user's Facebook friends who have used the app.
FBSDKGraphRequest *request = [[FBSDKGraphRequest alloc]
initWithGraphPath:@"/me/friends"
parameters:params
HTTPMethod:@"GET"];
[request startWithCompletionHandler:^(FBSDKGraphRequestConnection *connection,
id result,
NSError *error) {
// Handle the result
}];This method lets us get a user's profile photo in the resolution we need.
FBSDKGraphRequest *request = [[FBSDKGraphRequest alloc] initWithGraphPath:@”me” parameters:nil];[request startWithCompletionHandler:^(FBSDKGraphRequestConnection *connection, id result, NSError *error) {if (!error) {// result is a dictionary with the user’s Facebook dataNSDictionary *userData = (NSDictionary *)result;NSString *facebookID = userData[@”id”];NSString *name = userData[@”name”];NSURL *pictureURL = [NSURL URLWithString:[NSString stringWithFormat:@”http://graph.facebook.com/%@/picture?width=625", facebookID]];NSData *imageData = [[NSData alloc] initWithContentsOfURL:pictureURL];// we can go ahead and then use this image data for whenever we need the user's photo. }}];
That’s just the surface of the technical aspects of Peek! More writing to come soon. You can check out our website and sign up to get notified when it comes out on the App Store soon! Follow Gabriel on Twitter and follow Kyle on Twitter.
