ionic by example
TRANSCRIPT
![Page 1: Ionic by Example](https://reader031.vdocuments.net/reader031/viewer/2022030300/58808b811a28ab35718b6a59/html5/thumbnails/1.jpg)
IONICMichal Haták
![Page 2: Ionic by Example](https://reader031.vdocuments.net/reader031/viewer/2022030300/58808b811a28ab35718b6a59/html5/thumbnails/2.jpg)
Mobile Platforms, More Problems
![Page 3: Ionic by Example](https://reader031.vdocuments.net/reader031/viewer/2022030300/58808b811a28ab35718b6a59/html5/thumbnails/3.jpg)
Native Apps
Platform specific
Best performance
Expensive development
Steep learning curve
![Page 4: Ionic by Example](https://reader031.vdocuments.net/reader031/viewer/2022030300/58808b811a28ab35718b6a59/html5/thumbnails/4.jpg)
Hybrid apps
Platform independent
JavaScript, HTML5 and CSS3
Limited performance
Quick development
![Page 5: Ionic by Example](https://reader031.vdocuments.net/reader031/viewer/2022030300/58808b811a28ab35718b6a59/html5/thumbnails/5.jpg)
What is Ionic
Hybrid mobile development framework
Uses standard technologies - HTML5, CSS3, JavaScript
Built on top of Cordova and AngularJS
![Page 6: Ionic by Example](https://reader031.vdocuments.net/reader031/viewer/2022030300/58808b811a28ab35718b6a59/html5/thumbnails/6.jpg)
Ionic & performance
HW animations
Minimal DOM manipulations
Zero jQuery
![Page 7: Ionic by Example](https://reader031.vdocuments.net/reader031/viewer/2022030300/58808b811a28ab35718b6a59/html5/thumbnails/7.jpg)
Ionic Tech Stack
Apache Cordova
AngularJS
Sass
AngularUI
![Page 8: Ionic by Example](https://reader031.vdocuments.net/reader031/viewer/2022030300/58808b811a28ab35718b6a59/html5/thumbnails/8.jpg)
What is Cordova (PhoneGAP)
Platform for building natively installed mobile applications using HTML, CSS and JavaScript
WebView on steroids
1000+ plugins available
Open-source - Apache License
![Page 9: Ionic by Example](https://reader031.vdocuments.net/reader031/viewer/2022030300/58808b811a28ab35718b6a59/html5/thumbnails/9.jpg)
Cordova Plugins
Battery status
Camera
Contacts
Device
Device orientation
File transfer
Geolocation
Media capture
Network information
Statusbar
Direct access to native APIs
![Page 10: Ionic by Example](https://reader031.vdocuments.net/reader031/viewer/2022030300/58808b811a28ab35718b6a59/html5/thumbnails/10.jpg)
What is AngularJS
Superheroic JavaScript MVW Framework
Dependency Injection
Data binding
Routing
![Page 11: Ionic by Example](https://reader031.vdocuments.net/reader031/viewer/2022030300/58808b811a28ab35718b6a59/html5/thumbnails/11.jpg)
How to start?
![Page 12: Ionic by Example](https://reader031.vdocuments.net/reader031/viewer/2022030300/58808b811a28ab35718b6a59/html5/thumbnails/12.jpg)
Requirements
HTML & JS editor
NodeJS
Platform SDK (Android SDK, XCode, VS) + related tools
Browser (:
![Page 13: Ionic by Example](https://reader031.vdocuments.net/reader031/viewer/2022030300/58808b811a28ab35718b6a59/html5/thumbnails/13.jpg)
Let's start
$ npm install -g cordova ionic
![Page 14: Ionic by Example](https://reader031.vdocuments.net/reader031/viewer/2022030300/58808b811a28ab35718b6a59/html5/thumbnails/14.jpg)
Create new app
$ ionic start <appName> <template>
![Page 15: Ionic by Example](https://reader031.vdocuments.net/reader031/viewer/2022030300/58808b811a28ab35718b6a59/html5/thumbnails/15.jpg)
Templates
blank sidemenu tabs
![Page 16: Ionic by Example](https://reader031.vdocuments.net/reader031/viewer/2022030300/58808b811a28ab35718b6a59/html5/thumbnails/16.jpg)
Create new app
$ ionic start myApp sidemenu
![Page 17: Ionic by Example](https://reader031.vdocuments.net/reader031/viewer/2022030300/58808b811a28ab35718b6a59/html5/thumbnails/17.jpg)
Start
$ cd myApp
$ ionic serve
![Page 18: Ionic by Example](https://reader031.vdocuments.net/reader031/viewer/2022030300/58808b811a28ab35718b6a59/html5/thumbnails/18.jpg)
That was quick, wasn't it?
![Page 19: Ionic by Example](https://reader031.vdocuments.net/reader031/viewer/2022030300/58808b811a28ab35718b6a59/html5/thumbnails/19.jpg)
What's included in Ionic ?
CLI tools
CSS & JavaScript components
Ionicons
![Page 20: Ionic by Example](https://reader031.vdocuments.net/reader031/viewer/2022030300/58808b811a28ab35718b6a59/html5/thumbnails/20.jpg)
CLI Tools
$ ionic start
$ ionic serve
$ ionic platform *
$ ionic build *
$ ionic resources
easy way how to manage your project
![Page 21: Ionic by Example](https://reader031.vdocuments.net/reader031/viewer/2022030300/58808b811a28ab35718b6a59/html5/thumbnails/21.jpg)
CSS & JavaScript components
Buttons
![Page 22: Ionic by Example](https://reader031.vdocuments.net/reader031/viewer/2022030300/58808b811a28ab35718b6a59/html5/thumbnails/22.jpg)
CSS & JavaScript components
Lists
![Page 23: Ionic by Example](https://reader031.vdocuments.net/reader031/viewer/2022030300/58808b811a28ab35718b6a59/html5/thumbnails/23.jpg)
CSS & JavaScript components
More complex Lists
![Page 24: Ionic by Example](https://reader031.vdocuments.net/reader031/viewer/2022030300/58808b811a28ab35718b6a59/html5/thumbnails/24.jpg)
CSS & JavaScript components
Tabs
![Page 25: Ionic by Example](https://reader031.vdocuments.net/reader031/viewer/2022030300/58808b811a28ab35718b6a59/html5/thumbnails/25.jpg)
CSS & JavaScript components
ActionSheet
![Page 26: Ionic by Example](https://reader031.vdocuments.net/reader031/viewer/2022030300/58808b811a28ab35718b6a59/html5/thumbnails/26.jpg)
CSS & JavaScript components
Side Menus
![Page 27: Ionic by Example](https://reader031.vdocuments.net/reader031/viewer/2022030300/58808b811a28ab35718b6a59/html5/thumbnails/27.jpg)
CSS & JavaScript components
modals
forms
gestures
& more
![Page 28: Ionic by Example](https://reader031.vdocuments.net/reader031/viewer/2022030300/58808b811a28ab35718b6a59/html5/thumbnails/28.jpg)
Let's do something useful
![Page 29: Ionic by Example](https://reader031.vdocuments.net/reader031/viewer/2022030300/58808b811a28ab35718b6a59/html5/thumbnails/29.jpg)
Čtvrtkon app
$ curl http://ctvrtkon.cz/category/pozvanky/ | grep rss
http://ctvrtkon.cz/category/pozvanky/feed/
![Page 30: Ionic by Example](https://reader031.vdocuments.net/reader031/viewer/2022030300/58808b811a28ab35718b6a59/html5/thumbnails/30.jpg)
Battle plan
Create a single view app
Load data to a list using $http
Render the list using the Ionic list component
Splash screen
Publish?
![Page 31: Ionic by Example](https://reader031.vdocuments.net/reader031/viewer/2022030300/58808b811a28ab35718b6a59/html5/thumbnails/31.jpg)
Create & run
$ ionic start ctvrtkon blank $ cd ctvrtkon
$ ionic serve
![Page 32: Ionic by Example](https://reader031.vdocuments.net/reader031/viewer/2022030300/58808b811a28ab35718b6a59/html5/thumbnails/32.jpg)
HTML part
<body ng-app="app"> <ion-pane> <ion-header-bar class="bar-positive"> <h1 class="title">Čtvrtkon</h1> </ion-header-bar> <ion-content ng-controller="MainController as main”>
<!-- content there —> </ion-content> </ion-pane> </body>
![Page 33: Ionic by Example](https://reader031.vdocuments.net/reader031/viewer/2022030300/58808b811a28ab35718b6a59/html5/thumbnails/33.jpg)
HTML part
<body ng-app="app"> <ion-pane> <ion-header-bar class="bar-positive"> <h1 class="title">Čtvrtkon</h1> </ion-header-bar> <ion-content ng-controller="MainController as main”>
<!-- content there —> </ion-content> </ion-pane> </body>
application name
controller name
header
content
![Page 34: Ionic by Example](https://reader031.vdocuments.net/reader031/viewer/2022030300/58808b811a28ab35718b6a59/html5/thumbnails/34.jpg)
Javascript part #1
angular .module("app") .controller("MainController", MainController);
define controller
![Page 35: Ionic by Example](https://reader031.vdocuments.net/reader031/viewer/2022030300/58808b811a28ab35718b6a59/html5/thumbnails/35.jpg)
Javascript part #2
MainController.$inject = ["$http"]; function MainController($http){ var vm = this; vm.url = “http://.../feed/“); vm.invitations = []; getInvitations(); function getInvitations(){ // TODO: implement } }
![Page 36: Ionic by Example](https://reader031.vdocuments.net/reader031/viewer/2022030300/58808b811a28ab35718b6a59/html5/thumbnails/36.jpg)
Javascript part #2
MainController.$inject = ["$http"]; function MainController($http){ var vm = this; vm.url = “http://.../feed/“); vm.invitations = []; getInvitations(); function getInvitations(){ // TODO: implement } }
HTTP Service DI
minification BP
BP
![Page 37: Ionic by Example](https://reader031.vdocuments.net/reader031/viewer/2022030300/58808b811a28ab35718b6a59/html5/thumbnails/37.jpg)
The URL
vm.url = “http://cors.io/?u=" +encodeURIComponent( “https://ajax.googleapis.com/ajax/services/feed/load?v=2.0&q= http://ctvrtkon.cz/category/pozvanky/feed/“ );
![Page 38: Ionic by Example](https://reader031.vdocuments.net/reader031/viewer/2022030300/58808b811a28ab35718b6a59/html5/thumbnails/38.jpg)
The URL
vm.url = “http://cors.io/?u=" +encodeURIComponent( “https://ajax.googleapis.com/ajax/services/feed/load?v=2.0&q= http://ctvrtkon.cz/category/pozvanky/feed/“ );
CORS bypass
RSS to JSON service
feed itself
![Page 39: Ionic by Example](https://reader031.vdocuments.net/reader031/viewer/2022030300/58808b811a28ab35718b6a59/html5/thumbnails/39.jpg)
Javascript part #3
function getInvitations(){ $http.get(vm.url) .then(function(response){ // response.data.responseData.feed.entries response.data.forEach(function(item){ vm.invitations.push({ title: item.title, link: item.link, intro: item.contentSnippet }) }) }); }
demo shortcut
![Page 40: Ionic by Example](https://reader031.vdocuments.net/reader031/viewer/2022030300/58808b811a28ab35718b6a59/html5/thumbnails/40.jpg)
HTML part #2
<ion-content ng-controller="MainController as main”> <div class="list list-inset”> <a ng-repeat="invite in main.invitations" href="{{ invite.link }}" class=“item”> <h2>{{ invite.title }}</h2> <p ng-bind-html=“invite.intro”></p> </a> </div> </ion-content>
![Page 41: Ionic by Example](https://reader031.vdocuments.net/reader031/viewer/2022030300/58808b811a28ab35718b6a59/html5/thumbnails/41.jpg)
![Page 42: Ionic by Example](https://reader031.vdocuments.net/reader031/viewer/2022030300/58808b811a28ab35718b6a59/html5/thumbnails/42.jpg)
And you're done wasn't that easy?
![Page 43: Ionic by Example](https://reader031.vdocuments.net/reader031/viewer/2022030300/58808b811a28ab35718b6a59/html5/thumbnails/43.jpg)
But, what about to publish?
![Page 44: Ionic by Example](https://reader031.vdocuments.net/reader031/viewer/2022030300/58808b811a28ab35718b6a59/html5/thumbnails/44.jpg)
Build Android
Make sure you have Android SDK installed
$ ionic platform add android
$ ionic build android
=> generated .apk in ./platforms/android/build/outputs/apk/android-debug.apk
![Page 45: Ionic by Example](https://reader031.vdocuments.net/reader031/viewer/2022030300/58808b811a28ab35718b6a59/html5/thumbnails/45.jpg)
Next steps
Test app
Sign in with key tool (http://ionicframework.com/docs/guide/publishing.html)
Android developer account - one time fee (25 $)
Fill form and upload your .apk - ready in 30 mins
![Page 46: Ionic by Example](https://reader031.vdocuments.net/reader031/viewer/2022030300/58808b811a28ab35718b6a59/html5/thumbnails/46.jpg)
Build iOS
Make sure you are on MacOS and have Xcode installed
$ ionic platform add ios
$ ionic build ios
=> generated Xcode project in ./platforms/ios/<appName>.xcodeproj
![Page 47: Ionic by Example](https://reader031.vdocuments.net/reader031/viewer/2022030300/58808b811a28ab35718b6a59/html5/thumbnails/47.jpg)
Next steps
Test app
iOS developer account - 99 $ per year
Publish via Xcode
![Page 48: Ionic by Example](https://reader031.vdocuments.net/reader031/viewer/2022030300/58808b811a28ab35718b6a59/html5/thumbnails/48.jpg)
What about icons and splash screen?
![Page 49: Ionic by Example](https://reader031.vdocuments.net/reader031/viewer/2022030300/58808b811a28ab35718b6a59/html5/thumbnails/49.jpg)
Splash screen & icon
Put your images in the ./resources directory, named splash or icon
Accepted file types are .png, .ai, and .psd
Icons should be 192x192 px without rounded corners
Splashscreens should be 2208x2208 px, with the image centered in the middle
![Page 50: Ionic by Example](https://reader031.vdocuments.net/reader031/viewer/2022030300/58808b811a28ab35718b6a59/html5/thumbnails/50.jpg)
$ ionic resources
![Page 51: Ionic by Example](https://reader031.vdocuments.net/reader031/viewer/2022030300/58808b811a28ab35718b6a59/html5/thumbnails/51.jpg)
Thanks.
Questions?