Ionic 4.0 Essential Training

Course details

Learn how to use Ionic to develop a highly performant mobile app that is compatible across the popular mobile and desktop operating systems. In this project-based course, Sani Yusuf walks through the ins and outs of the 4.0 framework. He shows how you can create a single code base that effectively works across iOS, Android, and Windows. First, Sani provides an overview of Ionic and introduces key features in the latest version of the mobile SDK. Then he takes you through the step-by-step process of building an app, including the setup process, working with templates, previewing apps on a device, developing UI and navigation components, working with Ionic Natives, connecting to the back end, and more.

Learning objectives
Ionic 4.0 features
Testing with Ionic Lab
Designing a home page
Generating services
Consuming REST APIs
Creating a data model
Using Ionic DevApp
Debugging
Using Ionic Native
Designing the profile page
Sharing to social media
Setting up Firebase

Concepts

0. Introduction

01 - Building cross-platform apps in Ionic
02 - What you should know
03 - Why Ionic 4.0

1. Setting Up the Environment

04 - Overview of the course app
05 - Installing Ionic
06 - Creating a tab-based application
07 - Testing on a browser
08 - Testing with Ionic Lab

2. Working with a Tab-Based Template

09 - Overview of Ionic UI components
10 - Designing the home page with cards
11 - Generating services
12 - Consuming REST APIs
13 - Consuming REST APIs - Implementing methods
14 - Creating a data model and interface
15 - Using a data model interface
16 - Finalizing the home page design

3. Working with UI Components

17 - Generating the Detail page
18 - Routing to the Detail page
19 - Retrieving movie Detail data
20 - Implementing the Detail page design
21 - Working with lists
22 - Using the skeleton component
23 - Working with modals and fabs
24 - Generating a movie detail page with modals
25 - Closing the modal window
26 - Debugging and the Elvis operator
27 - Adding an activity video to a modal
28 - Designing the Profile page

4. Connecting an App to Firebase Backend

29 - Intro to Firebase
30 - Setting up Firebase
31 - Designing a login page
32 - Implementing a login page
33 - Creating an auth service
34 - Authenticating with email and password
35 - Creating a login auth guard
36 - Implementing a tabs page guard
37 - Extending the FAB button
38 - Implementing favorites, part 1
39 - Implementing favorites, part 2
40 - Challenge - Toast notification
41 - Solution - Toast notification

5. Working with Complex Lists

42 - Creating a blank app
43 - Implementing sliding lists
44 - Understanding Ionic infinite scroll
45 - Adding pull to refresh

6. Advanced Ionic Components

46 - Creating an app with the sidemenu template
47 - Overview of the sidemenu template
48 - Implement a second side menu
49 - Implementing date time component
50 - The segment component
51 - Challenge - Popover
52 - Solution - Popover

Conclusion

53 - Next steps and recommendations

Ionic 4.0 Essential Training

Authors

Sani Yusuf