Create an iMessage App in iOS 10_part1

Introduction

With iOS 10, Apple has opened up the Messages application to third-party developers through a new feature called iMessage apps. Developers can now create their own various types of apps, ranging from sticker packs to fully interactive interfaces, which create inline iMessage content.

In this tutorial I am going to introduce you to the new Messages framework and show you how to create your very own iMessage apps.

This tutorial requires that you are running Xcode 8 on OS X El Capitan or later and assumes that you are comfortable with creating a UIKit-based iOS application. If you're still getting started with iOS development, check out the iOS From Scratch With Swift tutorial series. Over the course of that series, you'll learn how to start developing for the iOS platform with in-depth articles and tutorials.

1. Ecosystem

The iMessage app ecosystem begins with a full App Store that is accessible to users through the Messages application. This store is completely separate from the regular iOS app store and will show only the iMessage-related apps.

iMessage apps exist as extensions to regular iOS applications, similar to things like Photos extensions and custom keyboards. The key difference is that, since the iMessage App Store exists on its own inside the Messages app, you can create an iMessage app without having to create an iOS app that goes on the user's home screen; the iMessage app is created as an extension of an effectively blank and invisible iOS app. It is important to note, however, that of course if you want to develop both an iOS and iMessage app, you can create an iMessage extension just like any other type of extension.

Lastly, while iMessage apps will only be available on iOS, their content will still be viewable on macOS and watchOS devices. In addition to this, users of watchOS 3 will be able to view their recently used stickers and send these to their contacts straight from an Apple Watch.

2. Basic Sticker Packs

For people who just want to create a quick and easy iMessage sticker pack, Xcode provides a template to do so without having to write any code at all! This will be a great tool to enable graphic artists with no programming knowledge at all to create a sticker pack.

Using the new Messages framework to create a sticker pack, you can create small, medium or large stickers. This size, however, applies for all stickers in your pack. You only need to provide the largest image size for each sticker in your pack, and the system will downscale your images when being displayed on other devices.

While not strictly enforced, here are the file sizes that Apple recommends for your sticker packs:

• Small: 100 x 100 pt @3x scale (300 x 300 pixel image)
• Medium: 136 x 136 pt @3x scale (378 x 378 pixel image)
• Large: 206 x 206 pt @3x scale (618 x 618 pixel image)

There are, however, some limitations to the images you can use in your sticker packs:

• Images can be no larger than 500 KB in file size.
• Images can be no smaller than 100 x 100 pt (300 x 300 pixels).
• Images can be no larger than 206 x 206 pt (618 x 618 pixels).
• Image files must be PNG, APNG, JPEG, or GIF format; PNG for static stickers and APNG for animated ones are recommended because they handle scaling and transparent backgrounds much better than JPEG and GIF respectively.

Open up Xcode and create a new project. Under the iOS > Application section, you will see that there are now options for iMessage Application and Sticker Pack Application projects. For this first example, select the Sticker Pack Application template:

If you are following along and want some sticker assets to use in your application, you can download them from the iMessage Application Stickers folder of the tutorial GitHub repo.

You will see in the left sidebar of Xcode that you now have a Stickers.xcstickers asset catalog in your project. This folder will contain your iMessage application icon and all of the stickers in your pack. Adding stickers to your application is as easy as dragging them into the Sticker Pack folder of your asset catalog.

Please note that if you want to add in an animated sticker using a series of images, you can right click in your Sticker Pack folder and choose the Add Assets > New Sticker Sequence option. With this in your sticker pack, you can then drag to reorder individual frames.

Lastly, with your asset catalog open, if you go to the Attributes inspector in the right sidebar of Xcode, you can change the name of your sticker pack and also the sticker size you are using.

Testing Your Sticker Pack

To test your sticker pack, simply press the play button in the top-left corner of Xcode or press Command-R on your keyboard. Once the simulator has booted up, Xcode should present you with the following menu.

Choose Messages and then click the Run button. Once the simulator has launched the Messages app, press on the app store button at the bottom of the screen to access your iMessage applications.

Your sticker pack should show up initially, but if it doesn't, swipe across until you reach it. Once your app has loaded you should see the two stickers that we added available to use and send.

Tapping on either of these stickers will add it to the current message, and from here you can press send.

As you can see, it is very quick and easy to create sticker packs for iMessage in iOS 10 without needing to use any code at all.

3. Custom Sticker Applications

For some use cases, the very basic functionality provided by the basic sticker application template may not quite be enough. Because of this, Apple also provides a way for you to create a more customised sticker pack application. If you want to follow along, create a new project called CustomStickerPack as shown at the start of this tutorial, but this time choose the iMessage Application template.

Once Xcode has created your project, you will see that you now have folders similar to that of an iOS app with an additional MessagesExtension folder. The top CustomStickerPack folder simply contains an asset catalog and Info.plist file for your "blank" iOS application. It is important that you provide all of the correct sized app icons in this asset catalog because iOS will still use it for things such as the user's storage usage settings.

The folder we are going to focus on is the MessageExtension folder, which at the moment contains the following files:

• MessagesViewController.swift which is the root view controller for your iMessage app's UI
• MainInterface.storyboard where you can design your app's interface easily
• Assets.xcassets which contains your iMessage app's icon files as well as any other image assets you need to use in your interface
• Info.plist for configuration values of your extension

For our example custom sticker application, we are just going to create our interface programmatically using the new MSStickerBrowserViewController class.

Open up your MessagesViewController.swift file, and you will firstly see that your MessagesViewController class is a subclass of MSMessagesAppViewController, which itself is a subclass of UIViewController. This means that all of UIKit is available for you to use in your iMessage applications.

The MSMessagesAppViewController class provides many callback methods which you can override to further customise the functionality of your application, but we don't need to worry about these in this tutorial. For now, just edit your class definition so that your class conforms to the MSStickerBrowserViewDataSource protocol:

1. class MessagesViewController: MSMessagesAppViewController, MSStickerBrowserViewDataSource {
2.   
3.     ...
4.   
5. }

Before we can display our stickers, we need to add the files to our project and load them. Drag the image files we used earlier in this tutorial into your project, and make sure that they are added to the MessagesExtension target. The files need to be added to the target rather than to an asset catalog because that way we can load them from a URL, which is much easier when working with custom stickers.

Once you have added these files, add the following code to your MessagesViewController class:

1. var stickers = [MSSticker]()
2.  
3. func loadStickers() {
4.     for i in 1...2 {
5.         if let url = Bundle.main.urlForResource("Sticker \(i)", withExtension: "png") {
6.             do {
7.                 let sticker = try MSSticker(contentsOfFileURL: url, localizedDescription: "")
8.                 stickers.append(sticker)
9.             } catch {
10.                 print(error)
11.             }
12.         }
13.     }
14. }

With this code we simply create an MSSticker array to store our stickers and a function to load them from the local storage.

Written by: Davis Allie

If you feel useful for you and for everyone, please support and follow us.

Suggest for you:

iOS 10 Projects: Build Amazing Apps with Apple's Newest iOS

iOS 10 Message Extension App Reskinning without Coding

iOS 10 & Swift 3: From Beginner to Paid Professional

Swift 3 and iOS 10 The Final Course Learn to Code like a Pro

The Complete iOS 10 Developer - Build Real Apps with Swift 3