iMessage Extensions

Eines der Tentpole-Features von iOS 10 sind iMessage-Extensions. Sie erlauben die Integration von 3rd party Apps innerhalb des Nachrichten-App. Ich zeige die verschiedenen Spielarten von Sticker-Packs bis zu vollwertigen Extensions mit Code. Zusammen bauen wir eine iMessage-Extension für die Macoun-App.

Transcript

1. iMessage Extensions Ortwin Gentz @ortwingentz
2. Warum? •Nachrichten-App eine der meistgenutzten Apps •Neue Interaktionsmöglichkeiten •Eigener App Store •Virale Verbreitung
3. Spielarten •Sticker Packs •iMessage Apps •Standalone •Extension in iOS-App
4. Kompatibilität •iOS 10 •watchOS 3 •macOS Sierra (Sticker) •Fallback macOS, älteres iOS: •Bild (Sticker) •Bild + Link (iMessage Apps)
5. Der iMessage App Store
6. Spiele 19 % Apps 14 % Sticker Packs 67 % Top 150 Free US iMessage App Store auf dem iPhone, 28.9.2016
7. Spiele 10 % Apps 13 % Sticker Packs 77 % Top 150 Free DE iMessage App Store auf dem iPhone, 28.9.2016
8. Spiele Apps 4 % Sticker Packs 92 % Top 150 Grossing US iMessage App Store auf dem iPhone, 28.9.2016
9. Spiele Apps 3 % Sticker Packs 95 % Top 150 Grossing DE iMessage App Store auf dem iPhone, 28.9.2016
10. Paid + IAP 3 % Freemium 6 % Paid 91 % Top 150 Grossing US iMessage App Store auf dem iPhone, 28.9.2016
11. Paid + IAP 1 % Freemium 4 % Paid 95 % Top 150 Grossing DE iMessage App Store auf dem iPhone, 28.9.2016
12. Quelle: SensorTower Spiele Unterhaltung Dienstprogramme Produktivität Soziale Netze Foto & Video Reisen Bildung Gesundheit & Fitness Essen & Trinken Business Lifestyle Sport Shopping Referenz Navigation Finanzen Wetter Nachrichten Bücher Musik Medizin 0 25 50 75 100 1 3 4 6 6 8 9 9 12 12 13 13 15 17 18 21 23 25 26 31 39 91 iMessage-Enabled Apps Weltweit
13. Sticker Packs
14. Demo
15. Formate Statisch Animiert PNG APNG JPEG GIF Max 500 KB Empfohlen
16. Optimale Größen Small Medium Large 100x100 @3x 136x136 @3x 206x206 @3x
17. Custom Sticker Apps
18. Warum Custom Sticker Apps? •Customized UI •Dynamisch erzeugte oder geladene Sticker •Kamerazugriff •In App Purchasing
19. MSStickerBrowserView MSStickerBrowserViewController MSStickerBrowserViewDatasource MSStickerView MSSticker
20. iMessage Apps
21. Möglichkeiten & Grenzen • „Interaktive“ Nachrichten • Antworten auf Nachrichten • Einfügen von Text, Medien, Attachments • Zustandsübergabe nur per URL (Sonderfall data://) • Kein Zugriff auf Chat- Transkript • Kein Zugriff auf Teilnehmer- Namen, nur lokale UUIDs
22. UI
23. Compact Expanded
24. Compact Expanded
25. Compact Expanded
26. Compact Expanded
27. Tastatur
28. Compact Expanded
29. Compact Expanded
30. Compact Expanded
31. Compact Expanded
32. Compact Expanded rdar://27553447 rdar://27524689 rdar://27453762
33. MSMessagesAppViewController
34. MSMessagesAppViewController • Application State Changes func willBecomeActive(with: MSConversation) func didBecomeActive(with: MSConversation) func willResignActive(with: MSConversation) func didResignActive(with: MSConversation)
35. MSMessagesAppViewController • Application State Changes • Aufruf der Haupt-App extensionContext?.open(url, completionHandler: nil)
 // only custom URL scheme!
36. func willSelect(MSMessage, conversation: MSConversation) func didSelect(MSMessage, conversation: MSConversation) MSMessagesAppViewController • Application State Changes • Aufruf der Haupt-App • Message Selektion
37. func didReceive(MSMessage, conversation: MSConversation) func didStartSending(MSMessage, conversation: MSConversation) func didCancelSending(MSMessage, conversation: MSConversation) MSMessagesAppViewController • Application State Changes • Aufruf der Haupt-App • Message Selektion • Message Empfang, Sendebestätigung
38. var presentationStyle: MSMessagesAppPresentationStyle func requestPresentationStyle (MSMessagesAppPresentationStyle) func willTransition(to: MSMessagesAppPresentationStyle) func didTransition(to: MSMessagesAppPresentationStyle) MSMessagesAppViewController • Application State Changes • Aufruf der Haupt-App • Message Selektion • Message Empfang, Sendebestätigung • Presentation Style
39. MSMessage
40. MSMessageTemplateLayout let layout = MSMessageTemplateLayout() layout.image layout.mediaFileURL
41. MSMessageTemplateLayout let layout = MSMessageTemplateLayout() layout.image layout.mediaFileURL Bild oder Video
42. MSMessageTemplateLayout let layout = MSMessageTemplateLayout() layout.image layout.mediaFileURL layout.imageTitle Image Title
43. MSMessageTemplateLayout let layout = MSMessageTemplateLayout() layout.image layout.mediaFileURL layout.imageTitle layout.imageSubtitle Image Title Image Subtitle
44. MSMessageTemplateLayout let layout = MSMessageTemplateLayout() layout.image layout.mediaFileURL layout.imageTitle layout.imageSubtitle layout.caption Image Title Image Subtitle Caption
45. MSMessageTemplateLayout let layout = MSMessageTemplateLayout() layout.image layout.mediaFileURL layout.imageTitle layout.imageSubtitle layout.caption layout.trailingCaption Image Title Image Subtitle Caption Trailing caption
46. MSMessageTemplateLayout let layout = MSMessageTemplateLayout() layout.image layout.mediaFileURL layout.imageTitle layout.imageSubtitle layout.caption layout.trailingCaption layout.subcaption Image Title Image Subtitle Caption Subcaption Trailing caption
47. MSMessageTemplateLayout let layout = MSMessageTemplateLayout() layout.image layout.mediaFileURL layout.imageTitle layout.imageSubtitle layout.caption layout.trailingCaption layout.subcaption layout.trailingSubcaption Image Title Image Subtitle Caption Subcaption Trailing caption Trailing subcaption
48. layout.caption = “$\(conversation.localParticipantIdentifier. uuidString) gefällt das" Image Title Image Subtitle Subcaption Caption
49. 7D06996E-20F7-4… gefällt das layout.caption = “$\(conversation.localParticipantIdentifier. uuidString) gefällt das" Image Title Image Subtitle Subcaption
50. Thomas gefällt das layout.caption = “$\(conversation.localParticipantIdentifier. uuidString) gefällt das" Image Title Image Subtitle Subcaption
51. let message = MSMessage() message.layout = layout message.url = "http://example.com/?abc" message.accessibilityLabel = … self.activeConversation?.insert(message) { error in // Check for an error }) MSMessage
52. Demo: Macoun-App
53. Links •Radars: http://openradar.appspot.com/search?query=imessage •http://futuretap.com/whereto/download-imessage
54. Fragen? Ortwin Gentz @ortwingentz
55. Vielen Dank We're Hiring!
56. Macoun ⌘