Ionic 7+ from Beginner to Advanced Build Food Delivery App

Udemy

Acquire the skills to create native iOS, Android, and PWA applications like Swiggy, Zomato, and Uber-Eats using Angular, Capacitor v3, Firebase, and Ionic 7+.

Online

₹ 3099

particular

details

                                    Medium of instructions
                                    English

                                    Mode of learning
                                    Self study

                                    Mode of Delivery
                                    Video and Text Based

Introduction

Course Introduction
What is Ionic?
What is Angular?
Understanding Ionic Ecosystem & How it Works
Evolution of Ionic
Ionic 7+ 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

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

Popular Courses

Popular Platforms

Popular Searches

Ionic 7+ from Beginner to Advanced Build Food Delivery App

Online

₹ 3099

Quick Facts

Course overview

The highlights

Program offerings

Course and certificate fees

Fees information

certificate availability

certificate providing authority

Who it is for

What you will learn

The syllabus