iMessage Apps

With iOS 10 is now possible to create an app that lives directly within iMessage. This allows for users to interact with your app without leaving their conversations.

Apple provides an App Store so that apps that can be downloaded directly within iMessage.

To make these apps you have different options, it can be a Standalone app or it can be an Extension to an iOS app.

The app can be as simply a Sticker pack, a great option for designers since no code is required, you would still need to submit your app for approval and have a Apple Developer Account.

On WWDC Apple provided two dedicated talks to get started on iMessage Apps, named respectively iMessage Apps And Stickers – Part 1 and iMessage Apps And Stickers – Part 2.

Apple also provides a sample code project Ice Cream Builder where it shows how it is possible to build an app extension that lets users send interactive messages and create stickers.

As the name says it allows for users to create stickers of ice cream. So we can see that is possible to create a collaborative tool between users to create content inside a conversation.

What is nice is that you can use the simulator to see both ends of the conversation.

The framework of reference for the iMessage apps is the Messages Framework.

You can present a custom user interface using the MSMessagesAppViewController.

To present a sticker browser with drag-and-drop functionality you can use the MSStickerBrowserViewController.

Other interesting objects are:

  • MSConversation: Insert text, stickers, or media files;
  • MSMessage: Create interactive messages with app-specific data;
  • MSSession: Update interactive messages for example in collaborative apps;

 

In this spike we explored how to add an iMessage App as an extension to an existing iOS application.

The first step was to add a new target with the iMessage Extension:

screen-shot-2016-11-27-at-17-00-01

This creates a MessagesViewController a subclass of MSMessagesAppViewController, that is the first view controller shown when the user opens the iMessage app, a Storyboard with the initial view controller and it’s interface, and the assets folder with the icon of our app.

screen-shot-2016-11-27-at-17-05-18

Since we can share code between the iOS app and the iMessage Extension it was fairly easy to render a list of items in the iMessage app. In this case the app allows to watch stream and we render a list of channels in the messages app.

Pasted_Image_27_11_2016__17_28.png

The next step was to send the channel information so users can share their favourite channels with their friends trough iMessage.

To do that we create a MSMessage, set its layout using MSMessageTemplateLayout, and insert it in the active MSConversation.

The result is the following:

Screen_Shot_2016-11-27_at_18_26_10.png

To import the information of the selected message it is needed to encode and decode the information from the selected message URL. The way Apple does it on the example is by using URLQueryItem to encode the information of our model.

Like this it is possible to import the information sent on the message directly into our app, in this case is the channel information:

Screen Shot 2016-11-27 at 19.03.53.png

With the information provided by Apple on the WWDC talks and the documentation is fairly easy to get started with iMessage Apps.

There are other API’s that we didn’t explore in this spike, such as Group Conversations or sender identification.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s