RubyMotion app with Facebook SDK

… and check why 5600+ Rails engineers read also this

RubyMotion app with Facebook SDK

This will be short, simple, but painless and useful. We’ll show you how to integrate Facebook SDK with RubyMotion application.

Recently we encouraged you to start using RubyMotion and we presented some useful gems to start developing with.

Now, we’d like to show you how to integrate Facebook iOS SDK with RubyMotion and create sample application from scratch.

Boilerplate

Firstly, we have to generate RubyMotion application. We will use awesome RMQ gem for building initial skeleton.

gem install ruby_motion_query
rmq create ruby-motion-facebook
cd ruby-motion-facebook
bundle
rake

Our application is up and running.

Integrate Facebook SDK

Now it’s time to include FB pod in our project. Pods are dependencies, something like gems, for iOS and are compatible with RubyMotion too.

In our Gemfile we need to uncomment or add the following line:

gem 'motion-cocoapods'

Then, in Rakefile inside Motion::Project::App.setup block we should add:

app.pods do
  pod 'Facebook-iOS-SDK', '~> 3.16.2'
end

After all that let’s install all dependencies:

bundle              # to install motion-cocoapods
pod setup           # to setup pods repository
rake pod:install    # to fetch FB SDK

That installs Facebook SDK for iOS in our RubyMotion project. We can now build all logic as we want.

Prerequisites

Let’s build some kind of login feature. The use case may be as follows:

  1. When user opens our app, there’s a login screen with Facebook button
  2. After user clicks on it, safari opens webpage asking user to authorize our application
  3. As soon as user confirms permission, web page redirects us back to our application
  4. Now the main screen with user basic data is displayed.

In order to use FB application, we should create it on Facebook developers portal first. However, if you don’t want to follow simple tutorial how to do that, you still can use sample FB app ID provided by Facebook itself 211631258997995.

To be able to be redirected back to our application from Safari, we should register appropriate URL Scheme for URL types in Info.plist, which stores meta information in each iOS app.

Just below app.pods in Rakefile add:

FB_APP_ID = '<FB_APP_ID>'
app.info_plist['CFBundleURLTypes'] = [{ CFBundleURLSchemes: ["fb#{FB_APP_ID}"] }]

What is more, we have to register our Facebook app ID too:

app.info_plist['FacebookAppID'] = FB_APP_ID

Login screen

Now is the time to build login screen with big blue button.

In app/controllers/main_controller.rb in vievDidLoad method add the following line:

@fb_login_button = rmq.append(FBLoginView.new, :fb_login_button).get
@fb_login_button.delegate = self

It tells RMQ to add Facebook login button instance as a subview and apply fb_login_button style to it. What is more, it registers itself as a delegate to handle all login methods.

We have to create our style yet. For that open app/stylesheets/main_stylesheet.rb and add the following code:

def fb_login_button(st)
  st.frame = { centered: :both }
end

That will center FB button.

AppDelegate class is entry point to every iOS application. It should manage login state so we need to configure it as follows:

def application(_, openURL: url, sourceApplication: sourceApplication, annotation: _)
  FBAppCall.handleOpenURL(url, sourceApplication: sourceApplication)
end

def applicationDidBecomeActive(application)
  FBSession.activeSession.handleDidBecomeActive
end

def applicationWillTerminate(application)
  FBSession.activeSession.close
end

Now, run application with rake. You should be able to see login or logout button accordingly to your current state.

Login logic

We have to handle login state now. On the very beginning we can just set navbar title for our application to be changed when user logs in and out. Let’s do it in MainController class:

def loginViewShowingLoggedInUser(_)
  set_title 'User logged in'
end

def loginViewShowingLoggedOutUser(_)
  set_title 'User logged out'
end

def set_title(text)
  self.title = text
end

Let’s rake and play with that.

We can display user info too. Here’s how it works:

def loginViewFetchedUserInfo(_, user: user)
  rmq(@fb_login_button).animate { |btn| btn.move(b: 400) }
  @name_label      = rmq.append(UILabel, :label_name).get
  @name_label.text = "#{user['first_name']} #{user['last_name']}"
  rmq(@name_label).animations.fade_in
end

def loginViewShowingLoggedOutUser(_)
  set_title 'User logged out'
  if @name_label
    rmq(@name_label).animations.fade_out
    @name_label.removeFromSuperview
    rmq(@fb_login_button).animate { |btn| btn.move(b: 300) }
  end
end

And some styling for that:

def label_name(st)
  st.frame          = { w: app_width, h: 40, centered: :both }
  st.text_alignment = :center
  st.hidden         = true
end

Summary

And that’s it. I’m happy that you went through this article. In case you need ready code, I created repository with example application. Enjoy!

For now, stay tuned for more mobile blogposts!

Resources

You might also like