Ionic Build iOS Android Web Apps with Ionic Angular
What you’ll learn
Build native apps and progressive web apps from one and the same codebase
Build native apps for iOS and Android, using Angular and the powerful features Ionic offers
Dive deeper into Ionic to learn more about core and advanced features
Test iOS and Android apps on real devices and publish those apps to the app stores of the two platforms
Requirements
Angular fundamentals are required, though a brief refresher is also provided in the course
Basic HTML, JS and CSS knowledge is required
NO advanced Angular knowledge is required
Description
Join this bestselling course to learn how to use Angular and web development technologies to build real native mobile apps for iOS and Android!Ionic is one of the most exciting technologies you can learn at the moment – it enables you to use one codebase (written in HTML, JS and CSS) to build and ship apps as normal (progressive) web apps as well as real native mobile apps for iOS and Android. This course teaches you the latest version of Ionic from scratch with no prior knowledge about it assumed.Angular (formerly Angular 2) allows you to create awesome web applications powered by TypeScript / JavaScript. Wouldn’t it be great to use that Angular knowledge to build web applications that can be compiled into native mobile apps, running on any iOS or Android device? And also publish them as progressive web apps at the same time.The Ionic framework allows you to do just that! Use your existing Angular, HTML, JS and CSS knowledge and build your native mobile app with that! Ionic offers a lot of beautiful components (which you’ll learn about in this course) that can be used to compose native-like user interfaces. Capacitor (another tool provided by the Ionic team) will handle the rest as it’s used to then build a native mobile app for iOS/ Android based on your code. This allows you to focus on the things you know and release your application on all possible devices (desktop and mobile) without having to learn thousands of different languages! Indeed, with Ionic, you can use one codebase to ship three different apps (iOS, Android, web).No wonder that hybrid frameworks like Ionic are extremely popular and in high demand!My name is Maximilian Schwarzmüller and I’m a freelance web developer as well as creator of many 5-star rated courses here on Udemy – including my “Angular – The Complete Guide” course, the bestselling Angular course on Udemy!I love creating awesome web applications and it simply is amazing to now use that knowledge and build native mobile apps with it, too!This course takes your from zero to published app, taking a very practice-orientated route. You’ll a realistic app (where users can create and book events) throughout the course, learning about the basics of Ionic, its rich component library, how to fetch and handle user input, how to store data and access native device features and much more!You’ll dive into all important Ionic components as well as concepts like navigation (tabs, sidemenus), user input, native device features (e.g. camera), storage, http, authentication!And 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 or on your own device!What exactly are you going to learn then?A brief refresher on AngularHow to set up your Ionic projectsThe basics about Ionic – How navigation works, how your project is structured and you use its rich component libraryHow to use the many beautiful components Ionic ships withHow to use different kinds of navigation concepts: “Back”-Button-Navigation, tabs and sidemenusHow to show modals, alerts, toasts and many, many more useful UI componentsHow to test the app in the browser, on emulators or real devicesHow to fetch and handle user input through inputs, textfields, dropdowns, dialogs etc.How to authenticate users and access web servers to store + load dataHow to access the local device storage and native device features like the camera or geolocationSo much more … like styling and theming your appFinally, you’ll learn how to configure your app and publish it to the App Store or Google Play Store (or as a progressive web app)Does this sound great?I can’t wait to welcome you in this course! 🙂
Overview
Section 1: Getting Started
Lecture 1 Course Introduction
Lecture 2 What Is Ionic?
Lecture 3 Join our Online Learning Community
Lecture 4 A Closer Look at the Ionic Platform
Lecture 5 What is Angular?
Lecture 6 Node.js Download
Lecture 7 Our First Ionic App!
Lecture 8 The History of Ionic
Lecture 9 Ionic 4+ vs Ionic 3
Lecture 10 How to Build Native Mobile Apps with Ionic
Lecture 11 Comparing Ionic to Alternatives
Lecture 12 Course Outline
Lecture 13 How To Get The Most Out Of The Course
Lecture 14 The Course Source Code
Section 2: Angular Refresher
Lecture 15 Module Introduction
Lecture 16 What is Angular?
Lecture 17 Angular SPAs & Ionic
Lecture 18 Understanding Components
Lecture 19 Important: Creating an Angular Project with the CLI
Lecture 20 Installing Angular with the CLI
Lecture 21 Installing the IDE
Lecture 22 Understanding the Folder Structure
Lecture 23 The App Component
Lecture 24 Creating Our First Component
Lecture 25 Cross Component Communication with Property Binding
Lecture 26 Understanding Directives & String Interpolation
Lecture 27 Handling User Input
Lecture 28 Understanding Event Binding
Lecture 29 Local References
Lecture 30 Understanding Two-Way-Binding
Lecture 31 Passing Data Around with Custom Events
Lecture 32 Implementing Routing
Lecture 33 Setting Up Services
Lecture 34 Using Services with Dependency Injection
Lecture 35 Working with Angular Lifecycle Hooks
Lecture 36 Adding a Person with Services
Lecture 37 Navigating between Components
Lecture 38 Removing Items Upon a Click
Lecture 39 “Push”ing Data Around with Subjects
Lecture 40 More on RxJS & Observables
Lecture 41 Sending Http Requests
Lecture 42 Showing a Placeholder Whilst Waiting for a Response
Lecture 43 Wrap Up
Lecture 44 Useful Resources & Links
Section 3: Ionic Component Basics
Lecture 45 Module Introduction
Lecture 46 Core App Building Blocks
Lecture 47 Under the Hood of Ionic Components
Lecture 48 Setting Up a Non-Angular Ionic Project
Lecture 49 Where to Learn all about Ionic Components
Lecture 50 Using Basic Ionic Components
Lecture 51 More Basic Components
Lecture 52 Component Categories
Lecture 53 Using the Ionic Grid
Lecture 54 Adding Icons & Using Slots
Lecture 55 Using CSS Utility Attributes
Lecture 56 Using Ionic Elements like “Normal” HTML Elements
Lecture 57 Validating User Input
Lecture 58 Creating Ionic Elements Programmatically
Lecture 59 Finishing Up the Base JavaScript Logic
Lecture 60 Finalizing the Layout
Lecture 61 Use the right Ionic Import
Lecture 62 Using Controller Components
Lecture 63 Why Angular?
Lecture 64 Useful Resources & Links
Section 4: Angular + Ionic
Lecture 65 Module Introduction
Lecture 66 Why Use Angular?
Lecture 67 Important: Creating a New Project with the CLI
Lecture 68 Creating a New Ionic Angular Project
Lecture 69 Important: CSS Utility Attributes
Lecture 70 Analyzing the Created Project
Lecture 71 How Angular & Ionic Work Together
Lecture 72 Important: Extra Routing Modules
Lecture 73 Adding & Loading a New Page
Lecture 74 Using Angular Features on Ionic Components
Lecture 75 Setting Up Angular Routes
Lecture 76 Managing State with Services
Lecture 77 Extracting and Displaying Route Param Data
Lecture 78 A Potential Bug (+ Fix)
Lecture 79 Navigating Between Pages
Lecture 80 Deleting a Recipe
Lecture 81 There’s a Bug!
Lecture 82 Injecting Ionic Controllers
Lecture 83 Angular Components vs Ionic Components
Lecture 84 Wrap Up
Lecture 85 Useful Resources & Links
Section 5: Building Native Apps with Capacitor
Lecture 86 Module Introduction
Lecture 87 General Information
Lecture 88 Creating an Android App
Lecture 89 Running the App on a Real Android Device
Lecture 90 Creating an iOS App
Lecture 91 Running the App on a Real iOS Device
Lecture 92 Wrap Up
Lecture 93 Useful Resources & Links
Section 6: Debugging
Lecture 94 Module Introduction
Lecture 95 Error Messages & console.log()
Lecture 96 Using the Browser DevTools & Breakpoints
Lecture 97 Using VS Code for Debugging
Lecture 98 Debugging the UI & Performance
Lecture 99 Debugging Android Apps
Lecture 100 Debugging iOS Apps
Lecture 101 Wrap Up
Lecture 102 Useful Resources & Links
Section 7: Navigation & Routing in Ionic Apps
Lecture 103 Module Introduction
Lecture 104 How Routing Work In An Ionic + Angular App
Lecture 105 Ionic Page Caching & Extra Lifecycle Hooks
Lecture 106 Planning the Course Project
Lecture 107 Creating Our App Pages
Lecture 108 MUST READ: Ionic 5 and Routing / Lazy Loading
Lecture 109 Adjusting Our Main Routing Configuration
Lecture 110 Understanding Ionic Tabs
Lecture 111 Adding Tabs to the App
Lecture 112 Preparing Data & Services for the Project
Lecture 113 Outputting “Places”
Lecture 114 Adding Forward Navigation
Lecture 115 Going Back with NavController
Lecture 116 Navigating via Toolbar Buttons
Lecture 117 A Bug with Ionic
Lecture 118 Extracting the ID of Loaded Places
Lecture 119 Optional: Assignment Solution Code
Lecture 120 Adding a SideDrawer
Lecture 121 Opening + Closing the SideDrawer
Lecture 122 Adding Links & Switching Pages
Lecture 123 Adding the Auth Service
Lecture 124 Adding an Auth Guard
Lecture 125 Opening a Modal
Lecture 126 Closing the Modal & Passing Data
Lecture 127 Wrap Up
Lecture 128 Useful Resources & Links
Section 8: Ionic Components Overview
Lecture 129 Module Introduction
Lecture 130 Attributes & Slots
Lecture 131 Ionic Grid Basics
Lecture 132 Controlling Grid Column Sizes
Lecture 133 Controlling Grid Alignment
Lecture 134 Responsive Grid Sizing
Lecture 135 Grid Summary
Lecture 136 ion-list vs ion-grid
Lecture 137 ion-label & ion-item
Lecture 138 ion-text
Lecture 139 Swipeable List Items
Lecture 140 Swipeable Bookings
Lecture 141 Understanding Virtual Scrolling
Lecture 142 Implementing Virtual Scrolling
Lecture 143 Virtual Scrolling Bugs
Lecture 144 Adding Image Elements
Lecture 145 Segmented Buttons
Lecture 146 Adding a Spinner
Lecture 147 Using the Loading Controller
Lecture 148 Using the ActionSheet Controller
Lecture 149 Wrap Up
Lecture 150 Useful Resources & Links
Section 9: Styling & Theming Ionic Apps
Lecture 151 Module Introduction
Lecture 152 How Styling & Theming Works in Ionic Apps
Lecture 153 Docs & Utility Attributes
Lecture 154 Setting Global Theme Variables
Lecture 155 Setting Global Styles
Lecture 156 Setting All Colors at Once
Lecture 157 Setting Platform-Specific Styles
Lecture 158 Styling Core Components with Variables
Lecture 159 Missing iOS Icons
Lecture 160 Adding Custom CSS Rules
Lecture 161 Component-specific CSS Variables
Lecture 162 Wrap Up
Lecture 163 Useful Resources & Links
Section 10: Handling User Input
Lecture 164 Module Introduction
Lecture 165 User Input Requirements
Lecture 166 Setting Up a Form Template
Lecture 167 Angular 8 & @ViewChild()
Lecture 168 Adding a Template-driven Form
Lecture 169 Handling Validation
Lecture 170 Switching Between Auth Modes
Lecture 171 Finishing the Auth Form
Lecture 172 Starting Work on a New Offer Form
Lecture 173 Finishing the Offer Form Template
Lecture 174 Creating a Reactive Form
Lecture 175 Syncing the Form to the Template
Lecture 176 Finishing the New Offer Form
Lecture 177 Edit Form Challenge
Lecture 178 Adding the Edit Offer Form
Lecture 179 Starting with the Booking Form
Lecture 180 Working on the Book Place Template
Lecture 181 Ionic 6 & Date Controls
Lecture 182 Configuring the Date Controls
Lecture 183 Avoid Errors
Lecture 184 Validating & Submitting the Form
Lecture 185 Wrap Up
Lecture 186 Useful Resources & Links
Section 11: Managing State
Lecture 187 Module Introduction
Lecture 188 What is State?
Lecture 189 Adding New Places
Lecture 190 Using RxJS Subjects for State Management
Lecture 191 Passing Data via Subjects & Subscriptions
Lecture 192 UI State in Action
Lecture 193 Updating Places
Lecture 194 UI State with Bookable Places
Lecture 195 Filtering & Navigation
Lecture 196 Booking Places
Lecture 197 Fixing a Bug
Lecture 198 Canceling Bookings
Lecture 199 Finishing Touches
Lecture 200 Useful Resources & Links
Section 12: Sending Http Requests
Lecture 201 Module Introduction
Lecture 202 How To Connect to a Backend
Lecture 203 Setting Up Firebase
Lecture 204 Sending Data via Http
Lecture 205 Using Response Data
Lecture 206 Fetching & Displaying Data
Lecture 207 Updating Places
Lecture 208 Fetching Data in Multiple Places
Lecture 209 Loading Data in a Single Place
Lecture 210 Updating Places Correctly
Lecture 211 Error Handling
Lecture 212 Fetching Single Places
Lecture 213 Adding a Booking
Lecture 214 Fetching Bookings By User
Lecture 215 Deleting Bookings
Lecture 216 Wrap Up
Lecture 217 Useful Resources & Links
Section 13: Adding Google Maps
Lecture 218 Module Introduction
Lecture 219 API Setup
Lecture 220 Angular 8 & @ViewChild()
Lecture 221 Adding a LocationPicker Component
Lecture 222 Opening the Map Modal
Lecture 223 Adding the Google Maps SDK
Lecture 224 Rendering a Map
Lecture 225 Picking Locations via a Click on the Map
Lecture 226 Finding the Address for a Place
Lecture 227 Fetching a Static Image URL
Lecture 228 Displaying a Place Preview
Lecture 229 Changing the Selection
Lecture 230 Removing the Click Listener
Lecture 231 Submitting the Location
Lecture 232 Outputting Address & Map
Lecture 233 Re-using the Maps Modal
Lecture 234 Useful Resources & Links
Section 14: Using Native Device Features (Camera & Location)
Lecture 235 Module Introduction
Lecture 236 Understanding Capacitor & Cordova
Lecture 237 Using the Docs
Lecture 238 Using Capacitor v3
Lecture 239 Using Capacitor Plugins
Lecture 240 Getting the User Location
Lecture 241 Testing the Location Feature
Lecture 242 Angular 8 & @ViewChild()
Lecture 243 Starting With the Image Picker
Lecture 244 Taking Pictures
Lecture 245 Avoid Distorted Pictures
Lecture 246 Detecting the Platform Correctly
Lecture 247 Adding a Filepicker Fallback
Lecture 248 Getting the Picked Image
Lecture 249 Converting the Image String to a File
Lecture 250 Storing the Image in the Form
Lecture 251 Capacitor v1 & PWA Elements
Lecture 252 Using PWA Elements
Lecture 253 Improving the ImagePicker Component
Lecture 254 MUST READ: Firebase Cloud Functions Billing
Lecture 255 Adding Server-side Image Uploading Code
Lecture 256 Adding Image Upload
Lecture 257 Wrap Up
Lecture 258 Useful Resources & Links
Section 15: Adding Authentication
Lecture 259 Module Introduction
Lecture 260 How Authentication Works
Lecture 261 Firebase API Key
Lecture 262 Adding User Signup
Lecture 263 Refactoring the Authentication Code
Lecture 264 Adding User Login
Lecture 265 Managing the User with a Subject
Lecture 266 Storing the Token in Memory
Lecture 267 Using the ID Observable Correctly
Lecture 268 More userId Usage
Lecture 269 Fixing the Subscription
Lecture 270 Using the userId Everywhere
Lecture 271 Storing Auth Data in Device Storag
Lecture 272 Adding Autologin
Lecture 273 Using Autologin
Lecture 274 Adding a Reactive Logout System
Lecture 275 Adding Autologout
Lecture 276 Requiring the Auth Token on the Backend
Lecture 277 Sending the Auth Token to the Backend
Lecture 278 More Token Usage
Lecture 279 Optional: Check Auth State When App Resumes
Lecture 280 Wrap Up
Lecture 281 Useful Resources & Links
Section 16: Publishing the Apps
Lecture 282 Module Introduction
Lecture 283 Preparing App Configs
Lecture 284 Custom Icons & Splash Screens
Lecture 285 Android Deployment
Lecture 286 iOS Deployment
Lecture 287 Web Development
Lecture 288 Useful Resources & Links
Section 17: Roundup
Lecture 289 Thanks for being part of the course!
Section 18: Bonus Content
Lecture 290 Bonus: More Content!
Lecture 187 Module Introduction
Lecture 188 What is State?
Lecture 189 Adding New Places
Lecture 190 Using RxJS Subjects for State Management
Lecture 191 Passing Data via Subjects & Subscriptions
Lecture 192 UI State in Action
Lecture 193 Updating Places
Lecture 194 UI State with Bookable Places
Lecture 195 Filtering & Navigation
Lecture 196 Booking Places
Lecture 197 Fixing a Bug
Lecture 198 Canceling Bookings
Lecture 199 Finishing Touches
Lecture 200 Useful Resources & Links
Section 12: Sending Http Requests
Lecture 201 Module Introduction
Lecture 202 How To Connect to a Backend
Lecture 203 Setting Up Firebase
Lecture 204 Sending Data via Http
Lecture 205 Using Response Data
Lecture 206 Fetching & Displaying Data
Lecture 207 Updating Places
Lecture 208 Fetching Data in Multiple Places
Lecture 209 Loading Data in a Single Place
Lecture 210 Updating Places Correctly
Lecture 211 Error Handling
Lecture 212 Fetching Single Places
Lecture 213 Adding a Booking
Lecture 214 Fetching Bookings By User
Lecture 215 Deleting Bookings
Lecture 216 Wrap Up
Lecture 217 Useful Resources & Links
Section 13: Adding Google Maps
Lecture 218 Module Introduction
Lecture 219 API Setup
Lecture 220 Angular 8 & @ViewChild()
Lecture 221 Adding a LocationPicker Component
Lecture 222 Opening the Map Modal
Lecture 223 Adding the Google Maps SDK
Lecture 224 Rendering a Map
Lecture 225 Picking Locations via a Click on the Map
Lecture 226 Finding the Address for a Place
Lecture 227 Fetching a Static Image URL
Lecture 228 Displaying a Place Preview
Lecture 229 Changing the Selection
Lecture 230 Removing the Click Listener
Lecture 231 Submitting the Location
Lecture 232 Outputting Address & Map
Lecture 233 Re-using the Maps Modal
Lecture 234 Useful Resources & Links
Section 14: Using Native Device Features (Camera & Location)
Lecture 235 Module Introduction
Lecture 236 Understanding Capacitor & Cordova
Lecture 237 Using the Docs
Lecture 238 Using Capacitor v3
Lecture 239 Using Capacitor Plugins
Lecture 240 Getting the User Location
Lecture 241 Testing the Location Feature
Lecture 242 Angular 8 & @ViewChild()
Lecture 243 Starting With the Image Picker
Lecture 244 Taking Pictures
Lecture 245 Avoid Distorted Pictures
Lecture 246 Detecting the Platform Correctly
Lecture 247 Adding a Filepicker Fallback
Lecture 248 Getting the Picked Image
Lecture 249 Converting the Image String to a File
Lecture 250 Storing the Image in the Form
Lecture 251 Capacitor v1 & PWA Elements
Lecture 252 Using PWA Elements
Lecture 253 Improving the ImagePicker Component
Lecture 254 MUST READ: Firebase Cloud Functions Billing
Lecture 255 Adding Server-side Image Uploading Code
Lecture 256 Adding Image Upload
Lecture 257 Wrap Up
Lecture 258 Useful Resources & Links
Section 15: Adding Authentication
Lecture 259 Module Introduction
Lecture 260 How Authentication Works
Lecture 261 Firebase API Key
Lecture 262 Adding User Signup
Lecture 263 Refactoring the Authentication Code
Lecture 264 Adding User Login
Lecture 265 Managing the User with a Subject
Lecture 266 Storing the Token in Memory
Lecture 267 Using the ID Observable Correctly
Lecture 268 More userId Usage
Lecture 269 Fixing the Subscription
Lecture 270 Using the userId Everywhere
Lecture 271 Storing Auth Data in Device Storag
Lecture 272 Adding Autologin
Lecture 273 Using Autologin
Lecture 274 Adding a Reactive Logout System
Lecture 275 Adding Autologout
Lecture 276 Requiring the Auth Token on the Backend
Lecture 277 Sending the Auth Token to the Backend
Lecture 278 More Token Usage
Lecture 279 Optional: Check Auth State When App Resumes
Lecture 280 Wrap Up
Lecture 281 Useful Resources & Links
Section 16: Publishing the Apps
Lecture 282 Module Introduction
Lecture 283 Preparing App Configs
Lecture 284 Custom Icons & Splash Screens
Lecture 285 Android Deployment
Lecture 286 iOS Deployment
Lecture 287 Web Development
Lecture 288 Useful Resources & Links
Section 17: Roundup
Lecture 289 Thanks for being part of the course!
Section 18: Bonus Content
Lecture 290 Bonus: More Content!
This course is for students who want to use their Angular knowledge to build native mobile apps & web apps with one codebase,This course is for everyone interested in diving into the development of native mobile apps for iOS and Android
Course Information:
Udemy | English | 20h 24m | 10.86 GB
Created by: Maximilian Schwarzmüller
You Can See More Courses in the Developer >> Greetings from CourseDown.com