+- Forum Rockoldies (https://rockoldies.net/forum)
+-- Forum: Fotobearbeitung - Photoshop (https://rockoldies.net/forum/forumdisplay.php?fid=16)
+--- Forum: E-Learning, Tutorials (https://rockoldies.net/forum/forumdisplay.php?fid=18)
+--- Thema: Ionic 6+ With Nodejs - Complete Beginner To Pro Course 2022 (/showthread.php?tid=64608)
Ionic 6+ With Nodejs - Complete Beginner To Pro Course 2022 - Panter - 13.12.2022
![[Bild: 3dqosn9ciep1wg6xwvqs14nem0.jpg]](https://abload.de/img/3dqosn9ciep1wg6xwvqs14nem0.jpg)
Ionic 6+ With Nodejs - Complete Beginner To Pro Course 2022
Published 8/2022
MP4 | Video: h264, 1280x720 | Audio: AAC, 44.1 KHz
Language: English | Size: 41.53 GB | Duration: 75h 3m
Build Native iOS, Android Apps also PWA with Ionic 6+ Angular, Capacitor 4 & Nodejs (Typescript) as Backend with MongoDB
What you'll learn
Build Native apps for iOS & Android using Angular and the powerful features that Ionic offers along with Capacitor
Learn Nodejs (Typescript) with MongoDB from Basics to Advanced with proper & optimised coding file structure
Build Food Delivery App like Swiggy / Zomato / Uber-Eats (includes Customer App & Admin Panel in the Same App) with Ionic Angular & Capacitor, Nodejs (backend)
Learn to build Native Apps & Progressive Web Apps (PWAs) using Ionic Capacitor with Nodejs
Using Redis for Blacklisting RefreshTokens
Send Mails using SendGrid and Gmail
Integrate Payment Gateways like Razorpay
Learn the Basic Fundamentals of Ionic & Nodejs coupled with Advanced Features
Learn to use different Capacitor Plugins (also with Cordova) & Resolve all encountered issues in it
Test iOS & Android Apps on Real Devices (including Emulators & Simulators) and Publish those Apps to their respective stores (App Store & Google Play Store)
Learn to Deploy Nodejs to Heroku
Clean Coding Best Approaches
Support Chat App using Web Sockets - Coming Soon
Requirements
One should be little familiar with modern web development: HTML, CSS, JavaScript
A brief understanding of Angular and Typescript would be beneficial, but not ultimately required.
Without programming experience also, you will learn all you need to know to work with full stack development
Description
Building Full-Stack Applications (i.e. frontend + backend) with the MEAN stack is very popular - in this course, you will learn it from scratch at the example of a complete project!MEAN stands for MongoDB, Express.js, Angular (Ionic Framework using Angular) and Node.js - and combined, these four technologies allow you to build amazing web & mobile applications.Ionic is one of the most exciting & evolving technologies you should learn at the moment. It empowers you to build leading cross-platform mobile apps (native mobile apps) for iOS and Android, and also Progressive Web Apps (PWAs) using one codebase (written in HTML, JS and CSS)This course will introduce you to Ionic step by step and gradually adding more and more Ionic components. It teaches you the latest version of Ionic from scratch with no prior knowledge needed about it.Angular allows you to create awesome web applications powered by TypeScript / JavaScript. We will use it to build web applications that can be compiled into native mobile apps, running on any iOS or Android device, also teach you to build progressive web apps with same codebase simultaneously.The Ionic framework allows you to build Native Mobile Apps using your existing Angular, HTML, JS and CSS knowledge. Ionic provides a lot of beautiful components (which you'll learn about in this course) that can be used to create Native-like User Interfaces (UI).Capacitor (a tool provided by the Ionic team) will be used to then build a native mobile app for iOS/ Android based on your code. This allows you to publish your application on all possible devices (desktop and mobile) without having to learn lots of different languages! So with Ionic, you can use one codebase to create 3 different apps (iOS, Android, web).Node.js is probably THE most popular and modern server-side programming language you can dive into these days!Node.js developers are in high demand. Not to mention its applications in build workflows for projects of all sizes.No wonder that hybrid frameworks like Ionic are extremely popular and getting into high demand day by day and connecting it with one of the best backend technologies i.e., NodeJs & MongoDB as the database makes it a complete full stack course!.This course will teach you all of that! From scratch with zero prior knowledge assumed. Though if you do bring some knowledge, you'll of course be able to quickly jump into the course modules that are most interesting to you.My name is Nikhil Agarwal and I'm a professional web & app developer. I love creating awesome applications that are challenging & amazing.This course takes you from being a newbie(zero) to expert (advanced level) in Full Stack Development, taking a very practice-orientated route. At first you will gain all the basics knowledge along with that you'll build an app to use main Capacitor plugins & some basics concepts about Ionic. In the basics of Ionic you'll learn about its rich component library, how to fetch and handle user input, how to store data and access native device features and much more! After bagging all the basics, you'll build a realistic app (similar to Swiggy / Zomato / Uber-Eats) in this course.You'll dive into all important Ionic components & concepts such as navigation, user input, native device features (e.g. camera, geolocation, call, contacts, local notifications, share etc.), storage,http, authentication! Along with that You'll dive into basics of NodeJs, creating simple-complex APIs with optimise Coding Approaches and easy to understand file structure.Since building apps is only part of the fun, you'll of course also learn how to run your apps either in the browser, on an emulator/simulator or on real device!Here's a quick rundown of what you are going to learn in this course?- How to set up environment for Ionic projects in Windows & MAC & - How to run native apps in Emulator, Simulator & real devices for both iOS & Android. Also, testing app in browser, with all debugging tools- The basics about Ionic - How navigation works, how your project is structured and you use its rich component library- How to use the many beautiful components Ionic provides- How to use modals, alerts, toasts and many, many more useful UI components- How to fetch and handle user input through inputs, text-fields, dropdowns, dialogs etc.- How to authenticate users and access web servers to store & load data- How to work with different Capacitor plugins for PWAs & Native Mobile Apps (using Capacitor )- Clean Coding Practice along with App Styling & theming- NodeJs with Typescript as Backend with proper coding approaches & file structure- Handling middlewares, errors, authentication, security measures etc.- Using Redis for blacklisting refreshtokens, sending mail using Sendgrid and Gmail- & many moreFinally, you'll learn how to configure your app and publish App to the App Store or Google Play Store (or as a progressive web app) & even deploy NodeJs Backend to HerokuDoes this sound great?I can't wait to welcome you in this course! :)
Overview
Section 1: Course Introduction & How to get my Support
Lecture 1 Welcome to this Course
Lecture 2 Course Outline
Lecture 0 How to get the Most out of this Course
Lecture 0 How to Reach Out to Me through other medium?
Lecture 0 Join our Discord Community
Lecture 0 Learn more from my Youtube Channel
Section 2: Introduction to Ionic Framework
Lecture 3 Module Introduction
Lecture 0 What is Ionic?
Lecture 0 What is Angular?
Lecture 0 Understanding Ionic Ecosystem & How it Works
Lecture 0 Evolution of Ionic
Lecture 0 Ionic 6+ vs Ionic 5 vs Ionic 4 vs Ionic 3
Lecture 0 Ionic App - Compiled or Hybrid
Lecture 4 Capacitor vs Cordova
Section 3: Setting up the Environment
Lecture 5 Module Introduction
Lecture 6 Install Nodejs
Lecture 7 Creating your first project
Lecture 8 Setup Visual Studio Code Editor & Understand Ionic Project Structure
Section 4: Building Native Apps with Capacitor
Lecture 9 Module Introduction
Lecture 10 Creating an Android App & Running in Emulator & Real Android Device
Lecture 11 Creating an iOS App & Running in Simulator & Real iOS Device
Lecture 0 How to fix problems with cocoapods installation in M1 MacBook Pro
Section 5: Ionic Basics
Lecture 12 Module Introduction
Lecture 13 Ionic Starter Templates
Lecture 0 Ionic Routing & Navigations
Lecture 14 Ionic Navigation using NavController
Lecture 15 Ionic + Angular Page Lifecycle
Lecture 0 How to use Services in Ionic
Lecture 16 How to use Shared Components in Ionic
Lecture 0 Use of Promise async await try catch
Lecture 17 Spread Operators
Lecture 18 constructor vs ngOnInit
Lecture 19 Model vs Interface
Section 6: Working with HTTP Requests
Lecture 20 Module Introduction
Lecture 21 What is REST API
Lecture 22 Fetch all Data & Display in App
Lecture 23 Fetch Single Data & Display in App
Lecture 24 How to use HTTP POST, PUT Methods
Lecture 25 How to Deal with CORS Issue
Section 7: Debugging Ionic Apps
Lecture 26 Module Introduction
Lecture 27 Debugging Ionic App using console.log()
Lecture 28 Debugging using Browser DevTools & Breakpoints
Lecture 29 Debugging the App UI & Performance
Lecture 30 Debugging Android Apps in Real Device or Emulator
Lecture 0 Debugging IOS Apps in Real Device or Simulator
Section 8: Styling & Theming Ionic Apps
Lecture 0 Module Introduction
Lecture 31 Starting with CSS Utilities
Lecture 0 Setting Global Theme Variables
Lecture 0 Setting all Theme Colors at once
Lecture 0 Creating a New Theme Color
Lecture 0 Setting Global Styles
Lecture 0 Setting Platform-Specific Styles
Lecture 0 Styling Core Components with Variables
Lecture 0 Component-Specific CSS Variables & Custom Rules
Lecture 0 Using Dark Mode
Lecture 0 Module Introduction
Lecture 0 Network & Toast
Lecture 0 Share
Lecture 0 Camera - take picture, get from photos & share image via email
Lecture 0 Contacts - access phone contacts
Lecture 0 Call Number
Lecture 0 Local Notifications
Lecture 0 Implementing the native features on iOS using Capacitor v3
Lecture 0 Module Introduction
Lecture 0 2.Attributes, Property & Slots
Lecture 0 3.Ionic Grid (ion-grid)
Lecture 0 4.Grid Column (ion-col) Sizes & Responsiveness
Lecture 0 5.Grid Row & Column Alignments
Lecture 0 6.ion-grid vs ion-list
Lecture 0 7.ion-item, ion-label & ion-text
Lecture 0 Media Items (Image Elements) & Swipable List Items
Lecture 0 Understanding Virtual Scrolling
Lecture 0 Implementing Virtual Scrolling (ion-virtual-scroll)
Lecture 0 Implementing Infinite Scrolling (ion-infinite-scroll)
Lecture 0 Segmented Buttons
Lecture 0 Adding a Spinner (ion-spinner)
Lecture 0 Using the Loading Controller
Lecture 0 Using the ActionSheet Controller
Lecture 0 16.ion-refresher
Lecture 0 ion-slides (deprecated)
Lecture 0 ion-popover
Lecture 0 Module Introduction
Lecture 0 Adding PWA Elements
Lecture 0 Implementing PWA Elements for Camera and Toast
Section 9: Getting Started with Food Delivery App
Lecture 0 Module Introduction
Lecture 0 Creating a Blank Project for Food Delivery App
Lecture 0 Setting up Tabs Layout & apply Theming in a Blank Project
Lecture 0 4.Designing App Landing Screen (Home Page)
Lecture 0 5.Refractor Code for Home Screen (with shared components & skeleton loading)
Lecture 0 6.Designing Search Screen
Lecture 0 7.Refractoring Code for Search Screen (also Creating Empty-Screen Component)
Lecture 0 Design Restaurant Menu Screen (Items Page)
Lecture 0 Add Items To Cart
Lecture 0 Refractor Code for Items Page
Lecture 0 Design Cart Screen
Lecture 0 Making Cart Functional
Lecture 0 Refractor Code for Cart Screen
Lecture 0 Design Account Screen
Lecture 0 Refractor Code for Account Screen
Lecture 0 Designing All Addresses Screen
Lecture 0 Refractor Code for Address Screen
Lecture 32 Attached Source Code
Section 10: State Management
Lecture 0 Module Introduction
Lecture 0 Using Common Services
Lecture 0 Using RxJS Subjects & Subscriptions for State Management
Lecture 0 Using Service for Cart & Storage
Lecture 0 Reorder Functionality
Lecture 33 Attached Source Code
Section 11: Structuring data using Models
Lecture 0 Module Introduction
Lecture 0 Address Model
Lecture 0 Restaurant Model
Lecture 0 Category Model
Lecture 0 Item Model
Lecture 0 Cart Model
Lecture 0 Order Model
Lecture 34 Attached Source Code
Section 12: Working with Google Maps
Lecture 0 Module Introduction
Lecture 0 API Setup & Integration in App
Lecture 0 Design Add Address Screen
Lecture 0 Adding the Google Maps SDK
Lecture 0 Adding Marker & Integrating Native Capacitor Geolocation
Lecture 0 Using Geocoding API & adding Address
Lecture 0 Update Address
Lecture 0 Refractor Code
Lecture 35 Attached Source Code
Section 13: Implementing Modals
Lecture 0 Module Introduction
Lecture 0 Opening a Modal
Lecture 0 Search location modal using Places API
Lecture 0 How to Search Places from different Country or whole World
Lecture 0 Updating Marker position
Lecture 0 Bug fixes
Lecture 0 Change Marker using Geolocation
Lecture 0 Integrating Modal in Cart Page
Lecture 0 Integrating Modal in Home Page
Lecture 0 Fixing Bugs in Search-location Modal
Lecture 0 Using Modal for Editing Profile
Lecture 0 Finishing Touches
Lecture 36 Attached Source Code
Section 14: 16.Introduction to Nodejs, expressjs & mongoDB
Lecture 0 Module Introduction
Lecture 0 What is Nodejs
Lecture 0 Nodejs Architecture
Lecture 0 How Node Works
Lecture 37 What is Expressjs
Lecture 0 What is MongoDB
Lecture 0 Install Nodejs & MongoDB
Lecture 0 Understanding different request types in a server
Section 15: Setup Nodejs project & deep dive into its basics
Lecture 0 Module Introduction
Lecture 0 Creating new Nodejs Project & Setting it up (for Typescript)
Lecture 0 Understanding Routing Basics
Lecture 0 Understanding Middleware Basics
Lecture 0 Connecting to MongoDB
Lecture 0 Handling Environment Variables
Lecture 0 Structuring Nodejs Project
Lecture 0 Error Handling
Lecture 0 Accessing Request Variables
Lecture 0 Basics of Schema (Models)
Lecture 0 Implementing Request Validation & Overview of Http Error Status Code
Lecture 38 Attached Source Code
Section 16: User Authentication with Nodejs
Lecture 0 Module introduction
Lecture 0 Design Sign-in Screen
Lecture 0 Create Auth Service
Lecture 0 Design Sign-up Screen
Lecture 0 Create Forgot Password Screen
Lecture 0 Creating a User & understand CORS with Solution
Lecture 0 Refractor code
Lecture 0 Preparing for User Email Verification
Lecture 0 Send Verification Email using SendGrid & Gmail and Check for Unique Email A/c
Lecture 0 Resend Verification Email
Lecture 0 Encrypting password using bcrypt
Lecture 0 Design Email Verification (OTP) Screen
Lecture 0 What is JWT & how it works
Lecture 0 Implementing JWT for User Authentication
Lecture 0 Store Token & Setup Http Token Interceptor in Ionic App
Lecture 0 Setup Auth Middleware for Backend APIs
Lecture 0 Adding an Auth Guard in Ionic App
Lecture 0 Connecting OTP Screen with Backend APIs
Lecture 0 Design Reset password in Ionic App
Lecture 0 Creating Backend APIs & Connecting with Reset Password functionality in Frontend
Lecture 0 Optimising Code
Lecture 0 Logging out a User in Ionic App
Lecture 0 Fetch & Update Profile in Account page
Lecture 0 Using OTP Screen also as Component everywhere - Part 1
Lecture 0 Using OTP Screen also as Component everywhere - Part 2
Lecture 39 Attached Source Code
Section 17: Working with Admin Panel in same Ionic app for Live Data Seeding using Nodejs
Lecture 0 Module Introduction
Lecture 0 Setup Admin Panel with Role based Auth Routing
Lecture 0 Protecting OTP Screen Route and fixing some minor bugs
Lecture 0 Upload Banner Images and Display in App
Lecture 0 Refractor code
Lecture 0 Insert Cities in Mongodb Database
Lecture 0 Design Add Restaurant Screen
Lecture 0 Inserting Restaurant, Category documents in MongoDB using Nodejs - Part 1
Lecture 0 Inserting Restaurant, Category documents in MongoDB using Nodejs - Part 2
Lecture 0 Fetch Neaby Restaurants in Home & Search Screen using Geospatial Queries - Part1
Lecture 0 Fetch Neaby Restaurants in Home & Search Screen using Geospatial Queries - Part2
Lecture 0 Add Restaurant Menu Items (also learning mongodb populate & projection) - Part 1
Lecture 0 Add Restaurant Menu Items (also learning mongodb populate & projection) - Part 2
Lecture 0 Fetch Restaurant Menu Items (also optimise few designs)
Lecture 0 Perform CRUD Operations for User Addresses
Lecture 0 Fix Bugs in Cart, place order & fetch user orders
Lecture 40 Attached Source Code
Section 18: Implementing few Optimizations in Our App
Lecture 0 Module Introduction
Lecture 0 Using Auto-Login Guard in Ionic App
Lecture 0 Using ENUM in our Ionic app
Lecture 0 4. Confirm Alert message for Logout
Lecture 0 Optimise Login, Signup error message design & change dotstyle in Cart Screen
Lecture 0 Fix location model bug in Home page & optimise edit address code
Lecture 0 Converting Cart Model into an Interface
Lecture 0 Refractoring all Services
Lecture 0 Fix Cart Service check distance bug & refractor Cart page code
Lecture 0 Fixing Menu Screen items auto-scrolling bug
Lecture 0 Optimising Login & Signup Screen Designs
Lecture 0 Create City Interface & Optimising Add Restaurant Screen Design
Lecture 0 Converting Modals in Cart, Account & Edit-Address Screens into Sheet Modal
Lecture 0 Make Banner Clickable in Ionic App
Lecture 0 Implementing Dotenv file in our Nodejs App
Lecture 41 Attached Source Code
Section 19: Adding Pagination feature in Ionic App using Nodejs
Lecture 0 Module Introduction
Lecture 0 Implementing Pagination in Address Screen
Lecture 0 Implementing Pagination in Orders list in Account Screen
Lecture 0 Pagination in Restaurants list in Home & Search Screen
Lecture 42 Attached Source Code
Section 20: Implementing Refresh Token for Strong JWT Authentication
Lecture 0 Module Introduction
Lecture 0 Creating Refresh Token & Sending in Ionic App, also generate random secret keys
Lecture 0 Auto-generate new Access & Refresh Tokens when Access token expires
Lecture 43 Attached Source Code
Section 21: Blacklisting Refresh Tokens using Redis & applying few optimisations
Lecture 0 Module Introduction
Lecture 0 Understanding why blacklist RefreshTokens needed & Setting up Redis in MacOS
Lecture 0 Setting up Redis in Windows
Lecture 0 Setup Redis with Nodejs & Connect it with Local Server in your System
Lecture 0 Connecting to Redis Enterprise (Server) for free with Nodejs
Lecture 0 Optimise UserController in Nodejs to send only required User fields in frontend
Lecture 0 Blacklist RefreshToken in Nodejs using Redis & Optimise Token Interceptor
Lecture 0 Clear User Refresh Token from Redis database on Logout
Lecture 0 Brief on how to manage RefreshToken in Redis if same account in multiple device
Lecture 44 Attached Source Code
Section 22: Integrate COD & RAZORPAY Payment Options and test in Android & iOS
Lecture 0 Module Introduction
Lecture 0 Design Payment Option Screen & Prepare for Ordering
Lecture 0 Place Order via COD
Lecture 0 Fixing Current Date Timezone & Port Number issue in Nodejs
Lecture 0 Fixing Address Change Detection in Cart
Lecture 0 Add Android & iOS platforms with permissions & Integrate RAZORPAY in test mode
Lecture 0 Integrate Razorpay payment gateway in Live Mode
Lecture 0 Test App in Android & iOS using LiveReload
Lecture 45 Attached Source Code
Section 23: Fixing error messages for no records available in Nodejs
Lecture 0 Module Introduction
Lecture 0 Optimising Restaurant Controller for no records found
Lecture 0 Optimising OrderController for no records found
Lecture 0 Optimising AddressController for no records found
Lecture 46 Attached Source Code
Section 24: Indexing in MongoDB
Lecture 0 Module Introduction
Lecture 0 What is MongoDB Indexing
Lecture 0 Understanding types of Indexing & a brief about various operators
Lecture 0 Using geoNear(for distance), nearSphere & geoWithin in Restaurant controller w
Lecture 47 Attached Source Code
Section 25: Fix some Security Loopholes & optimise apps
Lecture 0 Module Introduction
Lecture 0 Applying Strict Role based Restrictions
Lecture 0 Restrict entry in Payment option page if email unverified
Lecture 0 Optimise catch() code
Lecture 0 Some final optimisation touches to our apps
Lecture 0 Implementing Edit Profile picture feature in App - Part 1
Lecture 0 Implementing Edit Profile picture feature in App - Part 2
Lecture 48 Attached Source Code
Section 26: Deploy Nodejs App for production to Heroku
Lecture 0 Module Introduction
Lecture 0 Horizontal vs Vertical Scaling
Lecture 0 Understanding MongoDB Replication
Lecture 0 Deploying Nodejs App to Heroku
Lecture 0 Checking Files in Heroku & Understanding about Heroku filesystem problem
Lecture 0 How to do Load Testing?
Lecture 49 Attached Source Code
Section 27: Preparing Ionic App for Production
Lecture 0 Module Introduction
Lecture 0 Customise StatusBar & install SplashScreen plugin in Ionic App
Lecture 0 Preparing Android App Configurations & Understanding Hardware BackButton
Lecture 0 Preparing iOS App Configurations
Lecture 0 Generate Custom Icons & SplashScreens for Android & iOS
Lecture 0 Preparing environment.prod.ts file
Lecture 50 Attached Source Code
Section 28: Publishing Ionic App to Play Store & App Store
Lecture 0 Module Introduction
Lecture 0 Publishing iOS App on App Store
Lecture 0 Publishing Android App on Play Store
Lecture 0 Useful Links & Tips
Lecture 51 Attached Source Code
This course is for everyone (whether beginner or already a Developer) who wants to become an Advanced-level full stack Developer with popular technologies like Ionic Angular & Nodejs.,This course is for everyone interested in diving into the development of native mobile apps for iOS and Android using one codebase.,This course is also for everyone interested in learning Nodejs as Backend and become a full stack developer.,It is useful for Web developers as well as App developers.,Anyone with little knowledge of HTML, CSS, JS can easily enrol in this course but that's not mandatory.
Homepage
![[Bild: 0debuggingiosappsinre3wedv.jpg]](https://abload.de/img/0debuggingiosappsinre3wedv.jpg)