Develop, Test, and Debug
Cross-platform Apps Using PhoneGap
presented by Giorgio Natili
Mobile+Web Dev Conference
Boston, 16-18 July 2013
about me
e-mail: g.natili@gnstudio.com
twitter: @giorgionatili
blog: webplatform.io (coming soon!)
community: codeinvaders.net
Agenda
- Configure your development environment
- Building and debugging on multiple platforms
- Mobile Development Workflow
- Web App Frameworks
- The PhoneGap command line tool
- Mobile App Architecture (make it simple!)
- Device Storage API
- Contacts API
- Device Sensors
- Geolocation API
- Camera and Capture APIs
- File API
- Working with External Plugins
Which platform?
Prepare a slide that gracefully renders the OS X
Windows and Linux platforms
Which tool?
Prepare a slide that renders the different possibilities: Sublime Tex, IntelliJ IDEA, Eclipse, Adobe Brackets, VIM, Aptana
Install phonegap
install node.js and npm
install the required SDks
create a design to render the Android SDK, the BlackBerry SDK, the iOS SDK, the Windows Phone SDK and the Tizen SDK (these images will be used separately in the next slides)
in the near future also Firefox OS and Ubuntu will be supported by PhoneGap so I need that the slide puts into evidence that other 2 new platforms are coming.
Android SDK (tips and tricks)
Blackberry SDK (TIPS AND TRICKS)
ios SDK (TIPS AND TRICKS)
Windows phone skd (TIPS AND TRICKS)
the browser is your best friend
design a slide that helps me to enforce the concept that the development happens in the browser using web standards
chrome
internet explorer
firefox
safari
Building and Debugging
mobile apps build process
here I need a slide that give the feeling to the user that the build process is a pain
clouds build services
build locally with cli
running tests when building
jasmine test suite
automate the tests report wiht grunt
debug in the browser
debug in chrome
debug in internet explorer
debug in firefox
debug in safari
Remote debug tools
i need here a slide that emphasize the fact that the following tool can help a lot when debugging: Adobe Edge Inspect, WeinRe, iWebInspector, Safari Remote debug
Mobile Dev Workflow
ripple
responsive inspector
live reload
emulator vs simulator vs device
I need a slide representing the comparison between these items
android emulator
blackberry emulator
ios emulator
windows emulator
automated testing
Make your shell sexy
In this slide I guess some creativity should
really looks great
CORDOVA CLI
build and deploy
bug sense
Here it should be great to have a slide about bug hunting
Mobile App Architecture
keep it LIGHTWEIGHT
Here a funny slide should be great, imagine a comparison between a fat app full of libraries (jQuery, Bootstrap, Foundation, dojo, etc.) and a light one based upon require.js, zepto.js and few others.
compression and optimization tools
javascript amd
app bootstrap
folder structure
think it global
A slide about localization and
globalization should be great
communication between modules
Here a cool slide that shows a communication flows between modules that know each other through a central point should work