Welcome

Step-by-Step Introduction to the [Ionic] Mobile Framework

created by Anthropic’s AI Claude at the request of Serge Tahé - October 2026


|French version|

This course teaches you, step by step, how to build a mobile app using the Ionic framework, combined with Angular and Capacitor: an Android app whose screens are rendered on the phone using JSON data from a server. It is a web app (HTML, CSS, TypeScript) that Capacitor packages into an Android app—the same code also runs in a browser.

After setting up the development environment, the course draws on 25 short examples, each focused on a single concept: Ionic components, signals and computed properties, templates, events, all types of fields, validation, and reactive forms; component inputs and outputs, content rendering, the lifecycle, dependency injection, directives, and Ionic windows; routing with ion-tabs and guards; asynchronous operations and shared state (Promise, Observable, resource, services, and signals, @capacitor/preferences); internationalization; and finally, server communication (HttpClient, development proxy, native requests on Android, token cookies).

The server is treated as a black box: it is the JSON server for the RdvMedecins application, written with NestJS. We install it, study its API, and query it using 48 curl examples, without having to read its code.

Next comes a comprehensive case study: the Ionic client for RdvMedecins, an appointment-scheduling app for a medical practice, with all files fully commented, followed by its deployment to the web and Android.

Prerequisites: the basics of Angular and TypeScript, covered in the courses “Step-by-Step Introduction to the Angular Framework” and “Introduction to the TypeScript Language Through Examples.” The 25 examples have the same numbers and show the same screens as those in the Flutter, React, and Vue.js courses.

All courses by AI Claude and Serge Tahé