Ionic (for Android & iOS)

This Ionic training course will teach you how to create hybrid mobile applications by combining the capabilities of Ionic, Cordova, and AngularJS. Reduce the time to market your application using Ionic, that helps in rapid application development.

R10,995.00

Description

This Ionic training course will teach you how to create hybrid mobile applications by combining the capabilities of Ionic, Cordova, and AngularJS. Reduce the time to market your application using Ionic, that helps in rapid application development.

Prerequisites

HTML5 / CSS3AngularJS recommended. There is time for a small re-cap of Angular at the beginning of the course, but not enough time to master it.

Course Contents:

Ionic – Powered by AngularJS

  • Understanding the separation of concerns
  • AngularJS components
  • AngularJS directives
  • AngularJS services
  • AngularJS resources

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

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

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
  • Understanding the Ionic SCSS setup
  • Using variables and mixins
  • The SCSS workflow
  • Building a swatch

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

Building a Bookstore App

  • An introduction to the Bookstore application
  • The Bookstore architecture
  • The server architecture
  • The server-side API documentation
  • The client architecture
  • Code on GitHub
  • A Bookstore demo
  • 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

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 Book template
  • The Cart template
  • The Purchase template

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

Building a Messaging App

  • The Ionic Chat app
  • Firebase
  • Setting up a Firebase account
  • AngularFire
  • The application architecture
  • Authentication
  • The application flow
  • Previewing the app
  • Data structure
  • Cordova plugins
  • Code on GitHub
  • Developing the application
  • Scaffolding and setting up the app
  • Installing the required Cordova plugins
  • Getting the Google API key
  • Setting up routes and route authentication
  • Setting up services/factories
  • Setting up a map directive
  • Setting up controllers
  • Setting up templates
  • Setting up SCSS
  • Testing the application

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

————-

Duration and pricing

In Pricing Group A

Certificate

  1. Upon completion of this course we will issue you with attendance certificate to certify your attendance.
  2. You may sit for our competency assessment test and on passing you will obtain our competency certificate.
  3. Our competency assessment can be booked and taken by someone who has not attended the course at a cost of R3500.

Bookings

You can download the course registration form on our home page or by clicking here

Brochure

You may download a pdf copy of this page by clicking on the pdf icon at the top of the page.

Questions

Please email us

Schedule

On the calendar below. If your browser doesn’t display the calendar below, please click on this link or try using Google Chrome, alternatively please enquire via our Contact Us page.