This post by Blake Butterworth originally appeared on the LookFar blog.
Apple’s announcement that they’ll be releasing a messages SDK to third-party developers is super exciting.
And for a couple of reasons…
As a developer, it’s exciting because it means that I’ll be able to create apps that interact directly with the messages app – services that would let smartphone users do things like chat with an Uber driver, or send an animated, snapchat-style selfie over text. As a consumer, the announcement’s interesting because it gives further evidence that we’re starting to see a paradigm shift in how we spend time on our smartphones.
It’s becoming increasingly likely that future smartphone users will spend most of their time in their ‘messages’ app and interact with other apps from that portal. Stratechery’s Ben Thompson put it well when he responded to Facebook’s announcement that it would be investing significant resources into the messaging space by predicting that “messages will become to smartphones what the browser became for PCs”. So many tech companies are now subscribing to this concept that it’s becoming unclear whether the shift to messaging apps will be caused by a real consumer need, or if tech companies will force a change by building their systems with messaging in mind.
There is another factor to keep in mind: the traditional browser experience hasn’t transitioned well to mobile. Smaller screen sizes, slow load times, and the tech/design hurdles of building a page for so many different devices and browsers have led to lower returns for advertisers and web developers serving content and ads through mobile browsers. Combine these factors with an ever-growing number of users spending more time on their phones than on other devices, and it’s become pretty obvious that a new system will eventually replace the mobile browser. A messaging/newsfeed-style portal is among the more promising options, and Apple has leverage to easily transition users to this new system; there are hundreds of millions of iPhone users, many of whom use their messages on an hourly basis.
So, my first question as an iOS developer is: how do I build one of these apps?
I quickly downloaded the beta version of Xcode 8, and looked over Apple’s documentation and its WWDC demos to start tinkering. I will showcase some of the basic iMessages classes and objects here by creating a custom sticker app. A ‘sticker app’ is the term apple is using for the most basic iMessages apps that will serve up what are basically custom emojis – or stickers.
These stickers can be sent in the body of a text the way that emojis can, but can also be peeled up and plopped on top of some text or an image in the conversation. My own app will – of course – be loaded with a few LookFar-themed stickers. Here’s a quick look at the finished product in action:
Setting up one of these sticker apps isn’t going to make you a messages expert, but it is a fun way (haven’t you always wanted your own personal emoji?) to get your feet wet in what promises to be a seriously interesting field of tech. My main objective with this tutorial is to introduce the basic classes used by the messages framework, giving you the groundwork needed to create a more dynamic and interactive messages app in the future.
Step 1
Grab Xcode version 8 (if you haven’t already) and create a new project.
Step 2
You’ll see that Xcode creates four directories – your app name (I named mine ‘StickFar’), MessagesExtension, Frameworks, and Products. StickFar is where you’ll place your app icons, and Message Extension is where we’ll do our coding. Frameworks and Projects won’t be touched during this tutorial.
Step 3
Within ‘MessagesExtensions’ you’ll see our principal class – MessagesViewController. This is a subclass of MSMessagesAppViewController. MSMessagesAppViewController is the view controller that interacts directly with the messages app, but for now we’ll just be loading data into the messages, so you can delete all of the functions besides viewDidLoad and didReceiveMemoryWarning.
Step 4
The other new class that we’ll be interacting with is the MSStickerBrowserViewController. The MSStickerBrowserViewController is the View Controller that will be holding our stickers and handling gestures to pick stickers up and place them in conversation. So, we’ll need to create a custom instance of MSStickerBrowserViewController to display our stickers. Go ahead and get started by adding a new swift file to your project. I’ve named mine ‘StickFarBrowserViewController’.
Step 5
Insert the required boilerplate code to import the necessary libraries and create the custom subclass.
Step 6
Next, we’ll initialize an array to hold our stickers and define our data objects. This array will be of type MSSticker. MSStickerBrowserViewController has two properties, which we’ll need to define in our custom StickFarBrowserViewController class: stickerBrowserView (view that our stickers will be displayed in), and stickersize (will decide the size for the grid that displays the stickers in stickerBrowserView).
Step 7
It’s time to actually get some assets loaded into our stickers array. First, you’ll need to add sticker files to your project (file -> add files to project). Keep in mind that sticker assets must adhere to these rules: the image must be a PNG, APNG, GIF, or JPEG file; the file must be less than 500KB; the image must be between 100×100 and 206×306 points. After that, you’ll need to load and turn the assets into an MSSticker and load those MSStickers into the stickers array. Apple wrote a handy function to handle this job in its iMessage Apps and Stickers demo Here. I’ve copied and expanded on that function below.
Step 8
From there, you’ll just need to write a function to call on the createStickers function.
Step 9
Head back to your MessagesViewController and create an instance of your custom BrowserViewController and set the parameters.
Step 10
Run the thing! Celebrate!
Ain’t no party like an iOS party
And there you have it; those are the basics to get you started with your messages app in Xcode.
If you’re really enjoying the project, you don’t have to stop now – in fact, there are several ways you can expand your sticker app for more functionality or customization. An obvious starting point is to rework the createStickers functions to grab assets from a URL instead of from the app bundle. From there it gets really fun. You could use the in messages camera to take a photo, and then send the photo to a remote API to create a personalized sticker for you on the fly. Or take a look at the classes that we deleted in the beginning of the tutorial – these could really be leveraged to make some cool apps where the sender and user of messages can interact with each other and a remote API.
And this is still just the very beginning of what developers can accomplish in iMessages. I personally couldn’t be more excited to see what happens next in this space, and I’m looking forward to talking more after the next Xcode project.