Categories

There are currently no items in your shopping cart.

User Panel

Forgot your password?.

Ionic 4 – Build iOS, Android & Web Apps with Ionic & Angular

Video Introducing this tutorial


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
Comparing Ionic to Alternatives
Course Outline
How To Get The Most Out Of The Course
The Course Source Code

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
More on RxJS & Observables
Sending Http Requests
Showing a Placeholder Whilst Waiting for a Response
Wrap Up
Useful Resources & Links

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
Practicing Ionic Components
1 question
Why Angular?
Useful Resources & Links

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
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
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
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
1 question
Navigating via Toolbar Buttons
Extracting the ID of Loaded Places
More Practicing!
1 question
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 Rules
Component-specific CSS Variables
Wrap Up
Useful Resources & Links

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
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
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
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
Starting With the Image Picker
Taking Pictures
Avoid Distorted 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
Useful Resources & Links

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 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
More Token Usage
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

[LEGACY] Getting Started :
What's [LEGACY]?
Course Introduction
This Course & Angular 4
What is Ionic 2?
Just to be safe: What is Angular 2?
Course Requirements
Creating your First App
Creating our first Ionic 2 Project and App
Changing our First App
Running your App on a Real Device
The Structure of this Course
How to get the Most out of this Course
Section Source Code & Links

[LEGACY] Mastering the Basics :
Module Introduction
A different Way of Creating a New Project
Other available Project Templates
Understanding the Structure of an Ionic 2 Project
How an Ionic 2 App Works
Pages vs Components
How Navigation works in an Ionic 2 App
Initializing Navigation in the AppComponent
ionic generate page XY Problems
Creating a Page and how to Navigate to it
First Summary
An Alternative Way of Creating Pages
Passing Data between Pages
Popping Pages - Going Back
Time to Practice - Pages & Navigation - Problem
Time to Practice - Pages & Navigation - Solution
Saving Time with helpful Navigation Directives
Configuring Page Transitions
Understanding the Lifecycle of a Page
The Page Lifecycle in Action
How to use the Ionic 2 Documentation
Styling the App and Setting a Theme
Using Utility Attributes
Module Summary
Section Source Code & Links

[LEGACY] "Favorite Quotes" App (Navigation, Pages and Components) :
Module Introduction
What we're going to build
Breaking the App into Pieces (Defining the App Structure)
Creating the required Pages
Multiple Stacks of Pages vs One Single Stack
Implementing Tabs Navigation with Multiple Stacks of Pages
Adding Quotes Data to the App
Using the Quotes Data
Using the Ionic "List" and "List Item" Components
How to create more complex List Items
Passing the Quotes Data between Pages
Using the Ionic "Cards" Component
Using the Ionic Grid, Buttons and Styling Cards
Adding Custom Styles
Adding Alerts to the Application
Working with Angular 2 Services in the Ionic 2 App
Marking Quotes as Favorites by using a Service
Preparing the Favorite Quotes Page
Diving Deeper into List Items
Preparing a Modal Page
Presenting a Modal
Dismissing Modals
Passing Data to a Modal
Passing Data from a Modal back to the Page
Understanding ViewController Hooks
Must-Read: Modal & willLeave
Receiving Modal Data by Using the ViewController
Updating the "Favorite Quotes" Page
Adding an "Unfavorite" Functionality to the App
Revealing extra List Item Options upon Sliding
Changing the overall App Theme
Adding a Sidemenu
How to change the Root Page
Adding a Menu Toggle Button to the Navigation Bar
Preparing the Settings Page
Creating and Using the Settings Service to Store Settings
Adding an Alternative Item Background
App Summary
Module Summary
Section Source Code & Links

[LEGACY] Ionic 2 Components - A Closer Look :
Module Introduction
Another Look at the Component Docs
Using and Styling Buttons
Understanding Lists
Understanding List Items and their Content
Configuring Lists
Item Groups and List Headers
Bonus: How to create a re-orderable List
Ionic 3.0.0 and the Grid
Understanding the Grid System
More than (click) - Using Gestures
Creating and Using Custom Components
Time to Practice - Components - Problem
Time to Practice - Components - Solution
Module Summary
Section Source Code & Links

[LEGACY] Running an Ionic 2 App on a Real Device (or an Emulator) :
Module Introduction
Where to get started
Building for iOS
Building for Android
Lists & Performance Issues
Step-by-step Guide for Building for iOS and Android
Module Summary

[LEGACY] "The Recipe Book" App (User Input, Forms and Data Management) :
Module Introduction
What we're going to build
Breaking the App into Pieces (Defining the App Structure)
Creating the required Pages
Implementing a Tabs Navigation
Setting the App Theme
Planning the Next Steps
Forms: Template-driven vs Reactive Approach
Understanding Ionic 2 Controls
Creating a Form Template (for Template-Driven Approach)
Registering Controls (Template-Driven)
Submitting the Form (Template-Driven)
Validating the Form (Template-Driven)
Handling Data with a Model for our Ingredients
Managing Data with a Service (Shopping List Service)
Saving Items with the Shopping List Service
Displaying Items from the Shopping List
Removing Item from the Shopping List
Adding a "New Recipe" Button and Page Transition
Creating a "Edit Recipe" Form (Reactive Approach)
Creating the Reactive Form
Syncing Form and HTML (Reactive Approach)
Add Ingredients Management to the Form
Creating an Action Sheet
Creating a Dialog (Alert) with an Input Field
Managing Ingredient Controls in a FormArray
Wiring it all up
Removing Ingredient Controls
Using Toasts to Present Short Messages
Adding a Recipe Model and Service
Adding Recipes through a Service
Outputting Recipes
Displaying Recipe Details - Template
Displaying Recipe Details - Styling
Loading the Recipe Detail Page (and passing Data to it)
Loading the Edit Page (and passing Data to it)
Initializing the Edit Form
Updating the Recipe through a Service
Sending Ingredients to the Shopping List
Finishing Steps
Module Summary
Section Source Code & Resources

[LEGACY] "The Extended Recipe Book" App (Auth and Http) :
Module Introduction
What we're going to build
Which New Features We're Going to Add
Generating the Required Pages
Adding a Sidemenu
Creating the Signup Page (and Form)
Creating the Signin Page
How Authentication Works in an Ionic 2 (Mobile) App
Setting up Firebase (as a Development Backend)
Implementing the Signup Process
Showing a Loader (Spinner) and Error Alert
Implementing the Signin Process
Refining the Signin Page
Managing the User State
Logging Users Out & Fixing a Bug
How Firebase stores the Token
Adding a Popover Component
Fetching the Token
Ionic 3 and Http
Sending a PUT Request with the Auth Token
More about Tokens
Sending a GET Request to load Data
Polishing the App (Adding a Spinner and Error Handling)
Fixing the Error Handler
Storing and Fetching Recipes
Fixing Errors
Seeing the App run on a Real Device
Module Summary
Section Source Code & Links

[LEGACY] "Awesome Places" App (Native Device Features, Storage) :
Module Introduction
What we'll build
Generating the required Pages
Creating Models for Location and Places
Implementing Navigation
Filling the "New Place" Page with Life (incl. Template-Driven Form)
Using Angular Google Maps
Adding Google Maps to the App
Configuring our Maps
Allowing the User to Place a Marker on the Map
Passing the Chosen Location back to the Page
Displaying the Chosen Location
Using Ionic Native 3 instead of 2
Using a Native Device Feature: Geolocation to Locate the User
Polishing the Auto-Locate-Feature
Using a Native Device Feature: The Camera
Displaying the Picture
Managing Data with the PlacesService
Configuring the Single Place Page
Reflecting on our App
Using a Native Device Feature: The File System (to manage Files)
Using the Device Storage: Setting and Getting Data
Deleting stored Data and Files
Fixing the Fetching of Data
Fixing the Storage Issues
Extra: How to Debug
Module Summary
Section Source Code & Resources

[LEGACY] Publishing Your App :
Module Introduction
Deployment Considerations
Using Custom Icons & Splashscreens
Configuring the App
Build Preparations & Building for Production
Publishing the App in the Google Play Store
Publishing the App in the Apple AppStore
Module Summary
Section Source Code & Links

[LEGACY] Course Roundup :
Course Roundup

[LEGACY] Bonus: Ionic 2 Tips & Tricks :
Changing the Back Button Text
Changing Application-Wide Settings
Find out which Platform You're Running On
Find out which Screen Orientation You're Running On
Section Source Code & Resources

[LEGACY] Angular Recap :
Module Introduction
What is Angular 2?
Understanding the Project Structure and how the App Starts
Understanding Components & Templates
Understanding Databinding
Understanding Directives
Custom Property and Event Binding
Using Services & Dependency Injection
More on Angular 2
Module Summary
Section Source Code & Resources

[LEGACY] Updating to Ionic 3 & Ionic Native 3 :
Ionic 3 Update Overview
Updating the "Awesome Places" App to Ionic 3 & Ionic Native 3
Ionic 3 Release Notes & Upgrade Guide

Bonus Content :
Bonus: More Content!