{"id":2057,"date":"2016-06-14T01:33:57","date_gmt":"2016-06-14T07:33:57","guid":{"rendered":"http:\/\/jamesonquave.com\/blog\/?p=2057"},"modified":"2016-06-23T02:34:13","modified_gmt":"2016-06-23T08:34:13","slug":"creating-imessage-apps-with-xcode-8-tutorial-part-1","status":"publish","type":"post","link":"https:\/\/jamesonquave.com\/blog\/creating-imessage-apps-with-xcode-8-tutorial-part-1\/","title":{"rendered":"Creating an iMessage Sticker App on iOS 10 with Swift &#8211; Tutorial (Part 1)"},"content":{"rendered":"<h1 id=\"creating-imessage-apps-with-xcode-8\">Creating iMessage Apps with XCode 8<\/h1>\n<p><em>This is part of a series of tutorials introducing new features in iOS 10, the Swift programming language, and the new XCode 8 beta, which were just announced at WWDC 16<\/em><\/p>\n<h2 id=\"intro\">Intro<\/h2>\n<p>Among the most exciting additions in iOS 10 are some of the new app extension types, and the new extension type that really caught my attention was the iMessage app, which allow you to add functionality to the built-in Messages app on iOS.<\/p>\n<p>Unlike other extension types, which requires you to bundle your extension with a standard app, iMessage apps can be released as standalone apps through the the new iMessage App Store, which will be accessible from within the Messages app. While you can include your Messages app extension as part of a standalone app, with this new branch of the app store, for the first time, you don&#8217;t have to.<\/p>\n<p>When users use your iMessage app to communicate with people who don&#8217;t have it, the recipient will be prompted with a link to download it from the store.<\/p>\n<p>The purpose of this tutorial is to create a quick, searchable guide for creating a sticker app (which you can do without writing a line of code), and very briefly introduce the new Messages framework (Messages.framework) for building interactive apps.<\/p>\n<h2 id=\"what-s-changed-with-the-messages-app-\"><\/h2>\n<h2 id=\"creating-content-and-apps-for-imessage\">Creating Content and Apps for iMessage<\/h2>\n<h3 id=\"imessage-sticker-apps\">iMessage Sticker Apps<\/h3>\n<p>There&#8217;s a very easy option for artists (even non-programmers) who want to release content for the iMessage app store. You can offer sticker apps: purchasable packs of stickers (even animated stickers) that users can &#8220;peel&#8221; (using a long press) and slap onto any balloon in a conversation. Like all iMessage apps, these packs can be a bonus bundled with your existing app, or a standalone package offered for sale. Apart from creating the assets, releasing a sticker app couldn&#8217;t be much easier.<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/jamesonquave.com\/blog\/wp-content\/uploads\/6-iMessageApp.png\" alt=\"Still in Beta\" \/><\/p>\n<p><em>A sticker pane, with a sick computer stuck onto a message<\/em><\/p>\n<p>The sticker packs themselves don&#8217;t require any code to create. All you really need is a copy of XCode 8 and an Apple Developer account. The few simple guidelines for creating the assets can be found under &#8220;Sticker Packs&#8221; in the <a href=\"\/\/developer.apple.com\/reference\/messages&quot;\">Messages Framework reference<\/a>. For convenience, I&#8217;ve copied a slightly-edited version here.<\/p>\n<p>Each sticker image should meet this criteria:<\/p>\n<blockquote>\n<ul>\n<li>The image must be a PNG, APNG, GIF or JPEG file.<\/li>\n<li>The file must be less than 500KB.<\/li>\n<li>The image must be between 100&#215;100 and 206&#215;206 <strong>points<\/strong><\/li>\n<\/ul>\n<\/blockquote>\n<p>PNG or APNG (Animated PNG) will generally look best. Make sure your stickers look good against different color backgrounds; they can be applied to photos.<\/p>\n<p>Apple uses points (rather than pixels) for screen coordinates and dimensions on their devices. <strong>10&#215;10 points (pt) @ 2x equals 20&#215;20 pixels (px).<\/strong> The original retina display crammed 4 pixels into the space of one (1&#215;1 became 2&#215;2). Simply by providing &#8216;@2x&#8217; copies of images at that higher resolution, developers were able to quickly update their old apps to support the sharper display.<\/p>\n<p>Always provide @3x images &#8211; between 300&#215;300 and 618&#215;618 <strong>pixels<\/strong>. The system generates the @2x and @1x versions by downscaling the @3x images at runtime.<\/p>\n<blockquote><p>In Xcode\u2019s Attributes inspector, set the Sticker Size for the entire Sticker pack. The system lays out the stickers in the browser based on these sizes. To best match the browser, use sticker images of the specified size. The Sticker Size defaults to Medium.<\/p><\/blockquote>\n<p>The recommended maximum dimensions for each size setting are:<\/p>\n<ul>\n<li>Small: 100x100pts.<\/li>\n<li>Medium: 136x136pts.<\/li>\n<li>Large: 206x206pts.<\/li>\n<\/ul>\n<p><img decoding=\"async\" src=\"http:\/\/jamesonquave.com\/blog\/wp-content\/uploads\/9-iMessageApp.png\" alt=\"Attributes Inspector\" \/><\/p>\n<p><em>Xcode&#8217;s Attributes Inspector after selecting the &#8220;Sticker Pack&#8221; group in Stickers.xcstickers<\/em><\/p>\n<h3 id=\"building-the-app\">Building the App<\/h3>\n<p>Start a new project in XCode, and you&#8217;ll see there&#8217;s a new template for creating a standalone sticker pack.<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/jamesonquave.com\/blog\/wp-content\/uploads\/5-iMessageApp.png\" alt=\"Sticker Pack Template\" \/><\/p>\n<p>You&#8217;re almost done. Select Stickers.xcstickers and add some icons so that your sticker pack looks good in Messages and on the store, then drag your stickers into the &#8220;Sticker Pack&#8221; group.<\/p>\n<p><em>Note: You can create animated (APNG) stickers with just XCode. Right click inside your sticker pack group and select Add Assets -&gt; New Sticker Sequence. Use the attributes inspector on the right to set options like number of frames, framerate and repetition count.<\/em><\/p>\n<p><img decoding=\"async\" src=\"http:\/\/jamesonquave.com\/blog\/wp-content\/uploads\/7-iMessageApp.png\" alt=\"Sticker Pack Template\" \/><\/p>\n<p><em>Note: If the app won&#8217;t run, try the following:<\/em><\/p>\n<ul>\n<li>Select your &#8220;Run&#8221; build scheme, ensure that &#8216;Executable&#8217; is set to [projectname].app (stickers.app in my case)<\/li>\n<li>Provide images for at least the 1x versions of the 27&#215;20, 32&#215;24, and 1024&#215;768 point icons, as well as the 2x icon for &#8220;Settings&#8221; and &#8220;Messages&#8221; for your target platform<\/li>\n<li>Note that 2x means to double the requested dimensions (2x for 29x29pt means provide a 58&#215;58 px image)<\/li>\n<\/ul>\n<p>If you are ramping up to release your app, make sure to provide images for all icon versions and sizes.<\/p>\n<p>The new version of the simulator for iOS 10 includes a special version of the Messages app which allows you to see both sides of a conversation as you test your iMessage apps.<\/p>\n<p class=\"p1\">My sticker app (containing an animated gif and the obligatory cat photo) may not win any awards, but it works. Here is is in action, with the sticker tray open and a few stickers strategically applied:<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-2089 size-full\" style=\"font-weight: 300\" src=\"http:\/\/jamesonquave.com\/blog\/wp-content\/uploads\/10-iMessageApp.png\" alt=\"AAAAAAHHHHH!!\" width=\"320\" height=\"533\" \/><\/p>\n<p>If you&#8217;ve made it this far (and provided more\/better art) your app is now ready for submission to iTunes Connect and Apple&#8217;s review process (pending availability of the release\u00a0version of XCode 8).<\/p>\n<h2 id=\"intro\">Customizing the Sticker Browser<\/h2>\n<p>Developers should be aware that it is possible to customize the appearance of the sticker browser (the window that users peel stickers from) in a full-fledged iMessage app by subclassing <a href=\"https:\/\/developer.apple.com\/reference\/messages\/msstickerbrowserviewcontroller\">MSStickerBrowserViewController<\/a>. You can also load stickers dynamically by setting your StickerBrowserViewController&#8217;s data source to a class which conforms to <a href=\"https:\/\/developer.apple.com\/reference\/messages\/msstickerbrowserviewdatasource\">MSStickerBrowserViewDataSource<\/a>.<\/p>\n<h3 id=\"developing-interactive-imessage-apps\">Developing Interactive iMessage Apps<\/h3>\n<p>There&#8217;s a lot more you can do with iMessage Apps. For now, I just want to briefly discuss <a href=\"https:\/\/developer.apple.com\/reference\/messages\">Messages.framework<\/a>. I hope to dive much deeper in the near future.<\/p>\n<p><em>Note: There is one major limitation that may kill your\u00a0idea. You won&#8217;t be allowed to read the content of user&#8217;s messages or even, necessarily, know anything about the participants in the session. Apple takes privacy very seriously; this is as it should be.<\/em><\/p>\n<p>A number of the built-in apps provide good examples. Apart from the sticker features, the new drawing capabilities, the music sharing app and the Bing image search, in particular, are good examples of the type of thing that third-party developers could realistically build today.<\/p>\n<p>There is a new, relatively bare-bones, project template in XCode 8: &#8220;Messages Application&#8221;. <em>MessagesViewController<\/em> a subclass of <em>MSMessagesAppViewController<\/em> is your main entry point and does at least provide a number of comments. This is the view controller behind your app&#8217;s view in the app drawer and when expanded.<\/p>\n<p>The <a href=\"https:\/\/developer.apple.com\/reference\/messages\">documentation on these classes<\/a> is there for anyone getting started and a helpful <a href=\"https:\/\/developer.apple.com\/videos\/play\/wwdc2016\/224\/\">introduction<\/a> and <a href=\"https:\/\/developer.apple.com\/library\/prerelease\/content\/samplecode\/IceCreamBuilder\/Introduction\/Intro.html#\/\/apple_ref\/doc\/uid\/TP40017329\">associated sample project<\/a> are now available.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Creating iMessage Apps with XCode 8 This is part of a series of tutorials introducing new features in iOS 10, the Swift programming language, and the new XCode 8 beta, which were just announced at WWDC 16 Intro Among the most exciting additions in iOS 10 are some of the new app extension types, and&#8230;<\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_links_to":"","_links_to_target":""},"categories":[10,89,91],"tags":[90,92,36,93],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v19.13 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Creating an iMessage Sticker App on iOS 10 with Swift - Tutorial (Part 1) - Jameson Quave<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/jamesonquave.com\/blog\/creating-imessage-apps-with-xcode-8-tutorial-part-1\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Creating an iMessage Sticker App on iOS 10 with Swift - Tutorial (Part 1) - Jameson Quave\" \/>\n<meta property=\"og:description\" content=\"Creating iMessage Apps with XCode 8 This is part of a series of tutorials introducing new features in iOS 10, the Swift programming language, and the new XCode 8 beta, which were just announced at WWDC 16 Intro Among the most exciting additions in iOS 10 are some of the new app extension types, and...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jamesonquave.com\/blog\/creating-imessage-apps-with-xcode-8-tutorial-part-1\/\" \/>\n<meta property=\"og:site_name\" content=\"Jameson Quave\" \/>\n<meta property=\"article:published_time\" content=\"2016-06-14T07:33:57+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2016-06-23T08:34:13+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/jamesonquave.com\/blog\/wp-content\/uploads\/6-iMessageApp.png\" \/>\n<meta name=\"author\" content=\"Jason Newell\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jason Newell\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/jamesonquave.com\/blog\/creating-imessage-apps-with-xcode-8-tutorial-part-1\/\",\"url\":\"https:\/\/jamesonquave.com\/blog\/creating-imessage-apps-with-xcode-8-tutorial-part-1\/\",\"name\":\"Creating an iMessage Sticker App on iOS 10 with Swift - Tutorial (Part 1) - Jameson Quave\",\"isPartOf\":{\"@id\":\"https:\/\/jamesonquave.com\/blog\/#website\"},\"datePublished\":\"2016-06-14T07:33:57+00:00\",\"dateModified\":\"2016-06-23T08:34:13+00:00\",\"author\":{\"@id\":\"https:\/\/jamesonquave.com\/blog\/#\/schema\/person\/f9280beb862ff805cb1e4545311f8c4b\"},\"breadcrumb\":{\"@id\":\"https:\/\/jamesonquave.com\/blog\/creating-imessage-apps-with-xcode-8-tutorial-part-1\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/jamesonquave.com\/blog\/creating-imessage-apps-with-xcode-8-tutorial-part-1\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/jamesonquave.com\/blog\/creating-imessage-apps-with-xcode-8-tutorial-part-1\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/jamesonquave.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Creating an iMessage Sticker App on iOS 10 with Swift &#8211; Tutorial (Part 1)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/jamesonquave.com\/blog\/#website\",\"url\":\"https:\/\/jamesonquave.com\/blog\/\",\"name\":\"Jameson Quave\",\"description\":\"Using computer technology to educate, and improve lives.\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/jamesonquave.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/jamesonquave.com\/blog\/#\/schema\/person\/f9280beb862ff805cb1e4545311f8c4b\",\"name\":\"Jason Newell\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jamesonquave.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/575497a137605d6bb40c2a2e0f77d0b9?s=96&d=retro&r=pg\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/575497a137605d6bb40c2a2e0f77d0b9?s=96&d=retro&r=pg\",\"caption\":\"Jason Newell\"},\"description\":\"Jason Newell is a full-stack web and application developer specializing in server-side Ruby, Swift, and most recently TVML. Most recently, Jason has developed the DAD App platform for Apple TV.\",\"url\":\"https:\/\/jamesonquave.com\/blog\/author\/newell-jasonb\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Creating an iMessage Sticker App on iOS 10 with Swift - Tutorial (Part 1) - Jameson Quave","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/jamesonquave.com\/blog\/creating-imessage-apps-with-xcode-8-tutorial-part-1\/","og_locale":"en_US","og_type":"article","og_title":"Creating an iMessage Sticker App on iOS 10 with Swift - Tutorial (Part 1) - Jameson Quave","og_description":"Creating iMessage Apps with XCode 8 This is part of a series of tutorials introducing new features in iOS 10, the Swift programming language, and the new XCode 8 beta, which were just announced at WWDC 16 Intro Among the most exciting additions in iOS 10 are some of the new app extension types, and...","og_url":"https:\/\/jamesonquave.com\/blog\/creating-imessage-apps-with-xcode-8-tutorial-part-1\/","og_site_name":"Jameson Quave","article_published_time":"2016-06-14T07:33:57+00:00","article_modified_time":"2016-06-23T08:34:13+00:00","og_image":[{"url":"http:\/\/jamesonquave.com\/blog\/wp-content\/uploads\/6-iMessageApp.png"}],"author":"Jason Newell","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Jason Newell","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/jamesonquave.com\/blog\/creating-imessage-apps-with-xcode-8-tutorial-part-1\/","url":"https:\/\/jamesonquave.com\/blog\/creating-imessage-apps-with-xcode-8-tutorial-part-1\/","name":"Creating an iMessage Sticker App on iOS 10 with Swift - Tutorial (Part 1) - Jameson Quave","isPartOf":{"@id":"https:\/\/jamesonquave.com\/blog\/#website"},"datePublished":"2016-06-14T07:33:57+00:00","dateModified":"2016-06-23T08:34:13+00:00","author":{"@id":"https:\/\/jamesonquave.com\/blog\/#\/schema\/person\/f9280beb862ff805cb1e4545311f8c4b"},"breadcrumb":{"@id":"https:\/\/jamesonquave.com\/blog\/creating-imessage-apps-with-xcode-8-tutorial-part-1\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jamesonquave.com\/blog\/creating-imessage-apps-with-xcode-8-tutorial-part-1\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/jamesonquave.com\/blog\/creating-imessage-apps-with-xcode-8-tutorial-part-1\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jamesonquave.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Creating an iMessage Sticker App on iOS 10 with Swift &#8211; Tutorial (Part 1)"}]},{"@type":"WebSite","@id":"https:\/\/jamesonquave.com\/blog\/#website","url":"https:\/\/jamesonquave.com\/blog\/","name":"Jameson Quave","description":"Using computer technology to educate, and improve lives.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/jamesonquave.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/jamesonquave.com\/blog\/#\/schema\/person\/f9280beb862ff805cb1e4545311f8c4b","name":"Jason Newell","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jamesonquave.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/575497a137605d6bb40c2a2e0f77d0b9?s=96&d=retro&r=pg","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/575497a137605d6bb40c2a2e0f77d0b9?s=96&d=retro&r=pg","caption":"Jason Newell"},"description":"Jason Newell is a full-stack web and application developer specializing in server-side Ruby, Swift, and most recently TVML. Most recently, Jason has developed the DAD App platform for Apple TV.","url":"https:\/\/jamesonquave.com\/blog\/author\/newell-jasonb\/"}]}},"_links":{"self":[{"href":"https:\/\/jamesonquave.com\/blog\/wp-json\/wp\/v2\/posts\/2057"}],"collection":[{"href":"https:\/\/jamesonquave.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jamesonquave.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jamesonquave.com\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/jamesonquave.com\/blog\/wp-json\/wp\/v2\/comments?post=2057"}],"version-history":[{"count":19,"href":"https:\/\/jamesonquave.com\/blog\/wp-json\/wp\/v2\/posts\/2057\/revisions"}],"predecessor-version":[{"id":2090,"href":"https:\/\/jamesonquave.com\/blog\/wp-json\/wp\/v2\/posts\/2057\/revisions\/2090"}],"wp:attachment":[{"href":"https:\/\/jamesonquave.com\/blog\/wp-json\/wp\/v2\/media?parent=2057"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jamesonquave.com\/blog\/wp-json\/wp\/v2\/categories?post=2057"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jamesonquave.com\/blog\/wp-json\/wp\/v2\/tags?post=2057"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}