introduction to mobile development for ios and android apps with ionic

ByJorge Garifuna

Professional Web Developerinfo@GariDigital.com

213-915-4402

JGari.com/resume

Twitter: @jgarifuna

idabiña?

JGari.com/resume

maga-dien-tina!

JGari.com/resume

idabiña? How are you?

maga-dien-tina! I am fine!

JGari.com/resume

Show you how easy it is to start mobile development

Illustrate how to test on a physical device

JGari.com/resume

• Very Expensive

• Time Consuming

• Maintenance Nightmare

JGari.com/resume

• Leverage Existing Skills

• Get to Market Sooner

• Reach More Users

JGari.com/resume

Cordova

JGari.com/resume

1. Style 2. Script

3. API Access & Multi-platform packager

Cordova

The beautiful, open source front-end SDK for developing

hybrid mobile apps with HTML5

HTML enhanced for web apps!

Controversial Translation: JavaScript framework like JQuery

Web Mobile

Presentation HTML HTML5

Styling CSS CSS3

Logic PHP, Perl, Python, Ruby, Java, C, C++, Javascript

PHP, Objective-C, Java, Javascript

Database MySQL, PostgreSQL SQLite

IDE NetBeans, Eclipse, DreamWeaver, Sublime

Xcode, Netbeans, Eclipse, DreamWeaver CS5.5+, Sublime

Frameworks CakePHP, Symphony, ATK, Jquery, Sencha EXT JS, Zend

Jquery Mobile, Sencha Touch, Jo, PhoneGap,Ionic

Distribution Web Hosting Web Hosting, App Store, Market

JGari.com/resume

1. Build Mobile App2. Test App on Browser3. Test App on IOS Simulator4. Test App on Android Phone5. Access Devices APIs

JGari.com/resume

1. SketchyPad/iMockups for wireframing2. Netbeans3. Ionic4. PhoneGap5. IOS Simulator6. Android Phone

JGari.com/resume

JGari.com/resume

JGari.com/resume

JGari.com/resume

JGari.com/resumeSMS your name & email to: 213-985-4413

JGari.com/resume

JGari.com/resume

JGari.com/resume

JGari.com/resume

Install NodeJs Visit: https://nodejs.org

Install Cordova & Ionic from commad line npm install -g cordova ionic

JGari.com/resume

Start a project from command line ionic start myApp blank ionic start myApp tabs ionic start myApp sidemenu

JGari.com/resume

Run your project from command line cd myApp ionic serve Test look and feel for both IOS and Android ionic serve --lab

More options at: http://ionicframework.com/docs/cli/run.html

JGari.com/resume

Run your project from command line cd myApp ionic platform add ios ionic build ios ionic emulate ios Run on device (Plug device to computer) ionic run ios [options] (nice command: ionic run --help) ionic run android [options] (activate developer option, enable USB

debugger) Ionic run android –l –c -s

More options at: http://ionicframework.com/docs/cli/run.htmlJGari.com/resume

Add better navigation provided by Ionic http://ionicframework.com/docs/components/

Tap into the device’s APIs (camera, GPS) with ngCordova http://ngcordova.com/docs/plugins/

JGari.com/resume

JGari.com/resume

JGari.com/resume

May the demo gods be with us

JGari.com/resume

Jorge Garifuna▪info@GariDigital.com▪@jgarifuna

JGari.com/resume

1. https://nodejs.org2. http://ionicframework.com3. https://angularjs.org4. http://phonegap.com5. http://cordova.apache.org6. http://ngcordova.com

JGari.com/resume