Hybrid app development with ionic
5 likes1,834 views
The document discusses hybrid app development using the Ionic framework, highlighting the requirements for iOS and Android developer programs and app submission processes. It explains the benefits of hybrid apps over native apps, including reuse of web development skills and quicker development, while also addressing risks like performance limitations and rejection from app stores. The document provides a comprehensive overview of Ionic components, installation, and development strategies, including the use of AngularJS and Cordova for accessing native features.
![Ionic CLI command
• Create new project:
• ionic start <your-app-name>
• Test on web browser:
• ionic serve
• Add mobile platform
• ionic platform add [android/ios]
• Build and application
• ionic build [android/ios]
• Run test on device/emulator
• ionic [run/emulate] [android/ios]](https://image.slidesharecdn.com/hybridappdevelopmentwithionic-151109030646-lva1-app6891/85/Hybrid-app-development-with-ionic-72-320.jpg)
![Ionic Live Reload
• Live reload is a cool feature
where browser will be updated
automatically every time we save
the change in our code.
• Live reload is available on device
and emulator, to add following
option on CLI command.
$ ionic [run|emulate] <platform> [options]
[--livereload|-l] .... Live Reload app dev files from the device
[--consolelogs|-c] ... Print app console logs to Ionic CLI
[--serverlogs|-s] .... Print dev server logs to Ionic CLI](https://image.slidesharecdn.com/hybridappdevelopmentwithionic-151109030646-lva1-app6891/85/Hybrid-app-development-with-ionic-74-320.jpg)
Hybrid app development with ionic
- 1. Hybrid Development with Ionic Wan Muzaffar Wan Hashim
- 3. MACHINE
- 4. MACBOOK • You will be needing a Macbook for iOS app development. • Using XCode and Apple development tool to submit the app to Appstore.
- 6. iOS Developer Program • To purchase developer account from $99 per year. • App will be reviewed by Apple review team to ensure that it follows Apple Human Interface guideline. • Refer to Apple HIG and Submission checklist prior to submitting the app. • App submission to be done with Apple tool (Xcode, Application loader) = Need a Mac.
- 8. Android Developer Program • To purchase developer account of $25 per year. • Unlike Apple, app will be published directly into Google Play without review from Google Play team.
- 11. BrowserOptions
- 12. Simulator - Limitation - Motion Support Accelerometer Gyroscope - Audio and Video Input Camera Microphone - Proximity Sensor - No preinstalled application - No support to receive phone call
- 13. Text Editor
- 14. THINGS TO PLAN OUT BEFORE STARTING DEVELOPMENT
- 16. Monetization • App can be sold for free OR • Can distribute app in AppStore of Google Play. •Sharing revenue model (70/30) •Put price on application •iOS: Price will be in USD ending with .99 •Android: Support MYR price. •Put Ads on the application.
- 17. Lean Startup Principle applied by startups since 2011 Shorten product development cycles by adopting business- hypothesis-driven experimentation and iterative releases. Example case study: Dropbox, imvu, Aardvark (refer lean startup website)
- 18. Some principles.. Minimum Viable Product Continuous Deployment Split testing Actionable Metrics Build - Measure - Learn
- 19. 19
- 21. What is a hybrid app? • Hybrid app is a mobile app written using web technologies (HTML5, CSS and JavaScript) • Hybrid app runs inside a native container (Webview) • Hybrid app can access to device native feature, exposed by JavaScript.
- 22. What is a native app? • Using specific SDK provided by platform provide, (iOS, Android, Windows Phone.…) • Advanced UI and Device feature Interaction with the app. • Necessity to learn platform specific development language: Objective C, Swift or Java .
- 24. Why Hybrid • Reuse existing web development skill (shorter learning curve) : HTML, CSS3 & JS • One language for different platform (iOS and Android) • Quick Development • Direct access to certain native APIs with Cordova
- 25. Risk developing Hybrid application • Limited performance compared to Native application. • Not all device and operating system features supported. • Risk of being rejected by Apple if app does not feel native enough • Increased time and effort to mimic native user experience.
- 26. How to mitigate the risk • Crafting a UI that is similar to native user experience. • Avoid over complicated UI and UX. Refer to Apple HIG or Android Design guide for reference. • Ionic provide a library of CSS elements that mimic native UI elements to be used inside the app. Understand and try to use as much of the elements as possible when designing your app.
- 27. App built using hybrid development
- 28. App built using hybrid development
- 29. App built using hybrid development
- 36. Ionic Framework
- 37. What is Ionic? • Powerful HTML5 SDK that will give native-feeling mobile apps. • This can be achieved simply using web-technologies : HTML, CSS and Javascript • Focuses on : • Look and feel • UI Interaction of the app. • Is not a replacement of Phonegap.
- 38. Ionic stack
- 39. Apache Cordova • A platform for building native mobile applications using HTML, CSS and JavaScript. • Provides a set of APIs in Javascript and HTML to interact with native features of the device. • 2009: Phonegap was created by Nitobi • 2011: Acquired by Adobe • 2012: Renaming by Adobe under the name Cordova.
- 40. AngularJS • AngularJS is a JavaScript Framework maintained by Google at the moment. • It is based on Model-View- Controller (MVC) and MVVM architecture. • Angular extends HTML functionalities to facilitate us creating a web-application.
- 41. Pre-requisite for learning Ionic • Basic Programming/Javascript • HTML and CSS • Angular JS (We will cover the most used Angular concept) • Web application concepts (REST/CRUD)
- 42. Ionic Supported devices • iOS 7+ • Android 4.1 and up • Windows Phone (Coming soon) • FirefoxOS (Coming soon)
- 43. Ionic Components
- 45. Ionic color scheme • Ionic comes with a set of colors to start with. • Naming convention for colors are based on emotion and generic terms. • Color can be customised and override from ionic.css.
- 46. Ionic Playground
- 47. Ionic Playground • Ionic Playground is a tool allow us to easily prototype our Ionic code in a browser, without installing anything. • It has a simple HTML, CSS, and Javascript editor with a live app preview that updates immediately with new changes. • We can easily share our code with anyone or fork other apps to modify others’ code. • You can check at: play.ionic.io
- 48. Ionic Lab
- 49. Ionic Lab via CLI ionic serve —lab
- 50. Ionic View
- 51. Ionic View • Download Ionic View app in Appstore or Google Play. • Use CLI command: ionic upload, you can easily test your app using ionic view. • Share your app using ionic share <email> command on CLI.
- 52. Ionic Showcase
- 53. Ionicons
- 54. Ionic Market
- 55. Who is using Ionic? Mallzee Moodle Mobile Just Watch
- 56. Mallzee • Tinder style Personal shopper based in UK. • Replaced their hand built PhoneGap app with Ionic • Excellent UI • Apps available in Android and iOS • Manage to secure recently £2.5M funding, recently.
- 57. Songhop • Music discovery application, yet another Tinder style application. • Available on iPhone only. • Rated 5 star in App Store. • Founder is active with Ionic Community.
- 58. Sworkit • Techinsider describe it ass “The best free fitness app in the world” with simple and clean interface. • Featured in the Health and Fitness section of the App Store. • Downloaded over 3 million times.
- 59. Ionic platform
- 60. Ionic Push
- 61. Ionic Push
- 62. Ionic Analytics
- 63. Ionic Creator
- 64. Ionic Creator
- 70. AngularJS Important Features in Ionic • Directives • Model View Controller (MVC) • Data Binding • Dependency Injection • Filter
- 71. Installing Ionic • Ionic require Node.js. Download Node.js from the website • Once done, you may install ionic and cordova from the command line: npm install -g cordova ionic
- 72. Ionic CLI command • Create new project: • ionic start <your-app-name> • Test on web browser: • ionic serve • Add mobile platform • ionic platform add [android/ios] • Build and application • ionic build [android/ios] • Run test on device/emulator • ionic [run/emulate] [android/ios]
- 73. Starting an app with Ionic template $ ionic start myApp blank $ ionic start myApp sidemenu$ ionic start myApp tabs
- 74. Ionic Live Reload • Live reload is a cool feature where browser will be updated automatically every time we save the change in our code. • Live reload is available on device and emulator, to add following option on CLI command. $ ionic [run|emulate] <platform> [options] [--livereload|-l] .... Live Reload app dev files from the device [--consolelogs|-c] ... Print app console logs to Ionic CLI [--serverlogs|-s] .... Print dev server logs to Ionic CLI
- 75. Ionic List • Widely used interface element in almost any mobile app, • Can include content ranging from basic text all the way to buttons, toggles, icons, and thumbnails.
- 76. Simple List <ion-content class="padding"> <div class="list"> <div class="item item-divider"> Melaka </div> <a class="item" href="#"> A Famosa </a> <a class="item" href="#"> Dataran Pahlawan </a> <div class="item item-divider"> Kuala Lumpur </div> <a class="item" href="#"> Muzium Negara </a> <a class="item" href="#"> KL Tower </a> <a class="item" href="#"> KLCC </a> </ion-content>
- 77. Complex List <ion-list> <ion-item ng-repeat="item in items" item="item"> List Item {{ item.id }} </ion-item> </ion-list> • Using AngularJS Directive. • Built in swipe to action function • Delete • Reorder
- 78. List with Ionicons <div class="list"> <a class="item item-icon-left" href="#"> <i class="icon ion-email"></i> Check mail </a> <a class="item item-icon-left item-icon-right" href="#"> <i class="icon ion-chatbubble-working"></i> Call Ma <i class="icon ion-ios-telephone-outline"></i> </a> <a class="item item-icon-left" href="#"> <i class="icon ion-mic-a"></i> Record album <span class="item-note"> Grammy </span> </a> <a class="item item-icon-left" href="#"> <i class="icon ion-person-stalker"></i> Friends <span class="badge badge-assertive">0</span> </a> </div>
- 79. Cards • Cards are UI Element that have gained popularity in recent years. • Cards can be added in Angular and customised as per your need. <div class="card"> <div class="item item-divider"> I'm a Header in a Card! </div> <div class="item item-text-wrap"> This is a basic Card with some text. </div> <div class="item item-divider"> I'm a Footer in a Card! </div> </div>
- 81. Form and Inputs • Preferably, a form is grouped inside a list. • We used both item and item-input element to designated each field. <div class="list"> <label class="item item-input"> <input type="text" placeholder="First Name"> </label> <label class="item item-input"> <input type="text" placeholder="Last Name"> </label> <label class="item item-input"> <textarea placeholder="Comments"></textarea> </label> </div>
- 82. Ionic Navigation • Using AngularUI Router Service. • Manage navigation and show the back button when possible. • Works with Android’s physical back button. <ion-nav-bar> <ion-nav-back-button> Back </ion-nav-back-button> </ion-nav-bar> <ion-nav-view></ion-nav-view>
- 83. Ionic Tab <a class="tab-item"> <i class="icon ion-home"></i> Home </a> <a class="tab-item"> <i class="icon ion-star"></i> Favorites </a> <a class="tab-item"> <i class="icon ion-gear-a"></i> Settings </a> • Using AngularUI Router Service. • Manage navigation and show the back button when possible. • Works with Android’s physical back button.
- 84. Ionic Slide <ion-slide-box on-slide- changed="change(index)"> <ion-slide> Slide 1 </ion-slide> <ion-slide> Slide 2 </ion-slide> <ion-slide> Slide 3 </ion-slide> </ion-slide-box> • Using AngularUI Router Service. • Manage navigation and show the back button when possible. • Works with Android’s physical back button.
- 85. ngCordova
- 86. ngCordova • ngCordova is a project done by Ionic team to facilitate integration of Cordova plugin into AngularJS. • You may refer to ngCordova website showing all the plugins that we can easily inject into our Controller, just like how we inject any other service.
- 88. Using ngCordova • Include ngCordova inside the project using Bower: • bower install ngCordova • ngCordova will be added into our project. Include the script into our index.html • Inject ngCordova into our application. • Go to CLI: ionic plugin add <plugin name>