Ionic Developer Course

This course will provide an introduction to mobile application development using Ionic Framework to its participants. At the end of the course, the participants will be able to produce a mobile application via Android (apk) or iOS (Xcode installed) and will have a basic understanding of the Ionic Framework as well as a mobile application using a hybrid framework.

Course Overview

  • Explain the concepts of the Ionic Framework
  • Set up the development environment and tools for Ionic Framework
  • Build an Ionic App with Ionic Angular
  • Use HTML and Angular components
  • Use Ionic Mobile App UI components
  • Use Ionic Angular Services, Components and Pipes in Ionic Development
  • Test Ionic App on a browser
  • Generate a mobile app for Android and Apple Mobile Devices with Capacitor
  • Use Ionic Native and Capacitor Plugins in Ionic Development
  • Use Canva to design and prepare App Icon and Splash Screen
  • Integrate Google Firebase as a backend for Ionic Mobile Application

Part 1 - Introduction to Ionic Framework

Learning Outcomes

Explain the concepts of the Ionic Framework

Details

  • About Ionic Framework
  • The Hybrid Model & PWA

Part 2 - Installing Ionic Framework & its tools

Learning Outcomes

Set up the development environment and tools for Ionic Framework

Details

  • Installing Command Line Interface (CLI)
  • Installing Integrated Development Environment (IDE)
  • Installing Ionic

Part 3 - Start A Project

Learning Outcomes

Build an Ionic app with Ionic Angular

Details

  • Types Of Ionic Framework Projects
  • Create a “Hello World” Project

Part 4 - Generating Pages & Navigating to it

Learning Outcomes

Use HTML and Angular commands. Use Ionic Mobile App UI components

Details

  • Generate an Ionic page and basic navigation
  • Basic HTML

Part 5 - Run A Project

Learning Outcomes

Test Ionic App on a browser

Details

  • Serving and testing your app on a browser

Part 6 - Generating Services, Components, Pipes and Modules

Learning Outcomes

Use Ionic Angular Services, Components and Pipes in Ionic development

Details

  • Using services, components and pipes in your application and their uses in a mobile application

Part 7 - Using Angular Commands

Learning Outcomes

Use HTML and Angular commands

Details

  • Using For Loop and *ngFor
  • Using If Else and *ngIFUsing (click)
  • Using [(ngModel)]

Part 8 - Turning your Ionic project into an app

Learning Outcomes

Generate a mobile app for Android and Apple Mobile Devices with Capacitor

Details

  • Installing and setting up to turn your application into aProgressive Web App(PWA), Android (apk) or iOS App (via Xcode)

Part 9 - Completing your stack with Firebase by Google

Learning Outcomes

Integrate Google Firebase as a back end for Ionic Mobile Application

Details

  • About Firebase, using Auth & Firestore Nosql Database
  • Build an Ionic login page integrated with Firebase

Part 10 - Resources and Asset Preparation

Learning Outcomes

Use Canva to design and prepare App Icon and Splash screen

Details

  • Preparing Icon and Splash Screen for Android ApplicationiOS Application (for Mac)
  • Basic Canva