HC - The Mobile Adventure with Phonegap

“ “

It’s time to thinkMOBILE FIRST

our Story

a Real Story

Rails mobile view + jQuery Mobile

Enough to raise money

2012 - Designer full-time

Demo

Architecture

1 Heroku AppRuby on Rails

Amazon RDS Amazon S3 Sendgrid

API

Mobile AppsWebsitehttp://hockey-community.com

Phonegap(HTML5)

Database Storage Emailing

Crypt with Json + oAuth

New Relic

Performance Monitoring

Cloud Hosting

Github

Code Versioning

CLIENT PART

BACK OFFICE

Github

Code Versioning

Github4 repositories

MVC“The Rails Style”

Framework?

Fight iOS release cycles

Explore the code

Aug 2012 - Porting to Android

2 weeks

Chromium error -6

// -- Set android params -- // function setAndroidParams(href){" if (href) {" " var n = href.indexOf('?');" " window.localStorage.setItem("android-href", href);" " href = href.substring(0, n != -1 ? n : href.length);" " return href; " }}

// -- Android anchor listener -- //function refresh_android_listener(page_div, event){

" " $(page_div).on(event, 'a', function() {" " " var href = $(this).attr('href');" " " if (href && href != "#" && href.search("tel") == -1){" " " " change_page(href);" " " " return false;" " " } " " });}

Changing the href listenersEvery time we change the page

Accessing URL parametersstatuses_show.html?status_id=104381

function getParamValue(param,url) { // Android only url = window.localStorage.getItem("android-href");" // Common to iOS and Android" var u = (url == undefined || (url != undefined && url.indexOf("?") == -1)) ? document.location.href : url; var reg = new RegExp('(\\?|&|^)'+param+'=(.*?)(&|$)');" matches = u.match(reg); return (matches != undefined && matches.length > 1) ? decodeURIComponent(matches[2]).replace(/\+/g,' ') : null;}

Same function nameson iOS and Android

function triggerActionSheet(param,url) { // Android only}

function triggerActionSheet(param,url) { // iOS Only}

Native Scrolling & height fixingon iOS and Android

#events_content  {   margin-­‐top:42px;   height:420px;   overflow-­‐y:  scroll;   -­‐webkit-­‐overflow-­‐scrolling:  touch;   /*-­‐webkit-­‐transform:  translateZ(0px);*/}

Android 2.3

var  container  =  document.querySelector('#box');container.classList.add('wrap');container.classList.remove('wrap');container.classList.toggle('wrap');Fix:

Doesn’t work

//  Legacy  JS   var  legacyHasClass  =  function  (el,  cl)  {                  var  regex  =  new  RegExp('(?:\\s|^)'  +  cl  +  '(?:\\s|$)');                  return  !!el.className.match(regex);          },          legacyAddClass  =  function  (el,  cl)  {                  el.className  +=  '  '  +  cl;          },          legacyRemoveClass  =  function  (el,  cl)  {                  var  regex  =  new  RegExp('(?:\\s|^)'  +  cl  +  '(?:\\s|$)');                  el.className  =  el.className.replace(regex,  '  ');          },          legacyToggleClass  =  function  (el,  cl)  {                  hasClass(el,  cl)  ?  removeClass(el,  cl)  :  addClass(el,  cl);          };

Works

Android DatePicker Galaxy S3

Questions?

5 Design tips

1. Break the rules

1. Break the rules

2. Acknowledge User Interactions

2. Acknowledge User Interactions

3. Give your app personality

3. Give your app personality

3. Give your app personality

4. Call To Action & Distractions

4. Call To Action & Distractions

and last Don’t forget the basicsConsistency, Simplicity, etc

Questions?

Looking Forward

Have fun!