trainocate-advanced-technology-courses-b

ION-APP-DEV - Ionic App Development

Overview

Duration: 3 days
Ionic & Angular Hybrid app development

Objectives

To master the tools and technique to make hybrid application

Content

Module 1 – Module One | Overview
  • What Is Ionic?
  • A Closer Look at the Ionic Platform
  • What is Angular?
  • Our First Ionic App!
  • The History of Ionic
  • Ionic 4+ vs Ionic 3
  • How to Build Native Mobile Apps with Ionic
  • Comparing Ionic to Alternatives

Module 2 – API Functionalities
  • What is Angular?
  • Angular SPAs & Ionic
  • Understanding Components
  • Installing Angular with the CLI
  • Installing the IDE
  • Understanding the Folder Structure
  • The App Component
  • Creating Our First Component
  • Cross Component Communication with Property Binding
  • Understanding Directives & String Interpolation
  • Handling User Input
  • Understanding Event Binding
  • Local References
  • Understanding Two-Way-Binding
  • Passing Data Around with Custom Events
  • Implementing Routing
  • Setting Up Services
  • Using Services with Dependency Injection
  • Working with Angular Lifecycle Hooks
  • Adding a Person with Services
  • Navigating between Components
  • Removing Items Upon a Click
  • Pushing Data Around with Subjects 
  • More on RxJS & Observables
  • Sending Http Requests
  • Showing a Placeholder Whilst Waiting for a Response share content to a chat or a group chat

Module 3 – Ionic component Basics
  • Core App Building Blocks
  • Under the Hood of Ionic Components
  • Setting Up a Non-Angular Ionic Project
  • Where to Learn all about Ionic Components
  • Using Basic Ionic Components
  • More Basic Components
  • Component Categories
  • Using the Ionic Grid
  • Adding Icons & Using Slots
  • Using CSS Utility Attributes
  • Using Ionic Elements like "Normal" HTML Elements
  • Validating User Input
  • Creating Ionic Elements Programmatically 
  • Finishing Up the Base JavaScript Logic
  • Finalizing the Layout
  • Using Controller Components
  • Practicing Ionic Components

Module 4 – Building Native Apps with Capacitor
  • Module Introduction
  • General Information
  • Creating an Android App
  • Running the App on a Real Android Device
  • Creating an iOS App
  • Running the App on a Real iOS Device

Module 5 – Debugging
  • Module Introduction
  • Error Messages & console.log()
  • Using the Browser DevTools & Breakpoints
  • Using VS Code for Debugging
  • Debugging the UI & Performance
  • Debugging Android Apps
  • Debugging iOS Apps

Module 6 – Navigation and Routing in Ionic apps
  • Module Introduction
  • How Routing Work In An Ionic + Angular App
  • Ionic Page Caching & Extra Lifecycle Hooks
  • Planning the Course Project
  • Creating Our App Pages
  • MUST READ: Ionic 5 and Routing / Lazy Loading
  • Adjusting Our Main Routing Configuration
  • Understanding Ionic Tabs
  • Adding Tabs to the App
  • Preparing Data & Services for the Project
  • Outputting "Places"
  • Adding Forward Navigation
  • Going Back with NavController
  • Practicing Ionic + Angular
  • Navigating via Toolbar Buttons
  • A Bug with Ionic
  • Extracting the ID of Loaded Places
  • Adding a SideDrawer
  • Opening + Closing the SideDrawer
  • Adding Links & Switching Pages
  • Adding the Auth Service
  • Adding an Auth Guard
  • Opening a Modal
  • Closing the Modal & Passing Data

Module 7 – Ionic Components Overview
  • Module Introduction
  • Attributes & Slots
  • Ionic Grid Basics
  • Controlling Grid Column Sizes
  • Controlling Grid Alignment
  • Responsive Grid Sizing
  • Grid Summary
  • ion-list vs ion-grid
  • ion-label & ion-item
  • ion-text
  • Swipeable List Items
  • Swipeable Bookings
  • Understanding Virtual Scrolling
  • Implementing Virtual Scrolling
  • Virtual Scrolling Bugs
  • Adding Image Elements
  • Segmented Buttons
  • Adding a Spinner
  • Using the Loading Controller
  • Using the ActionSheet Controller

Module 8 – Styling and Theming Ionic Apps
  • Module Introduction
  • How Styling & Theming Works in Ionic Apps
  • Docs & Utility Attributes
  • Setting Global Theme Variables
  • Setting Global Styles
  • Setting All Colors at Once
  • Setting Platform-Specific Styles
  • Styling Core Components with Variables
  • Missing iOS Icons
  • Adding Custom CSS Rules
  • Component-specific CSS Variables
  • Attributes & Slots

Module 9 – Handling User Input
  • Module Introduction
  • User Input Requirements
  • Setting Up a Form Template
  • Angular 8 & @ViewChild()
  • Adding a Template-driven Form
  • Handling Validation
  • Switching Between Auth Modes
  • Finishing the Auth Form
  • Starting Work on a New Offer Form
  • Finishing the Offer Form Template
  • Creating a Reactive Form 
  • Syncing the Form to the Template
  • Finishing the New Offer Form •Edit Form Challenge
  • Adding the Edit Offer Form
  • Starting with the Booking Form
  • Working on the Book Place Template
  • Configuring the Date Controls
  • Validating & Submitting the Form

Audience

App and web developers

Prerequisites

Some experience with web or mobile development

Certification

Trainocate Certificate of Attendance

Schedule

Show Schedule for: