Build Native Mobile Apps using Java Script and

  • Slides: 25
Download presentation
Build Native Mobile Apps using Java. Script and Ionic Joseph Guadagno jguadagno@hotmail. com @jguadagno

Build Native Mobile Apps using Java. Script and Ionic Joseph Guadagno [email protected] com @jguadagno http: //jjg. me/about. JJG

About Joseph Guadagno Team Leader at Quicken Loans Organizer of Desert Code Camp Microsoft.

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

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

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

What is the Ionic Framework

What is the Ionic Framework

Ionic Framework Ionic is a powerful HTML 5 SDK that helps you build native-feeling

Ionic Framework Ionic is a powerful HTML 5 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 Phone. Gap 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, i. OS,

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

What Can You Build For? Native Applications Android Blackberry 10 i. OS OS X

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

Platform Guides Platform Android Blackberry i. OS os. X Ubuntu Windows *Note: Windows 8

Platform Guides Platform Android Blackberry i. OS os. X Ubuntu Windows *Note: Windows 8 has it’s own guide Url http: //jjg. me/ionic_apg http: //jjg. me/ionic_bbpg http: //jjg. me/ionic_i. OSpg http: //jjg. me/ionic_osxpg http: //jjg. me/ionic_upg http: //jjg. me/ionic_wpg

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

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

Breakdown of the Pieces of the Ionic Framework

Breakdown of the Pieces of the Ionic Framework

“Parts” of the Ionic Framework Angular 2 Cordova CSS - Components API - Javascript

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

Cordova

Cordova

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

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

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

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

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

Ionicons http: //ionicons. com/

Ionicons http: //ionicons. com/

Building an Application

Building an Application

Required Libraries Install NPM (Node Package Manager) http: //nodejs. org Install Ionic npm install

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 <project. Name> <template. Name>

Create the Application Shell ionic start <project. Name> <template. Name>

Ionic Templates Template tabs * sidemenu blank super tutorial Url https: //github. com/driftyco/ionic 2

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

Let’s Build an Application

Let’s Build an Application

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

Joseph Guadagno [email protected] com @jguadagno http: //jjg. me/about. JJG

Questions?

Questions?

References

References

Urls http: //ionicframework. com http: //play. ionic. io http: //lab. ionic. io/ http: //ionicframework.

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-conferenceapp