Basic Sticker Extension using Messages SDK - iMessage App Extension

Message App Extensions

When bots and stickers are already available in most popular messaging apps, Apple has brought the native iMessage applications to the competition. Now developers can create app extensions, which can be part of existing apps or an individual extension which would be available in iMessage App Store. This iMessage App store is completely different from regular App Store.
Using app extensions, Apple will allow its developers to create basic sticker packs, custom sticker applications and custom applications.
Before we jump into the whole coding thing, let's have a quick look at app extensions.

App Extension


An app extension allows the developers to extend the custom functionality and contents beyond the application while the users are interacting with other apps or system.
For example, a Today widget is a great extension to view the information even though the users are using any app.
An app extension is a separate binary that runs independent of the app.


Prerequisites

To develop a message extension, you need to run XCode 8 (Currently available in beta) on El Capitan or Sierra (currently in beta) version.

Basic Sticker Packs


Message apps will become more fun with sticker options. Having amazing designers in the world, Apple really wanted designers to contribute to Message ecosystem.


To make this possible, Apple has provided guidelines for creating the stickers. Even though coding is not required to create this extension, it do require to create images.


Talking about guidelines,


- The image must be PNG, APNG, GIF and JPEG file.
- The file size should be less than 500 kb.
For better display of images, Apple recommends to scale images in the below range.

Minimum Maximum
Small 100 x 100 300 x 300
Medium 136 x 136 378 x 378
Large 206 x 206 618 x 618
Let’s create few images and prepare out sticker pack. The images will be uploaded along with this project. So you can reuse it to play around.

1. Launch XCode 8






    2. Create a new iOS extension application, Choose XCode -> New -> Project




    3. XCode will now open the available template options. Select Sticker Pack Application template

    4. Enter your project name. For this demo purpose, I have created a project, IconFinder. There is no option to select the language, since no coding is involved in this process. Click Next.



    5. XCode will prompt to select the location to save the project. Choose a location of your choice.

    6. Now, the project is created. You can observer the project has only one blue coloured folder, Stickers.xcstickers file. This is the Assets folder for this project. Assets folder makes easy to maintain the graphics for different scale like @2x and @3x and also for different devices like iPhone and iPad.



    7. Choose Stickers.xcstickers. Drag and drop the created stickers to the center white area. Now you can see the images are created as files.

    8. Click on the Inspector panel. Select the Sticker Size to Small. This option is related to Sticker image size created by you. For this demo project, I created all the images in size, 100 * 100. So I define my sticker size setting to Small. Do change your settings appropriately.



    9. Build and Run the project. You can press CMD + R keys.

    10. Starting from XCode 8, Message apps are now built-in to Simulators. Launch Message apps.

    11. You will see a new conversation is opened. Next to text field, you will now see 3 new buttons.

    12. First button is to open Camera/Photo gallery. Second button is to write hand written messages. Third button is to open iMessage App Store. Tap on the third button.



    13. iMessage App Store will now show our IconFinder app. Tap on IconFinder app.

    14. The created Stickers will be shown. Tap on any sticker.



    15. Type your custom message and click on the Arrow button to send the message.





    Finally, we are able to create an app extension without a single line of code for iMessage app. Apple made it easy for developers to test on simulator by providing both the end conversation on same simulator. So no need to switch device to check the messages.



     We will dive more in detail about how to create a app extension application for iMessage app store in following articles.

    The source code is available for downloaded from github.

     Follow me on Twitter @mcabasheer

    Comments

    Post a Comment

    Popular posts from this blog

    Integrating ZXing QR Code reader in iPhone / iOS applications

    I spent a lot of time in integrating the QR code reader in iOS applications. I like to share you the steps and let you know the basic bugs that may happen during the integration process and how to debug that too :) Step 1  Download the latest code for QR code reader, zxing framework from github here . Step 2  Drag and drop the ZXingWidget.xcodeproj file to your project. Step 3  Copy the cpp folder from downloaded files (zxing-2.0) to your project. (The download files (zxing-2.0) depends upon the version that has been downloaded from github.) Step 4  Copy the iphone folder from downloaded files (zxing-2.0) to your project. (The download files (zxing-2.0) depends upon the version that has been downloaded from github.) Step 5 Add the following frameworks to your project.  Click on Project name -> Target -> Build Phases -> Link with libraries AudioToolbox.framework AddressBookUI.framework AddressBook.framework CoreVideo.framewor...
    Read more

    Multiple line of text in UIPickerView

    UIPickerView is a user interface component available from iOS 2.0 and above. The basic need of UIPickerView is to select any one option from the list of data that are loaded to the picker view. But, by default, only one line of text is allowed to be displayed in a UIPickerView . Today, we will try to add multi-line text to an UIPickerView . To do so, we need to implement the viewForComponent api.   - ( UIView  *)pickerView:( UIPickerView  *)pickerView viewForRow:( NSInteger )row forComponent:( NSInteger )component reusingView:( UIView  *)view; In that method, type cast the view parameter to an UILabel.    UILabel *pickerLabel = ( UILabel *)view; Update the frame size of the label.    CGRect frame = CGRectMake ( 0 , 0 , 265 , 40 );    pickerLabel = [[[ UILabel alloc ] initWithFrame :frame] autorelease ]; Set the properties of the label as per requirement.    [pickerLabel setTextAlig...
    Read more

    Connect Samsung devices to Kies on Mac

    Connecting a Samsung device to Kies installed on Mac is very hard. Here are the few steps which worked for me.   I was testing these steps for Samsung Galaxy S2. 1. Quit Kies application in your mac. 2. Disconnect your Mobile Device from USB. 3. Go to your Samsung Device -> Settings -> Applications -> Development -> Turn Off USB Debugging. 4. Now connect the Device to the PC through USB. 5. Wait until Media Scanning is completed. 6. Wait until MTP Connected. 7. Now Launch the Kies application on Mac. You can see your device is now connected. Here you go, now you can update your device to the latest os through Kies.
    Read more