Duration 5 days – 35 hrs
Overview
The “Mobile App Development Using Ionic Framework with Capacitor” training course is designed to equip participants with the knowledge and skills to develop cross-platform mobile applications efficiently using Ionic Framework and Capacitor. Throughout this course, participants will learn the fundamentals of Ionic Framework and Capacitor, understand how to build robust and performant mobile applications, and deploy them across multiple platforms seamlessly. By the end of the course, participants will be proficient in leveraging Ionic and Capacitor to create engaging mobile apps for iOS, Android, and web platforms. This course is designed to provide comprehensive knowledge and hands-on experience in the Ionic Framework for mobile app development. Each module covers essential aspects to equip participants with the skills needed to create interactive and dynamic mobile applications.
Objectives
- Understand the fundamentals of mobile app development using the Ionic Framework and Capacitor.
- Learn how to set up the development environment for Ionic and Capacitor projects.
- Explore the key features and components of the Ionic Framework for building cross-platform mobile applications.
- Gain proficiency in leveraging Angular for developing robust and scalable mobile apps with Ionic.
- Learn how to integrate native device features seamlessly using Ionic Native and Capacitor plugins.
- Master the techniques for managing state, data, and user interactions in Ionic applications.
- Develop debugging and testing skills to ensure the quality and performance of Ionic apps.
- Learn best practices for deploying and distributing Ionic applications across iOS, Android, and web platforms.
- Understand the principles of continuous integration and delivery (CI/CD) for Ionic projects.
- Apply the knowledge gained to build real-world mobile applications using Ionic Framework with Capacitor.
Audience
- Software Developers: Individuals interested in expanding their skills in mobile app development using web technologies.
- Web Developers: Professionals looking to transition into mobile app development and leverage their existing knowledge of HTML, CSS, and JavaScript.
- Mobile App Developers: Developers seeking to learn cross-platform development techniques to create apps for iOS, Android, and web platforms.
- Angular Developers: Individuals familiar with Angular who want to extend their expertise to mobile app development using Ionic Framework.
- Technology Enthusiasts: Anyone with a passion for mobile technology and a desire to learn how to create mobile applications.
- Entrepreneurs and Startup Founders: Business owners interested in building their own mobile apps or understanding the development process to collaborate effectively with development teams.
- IT Professionals: Those working in IT departments or related fields who want to enhance their skills and stay updated with the latest trends in mobile app development.
- Students and Graduates: Students studying computer science, software engineering, or related fields who want to gain practical experience in mobile app development.
Pre- requisites
- Basic understanding of HTML, CSS, and JavaScript.
- Familiarity with web development concepts.
- Comfortable working with command-line interfaces.
- Optional: Prior experience with Angular framework.
Course Content
Module 1: Introduction to the Ionic Framework
- What is the Ionic Framework?
- Advantages over native development. (Kotlin, Swift and ObjectiveC)
- Advantages over other cross platform mobile frameworks. (React Native, Flutter etc..) Ionic Documentation
Module 2: Required Tools for Ionic Development
How to do Installation and Setup for Mobile App Development to use Ionic (Windows and MacOS):
- Installing Node JS – LTS
- Android Studio Installation
- XCode Installation (macOS only)
- Visual Studio Code
- Git and GitBash
- Installing the Ionic Framework CLI
- Setting up virtual devices on your PC (iOS and Android)
Module 3: ReactJS Fundamentals: Javascript & JSX Programming and the React Architecture
- Javascript and EcmaScript 6
- Javascript Refresher: Variables, Functions, Loops, Types, Conditional Statements, Data
- Anatomy of a ReactJS file
- Primitive Elements in React Native
- JSX
- Debugging
- Error Handling – How to handle errors in app
Module 4: React to Ionic
- Running your first Ionic Hello World app in your device
- Toast Messages
- Creating Input Fields
- Creating Images
- Creating Buttons
- Creating Toast Messages
Module 5: App Navigation and Routing
- Navigate to a New Screen and Back – IonReactRouter
- Creating Tab Pages – IonTabs
- Protecting and Securing Restricted Pages
- Handling Back Button events
- Handling “Page Not Found”
Module 6: Styling Layouts
- Adaptive Styling – Create Different styles for iOS and Android in one codebase
- Theme Customization
- Adding Icons
Module 7: Dealing with Data (Firestore Backend)
- Fetching Data
- Listening for Data updates
- Adding Data
- Deleting Data
- Images – Uploading, Storing and Displaying in App
Module 8: User Authentication
- Creating a Login Form
- Enabling authentication and User SignIn
- Google OAuth
Module 9: Camera API
- Using the Camera API in Android
Module 10: Gestures using Google Maps API
- Adding Google Maps on your Ionic App
- Gestures – 2 Finger Pinch, Drag and Drop
Module 11: Building your app using Ionic Capacitor
- Installing Capacitor
- Android – Build and run
- Running the app on a physical android device iOS – Build and run
- Running the app on a physical iOS device
Module 12: Publishing your application
- Creating your Google Cloud Account
- Publishing on Google Play
