Ionic 4 - Build iOS, Android and Web Apps with Ionic and Angular [Video]

Preview Online

Code Files

Ionic 4 - Build iOS, Android and Web Apps with Ionic and Angular [Video]

Maximilian Schwarzmüller

Friday, April 26, 2019

New Release!

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

Quick links: > Table of contents > What will you learn? > Preview

Packt Subscription

FREE

€9.36/m after trial

Video

€148.69

RRP €174.91

Save 14%

What do I get with a Packt subscription?

Exclusive monthly discount - no contract
Unlimited access to entire Packt library of 6500+ eBooks and Videos
120 new titles added every month, on new and emerging tech

What do I get with an eBook?

Download this book in EPUB, PDF, MOBI formats
DRM FREE - read and interact with your content when you want, where you want, and how you want
Access this title in the subscription reader

What do I get with Print & eBook?

Get a paperback copy of the book delivered to you
Download this book in EPUB, PDF, MOBI formats
DRM FREE - read and interact with your content when you want, where you want, and how you want
Access this title in the subscription reader

What do I get with a Video?

Download this Video course in MP4 format
DRM FREE - read and interact with your content when you want, where you want, and how you want
Access this title in the subscription reader

€0.00

€148.69

€9.36 p/m after trial

RRP €174.91

Subscription

Video

Start a FREE 10-day trial

Frequently bought together

Ionic 4 - Build iOS, Android and Web Apps with Ionic and Angular [Video]

€ 174.91

€ 148.69

Ionic 4 - Build iOS, Android and Web Apps with Ionic and Angular [Video]

Apr 2019

19 hours 34 minutes

€ 148.69

The Complete iOS 11 and Swift Developer Course - Build 20 Apps [Video]

€ 189.19

€ 160.82

The Complete iOS 11 and Swift Developer Course - Build 20 Apps [Video]

Mar 2019

36 hours 26 minutes

€ 160.82

Buy 2 for €309.51
Save €45.88

Add to Cart

Video Details

ISBN 13 9781838828943

Course Length 19 hours 34 minutes

Getting Started

Course Introduction

What Is Ionic?

A Closer Look at the Ionic Platform

How to Build Native Mobile Apps with Ionic

Course Outline

How to Get the Most Out Of the Course

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

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?

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

Building Native Apps with Capacitor

Module Introduction

General Information

Creating an Android App

Creating an iOS App

Wrap Up

Debugging

Module Introduction

Error Messages & console.log()

Using the Browser DevTools & Breakpoints

Debugging the UI & Performance

Debugging Android Apps

Debugging iOS Apps

Wrap Up

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

Ionic Components Overview

Module Introduction

Attributes & Slots

Ionic Grid Basics

Controlling Grid Column Sizes

Controlling Grid Alignment

Responsive Grid Sizing

Understanding Virtual Scrolling

Implementing Virtual Scrolling

Adding Image Elements

Segmented Buttons

Adding a Spinner

Using the Loading Controller

Using the ActionSheet Controller

Wrap Up

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

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

Managing State

Using RxJS Subjects for State Management

Passing Data via Subjects & Subscriptions

UI State in Action

Updating Places

UI State with Bookable Places

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

Adding Google Maps

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

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

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

Publishing the Apps

Module Introduction

Preparing App Configs

Custom Icons & Splash Screens

Roundup

Video Description

Ionic is one of the most exciting technologies you can learn at the moment - it enables you to use one codebase (written in HTML, JS and CSS) to build and ship apps as normal (progressive) web apps as well as real native mobile apps for iOS and Android. This course teaches you the latest version of Ionic from scratch with no prior knowledge about it assumed. Angular (formerly Angular 2) allows you to create awesome web applications powered by TypeScript / JavaScript. Wouldn't it be great to use that Angular knowledge to build web applications that can be compiled into native mobile apps, running on any iOS or Android device? And also publish them as progressive web apps at the same time. The Ionic framework allows you to do just that! Use your existing Angular, HTML, JS and CSS knowledge and build your native mobile app with that! Ionic offers a lot of beautiful 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 focus on the things you know and release your application on all possible devices without having to learn thousands of different languages! Indeed, with Ionic, you can use one codebase to ship three different apps (iOS, Android, web). No wonder that hybrid frameworks like Ionic are extremely popular and in high demand! All the code and supporting files for this course are available at: https://github.com/PacktPublishing/Ionic-4---Build-iOS-Android-and-Web-Apps-with-Ionic-and-Angular

Style and Approach

This course takes you from zero to published app, taking a very practice-orientated route. You'll a realistic app (where users can create and book events) throughout the course, learning about the basics of Ionic, its rich component library, how to fetch and handle user input, how to store data and access native device features and much more!

Video Preview

What You Will Learn

Build native apps and progressive web apps from one and the same codebase
Build native apps for iOS and Android, using Angular and powerful features Ionic 4 offers
Dive deeper into Ionic 4 to learn more about core and advanced features
Test iOS and Android apps on real devices and publish those apps to the app stores of the two platforms

Authors

Maximilian Schwarzmüller

Academind GmbH - Online Education

Bundling the courses and knowhow of successful instructors, Academind strives to deliver high-quality online education. Online Education, Real-Life Success—that's what Academind stands for. Learn topics like web development, data analysis, and more in a fun and engaging way.

Maximilian Schwarzmüller - Professional Web Developer and Instructor

Since the age of 13, Maximilian Schwarzmüller has never stopped learning new programming skills and languages. In the early days, he started creating websites for friends and for fun. This passion has remained and shaped his decision to work as a freelance web developer and consultant. The success and fun he has in this job is immense and really keeps that passion alive. Although he started web development on the back end (PHP with Laravel and NodeJS), he has increasingly become a front-end developer using modern frameworks such as React, Angular, or VueJS 2 in a lot of projects. He loves both worlds nowadays! As a self-taught developer, he had broadened his horizon by studying Business Administration, resulting in a Master's degree. This enabled him to work in a major strategy consultancy as well as a bank. Whilst learning and developing his skills, he realized that he enjoyed development more than these fields.

As a self-taught professional, Max is familiar with the difficult topics when learning new or improving on already-known languages. This background and experience enables him to focus on the most relevant key concepts and topics. His track record is the best proof of that. Whether working as development instructor or teaching Business Administration, he always receives great feedback. The most rewarding experience is to see how people find new and better jobs, build awesome web applications, acquire amazing projects, or simply enjoy their hobby with the help of his content.

Getting Started

Course Introduction

What Is Ionic?

A Closer Look at the Ionic Platform

How to Build Native Mobile Apps with Ionic

Course Outline

How to Get the Most Out Of the Course

Angular Refresher