Ionic 4.0 Essential Training

Learn how to develop a single code base using the Ionic 4.0 SDK to ensure your app is compatible across the popular mobile and desktop operating systems.

Introduction

• Building cross-platform apps in Ionic
• What you should know
• Why Ionic 4.0?

1. Setting Up the Environment

• Overview of the course app
• Installing Ionic
• Creating a tab-based application
• Testing on a browser
• Testing with Ionic Lab

2. Working with a Tab-Based Template

• Overview of Ionic UI components
• Designing the home page with cards
• Generating services
• Consuming REST APIs
• Consuming REST APIs: Implementing methods
• Creating a data model and interface
• Using a data model interface
• Finalizing the home page design

3. Working with UI Components

• Generating the Detail page
• Routing to the Detail page
• Retrieving movie Detail data
• Implementing the Detail page design
• Working with lists
• Using the skeleton component
• Working with modals and fabs
• Generating a movie detail page with modals
• Closing the modal window
• Debugging and the Elvis operator
• Adding an activity video to a modal
• Designing the Profile page

4. Connecting an App to Firebase Backend

• Intro to Firebase
• Setting up Firebase
• Designing a login page
• Implementing a login page
• Creating an auth service
• Authenticating with email and password
• Creating a login auth guard
• Implementing a tabs page guard
• Extending the FAB button
• Implementing favorites, part 1
• Implementing favorites, part 2
• Challenge: Toast notification
• Solution: Toast notification

5. Working with Complex Lists

• Creating a blank app
• Implementing sliding lists
• Understanding Ionic infinite scroll
• Adding pull to refresh

6. Advanced Ionic Components

• Creating an app with the sidemenu template
• Overview of the sidemenu template
• Implement a second side menu
• Implementing date/time component
• The segment component
• Challenge: Popover
• Solution: Popover

Conclusion

• Next steps and recommendations