32
By Jorge Garifuna Professional Web Developer [email protected] 213-915-4402 JGari.com/resume Twitter: @jgarifuna

Introduction to Mobile Development for IOS and Android Apps with Ionic

Embed Size (px)

Citation preview

Page 1: Introduction to Mobile Development for IOS and Android Apps with Ionic

ByJorge Garifuna

Professional Web [email protected]

213-915-4402

JGari.com/resume

Twitter: @jgarifuna

Page 2: Introduction to Mobile Development for IOS and Android Apps with Ionic

idabiña?

JGari.com/resume

Page 3: Introduction to Mobile Development for IOS and Android Apps with Ionic

maga-dien-tina!

JGari.com/resume

Page 4: Introduction to Mobile Development for IOS and Android Apps with Ionic

idabiña? How are you?

maga-dien-tina! I am fine!

JGari.com/resume

Page 5: Introduction to Mobile Development for IOS and Android Apps with Ionic

Show you how easy it is to start mobile development

Illustrate how to test on a physical device

JGari.com/resume

Page 6: Introduction to Mobile Development for IOS and Android Apps with Ionic

• Very Expensive

• Time Consuming

• Maintenance Nightmare

JGari.com/resume

Page 7: Introduction to Mobile Development for IOS and Android Apps with Ionic

• Leverage Existing Skills

• Get to Market Sooner

• Reach More Users

JGari.com/resume

Cordova

Page 8: Introduction to Mobile Development for IOS and Android Apps with Ionic

JGari.com/resume

1. Style 2. Script

3. API Access & Multi-platform packager

Cordova

Page 9: Introduction to Mobile Development for IOS and Android Apps with Ionic

The beautiful, open source front-end SDK for developing

hybrid mobile apps with HTML5

Page 10: Introduction to Mobile Development for IOS and Android Apps with Ionic

HTML enhanced for web apps!

Controversial Translation: JavaScript framework like JQuery

Page 11: Introduction to Mobile Development for IOS and Android Apps with Ionic
Page 12: Introduction to Mobile Development for IOS and Android Apps with Ionic

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

Page 13: Introduction to Mobile Development for IOS and Android Apps with Ionic

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

JGari.com/resume

Page 14: Introduction to Mobile Development for IOS and Android Apps with Ionic

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

JGari.com/resume

Page 15: Introduction to Mobile Development for IOS and Android Apps with Ionic

JGari.com/resume

Page 16: Introduction to Mobile Development for IOS and Android Apps with Ionic

JGari.com/resume

Page 17: Introduction to Mobile Development for IOS and Android Apps with Ionic

JGari.com/resume

Page 18: Introduction to Mobile Development for IOS and Android Apps with Ionic

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

Page 19: Introduction to Mobile Development for IOS and Android Apps with Ionic

JGari.com/resume

Page 20: Introduction to Mobile Development for IOS and Android Apps with Ionic

JGari.com/resume

Page 21: Introduction to Mobile Development for IOS and Android Apps with Ionic

JGari.com/resume

Page 22: Introduction to Mobile Development for IOS and Android Apps with Ionic

JGari.com/resume

Page 23: Introduction to Mobile Development for IOS and Android Apps with Ionic

Install NodeJs Visit: https://nodejs.org

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

JGari.com/resume

Page 24: Introduction to Mobile Development for IOS and Android Apps with Ionic

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

JGari.com/resume

Page 25: Introduction to Mobile Development for IOS and Android Apps with Ionic

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

Page 26: Introduction to Mobile Development for IOS and Android Apps with Ionic

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

Page 27: Introduction to Mobile Development for IOS and Android Apps with Ionic

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

Page 28: Introduction to Mobile Development for IOS and Android Apps with Ionic

JGari.com/resume

Page 29: Introduction to Mobile Development for IOS and Android Apps with Ionic

JGari.com/resume

Page 30: Introduction to Mobile Development for IOS and Android Apps with Ionic

May the demo gods be with us

JGari.com/resume

Page 31: Introduction to Mobile Development for IOS and Android Apps with Ionic

Jorge Garifuna▪[email protected]▪@jgarifuna

JGari.com/resume

Page 32: Introduction to Mobile Development for IOS and Android Apps with Ionic

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

JGari.com/resume