Download - HC - The Mobile Adventure with Phonegap
![Page 1: HC - The Mobile Adventure with Phonegap](https://reader033.vdocument.in/reader033/viewer/2022051112/557ad0bcd8b42a2c0f8b507b/html5/thumbnails/1.jpg)
“ “
It’s time to thinkMOBILE FIRST
![Page 2: HC - The Mobile Adventure with Phonegap](https://reader033.vdocument.in/reader033/viewer/2022051112/557ad0bcd8b42a2c0f8b507b/html5/thumbnails/2.jpg)
our Story
![Page 3: HC - The Mobile Adventure with Phonegap](https://reader033.vdocument.in/reader033/viewer/2022051112/557ad0bcd8b42a2c0f8b507b/html5/thumbnails/3.jpg)
a Real Story
![Page 4: HC - The Mobile Adventure with Phonegap](https://reader033.vdocument.in/reader033/viewer/2022051112/557ad0bcd8b42a2c0f8b507b/html5/thumbnails/4.jpg)
Rails mobile view + jQuery Mobile
![Page 5: HC - The Mobile Adventure with Phonegap](https://reader033.vdocument.in/reader033/viewer/2022051112/557ad0bcd8b42a2c0f8b507b/html5/thumbnails/5.jpg)
![Page 6: HC - The Mobile Adventure with Phonegap](https://reader033.vdocument.in/reader033/viewer/2022051112/557ad0bcd8b42a2c0f8b507b/html5/thumbnails/6.jpg)
![Page 7: HC - The Mobile Adventure with Phonegap](https://reader033.vdocument.in/reader033/viewer/2022051112/557ad0bcd8b42a2c0f8b507b/html5/thumbnails/7.jpg)
![Page 8: HC - The Mobile Adventure with Phonegap](https://reader033.vdocument.in/reader033/viewer/2022051112/557ad0bcd8b42a2c0f8b507b/html5/thumbnails/8.jpg)
![Page 9: HC - The Mobile Adventure with Phonegap](https://reader033.vdocument.in/reader033/viewer/2022051112/557ad0bcd8b42a2c0f8b507b/html5/thumbnails/9.jpg)
Enough to raise money
![Page 10: HC - The Mobile Adventure with Phonegap](https://reader033.vdocument.in/reader033/viewer/2022051112/557ad0bcd8b42a2c0f8b507b/html5/thumbnails/10.jpg)
2012 - Designer full-time
![Page 11: HC - The Mobile Adventure with Phonegap](https://reader033.vdocument.in/reader033/viewer/2022051112/557ad0bcd8b42a2c0f8b507b/html5/thumbnails/11.jpg)
![Page 12: HC - The Mobile Adventure with Phonegap](https://reader033.vdocument.in/reader033/viewer/2022051112/557ad0bcd8b42a2c0f8b507b/html5/thumbnails/12.jpg)
Demo
![Page 13: HC - The Mobile Adventure with Phonegap](https://reader033.vdocument.in/reader033/viewer/2022051112/557ad0bcd8b42a2c0f8b507b/html5/thumbnails/13.jpg)
Architecture
![Page 14: HC - The Mobile Adventure with Phonegap](https://reader033.vdocument.in/reader033/viewer/2022051112/557ad0bcd8b42a2c0f8b507b/html5/thumbnails/14.jpg)
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
![Page 15: HC - The Mobile Adventure with Phonegap](https://reader033.vdocument.in/reader033/viewer/2022051112/557ad0bcd8b42a2c0f8b507b/html5/thumbnails/15.jpg)
Github4 repositories
![Page 16: HC - The Mobile Adventure with Phonegap](https://reader033.vdocument.in/reader033/viewer/2022051112/557ad0bcd8b42a2c0f8b507b/html5/thumbnails/16.jpg)
MVC“The Rails Style”
![Page 17: HC - The Mobile Adventure with Phonegap](https://reader033.vdocument.in/reader033/viewer/2022051112/557ad0bcd8b42a2c0f8b507b/html5/thumbnails/17.jpg)
Framework?
![Page 18: HC - The Mobile Adventure with Phonegap](https://reader033.vdocument.in/reader033/viewer/2022051112/557ad0bcd8b42a2c0f8b507b/html5/thumbnails/18.jpg)
Fight iOS release cycles
![Page 19: HC - The Mobile Adventure with Phonegap](https://reader033.vdocument.in/reader033/viewer/2022051112/557ad0bcd8b42a2c0f8b507b/html5/thumbnails/19.jpg)
Explore the code
![Page 20: HC - The Mobile Adventure with Phonegap](https://reader033.vdocument.in/reader033/viewer/2022051112/557ad0bcd8b42a2c0f8b507b/html5/thumbnails/20.jpg)
Aug 2012 - Porting to Android
2 weeks
![Page 21: HC - The Mobile Adventure with Phonegap](https://reader033.vdocument.in/reader033/viewer/2022051112/557ad0bcd8b42a2c0f8b507b/html5/thumbnails/21.jpg)
Chromium error -6
![Page 22: HC - The Mobile Adventure with Phonegap](https://reader033.vdocument.in/reader033/viewer/2022051112/557ad0bcd8b42a2c0f8b507b/html5/thumbnails/22.jpg)
// -- 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
![Page 23: HC - The Mobile Adventure with Phonegap](https://reader033.vdocument.in/reader033/viewer/2022051112/557ad0bcd8b42a2c0f8b507b/html5/thumbnails/23.jpg)
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;}
![Page 24: HC - The Mobile Adventure with Phonegap](https://reader033.vdocument.in/reader033/viewer/2022051112/557ad0bcd8b42a2c0f8b507b/html5/thumbnails/24.jpg)
Same function nameson iOS and Android
function triggerActionSheet(param,url) { // Android only}
function triggerActionSheet(param,url) { // iOS Only}
![Page 25: HC - The Mobile Adventure with Phonegap](https://reader033.vdocument.in/reader033/viewer/2022051112/557ad0bcd8b42a2c0f8b507b/html5/thumbnails/25.jpg)
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);*/}
![Page 26: HC - The Mobile Adventure with Phonegap](https://reader033.vdocument.in/reader033/viewer/2022051112/557ad0bcd8b42a2c0f8b507b/html5/thumbnails/26.jpg)
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
![Page 27: HC - The Mobile Adventure with Phonegap](https://reader033.vdocument.in/reader033/viewer/2022051112/557ad0bcd8b42a2c0f8b507b/html5/thumbnails/27.jpg)
Android DatePicker Galaxy S3
![Page 28: HC - The Mobile Adventure with Phonegap](https://reader033.vdocument.in/reader033/viewer/2022051112/557ad0bcd8b42a2c0f8b507b/html5/thumbnails/28.jpg)
Questions?
![Page 29: HC - The Mobile Adventure with Phonegap](https://reader033.vdocument.in/reader033/viewer/2022051112/557ad0bcd8b42a2c0f8b507b/html5/thumbnails/29.jpg)
5 Design tips
![Page 30: HC - The Mobile Adventure with Phonegap](https://reader033.vdocument.in/reader033/viewer/2022051112/557ad0bcd8b42a2c0f8b507b/html5/thumbnails/30.jpg)
1. Break the rules
![Page 31: HC - The Mobile Adventure with Phonegap](https://reader033.vdocument.in/reader033/viewer/2022051112/557ad0bcd8b42a2c0f8b507b/html5/thumbnails/31.jpg)
1. Break the rules
![Page 32: HC - The Mobile Adventure with Phonegap](https://reader033.vdocument.in/reader033/viewer/2022051112/557ad0bcd8b42a2c0f8b507b/html5/thumbnails/32.jpg)
2. Acknowledge User Interactions
![Page 33: HC - The Mobile Adventure with Phonegap](https://reader033.vdocument.in/reader033/viewer/2022051112/557ad0bcd8b42a2c0f8b507b/html5/thumbnails/33.jpg)
2. Acknowledge User Interactions
![Page 34: HC - The Mobile Adventure with Phonegap](https://reader033.vdocument.in/reader033/viewer/2022051112/557ad0bcd8b42a2c0f8b507b/html5/thumbnails/34.jpg)
3. Give your app personality
![Page 35: HC - The Mobile Adventure with Phonegap](https://reader033.vdocument.in/reader033/viewer/2022051112/557ad0bcd8b42a2c0f8b507b/html5/thumbnails/35.jpg)
3. Give your app personality
![Page 36: HC - The Mobile Adventure with Phonegap](https://reader033.vdocument.in/reader033/viewer/2022051112/557ad0bcd8b42a2c0f8b507b/html5/thumbnails/36.jpg)
3. Give your app personality
![Page 37: HC - The Mobile Adventure with Phonegap](https://reader033.vdocument.in/reader033/viewer/2022051112/557ad0bcd8b42a2c0f8b507b/html5/thumbnails/37.jpg)
4. Call To Action & Distractions
![Page 38: HC - The Mobile Adventure with Phonegap](https://reader033.vdocument.in/reader033/viewer/2022051112/557ad0bcd8b42a2c0f8b507b/html5/thumbnails/38.jpg)
4. Call To Action & Distractions
![Page 39: HC - The Mobile Adventure with Phonegap](https://reader033.vdocument.in/reader033/viewer/2022051112/557ad0bcd8b42a2c0f8b507b/html5/thumbnails/39.jpg)
and last Don’t forget the basicsConsistency, Simplicity, etc
![Page 40: HC - The Mobile Adventure with Phonegap](https://reader033.vdocument.in/reader033/viewer/2022051112/557ad0bcd8b42a2c0f8b507b/html5/thumbnails/40.jpg)
Questions?
![Page 41: HC - The Mobile Adventure with Phonegap](https://reader033.vdocument.in/reader033/viewer/2022051112/557ad0bcd8b42a2c0f8b507b/html5/thumbnails/41.jpg)
Looking Forward
![Page 42: HC - The Mobile Adventure with Phonegap](https://reader033.vdocument.in/reader033/viewer/2022051112/557ad0bcd8b42a2c0f8b507b/html5/thumbnails/42.jpg)
Have fun!