Using iOS 10 to Develop iMessage App .

Posted in: Blog

With iOS 10, Apple has opened up the messages application to developers by using a new application template called iMessage App. It is advisable to developers that they familiarize themselves with the iOS ecosystem – before getting started with new iMessage application.

Ecosystem is an iMessage app store that is completely separate from the regular App Store (iOS). Since Ecosystem exists independently, a developer can create an iMessage app without depending on the iOS app store.

Developers can access the Ecosystem using the message application. It allows them to create applications which include sticker packs and fully interactive interfaces in iMessage inline content.

Using new message framework, following are the requirements to create basic iMessage app:

  1. Xcode 8
  2. OS X El Capitan
    .

Xcode 8 comes with a template to create a quick and easy iMessage sticker pack. The advantage of using this template is that developers don’t need to write any code.

Developers can create stickers by using the following sizes:

  • 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)
    .

All the above sizes can be applied for all stickers in the pack. The largest image can also be used, without much hassle, as the system will downscale the image when being displayed on the devices.

Limitations on the images which can be used as a sticker pack are:

  1. Image cannot be larger than 500 KB in file size
  2. Image cannot be larger than 206 x 206 pt (618 x 618 pixels)
  3. Image cannot be smaller than 100 x 100 pt (300 x 300 pixels)
  4. Image files must be PNG, APNG, JPEG, GIF format
    .

Following are the steps to create a new project with Xcode 8:

  • Open Xcode 8 to create a new project
  • Under the iOS > Application section, there are two new options: iMessage Application and Sticker Pack Application
  • Select the Sticker Pack Application template

using-ios-10-to-develop-imessage-app-1

  • In the Project Navigator bar of Xcode, you will see the stickers.xcstickers asset catalog in your project. This contains your iMessage application icon and all of the stickers in your pack. You can add stickers in the Sticker Pack, either by right click menu or just by drag and drop option. You can even add animated stickers using a series of images, by selecting New Sticker Sequence in the right click menu.

using-ios-10-to-develop-imessage-app-2

  • Now, the sticker size can be changed using attribute inspector from the right side panel.

using-ios-10-to-develop-imessage-app-3

  • To test the application, press the play button on the top left corner of Xcode. As the simulator gets ready, it will open up the iMessage application as shown in the image below:

using-ios-10-to-develop-imessage-app-4

As a result, all the provided icons will be displayed under your application icon. Tapping on any image will add it to the current message.

Leave a Reply

Your email address will not be published. Required fields are marked *