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

James Pearce

May 30, 2012
Tweet

More Decks by James Pearce

Other Decks in Technology

Transcript

  1. James Pearce

    View Slide

  2. View Slide

  3. View Slide

  4. View Slide

  5. View Slide

  6. A medium that would be
    innovative, beautiful, disruptive,
    and with us everywhere


    View Slide

  7. @media  screen  and  (max-­‐width:  320px)

    View Slide

  8. I had rather hoped that
    the web would be more
    awesome than this by now

    View Slide

  9. View Slide

  10. View Slide

  11. Web
    iPhone
    Android

    View Slide

  12. Device APIs

    View Slide

  13. Client-side APIs that enable the
    development of Web Applications
    that interact with device hardware
    http://www.w .org/ / /DeviceAPICharter


    View Slide

  14. 320px

    View Slide

  15. Storage
    GPS device
    Audio player
    Video player
    Accelerometer
    Compass
    Camera
    Bluetooth
    Telephony
    Messaging
    Contacts
    Calendar
    Notifications
    Proximity sensor
    Thermometer
    Pressure gauge
    NFC
    RFID

    View Slide

  16. View Slide

  17. View Slide


  18.    Call  us

    //  call.wmls
    extern  function  makeCall()  {
       WTAPublic.makeCall("16505551234");
    }

    View Slide


  19.    Pick  up!

    //  call.wmls
    extern  function  acceptCall()  {
       WTACallCont.accept("1",  1);
    }

    View Slide

  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"
       );
    }

    View Slide

  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);
    }

    View Slide

  22. You still can’t do any of this in a
    contemporary mobile browser

    View Slide

  23. ▪ Accelerometer
    ▪ Calendar
    ▪ Camera
    ▪ Contacts
    ▪ Core
    ▪ Device interaction
    ▪ Device status
    ▪ File system
    ▪ Geolocation
    ▪ Messaging
    ▪ Orientation
    ▪ Tasks
    ▪ Viewport
    ▪ Webview
    http://specs.wacapps.net/

    View Slide

  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/

    View Slide

  25. ▪ Media Capture (forms)
    ▪ Media Capture (.getUserMedia)
    ▪ Contacts
    ▪ Battery Status
    ▪ Network Information
    ▪ Sensor
    ▪ Vibration
    ▪ Calendar
    ▪ Menu
    ▪ Permissions
    ▪ Media Capture (.device)
    ▪ Messaging
    ▪ Gallery
    ▪ System info

    View Slide

  26. Geolocation
    http://www.w .org/ /geolocation/
    Web Apps
    http://www.w3.org/ /webapps/
    Web Notifications
    http://www.w .org/ /web-notifications/

    View Slide

  27. A few quick examples

    View Slide

  28. ▪ Store finder
    ▪ Check-in
    ▪ Localizing search
    ▪ Weather
    Geolocation

    View Slide

  29. navigator.geolocation.getCurrentPosition(
       function(point)  {
           console.log(point);
       }
    );
    http://www.w .org/TR/geolocation-API/

    View Slide

  30. View Slide

  31. View Slide

  32. View Slide

  33. https://github.com/jamesgpearce/compios

    View Slide

  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

    View Slide

  35. View Slide

  36. ▪ Profile pictures
    ▪ Photo sharing
    ▪ Review sites
    ▪ Recognition
    Camera & User media

    View Slide

  37.    type="file"
       accept="image/*"
       capture="camera"
    />
    http://dev.w .org/ /dap/camera/

    View Slide


  38. 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/

    View Slide

  39. navigator.getUserMedia(
       {
           audio:  false,
           video:  true
       },
       function  (stream)  {},  //  success
       function  ()  {}                //  error
    );
    //  stream  is  a  LocalMediaStream:
    //  use  URL.createObjectURL(stream)
    //  to  bind  to    src
    http://dev.w .org/ /webrtc/editor/getusermedia.html

    View Slide

  40. http://caniuse.com/#search=getusermedia

    View Slide

  41. http://bit.ly/gumsto

    View Slide

  42. Temperature, ºC
    AmbientLight, Lux
    AmbientNoise, dbA
    MagneticField, uTesla
    Proximity, cm
    AtmPressure, kP
    RelHumidity,
    var  sensor  =  new  
       SensorConnection(
           'Temperature'
       );

    View Slide

  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/

    View Slide

  44. The ability to add and update
    contact information is not a
    function of the API provided in
    this specification


    View Slide

  45. Save  Contacts
    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);

    View Slide

  46. ▪ Sharing
    ▪ Notifications
    ▪ Offline transport fallback
    ▪ Frictionless web sign-on
    Messaging

    View Slide

  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/

    View Slide

  48. View Slide

  49. ▪ Telephony
    ▪ Messaging
    ▪ Contacts
    ▪ Camera
    ▪ Network
    ▪ USB
    ▪ Embedded browser
    ▪ Battery
    ▪ Device Status
    ▪ Settings
    ▪ Mouse Lock
    ▪ Vibration
    ▪ NFC
    ▪ Bluetooth
    ▪ Calendar
    ▪ Background services

    View Slide

  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

    View Slide

  51. View Slide

  52. View Slide

  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

    View Slide

  54. var  contact  =  new  mozContact();
    contact.init({
       name:  'James',
       tel:  '16505551234'
    });
    navigator.mozContacts.save(contact);

    View Slide

  55. View Slide

  56. View Slide

  57. Challenges &
    moving forward

    View Slide

  58. View Slide

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

    View Slide

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

    View Slide

  61. View Slide

  62. http://rng.io

    View Slide

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

    View Slide

  64. @ Labs

    View Slide

  65. View Slide

  66. James Pearce

    View Slide

  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 /

    View Slide