Ionic by Example
•
1 like•673 views
Ionic is a framework for building hybrid mobile apps using HTML5, CSS, and JavaScript. It allows developers to create apps that work across platforms like Android and iOS using common web technologies while also providing access to native device capabilities. Ionic apps can be created quickly using prebuilt UI components and are deployed by wrapping the web code in a native container using Apache Cordova. Developers benefit from cross-platform development, while users benefit from a native app experience.
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Ionic by Example
Similar to Ionic by Example (20)
Recently uploaded
Recently uploaded (20)
Ionic by Example
- 3. Native Apps Platform specific Best performance Expensive development Steep learning curve
- 4. Hybrid apps Platform independent JavaScript, HTML5 and CSS3 Limited performance Quick development
- 5. What is Ionic Hybrid mobile development framework Uses standard technologies - HTML5, CSS3, JavaScript Built on top of Cordova and AngularJS
- 6. Ionic & performance HW animations Minimal DOM manipulations Zero jQuery
- 7. Ionic Tech Stack Apache Cordova AngularJS Sass AngularUI
- 8. 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
- 9. Cordova Plugins Battery status Camera Contacts Device Device orientation File transfer Geolocation Media capture Network information Statusbar Direct access to native APIs
- 10. What is AngularJS Superheroic JavaScript MVW Framework Dependency Injection Data binding Routing
- 11. How to start?
- 12. Requirements HTML & JS editor NodeJS Platform SDK (Android SDK, XCode, VS) + related tools Browser (:
- 13. Let's start $ npm install -g cordova ionic
- 14. Create new app $ ionic start <appName> <template>
- 16. Create new app $ ionic start myApp sidemenu
- 17. Start $ cd myApp $ ionic serve
- 18. That was quick, wasn't it?
- 19. What's included in Ionic ? CLI tools CSS & JavaScript components Ionicons
- 20. CLI Tools $ ionic start $ ionic serve $ ionic platform * $ ionic build * $ ionic resources easy way how to manage your project
- 21. CSS & JavaScript components Buttons
- 22. CSS & JavaScript components Lists
- 23. CSS & JavaScript components More complex Lists
- 24. CSS & JavaScript components Tabs
- 25. CSS & JavaScript components ActionSheet
- 26. CSS & JavaScript components Side Menus
- 27. CSS & JavaScript components modals forms gestures & more
- 29. Čtvrtkon app $ curl http://ctvrtkon.cz/category/pozvanky/ | grep rss http://ctvrtkon.cz/category/pozvanky/feed/
- 30. 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?
- 31. Create & run $ ionic start ctvrtkon blank $ cd ctvrtkon $ ionic serve
- 32. 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>
- 33. 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
- 34. Javascript part #1 angular .module("app") .controller("MainController", MainController); define controller
- 35. Javascript part #2 MainController.$inject = ["$http"]; function MainController($http){ var vm = this; vm.url = “http://.../feed/“); vm.invitations = []; getInvitations(); function getInvitations(){ // TODO: implement } }
- 36. 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
- 37. 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/“ );
- 38. 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
- 39. 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
- 40. 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>
- 42. And you're done wasn't that easy?
- 43. But, what about to publish?
- 44. 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
- 45. 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
- 46. 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
- 47. Next steps Test app iOS developer account - 99 $ per year Publish via Xcode
- 48. What about icons and splash screen?
- 49. 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