Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

A Swift Introduction to iOS 10: iMessage

DZone's Guide to

A Swift Introduction to iOS 10: iMessage

We'll continue with our tour of iOS 10 feature with iMessage Apps and Sticker Packs.

· Mobile Zone
Free Resource

Get gorgeous, multi-touch charts for your iOS application with just a few lines of code.

The messaging app space is starting to get pretty competitive and a little crowded. In order to hold it's own against these new entrants, iMessage has a number of updates in iOS, giving it some features that you might already have seen in Facebook Messenger or WeChat.

In effect, we are seeing these messaging apps become platforms of their own, and developers can extend the functionality of the basic messaging apps through both iMessage Apps and Sticker Packs.

iMessage Apps

There's a whole new section in the app store dedicated to iMessage Apps and Games. You can also find these apps by clicking on the app store icon within iMessage. 

Image title

It's a lucrative market with more possibilities than you'd imagine. So let's look at how to create your own app for iMessage.

Adding iMessage App Functionality

Straight off, you have two options; one is that you create an app that just works with iMessage, or alternatively you can create an extension to your own app that will have some iMessage functionality. 

Image title Image title

To create a standalone app, simply use the iMessage Application template when starting out a project.

To add on an extension to your existing app, just click on File/New/Add Target and choose the iMessage Extension. Just as with SiriKit extensions, you should consider using Embedded Frameworks as a way of sharing code between the main app and the iMessage part of the app.

Creating Your User Interface  

Image title

After creating your extension, you get a storyboard to express your user interface, MainInterface.storyboard, as well as the core ViewController, MessagesViewController. 

The MessagesViewController is where the whole extension kicks off.  The key points to note is that you import the Messages framework, and you will be extending the MSMessagesAppViewController

This controller gives you functionality to manage the extension's state, track messages and work with presentation styles. There are two options for this style; compact and expanded. If you are doing anything beyond the really simple, you'll want to request that style using requestPresentationStyle.  

The generated code from Xcode follows: 

//
//  MessagesViewController.swift
//  MessagesExtension


import UIKit
import Messages

class MessagesViewController: MSMessagesAppViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

    // MARK: - Conversation Handling

    override func willBecomeActive(with conversation: MSConversation) {
        // Called when the extension is about to move from the inactive to active state.
        // This will happen when the extension is about to present UI.

        // Use this method to configure the extension and restore previously stored state.
    }

    override func didResignActive(with conversation: MSConversation) {
        // Called when the extension is about to move from the active to inactive state.
        // This will happen when the user dissmises the extension, changes to a different
        // conversation or quits Messages.

        // Use this method to release shared resources, save user data, invalidate timers,
        // and store enough state information to restore your extension to its current state
        // in case it is terminated later.
    }

    override func didReceive(_ message: MSMessage, conversation: MSConversation) {
        // Called when a message arrives that was generated by another instance of this
        // extension on a remote device.

        // Use this method to trigger UI updates in response to the message.
    }

    override func didStartSending(_ message: MSMessage, conversation: MSConversation) {
        // Called when the user taps the send button.
    }

    override func didCancelSending(_ message: MSMessage, conversation: MSConversation) {
        // Called when the user deletes the message without sending it.

        // Use this to clean up state related to the deleted message.
    }

    override func willTransition(to presentationStyle: MSMessagesAppPresentationStyle) {
        // Called before the extension transitions to a new presentation style.

        // Use this method to prepare for the change in presentation style.
    }

    override func didTransition(to presentationStyle: MSMessagesAppPresentationStyle) {
        // Called after the extension transitions to a new presentation style.

        // Use this method to finalize any behaviors associated with the change in presentation style.
    }

}


Sam Burnstone has done a great job of building an iMessage app that allows you to play battleship with your friends. 

Image title

iMessage Sticker Packs

Next we’ll take a look at Sticker Packs. They’re a bit weird, as they require no coding at all. They give users a new way to express themselves in iMessage without emojis; it's just an image, that may be animated, placed on top of messages in a conversation.

While some of us may wonder at what possible use stickers have on iOS, you will certainly think again when you see that Line sold "$268 million worth of stickers last year amid Asia's messaging boom".

So there's obviously a big chance for revenue here, and there's no coding required. Surely this is one feature that will get your attention. 

A Simple Step By Step Guide

First select Sticker Pack Application in the new project dialog 

Image title

Next, you'll want to create some icons to represent the app in the App Store and in the app drawer in iMessage. Just drag icons of the appropriate size onto the App Icon section of the .xcstickers file.

Image title

Adding in stickers themselves is even easier. Just go to the Sticker Pack folder and drop in the images you want to use. If you wish you can change the size of the stickers in the Attributes Inspector (Small, Medium or Large). 

Image title

You can add in animated gifs too. 

The finished product works as follows 

Image title

If you want to do anything more complicated with your sticker pack, you will need to venture into the iMessage App framework. Already developers are getting creative with what's possible in iMessage, so get in there quick to make your mark!

Tutorials and Examples 

Here's some useful links and tutorials to help you along with creating apps and sticker packs for iMessage: 

You can view the full talk that I gave on iOS 10 at a recent developer event here


.Net developers: use Highcharts, the industry's leading interactive charting library, without writing a single line of JavaScript.

Topics:
swift ,ios 10 ,sticker packs ,imessage

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}