Mobile Device APIs for Fun and Profit

Fluent, 2012

Transcript

1. James Pearce
6. A medium that would be innovative, beautiful, disruptive, and with us everywhere “ ”
7. @media  screen  and  (max-­‐width:  320px)
8. I had rather hoped that the web would be more awesome than this by now
11. Web iPhone Android
12. Device APIs
13. Client-side APIs that enable the development of Web Applications that interact with device hardware http://www.w .org/ / /DeviceAPICharter “ ”
14. 320px
15. Storage GPS device Audio player Video player Accelerometer Compass Camera Bluetooth Telephony Messaging Contacts Calendar Notifications Proximity sensor Thermometer Pressure gauge NFC RFID
18. <a  href="call.wmls#makeCall()">    Call  us </a> //  call.wmls extern  function  makeCall()  {    WTAPublic.makeCall("16505551234"); }
19. <a  href="calls.wmls#acceptCall()">    Pick  up! </a> //  call.wmls extern  function  acceptCall()  {    WTACallCont.accept("1",  1); }
20. //  sms.wmls extern  function  sendMsg()  {    WTANetText.send("16505551234",  "WML  rocks"); } extern  function  readMsg(i)  {    var  sms  =  WTANetText.read(i);    return  WTANetText.getFieldValue(        sms,  "body"    ); }
21. //  contacts.wmls extern  function  addFriend(i,  num,  name)  {    WTAPhoneBook.write(i,  num,  name); } //  return  structs  of  contact  details extern  function  getFriendById(i)  {    return  WTAPhoneBook.read("i",  i); } extern  function  getFriendByName(name)  {    return  WTAPhoneBook.read("t",  name); }
22. You still can’t do any of this in a contemporary mobile browser
23. ▪ Accelerometer ▪ Calendar ▪ Camera ▪ Contacts ▪ Core ▪ Device interaction ▪ Device status ▪ File system ▪ Geolocation ▪ Messaging ▪ Orientation ▪ Tasks ▪ Viewport ▪ Webview http://specs.wacapps.net/
24. to create client-side APIs that enable the development of Web Applications [..] that interact with devices' services such as Calendar, Contacts, Camera, etc “ ” http://www.w .org/ /dap/
25. ▪ Media Capture (forms) ▪ Media Capture (.getUserMedia) ▪ Contacts ▪ Battery Status ▪ Network Information ▪ Sensor ▪ Vibration ▪ Calendar ▪ Menu ▪ Permissions ▪ Media Capture (.device) ▪ Messaging ▪ Gallery ▪ System info
26. Geolocation http://www.w .org/ /geolocation/ Web Apps http://www.w3.org/ /webapps/ Web Notifications http://www.w .org/ /web-notifications/
27. A few quick examples
28. ▪ Store finder ▪ Check-in ▪ Localizing search ▪ Weather Geolocation
29. navigator.geolocation.getCurrentPosition(    function(point)  {        console.log(point);    } ); http://www.w .org/TR/geolocation-API/
33. https://github.com/jamesgpearce/compios
34. var  bearing  =  Math.atan2(    Math.sin(lon2  -­‐  lon1)  *  Math.cos(lat2),      Math.cos(lat1)  *  Math.sin(lat2)  -­‐    Math.sin(lat1)  *  Math.cos(lat2)  *    Math.cos(lon2  -­‐  lon1) )  *  180  /  Math.PI; arrow.style.webkitTransform  =    'rotateZ('  +  bearing  +  'deg)'; http://www.movable-type.co.uk/scripts/latlong.html
36. ▪ Profile pictures ▪ Photo sharing ▪ Review sites ▪ Recognition Camera & User media
37. <input      type="file"    accept="image/*"    capture="camera" /> http://dev.w .org/ /dap/camera/
38. <input  type="file"  accept="image/*"  id="photo"  /> var  photo  =  document.getElementById('photo'); photo.files[0].getFormatData(    function  (data)  {},  //  success    function  ()  {}            //  error ); //  file  is  a  MediaFile,  extending  File. //  data  is  a  MediaFileData,  containing: //      codecs,  bitrate,  height,  width,  duration http://dev.w .org/ /dap/camera/
39. navigator.getUserMedia(    {        audio:  false,        video:  true    },    function  (stream)  {},  //  success    function  ()  {}                //  error ); //  stream  is  a  LocalMediaStream: //  use  URL.createObjectURL(stream) //  to  bind  to  <video>  src http://dev.w .org/ /webrtc/editor/getusermedia.html
40. http://caniuse.com/#search=getusermedia
41. http://bit.ly/gumsto
42. Temperature, ºC AmbientLight, Lux AmbientNoise, dbA MagneticField, uTesla Proximity, cm AtmPressure, kP RelHumidity, var  sensor  =  new      SensorConnection(        'Temperature'    );
43. navigator.contacts.find(    ['name',  'emails'],          //  fields    function  (contacts)  {},  //  success    function  ()  {},                  //  error    {                                              //  find  options          filter:  'James',          multiple:  true    } ); //  displayName,  name,  nickname,  phoneNumbers //  emails,  addresses,  ims,  organizations,  birthday //  note,  photos,  categories,  urls http://www.w .org/TR/contacts-api/
44. The ability to add and update contact information is not a function of the API provided in this specification “ ”
45. <a  id="vcard">Save  Contacts</a> var  vcard  =      'BEGIN:VCARD\r\n'  +    'VERSION:3.0\r\n'  +    'UID:'  +  contact.id  +  '\r\n'  +          'N:Pearce;James\r\n'  +    'FN:James  Pearce\r\n'  +    'END:VCARD'; document.getElementById('vcard').href  =    'data:text/x-­‐vcard;charset=utf-­‐8,'  +    encodeURIComponent(vcard);
46. ▪ Sharing ▪ Notifications ▪ Offline transport fallback ▪ Frictionless web sign-on Messaging
47. navigator.sendMessage(    "sms:16505551234?"  +    "body=JavaScript%20says%20hi",      [],                          //  attachments  as  File  array    function  ()  {},  //  success    function  ()  {}    //  error ); //  also  mms:  and  mailto: http://dev.w .org/ /dap/messaging/
49. ▪ Telephony ▪ Messaging ▪ Contacts ▪ Camera ▪ Network ▪ USB ▪ Embedded browser ▪ Battery ▪ Device Status ▪ Settings ▪ Mouse Lock ▪ Vibration ▪ NFC ▪ Bluetooth ▪ Calendar ▪ Background services
50. https://wiki.mozilla.org/WebAPI “ ” The Mozilla WebAPI team is pushing the envelope of the web to include - and in places exceed - the capabilities of competing stacks
53. var  myCall  =    navigator.telephony.dial("16505551234"); myCall.state;    //  dialing,  ringing,  busy,  connecting,    //  connected,  disconnecting,  disconnected,      //  incoming myCall.onconnected  =  function  ()  {};    //  onbusy,  ondisconnected  etc myCall.hangup(); myCall2.answer(); https://wiki.mozilla.org/WebAPI/WebTelephony
54. var  contact  =  new  mozContact(); contact.init({    name:  'James',    tel:  '16505551234' }); navigator.mozContacts.save(contact);
57. Challenges & moving forward
59. http://caniuse.com/#search=getusermedia
60. At some point, Progressive Enhancement can give way to No Compromise
62. http://rng.io
63. Core Mobile Web Platform http://coremob.org
64. @ Labs
66. James Pearce
67. ▪ http://www.flickr.com/photos/troymccluresf ▪ http://www.flickr.com/photos/chrisangle ▪ http://www.flickr.com/photos/ivan_kaurin ▪ http://www.flickr.com/photos/ @N /