Build native iOS and Android as well as progressive web apps with Angular, Capacitor, and the Ionic framework
About This Video
In Detail
Ionic is one …
Build native iOS and Android as well as progressive web apps with Angular, Capacitor, and the Ionic framework
About This Video
In Detail
Ionic is one of the most exciting technologies you can learn. It enables you to use one codebase (written in HTML, JS, and CSS) to build and ship regular (progressive) web apps as well as native mobile apps for iOS and Android. This course will help you work with the latest version of Ionic from scratch. Angular (formerly Angular 2) allows you to create awesome web applications powered by TypeScript or JavaScript. The Ionic framework allows you to use your Angular knowledge to build web applications that can be compiled into native mobile apps, running on any iOS or Android device, and enables you to publish them as progressive web apps. You’ll use your existing Angular, HTML, JS, and CSS knowledge to build your native mobile apps and discover components that can be used to compose native-like user interfaces. The capacitor will handle the rest as it's used to then build a native mobile app for iOS/ Android based on your code. This allows you to make the most of your knowledge and release your application on all possible devices without having to learn different languages! No wonder that hybrid frameworks like Ionic are extremely popular and in high demand!
Who this book is for
This course is for anyone who wants to use their Angular knowledge to build native mobile apps and web apps with one codebase and for everyone interested in developing native mobile apps for iOS and Android.
Chapter 1 : Getting Started
Course Introduction
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
Course Outline
How to Get the Most Out Of the Course
Chapter 2 : Angular Refresher
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
Sending Http Requests
Showing a Placeholder Whilst Waiting for a Response
Wrap Up
Chapter 3 : Ionic Component Basics
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
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
Why Angular?
Chapter 4 : Angular + Ionic
Module Introduction
Why Use Angular?
Creating a New Ionic Angular Project
Analyzing the Created Project
How Angular Ionic Work Together
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
Navigating Between Pages
Deleting a Recipe
Injecting Ionic Controllers
Angular Components vs Ionic Components
Wrap Up
Chapter 5 : Building Native Apps with Capacitor
Module Introduction
General Information
Creating an Android App
Creating an iOS App
Wrap Up
Chapter 6 : Debugging
Module Introduction
Error Messages console.log()
Using the Browser DevTools Breakpoints
Debugging the UI Performance
Debugging Android Apps
Debugging iOS Apps
Wrap Up
Chapter 7 : 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
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
Navigating via Toolbar Buttons
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
Wrap Up
Chapter 8 : 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
Adding Image Elements
Segmented Buttons
Adding a Spinner
Using the Loading Controller
Using the ActionSheet Controller
Wrap Up
Chapter 9 : 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
Adding Custom CSS Rules
Component-specific CSS Variables
Wrap Up
Chapter 10 : Handling User Input
Module Introduction
User Input Requirements
Setting Up a Form Template
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
Wrap Up
Chapter 11 : 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
Booking Places
Fixing a Bug
Cancelling Bookings
Finishing Touches
Chapter 12 : 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
Chapter 13 : Adding Google Maps
Module Introduction
API Setup
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
Changing the Selection
Removing the Click Listener
Submitting the Location
Outputting Address Map
Re-using the Maps Modal
Chapter 14 : 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
Starting With the Image Picker
Taking Pictures
Detecting the Platform Correctly
Adding a Filepicker Fallback
Getting the Picked Image
Converting the Image String to a File
Storing the Image in the Form
Using PWA Elements
Improving the ImagePicker Component
Adding Server-side Image Uploading Code
Adding Image Upload
Wrap Up
Chapter 15 : Adding Authentication
Module Introduction
How Authentication Works
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 Storage
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
More Token Usage
Wrap Up
Chapter 16 : Publishing the Apps
Module Introduction
Preparing App Configs
Custom Icons Splash Screens
Android Deployment
iOS Deployment
Web Development
Chapter 17 : Roundup
Course Roundup