English | MP4 | AVC 1920×1080 | AAC 48KHz 2ch | 290 lectures (20h 24m) | 9.84 GB
Build Native iOS & Android as well as Progressive Web Apps with Angular, Capacitor and the Ionic Framework (Ionic 4+).
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 Angular
How to set up your Ionic projects
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 ships with
- How to use different kinds of navigation concepts: “Back”-Button-Navigation, tabs and sidemenus
- How to show modals, alerts, toasts and many, many more useful UI components
- How to test the app in the browser, on emulators or real devices
- How to fetch and handle user input through inputs, textfields, dropdowns, dialogs etc.
- How to authenticate users and access web servers to store + load data
- How to access the local device storage and native device features like the camera or geolocation
- So much more!
- Finally, 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)
Table of Contents
Getting Started
1 Course Introduction
2 What Is Ionic
3 Join our Online Learning Community
4 A Closer Look at the Ionic Platform
5 What is Angular
6 Nodejs Download
7 Our First Ionic App
8 The History of Ionic
9 Ionic 4 vs Ionic 3
10 How to Build Native Mobile Apps with Ionic
11 Comparing Ionic to Alternatives
12 Course Outline
13 How To Get The Most Out Of The Course
14 The Course Source Code
Angular Refresher
15 Module Introduction
16 What is Angular
17 Angular SPAs Ionic
18 Understanding Components
19 Important Creating an Angular Project with the CLI
20 Installing Angular with the CLI
21 Installing the IDE
22 Understanding the Folder Structure
23 The App Component
24 Creating Our First Component
25 Cross Component Communication with Property Binding
26 Understanding Directives String Interpolation
27 Handling User Input
28 Understanding Event Binding
29 Local References
30 Understanding TwoWayBinding
31 Passing Data Around with Custom Events
32 Implementing Routing
33 Setting Up Services
34 Using Services with Dependency Injection
35 Working with Angular Lifecycle Hooks
36 Adding a Person with Services
37 Navigating between Components
38 Removing Items Upon a Click
39 Pushing Data Around with Subjects
40 More on RxJS Observables
41 Sending Http Requests
42 Showing a Placeholder Whilst Waiting for a Response
43 Wrap Up
44 Useful Resources Links
Ionic Component Basics
45 Module Introduction
46 Core App Building Blocks
47 Under the Hood of Ionic Components
48 Setting Up a NonAngular Ionic Project
49 Where to Learn all about Ionic Components
50 Using Basic Ionic Components
51 More Basic Components
52 Component Categories
53 Using the Ionic Grid
54 Adding Icons Using Slots
55 Using CSS Utility Attributes
56 Using Ionic Elements like Normal HTML Elements
57 Validating User Input
58 Creating Ionic Elements Programmatically
59 Finishing Up the Base JavaScript Logic
60 Finalizing the Layout
61 Use the right Ionic Import
62 Using Controller Components
63 Why Angular
64 Useful Resources Links
Angular Ionic
65 Module Introduction
66 Why Use Angular
67 Important Creating a New Project with the CLI
68 Creating a New Ionic Angular Project
69 Important CSS Utility Attributes
70 Analyzing the Created Project
71 How Angular Ionic Work Together
72 Important Extra Routing Modules
73 Adding Loading a New Page
74 Using Angular Features on Ionic Components
75 Setting Up Angular Routes
76 Managing State with Services
77 Extracting and Displaying Route Param Data
78 A Potential Bug Fix
79 Navigating Between Pages
80 Deleting a Recipe
81 Theres a Bug
82 Injecting Ionic Controllers
83 Angular Components vs Ionic Components
84 Wrap Up
85 Useful Resources Links
Building Native Apps with Capacitor
86 Module Introduction
87 General Information
88 Creating an Android App
89 Running the App on a Real Android Device
90 Creating an iOS App
91 Running the App on a Real iOS Device
92 Wrap Up
93 Useful Resources Links
Debugging
94 Module Introduction
95 Error Messages consolelog
96 Using the Browser DevTools Breakpoints
97 Using VS Code for Debugging
98 Debugging the UI Performance
99 Debugging Android Apps
100 Debugging iOS Apps
101 Wrap Up
102 Useful Resources Links
Navigation Routing in Ionic Apps
103 Module Introduction
104 How Routing Work In An Ionic Angular App
105 Ionic Page Caching Extra Lifecycle Hooks
106 Planning the Course Project
107 Creating Our App Pages
108 MUST READ Ionic 5 and Routing Lazy Loading
109 Adjusting Our Main Routing Configuration
110 Understanding Ionic Tabs
111 Adding Tabs to the App
112 Preparing Data Services for the Project
113 Outputting Places
114 Adding Forward Navigation
115 Going Back with NavController
116 Navigating via Toolbar Buttons
117 A Bug with Ionic
118 Extracting the ID of Loaded Places
119 Optional Assignment Solution Code
120 Adding a SideDrawer
121 Opening Closing the SideDrawer
122 Adding Links Switching Pages
123 Adding the Auth Service
124 Adding an Auth Guard
125 Opening a Modal
126 Closing the Modal Passing Data
127 Wrap Up
128 Useful Resources Links
Ionic Components Overview
129 Module Introduction
130 Attributes Slots
131 Ionic Grid Basics
132 Controlling Grid Column Sizes
133 Controlling Grid Alignment
134 Responsive Grid Sizing
135 Grid Summary
136 ionlist vs iongrid
137 ionlabel ionitem
138 iontext
139 Swipeable List Items
140 Swipeable Bookings
141 Understanding Virtual Scrolling
142 Implementing Virtual Scrolling
143 Virtual Scrolling Bugs
144 Adding Image Elements
145 Segmented Buttons
146 Adding a Spinner
147 Using the Loading Controller
148 Using the ActionSheet Controller
149 Wrap Up
150 Useful Resources Links
Styling Theming Ionic Apps
151 Module Introduction
152 How Styling Theming Works in Ionic Apps
153 Docs Utility Attributes
154 Setting Global Theme Variables
155 Setting Global Styles
156 Setting All Colors at Once
157 Setting PlatformSpecific Styles
158 Styling Core Components with Variables
159 Missing iOS Icons
160 Adding Custom CSS Rules
161 Componentspecific CSS Variables
162 Wrap Up
163 Useful Resources Links
Handling User Input
164 Module Introduction
165 User Input Requirements
166 Setting Up a Form Template
167 Angular 8 ViewChild
168 Adding a Templatedriven Form
169 Handling Validation
170 Switching Between Auth Modes
171 Finishing the Auth Form
172 Starting Work on a New Offer Form
173 Finishing the Offer Form Template
174 Creating a Reactive Form
175 Syncing the Form to the Template
176 Finishing the New Offer Form
177 Edit Form Challenge
178 Adding the Edit Offer Form
179 Starting with the Booking Form
180 Working on the Book Place Template
181 Ionic 6 Date Controls
182 Configuring the Date Controls
183 Avoid Errors
184 Validating Submitting the Form
185 Wrap Up
186 Useful Resources Links
Managing State
187 Module Introduction
188 What is State
189 Adding New Places
190 Using RxJS Subjects for State Management
191 Passing Data via Subjects Subscriptions
192 UI State in Action
193 Updating Places
194 UI State with Bookable Places
195 Filtering Navigation
196 Booking Places
197 Fixing a Bug
198 Canceling Bookings
199 Finishing Touches
200 Useful Resources Links
Sending Http Requests
201 Module Introduction
202 How To Connect to a Backend
203 Setting Up Firebase
204 Sending Data via Http
205 Using Response Data
206 Fetching Displaying Data
207 Updating Places
208 Fetching Data in Multiple Places
209 Loading Data in a Single Place
210 Updating Places Correctly
211 Error Handling
212 Fetching Single Places
213 Adding a Booking
214 Fetching Bookings By User
215 Deleting Bookings
216 Wrap Up
217 Useful Resources Links
Adding Google Maps
218 Module Introduction
219 API Setup
220 Angular 8 ViewChild
221 Adding a LocationPicker Component
222 Opening the Map Modal
223 Adding the Google Maps SDK
224 Rendering a Map
225 Picking Locations via a Click on the Map
226 Finding the Address for a Place
227 Fetching a Static Image URL
228 Displaying a Place Preview
229 Changing the Selection
230 Removing the Click Listener
231 Submitting the Location
232 Outputting Address Map
233 Reusing the Maps Modal
234 Useful Resources Links
Using Native Device Features Camera Location
235 Module Introduction
236 Understanding Capacitor Cordova
237 Using the Docs
238 Using Capacitor v3
239 Using Capacitor Plugins
240 Getting the User Location
241 Testing the Location Feature
242 Angular 8 ViewChild
243 Starting With the Image Picker
244 Taking Pictures
245 Avoid Distorted Pictures
246 Detecting the Platform Correctly
247 Adding a Filepicker Fallback
248 Getting the Picked Image
249 Converting the Image String to a File
250 Storing the Image in the Form
251 Capacitor v1 PWA Elements
252 Using PWA Elements
253 Improving the ImagePicker Component
254 MUST READ Firebase Cloud Functions Billing
255 Adding Serverside Image Uploading Code
256 Adding Image Upload
257 Wrap Up
258 Useful Resources Links
Adding Authentication
259 Module Introduction
260 How Authentication Works
261 Firebase API Key
262 Adding User Signup
263 Refactoring the Authentication Code
264 Adding User Login
265 Managing the User with a Subject
266 Storing the Token in Memory
267 Using the ID Observable Correctly
268 More userId Usage
269 Fixing the Subscription
270 Using the userId Everywhere
271 Storing Auth Data in Device Storag
272 Adding Autologin
273 Using Autologin
274 Adding a Reactive Logout System
275 Adding Autologout
276 Requiring the Auth Token on the Backend
277 Sending the Auth Token to the Backend
278 More Token Usage
279 Optional Check Auth State When App Resumes
280 Wrap Up
281 Useful Resources Links
Publishing the Apps
282 Module Introduction
283 Preparing App Configs
284 Custom Icons Splash Screens
285 Android Deployment
286 iOS Deployment
287 Web Development
288 Useful Resources Links
Roundup
289 Thanks for being part of the course
Bonus Content
290 Bonus More Content
Resolve the captcha to access the links!