twilio mms: taming the complexity
DESCRIPTION
This is a talk about Twilio's new Picture Messaging API given by Thomas Wilsher, the Messaging Tech Lead, and Kelvin Law, Messaging Software Engineer, at Twiliocon 2013.TRANSCRIPT
![Page 1: Twilio MMS: Taming the Complexity](https://reader036.vdocument.in/reader036/viewer/2022081802/54713cecb4af9f9d0a8b4a8f/html5/thumbnails/1.jpg)
#TWILIOCON
Twilio MMS: Taming the Complexity
THOMAS WILSHER, LEAD ENGINEER, MESSAGING @TWILIOKELVIN LAW, SOFTWARE ENGINEER, MESSAGING @ TWILIO
Thursday, September 26, 13
![Page 2: Twilio MMS: Taming the Complexity](https://reader036.vdocument.in/reader036/viewer/2022081802/54713cecb4af9f9d0a8b4a8f/html5/thumbnails/2.jpg)
#TWILIOCON
Hi. I’m Thomas Wilsher.I’m the Messaging Tech Lead at Twilio.
Thursday, September 26, 13
![Page 3: Twilio MMS: Taming the Complexity](https://reader036.vdocument.in/reader036/viewer/2022081802/54713cecb4af9f9d0a8b4a8f/html5/thumbnails/3.jpg)
#TWILIOCON
By the end of this talk,
1. What is the difference between SMS, MMS, and Twilio Picture Messaging?
you’ll be able to answer these questions.
2. How do I send Twilio Picture Messages?
3. How can I receive Picture Messages in my apps?
Thursday, September 26, 13
![Page 4: Twilio MMS: Taming the Complexity](https://reader036.vdocument.in/reader036/viewer/2022081802/54713cecb4af9f9d0a8b4a8f/html5/thumbnails/4.jpg)
#TWILIOCON
A brief history of MMS & Twilio Picture Messaging.
Thursday, September 26, 13
![Page 5: Twilio MMS: Taming the Complexity](https://reader036.vdocument.in/reader036/viewer/2022081802/54713cecb4af9f9d0a8b4a8f/html5/thumbnails/5.jpg)
#TWILIOCON
SMS was never meant to be
It was an accident.
the most popular messaging format.
Thursday, September 26, 13
![Page 6: Twilio MMS: Taming the Complexity](https://reader036.vdocument.in/reader036/viewer/2022081802/54713cecb4af9f9d0a8b4a8f/html5/thumbnails/6.jpg)
#TWILIOCON
(1/2) SMS is totally limited. You can only send a message to 1 recipient at a time and how am I supposed to fully express myself in 160
(2/2) characters or less?
I see what you mean haha. Write shorter messages I guess. ;)
Thursday, September 26, 13
![Page 7: Twilio MMS: Taming the Complexity](https://reader036.vdocument.in/reader036/viewer/2022081802/54713cecb4af9f9d0a8b4a8f/html5/thumbnails/7.jpg)
#TWILIOCON
Then there was MMS:The 2nd System Effect.
Thursday, September 26, 13
![Page 8: Twilio MMS: Taming the Complexity](https://reader036.vdocument.in/reader036/viewer/2022081802/54713cecb4af9f9d0a8b4a8f/html5/thumbnails/8.jpg)
#TWILIOCON
New Content Types.
Images (JPEG, GIF,
PNG, WBMP) and video.
MULTIMEDIAMessages longer than
140 characters!
TEXTSlide show support.
Thought to be a big deal.
SMIL
Then there was MMS:
Thursday, September 26, 13
![Page 9: Twilio MMS: Taming the Complexity](https://reader036.vdocument.in/reader036/viewer/2022081802/54713cecb4af9f9d0a8b4a8f/html5/thumbnails/9.jpg)
#TWILIOCON
New Protocol.Then there was MMS:
Thursday, September 26, 13
![Page 10: Twilio MMS: Taming the Complexity](https://reader036.vdocument.in/reader036/viewer/2022081802/54713cecb4af9f9d0a8b4a8f/html5/thumbnails/10.jpg)
#TWILIOCON
Thursday, September 26, 13
![Page 11: Twilio MMS: Taming the Complexity](https://reader036.vdocument.in/reader036/viewer/2022081802/54713cecb4af9f9d0a8b4a8f/html5/thumbnails/11.jpg)
#TWILIOCON
Great news everyone!There’s an API for MMS.
Thursday, September 26, 13
![Page 12: Twilio MMS: Taming the Complexity](https://reader036.vdocument.in/reader036/viewer/2022081802/54713cecb4af9f9d0a8b4a8f/html5/thumbnails/12.jpg)
#TWILIOCON
Oh, by the way...our API is SOAP only.
That’s cool, right?
Thursday, September 26, 13
![Page 13: Twilio MMS: Taming the Complexity](https://reader036.vdocument.in/reader036/viewer/2022081802/54713cecb4af9f9d0a8b4a8f/html5/thumbnails/13.jpg)
#TWILIOCON
No SMIL. No SOAP. No Worries.
There’s no need to fear - Twilio Picture Messaging is here.
Thursday, September 26, 13
![Page 14: Twilio MMS: Taming the Complexity](https://reader036.vdocument.in/reader036/viewer/2022081802/54713cecb4af9f9d0a8b4a8f/html5/thumbnails/14.jpg)
#TWILIOCON
Keepin’ things RESTful.Thanks to our Uni!ed Messaging API, you can send
Twilio format you know and love.
both SMS and MMS messages using the same
Thursday, September 26, 13
![Page 15: Twilio MMS: Taming the Complexity](https://reader036.vdocument.in/reader036/viewer/2022081802/54713cecb4af9f9d0a8b4a8f/html5/thumbnails/15.jpg)
#TWILIOCON
Let’s look at an example Outbound API Request.
POST https://api.twilio.com/2010-04-01/Accounts/AC123/Messages/ From='894546' To='16505766372' Body='Test MMS' MediaUrl='http://twilio.com/logo.png'
Thursday, September 26, 13
![Page 16: Twilio MMS: Taming the Complexity](https://reader036.vdocument.in/reader036/viewer/2022081802/54713cecb4af9f9d0a8b4a8f/html5/thumbnails/16.jpg)
#TWILIOCON
POST https://api.twilio.com/.../Messages/ MediaUrl='http://example.com/ .jpg'
1 An app sends a Message with a media URL
http://www.example.com/
Sending Picture Messages with Twilio.
2 Twilio enqueues the message and downloads the media in the background
3 MMS message is sent to phone
1
3
2
Thursday, September 26, 13
![Page 17: Twilio MMS: Taming the Complexity](https://reader036.vdocument.in/reader036/viewer/2022081802/54713cecb4af9f9d0a8b4a8f/html5/thumbnails/17.jpg)
#TWILIOCON
Sending Picture Messages.Twilio Style.Let’s see some code.
Thursday, September 26, 13
![Page 18: Twilio MMS: Taming the Complexity](https://reader036.vdocument.in/reader036/viewer/2022081802/54713cecb4af9f9d0a8b4a8f/html5/thumbnails/18.jpg)
#TWILIOCON
Hi. I’m Kelvin LawI’m an Messaging Engineer at Twilio.
Thursday, September 26, 13
![Page 19: Twilio MMS: Taming the Complexity](https://reader036.vdocument.in/reader036/viewer/2022081802/54713cecb4af9f9d0a8b4a8f/html5/thumbnails/19.jpg)
#TWILIOCON
Receiving Picture Messages. The Hitchhiker’s Guide.Let’s see what it takes to receive a picture message using Twilio.
Thursday, September 26, 13
![Page 20: Twilio MMS: Taming the Complexity](https://reader036.vdocument.in/reader036/viewer/2022081802/54713cecb4af9f9d0a8b4a8f/html5/thumbnails/20.jpg)
#TWILIOCON
How to Receive Picture Messages with Twilio.
Thursday, September 26, 13
![Page 21: Twilio MMS: Taming the Complexity](https://reader036.vdocument.in/reader036/viewer/2022081802/54713cecb4af9f9d0a8b4a8f/html5/thumbnails/21.jpg)
#TWILIOCON
1 A user sends an Message with an attached Photo to a Twilio Number.
How to Receive Picture Messages with Twilio.
1
Thursday, September 26, 13
![Page 22: Twilio MMS: Taming the Complexity](https://reader036.vdocument.in/reader036/viewer/2022081802/54713cecb4af9f9d0a8b4a8f/html5/thumbnails/22.jpg)
#TWILIOCON
1 A user sends an Message with an attached Photo to a Twilio Number.
TwilioCDN
How to Receive Picture Messages with Twilio.
2 Twilio stores the Photo in the TwilioCDN and responds with it’s location.
1 2
Thursday, September 26, 13
![Page 23: Twilio MMS: Taming the Complexity](https://reader036.vdocument.in/reader036/viewer/2022081802/54713cecb4af9f9d0a8b4a8f/html5/thumbnails/23.jpg)
#TWILIOCON
1 A user sends an Message with an attached Photo to a Twilio Number.
TwilioCDN
http://www.example.com/
How to Receive Picture Messages with Twilio.
2 Twilio stores the Photo in the TwilioCDN and responds with it’s location. http://twiliocdn/ .jpg
3 A webhook !res a POST to your app pointing to the Photo’s new home on the CDN.
1 2
3
Thursday, September 26, 13
![Page 24: Twilio MMS: Taming the Complexity](https://reader036.vdocument.in/reader036/viewer/2022081802/54713cecb4af9f9d0a8b4a8f/html5/thumbnails/24.jpg)
TwiML RequestMessageSid
AccountSid
From
To
Body
NumMedia
MediaUrl#
MediaContentType#
A 34 character unique identifier for the message.
The 34 character ID of your Account
From Number
To Number
Text Body of the Message
# of Media Elements in Message
Url of Media Element #
ContentType of Media Element #
Thursday, September 26, 13
![Page 25: Twilio MMS: Taming the Complexity](https://reader036.vdocument.in/reader036/viewer/2022081802/54713cecb4af9f9d0a8b4a8f/html5/thumbnails/25.jpg)
#TWILIOCON
[ ('AccountSid', u'AC648d937704b94309822578b85ff1227f'), ('MessageSid', u'MM150b3799a0adfeaee0ae5e6635bf2ab3'), ('From', u'+14159944805'), ('To', u'894546'), ('Body', u'Hello TwilioCon!'), ('FromCity', u'SAN FRANCISCO'), ('FromState', u'CA'), ('FromZip', u'94112'), ('FromCountry', u'US') ('NumMedia', u'1'), ('MediaUrl0', u'https://api.twilio.com/2010-04-01/Accounts/AC648d937704b94309822578b85ff1227f/Messages/MM150b3799a0adfeaee0ae5e6635bf2ab3/Media/MEf920a1af0983ba2911ec16a1f2bb2378'), ('MediaContentType0', u'image/jpeg'), ('ApiVersion', u'2010-04-01'), ('SmsSid', u'MM150b3799a0adfeaee0ae5e6635bf2ab3'), ('SmsMessageSid', u'MM150b3799a0adfeaee0ae5e6635bf2ab3') ]
Thursday, September 26, 13
![Page 26: Twilio MMS: Taming the Complexity](https://reader036.vdocument.in/reader036/viewer/2022081802/54713cecb4af9f9d0a8b4a8f/html5/thumbnails/26.jpg)
#TWILIOCON
New Param: MessageSid
Contains a unique, 34 character identi!er for all types of
messages. SmsSid will still be sent for backwards compatibility.
Ex. “MessageSid”: “MM150b3799a0adfeaee0ae5e6635bf2ab3"
Thursday, September 26, 13
![Page 27: Twilio MMS: Taming the Complexity](https://reader036.vdocument.in/reader036/viewer/2022081802/54713cecb4af9f9d0a8b4a8f/html5/thumbnails/27.jpg)
#TWILIOCON
New Param: NumMedia
The NumMedia param tells you how many media attachments a
message has. Defaults to 0 for SMS messages.
Ex. “NumMedia”: “2",
Thursday, September 26, 13
![Page 28: Twilio MMS: Taming the Complexity](https://reader036.vdocument.in/reader036/viewer/2022081802/54713cecb4af9f9d0a8b4a8f/html5/thumbnails/28.jpg)
#TWILIOCON
New Param: MediaUrl#
Ex. MediaUrl0 -> MediaUrlN
“MediaUrl0”: “https://api.twilio.com/2010-04-01/...",“MediaUrl1”: “https://api.twilio.com/2010-04-01/...",
Each media attachment gets its own MediaUrl# parameter pointing
to the image hosted on the Twilio CDN.
Thursday, September 26, 13
![Page 29: Twilio MMS: Taming the Complexity](https://reader036.vdocument.in/reader036/viewer/2022081802/54713cecb4af9f9d0a8b4a8f/html5/thumbnails/29.jpg)
#TWILIOCON
New Param: MediaContentType#
Ex. MediaContentType0 -> MediaContentTypeN
“MediaContentType0”: “image/png",“MediaContentType1”: “image/jpeg",
Each media attachment gets its own MediaContentType# parameter telling
you what kind of media it is (using the standard HTTP content types).
Thursday, September 26, 13
![Page 30: Twilio MMS: Taming the Complexity](https://reader036.vdocument.in/reader036/viewer/2022081802/54713cecb4af9f9d0a8b4a8f/html5/thumbnails/30.jpg)
#TWILIOCON
Why not just use MultiValue parameters?Wait a minute...
Thursday, September 26, 13
![Page 31: Twilio MMS: Taming the Complexity](https://reader036.vdocument.in/reader036/viewer/2022081802/54713cecb4af9f9d0a8b4a8f/html5/thumbnails/31.jpg)
#TWILIOCON
What are MultiValue Parameters?
POST https://www.myawesomeapp.com/webhook.php From='894546' To='16505766372' Body='<3 TwilioCon!' MediaUrl[]='http://twilio.com/logo1.png' MediaUrl[]='http://twilio.com/logo2.png' MediaUrl[]='http://twilio.com/logo3.png' } Overloaded
Thursday, September 26, 13
![Page 32: Twilio MMS: Taming the Complexity](https://reader036.vdocument.in/reader036/viewer/2022081802/54713cecb4af9f9d0a8b4a8f/html5/thumbnails/32.jpg)
#TWILIOCON
Use HTTP because HTTP is universal
Can’t send MultiValue params because of bad HTTP framework support
Thursday, September 26, 13
![Page 33: Twilio MMS: Taming the Complexity](https://reader036.vdocument.in/reader036/viewer/2022081802/54713cecb4af9f9d0a8b4a8f/html5/thumbnails/33.jpg)
#TWILIOCON
If we send MediaUrls[]
$_POST[“MediaUrls”] = array(...)
params[:MediaUrls] = [...]
body[‘MediaUrls’] = [...]
request.form.getlist(‘MediaUrls[]’) = [...]
Thursday, September 26, 13
![Page 34: Twilio MMS: Taming the Complexity](https://reader036.vdocument.in/reader036/viewer/2022081802/54713cecb4af9f9d0a8b4a8f/html5/thumbnails/34.jpg)
#TWILIOCON
If we send MediaUrls
$_POST[“MediaUrls”] = only first URL
params[:MediaUrls] = only first URL
body[‘MediaUrls’] = [...]
request.form.getlist(‘MediaUrls’) = [...]
Thursday, September 26, 13
![Page 35: Twilio MMS: Taming the Complexity](https://reader036.vdocument.in/reader036/viewer/2022081802/54713cecb4af9f9d0a8b4a8f/html5/thumbnails/35.jpg)
#TWILIOCON
What are MultiValue Parameters?
POST https://www.myawesomeapp.com/webhook.php From='894546' To='16505766372' Body='<3 TwilioCon!' MediaUrl0='http://twilio.com/logo1.png' MediaUrl1='http://twilio.com/logo2.png' MediaUrl2='http://twilio.com/logo3.png'
Thursday, September 26, 13
![Page 36: Twilio MMS: Taming the Complexity](https://reader036.vdocument.in/reader036/viewer/2022081802/54713cecb4af9f9d0a8b4a8f/html5/thumbnails/36.jpg)
TwiML RequestMessageSid
AccountSid
From
To
Body
NumMedia
MediaUrl#
MediaContentType#
A 34 character unique identifier for the message.
The 34 character ID of your Account
From Number
To Number
Text Body of the Message
# of Media Elements in Message
Url of Media Element #
ContentType of Media Element #
Thursday, September 26, 13
![Page 37: Twilio MMS: Taming the Complexity](https://reader036.vdocument.in/reader036/viewer/2022081802/54713cecb4af9f9d0a8b4a8f/html5/thumbnails/37.jpg)
#TWILIOCON
<TwiML>
<Sms />
<Message />
<Redirect />
<Message />
Thursday, September 26, 13
![Page 38: Twilio MMS: Taming the Complexity](https://reader036.vdocument.in/reader036/viewer/2022081802/54713cecb4af9f9d0a8b4a8f/html5/thumbnails/38.jpg)
#TWILIOCON
<Response> <Message> <Body>Hello TwilioCon!</Body> <Media>https://twilio.com/logo.png</Media> <Media>https://twilio.com/logo2.png</Media> </Message> </Response>
<TWIML>
Thursday, September 26, 13
![Page 39: Twilio MMS: Taming the Complexity](https://reader036.vdocument.in/reader036/viewer/2022081802/54713cecb4af9f9d0a8b4a8f/html5/thumbnails/39.jpg)
#TWILIOCON
Example: Real-time Gallery.
Thursday, September 26, 13
![Page 40: Twilio MMS: Taming the Complexity](https://reader036.vdocument.in/reader036/viewer/2022081802/54713cecb4af9f9d0a8b4a8f/html5/thumbnails/40.jpg)
#TWILIOCON
1 Send a Message with an attached Photo to a Twilio Number.
Example: Real-time Gallery.
1
Thursday, September 26, 13
![Page 41: Twilio MMS: Taming the Complexity](https://reader036.vdocument.in/reader036/viewer/2022081802/54713cecb4af9f9d0a8b4a8f/html5/thumbnails/41.jpg)
#TWILIOCON
1 Send a Message with an attached Photo to a Twilio Number. TwilioCDN
Example: Real-time Gallery.
2 Twilio stores the Photo in the TwilioCDN.
1 2
Thursday, September 26, 13
![Page 42: Twilio MMS: Taming the Complexity](https://reader036.vdocument.in/reader036/viewer/2022081802/54713cecb4af9f9d0a8b4a8f/html5/thumbnails/42.jpg)
#TWILIOCON
1 Send a Message with an attached Photo to a Twilio Number. TwilioCDN
Example: Real-time Gallery.
2 Twilio stores the Photo in the TwilioCDN.
http://twiliocdn/ .jpg
3 A webhook !res a POST to real-time gallery app.
1 2
3
Thursday, September 26, 13
![Page 43: Twilio MMS: Taming the Complexity](https://reader036.vdocument.in/reader036/viewer/2022081802/54713cecb4af9f9d0a8b4a8f/html5/thumbnails/43.jpg)
#TWILIOCON
1 Send a Message with an attached Photo to a Twilio Number. TwilioCDN
Example: Real-time Gallery.
2 Twilio stores the Photo in the TwilioCDN.
http://twiliocdn/ .jpg
3 A webhook !res a POST to real-time gallery app.
1 2
3
4 Use Pusher to send the photo to the browser in real-time with websockets.
4
Thursday, September 26, 13