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

Ionic 4 – Build iOS, Android & Web Apps with Ionic & Angular
Ionic 4 – Build iOS, Android & Web Apps with Ionic & Angular
English | MP4 | AVC 1280×720 | AAC 48KHz 2ch | 34.5 Hours | 13.1 GB

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


It’s now up-to-date with the latest version of Ionic!

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 (which you’ll learn about in this course) that can be used to compose native-like user interfaces.

Capacitor (another tool provided by the Ionic team) 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 (desktop and mobile) 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!

My name is Maximilian Schwarzmüller and I’m a freelance web developer as well as creator of many 5-star rated courses here on Udemy – including my “Angular – The Complete Guide” course, the bestselling Angular course on Udemy!

I love creating awesome web applications and it simply is amazing to now use that knowledge and build native mobile apps with it, too!

This course takes your 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!

You’ll dive into all important Ionic components as well as concepts like navigation (tabs, sidemenus), user input, native device features (e.g. camera), storage, http, authentication!

And since building apps is only part of the fun, you’ll of course also learn how to run your apps either in the browser, on an emulator or on your own device!

What exactly are you going to learn then?

  • A brief refresher on Angular
  • How to set up your Ionic projects
  • The basics about Ionic – How navigation works, how your project is structured and you use its rich component library
  • How to use the many beautiful components Ionic ships with
  • How to use different kinds of navigation concepts: “Back”-Button-Navigation, tabs and sidemenus
  • How to show modals, alerts, toasts and many, many more useful UI components
  • How to test the app in the browser, on emulators or real devices
  • How to fetch and handle user input through inputs, textfields, dropdowns, dialogs etc.
  • How to authenticate users and access web servers to store + load data
  • How to access the local device storage and native device features like the camera or geolocation
  • So much more … like styling and theming your app
  • Finally, you’ll learn how to configure your app and publish it to the App Store or Google Play Store (or as a progressive web app)

What you’ll learn

  • Build native apps and progressive web apps from one and the same codebase
  • Build native apps for iOS and Android, using Angular and the 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
Table of Contents

Getting Started
1 Course Introduction
2 Course Outline
3 How To Get The Most Out Of The Course
4 The Course Source Code
5 What Is Ionic
6 A Closer Look at the Ionic Platform
7 What is Angular
8 Our First Ionic App!
9 The History of Ionic
10 Ionic 4+ vs Ionic 3
11 How to Build Native Mobile Apps with Ionic
12 Comparing Ionic to Alternatives

Angular Refresher
13 Module Introduction
14 Cross Component Communication with Property Binding
15 Understanding Directives & String Interpolation
16 Handling User Input
17 Understanding Event Binding
18 Local References
19 Understanding Two-Way-Binding
20 Passing Data Around with Custom Events
21 Implementing Routing
22 Setting Up Services
23 Using Services with Dependency Injection
24 What is Angular
25 Working with Angular Lifecycle Hooks
26 Adding a Person with Services
27 Navigating between Components
28 Removing Items Upon a Click
29 Pushing Data Around with Subjects
30 More on RxJS & Observables
31 Sending Http Requests
32 Showing a Placeholder Whilst Waiting for a Response
33 Wrap Up
34 Useful Resources & Links
35 Angular SPAs & Ionic
36 Understanding Components
37 Installing Angular with the CLI
38 Installing the IDE
39 Understanding the Folder Structure
40 The App Component
41 Creating Our First Component

Ionic Component Basics
42 Module Introduction
43 Adding Icons & Using Slots
44 Using CSS Utility Attributes
45 Using Ionic Elements like Normal HTML Elements
46 Validating User Input
47 Creating Ionic Elements Programmatically
48 Finishing Up the Base JavaScript Logic
49 Finalizing the Layout
50 Using Controller Components
51 Why Angular
52 Core App Building Blocks
53 Useful Resources & Links
54 Under the Hood of Ionic Components
55 Setting Up a Non-Angular Ionic Project
56 Where to Learn all about Ionic Components
57 Using Basic Ionic Components
58 More Basic Components
59 Component Categories
60 Using the Ionic Grid

Angular + Ionic
61 Module Introduction
62 Extracting and Displaying Route Param Data
63 Navigating Between Pages
64 Deleting a Recipe
65 There’s a Bug!
66 Injecting Ionic Controllers
67 Angular Components vs Ionic Components
68 Wrap Up
69 Useful Resources & Links
70 Why Use Angular
71 Creating a New Ionic Angular Project
72 Analyzing the Created Project
73 How Angular & Ionic Work Together
74 Adding & Loading a New Page
75 Using Angular Features on Ionic Components
76 Setting Up Angular Routes
77 Managing State with Services

Building Native Apps with Capacitor
78 Module Introduction
79 General Information
80 Creating an Android App
81 Running the App on a Real Android Device
82 Creating an iOS App
83 Running the App on a Real iOS Device
84 Wrap Up
85 Useful Resources & Links

86 Module Introduction
87 Error Messages & console.log()
88 Using the Browser DevTools & Breakpoints
89 Using VS Code for Debugging
90 Debugging the UI & Performance
91 Debugging Android Apps
92 Debugging iOS Apps
93 Wrap Up
94 Useful Resources & Links

Navigation & Routing in Ionic Apps
95 Module Introduction
96 Outputting Places
97 Adding Forward Navigation
98 Going Back with NavController
99 Navigating via Toolbar Buttons
100 Extracting the ID of Loaded Places
101 Adding a SideDrawer
102 Opening + Closing the SideDrawer
103 Adding Links & Switching Pages
104 How Routing Work In An Ionic + Angular App
105 Adding the Auth Service
106 Adding an Auth Guard
107 Opening a Modal
108 Closing the Modal & Passing Data
109 Wrap Up
110 Useful Resources & Links
111 Ionic Page Caching & Extra Lifecycle Hooks
112 Planning the Course Project
113 Creating Our App Pages
114 Adjusting Our Main Routing Configuration
115 Understanding Ionic Tabs
116 Adding Tabs to the App
117 Preparing Data & Services for the Project

Ionic Components Overview
118 Module Introduction
119 ion-text
120 Swipeable List Items
121 Swipeable Bookings
122 Understanding Virtual Scrolling
123 Implementing Virtual Scrolling
124 Virtual Scrolling Bugs
125 Adding Image Elements
126 Segmented Buttons
127 Adding a Spinner
128 Using the Loading Controller
129 Attributes & Slots
130 Using the ActionSheet Controller
131 Wrap Up
132 Useful Resources & Links
133 Ionic Grid Basics
134 Controlling Grid Column Sizes
135 Controlling Grid Alignment
136 Responsive Grid Sizing
137 Grid Summary
138 ion-list vs ion-grid
139 ion-label & ion-item

Styling & Theming Ionic Apps
140 Module Introduction
141 Adding Custom CSS Rules
142 Component-specific CSS Variables
143 Wrap Up
144 Useful Resources & Links
145 How Styling & Theming Works in Ionic Apps
146 Docs & Utility Attributes
147 Setting Global Theme Variables
148 Setting Global Styles
149 Setting All Colors at Once
150 Setting Platform-Specific Styles
151 Styling Core Components with Variables
152 Missing iOS Icons

Handling User Input
153 Module Introduction
154 Creating a Reactive Form
155 Syncing the Form to the Template
156 Finishing the New Offer Form
157 Edit Form Challenge
158 Adding the Edit Offer Form
159 Starting with the Booking Form
160 Working on the Book Place Template
161 Configuring the Date Controls
162 Validating & Submitting the Form
163 Wrap Up
164 User Input Requirements
165 Useful Resources & Links
166 Setting Up a Form Template
167 Adding a Template-driven Form
168 Handling Validation
169 Switching Between Auth Modes
170 Finishing the Auth Form
171 Starting Work on a New Offer Form
172 Finishing the Offer Form Template

Managing State
173 Module Introduction
174 Booking Places
175 Fixing a Bug
176 Canceling Bookings
177 Finishing Touches
178 Useful Resources & Links
179 What is State
180 Adding New Places
181 Using RxJS Subjects for State Management
182 Passing Data via Subjects & Subscriptions
183 UI State in Action
184 Updating Places
185 UI State with Bookable Places
186 Filtering & Navigation

Sending Http Requests
187 Module Introduction
188 Updating Places Correctly
189 Error Handling
190 Fetching Single Places
191 Adding a Booking
192 Fetching Bookings By User
193 Deleting Bookings
194 Wrap Up
195 Useful Resources & Links
196 How To Connect to a Backend
197 Setting Up Firebase
198 Sending Data via Http
199 Using Response Data
200 Fetching & Displaying Data
201 Updating Places
202 Fetching Data in Multiple Places
203 Loading Data in a Single Place

Adding Google Maps
204 Module Introduction
205 Displaying a Place Preview
206 Changing the Selection
207 Removing the Click Listener
208 Submitting the Location
209 Outputting Address & Map
210 Re-using the Maps Modal
211 Useful Resources & Links
212 API Setup
213 Adding a LocationPicker Component
214 Opening the Map Modal
215 Adding the Google Maps SDK
216 Rendering a Map
217 Picking Locations via a Click on the Map
218 Finding the Address for a Place
219 Fetching a Static Image URL

Using Native Device Features (Camera & Location)
220 Module Introduction
221 Detecting the Platform Correctly
222 Adding a Filepicker Fallback
223 Getting the Picked Image
224 Converting the Image String to a File
225 Storing the Image in the Form
226 Using PWA Elements
227 Improving the ImagePicker Component
228 Adding Server-side Image Uploading Code
229 Adding Image Upload
230 Wrap Up
231 Understanding Capacitor & Cordova
232 Useful Resources & Links
233 Using the Docs
234 Using Capacitor Plugins
235 Getting the User Location
236 Testing the Location Feature
237 Starting With the Image Picker
238 Taking Pictures
239 Avoid Distorted Pictures

Adding Authentication
240 Module Introduction
241 Fixing the Subscription
242 Using the userId Everywhere
243 Storing Auth Data in Device Storag
244 Adding Autologin
245 Using Autologin
246 Adding a Reactive Logout System
247 Adding Autologout
248 Requiring the Auth Token on the Backend
249 Sending the Auth Token to the Backend
250 More Token Usage
251 How Authentication Works
252 Optional Check Auth State When App Resumes
253 Wrap Up
254 Useful Resources & Links
255 Adding User Signup
256 Refactoring the Authentication Code
257 Adding User Login
258 Managing the User with a Subject
259 Storing the Token in Memory
260 Using the ID Observable Correctly
261 More userId Usage

Publishing the Apps
262 Module Introduction
263 Preparing App Configs
264 Custom Icons & Splash Screens
265 Android Deployment
266 iOS Deployment
267 Web Development
268 Useful Resources & Links

269 Course Roundup

[LEGACY] Getting Started
270 What’s [LEGACY]
271 Running your App on a Real Device
272 The Structure of this Course
273 How to get the Most out of this Course
274 Section Source Code & Links
275 Course Introduction
276 This Course & Angular 4
277 What is Ionic 2
278 Just to be safe What is Angular 2
279 Course Requirements
280 Creating your First App
281 Creating our first Ionic 2 Project and App
282 Changing our First App

[LEGACY] Mastering the Basics
283 Module Introduction
284 Creating a Page and how to Navigate to it
285 First Summary
286 An Alternative Way of Creating Pages
287 Passing Data between Pages
288 Popping Pages – Going Back
289 Time to Practice – Pages & Navigation – Problem
290 Time to Practice – Pages & Navigation – Solution
291 Saving Time with helpful Navigation Directives
292 Configuring Page Transitions
293 Understanding the Lifecycle of a Page
294 A different Way of Creating a New Project
295 The Page Lifecycle in Action
296 How to use the Ionic 2 Documentation
297 Styling the App and Setting a Theme
298 Using Utility Attributes
299 Module Summary
300 Section Source Code & Links
301 Other available Project Templates
302 Understanding the Structure of an Ionic 2 Project
303 How an Ionic 2 App Works
304 Pages vs Components
305 How Navigation works in an Ionic 2 App
306 Initializing Navigation in the AppComponent
307 ionic generate page XY Problems

[LEGACY] Favorite Quotes App (Navigation, Pages and Components)
308 Module Introduction
309 How to create more complex List Items
310 Passing the Quotes Data between Pages
311 Using the Ionic Cards Component
312 Using the Ionic Grid, Buttons and Styling Cards
313 Adding Custom Styles
314 Adding Alerts to the Application
315 Working with Angular 2 Services in the Ionic 2 App
316 Marking Quotes as Favorites by using a Service
317 Preparing the Favorite Quotes Page
318 Diving Deeper into List Items
319 What we’re going to build
320 Preparing a Modal Page
321 Presenting a Modal
322 Dismissing Modals
323 Passing Data to a Modal
324 Passing Data from a Modal back to the Page
325 Understanding ViewController Hooks
326 Must-Read Modal & willLeave
327 Receiving Modal Data by Using the ViewController
328 Updating the Favorite Quotes Page
329 Adding an Unfavorite Functionality to the App
330 Breaking the App into Pieces (Defining the App Structure)
331 Revealing extra List Item Options upon Sliding
332 Changing the overall App Theme
333 Adding a Sidemenu
334 How to change the Root Page
335 Adding a Menu Toggle Button to the Navigation Bar
336 Preparing the Settings Page
337 Creating and Using the Settings Service to Store Settings
338 Adding an Alternative Item Background
339 App Summary
340 Module Summary
341 Creating the required Pages
342 Section Source Code & Links
343 Multiple Stacks of Pages vs One Single Stack
344 Implementing Tabs Navigation with Multiple Stacks of Pages
345 Adding Quotes Data to the App
346 Using the Quotes Data
347 Using the Ionic List and List Item Components

[LEGACY] Ionic 2 Components – A Closer Look
348 Module Introduction
349 Understanding the Grid System
350 More than (click) – Using Gestures
351 Creating and Using Custom Components
352 Time to Practice – Components – Problem
353 Time to Practice – Components – Solution
354 Module Summary
355 Section Source Code & Links
356 Another Look at the Component Docs
357 Using and Styling Buttons
358 Understanding Lists
359 Understanding List Items and their Content
360 Configuring Lists
361 Item Groups and List Headers
362 Bonus How to create a re-orderable List
363 Ionic 3.0.0 and the Grid

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

[LEGACY] The Recipe Book App (User Input, Forms and Data Management)
371 Module Introduction
372 Creating a Form Template (for Template-Driven Approach)
373 Registering Controls (Template-Driven)
374 Submitting the Form (Template-Driven)
375 Validating the Form (Template-Driven)
376 Handling Data with a Model for our Ingredients
377 Managing Data with a Service (Shopping List Service)
378 Saving Items with the Shopping List Service
379 Displaying Items from the Shopping List
380 Removing Item from the Shopping List
381 Adding a New Recipe Button and Page Transition
382 What we’re going to build
383 Creating a Edit Recipe Form (Reactive Approach)
384 Creating the Reactive Form
385 Syncing Form and HTML (Reactive Approach)
386 Add Ingredients Management to the Form
387 Creating an Action Sheet
388 Creating a Dialog (Alert) with an Input Field
389 Managing Ingredient Controls in a FormArray
390 Wiring it all up
391 Removing Ingredient Controls
392 Using Toasts to Present Short Messages
393 Breaking the App into Pieces (Defining the App Structure)
394 Adding a Recipe Model and Service
395 Adding Recipes through a Service
396 Outputting Recipes
397 Displaying Recipe Details – Template
398 Displaying Recipe Details – Styling
399 Loading the Recipe Detail Page (and passing Data to it)
400 Loading the Edit Page (and passing Data to it)
401 Initializing the Edit Form
402 Updating the Recipe through a Service
403 Sending Ingredients to the Shopping List
404 Creating the required Pages
405 Finishing Steps
406 Module Summary
407 Section Source Code & Resources
408 Implementing a Tabs Navigation
409 Setting the App Theme
410 Planning the Next Steps
411 Forms Template-driven vs Reactive Approach
412 Understanding Ionic 2 Controls

[LEGACY] The Extended Recipe Book App (Auth and Http)
413 Module Introduction
414 Implementing the Signup Process
415 Showing a Loader (Spinner) and Error Alert
416 Implementing the Signin Process
417 Refining the Signin Page
418 Managing the User State
419 Logging Users Out & Fixing a Bug
420 How Firebase stores the Token
421 Adding a Popover Component
422 Fetching the Token
423 Ionic 3 and Http
424 What we’re going to build
425 Sending a PUT Request with the Auth Token
426 More about Tokens
427 Sending a GET Request to load Data
428 Polishing the App (Adding a Spinner and Error Handling)
429 Fixing the Error Handler
430 Storing and Fetching Recipes
431 Fixing Errors
432 Seeing the App run on a Real Device
433 Module Summary
434 Section Source Code & Links
435 Which New Features We’re Going to Add
436 Generating the Required Pages
437 Adding a Sidemenu
438 Creating the Signup Page (and Form)
439 Creating the Signin Page
440 How Authentication Works in an Ionic 2 (Mobile) App
441 Setting up Firebase (as a Development Backend)

[LEGACY] Awesome Places App (Native Device Features, Storage)
442 Module Introduction
443 Allowing the User to Place a Marker on the Map
444 Passing the Chosen Location back to the Page
445 Displaying the Chosen Location
446 Using Ionic Native 3 instead of 2
447 Using a Native Device Feature Geolocation to Locate the User
448 Polishing the Auto-Locate-Feature
449 Using a Native Device Feature The Camera
450 Displaying the Picture
451 Managing Data with the PlacesService
452 Configuring the Single Place Page
453 What we’ll build
454 Reflecting on our App
455 Using a Native Device Feature The File System (to manage Files)
456 Using the Device Storage Setting and Getting Data
457 Deleting stored Data and Files
458 Fixing the Fetching of Data
459 Fixing the Storage Issues
460 Extra How to Debug
461 Module Summary
462 Section Source Code & Resources
463 Generating the required Pages
464 Creating Models for Location and Places
465 Implementing Navigation
466 Filling the New Place Page with Life (incl. Template-Driven Form)
467 Using Angular Google Maps
468 Adding Google Maps to the App
469 Configuring our Maps

[LEGACY] Publishing Your App
470 Module Introduction
471 Deployment Considerations
472 Using Custom Icons & Splashscreens
473 Configuring the App
474 Build Preparations & Building for Production
475 Publishing the App in the Google Play Store
476 Publishing the App in the Apple AppStore
477 Module Summary
478 Section Source Code & Links

[LEGACY] Course Roundup
479 Course Roundup

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

[LEGACY] Angular Recap
485 Module Introduction
486 Module Summary
487 Section Source Code & Resources
488 What is Angular 2
489 Understanding the Project Structure and how the App Starts
490 Understanding Components & Templates
491 Understanding Databinding
492 Understanding Directives
493 Custom Property and Event Binding
494 Using Services & Dependency Injection
495 More on Angular 2

[LEGACY] Updating to Ionic 3 & Ionic Native 3
496 Ionic 3 Update Overview
497 Updating the Awesome Places App to Ionic 3 & Ionic Native 3
498 Ionic 3 Release Notes & Upgrade Guide

Bonus Content
499 Bonus More Content!