- Course Introduction
- What is Ionic?
- What is Angular?
- Understanding Ionic Ecosystem & How it Works
- Evolution of Ionic
- Ionic 5+ vs Ionic 4 vs Ionic 3
- Ionic App - Compiled or Hybrid
- Capacitor vs Cordova
- Capacitor v3 launched
- Course Outline
- How to get the Most out of this Course
- How to Reach Out to Me through other medium?
- Join our Online Learning Community
Ionic 5+ from Beginner to Advanced Build Food Delivery App
Acquire the skills to create native iOS, Android, and PWA applications like Swiggy, Zomato, and Uber-Eats using Angular, Capacitor v3, Firebase, and Ionic 5+.
Online
₹ 499 3,199
Quick facts
particular | details | |
---|---|---|
Medium of instructions
English
|
Mode of learning
Self study
|
Mode of Delivery
Video and Text Based
|
Course overview
Ionic is among the most interesting and rapidly expanding technologies available today, allowing users to create cutting-edge native mobile applications for ios and Android, as well as Progressive Web Applications (PWAs) utilizing single codebase languages like HTML, Javascript, and CSS. Nikhil Agarwal Professional Web & App Developer authored the Ionic 5+ From Beginner to Advanced - Build Food Delivery App certification course, which is accessible on Udemy.
Ionic 5+ From Beginner to Advanced - Build Food Delivery App online course begins with the fundamentals of Ionic 5+ and progresses to more sophisticated topics such as state management and seeding data, all while emphasizing a hands-on approach. By the end of the Ionic 5+ From Beginner to Advanced - Build Food Delivery App online classes, learners will be able to construct native apps for both iOS and Android utilizing Angular and the powerful capabilities that Ionic 5+ provides together including Capacitor.
The highlights
- Certificate of completion
- Self-paced course
- 54.5 hours of pre-recorded video content
- 12 articles
- 148 downloadable resources
Program offerings
- Online course
- 30-day money-back guarantee
- Unlimited access
- Accessible on mobile devices and tv
Course and certificate fees
Fees information
certificate availability
certificate providing authority
What you will learn
After completing the Ionic 5+ From Beginner to Advanced - Build Food Delivery App online certification, learners will be introduced to the fundamental concepts of Ionic 5+ and Angular. Learners will explore the strategies for developing applications on both ioS and Android platforms. Learners will study the differences between Capacitor and Cordova, as well as approaches for designing applications using Nodejs, REST APIs, and Firebase. Learners will also be introduced to progressive web applications and their components, as well as state management and data seeding.
Who it is for
The syllabus
Introduction
Setting up the Environment
- Module Introduction
- Install Nodejs
- Creating your first project
- Setup Visual Studio Code Editor & Understand Ionic Project Structure
Building Native Apps with Capacitor
- Module Introduction
- Creating an Android App & Running in Emulator & Real Android Device
- Creating an iOS App & Running in Simulator & Real iOS Device using Capacitor v3
- How to fix problems with cocoapods installation in M1 MacBook Pro
Ionic Basics
- Module Introduction
- Ionic Starter Templates
- Ionic Routing & Navigations
- Ionic Navigation using NavController
- Ionic + Angular Page Lifecycle
- How to use Services in Ionic
- How to use Shared Components in Ionic
- Use of Promise async await try catch
- Spread Operators
- Constructor vs ngOnInit
- Model vs Interface
Debugging Ionic Apps
- Module Introduction
- Debugging Ionic App using console.log()
- Debugging using Browser DevTools & Breakpoints
- Debugging the App UI & Performance
- Debugging Android Apps in Real Device or Emulator
- Debugging IOS Apps in Real Device or Simulator using Capacitor v3
Working with HTTP Requests
- Module Introduction
- What is REST API
- Fetch all Data & Display in App
- Fetch Single Data & Display in App
- How to use HTTP POST, PUT Methods
- How to Deal with CORS Issue
- Other ways to deal with CORS
- Dealing with clear text traffic error in Android 10+
Styling & Theming Ionic Apps
- Module Introduction
- Starting with CSS Utilities
- Setting Global Theme Variables
- Setting all Theme Colors at once
- Creating a New Theme Color
- Setting Global Styles
- Setting Platform-Specific Styles
- Styling Core Components with Variables
- Component-Specific CSS Variables & Custom Rules
- Using Dark Mode
Using Some Native Device Features
- Module Introduction
- Network & Toast
- Share
- Camera
- Contacts
- Call Number
- Local Notifications
- Implementing the native features on iOS using Capacitor v3
Ionic Components Overview
- Module Introduction
- Attributes, Property & Slots
- Ionic Grid (ion-grid)
- Grid Column (ion-col) Sizes & Responsiveness
- Grid Row & Column Alignments
- Ion-grid vs ion-list
- Ion-item, ion-label & ion-text
- Media Items (Image Elements) & Swipable List Items
- Understanding Virtual Scrolling
- Implementing Virtual Scrolling (ion-virtual-scroll)
- Implementing Infinite Scrolling (ion-infinite-scroll)
- Segmented Buttons
- Adding a Spinner (ion-spinner)
- Using the Loading Controller
- Using the ActionSheet Controller
- Ion-refresher
- Ion-slides
Integrating PWA Elements
- Module Introduction
- Adding PWA Elements
- Implementing PWA Elements for Camera and Toast
- Fixing a Camera Plugin Bug in Redmi Devices in Capacitor v2
Getting Started with Food Delivery (Swiggy Clone) App
- Module Introduction
- Creating a Blank Project for Food Delivery (Swiggy Clone) App
- Setting up Theming & Tabs Layout in a Blank Project
- Designing App Landing Screen (Home Page)
- Refractor Code for Home Screen (with components & skeleton
- loading)
- Designing Search Screen
- Refractoring Code for Search Screen (also Creating EmptyScreen Component)
- Design Restaurant Menu Screen (Items Page)
- Add Items To Cart
- Refractor Code for Items Page
- Design Cart Screen
- Making Cart Functional
- Refractor Code for Cart Screen
- Design Account Screen
- Refractor Code for Account Screen
- Designing All Addresses Screen
- Refractor Code for Address Screen
State Management
- Module Introduction
- Using Common Services
- Using RxJS Subjects & Subscriptions for State Management
- Using Service for Cart
- Reorder Functionality
Structuring data using Models
- Module Introduction
- Address Model
- Restaurant Model
- Category Model
- Item Model
- Cart Model
- Order Model
Working with Google Maps
- Module Introduction
- Google Maps API Setup & Integration in App
- Design Add Address Screen
- Adding the Google Maps SDK
- Adding Marker & Integrating Native Capacitor Geolocation
- Using Geocoding API & adding Address
- Update Address
- Refractor Code
Implementing Modals
- Module Introduction
- Opening a Modal
- Search location modal using Places API
- Updating Marker position
- Bug fixes
- Change Marker using Geolocation
- Integrating Modal in Cart Page
- Integrating Modal in Home Page
- Fixing Bugs in Search-location Modal
- Using Modal for Editing Profile
- Finishing Touches
User Authentication
- Module Introduction
- Design Sign-in Screen
- Create Auth Service
- Design Sign-up Screen
- Create Forgot Password Screen
- Adding an Auth Guard
- Setup Firebase
- Important News! Some updates in new Firebase SDK
- User Authentication using Firebase
- Logging out a User
- Implementing Reset Password functionality
- Fetch & Update Profile in Account page
Working with Live data (data seeding) in Firestore
- Module Introduction
- Insert Cities data using firebase console
- Create Admin Control Panel in the App
- Create Banners & View all in App
- Add Restaurants in Firestore
- Minor Bug Fixes
- Fetch live data in HomePage & SearchPage
- Role based Auth Routing
- Add Restaurant Menu Items
- Fetch Restaurant Menu Items
- Perform CRUD Operations for User Address
- Prepare Cart & perform all Order Operations
Implementing few Optimizations in Our App
- Module Introduction
- Using Auto-Login Guard
- Using ENUM in our app
- Confirm Prompt for Logout
- Few Design Optimization Tips
- Fixing Minor Bugs & applying new Optimization Concepts
- Managing the User (UID) with a Subject
- How to make Banners clickable & navigate to Restaurant Menu
Upgrading to Capacitor v3
- Module Introduction
- Using Method I - in our Native Plugins demo-app
- Running on Android
- Running on iOS
- Using Method II - for Food Delivery(Swiggy Clone) App
Preparing Food Delivery (Swiggy Clone) App for Production
- Module Introduction
- Running App on Android
- Changing StatusBar in our App
- Running App on iOS
- Preparing Android App Configs
- Preparing iOS App Configs
- Custom Icons & Splash Screens for Android
- Custom Icons & Splash Screens for iOS
- Setting Firestore & Firebase Storage Custom Rules
- Useful links
Publishing Our Apps
- Module Introduction
- Publishing iOS App on App Store
- Publishing Android App on Play Store
- Useful Links & Tips
Course Wrap-up & its Future Aspects
- Course Wrap-up & its Future Aspects
Upgrade to Ionic 6 & Firebase 9
- Module Introduction
- Overview of What's new in Ionic 6
- Upgrade Native plugins app (demo app) to Ionic 6 - Run in browser & real device
- Upgrade Food delivery app to Ionic 6
- Upgrade Food delivery app to Firebase 9 (compat)
- Upgrade Food delivery app to Firebase 9 (modular) - Part 1 - Authentication
- Upgrade Food delivery app to Firebase 9 (modular) - Part 2 - CRUD
- Upgrade Food delivery app to Firebase 9 (modular) - Part 3 - All queries
- Upgrade Food delivery app to Firebase 9 (modular) - Part 4 - Storage
- Working with Ionic 6 ion-datetime
- Working with Ionic 6 modals (ion-modal)
- Implementing Swiperjs (instead of ion-slides) with additional features
Some minor improvements & bug fixes
- Module Introduction
- Updating Orders collection & Firestore rules
- Applying some improvements in our app
- Fixing create restaurant user auth bug in our app
- Removing unnecessary firebase modules from app.module.ts
- How to use RTL & LTR Support in Ionic App
Integrating Payment Gateways & using Firebase functions with firebase emulators
- Module Introduction
- Setting up Order for payment & designing Payment screen
- Integrating Razorpay payment gateway in test mode
- Working with Razorpay live mode with the help of Firebase functions & emulators
Instructors
Mr Nikhil Agarwal
Professional Web and App Developer
Freelancer