What you’ll learn

  • Understanding Web Components and Stencil
  • Ionic 4 list component with infinite scrolling and pull-to- refresh
  • Data persistence with Firebase Cloud Firestore
  • App publishing


Developing mobile apps is an interesting yet challenging task. Different mobile platforms have their own ecosystems. If you want to start building your own mobile apps, you have to learn new programming languages, frameworks, libraries, and tools. Building complicated mobile apps or games requires a lot of experience. These kinds of apps may not be suitable for beginners. But not all mobile apps are complicated. There are still many mobile apps that are content-centric. This kind of app focuses on content presentations and doesn’t use many native features. For these kinds of apps, PhoneGap and its successor Apache Cordova offer a different way to build them.

Mobile platforms usually have a component called WebView to render web pages. Cordova uses this component to create a wrapper for running web pages inside of native apps. Cordova provides different wrappers for different platforms. The web pages become the mobile apps to develop. After using Cordova, developers can use front-end skills to create cross-platform mobile apps. This empowers front-end developers to create good enough content-centric mobile apps. Many other frameworks build on top of Cordova to provide out-of-box components to make building mobile apps much easier.

This course focuses on the latest version 4 of the popular Ionic framework. The best way to learn a new framework is using it in real-world product development.

We’ll build a Hacker News client app using Ionic 4 and use this as the example to demonstrate different aspects of Ionic 4. This course not only covers the implementation of the Hacker News client app, but also the whole development life cycle, including development, unit tests, end-to-end tests, continuous integration, and app publish.

Most of the nontrivial mobile apps need back-end services to work with them. Using mobile apps back-end services is a new trend that eliminates the heavy burden to write extra code and maintain the backend infrastructure. Google Firebase is a popular choice of mobile apps back-end services. The Hacker News client app uses Firebase to handle user authentication and storage of user favorite’s data. After going through this course, you should be able to integrate Firebase in your own apps.

Topics Included in This Course

This course is organized around building the Hacker News client app.

Starting from the local development setup, each chapter focuses on implementing a user story. Here are some important topics:

• Understanding Web Components and Stencil

• Ionic 4 list component with infinite scrolling and pull-to- refresh

• State management with NgRx

• Routing with Angular Router

• User management and third-party service logins with Firebase

• Data persistence with Firebase Cloud Firestore

• Unit testing with Karma and end-to-end testing with Protractor

• App publishing

• Features provided by Ionic Pro, including Ionic Deploy and Monitor

Below are the versions of main frameworks, libraries, and tools used in the app.

• Angular – 6.1.10

• RxJS – 6.3.3

• NgRx – 6.1.0

• Firebase – 5.5.4

• AngularFire2 – 5.0.2

• Jasmine – 3.2.0

• Karma – 3.0.0

• Protractor – 5.4.1

How This Course Is Organized

This course is organized around building the example Hacker News client app with Ionic 4 and Firebase. Below is a brief description of all the chapters in this course.

• Chapters 1–4: Introduction of necessary background knowledge and local development environment setup.

• Chapters 5–11: Implementation of all user stories of the example app with Ionic 4 and Firebase.

• Chapters 12–15: Additional topics related to Ionic.

Depending on your skill level, you can choose to skip some of these chapters. If you are an experienced Angular developer, you can skip the first four chapters.

Link description