Introduction
This blog is about iMessage app in iOS, We all use messaging capabilities on our iOS devices. This is a bold statement and I have no proof for it, but it’s difficult to imagine a person owning an iOS device without having sent or received messages. The main messaging application on iOS is iMessage, but it’s not the only messaging option for iOS. You can download and choose among a huge selection of various messaging applications.
Up until iOS 10, iMessage was fully closed. That is to say, it lived in its own sandbox (and still does), and did not allow any extensions to be attached to it. In iOS 10 that has changed, and web developers can finally write our own iMessage extensions that allow even more interactivity to be added to our conversations.
iMessage apps can be of two different types:
Sticker packs
This is a special, unusual kind of app that contains only images, with absolutely no code. You can create this kind of app so users can send the images to one another in iMessage. For instance, if you offer a sticker pack full of heart shapes, users can then download the app and attach those hearts to messages that they or others send. In other words, as the name implies, images can stick to messages!
Full-fledged apps
This is where you have full control over how your iMessage app works. You can do some really fun stuff in this mode, which we will review soon. For instance, you can change an existing sticker that was sent previously by one of your contacts, so that you and the person you’re chatting with can collaboratively send and receive messages to each other.
Setting Up a Sticker Pack Application
Problem
You want to create a simple iMessage application that allows your users to send stickers to each other, without writing any code.
Solution
Follow these steps:
- Open Xcode if it’s not already open.
- Create a new project. In the new project dialog, choose Sticker Pack Application and then click Next.
Enter a product name for your project and then click Next.
- You will then be asked to save the project somewhere. Choose an appropriate location to save the project to finish this process.
- You should now see your project opened in Xcode and then a file named xcstickers. Click on this file and place your sticker images inside.
- After you’ve completed these steps, test your application on the simulator and then on devices as thoroughly as possible. Once you are happy, you need to code sign and then release your app to the iMessage app store.
Discussion
With the opening up of iMessage as a platform where developers can build stand-alone apps, Apple has created a new type of store called iMessage App Store, where applications that are compatible with iMessage will show up in the list and users can purchase or download them without cost.
If you create a sticker pack app with no accompanying iOS app, your app shows up only in the iMessage App Store. If you create an iOS app with an accompanying iMessage extension (stickers), your app shows up both in the iOS App Store (for the main iOS app) and also in the iMessage App Store (for your iMessage extension).
NOTE
Your stickers can be PDF, PNG, APNG (PNG with an alpha layer), JPEG, or even (animated) GIF, but Apple recommends using PNG files for the sake of quality. If you are desperate to create a sticker app but have no images to test with, simply open Finder at /System/Library/CoreServices/CoreTypes.bundle/Contents/Resources/, then open the ICNS files in that folder with Preview.app, export those ICNS files into PNG files, and drag and drop them into your Stickers.xcstickers file in Xcode. Then build and run your project on the simulator.
Building a Full-Fledged iMessage Application
Problem
You want to build a custom iMessage application where you have full control over the presentation of your stickers and how the user interacts with them.
Solution
Create an iMessage application in Xcode by following these steps:
- Open Xcode if it’s not already open.
- Create a new project. In the template, window choose iMessage Application and then click Next
3. You will be asked to save your project somewhere. Do so and then you should see Xcode open up your project
Discussion
Now that you have created your iMessage app, it’s time to learn a bit about what’s new in the Messages framework for iOS 10 SDK. This framework contains many classes, the most important of which are:
MSMessagesAppViewController
The main view controller of your extension. It gets displayed to users when they open your iMessage application.
MSStickerBrowserViewController
A view controller that gets added to the app view controller and is responsible for displaying your stickers to the user.
MSSticker
A class that encapsulates a single sticker. There is one MSStickerfor each sticker in your pack.
MSStickerView
Every sticker instance in MSSticker has to be placed inside a view to be displayed to the user in the browser view controller. MSStickerView is the class for that view.
When you build an iMessage application as we have just done, your app is then separated into two entry points:
- The iOS app entry point with your app delegate and the whole shebang
- The iMessage app extension entry point
This is unlike the sticker pack app that we talked about earlier in this chapter. Sticker pack apps are iMessage apps but have no iOS apps attached to them. Therefore there is no code to be written. In full-fledged iMessage apps, your app is divided into an iOS app and an iMessage app, so you have two of some files, such as the Assets.xcassets file.
Even with custom sticker pack applications, you can build the apps in two different ways:
- Using the existing Messages classes, such as MSStickerBrowserViewController, which do the heavy lifting for you
- Using custom collection view controllers that will be attached to your main MSMessagesAppViewControllerinstance
Follow these steps to program the actual logic of the app:
- Drag and drop your PNG stickers into your project’s structure, on their own and not in an asset catalog. The reason is that we need to find them using their URLs, so we need them to sit on the disk directly.
- Create a new Cocoa Touch class in your project that will be your MSStickerBrowserViewController
- Your instance of MSStickerBrowserViewControllerhas a property called stickerBrowserView of type MSStickerBrowserView, which in turn has a property named dataSource of type MSStickerBrowserViewDataSource?. Your browser view controller by default will become this data source, which means that you need to implement all the non-optional methods of this protocol, such as numberOfStickers(in:). So let’s do that now:
override func numberOfStickers(in stickerBrowserView: MSStickerBrowserView) -> Int { return stickers.count } override func stickerBrowserView(_ stickerBrowserView: MSStickerBrowserView, stickerAt index: Int) -> MSSticker { return stickers[index] }
Our browser view controller is done, but how do we display it to the user? Remember our MSMessagesAppViewController? Well, the answer is through that view controller. In the viewDidLoad() function of the aforementioned view controller, load your browser view controller and add it as a child view controller:
override func viewDidLoad() { super.viewDidLoad() let controller = BrowserViewController(stickerSize: .regular) controller.willMove(toParentViewController: self) addChildViewController(controller) if let vcView = controller.view { view.addSubview(controller.view) vcView.frame = view.bounds vcView.translatesAutoresizingMaskIntoConstraints = false vcView.leftAnchor.constraint(equalTo: view.leftAnchor).isActive = true vcView.rightAnchor.constraint(equalTo: view.rightAnchor).isActive = true vcView.topAnchor.constraint(equalTo: view.topAnchor).isActive = true vcView.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true } controller.didMove(toParentViewController: self) }
Now press the Run button on Xcode to run your application on the simulator or device.
In this list, simply choose the Messages app and continue. Once the simulator is running, you can manually open the Messages app, go to an existing conversation that is already placed for you there by the simulator, and press the Apps button on the keyboard.
You May Interested In: SECURITY RISKS TO iOS APPS
Conclusion
In this blog, I introduced you to the new Messages framework in iOS 10, which allows you to create sticker packs and applications to integrate with iMessage. We covered the basic classes you need to be aware of, including MSStickerBrowserViewController, MSMessageAppViewController, MSSticker, and MSStickerView.
The Messages framework provides APIs to give you a large amount of control over your iMessage apps. For further reading, I would recommend checking out Apple’s Messages Framework Reference.