Developing ionic apps for android and ios
- 1. Developing Ionic Apps for Android and iOS Introduction Apache Cordova is an open-source mobile development framework. It allows you to use standard web technologies such as HTML5, CSS3, and JavaScript for cross-platform development, avoiding each mobile platforms’ native development language. Applications execute within wrappers targeted to each platform, and rely on standards-compliant API bindings to access each device’s sensors, data, and network status. Currently there are 1300 apps in app store. What You Will Learn: • How to create and build (compile and package) a ionic project using the CLI (Command Line Interface). Using Chrome Developer tools • How to use different data storage strategies. • How to use several Cordova APIs such as Geolocation, Contacts, and Camera. • How to handle specific mobile challenges such as touch events, scrolling, styling, page transitions, etc. • How to build an application using a single-page architecture and HTML templates. Use AngularJS, HTML and CSS for making Rich, Faster and responsive UIs Requirements • To complete this workshop, all you need is a code editor, a modern browser, and a connection to the Internet. • A working knowledge of HTML and JavaScript is assumed, but you don’t need to be a JavaScript guru. Course Contents 1. Ionic – Powered by AngularJS Understanding the separation of concerns AngularJS components AngularJS directives AngularJS services AngularJS resources 2. Welcome to Ionic Mobile Hybrid Architecture What is Apache Cordova? What is Ionic? Software setup Install Node.js Install Git Install Bower Install Gulp Install Sublime Text Install Cordova and Ionic CLI The platform guide Hello Ionic The browser developer tools setup Google Chrome Mozilla Firefox The Ionic project structure The config.xml file The www folder Scaffolding the tabs template Scaffolding the side menu template generator-ionic Installing generator-ionic 3. Ionic CSS Components and Navigation Ionic CSS components The Ionic grid system The page structure Buttons Lists Cards Ionicons Form elements Integrating Ionic CSS components with AngularJS The Ionic router A simple two-page app 4. Ionic and SCSS What is Sass? Setting up SCSS in our Ionic project The manual setup The Ionic CLI task Working with Ionic SCSS Basic swatch
- 2. Understanding the Ionic SCSS setup Using variables and mixins The SCSS workflow Building a swatch 5. Ionic Directives and Services Ionic directives and services The Ionic Platform service registerBackButtonAction The on method Headers and footers Content ion-content ion-scroll ion-refresher ion-infinite-scroll $ionicScrollDelegate Navigation ion-view Ionic view events ion-nav-bar ion-nav-buttons $ionicNavBarDelegate $ionicHistory Tabs and side menu Ionic loading The Action Sheet service Popover and Popup services $ionicPopup The ion-list and ion-item directives Gesture directives and services Utilities 6. Building a sample App An introduction to the sample application The architecture of the app The server architecture The server-side API documentation The client architecture Code on GitHub A demo of the sample app The development flow Setting up the server Building the application Step 1 – Scaffolding the side menu template Step 2 – Refactoring the template Refactoring the menu Refactoring the module name Adding a run method and modifying routes Refactoring templates Step 3 – Building authentication, localStorage, and the REST API factory The Ionic loading factory The localStorage factory The Authentication factory The REST API factory Step 4 – Creating controllers for each route and integrating with the factory The application controller The browse controller The book controller The cart controller The purchase controller Step 5 – Creating templates and integrating with the controller data The Login template The Browse template The Product item template The Shopping Cart template The Purchase template 7. Cordova and ngCordova Setting up a platform-specific SDK The Android setup The iOS setup Testing the setup Testing for Android Testing for iOS Getting started with Cordova plugins The Ionic plugin API Add a plugin Remove a plugin List added plugins Search plugins The Cordova whitelist plugin ngCordova Setting up ngCordova Legend $cordovaToast $cordovaDialogs $cordovaFlashlight $cordovaLocalNotification $cordovaGeolocation 8. Releasing the Ionic App Preparing the app for distribution Setting up icons and splash screens Updating the config.xml file The PhoneGap service Generating installers using the Cordova CLI Android installer iOS installer The Ionic package Uploading the project to Ionic cloud Generating the required keys