imessage Apps and Stickers, Part 2

Size: px

Start display at page:

Download "imessage Apps and Stickers, Part 2"

Mariah Willis
6 years ago
Views:

1 App Frameworks #WWDC16 imessage Apps and Stickers, Part 2 Interactive Messages Session 224 Alex Carter Messages Engineer Stephen Lottermoser Messages Engineer 2016 Apple Inc. All rights reserved. Redistribution or public display not permitted without written permission from Apple.

2 Recap imessage Apps, Part 1

3 NEW imessage Apps Interactive Messages

4 Introduction

5 Introduction Interactive Messages

6 Introduction Interactive Messages Messages Extension

7 Introduction Interactive Messages Messages Extension Compose an Interactive Message

8 Introduction Interactive Messages Messages Extension Compose an Interactive Message

9 Introduction Interactive Messages Messages Extension Compose an Interactive Message Reply to an Interactive Message

10 Introduction Interactive Messages Messages Extension Compose an Interactive Message Reply to an Interactive Message

11 Introduction Interactive Messages Messages Extension Compose an Interactive Message Reply to an Interactive Message

12 Introduction Interactive Messages Messages Extension Compose an Interactive Message Reply to an Interactive Message

13 Introduction Interactive Messages Messages Extension Compose an Interactive Message Reply to an Interactive Message

14 Introduction Interactive Messages Messages Extension Compose an Interactive Message Reply to an Interactive Message

15 Introduction Interactive Messages Messages Extension Compose an Interactive Message Reply to an Interactive Message

16 Demo Interactive Messages

17 Interactive Messages

18 Interactive Messages Messages API overview

19 Interactive Messages Messages API overview Extension lifecycle

20 Interactive Messages Messages API overview Extension lifecycle Compose a message

21 Interactive Messages Messages API overview Extension lifecycle Compose a message Send the message

22 Messages API Overview

23 Messages API Overview MSMessagesAppViewController

24 Messages API Overview MSConversation MSMessagesAppViewController

25 Messages API Overview MSConversation MSMessage MSSession MSMessageTemplateLayout MSMessagesAppViewController

26 Messages API Overview MSConversation MSMessage MSSession MSMessageTemplateLayout MSMessagesAppViewController

27 Extension Lifecycle Becoming active

28 Extension Lifecycle Becoming active Process Launched

29 Extension Lifecycle Becoming active Process Launched func didbecomeactive(with conversation: MSConversation)

30 Extension Lifecycle Becoming active Process Launched func viewwillappear(_ animated: Bool) func didbecomeactive(with conversation: MSConversation)

31 Extension Lifecycle Becoming active Process Launched func viewwillappear(_ animated: Bool) func didbecomeactive(with conversation: MSConversation) func viewdidappear(_ animated: Bool)

32 Extension Lifecycle Resigning active

33 Extension Lifecycle Resigning active func viewwilldisappear(_ animated: Bool)

34 Extension Lifecycle Resigning active func viewwilldisappear(_ animated: Bool) func viewdiddisappear(_ animated: Bool)

35 Extension Lifecycle Resigning active func willresignactive(with conversation: MSConversation) func viewwilldisappear(_ animated: Bool) func viewdiddisappear(_ animated: Bool)

36 Extension Lifecycle Resigning active func willresignactive(with conversation: MSConversation) func viewwilldisappear(_ animated: Bool) func viewdiddisappear(_ animated: Bool) Process Terminated

37 Compose a Message let message = MSMessage()

38 Compose a Message let message = MSMessage() message.url

39 Compose a Message let message = MSMessage() message.url

40 Compose a Message let message = MSMessage() "Let s build an ice cream" message.url message.accessibilitylabel

41 Compose a Message let message = MSMessage() "Let s build an ice cream" message.url message.accessibilitylabel

42 Compose a Message let message = MSMessage() "Let s build an ice cream" message.url message.accessibilitylabel message.layout

43 Compose a Message let message = MSMessage() "Let s build an ice cream" message.url message.accessibilitylabel message.layout

44 Compose a Message let layout = MSMessageTemplateLayout()

45 Compose a Message let layout = MSMessageTemplateLayout() layout.image

46 Compose a Message let layout = MSMessageTemplateLayout() layout.image

47 Compose a Message let layout = MSMessageTemplateLayout() layout.image layout.mediafileurl

48 Compose a Message let layout = MSMessageTemplateLayout() layout.image layout.mediafileurl

49 Compose a Message layout.image layout.mediafileurl

50 Compose a Message layout.image layout.mediafileurl Recommended media/image size

51 Compose a Message layout.image layout.mediafileurl Recommended media/image size PNG, JPEG, GIF, video

52 Compose a Message layout.image layout.mediafileurl Recommended media/image size PNG, JPEG, GIF, video May be transcoded on send

53 Compose a Message layout.image layout.mediafileurl Recommended media/image size PNG, JPEG, GIF, video May be transcoded on send Avoid rendering text in the image

54 Compose a Message let layout = MSMessageTemplateLayout() layout.image layout.mediafileurl

55 Compose a Message let layout = MSMessageTemplateLayout() layout.image layout.mediafileurl layout.imagetitle

56 Compose a Message let layout = MSMessageTemplateLayout() layout.image layout.mediafileurl layout.imagetitle

57 Compose a Message let layout = MSMessageTemplateLayout() layout.image layout.mediafileurl layout.imagetitle layout.imagesubtitle

58 Compose a Message let layout = MSMessageTemplateLayout() layout.image layout.mediafileurl layout.imagetitle layout.imagesubtitle

59 Compose a Message let layout = MSMessageTemplateLayout() layout.image layout.mediafileurl layout.imagetitle layout.imagesubtitle layout.caption

60 Compose a Message let layout = MSMessageTemplateLayout() layout.image layout.mediafileurl layout.imagetitle layout.imagesubtitle layout.caption

61 Compose a Message let layout = MSMessageTemplateLayout() layout.image layout.mediafileurl layout.imagetitle layout.imagesubtitle layout.caption layout.trailingcaption

62 Compose a Message let layout = MSMessageTemplateLayout() layout.image layout.mediafileurl layout.imagetitle layout.imagesubtitle layout.caption layout.trailingcaption

63 Compose a Message let layout = MSMessageTemplateLayout() layout.image layout.mediafileurl layout.imagetitle layout.imagesubtitle layout.caption layout.trailingcaption layout.subcaption

64 Compose a Message let layout = MSMessageTemplateLayout() layout.image layout.mediafileurl layout.imagetitle layout.imagesubtitle layout.caption layout.trailingcaption layout.subcaption

65 Compose a Message let layout = MSMessageTemplateLayout() layout.image layout.mediafileurl layout.imagetitle layout.imagesubtitle layout.caption layout.trailingcaption layout.subcaption layout.trailingsubcaption

66 Compose a Message let layout = MSMessageTemplateLayout() layout.image layout.mediafileurl layout.imagetitle layout.imagesubtitle layout.caption layout.trailingcaption layout.subcaption layout.trailingsubcaption

67 Compose a Message let layout = MSMessageTemplateLayout() layout.image layout.mediafileurl layout.imagetitle layout.imagesubtitle layout.caption layout.trailingcaption layout.subcaption layout.trailingsubcaption

68 Compose a Message let layout = MSMessageTemplateLayout() layout.image layout.mediafileurl layout.imagetitle layout.imagesubtitle layout.caption layout.trailingcaption layout.subcaption layout.trailingsubcaption

69 Sending a Message Specifying message appearance let layout = MSMessageTemplateLayout() layout.image layout.mediafileurl layout.imagetitle layout.imagesubtitle layout.caption = nil layout.trailingcaption = nil layout.subcaption = nil layout.trailingsubcaption = nil

70 Sending a Message Specifying message appearance let layout = MSMessageTemplateLayout() layout.image layout.mediafileurl layout.imagetitle layout.imagesubtitle layout.caption = nil layout.trailingcaption = nil layout.subcaption = nil layout.trailingsubcaption = nil

71 Compose a Message let layout = MSMessageTemplateLayout() layout.image layout.mediafileurl layout.imagetitle layout.imagesubtitle layout.caption = nil layout.trailingcaption = nil layout.subcaption = nil layout.trailingsubcaption = nil

72 Compose a Message let layout = MSMessageTemplateLayout() layout.image layout.mediafileurl layout.imagetitle layout.imagesubtitle layout.caption = nil layout.trailingcaption = nil layout.subcaption = nil layout.trailingsubcaption = nil

73 Send a Message

74 Send a Message

75 Send a Message let conversation = self.activeconversation

76 Send a Message let conversation = self.activeconversation conversation?.insert(message) { error in }) // TODO: Check for an error

77 Send a Message let conversation = self.activeconversation conversation?.insert(message) { error in }) // TODO: Check for an error

78 // Sending other types

79 // Sending other types conversation?.inserttext("example text ) { error in } // TODO: Check for an error

80 // Sending other types conversation?.inserttext("example text ) { error in } // TODO: Check for an error conversation?.insertattachment(resourceurl, withalternatefilename: nil) { error in } // TODO: Check for an error

81 // Sending other types conversation?.inserttext("example text ) { error in } // TODO: Check for an error conversation?.insertattachment(resourceurl, withalternatefilename: nil) { error in } // TODO: Check for an error conversation?.insert(sticker) { error in }) // TODO: Check for an error

82 Send the Message

83 Send the Message

84 Demo Sending a message

85 Presentation Style Overview Compact Expanded

86 Presentation Style Overview Compact Expanded

87 Presentation Style Overview Compact Expanded

88 Presentation Style Compact

89 Presentation Style Compact

90 Presentation Style Expanded

91 Presentation Style Transition

92 Presentation Style Transition

93 Presentation Style Transition

94 Presentation Style Transition

95 // Presentation Style

96 // Presentation Style override func willtransition(to presentationstyle: MSMessagesAppPresentationStyle) { } super.willtransition(to: presentationstyle)

97 // Presentation Style override func willtransition(to presentationstyle: MSMessagesAppPresentationStyle) { } super.willtransition(to: presentationstyle) override func didtransition(to presentationstyle: MSMessagesAppPresentationStyle) { } super.didtransition(to: presentationstyle)

98 // Presentation Style override func willtransition(to presentationstyle: MSMessagesAppPresentationStyle) { } super.willtransition(to: presentationstyle) override func didtransition(to presentationstyle: MSMessagesAppPresentationStyle) { } super.didtransition(to: presentationstyle) self.requestpresentationstyle(.expanded)

99 // Presentation Style override func willtransition(to presentationstyle: MSMessagesAppPresentationStyle) { } super.willtransition(to: presentationstyle) override func didtransition(to presentationstyle: MSMessagesAppPresentationStyle) { } super.didtransition(to: presentationstyle) self.requestpresentationstyle(.compact)

100 // Presentation Style override func willtransition(to presentationstyle: MSMessagesAppPresentationStyle) { } super.willtransition(to: presentationstyle) override func didtransition(to presentationstyle: MSMessagesAppPresentationStyle) { } super.didtransition(to: presentationstyle) self.requestpresentationstyle(.compact) self.dismiss()

101 Replying to a Message

102 Replying to a Message Two cases Extension is inactive Extension is active

103 Replying to a Message Two cases Extension is inactive Extension is active

104 Replying to a Message Extension is inactive

105 Replying to a Message Extension is inactive Bubble Tapped

106 Replying to a Message Extension is inactive Bubble Tapped Process Launched

107 Replying to a Message Extension is inactive Bubble Tapped Process Launched func didbecomeactive(with conversation: MSConversation)

108 Replying to a Message Extension is inactive Bubble Tapped Process Launched func viewwillappear(_ animated: Bool) func didbecomeactive(with conversation: MSConversation)

109 Replying to a Message Extension is inactive Bubble Tapped Process Launched func viewwillappear(_ animated: Bool) func didbecomeactive(with conversation: MSConversation) func viewdidappear(_ animated: Bool)

110 Replying to a Message Two cases Extension is inactive Extension is active

111 Replying to a Message Two cases Extension is inactive Extension is active

112 Replying to a Message Extension is active

113 Replying to a Message Extension is active Bubble Tapped

114 Replying to a Message Extension is active func willtransition(to presentationstyle: MSMessagesAppPresentationStyle) Bubble Tapped

115 Replying to a Message Extension is active func willtransition(to presentationstyle: MSMessagesAppPresentationStyle) Bubble Tapped func didselect(_ message: MSMessage, conversation: MSConversation)

116 Replying to a Message Extension is active func willtransition(to presentationstyle: MSMessagesAppPresentationStyle) Bubble Tapped func didselect(_ message: MSMessage, conversation: MSConversation) func didtransition(to presentationstyle: MSMessagesAppPresentationStyle)

117 Replying to a Message Selected message

118 Replying to a Message Selected message

119 Replying to a Message Selected message Check MSConversation s selectedmessage

120 Replying to a Message Selected message Check MSConversation s selectedmessage Show selected message

121 Replying to a Message Selected message Check MSConversation s selectedmessage Show selected message

122 Replying to a Message Selected message Check MSConversation s selectedmessage Show selected message Compose a response

123 Demo Composing a reply

124 Session Messages

125 Session Messages

126 Session Messages

127 Session Messages let session = MSSession()

128 Session Messages let session = MSSession() let message = MSMessage(session: session)

129 Session Messages let session = MSSession() let message = MSMessage(session: session) //... message.summarytext = "Let's build an ice cream"

Session Messages let session = MSSession() let message = MSMessage(session: session) //... message.summarytext = "Let's build an ice cream" let conversation = self.

130 Session Messages let session = MSSession() let message = MSMessage(session: session) //... message.summarytext = "Let's build an ice cream" let conversation = self.activeconversation conversation?.insert(message) { error in // TODO: Check for an error }

131 Session Messages let conversation = self.activeconversation let session = conversation?.selectedmessage?.session let message = MSMessage(session: session) //... message.summarytext = "Our finished ice cream conversation?.insert(message) { error in } // TODO: Check for an error

132 Session Messages let conversation = self.activeconversation let session = conversation?.selectedmessage?.session let message = MSMessage(session: session) //... message.summarytext = "Our finished ice cream conversation?.insert(message) { error in } // TODO: Check for an error

133 Session Messages let conversation = self.activeconversation let session = conversation?.selectedmessage?.session let message = MSMessage(session: session) //... message.summarytext = "Our finished ice cream conversation?.insert(message) { error in } // TODO: Check for an error

134 Session Messages message.summarytext = "Let's build an ice cream"

135 Session Messages message.summarytext = nil

136 Session Messages message.summarytext = nil

137 NEW imessage Apps Advanced Messages API

138 Advanced Messages API

139 Advanced Messages API Override Methods

140 Advanced Messages API Override Methods Group Conversations

141 Advanced Messages API Override Methods Group Conversations Identifying the Sender

142 Override Methods Did start sending

143 Override Methods Did start sending override func didstartsending(_ message: MSMessage, conversation: MSConversation) { super.didstartsending(message, conversation: conversation) }

144 Override Methods Did cancel sending

145 Override Methods Did cancel sending override func didcancelsending(_ message: MSMessage, conversation: MSConversation) { super.didcancelsending(message, conversation: conversation) }

146 Override Methods Did receive message

147 Override Methods Did receive message override func didreceive(_ message: MSMessage, conversation: MSConversation) { super.didreceive(message, conversation: conversation) }

148 Override Methods Did receive message override func didreceive(_ message: MSMessage, conversation: MSConversation) { super.didreceive(message, conversation: conversation) }

149 Group Conversations

150 Group Conversations Amber Ben Chris or or or or

151 Group Conversations Amber Ben Chris or or or or or or

152 Group Conversations Amber Ben Chris Chocolate Sauce or Sprinkles? or or or or or

153 Group Conversations Amber Ben Chris Chocolate Sauce or Sprinkles? Chocolate Sauce or Sprinkles? or or or or

154 Group Conversations Amber Ben Chris Chocolate Sauce or Sprinkles? Chocolate Sauce or Sprinkles? or or or or

155 Group Conversations Amber Ben Chris Chocolate Sauce or Sprinkles? Chocolate Sauce or Sprinkles? Chocolate Sauce or Sprinkles? or or or

156 Group Conversations Amber Ben Chris Chocolate Sauce or Sprinkles? Chocolate Sauce or Sprinkles? Chocolate Sauce or Sprinkles? or or or

157 Group Conversations Amber Ben Chris Chocolate Sauce or Sprinkles? Chocolate Sauce or Sprinkles? Chocolate Sauce or Sprinkles? or or or

158 Group Conversations Amber Ben Chris Chocolate Sauce or Sprinkles? Chocolate Sauce or Sprinkles? Chocolate Sauce or Sprinkles? Vote for Chocolate Sauce or or or

159 Group Conversations Amber Ben Chris Chocolate Sauce or Sprinkles? Chocolate Sauce or Sprinkles? Chocolate Sauce or Sprinkles? Vote for Sprinkles or or or

160 Group Conversations Only tapped message is available

161 Group Conversations Only tapped message is available Store state in the cloud

162 Identifying a Sender

163 Identifying a Sender Amber Ben Chris or or or or

164 Identifying a Sender Amber Ben Chris Chocolate Sauce or Sprinkles? or or or or or

165 Identifying a Sender Amber Ben Chris Chocolate Sauce or Sprinkles? Chocolate Sauce or Sprinkles? or or or or

166 Identifying a Sender Amber Ben Chris Chocolate Sauce or Sprinkles? Chocolate Sauce or Sprinkles? or or or or

167 Identifying a Sender Amber Ben Chris Chocolate Sauce or Sprinkles? Chocolate Sauce or Sprinkles? or or or or

168 Identifying a Sender Amber Ben D32 Chris 1E2 5C2 Chocolate Sauce or Sprinkles? Chocolate Sauce or Sprinkles? or or or or

169 Identifying a Sender Amber Ben D32 Chris 1E2 5C2 Chocolate Sauce or Sprinkles? Chocolate Sauce or Sprinkles? or or or or

170 Identifying a Sender Amber Ben D32 Chris 1E2 5C2 Chocolate Sauce or Sprinkles? Chocolate Sauce or Sprinkles? 5C2 or or or or

171 Identifying a Sender A7B D32 Amber Ben Chris 1A5 FE9 B81 1E2 5C2 7B1 81A Chocolate Sauce or Sprinkles? Chocolate Sauce or Sprinkles? A7B 5C2 or 1A5 or or or

172 Identifying a Sender

173 Identifying a Sender Number of participants

174 Identifying a Sender Number of participants Attribute a message to a sender

175 Identifying a Sender Number of participants Attribute a message to a sender Help establish identity

176 Identifying a Sender let layout = MSMessageTemplateLayout() // layout.caption = $\(conversation.localparticipantidentifier.uuidstring) likes Sprinkles!" // $1A5 likes Sprinkles

177 Identifying a Sender let layout = MSMessageTemplateLayout() // layout.caption = $\(conversation.localparticipantidentifier.uuidstring) likes Sprinkles!" // $1A5 Chris likes likes Sprinkles

178 Identifying a Sender let layout = MSMessageTemplateLayout() // layout.caption = $\(conversation.localparticipantidentifier.uuidstring) likes Sprinkles!" // $1A5 Chris likes likes Sprinkles

179 Identifying a Sender

180 Identifying a Sender Unique on each device

181 Identifying a Sender Unique on each device Scoped to the imessage App install

182 // Message sender identifier class MSMessage{ // var senderparticipantidentifier: NSUUID { get } } //

183 // Message sender identifier class MSMessage{ // var senderparticipantidentifier: NSUUID { get } } //

184 // Conversation local and remote identifiers class MSConversation : NSObject { // var localparticipantidentifier: NSUUID { get } // var remoteparticipantidentifiers: [NSUUID] { get } } //

185 // Conversation local and remote identifiers class MSConversation : NSObject { // var localparticipantidentifier: NSUUID { get } // var remoteparticipantidentifiers: [NSUUID] { get } } //

186 // Conversation local and remote identifiers class MSConversation : NSObject { // var localparticipantidentifier: NSUUID { get } // var remoteparticipantidentifiers: [NSUUID] { get } } //

187 // Conversation local and remote identifiers class MSConversation : NSObject { // var localparticipantidentifier: NSUUID { get } // var remoteparticipantidentifiers: [NSUUID] { get } } //

188 imessage Apps Supported platforms

189 Supported Platforms Interactive Messages watchos 3 macos Sierra ios 10

190 Supported Platforms Fallback support watchos 2 OS X ios 9

191 Supported Platforms Fallback details

192 Supported Platforms Fallback details Delivered as two separate messages

193 Supported Platforms Fallback details Delivered as two separate messages Image provided in the layout

194 Supported Platforms Fallback details Delivered as two separate messages Image provided in the layout URL provided in the message

195 Summary

196 Summary Introduced the Messages framework

197 Summary Introduced the Messages framework Create sticker packs

198 Summary Introduced the Messages framework Create sticker packs Create imessage apps and send interactive content

199 Summary Introduced the Messages framework Create sticker packs Create imessage apps and send interactive content Make something awesome!

200 More Information

201 Related Sessions imessage Apps and Stickers, Part 1 Presidio Tuesday 11:00AM

202 Labs imessage Apps and Stickers Lab Frameworks Lab A Thursday 3:00PM

203

What s New in imessage Apps

Session App Frameworks #WWDC17 What s New in imessage Apps 234 Eugene Bistolas, Messages Engineer Jay Chae, Messages Engineer Stephen Lottermoser, Messages Engineer 2017 Apple Inc. All rights reserved.