IONIC FRAMEWORKCREATE MOBILE APPS WITH THE WEB TECHNOLOGIES YOU LOVE

By / @Mr_Jean @DzSteve

WHAT IS IONIC FRAMEWORK“Free and open source, Ionic offers a library of mobile-

optimized HTML, CSS and JS components, gestures, and toolsfor building highly interactive apps. Built with Sass and

optimized for AngularJS.”

APACHE CORDOVA

ANGULARJS

IONIC = FRAMEWORK WITH DOCUMENTATION

CROSSWALK (ANDROID 4.0 - 4.3)

KEY FEATURESPerformance obsessedAngular & IonicNative focusedBeautifully designedA powerful CLIFun to learn

WHY SHOULD I USE IONIC?Ionic enables any developer with knowledge of HTML, CSS

and JS to build mobile hybrid applications in no time.

COMING SOON: IONIC 2“With Ionic 2, we've gone back to square one and completely

rethought how a mobile toolkit should work.”

ECOSYSTEMMore than code. Ionic is an ecosystem.

1. IONIC LAB WEBBuild and test iOS and Android versions side-by-side. See

changes instantly.

$ ionic serve --lab

2. LIVERELOADInstantly update your apps with code changes, even when

running directly on your device.

$ ionic run --livereload

3. ICON/SPLASH GENERATIONGenerate icons and splash screens for all devices and device

sizes with a single command.

$ ionic resources

4. VIEW APPShare your Ionic apps with clients, customers, and testers all

around the world. All without ever going through the AppStore!

5. ngCordovaAngular extensions for easily accessing the full native

functionality of the device.

6. IONIC.IO PLATFORMFull-stack backend services and tools for your Ionic app.

Finally, a service that embraces mobile web dev!

PushAnalyticsDeployUsersCreatorLabMarket

7. IONIC LABLab harnesses the power of the Ionic CLI through an intuitive

desktop app for both Windows and Mac.

8. IONIC CREATORCreator is a drag-&-drop prototyping tool for creating great

apps using Ionic, with just a click of the mouse.

HOW TO SETUP IONIC FRAMEWORK1. Install Ionic2. Start a project3. Run it

1. INSTALL IONICMake sure you have NodeJS installedInstall Cordova and Ionic

Install Android StudioInstall XCode for MacOn Mac, install ios-sim

Follow the Android and iOS platform guides to installrequired platform dependencies.

$ npm -g install cordova ionic

$ npm -g install ios-sim

2. START A PROJECTYou have three options here:

$ ionic start todoApp blank $ ionic start todoApp tabs $ ionic start todoApp sidemenu

This will create a folder with all your application data in it.

3. RUN ITUsing emulation

$ cd todoApp $ ionic platform add android $ ionic build android $ ionic emulate android

Using a real device

$ cd todoApp $ ionic platform add android $ ionic build android $ ionic run android

Using a browser

$ cd todoApp $ ionic serve --lab

FUNDAMENTALS

IONIC CLI$ ionic --help $ ionic start [myAppName] [template] $ ionic serve $ ionic serve -- lab $ ionic setup sass $ ionic serve --address 68.54.96.105

COMMAND-LINE FLAGS/OPTIONS[--consolelogs|-c] ...... Print app console logs to Ionic CLI [--serverlogs|-s] ....... Print dev server logs to Ionic CLI [--port|-p] ............. Dev server HTTP port (8100 default) [--livereload-port|-i] .. Live Reload port (35729 default) [--nobrowser|-b] ........ Disable launching a browser [--nolivereload|-r] ..... Do not start live reload [--noproxy|-x] .......... Do not add proxies

ICON AND SPLASH SCREENAuto generate icons and splash screens for your application

Place artwork in resources folder in the root of the project

$ ionic resources $ ionic resources --splash $ ionic resources --icon

IONIC VIEW APPUpload your application and preview/share it

$ ionic upload

Before upload you need an account on and theapp on your Android or iOS device. More info

apps.ionic.ioview.ionic.io

USING SASSTo enable Sass in your project, use the following command

$ ionic setup sass

This will enable you to customise different variables used intheming and layouting the different components. These can

be found in the _variables.scss file.

See for moreinformation

ionicframework.com/docs/cli/sass.html

TESTING YOUR APPLICATIONFor unit testing we will use

JasminengMockKarmaPhantomJS

INSTALL DEPENDENCIES$ npm install karma --save-dev $ npm install karma-jasmine --save-dev $ bower install angular-mocks#1.4.3 --save-dev $ npm install -g karma-cli $ npm install -g phantomjs

Attention: the version of angular-mocks needs to be the sameof the version of AngularJS used in your Ionic setup

CONFIGURATION$ mkdir -p tests/unit-tests $ cd tests $ karma init unit-tests.conf.js

Hit enter for all questions except:

Do you want to capture any browsers automatically ? Press tab to list possible options. Enter empty string to move to the next> PhantomJS

What is the location of your source and test files ? You can use glob patterns, eg. "js/*.js" or "test/**/*Spec.js". Enter empty string to move to the next question.> ../www/lib/ionic/js/ionic.bundle.js > ../www/app.js > ../www/lib/angular-mocks/angular-mocks.js > ../www/projects/*.js > unit-tests/**/*.js

WRITING TESTSdescribe('ProjectsCtrl', function() {

var controller, projectsServiceMock;

beforeEach(module('todo'));

beforeEach(inject(function($controller, $rootScope) { scope = $rootScope.$new();

projectsServiceMock = { getAll: jasmine.createSpy('getAll spy').and.returnValue getLastActiveIndex: jasmine.createSpy('getAll spy').and.returnValue };

controller = $controller('ProjectsCtrl', { '$scope': scope, 'projectsService': projectsServiceMock

RUN TESTS$ karma start unit-tests.conf.js

LET'S BUILD AN APPLICATIONGet yerr computers running!

DEPLOYING YOUR APP

ANDROIDCreate keystore (one time only) with keytool

$ keytool -genkey -v -keystore my-release-key.keystore -alias alias_name -keyalg RSA -keysize

Build, jarsign and zipalign

cordova build --release android

jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore my-release

./zipalign -v 4 /path/to/app/platforms/android/build/outputs/apk/android-release-to-be-signed.apk

Put in Play Store

IOS/usr/bin/xcrun -sdk iphoneos PackageApplication "/Users/NAME/Library/Developer/

No it's not that easy …

REAL LIFE CASESAt Ordina we currently have 2 real life cases.

Proximus MyThings Scanner (in app store since november)Evonik Weather App

PROXIMUS MYTHINGS SCANNER

EVONIK

IONIC FRAMEWORKCREATE MOBILE APPS WITH THE WEB TECHNOLOGIES YOU LOVE

By / @Mr_Jean @DzSteve