Mobile Device APIs for Fun and Profit

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 /