Computer Science 15-237
Class Notes:  Going Mobile

• Serving from your laptop
  1. Host your code
     1. On andrew contrib server (see http://www.contrib.andrew.cmu.edu/)
        1. ssh linux.andrew.cmu.edu
        2. mkdir www
        3. fs sa www system:anyuser rl
        4. cd www
        5. vi index.html  [make a simple html Hello World page]
        6. Access from clients
           • http://www.contrib.andrew.cmu.edu/~[your andrewid]
              
     2. Local web server (node with express) on your laptop
        1. Install node (with express)
           1. Go to nodejs.org, download, and install node
           2. Download and unzip basicNodeServer.zip (creates directory named "server" (perhaps inside a directory named "basicNodeServer"), rename the "server" directory as appropriate)
        2. edit files in www directory as appropriate
        3. open node command prompt and...:
           (Note: you may be able to use any command prompt, not just a node command prompt, depending on your system.)
           1. cd into server directory (or a copy of it)
           2. in server directory, run:  node app.js  (runs in port 8080; edit app.js to change this)
        4. Access from clients
           • Local machine:  localhost:8080/index.html   or:  127.0.0.1:8080/index.html
           • Local router (an intranet):  <localAddr>:8000/index.html
                  Where you find <localAddr> using ipconfig on Windows or ifconfig on Mac
           • Non-Local router:  try ifconfig.me (and perhaps configure Port Forwarding (ugh))
           • If you use the default index.html file, you should see this message:
             This is the index.html file for my server!
              
  2. Preferred browsers
     • iOS:  Safari or Chrome
     • Android:  Chrome (only for newer), some native browsers (depends), Firefox Beta, Evan's Cordova browser
     • Evan's Cordova browser for Android
       • Install
         1. On your Android phone, go to Settings / Applications / check "Unknown Sources"
         2. Still on your Android phone, click on CordovaBrowser_v1.apk (coming soon...)
       • Advantages / Tradeoffs
         • better canvas on some phones but not others
         • better dev cycle for PhoneGap
         • equivalent performance to PhoneGap native app
     • Windows Phone:  IE (default browser)
        
• Platform detection
  • Inspect the window.navigator object
    1. Open Chrome Inspector (eg, inspectElement for any element)
    2. Select the Console tab
    3. Enter:  navigator
    4. Now you can visually inspect the navigator object
        
  • For platform detection, we need:
    • navigator.userAgent
      eg:  Chrome 22:
      "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.4 (KHTML, like Gecko) Chrome/22.0.1229.79 Safari/537.4"
       
    • navigator.platform
      eg: Linux:
      "Linux x86_64"
       
  • via Javascript:
    function isAndroid(){
        return navigator.userAgent.indexOf("Android") !== -1;
    }
    
    function isIOS(){
       return  !!(navigator.userAgent.match(/iPhone/i) ||
               navigator.userAgent.match(/iPod/i) ||
               navigator.userAgent.match(/iPad/i));
    }
     
  • Example:  platformDetection.html
     
  • Recommended Reading
    • User Agent String HIstory
    • Building Your Own Browser/Platform Detection Utility
       
• Feature Detection
  • Phone Vibration shim

    // Required when using PhoneGap
    var nop = function() { };
    if (window.navigator === undefined) {
        window.navigator = {};
    }
    if (window.navigator.notification === undefined) {
        window.navigator.notification = {};
    }
    if (window.navigator.notification.vibrate === undefined)   
        window.navigator.notification.vibrate = nop;
    }

  • Adding Bind to Function's Prototype

    // iOS5 or less does not have .bind so add it if needed (iOS6 has it!)
    function patchFnBind(){
       if (Function.prototype.bind === undefined){
          Function.prototype.bind = function (bind) {
               var self = this;
               return function () {
                   var args = Array.prototype.slice.call(arguments);
                   return self.apply(bind || null, args);
               };
           };
       }
    }

  • Accelerometer shim

       if (window.navigator.accelerometer === undefined) {
         window.navigator.accelerometer = {};
       }
       if (window.navigator.accelerometer.watchAcceleration === undefined) {
         window.navigator.accelerometer.watchAcceleration = function(onAccelerometerUpdate) {
           function keyCheck(ev){
             var keyCode = typeof ev.which != "undefined" ? ev.which : event.keyCode;
             // 37=Left  38=Up  39=Right  40=Down
             if ([37,38,39,40].indexOf(keyCode) != -1) {
               var left = (keyCode == 37) ? 3 : 0; //velocity is 3
               var up = (keyCode == 38) ? 3 : 0;
               var right = (keyCode == 39) ? 3 : 0;
               var down = (keyCode == 40) ? 3 : 0;
               onAccelerometerUpdate({
                 x: down*5 - up*5,
                 y: right*5 - left*5,
                 z: 0,
                 timestamp: Date.now()
               });
             }
             ev.preventDefault();
             ev.stopPropagation();
           }
           window.addEventListener('keydown', keyCheck, false)
         }
       }

  • Event Support Checks

    // See http://perfectionkills.com/detecting-event-support-without-browser-sniffing/
    // Usage example:  isEventSupported("click") // works for any event
    var isEventSupported = (function(){
       var TAGNAMES = {
         'select':'input','change':'input',
         'submit':'form','reset':'form',
         'error':'img','load':'img','abort':'img'
       }
       function isEventSupported(eventName) {
         var el = document.createElement(TAGNAMES[eventName] || 'div');
         eventName = 'on' + eventName;
         var isSupported = (eventName in el);
         if (!isSupported) {
           el.setAttribute(eventName, 'return;');
           isSupported = typeof el[eventName] == 'function';
         }
         el = null;
         return isSupported;
       }
       return isEventSupported;
     })();
    

• Viewport
  manage the width and zoom of the webpage

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

  <meta name="viewport" content="320, initial-scale=.5, maximum-scale=2">

  <meta name="viewport" content="width=500">
   

• Local Storage
  First verify it's there:
      if (typeof(localStorage)!=="undefined") {
      }
  persistent store, but just strings!
      window.localStorage[myAppName + key] = JSON.stringify(data);
    console.log(JSON.parse(window.localStorage[myAppName + key]));
   
• bouncyBall Sample App
  See the live bouncyBall demo and the source code in bouncyBall.zip.
  • Touch Events
  • Accelerometer
  • Gyroscope
  • Dynamic Canvas Scaling
  • Request Animation Frame and delta time

carpe diem   -   carpe diem   -   carpe diem   -   carpe diem   -   carpe diem   -   carpe diem   -   carpe diem   -   carpe diem   -   carpe diem