ionic framework | Hielite Technologies

Ionic 5 - Build iOS, Android & Web Apps with Ionic & Angular

Build Native iOS & Android as well as Progressive Web Apps with Angular, Capacitor and the Ionic Framework.

What you'll learn

Getting Started

Course Introduction
What Is Ionic?
Join our Online Learning Community
A Closer Look at the Ionic Platform
What is Angular?
Node.js Download
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
Course Outline
How To Get The Most Out Of The Course
The Course Source Code

Angular Refresher

Module Introduction
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
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
Use the right Ionic Import
Using Controller Components
Practicing Ionic Components
Why Angular?
Useful Resources & Links

Ionic Component Basics

Module Introduction
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
"Push"ing Data Around with Subjects
More on RxJS & Observables
Sending Http Requests
Showing a Placeholder Whilst Waiting for a Response
Wrap Up
Useful Resources & Links

Angular + Ionic

Module Introduction
Why Use Angular?
Creating a New Ionic Angular Project
Important: CSS Utility Attributes
Analyzing the Created Project
How Angular & Ionic Work Together
Important: Extra Routing Modules
Adding & Loading a New Page
Using Angular Features on Ionic Components
Setting Up Angular Routes
Managing State with Services
Extracting and Displaying Route Param Data
A Potential Bug (+ Fix)
Navigating Between Pages
Deleting a Recipe
There's a Bug!
Injecting Ionic Controllers
Angular Components vs Ionic Components
Wrap Up
Useful Resources & Links

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/li>
Running the App on a Real iOS Device
Wrap Up
Useful Resources & Links

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
Wrap Up
Useful Resources & Links

Navigation & 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
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
More Practicing!
Optional: Assignment Solution Code
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
Wrap Up
Useful Resources & Links

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
Wrap Up
Useful Resources & Links

Styling & 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 Rulest
Component-specific CSS Variables
Wrap Up
Useful Resources & Links

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
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
Avoid Errors
Validating & Submitting the Form
Wrap Up
Useful Resources & Links

Managing State

Module Introduction
What is State?
Adding New Places
Using RxJS Subjects for State Management
Passing Data via Subjects & Subscriptions
UI State in Action
Updating Places
UI State with Bookable Places
Filtering & Navigation
Booking Places
Fixing a Bug
Canceling Bookings
Finishing Touches
Useful Resources & Links

Sending Http Requests

Module Introduction
How To Connect to a Backend
Setting Up Firebase
Sending Data via Http
Using Response Data
Fetching & Displaying Data
Updating Places
Fetching Data in Multiple Places
Loading Data in a Single Place
Updating Places Correctly
Error Handling
Fetching Single Places
Adding a Booking
Fetching Bookings By User
Deleting Bookings
Wrap Up
Useful Resources & Links

Adding Google Maps

Module Introduction
API Setup
Angular 8 & @ViewChild()
Adding a LocationPicker Component
Opening the Map Modal
Adding the Google Maps SDK
Rendering a Map
Picking Locations via a Click on the Map
Finding the Address for a Place
Fetching a Static Image URL
Displaying a Place Preview
Removing the Click Listener
Submitting the Location
Outputting Address & Map
Re-using the Maps Modal
Useful Resources & Links

Using Native Device Features (Camera & Location)

Module Introduction
Understanding Capacitor & Cordova
Using the Docs()
Using Capacitor Plugins
Getting the User Location
Testing the Location Feature
Angular 8 & @ViewChild()
Starting With the Image Picker
Taking Pictures
Avoid Distorted Pictures
Detecting the Platform Correctly
Adding a Filepicker Fallback
Adding a Filepicker Fallback
Converting the Image String to a File
Storing the Image in the Form
Useful Resources & Links
Capacitor v1 & PWA Elements
Using PWA Elements
Improving the ImagePicker Component
MUST READ: Firebase Cloud Functions Billing
Adding Server-side Image Uploading Code
Adding Image Upload
Wrap Up
Useful Resources & Links

Adding Authentication

Module Introduction
How Authentication Works
Firebase API Key
Adding User Signup
Refactoring the Authentication Code
Adding User Login
Managing the User with a Subject
Storing the Token in Memory
Using the ID Observable Correctly
More userId Usage
Fixing the Subscription
Using the userId Everywhere
Storing Auth Data in Device Storag
Adding Autologin
Using Autologin
Adding a Reactive Logout System
Adding Autologout
Requiring the Auth Token on the Backend
Sending the Auth Token to the Backend/li>
More Token Usage
Adding Server-side Image Uploading Code
Optional: Check Auth State When App Resumes
Wrap Up
Useful Resources & Links

Publishing the Apps

Module Introduction
Preparing App Configs
Custom Icons & Splash Screens
Android Deployment
iOS Deployment
Web Development
Useful Resources & Links

Roundup

Course Roundup

Bonus Content

Bonus: More Content

Requirements