Home>Courses>Mastering Mobile Application Development with Ionic

Mastering Mobile Application Development with Ionic

Gain insights into Ionic's UI toolkit for cross-platform apps using HTML, CSS, and TypeScript. Explore CLI, CapacitorJS, and Stencil, culminating in deploying real-world apps to multiple platforms.

Intermediate

128 Lessons

39h 19min

Certificate of Completion

Gain insights into Ionic's UI toolkit for cross-platform apps using HTML, CSS, and TypeScript. Explore CLI, CapacitorJS, and Stencil, culminating in deploying real-world apps to multiple platforms.

AI-POWERED

Explanations

AI-POWERED

Explanations

This course includes

65 Playgrounds

12 Quizzes

Course Overview

What You'll Learn

Course Content

Course Overview

Ionic is an open-source UI toolkit for building cross-platform applications using HTML, CSS, and TypeScript. Integrating with popular front-end frameworks like Angular, React, and Vue, Ionic empowers you to build rich user experiences that you can deploy on the web, mobile, or desktop. This course is a comprehensive introduction to the core products and services of Ionic, emphasizing CLI, CapacitorJS, and Stencil Web Components. You’ll build on this foundation by exploring UI components, core features of T...Show More

What You'll Learn

A deep understanding of the Ionic ecosystem and its products and services.

The ability to build fully functional Ionic applications using Angular, Apache Cordova, Capacitor, and Stencil Web Components.

A working knowledge of the Ionic Animations API and its functions.

The ability to integrate third-party API services into your Ionic applications.

Hands-on experience building and deploying Progressive Web Apps (PWAs) using Ionic and Firebase.

Hands-on experience developing cross-platform apps for iOS, Android, Web, and Desktop.

A deep understanding of the Ionic ecosystem and its products and services.

Course Content

Introduction

4 Lessons

Get familiar with Ionic for cross-platform app development using a single codebase.

About This Course

Introduction to Ionic

Changes From Previous Versions of Ionic: Part 1

Changes From Previous Versions of Ionic: Part 2

The Ionic Ecosystem

10 Lessons

Discover the logic behind Ionic's ecosystem, including core tools, frameworks, and complementary technologies.

Core Tools and Technologies

TypeScript vs JavaScript

StencilJS

Capacitor

Ionic Products and Services

Quiz: Ionic Ecosystem

Beginning Ionic Development

3 Lessons

Explore the basics of creating an Ionic app and understanding its project structure.

Your First Ionic App

Project Structure of an Ionic App

Quiz: Beginning Ionic Development

Decorators and Classes

8 Lessons

Grasp the fundamentals of decorators, classes, components, directives, pipes, and interfaces in Ionic development.

Quiz: Decorators and Classes

Ionic Navigation

10 Lessons

Solve problems in Ionic navigation using Angular routing for optimized, efficient app navigation.

Overview of Navigation

Angular Router

Navigation Between Page Components

Accessing Navigation Data

Route Guards

Lifecycle Events

Additional Navigation Options

Navigation Through Tabs

Navigation Through a Side Menu

Quiz: Ionic Navigation

Templates

9 Lessons

See how it works to create and use Ionic templates for dynamic UI and navigation.

Introduction to Ionic Templates

The List UI Component

Event Binding

Angular Template Directives: ngFor

Angular Template Directives: ngSwitch, ngIf, ngStyle

Angular Template Directives: ngClass

Multi-line List

Sliding List

Quiz: Templates

Theming Ionic Apps

6 Lessons

Piece together the parts of theming Ionic apps, from platform-specific styling to custom CSS variables and colors.

Additional Theming Options

Quiz: Theming Ionic Apps

Awesome Cordova Plugins

5 Lessons

Try out Cordova plugins in Ionic apps for native features, image capture, and functionality enhancement.

Introduction to Awesome Cordova Plugins

Managing Plugins

The Camera Plugin

The Photos App

Quiz: Awesome Cordova Plugins

Capacitor

4 Lessons

Get started with Capacitor for integrating native features and plugins into Ionic apps.

Overview of Capacitor

Working With Capacitor

Using Capacitor Plugins

Quiz: Capacitor

10.

Working With Data

9 Lessons

Examine data retrieval, input methods, storage solutions, and the HttpClient service in Ionic.

Basics of Retrieving Data

Loading Data

Data Input Using NgModel

Data Input Using Reactive Forms

Template Driven Forms

Data Storage

Creating a Storage Service

Using Ionic Storage

Quiz: Working With Data

11.

Progressive Web Apps

5 Lessons

Enhance your skills in creating, deploying, and auditing Ionic Progressive Web Apps.

Introduction to Progressive Web Apps

Creating an Ionic PWA

Deploying to Firebase Hosting

Auditing an Ionic PWA

Quiz: Progressive Web Apps

12.

Animations

5 Lessons

Dig deeper into integrating and leveraging Ionic Animations to enhance app interactivity and performance.

Ionic Animations

Exploring Ionic Animations

The Application UI

Finishing Up

Quiz: Animations

13.

Stencil

6 Lessons

Investigate Stencil for creating reusable web components, enhancing development efficiency and SEO.

Overview of Stencil

Authoring Components With Stencil

Creating Custom Stencil Components

Using Custom Components in Stencil Applications

Stencil to Ionic/Angular

Quiz: Stencil

14.

Case Study: Working With APIs

4 Lessons

Build on integrating APIs with Ionic/Angular to create dynamic, user-friendly apps.

Overview

Generating Your API Key

The App Logic

Wrapping Up

15.

Case Study: My Movies

13 Lessons

Step through creating a cross-platform Ionic app utilizing TheMovieDB API for movie management.

Overview

Generating Your API Key

Rooting the Application

Using Capacitor Storage

Other Services

Retrieving Movie Genres

Rendering Movies

Credit Where Credit is Due

Listing Saved Searches

The Search Tab

The Saved Searches Tab

The Favorites Tab

Wrapping Up

16.

Case Study: AppyMapper

6 Lessons

Get started with developing AppyMapper, using Ionic, Capacitor, and interactive map features.

Overview

Laying the Foundations

Beginning Development

Handling Data

Bringing It All Together

Wrapping Up

17.

Case Study: Ionic Jukebox

6 Lessons

Go hands-on with developing a feature-rich MP3 player using Ionic and Angular.

Overview

Getting Started

Managing the Application Audio

Home Page Component

The Jukebox UI

Wrapping Up

18.

Refining Your Projects

5 Lessons

Enhance your skills in debugging, documenting, and optimizing code for efficient mobile app development.

Debugging and Profiling Apps

Documenting Your Code

Marking Up Your Files

Generating Documentation

Optimizing Code

19.

Conclusion

1 Lessons

Take a look at your achievements in mastering essential Ionic mobile app development skills.

Final Words

20.

Appendix

9 Lessons

Focus on configuring environments, NPM use, troubleshooting, app release, code signing, and app submission.

Configuring Your Environment

An NPM Primer

Troubleshooting Your Ionic App

Preparing Apps For Release

Code Signing For iOS

Code Signing For Android

Submitting Your iOS App to the Apple App Store

Submitting Your Android App to the Google Play Store

Further Resources

Course Author

James Griffiths

Trusted by 2.5 million developers working at companies

"These are high-quality courses. Trust me. I own around 10 and the price is worth it for the content quality. EducativeInc came at the right time in my career. I'm understanding topics better than with any book or online video tutorial I've done. Truly made for developers. Thanks"

Anthony Walker

@_webarchitect_

"Just finished my first full #ML course: Machine learning for Software Engineers from Educative, Inc. ... Highly recommend!"

Evan Dunbar

ML Engineer

"You guys are the gold standard of crash-courses... Narrow enough that it doesn't need years of study or a full blown book to get the gist, but broad enough that an afternoon of Googling doesn't cut it."

Carlos Matias La Borde

Software Developer

"I spend my days and nights on Educative. It is indispensable. It is such a unique and reader-friendly site"

Souvik Kundu

Front-end Developer

"Your courses are simply awesome, the depth they go into and the breadth of coverage is so good that I don't have to refer to 10 different websites looking for interview topics and content."

Vinay Krishnaiah

Software Developer

"I've tried probably 5-7 different sites and Educative is easily the best. It perfectly blends explanation with interactivity"

Eric Downs

Musician/Entrepeneur

Hands-on Learning Powered by AI

See how Educative uses AI to make your learning more immersive than ever before.

Instant Code Feedback

Evaluate and debug your code with the click of a button. Get real-time feedback on test cases, including time and space complexity of your solutions.

AI-Powered Mock Interviews

Put your skills to the test in a simulated interview setting. Receive personalized feedback based on your performance. Available in Premium & Premium Plus plans.

Adaptive Learning

At various checkpoints throughout Educative courses, you will be prompted to take a quick assessment. Receive a condensed curriculum tailored to your strengths and skill gaps.

Explain with AI

Select any text within any Educative course, and get an instant explanation — without ever leaving your browser.

AI Code Mentor

AI Code Mentor helps you quickly identify errors in your code, learn from your mistakes, and nudge you in the right direction — just like a 1:1 tutor!

Free Resources

FOR TEAMS

Interested in this course for your business or team?

Unlock this course (and 1,000+ more) for your entire org with DevPath