Workshop Ionic Framework - CC FE & UX
1 like668 views
The Ionic Framework is a free and open-source toolkit that allows developers to create mobile applications using HTML, CSS, and JavaScript. Key features include a powerful command line interface, live reloading, icon generation, and support for AngularJS. It provides an ecosystem with tools for building, testing, and deploying hybrid applications, along with options for prototyping and backend services.
![IONIC CLI
$ ionic --help
$ ionic start [myAppName] [template]
$ ionic serve
$ ionic serve -- lab
$ ionic setup sass
$ ionic serve --address 68.54.96.105](https://image.slidesharecdn.com/workshopionicframework-160105095523/85/Workshop-Ionic-Framework-CC-FE-UX-29-320.jpg)
![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](https://image.slidesharecdn.com/workshopionicframework-160105095523/85/Workshop-Ionic-Framework-CC-FE-UX-30-320.jpg)
Workshop Ionic Framework - CC FE & UX
- 1. IONIC FRAMEWORK CREATE MOBILE APPS WITH THE WEB TECHNOLOGIES YOU LOVE By /@Mr_Jean @DzSteve
- 2. 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.”
- 4. ANGULARJS
- 5. IONIC = FRAMEWORK WITH DOCUMENTATION
- 6. CROSSWALK (ANDROID 4.0 - 4.3)
- 7. KEY FEATURES Performance obsessed Angular & Ionic Native focused Beautifully designed A powerful CLI Fun to learn
- 8. WHY SHOULD I USE IONIC? Ionic enables any developer with knowledge of HTML, CSS and JS to build mobile hybrid applications in no time.
- 9. COMING SOON: IONIC 2 “With Ionic 2, we've gone back to square one and completely rethought how a mobile toolkit should work.”
- 10. ECOSYSTEM More than code. Ionic is an ecosystem.
- 11. 1. IONIC LAB WEB Build and test iOS and Android versions side-by-side. See changes instantly. $ ionic serve --lab
- 13. 2. LIVERELOAD Instantly update your apps with code changes, even when running directly on your device. $ ionic run --livereload
- 14. 3. ICON/SPLASH GENERATION Generate icons and splash screens for all devices and device sizes with a single command. $ ionic resources
- 15. 4. VIEW APP Share your Ionic apps with clients, customers, and testers all around the world. All without ever going through the App Store!
- 17. 5. ngCordova Angular extensions for easily accessing the full native functionality of the device.
- 19. 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
- 20. 7. IONIC LAB Lab harnesses the power of the Ionic CLI through an intuitive desktop app for both Windows and Mac.
- 22. 8. IONIC CREATOR Creator is a drag-&-drop prototyping tool for creating great apps using Ionic, with just a click of the mouse.
- 24. HOW TO SETUP IONIC FRAMEWORK 1. Install Ionic 2. Start a project 3. Run it
- 25. 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
- 26. 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.
- 27. 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
- 28. FUNDAMENTALS
- 29. IONIC CLI $ ionic --help $ ionic start [myAppName] [template] $ ionic serve $ ionic serve -- lab $ ionic setup sass $ ionic serve --address 68.54.96.105
- 30. 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
- 31. 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
- 32. 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
- 33. 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
- 34. TESTING YOUR APPLICATION For unit testing we will use Jasmine ngMock Karma PhantomJS
- 35. 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
- 36. 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
- 37. 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
- 38. RUN TESTS $ karma start unit-tests.conf.js
- 39. LET'S BUILD AN APPLICATION Get yerr computers running!
- 41. 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
- 42. IOS /usr/bin/xcrun -sdk iphoneos PackageApplication "/Users/NAME/Library/Developer/ No it's not that easy …
- 43. REAL LIFE CASES At Ordina we currently have 2 real life cases. Proximus MyThings Scanner (in app store since november) Evonik Weather App
- 45. EVONIK
- 46. IONIC FRAMEWORK CREATE MOBILE APPS WITH THE WEB TECHNOLOGIES YOU LOVE By /@Mr_Jean @DzSteve