Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Mobile Device APIs for Fun and Profit

Mobile Device APIs for Fun and Profit

Fluent, 2012

D7826ab49f74589fcada00cb92e5ede7?s=128

James Pearce

May 30, 2012
Tweet

Transcript

  1. James Pearce

  2. None
  3. None
  4. None
  5. None
  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
  9. None
  10. None
  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
  16. None
  17. None
  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/
  30. None
  31. None
  32. None
  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
  35. None
  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/
  48. None
  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
  51. None
  52. None
  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);
  55. None
  56. None
  57. Challenges & moving forward

  58. None
  59. http://caniuse.com/#search=getusermedia

  60. At some point, Progressive Enhancement can give way to No

    Compromise
  61. None
  62. http://rng.io

  63. Core Mobile Web Platform http://coremob.org

  64. @ Labs

  65. None
  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 /