Build Native Mobile Apps using JavaScript and Ionic Joseph Guadagno jguadagno@hotmail.com @jguadagno http://jjg.me/aboutJJG

About Joseph Guadagno Team Leader at Quicken Loans Organizer of Desert Code Camp Microsoft .NET MVP “Friend” of Redgate Father of 2, husband to 1 Former President and Vice President of INETA North America (2007-2015) Founder of the Southeast Valley .NET User Group (SEVDNUG) in Chandler, AZ (2007-2013) Currently serving on my the City of Chandler‘s Parks and Recreation board (since 2010) Telerik MVP (2010 to 2012) Microsoft Visual Basic MVP (1996)

Agenda What is the Ionic Framework Breakdown the Pieces of the Ionic Framework Build an Application

What is the Ionic Framework

Ionic Framework Ionic is a powerful HTML5 SDK that helps you build native-feeling mobile apps using web technologies like HTML, CSS, and Javascript. Ionic is focused mainly on the look and feel, and UI interaction of your app. That means it isn't a replacement for PhoneGap or your favorite Javascript framework. Instead, Ionic simply fits in well with these projects in order to simplify one big part of your app: the front end.

What do you need? Node.js Cordova Text Editor Developer Accounts (Android, iOS, UWA, etc) Optionally: Gulp, Bower

Progressive Web Applications What Can You Build For? Native Applications Android Blackberry 10 iOS OS X Ubuntu Windows Windows Phone 8 Progressive Web Applications Electron

Platform Url Android http://jjg.me/ionic_apg Blackberry Platform Guides Platform Url Android http://jjg.me/ionic_apg Blackberry http://jjg.me/ionic_bbpg iOS http://jjg.me/ionic_iOSpg osX http://jjg.me/ionic_osxpg Ubuntu http://jjg.me/ionic_upg Windows *Note: Windows 8 has it’s own guide http://jjg.me/ionic_wpg

Integrated Development Environments (IDEs) Visual Studio (Windows / Mac) Visual Studio Code Atom Web Storm ALM Rider

Breakdown of the Pieces of the Ionic Framework

“Parts” of the Ionic Framework Angular 2 Cordova CSS - Components API - Javascript (Device) Native Components (Plugins) Ionicons

Cordova

CSS - Components http://ionicframework.com/docs/components/#overview

API - Javascript http://ionicframework.com/docs/api/

Native Device Plugins List of Plugins http://ionicframework.com/docs/native/ Platform Support http://jjg.me/ionic_cps

Ionicons http://ionicons.com/

Building an Application

Install NPM (Node Package Manager) Install Ionic Install Cordova Required Libraries Install NPM (Node Package Manager) http://nodejs.org Install Ionic npm install –g ionic Install Cordova npm install –g cordova npm install –g ionic cordova

Create the Application Shell ionic start <projectName> <templateName>

Ionic Templates Template Url tabs * https://github.com/driftyco/ionic2-starter-tabs sidemenu https://github.com/driftyco/ionic2-starter-sidemenu blank https://github.com/driftyco/ionic2-starter-blank super https://github.com/driftyco/ionic2-starter-super tutorial https://github.com/driftyco/ionic2-starter-tutorial

Let’s Build an Application

Joseph Guadagno jguadagno@hotmail.com @jguadagno http://jjg.me/aboutJJG

Questions?

References

Urls http://ionicframework.com http://play.ionic.io http://lab.ionic.io/ http://ionicframework.com/docs/resources/ http://market.ionic.io/ https://github.com/microsoft/ionic-azure-conference- app