Ionic Development Fundamentals

Pengembangan aplikasi mobile modern menuntut pendekatan yang efisien, lintas platform, dan berbasis web technology agar dapat menjangkau berbagai perangkat dengan satu basis kode. Ionic hadir sebagai framework hybrid yang memanfaatkan HTML, CSS, dan JavaScript, serta terintegrasi erat dengan Angular untuk membangun aplikasi mobile yang dapat dijalankan di Android, iOS, maupun web. Dengan dukungan CLI, tooling yang matang, dan integrasi dengan native platform melalui plugin, Ionic menjadi solusi populer untuk pengembangan aplikasi mobile berbasis web secara cepat dan konsisten (Ionic Team, 2023).

Course Ionic Development Fundamentals membekali peserta dengan pemahaman dasar pengembangan aplikasi Ionic, dimulai dari setup environment, pembuatan aplikasi pertama menggunakan Ionic CLI, hingga menjalankan aplikasi di berbagai platform seperti browser, emulator Android, dan iOS. Peserta akan mempelajari penggunaan komponen UI Ionic, navigasi berbasis tabs dan menu, serta pemanfaatan grid system untuk membangun antarmuka yang responsif. Integrasi Ionic dengan Angular building blocks seperti components, directives, pipes, dan services juga dibahas untuk membangun aplikasi yang modular dan mudah dirawat (Angular Team, 2023).

Selain pengembangan UI, course ini mencakup validasi form, reactive forms, komunikasi HTTP, integrasi layanan eksternal seperti payment gateway, autentikasi pengguna, serta push notifications. Peserta juga diperkenalkan pada penggunaan Ionic Native untuk mengakses fitur perangkat seperti kamera, lokasi, notifikasi, dan autentikasi biometrik, serta pengelolaan tema dan proses build–publish aplikasi ke Android dan iOS. Pendekatan ini sejalan dengan praktik pengembangan hybrid application modern yang menekankan reuse code, integrasi native capability, dan kesiapan distribusi aplikasi ke berbagai platform (Ionic Team, 2021).

OBJECTIVES

1. Memahami Dasar-Dasar Ionic dan Lingkungan Pengembangannya
2. Menguasai Komponen dan Navigasi dalam Ionic
3. Memanfaatkan Angular dalam Pengembangan Aplikasi Ionic
4. Menerapkan Validasi Formulir dan Integrasi API
5. Menambahkan Animasi dan Efek Visual
6. Mengimplementasikan Autentikasi dan Notifikasi Push
7. Menggunakan Plugin Ionic Native untuk Mengakses Fitur Perangkat
8. Menyesuaikan Tampilan dan Tema Aplikasi
9. Menguasai Topik Lanjutan dalam Ionic
10. Menyiapkan dan Mempublikasikan Aplikasi ke Play Store dan App Store

AUDIENCE

1. Frontend Developer
2. Mobile App Developer
3. Web Developer
4. Engineering Manager
5. Freelance Developer
6. Startup Founder

PREREQUISITES

1. Tidak ada training khusus yang dipersyaratkan

CONTENT

1.Creating Our First App with Ionic

1.1. Introduction
1.2. Setting up a development environment
1.3. Creating a HelloWorld app via the CLI
1.4. Creating a HelloWorld app via the CLI
1.5. Viewing the app using your web browser
1.6. Viewing the app using the Ionic CLI
1.7. Viewing the app using Xcode for iOS
1.8. Viewing the app using Genymotion for Android
1.9. Viewing the app using Ionic View

2. Adding Ionic Components

2.1. Introduction
2.2. Adding multiple pages using tabs
2.3. Adding left and right menu navigation
2.4. Navigating multiple pages with state parameters
2.5. Using menu, tabs, and segment together in an app
2.6. Using the Ionic grid to create a complex UI

3. Extending Ionic with Angular Building Blocks

3.1. Introduction
3.2. Creating a custom pizza ordering component
3.3. Creating a custom username input directive
3.4. Creating a custom pipe
3.5. Creating a shared service to provide data to multiple pages
3.6. Reusing an existing page as an HTML element

4. Validating Forms and Making HTTP Requests

4.1. Introduction
4.2. Creating a complex form with input validation
4.3. Creating reactive forms in Ionic
4.4. Retrieving data via a mocked API using a static JSON file
4.5. Integrating with Stripe for online payment

5. Adding Animation

5.1. Introduction
5.2. Embedding full screen inline video as background
5.3. Creating physics-based animation using Dynamics.js
5.4. Animating the slide component by binding a gesture to the animation state
5.5. Adding a background CSS animation to the login page

6. User Authentication and Push Notifications

6.1. Introduction
6.2. Registering and authenticating users using Auth0
6.3. Building an iOS app to receive push notifications
6.4. Building an Android app to receive push notifications

7. Supporting Device Functionalities Using Ionic Native

7.1. Introduction
7.2. Taking a photo using the camera plugin
7.3. Sharing content using the social sharing plugin
7.4. Displaying a local notification using the local notification plugin
7.5. Fingerprint authentication using the fingerprint AIO plugin
7.6. Creating a media player with the Media Player notification control
7.7. Creating a taxi app using the Google Maps plugin and geocode support

8. Theming the App

8.1. Introduction
8.2. Viewing and debugging themes for a specific platform
8.3. Customizing themes based on the platform

9. Advanced Topics

9.1. Introduction
9.2. Lazy loading in Ionic
9.3. Internationalization (i18n) using ngx-translate
9.4. Creating documentation for Ionic app

10. Publishing the App for Different Platforms

10.1. Introduction
10.2. Adding versioning to future-proof the app
10.3. Building and publishing an app for iOS
10.4. Building and publishing an app for Android