A lot of times companies wish there was an enterprise version of some cool consumer app so that they can use it privately within their organization. For example, virtually every company organizes events for their employees and customers on a regular basis. They may want an iOS photo-sharing app that lists photos taken at those events, allow applying cool photo-filters and share them with their employees.  Let’s see how we can leverage Salesforce1 Platform to build such photo sharing apps rather quickly.

Salesforce1 mBaaS Platform

Salesforce1 Platform, among other things, is also a secure and world-class Mobile Backend as a service (mBaaS) platform that allows us to build any mobile app we want. For those who are new to mBaaS, the idea is that nearly 100% of development efforts should be on front-end design and development, and mBaaS should take care of virtually all backend work! Put another way, mBaaS = Build mobile apps with just front-end engineers and designers and (virtually) without any dev-ops or server-side engineers.

Salesforce1 Chatter – An mBaaS With an Out-of-the-box Social Networking Capability

It’s quite common to have social networking capabilities in mobile apps these days. And typically on most platforms, we still need to design sharing, follow, like, comment, etc., features.

Thankfully, Salesforce1 Platform also comes with a Facebook-like social networking app called Chatter. The cool thing is that we can piggy-back on Chatter’s APIs and build pretty much any social networking app that we can think of without having to design a social-networking backend!

Salesforce1 Mobile Front-End SDKs

Not only does Salesforce1 come with an excellent mBaaS platform for backend, it also comes with various front-end SDKs and command-line tools like forceios to help speed up the front-end development!

InstaForce – A Native iOS Demo App

Before we get started on how to build, let’s see what the final app looks like.

The App Has 3 main Tabs:

1. Photo List tab – shows pictures and allows people to “Like”.
2. Apply Filter tab – allows people to apply filters.
3. Settings tab – allows people to select which “Chatter Group” photos to go to.

Example Filters

This app uses a really awesome open-source GPUImage iOS library to apply filters. Although our app uses just 10 filters, GPUImage comes with 125 built-in filters!

High-Level Development Steps

Now let’s take a look at how to actually build that app. To keep this article short, I am going to show only high-level steps.
Step 1 – Create an iOS Project Using ‘forceios’
Follow the instructions on Getting Started With Native iOS to quickly and easily build a sample iOS project. The neat thing about this tool is that you will get all the latest Salesforce iOS SDK already embedded in your project!
Step 2 – Use Storyboards To Design Entire App’s UI And Flows
Storyboards are really powerful and easy way to design an entire app, and flows between different views.

Below is the MainStoryboard.storyboard storyboard for our app.

Tip: If you are new, go through Apple’s simple yet excellent tutorial that shows how to build apps using storyboards.
Step 3 – Create ViewControllers for Each View
As you are building your storyboard, create a *ViewController.h and *ViewController.m for each view. For example, for the first tab that shows a list of feed items, you may create FeedsViewController.h and FeedsViewController.m class. And associate this class in StoryBoard for that view.

Step 4 – Register Your Storyboard in AppDelegate.m File
Remove all the .h and .m files that were part of sample app in your project except for AppDelegate.h and AppDelegate.m files. Once the app user logs in, setupRootViewController method in AppDelegate.m is called. So register your storyboard in setupRootViewControllermethod.

Step 5 – GPUImage Framework For Filtering Images
As mentioned earlier, our app uses open source GPUImage framework for filters. Once you’ve loaded the framework, simply import “GPUImage.h” and apply a filter like below:

Tip: But adding this framework could be tricky, so I posted a detailed step-by-step instructions on StackOverflow to help everyone.
Step 6 – Make file Uploading Class A SFRestAPI Delegate
To perform any kind of interaction, we need to make that class a delegate of SFRestAPI. In our case SubmitPostViewController.h is the one that uploads file to Salesforce.

Tip: If you are from Java or Apex, making class a delegate in Objective-C is akin to implementing an interface.

Step 7 – Use Salesforce iOS SDK to Upload Photo files
Now in SubmitPostViewController.m file, simply use requestForUploadFile: api to upload our image. Note that we need to import SFRestAPI+Files.h file to use file related parts of the SDK.

Step 8 – Associate Photo File to Chatter Feed
Uploading photos using SDK simply uploads photos to Chatter Files repo but doesn’t associate it with a Chatter feed. Thankfully, Chatter API provides a way to associate an existing file that’s already in Chatter Files to a feed that’s about to be created via ExistingContent parameter of /feed-items api.

Below code in SubmitPostViewController.m loads a JSON template and swaps body text (from 3rd tab) and attachmentId (we get this when we upload the file to chatter files repo) and posts it to Chatter.

Step 9 – Download Photo Files And Show Them In A List
Now that we know how to upload photos, let’s download them and display them in a list (in tab 1). In the demo app FeedsViewController class handles this. Again similar to above steps, to interact with Salesforce, we will again make our FeedsViewController.h that lists photos a delegate of SFRestAPI.h. Then open FeedsViewController.m and import SFRestAPI.h, SFRestAPI+Files.h and SFRestRequest.h to interact with Salesforce. Then call sendRESTRequest: with a completeBlock to load photos asynchronously as shown below.

Step 10 – “Liking” A Photo
Now that we know how to download and list photos, let’s see how to “Like” a photo. Since FeedsViewController.m controls Feeds list, all we need to do is to have a method that makes an HTTP POST to the following endpoint to like a feed item that contains the photo.

Salesforce1 mBaaS

As you can see with Salesforce1 mBaaS, we only need to worry about front-end and the platform takes care of the backend!

Next Steps

Get Salesforce Account
If you don’t have a developer account yet, please get one from here: http://events.developerforce.com/signup
Download The App From Github
Latest version of the app can be downloaded from here: https://github.com/rajaraodv/instaforce

Note: The app needs for XCode 5.x and the storyboard is optimized for iOS 7.
Enhance The App

1. Currently the demo app doesn’t deal with comments. Add code and update Storyboard to allow viewing and adding comments.
2. There is no user profile page. Add a new “Profile view” and display it when user taps on profile picture.