EIEIOTECHNOVATION
← Training programmes

EIEIO / AUTOMATION & EMERGING TECHNOLOGY

Fundamentals Of Ionic Mobile App Dev

Course outline

3 days
Discuss this programme →

Duration

Fundamentals Of Ionic Mobile App Dev

3 days

Overview

Ionic Framework is one of the latest mobile hybrid frameworks. It was built on top of Angular , Javascript, TypeScript and HTML. It will allow you to create native-feeling mobile apps using web technology such as HTML, CSS and Javascript, while providing a native look and feel on each supported platform.

This workshop is a hands-on guide to designing and building mobile applications using Ionic Framework. The course explains what Ionic Framework is, all the important and essential UI features and components, as well as the advanced capabilities such as connecting to remote servers, adding social and analytics features in the app.

This complete hands-on workshop encourages participants to learn by building a real-life working application, which can serve as a basis for their future mobile projects. By the end of the course, each participant will have a complete functional mobile application ready to be published to Google Play or Apple Store incorporating most of the key features of the platform.

Target audience

Programmers, Software Engineers, Web Developers

Prerequisites

Candidates must have a strong knowledge of HTML, CSS and JavaScript. Some knowledge on Angular will help, but it will be covered in this course as well.

Objectives

Upon completion of this course, you will be able to:

  • Build your own applications for Android and iOS mobile phones using hybrid development..
  • Design mobile applications with compelling user interfaces by using and creating your own layouts following Design Principle.
  • Use HTTP service to access Web Services (eg: Weather forecast information)
  • Take advantage of Native Storage for data storage and retrieval via native storage and local databases.
  • Utilize the powerful Cordova API on maps, location, medias and hardware to build complex applications
  • Debug, test and deploy your own applications on Google Play Store.
  • Using Analytics to Analyze app performance.

Day1

Mobile App Development Overview

  • Different roles in large scale mobile application project
  • Mobile app lifecycle
  • Discovery/Design Phase
  • Design Phase
  • Latest UI/UX Design trend.
  • Develop Phase
  • Testing
  • Deploy

Guidance Introduction

  • Panorama of mobile application development
  • Hybrid vs Native
  • Hybrid Framework

Introduction to Ionic

  • What is Ionic Framework
  • Different Components building Ionic Framework
  • Who is using Ionic Framework
  • Ionic Showcase
  • Ionic Platform
  • Ionic.io

Understanding Application Structure (First Application)

  • Ionic Installation
  • Ionic templates
  • Creating a “Hello World” application
  • Understanding Ionic File structure
  • Viewing your app via Ionic View

Language Overview

  • Introduction to TypeScript
  • Comments
  • Declaration
  • Basic Types
  • Control Flow
  • Functions
  • Classes
  • Interfaces
  • Overview of Angular
  • Interpolation
  • DIrectives
  • Modules
  • Components
  • Service/Providers
  • Binding Events
  • Two Way Data Binding

Single Page Application

  • UI layout
  • Material Design
  • Image
  • Button
  • Input
  • CheckBox
  • Button Click
  • Datetime
  • Forms and Validations

Day 2

Multiview Application

Theming and Styling

  • Default styling in Ionic
  • Introduction to SASS
  • SASS Variable
  • Custom Styling
  • Ionicons

List and Cards Component

  • Material Design Overview
  • Ionicons
  • List
  • Card
  • Repeating content using *ngFor
  • Creating a CRUD application

Gestures

  • Adding Gestures to application
  • Pinch
  • Swipe
  • Press
  • Pan
  • Pinch
  • Rotate

Multiview Application

  • Ionic Navigation Stack
  • Pushing
  • Popping
  • Create new page Modally
  • Passing Data between pages
  • Other Multiview layout:
  • Tabs
  • Sidemenu

Alert, Action Sheet and Toast

  • Alert
  • Action Sheet
  • Toast

Persistent application data (local)

  • Local Storage/Web Storage
  • Native Storage
  • WebSQL
  • SQLite Database
  • IndexedDB

Day 3

Connection to Remote Server

Internet Connection

  • Use Angular HTTP Module
  • Service/Provider in Application
  • Introduction to JSON
  • Parsing JSON Data

Device feature

  • Camera
  • Photo Library
  • Geo-location

Publishing

  • Registering
  • Signing
  • Application Version
  • Package naming
  • Google Play
  • App monetization
  • Managing alpha and beta testing.

Programme scope, delivery arrangements and suitability are confirmed during enquiry.