Course in Ionic Hybrid Mobile Apps

Course in implementation of hybrid mobile apps using Ionic/Angular

There are many advantages of implementing a hybrid-mobile app, where timne-to-market is one of the biggest. By program in TypeScript/SCSS/HTML, using platform plugins and save user data in the cloud, as well as generating native apps for Android and iPhone you can quickly get the app out of the door and establish a presence of the market.

This course focuses on that you quickly can get up to speed developing hybrid-mobile apps using the Ionic framework.

This is what you will learn
  • Design apps with a sliding side-menu or tabbed navigation
  • Use platform services, such as camera, vibrator, position and much more
  • Store and fetch user data via REST web services
  • Store and fetch user data via Google Firebase
  • Render list views with icons, images and form elements
Course Contents

Background and Overview

Overview of the Ionic Framework and its tools

  • Why Ionic was created
  • What is a hybrid mobile app
  • Benefits of going hybrid
  • Ionic architecture
  • What is Cordova and how is it related to Ionic
  • What is Angular and how is it related to Ionic
  • Installation of tools
  • Installation of the framework

A Tour with Ionic

A guided and hands-on tour of creating an Ionic app

  • Using the ionic command-line client
  • Generating an app
  • Directory structure
  • Angular modules
  • Lazy-loading pages
  • Ionic components
  • Ionic icons
  • Page structure and markup
  • Running in the browser
  • Building an app with Cordova
  • Running on an emulator
  • Running on a real device

Brief about TypeScript

Ionic is using TypeScript (instead of plain JavaScript). This chapter provides a brief overview of the most important language features of TypeScript. For a more thorough walkthrough, please see our TypeScript course.

  • What is TypeScript
  • Relation to JS, ES5, ES6
  • Understanding the type support in TS
  • Modules
  • Scalar type types
  • Composite data types
  • ES6 Lambda expressions
  • Functions
  • Classes and member variables and functions
  • Visibility and accessor methods
  • Sub-classes and abstract classes and methods
  • Interfaces
  • Generic classes

Brief about Angular

Ionic is built upon Angular. This chapter provides a brief overview of the most important language of Angular. For a more thorough walkthrough, please see our Angular course.

  • What is Angular
  • What do you need to know
  • Angular artefacts
  • Modules
  • Components
  • Directives
  • HTML templates
  • Handlebar operators
  • Attribute input
  • Event output
  • Two-way binding
  • Services
  • Pipes

Pages

How to handle Ionic pages and page navigation

  • Generating lazy-loaded pages
  • How to navigate within an Ionic app
  • The page stack
  • Setting page names
  • Navigating to another page
  • Popping back to a previous page on the stack
  • Using navigation parameters
  • Setting segments
  • Using segment parameters

Lists

How to use the versatile Ionic item list component

  • Basic list
  • Basic item CRUD
  • Dividers and headers
  • Using icons, avatars and thumbnail images
  • Implementing sliding items
  • Using FAB buttons
  • Pull to refresh

Forms and Inputs

Various ways of getting data from the client

  • Text inputs
  • Using lists for inputs
  • Two-way binding
  • Using form-builder
  • Checkboxes and switches
  • Radio buttons
  • Multu-choice controls
  • Sliding controls

Composite Layouts

How to created tabbed apps and apps with sliding side-menus.

  • Understanding application layout
  • Creating a tabbed app
  • Tab navigation
  • Creating an app with a sliding side-menu
  • Understanding the difference of setting the root and pushing a page

Styling and Themes

How to control the app colors and other style settings

  • Understanding CSS
  • Understanding SASS and SCCS directives
  • Ionic standard colors and how to change them
  • The grid system
  • SASS variables
  • Understanding platform styles

Cordova Plugins

Using plugins is the way of accessing the services of the device

  • What is Ionic Native
  • Understanding and using Cordova plugins
  • Using the camera
  • Vibrating the device
  • Accessing contacts
  • Sending emails
  • Retrive the current geo location
  • Showing a geo location on a map

REST Web Services

How to retrieve and show data fetched from REST HTTP web services

  • What is REST WS
  • Using the Angualr http service
  • Fetching data and render as list items
  • Sending data via HTTP POST/PUT

Firebase

Brief description of using Google Firebase with Ionic. For a more thorough walkthrough, please see our Firebase course.

  • What is Firebase
  • Understanding the real-time database
  • Understanding the file storage
  • Understanding user authentication
  • Using AngularFire2
Facts
NameIonic Hybrid Mobile Apps
Duration 3 Days
Level Intermediate
AudienceApp developers
Prerequisites Working knowledge in JavaScript/CSS/HTML
Tools
  • NodeJS
  • JetBrains WebStorm IDE
  • Google Chrome
  • Android unit, with its USB cable
On-Site Course

If you order an On-Site course, we will come to you and hold the course in your office. The price is determined by our price model and is based on the number of course days, number of participants and any travel and lodging.

Read more about out price modell and term of sales here.

Related Courses
CourseDaysLevel
JavaScript3 Beginner Show
TypeScript2IntermediateShow
NodeJS2IntermediateShow
Angular4 BeginnerShow
Google FireBase3 IntermediateShow
Android Mobile Apps Devevelopment4IntermediateShow