Tel. 02-570-8449 Mobile 088-807-9770 Payment
Mon–Fri 9:00–17:00 @itgenius
IT Genius Institute
IT Genius Institute
CoursesWorkshopSchedule
For business
In-house trainingAI Transformation (TH)Government training (TH)Development servicesTraining room rental
Articles
About us
About IT GeniusInstructorsPortfolioOur clientsPayment methods
Contact usOnline
Theme
Language
THENLA
Ask about a coursePick whichever channel suits you
LINE @itgeniusFastest reply · Mon–Fri 9:00–17:00
Call us
02-570-8449Office088-807-9770Mobile
Email & social
contact@itgenius.co.thFor quotations and documentsFacebookitgeniusonlineYouTubeitgeniusengPlan training for your team
Home / Courses / Mobile Apps / Detail
Mobile Apps · MBC-13

Advanced Cross-Platform Apps with Ionic and Capacitor

Advanced Cross-Platform Apps with Ionic and Capacitor is an advanced course that takes Ionic and Capacitor apps into production work, covering Firebase authentication and realtime data, push notifications from your own backend, secure web APIs, offline-first storage with SQLite, maps and native device features. It suits web and mobile developers who already build Ionic apps.

Updated
Advanced Cross-Platform Apps with Ionic and Capacitor
From 11,250 THB / person 12,500 −10% excl. VAT 7% · group rates available
Corporate training quote Join the waiting list
PDFDownload the course outline
  • Duration30 hours · 5 days
  • FormatOnsite / live online
  • Next roundOn request
  • CertificateIncluded

Course overview

Once an Ionic app goes into real use, the work gets harder straight away: sign-in through several providers, data that must update in real time, notifications sent from a backend, working without a connection, and device features that go deeper than the camera or location. Many examples online are still written with Cordova, deeply nested callbacks or Firebase and FCM APIs that have since been retired, so they cannot be used in current projects.

This new edition builds on Cross-Platform Mobile Apps with Ionic and Capacitor and uses Ionic 9, Capacitor 8 and standalone Angular 22. Learners structure a large app, connect Firebase Authentication, Firestore and Cloud Storage, send push notifications through the FCM HTTP v1 API, design a secure web API, store data offline-first with SQLite, and add Google Maps, charts and multiple languages before bringing everything together in several real app workshops. (5 days, 6 hours per day, 30 hours in total, Advanced level.)

What you’ll gain

  • Structure large Ionic apps and write asynchronous code cleanly with async/await, RxJS and signals
  • Build sign-in with Firebase Authentication and manage real-time Firestore data with Security Rules
  • Send push notifications to Android and iOS from your own backend through the FCM HTTP v1 API
  • Design a secure web API with JWT and connect it to the app through an interceptor
  • Store data offline-first with SQLite and sync with the server once back online
  • Manage images and files on the device and upload multiple files to a web service
  • Use Google Maps, real-time charts and multi-language support
  • Call advanced native APIs such as biometrics, barcode scanning and Bluetooth Low Energy through Capacitor plugins

Who this course is for

  • Learners who have completed basic-to-intermediate Ionic and Capacitor, or have equivalent experience
  • Web and mobile developers who maintain Ionic apps in production
  • Programmers who need to connect mobile apps to Firebase, web APIs and backend systems
  • IT managers and team leads who want a production-ready approach to hybrid apps

Prerequisites

  • Completion of basic-to-intermediate Ionic and Capacitor, or experience building Ionic apps with Angular
  • Able to write HTML, CSS and TypeScript and use the Angular Router, services and HttpClient
  • Able to design and use a database such as MySQL or SQLite, and use the command line
  • A Google account for Firebase and an Android phone or iPhone for testing (building for iOS requires a Mac with Xcode)

Curriculum

Course Details

This course is a 2026 edition that replaces the previous advanced Ionic Framework course and builds on Cross-Platform Mobile Apps with Ionic and Capacitor. It has been rewritten for Ionic 9, Capacitor 8 and standalone Angular 22. It runs for 5 days, 6 hours per day (30 hours in total, 09:00-16:00), as lectures alternating with labs and workshops throughout. Advanced level. It suits people who already build Ionic apps and need Firebase, push notifications, secure web APIs and offline data in real projects. Learners build a news app, a stock scanning app and a reporting module, and take home a lab guide and source code.

Day 1 Large-App Structure and Firebase

Section 1: Lab: Structuring a Large Ionic App

  • Review an Ionic 9 standalone Angular project and what changed from earlier versions
  • Feature-based folders, lazy-loaded routes and functional guards
  • Keep app state in signal-based services and separate settings by environment
  • Configure capacitor.config.ts and live reload on a real device
  • Lab: the starter app used throughout the course

Section 2: Lab: Advanced Async with async/await, RxJS and Signals

  • From nested callbacks to readable promises and async/await
  • Common RxJS operators: switchMap, mergeMap, debounceTime and retry
  • Convert between observables and signals with toSignal and toObservable
  • Recursive and one-at-a-time processing without freezing the app, with error handling
  • Lab: search-as-you-type that cancels outdated requests

Section 3: Lab: Sign-In with Firebase Authentication

  • Create a Firebase project and register Android, iOS and web apps
  • Sign in with email, Google Sign-In and phone OTP through a Capacitor plugin
  • Track sign-in state with signals and protect pages with guards
  • Password reset, email verification and sign-out
  • Lab: login and registration screens that work on the web and on phones

Section 4: Lab: Real-Time Data on Firestore and Security Rules

  • Choose between Cloud Firestore and the Realtime Database
  • CRUD and real-time listening with onSnapshot
  • Queries, ordering and paging
  • Write Security Rules so users reach only their own data, and validate data shape
  • Test the rules with the Firebase Emulator Suite before going live
Day 2 Cloud Storage, Push Notifications and Web APIs

Section 5: Lab: Uploading Files with Cloud Storage for Firebase

  • Upload images and files with a progress indicator
  • Get download URLs for display and save the links in Firestore
  • Storage Security Rules: size limits, file types and ownership
  • Share content to other apps with the Share plugin
  • Lab: a personal photo album that syncs across devices

Section 6: Lab: Push Notifications with Firebase Cloud Messaging

  • How FCM and APNs work for Android and iOS
  • Install the Push Notifications plugin, request permission and get the device token
  • Create an APNs authentication key and configure it in Firebase for iOS
  • Android notification channels and handling foreground and background messages
  • Open the relevant screen when the user taps a notification

Section 7: Lab: Sending Push Messages from a Backend with the FCM HTTP v1 API

  • Create a service account and obtain an OAuth 2.0 access token on the server
  • Send messages from PHP or Node.js to one device, a group or a topic
  • Design the data payload and customise images, sounds and display
  • Store tokens in the database and remove expired ones
  • Lab: a backend that notifies customers about their orders

Section 8: Lab: Designing a Secure Web API for Apps

  • Design a RESTful API in Node.js or PHP backed by MySQL
  • Authenticate with JWT access tokens and refresh tokens
  • Attach tokens with an HTTP interceptor and renew them automatically
  • Prevent data leaks: HTTPS, CORS, input validation and rate limiting
  • Improve performance with paging, compression and caching
Day 3 Offline Database, Files and Uploads

Section 9: Lab: An Offline Database with SQLite

  • Install and configure the Capacitor Community SQLite plugin
  • Set up browser testing of the database during development
  • Versioned table migrations and transactions
  • Write CRUD in a service with async/await
  • Lab: a field-work app that keeps working without a signal

Section 10: Lab: Offline-First Design and Data Sync

  • Check network status with the Network plugin
  • Queue changes made offline and send them to the API once back online
  • Decide how to resolve conflicts and show sync status to users
  • Compare with Firestore offline persistence
  • Lab: sync field work with the web API

Section 11: Lab: Managing Images with Camera and Filesystem

  • Take photos and pick several images from the gallery with the Camera plugin
  • Resize, compress and rotate images before saving
  • Store files with the Filesystem plugin and keep their paths in SQLite
  • Show images from files and Base64 data, and delete unused files
  • Lab: attach evidence photos to field work offline

Section 12: Workshop: Uploading Multiple Files to a Web Service

  • Write an API that accepts multiple files and records them in the database
  • Upload one at a time and in parallel with a progress bar
  • Retry failed uploads and resume when back online
  • Open the results with the Browser plugin
  • Workshop: submit field work with photos to the back office
Day 4 Maps, Charts, Languages and Native APIs

Section 13: Lab: Google Maps with Capacitor

  • Get an API key from Google Maps Platform and restrict its use
  • Create a map with the Capacitor Google Maps plugin on a real device
  • Read coordinates with Geolocation and save latitude and longitude to the database
  • Show multiple markers from the database with custom icons and details
  • Group markers with clustering, and Lab: a nearby branches map

Section 14: Lab: Charts and Real-Time Dashboards

  • Build bar, line and doughnut charts with Chart.js in a standalone component
  • Create an Angular directive to reuse charts across pages
  • Plot data from the API and refresh when it changes
  • Update charts in real time over WebSocket
  • Lab: a daily sales dashboard

Section 15: Lab: Multi-Language Apps (i18n)

  • Choose a translation library for Angular and install it
  • Keep each language's text in JSON files and use it in templates
  • Design a language picker and remember the choice with the Preferences plugin
  • Default to the device language on first launch
  • Format dates, numbers and currency for each language

Section 16: Lab: Advanced Native APIs through Capacitor Plugins

  • Sign in with a fingerprint or face (biometric authentication)
  • Scan barcodes and QR codes with the camera
  • Connect to Bluetooth Low Energy devices and read values
  • Play audio in the app and add ads with AdMob
  • Use Cordova plugins that have no Capacitor version yet, and the caveats
Day 5 Real-World App Workshops

Section 17: Workshop: A News App Connected to a Web API

  • Prepare the database and build a web API that returns news as JSON
  • A news list with ion-list, skeletons, pull to refresh and infinite scroll
  • A news detail page with sharing and saving for offline reading
  • Notify readers of new stories with push notifications
  • Build and run on real devices through Android Studio and Xcode

Section 18: Workshop: A Barcode Stock Scanning App

  • Prepare a stock database and a web API that finds products by barcode
  • Scan a product code and show its details and remaining quantity
  • Record goods in and out, keeping entries on the device while offline
  • Sync entries with the server and show the sync result
  • Test on a real device and fix the problems found

Section 19: Workshop: Reports and Data Export

  • Load weekly, monthly and yearly report data from the web API
  • Show bar, line and doughnut charts for the chosen period
  • Export data to PDF and CSV and compress it into a ZIP file
  • Save files on the device and pass them on with the Share plugin

Section 20: Workshop: LINE Notifications and Payment QR Codes

  • Send notifications to LINE groups and one-to-one chats with the LINE Messaging API instead of LINE Notify
  • Generate payment QR codes from amounts in the app
  • Combine the features into one app and run a pre-release checklist
  • Present your work, review it together and plan future Capacitor upgrades

Schedule & training options

For individuals — public rounds

No public rounds are open right now. Join the waiting list and we will contact you first when the next round opens, or ask us on LINE. Or call 02-570-8449 or 088-807-9770

Join the waiting list Ask about rounds

For organisations — in-house / private

  • Tailor the content to your team’s tools and projects
  • Your dates, at your office or live online
  • Quotation with tax ID for procurement
Corporate training quote

Instructors

Frequently asked questions

How do you send push notifications to Android and iOS apps with Firebase Cloud Messaging?

Create a Firebase project and register the Android and iOS apps. Install Capacitor's Push Notifications plugin to request permission and get the device token, then store the token on your server. On the server, use a service account to obtain an access token and call the FCM HTTP v1 API from PHP or Node.js to send a message with its data payload. For iOS you must also create an APNs authentication key and upload it to Firebase before messages can reach devices.

What are Firebase Security Rules, and why do you need them?

Security Rules decide who can read or write data in Firestore, the Realtime Database or Cloud Storage. Because mobile apps talk to the database directly, leaving access open lets anyone read your data. The usual approach is to require sign-in through Firebase Authentication, limit each user to their own records by comparing the uid with the owner, validate the shape of data before it is saved, and test the rules with the Emulator Suite before going live.

How do you make an Ionic app work offline-first with SQLite?

Install a Capacitor SQLite plugin, open the on-device database when the app starts, create tables through versioned migrations and write CRUD in a service with async/await. The app always reads and saves locally first. Changes made offline are queued and sent to the web API when the Network plugin reports that the device is back online, with a clear rule for resolving conflicts. During development the database can also be tested in a web browser.

Can I still use Cordova plugins in current Ionic apps?

Current Ionic apps use Capacitor as the native runtime, and you should always look for a Capacitor plugin first, either an official one or one from Capacitor Community, which together cover most needs such as the camera, files, maps, push and SQLite. Capacitor still supports many Cordova plugins for cases with no alternative, but you need to check compatibility and test on real devices each time. This course explains how to choose and what to watch for.

Who is the Advanced Cross-Platform Apps with Ionic and Capacitor course for, and what should I know beforehand?

It suits web developers, mobile developers and programmers who already build or maintain Ionic apps and need to connect them to Firebase, web APIs and backend systems. You should have completed basic-to-intermediate Ionic and Capacitor or have built Ionic apps with Angular, write TypeScript and use the router, services and HttpClient, and be comfortable with a database such as MySQL or SQLite and the command line.

What will I be able to do after the Advanced Cross-Platform Apps with Ionic and Capacitor course?

You will be able to structure a large Ionic app, build sign-in with Firebase Authentication, manage real-time Firestore data with Security Rules, send push notifications from a backend through FCM HTTP v1, design a secure web API with JWT, store data offline-first with SQLite, upload multiple files, use Google Maps, charts and multiple languages, and call advanced native APIs. Participants who complete the training receive a Certificate of Completion with its own number, which can be verified online.