BuiIding the ReaItime User Experience 0 ' R 日 L ⑩ Ted 犬 0 〃 Beijing ・ Cambridge ・ Farnham ・ Köln ・ Sebastopo い Taipei ・ T0kyo

BuiIding the ReaItime U 史「 Experience by Ted Roden Copyright ◎ 2010 Ted R0den. AII rights reserved. printed in the United States Of America. published by O'Reilly Media, lnc. , 10()5 Gravenstein Highway North, Sebastopol, CA 95472. O'Reilly books may be purchased for educational, business, or sales promotional use. Online editions are alSO available for most titles ( わ p : 〃川 ). sa. / 4 ⅱわ 00 た SO 〃〃〃巳 CO 襯 ). For more information, contact our corporate/institutional sales department: (8()0) 998-9938 or co 挈 ora 化@0 尾卍 ). co 川 . Editor: Simon St. Laurent Production Editor: Kristen Borg Copyeditor: Genevieve d'Entremont Proofreader: Teresa Barensfeld Production Services: Molly Sharp lndexer: Ellen Troutman Cover Designer: Karen Montgomery lnterior Designer: David Futato lllustrator: Robert Romano Printing History: July 2010: First Edition. Nutshell Handbook, the Nutshell Handb00k 10g0 , and the O'Reilly 10g0 are registered trademarks of O'ReiIIy Media, lnc. BuiIding ビ R ビ記ⅲれ e Use1 ・ Ex 〃夜元ら the image of a myna bird, and related trade dress are trademarks 0f O'Reilly Media, lnc. Many Of the designations used by manufacturers and sellers tO distinguish their products are claimed as trademarks. Where those designations appear in this b00k, and O'Reilly Media, lnc. , was aware Of a trademark claim, the designations have been printed in caps or initial caps. WhiIe every precaution has been taken in the preparation of this book, the publisher and author assume no responsibility for errors or omissions, or for damages resulting frOI れ the use Of the information con- tained herein. ー This book uses RepKoverTM, a durable and flexible lay_flat binding. ISBN: 978-0-596-80615-6 [M] 1277147714

BuiIding the ReaItime User Experience

Getting Set Up Google App Engine Google Maps API Key EC2 or Other Hosted Server GeoModel The Basic ModeIs UserInfo Disease Germ CommandCenter Textma rk Messenger UserThreats GameUtiIs BuiIding the Game ltself User Authentication Geolocation Spreading Germs Loading Germs Threats Spreading Germs Fighting Germs Realtime Syndication The Command Center lndex . ー TabIe ofContents VIII 218 218 219 220 220 221 222 224 225 227 229 230 232 234 235 235 241 244 251 253 267 269 271 275 295 . 297

8. 9. 10. Taking Advantage of Google Keeping Track of the User The DepIoy Button The Dashboard Receiving lnstant Messages Sending lnstant Messages Responding lntelligently The Basic Commands Checking Authentication via lnstant Messenger lntroducing a Third Party Setting Up an API SMS Caveats The Game Putting は則 Together . Sending Out Alerts Tracking Backend Traffic and Custom Data Viewing the Traffic Making Sense of the Traffic Catching the Statistics on the Server Sending Tracking Pings with JavaScript Customized Analytics Woopra Chartbeat Realtime Analytics Services Measuring User Engagement: AnaIytics on the Realtime Web . Building an SMS API Authenticating Users Zeep Mobile TextMarks Sending and Receiving the Messages Setting Up the Server Preparing [ 0 Accept Messages The Base Handler An SMS Service Class Extending the lnstant Messaging Application Building the Basic Application SMS APIs Emailto SMS The SMS Landscape 133 135 135 137 138 141 143 143 145 146 149 153 153 153 156 158 158 160 162 163 164 165 165 172 176 180 . 185 185 186 187 189 189 193 198 201 208 214 .. 217 217 217 Table ofContents

App DetaiIs Website Narne• Which website will you use the AP け 0 「 ? Whatis your website about? Website Description *.com l.e. http://example ℃ om/mobile settings Website URL ① realtimebook Just fO 「 yourr ℃ ference Between 5 and 8 characters. FO ⅱ ncomi 的 and outgoing messages. SMS Prefix•① Examples for Building the Realtime User Experience realtime 日 g ″尾 & 9. R ビ翔ⅲ g たル 0 ル〃 Zeep Mo ん ー Cancel http://instant・ messaging.appspot.com/sms/incoming/via/zeep l.e 、 http://example.com/incoming Where should we send incoming events? CaIIback URL* 0 Sending and Receiving the Messages ー 173 API key and secret. Keep these values handy, as we'll be using them in the code. After reserving your keyword, the Zeep M0bile website greets you with a newly created COde [ 0 quickly determine the source Of each request. created t0 handle all 0f the incoming messages. Changing the service name enables the of the callbacks from the service [ 0 the same SMSIncomingHandIer controller that we

TO delete a threat from the datastore, we only need い vo pieces of information: the user WhO was threatened and the germ involved. 、 h" 辷 use those variables tO locate the germ and, if we find it, we delete it from the datastore. If you 10g in as one user, cough, and then 10g in as another user, you can easily test this functionality. Figure 10-7 shows what it looks like after successfully covering up from a germ threat. iPandemic , 一 stuyvesant WER iPandemic http://localhos ☆マ - GcQ 00 0 で・ ! Map TO 0 able SMS 30 れ d ■をえ ck 4288 ”セ 0 41411. Loq Ou セ Figure 7 0- /. S 乢記 ss. ル娵 covering 叩 For a more complete game experience, the CoughActionHand1er would be a good place to adjust the scores of bo 市 the current user and the 4 、、 enemy user. For brevity, we're not adding ⅱ here, but the COde available online does update the scores at this point. BuiIding the GameItself ー 257

setting up SMS server, 164 Tornado, 79 servlet-mapping tag, 64 setOnLoadCallback( ) function, 69 Shared ltems feed ( Goog に Reader), shortcode, 156 prepending specific keyword [ 0 , Simple Update Protocol (see SUP) simplejson library, 80 simplejson module (Python), 91 SimpleXML extension (PHP), 18 reading Atom feed IDs and files, 20 since—time field (SUP file), 13 166 33 building basic application, 158 ー 165 providers, 157 APIs for, 156 216 alerts sent from analytics application, 214 ー SMS (Short Message Service), 2 , 153 ー 183 extending instant messaging application, base RequestHandler class, 162 emailto, 153 ー 156 SMS service class, 160 ー 164 setting up server, 164 preparing t0 accept messages, 163 158 ー 160 receiving messages in iPandemic game, 264 ー streaming APls (realtime), from Twitter, 87 ー statuses/sample streaming API, 88 SMSService class (example), 160-161 SMSSendHandler class (example), 181 177 authentication COde in respond method, SMSIncomingHandler class (example), 163 SMSBaseHandler class (example), 162 users of iPandemic game (example), 223 sending via TextMarks service, 229 using Zeep M0biles service, 172 ー 176 using TextMarks service, 165 ー 172 building SMS API, 180 ー 183 authenticating users, 176 ー 180 sending and receiving messages, 165 265 91 submitPost( ) function, 68 substr function, 22 sum command, 144 SUP (SimpIe Update Protocol), publishing with, 21 ー 26 304 ー lndex 11 generating SUP file, 21 SUP header, 25 testing SUP file, 24 specifying IDs, 17 subscribing with, 13 ー 21 checking the feed, 18 locating feeds, 16 SUP file, 12 ー 26 syndication, 9 ー 38 PubSubHubbub, 26 ー 38 publishing with, 36 ー 38 subscribing with, 30 ー 36 realtime syndication in iPandemic game, 271 ー 274 SUP (SimpIe Update ProtocoI), 11 publishing with SUP, 21 ー 26 subscribing with SUP, 13 ー 21 SUP file, 12 Textmark class (example), 229 in Tornado, 91 creating in Tornad0, 93 chat-main. html (example), 101 templates T object (Tornado example) , 96 ー 99 Twitter realtime streaming APIs, 87 ー 91 static_url function, 103 installing, 80 finish method, 108 define function, 104 103 chat application, chat-server Python script, building an application, 82 ー 84 basic framework, 80 async—callback functionality, 111 asynchronous, in realtime, 84 ー 87 Tornado, 79 ー 100 during, 54 timeout IOOP, new messages accumulating threads, creating in Python, 88 Thread class (Python), 89 testing out application using, 170 reserving a keyword, 165 confirming account with, 167 class handling sending messages from, 168 acquiring API key, 168 TextMarks service, 165 ー 172

Preface This book describes a host of technologies and practices used to build truly realtime web applications and experiences. lt's about building applications and interfaces that react [ 0 user input and input from Other servers in milliseconds, rather than waiting for web pages to refresh. ln some ways, these changes are incremental and fairly Obvious tO most developers. Adding simple JavaScript-based widgets to a website can be done in an afternoon by any developer. However, implementing a python chat server, or integrating some server-push functionality based on Java into your PHP-based-stack, takes a bit of ad- vance planning. ThiS bOOk aims tO break these technologies down, tO ensure that you can take any Of the examples and insert them intO your existing website. This book assumes that you're comfortable with modern web application development, but makes almost no assumptions that you know the specific technologies discussed. Rather than sticking with a simple technology, or writing about building applications using a specific programming language, this b00k uses many differenttechnologies. If you're comfortable with web application development, you should have no trouble following the examples, even if you're unfamiliar with the specific technology. Conventions Used in This Book The following typographicalconventions are used in this book: lndicates new terms, URLS, email addresses, filenames, and file extensions. Constant width Used for program listings, as well as within paragraphs to refer to program elements such as variable or function names, databases, data types, environment variables, statements, and keywords.

Adding this instant messaging functionality—、 vhich opens an instantaneous C01 れ 1 れ u ー nication channel with a user, regardless Of whether they're using your site in the web browser—opens up a 10t Of doors. Part Of building a truly realtime experience iS allowing users tO get data in and take it out from whatever method iS most readily available. lnstant messaglng provides a paradigm that is familiar tO most users and allOWS for communication in places not available via the standard web browser. Setting Upan API ー 151