Mobile App Development
with Ionic (Part1)
Overview
Course Objective
Upon completion of this course, you will be able to:
• Build your own applications for Android and iOS mobile phones using hybrid
development.
• Design mobile applications with compelling user interfaces by using and creating your
own layouts following Design Principle.
• Use HTTP service to access Web Services (e.g: Weather forecast information)
• Take advantage of Native Storage for data storage and retrieval via native storage and
local databases.
• Utilise the powerful Cordova API on maps, location, medias, and hardware to build
complex applications.
• Debug, test and deploy your own applications on Google Play Store.
• Using Analytics to Analyze app performance.
Who Should Attend
Prerequisites
Training Calendar
Intake
Duration
Program Fees
Module
Day 1
GUIDANCE INTRODUCTION
• Panorama of mobile application development
• Hybrid vs Native
• Hybrid Framework
INTRODUCTION TO IONIC
• What is Ionic Framework
• Different Components building Ionic Framework
• Who is using Ionic Framework
• Ionic Showcase
• Ionic Platform
• Ionic.io
UNDERSTANDING APPLICATION STRUCTURE (FIRST APPLICATION)
• Ionic Installation
• Ionic templates
• Creating a “Hello World” application
• Understanding Ionic File Structure
• Viewing your app via Ionic View
LANGUAGE OVERVIEW INTRODUCTION TO TYPESCRIPT
• Comments
• Declaration
• Basic Types
• Control Flow
• Functions
• Classes
• Interfaces
OVERVIEW OF ANGULAR
• Interpolation
• Directives
• Modules
• Components
• Service/Providers
• Binding Events
• Two Way Data Binding
Day 2
INTRODUCTION TO APPLICATION COPONENTS
• UI Layout
• Material Design
• Image
• Button
• Input
• CheckBox
• Button Click
• Datetime
• Forms and Validations
LIST AND CARDS COMPONENTS
• Material Design Overview
• Ionicons
• List
• Card
• Repeating content using *ngFor
• Creating a CRUD application
• Pushing
• Popping
MULTIVIEW APPLICATION IONIC NAVIGATION STACK
CREATE NEW PAGE MODALLY PASSING DATA BETWEEN PAGES
OTHER MULTIVIEW LAYOUT
• Tabs
• Sidemenu
Day 3
THEMING AND STYLING
• Default styling in Ionic
• Introduction to SASS
• SASS Variable
• Custom Styling
• Ionicons
MORE COMPONENTS
• Alert
• Action Sheet
• Toast
MINI PROJECT 1
FAQs
General Questions:
Q: What is this course about?
A: This course provides hands-on training on hybrid mobile app development using the Ionic Framework. Participants will learn to build cross-platform applications for Android and iOS using web technologies like HTML, CSS, JavaScript, and TypeScript. The course covers Ionic UI components, navigation, storage, API integration, and deployment.
Q: Who should attend this course?
A: This course is designed for programmers, software engineers, web developers, and mobile developers interested in building hybrid applications. Prior experience with HTML, CSS, and JavaScript is required, while basic Angular knowledge is beneficial but will be covered.
Q: What are the prerequisites for this course?
A: Participants should have a solid understanding of HTML, CSS, and JavaScript. Familiarity with Angular is helpful but not mandatory. They should also have Node.js, Ionic, and required development tools like Android Studio and Java SDK installed for hands-on exercises.
Q: How is the course structured?
A: The course spans three days:
Day 1: Introduction to mobile development, Ionic basics, and building the first application.
Day 2: UI components, forms, validations, lists, cards, and navigation techniques.
Day 3: Theming with SASS, custom styling, alerts, action sheets, and a mini project.
Each session includes practical exercises to reinforce learning.
Q: How long is the course?
A: The course runs for three days.
Q: Will I receive a certificate upon completion?
A: Yes, participants will receive a certificate upon successfully completing the course.
Program Content & Skills:
Q: What specific topics are covered in the course?
A: This course covers hybrid mobile app development using Ionic Framework and Angular. Topics include UI components, navigation, theming with SASS, user input handling, storage solutions, and integrating native device features. You will learn to build interactive applications using modals, popups, gestures, HTTP requests, and SQLite database management. Check the syllabus for a detailed list of topics.
Q: Will I learn advanced UI development for mobile apps?
A: Yes, the course explores Ionic’s UI components, including menus, slides, tabs, cards, grids, and form elements. You will also learn navigation patterns, theming with SASS, and responsive design techniques to create seamless and user-friendly mobile experiences.
Q: Will I learn how to publish apps on the Google Play Store and Apple App Store?
A: Yes, the course includes app deployment training, covering Ionic CLI, Android and iOS builds, emulation, and creating production-ready applications. It also covers platform-specific requirements and best practices for app submission.
Q: Will I work on real-world projects and exercises?
A: Yes, the course features hands-on exercises and real-world projects. You will build and navigate an Ionic app, integrate native device features (camera, in-app browser, flashlight), manage storage with SQLite, and deploy a fully functional mobile application. These exercises ensure practical experience in hybrid app development.
Submit your interest today !
