practical-ionic-book

Learn to build complex Ionic apps

It's difficult to implement best practices and connect functionality based on simple tutorials.

Learn to build a real world app using Ionic, Capacitor and Firebase with this practical, step-by-step guide.

Ionic apps are more than components

Building a successful Ionic application depends on the combination of multiple technologies and skills. Tutorials alone won't help you solve these complex scenarios.

If you want to deliver value with a real application, you need to know the details about Ionic components, how to route and secure your app, how to implement features like social authentication or push notifications and how to build your unique app features based on all of this.

Practical Ionic

Technologies

Ionic
Use the full power of Ionic, tweak components with CSS variables and make everything run smooth with Angular.

Capacitor
Tap into native device functionalities while maintaining the ability to run on the web - get the best out of using Capacitor.

Firebase
Create a powerful backend with user authentication, data and file storage and push notifications without any backend skills needed.

Take a look at what's inside

Practical Ionic

with a FREE chapter.

practical-ionic-book

Testimonials

What They Say about Simons work

"I wanna thank you for everything you share. You gave me an opportunity to earn money for doing what I like most for almost 2 years now."

“Simon, there will be a statue of you built somewhere some day. Your videos are simply the best.”

“I found it just before I was going to throw my pc out of the window and leave behind this developer life and go to live in a forest!”

"I have greatly improved my knowledge and today I can develop more complex applications."

Content​​​​

What’s Inside the Book?

Social Signup

Integrate social providers like Google and Apple to provide OAuth sign up flow for your users convenience.

Firebase Collections & Docs

Learn to work with collections and documents from your Firestore database.

Cloud Functions

Create your own cloud functions running in Firebase to transform your database and react to triggers.

Authentication

Make your app & backend secure by using guards and rules that protect private user data.

File Upload

Implement file upload with Angular and store your documents in the cloud.

Push Notifications

Send out automatic push notifications and implement the correct handling with Capacitor.

Routing

Implement advanced routing concepts used in real world applications.

Language Features

Use RxJS to transform your data, add dynamic styling with Angular and work with custom components.

Algolia Search

Add real search capabilities using Algolia in combination with Firebase functions.

About the Author

Simon Grimm

Simon Grimm has been teaching Ionic tutorials over 5 years since version 1. He's now an Ionic Community Expert, teaching thousands of people through the Ionic Academy, writes on his blog Devdactic and built a YouTube channel with 30.000 subscribers.


With more than 50 video courses Simon knows about the nuts & bolts of using the Ionic Framework and all of its components.

Build real functionalities

Connect your app with Firebase and learn to work with complex connected data inside a real world app. We'll go far beyond hello world and create useful cards application with collaboration between users!

All details explained

File upload, Capacitor usage, nested lists or modal navigation - we will integrate all the small but important components inside one app. Each step is covered in detail with code snippets and additional information you need for future apps.

Master Ionic components

We don't want to simply use Ionic components, we want to understand how to fine tune them and make them work for us! We'll go into details about different components, use CSS variables and inputs to build a beautiful app together.

Table of Contents

Want to know all about the book?

1

Introduction & Sign up

We'll start with a blank app and integrate Firebase into our app. We craft a beautiful introduction screen, from which users can sign in or sign up. Additionally, we will use some cool modal navigation to make the flow feel natural!

2

Sign in with X

If you add any social sign in to your app, Apple requires you to add the Sign-In with Apple as well. Therefore, we will not only include Google sign in but also Apple, and handle all of this with native Capacitor plugins to make the process as smooth as possible. And of course we'll go through the configuration of each of these step by step!

3

Routing & Security

Since the app has a protected area, we need a powerful routing that gives enough flexibility for changes later, but also secures the routes from unauthorised access.

4

Firebase Storage

We want to upload documents, and the Storage of Firebase is the easiest way to host and show your files. All of this will be done using Capacitor, so we can even test out our app right inside the browser.

5

Data Management & RxJS

To retrieve specific data, you need advanced knowledge about RxJS. Just one collection of Firebase isn't always enough, so we will integrate powerful queries and learn about the benefits of reactive programming.

6

Cloud Functions & Algolia Search

We want to use the full power of Firebase and add our own Cloud Functions, which will be used in combination with Algolia to create a search index that we can use right from our app for real full text search.

7

Drag & Drop

Did you know there's a drag and drop component in Ionic? Or did you know that you can zoom in and out of slides? We will dive into the usage of different Ionic components and get the most out of them!

8

Push Notifications

The classic lesson, but for us it's not enough to simply add push notifications - we will even trigger the through cloud functions so users can get automatic notifications!

9

Firebase Security Rules

We have security concepts in our app, but the real security always happens on the backend side, which is Firebase in our case. With complex rules and data from multiple documents we are able to build out powerful rules to make sure all data of our app is protected.

10

Native App Builds & Submission

We'll wrap up the book with native builds for both iOS and Android using the tooling of each platform, since this is exactly the philosophy of Capacitor. Finally we will make sure that we are able to upload our app to the app store by going through signing and bundle builds with the given tools.

Upgrade Your Package

I've got you covered with some epic additional material to speed up your development of real world applications.


You can select from 3 different packages: Essential, Advanced and Ultimate.


All higher packages contain the material from the previous package plus more!

Additional Templates

Start your next app faster with these awesome templates

Advanced Package

With the advanced package you get an app template to show you the implementation of a roles authentication concept inside your Ionic app with Firebase. The package makes use of guards and a custom directive to show/hide certain elements of your app based on specific roles and permissions of a user - ready to use as the base for your next project.

Ultimate Package

The ultimate package comes with a full blown chat application template based on Firebase. Create users, create groups and chat with other users in real time using the Firestore database. You can even attach images inside the chat group using Capacitor (form a device and inside the browser!)


Feel free to use the whole code in your own apps!

Additional Guides

Enjoy these bonus guides for in depth knowledge on related topics

Firebase Extensions

Advanced & Ultimate

Did you know Firebase has blocks of code that you can easily add to your app? Learn to use extensions to save valuable time on default functions!

Firebase Callable Functions

Ultimate

Learn to write your own cloud API by using callable functions of Firebase, a construct to create standard endpoints inside your app.

Capacitor Plugin Development

Advanced & Ultimate

If you want full control, you need to know how to build your own Capacitor plugin in case you need specifc device functionalities.

Firebase Local Emulator UI

Ultimate

Speed up your local development by using a local emulator of Firebase with functions and database support to test things inside your own environment.

One more thing..

AppstoreKit Free Export

I've developed a tool to help you create beautiful app store preview images, and with the purchase of the advanced & ultimate package you can use it for free!


With the purchase of the Advanced package, you get 1 free export of your screenshot designs (value $10) from the AppstoreKit.


With the Ultimate package you receive 3 free exports of the AppstoreKit (value $30).

Kickoff Ionic Discount

Kickoff Ionic helps to bootstrap your whole Ionic app faster. Define data models, add powerful snippets or pre made designs for your app and kickstart your app development.


With the Ultimate package you receive a $30 discount on the annual Kickoff Ionic subscription!

Pick Your Package

​Select from three packages to set you up for success.
All future updates included. 14 day refund policy.

👨‍💻 Essential

$39

The basic package - the book.

practical-ionic-book
  • The "Practical Ionic" PDF
  • MOBI and Epub format
  • Source code of the app

🔥 Ultimate

$119

The full power of Firebase,

2 additional App templates,

4 written guides and 

Kickoff Ionic discount!

practical-ionic-book
  • The "Practical Ionic" PDF
  • MOBI and Epub format
  • Source code of the app
  • App Template: Firebase Roles Authentication
  • Guide: Firebase Extensions
  • Guide: Capacitor Plugins
  • 3 Free AppstoreKit Export (value $30)
  • App Template: Firebase Chat
  • Guide: Callable Functions
  • Guide: Firebase Local Emulator UI
  • $30 Discount Kickoff Ionic

⚡️Advanced

$69

The essential book plus

1 roles app template,

2 additional guides and

AppstoreKit free export.

practical-ionic-book
  • The "Practical Ionic" PDF
  • MOBI and Epub format
  • Source code of the app
  • App Template: Firebase Roles Authentication
  • Guide: Firebase Extensions
  • Guide: Capacitor Plugins
  • 1 Free AppstoreKit Export (value $10)

FAQ: 

Here you can find the most frequent asked questions.

Is this a physical book?

No, not at the moment. You receive a package with a PDF, epub and MOBI version of the Practical Ionic book.

Can I contact you when I am stuck?

Of course! Feel free to ping me on Twitter at any time.

Can I use the templates for my own apps?

Yes, 100%! You can use all code from the apps like it is your own.

What if I don't like the book?

If you are unhappy about your purchase, you can get back your money within the first 14 days.

Which Ionic version is used?

The book uses Ionic version 5.

Do you offer a React version?

No, this book only uses Angular and was not created for React or Vue.

Take a look at what's inside

Practical Ionic

with a FREE chapter.

practical-ionic-book