Workshop Ionic Framework - CC FE & UX

IONIC FRAMEWORK
CREATE 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 tools
for building highly interactive apps. Built with Sass and
optimized for AngularJS.”

IONIC = FRAMEWORK WITH DOCUMENTATION

KEY FEATURES
Performance obsessed
Angular & Ionic
Native focused
Beautifully designed
A powerful CLI
Fun 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.”

ECOSYSTEM
More than code. Ionic is an ecosystem.

1. IONIC LAB WEB
Build and test iOS and Android versions side-by-side. See
changes instantly.
$ ionic serve --lab

Workshop Ionic Framework - CC FE & UX

2. LIVERELOAD
Instantly update your apps with code changes, even when
running directly on your device.
$ ionic run --livereload

3. ICON/SPLASH GENERATION
Generate icons and splash screens for all devices and device
sizes with a single command.
$ ionic resources

4. VIEW APP
Share your Ionic apps with clients, customers, and testers all
around the world. All without ever going through the App
Store!

5. ngCordova
Angular extensions for easily accessing the full native
functionality of the device.

6. IONIC.IO PLATFORM
Full-stack backend services and tools for your Ionic app.
Finally, a service that embraces mobile web dev!
Push
Analytics
Deploy
Users
Creator
Lab
Market

7. IONIC LAB
Lab harnesses the power of the Ionic CLI through an intuitive
desktop app for both Windows and Mac.

8. IONIC CREATOR
Creator is a drag-&-drop prototyping tool for creating great
apps using Ionic, with just a click of the mouse.

HOW TO SETUP IONIC FRAMEWORK
1. Install Ionic
2. Start a project
3. Run it

1. INSTALL IONIC
Make sure you have NodeJS installed
Install Cordova and Ionic
Install Android Studio
Install XCode for Mac
On Mac, install ios-sim
Follow the Android and iOS platform guides to install
required platform dependencies.
$ npm -g install cordova ionic
$ npm -g install ios-sim

2. START A PROJECT
You 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 IT
Using 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

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 SCREEN
Auto 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 APP
Upload your application and preview/share it
$ ionic upload
Before upload you need an account on and the
app on your Android or iOS device. More info
apps.ionic.io
view.ionic.io

USING SASS
To enable Sass in your project, use the following command
$ ionic setup sass
This will enable you to customise different variables used in
theming and layouting the different components. These can
be found in the _variables.scss file.
See for more
information
ionicframework.com/docs/cli/sass.html

TESTING YOUR APPLICATION
For unit testing we will use
Jasmine
ngMock
Karma
PhantomJS

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 same
of 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 TESTS
describe('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.returnVal
};
controller = $controller('ProjectsCtrl', {
'$scope': scope,
'projectsService': projectsServiceMock

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

LET'S BUILD AN APPLICATION
Get yerr computers running!

ANDROID
Create keystore (one time only) with keytool
$ keytool -genkey -v -keystore my-release-key.keystore -alias alias_name -keyalg
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-
Put in Play Store

IOS
/usr/bin/xcrun -sdk iphoneos PackageApplication "/Users/NAME/Library/Developer/
No it's not that easy …

REAL LIFE CASES
At Ordina we currently have 2 real life cases.
Proximus MyThings Scanner (in app store since november)
Evonik Weather App

Workshop Ionic Framework - CC FE & UX

Recommended

More Related Content

What's hot (20)

Viewers also liked (16)

Similar to Workshop Ionic Framework - CC FE & UX (20)

More from JWORKS powered by Ordina (20)

Workshop Ionic Framework - CC FE & UX