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-10

Cross-Platform Mobile Apps with Ionic and Capacitor

Cross-Platform Mobile Apps with Ionic and Capacitor is a course in building mobile apps with HTML, CSS and TypeScript alongside Angular, Ionic and Capacitor, from screen design and REST API data to the camera and QR code scanning. It suits web developers, mobile developers and programmers, and you leave able to build your own app for Google Play and the App Store.

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

Course overview

Teams that already have web developers often want Android and iOS apps without maintaining two codebases. Ionic Framework with Capacitor fits that need well: you use the HTML, CSS and TypeScript you know, get UI components that look and behave like a mobile app, and reach device features such as the camera, location and notifications through plugins. Yet many examples online still use Cordova and older NgModule-based Angular, so beginners run into problems when they apply them to current projects.

This new edition is updated for Ionic 9, Capacitor 8 and Angular 22. It takes learners from installing the tools and a refresher on TypeScript and standalone Angular to building screens with Ionic components, navigation and forms, loading data from a REST API backed by MySQL, storing data on the device and running the app on a real phone. Learners then use Capacitor plugins for the camera, location and QR code scanning, create icons and splash screens, and build the app for Google Play and the App Store. (4 days, 6 hours per day, 24 hours in total, Beginner to Intermediate level.)

What you’ll gain

  • Understand cross-platform apps and the roles of Ionic and Capacitor, including their limits compared with native apps
  • Install and configure the development tools on Windows or macOS
  • Write the TypeScript and standalone Angular with signals needed to build Ionic apps
  • Design screens with Ionic components and build tab and side-menu navigation
  • Build validated forms and exchange data with a REST API backed by MySQL
  • Store data on the device with Capacitor Preferences and SQLite
  • Use Capacitor plugins for the camera, location, QR code scanning and notifications
  • Prepare icons and splash screens and build apps for Google Play and the App Store

Who this course is for

  • Web developers who want to build mobile apps with the web skills they already have
  • Programmers and mobile developers who want Android and iOS apps from one codebase
  • IT managers and team leads who want to understand cross-platform app development
  • Anyone with web basics who wants to build their own app

Prerequisites

  • Some experience with HTML, CSS and JavaScript
  • No previous mobile or Angular experience is needed, as the basics are covered
  • Comfortable using Windows or macOS and installing software
  • Building and testing for iOS requires a Mac with Xcode

Curriculum

Course Details

This course is a 2026 edition that replaces the previous basic-to-intermediate Ionic Framework course. It has been rewritten for Ionic 9, Capacitor 8 and standalone Angular 22. It runs for 4 days, 6 hours per day (24 hours in total, 09:00-16:00), as lectures alternating with labs and workshops throughout. Beginner to Intermediate level. It suits people with HTML, CSS and JavaScript basics who want Android and iOS apps from a single codebase. Learners build apps that load data from a REST API, store data on the device, use the camera, location and QR code scanning through Capacitor plugins, run on real phones and are built for store release. They take home a lab guide, source code and app templates.

Day 1 Getting Started with Ionic, Capacitor and Angular

Section 1: Cross-Platform Apps with Ionic and Capacitor

  • Native, cross-platform and hybrid apps, and when to choose each
  • Ionic Framework as the UI component kit and Capacitor as the native runtime that replaces Cordova
  • App architecture: a web app running in a WebView that calls native APIs through plugins
  • Strengths and limits of this approach, such as heavy graphics and OS-specific features
  • Overview of current versions: Ionic 9, Capacitor 8 and the supported Angular releases

Section 2: Lab: Installing the Tools on Windows and macOS

  • Install Node.js LTS, Git and VS Code with the Ionic extension
  • Install Android Studio with its bundled JDK, set up the Android SDK and create an emulator
  • Install Xcode and the iOS Simulator on macOS for iOS development
  • Install the Ionic CLI and check the setup with ionic info
  • Enable developer mode and USB debugging on an Android phone

Section 3: Lab: TypeScript and Standalone Angular for Ionic

  • Essential TypeScript: types, interfaces, classes, generics and async/await
  • Standalone Angular components, templates and data binding
  • Signals, computed values and the @if and @for control flow in templates
  • Services and dependency injection with the inject function
  • Lab: build a product list component with a filter

Section 4: Lab: Your First Ionic Project and Theming

  • Create a project with ionic start using standalone Angular and Capacitor
  • Walk through the project structure: src/app, assets, theme and capacitor.config.ts
  • Run with ionic serve and preview the iOS and Android looks in the browser
  • Customise colours and fonts with CSS variables, dark mode and a Thai font
  • Lab: turn the starter app into your own app
Day 2 Screens, Navigation and Forms

Section 5: Lab: Designing Screens with Ionic Components

  • Core layout: ion-header, ion-content, ion-grid and ion-card
  • Lists with ion-list, ion-item, avatars, badges and sliding items
  • Buttons, Ionicons and registering icons in standalone apps
  • Common overlays: alerts, toasts, action sheets, modals and loading indicators
  • Lab: build a shop list screen with a modal detail view

Section 6: Lab: Navigation and Passing Data Between Pages

  • Generate pages with the Ionic CLI and define routes with the Angular Router
  • ion-router-outlet and NavController: navigateForward, navigateBack and navigateRoot
  • Tab and side-menu apps, and choosing the right pattern
  • Pass data with route parameters and read it through component inputs
  • The Ionic page lifecycle, such as ionViewWillEnter, in practice

Section 7: Lab: Forms and Validation

  • Ionic form controls: ion-input, ion-select, ion-toggle and ion-datetime
  • Reactive forms with validators and error messages
  • An introduction to Angular signal forms and when to use them
  • Handling the on-screen keyboard and a good data-entry experience
  • Lab: a member registration form validated before submit

Section 8: Workshop: A Master-Detail App with Git

  • Design a master-detail product app from what you have learned
  • Move data handling into a service and keep app state in signals
  • Add, search, edit and delete items with confirmation toasts
  • Use Git in VS Code: init, commit, push to GitHub, then clone and reinstall
  • Workshop: complete the app and test it in the browser
Day 3 Data, APIs and Real Devices

Section 9: Lab: Working with a REST API

  • RESTful API principles and the JSON data format
  • Set up a sample REST API backed by MySQL and test it with Postman or Bruno
  • Call the API with Angular HttpClient and RxJS observables
  • Load data reactively with httpResource and show loading and error states
  • Create, update and delete data through the API with an interceptor that attaches a token

Section 10: Lab: Displaying Large Data Smoothly

  • Show API lists with skeleton text while loading
  • Pull to refresh with ion-refresher
  • Infinite scroll to load data page by page
  • Virtual scroll with the Angular CDK for very long lists
  • Lab: a news list that refreshes and loads more items

Section 11: Lab: Storing Data on the Device

  • Choose the right storage: Preferences, Ionic Storage or SQLite
  • Store settings and tokens with Capacitor Preferences
  • Store table data in SQLite through a Capacitor plugin: list, add, delete and edit
  • An approach to working offline and syncing with the server later
  • Lab: a notes app whose data survives closing the app

Section 12: Lab: Running on Real Devices with Capacitor

  • Add platforms with npx cap add android and ios, then sync with npx cap sync
  • Run on emulators, simulators and real phones with npx cap run
  • Live reload on a real device to see code changes instantly
  • Debug on the phone with Chrome DevTools and Safari Web Inspector
  • Lab: install the master-detail app on your own phone

Section 13: Lab: Capacitor Plugins for Camera and Files

  • How Capacitor plugins work and how to request runtime permissions
  • Take photos and pick images from the gallery with the Camera plugin
  • Save and read local files with the Filesystem plugin
  • Upload captured photos to the server through the REST API
  • Lab: a profile screen that updates its photo from the camera
Day 4 Native Features, App Polish and Store Release

Section 14: Lab: Native Features Common in Business Apps

  • Read the current location with the Geolocation plugin
  • Scan barcodes and QR codes through a Capacitor plugin
  • Open web pages in the app with the Browser plugin and share content with the Share plugin
  • Local notifications and an overview of push notifications
  • Lab: a QR code check-in app that records the location

Section 15: Lab: Polishing App Details

  • Generate icons and splash screens in every size with Capacitor Assets
  • Change the app name, app ID and version in capacitor.config.ts and the native projects
  • Lock portrait or landscape orientation and adjust the status bar
  • Shrink images and files before building so the app stays small and fast

Section 16: Building and Publishing to the Stores

  • Make a production build of the web app and sync it into the native projects
  • Create a signed Android App Bundle in Android Studio and the Google Play Console steps
  • Archive the iOS app in Xcode and submit it through App Store Connect for review
  • Prepare the store listing, screenshots and privacy policy
  • How to release updates and upgrade Ionic and Capacitor in future

Section 17: Workshop: A Complete App from Start to Finish

  • Pick a brief from the prepared templates: a news app, a shop app or a photo gallery app
  • Combine screens, navigation, the REST API, local storage and Capacitor plugins
  • Test on a real phone, fix bugs and add the icon and splash screen
  • Build an installable app, present your work and review it together

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

What is Capacitor and how does it work with Ionic?

Capacitor is a native runtime that runs a web app written in HTML, CSS and TypeScript as an Android and iOS app, and lets you call device features such as the camera, location, files and notifications through plugins. Ionic Framework is a set of UI components that look and behave like a mobile app. Together they let you write one codebase and build for both platforms. Capacitor replaces the Cordova runtime used in older examples, and this course uses Capacitor throughout.

How do hybrid apps differ from native apps?

Native apps are written separately for each platform, such as Kotlin for Android and Swift for iOS, so they get full access to the device but need two codebases. Hybrid apps built with Ionic and Capacitor use one web codebase that runs in a WebView and calls native APIs through plugins, so development is faster and web developers can start straight away. They suit business, form and data apps, while heavy graphics or features tied closely to the operating system can be more limited.

Which approach should I use to store data on the device in an Ionic app?

For settings and small values such as a token or the chosen language, use Capacitor Preferences, a key-value store that the system does not clear the way it can clear web storage. For table-style or larger data, such as product lists or notes you need to search, use SQLite through a Capacitor plugin, which supports listing, adding, deleting and editing like a database. This course practises both, along with an approach to working offline and syncing with the server later.

What are the steps to publish an app to Google Play and the App Store?

Start by setting the app name, app ID and version, create icons and splash screens with Capacitor Assets and shrink your images. Then make a production build of the web app and sync it into the native projects with npx cap sync. For Android, create a signed App Bundle in Android Studio and upload it through the Google Play Console. For iOS, archive and submit the app from a Mac through App Store Connect for review. Both stores require the learner's own developer account.

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

It suits web developers, mobile developers, programmers and anyone who wants to use web skills to build Android and iOS apps. You should have some experience with HTML, CSS and JavaScript and be comfortable with Windows or macOS. You do not need previous mobile or Angular experience, as TypeScript and standalone Angular are covered on the first day. Building and testing for iOS requires a Mac with Xcode.

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

You will be able to build apps with Ionic, Capacitor and standalone Angular, design screens with tab and side-menu navigation, create validated forms, load and save data through a REST API backed by MySQL, store data on the device with Preferences and SQLite, use the camera, location and QR code scanning through Capacitor plugins, run and debug on real phones, and build apps for Google Play and the App Store. Participants who complete the training receive a Certificate of Completion with its own number, which can be verified online.