Custom Message extension using Messages SDK - iMessage App store

In our previous article, we discussed about creating custom sticker extension for our iMessage App store. We used images and using Messages SDK, we are able to create the custom extension for sticker. We also created a basic sticker extension in this article.

Apple Messages SDK provides lot more features than just creating stickers. In today's article, we will create a custom message extension using Messages SDK and run them on iMessage app store.

Before diving in to the project, lets look at the classes provided by Apple for implementation.

MSMessagesAppViewController

The MSMessagesAppViewController class acts as the principal view controller for Messages extensions. Use this class to manage your extension.

MSMessageTemplateLayout

The MSMessageTemplateLayout describes how an MSMessage object is presented in the transcript. The message template includes the Message extension’s icon, an image, video, or audio file, and a number of text elements (title, subtitle, caption, subcaption, trailing caption, and trailing subcaption).

The layout will look like this,

MSMessage

Use the MSMessage class to create interactive message objects. To create a message that can be updated by the conversation’s participants, instantiate a message with a session using the init(session:) method. Otherwise, instantiate the message using the init() method.



This demo project is created in iOS 10 sdk using XCode 8 beta 

Requirement
In our demo project we will send our mood to our friends using iMessage app.

1. Create a new project. XCode - New - Project.

2. Select iMessage Application template.

3. Enter a project name. For this demo project I will be using CustomMessageExtension. Save the application.

4. The application template will create a folder, MessagesExtension folder and it will contain, MessagesViewController.swift file. This class is a subclass of MSMessagesAppViewController class. Any operation related to MSMessagesAppViewController will be handled in this class.

5. Select MainInterface.storyboard file. Choose the Message View Controller's view  and add the following UI Components.
    Label. Caption: Choose your mood
    Button. Image : Happy
    Button. Image : Normal
    Button. Image : Sad

After adding the UI Componenets your view should look like this. The image size are maintained at 206 * 206.

Create 3 button action methods and link them to the implementation file.

6. Select MessagesViewController.swfit. Lets go through the delegate methods which we will be using for this extension.

func didReceive(_ message: MSMessage, conversation: MSConversation)

 // Called when a message arrives that was generated by another instance of this
 // extension on a remote device.


7. Add IBAction methods for the 3 buttons that are added to the View.

    @IBAction func happyClicked(_ sender: AnyObject) {
    }
    
    @IBAction func normalClicked(_ sender: AnyObject) {
    }
    
    @IBAction func sadClicked(_ sender: AnyObject) {
    }

8. In our app, when a button is tapped, we will create a message and pass it to the active conversation. To create a message, lets write down a new method, getMessage() method.

func getMessage(customMessage: String, caption: String) -> MSMessage {

// Create a variable 'components'
        var components = URLComponents()
        
        // create a query item from our custom message
        let item = URLQueryItem(name: "MyMood", value: customMessage)
        
        // put it into an array of query items
        var items = [URLQueryItem]()
        items.append(item)
        components.queryItems = items
        
        // tell messages to use the default message template layout
        let layout = MSMessageTemplateLayout()
        layout.caption = customMessage
        layout.subcaption = "sub caption"
        layout.trailingCaption = "trailing"
        layout.trailingSubcaption = "sub trailing"
        layout.image = UIImage(named: "\(caption).jpg")
        layout.imageTitle = caption
        
        // create a message and tell it the content and layout
        let message = MSMessage()
        message.url = components.url!
        message.layout = layout
        
        // return it for sending
        return message
    }


9. Now call this getMessgae() method on each button action.
let message = getMessage(customMessage: "I'm happy today", caption: "happy")

10. The returned MSMessage object should be passed to the active conversation.
self.activeConversation?.insert(message, completionHandler: nil)

11. Now build and run the project. Press Command + R key.

12. Simulator will be launched and Message application will be opened.

13. Open a conversation. Tap on the AppStore button.

14. Now you should see the Custom Message extension icon. Tap on it to launch the extension.

15. You will see the mood caption label and 3 mood buttons are shown.

16. Tap on a mood button and you can see the message layout is added in the input field. Type any message and click on send button.

17. Tapping on the arrow will bring the extension to full screen.

Here we are, created a 3 kinds of message extensions using Messages SDK for iMessage App store.

Apple don't create all the best apps, but they provide the platform for developers who can create much more better and more options for the users and yet again they proved it by providing the Messages SDK.

You can read more about Message SDK in Apple Developer portal.

Hope you enjoyed this tutorial series. 

The source code is available for download from github.

Follow me on Twitter @mcabasheer