Date post: | 15-Feb-2017 |
Category: |
Mobile |
Upload: | jworks-powered-by-ordina |
View: | 407 times |
Download: | 2 times |
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