Mobile Device APIs for Fun and Profit

Fluent, 2012

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