Ionic 4 - Build iOS, Android & Web Apps with Ionic & Angular

19h 48m 52s
English
Paid

Course description

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.

Read more about the course

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 ... like styling and theming your app

  • 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)

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
Who this course is for:
  • 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

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

Watch Online

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 242 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing

Watch Online Ionic 4 - Build iOS, Android & Web Apps with Ionic & Angular

0:00
/
#1: Course Introduction

All Course Lessons (242)

#Lesson TitleDurationAccess
1
Course Introduction Demo
02:28
2
What Is Ionic?
07:45
3
A Closer Look at the Ionic Platform
04:29
4
What is Angular?
04:00
5
Our First Ionic App!
13:37
6
The History of Ionic
04:03
7
Ionic 4+ vs Ionic 3
03:07
8
How to Build Native Mobile Apps with Ionic
03:46
9
Course Outline
06:24
10
How To Get The Most Out Of The Course
03:03
11
Module Introduction
00:33
12
What is Angular?
02:43
13
Angular SPAs & Ionic
03:10
14
Understanding Components
01:38
15
Installing Angular with the CLI
04:30
16
Installing the IDE
05:00
17
Understanding the Folder Structure
08:15
18
The App Component
07:05
19
Creating Our First Component
04:06
20
Cross Component Communication with Property Binding
05:24
21
Understanding Directives & String Interpolation
04:06
22
Handling User Input
04:09
23
Understanding Event Binding
02:14
24
Local References
01:50
25
Understanding Two-Way-Binding
05:57
26
Passing Data Around with Custom Events
03:59
27
Implementing Routing
07:11
28
Setting Up Services
03:16
29
Using Services with Dependency Injection
02:49
30
Working with Angular Lifecycle Hooks
03:26
31
Adding a Person with Services
02:45
32
Navigating between Components
02:04
33
Removing Items Upon a Click
03:09
34
"Push"ing Data Around with Subjects
05:35
35
Sending Http Requests
10:04
36
Showing a Placeholder Whilst Waiting for a Response
02:06
37
Wrap Up
01:18
38
Module Introduction
01:21
39
Core App Building Blocks
04:27
40
Under the Hood of Ionic Components
06:48
41
Setting Up a Non-Angular Ionic Project
03:05
42
Where to Learn all about Ionic Components
02:30
43
Using Basic Ionic Components
05:12
44
More Basic Components
03:24
45
Component Categories
02:28
46
Using the Ionic Grid
04:52
47
Adding Icons & Using Slots
06:15
48
Using CSS Utility Attributes
03:43
49
Using Ionic Elements like "Normal" HTML Elements
04:13
50
Validating User Input
02:47
51
Creating Ionic Elements Programmatically
04:58
52
Finishing Up the Base JavaScript Logic
03:40
53
Finalizing the Layout
01:32
54
Using Controller Components
06:29
55
Why Angular?
05:30
56
Module Introduction
01:45
57
Why Use Angular?
02:40
58
Creating a New Ionic Angular Project
05:50
59
Analyzing the Created Project
05:55
60
How Angular & Ionic Work Together
03:54
61
Adding & Loading a New Page
07:45
62
Using Angular Features on Ionic Components
05:29
63
Setting Up Angular Routes
04:07
64
Managing State with Services
06:22
65
Extracting and Displaying Route Param Data
08:35
66
Navigating Between Pages
05:33
67
Deleting a Recipe
04:35
68
Injecting Ionic Controllers
03:32
69
Angular Components vs Ionic Components
05:50
70
Wrap Up
00:38
71
Module Introduction
01:00
72
General Information
01:29
73
Creating an Android App
12:34
74
Creating an iOS App
09:11
75
Wrap Up
01:04
76
Module Introduction
00:45
77
Error Messages & console.log()
04:03
78
Using the Browser DevTools & Breakpoints
02:31
79
Debugging the UI & Performance
02:54
80
Debugging Android Apps
04:17
81
Debugging iOS Apps
04:17
82
Wrap Up
00:41
83
Module Introduction
01:42
84
How Routing Work In An Ionic + Angular App
04:38
85
Ionic Page Caching & Extra Lifecycle Hooks
09:21
86
Planning the Course Project
04:07
87
Creating Our App Pages
07:45
88
Adjusting Our Main Routing Configuration
02:00
89
Understanding Ionic Tabs
01:30
90
Adding Tabs to the App
15:23
91
Preparing Data & Services for the Project
05:54
92
Outputting "Places"
08:13
93
Adding Forward Navigation
06:22
94
Going Back with NavController
07:02
95
Navigating via Toolbar Buttons
03:14
96
Extracting the ID of Loaded Places
05:35
97
Adding a SideDrawer
07:01
98
Opening + Closing the SideDrawer
04:47
99
Adding Links & Switching Pages
04:16
100
Adding the Auth Service
03:29
101
Adding an Auth Guard
07:48
102
Opening a Modal
06:27
103
Closing the Modal & Passing Data
07:22
104
Wrap Up
01:25
105
Module Introduction
01:53
106
Attributes & Slots
06:10
107
Ionic Grid Basics
08:36
108
Controlling Grid Column Sizes
03:45
109
Controlling Grid Alignment
05:30
110
Responsive Grid Sizing
05:11
111
Grid Summary
02:12
112
ion-list vs ion-grid
03:07
113
ion-label & ion-item
07:30
114
ion-text
02:40
115
Swipeable List Items
11:09
116
Swipeable Bookings
10:13
117
Understanding Virtual Scrolling
03:51
118
Implementing Virtual Scrolling
05:24
119
Adding Image Elements
02:46
120
Segmented Buttons
05:48
121
Adding a Spinner
04:18
122
Using the Loading Controller
02:37
123
Using the ActionSheet Controller
06:51
124
Wrap Up
01:43
125
Module Introduction
01:13
126
How Styling & Theming Works in Ionic Apps
06:45
127
Docs & Utility Attributes
01:14
128
Setting Global Theme Variables
03:29
129
Setting Global Styles
01:19
130
Setting All Colors at Once
02:36
131
Setting Platform-Specific Styles
03:59
132
Styling Core Components with Variables
08:14
133
Adding Custom CSS Rules
10:02
134
Component-specific CSS Variables
04:33
135
Wrap Up
00:41
136
Module Introduction
01:33
137
User Input Requirements
01:21
138
Setting Up a Form Template
05:46
139
Adding a Template-driven Form
07:38
140
Handling Validation
06:03
141
Switching Between Auth Modes
02:36
142
Finishing the Auth Form
02:29
143
Starting Work on a New Offer Form
03:55
144
Finishing the Offer Form Template
04:23
145
Creating a Reactive Form
05:22
146
Syncing the Form to the Template
04:01
147
Finishing the New Offer Form
04:02
148
Edit Form Challenge
00:53
149
Adding the Edit Offer Form
05:37
150
Starting with the Booking Form
04:34
151
Working on the Book Place Template
06:00
152
Configuring the Date Controls
11:45
153
Validating & Submitting the Form
07:46
154
Wrap Up
01:27
155
Module Introduction
01:06
156
What is State?
04:02
157
Adding New Places
12:15
158
Using RxJS Subjects for State Management
09:00
159
Passing Data via Subjects & Subscriptions
12:25
160
UI State in Action
08:11
161
Updating Places
08:41
162
UI State with Bookable Places
07:02
163
Booking Places
16:06
164
Fixing a Bug
00:26
165
Canceling Bookings
04:55
166
Finishing Touches
04:37
167
Module Introduction
00:47
168
How To Connect to a Backend
02:14
169
Setting Up Firebase
02:12
170
Sending Data via Http
07:13
171
Using Response Data
03:37
172
Fetching & Displaying Data
14:51
173
Updating Places
06:39
174
Fetching Data in Multiple Places
03:16
175
Loading Data in a Single Place
07:00
176
Updating Places Correctly
03:53
177
Error Handling
03:28
178
Fetching Single Places
06:19
179
Adding a Booking
06:47
180
Fetching Bookings By User
10:08
181
Deleting Bookings
05:12
182
Wrap Up
00:57
183
Module Introduction
01:30
184
API Setup
03:33
185
Adding a LocationPicker Component
06:52
186
Opening the Map Modal
04:00
187
Adding the Google Maps SDK
08:45
188
Rendering a Map
06:05
189
Picking Locations via a Click on the Map
03:42
190
Finding the Address for a Place
08:48
191
Fetching a Static Image URL
07:20
192
Displaying a Place Preview
05:13
193
Changing the Selection
01:02
194
Removing the Click Listener
02:11
195
Submitting the Location
08:15
196
Outputting Address & Map
03:24
197
Re-using the Maps Modal
08:37
198
Module Introduction
00:58
199
Understanding Capacitor & Cordova
04:13
200
Using the Docs
00:57
201
Using Capacitor Plugins
06:40
202
Getting the User Location
09:38
203
Testing the Location Feature
06:18
204
Starting With the Image Picker
04:27
205
Taking Pictures
10:12
206
Detecting the Platform Correctly
05:01
207
Adding a Filepicker Fallback
04:44
208
Getting the Picked Image
03:01
209
Converting the Image String to a File
05:14
210
Storing the Image in the Form
03:31
211
Using PWA Elements
04:07
212
Improving the ImagePicker Component
04:47
213
Adding Server-side Image Uploading Code
05:05
214
Adding Image Upload
07:31
215
Wrap Up
01:07
216
Module Introduction
00:52
217
How Authentication Works
03:01
218
Adding User Signup
10:06
219
Refactoring the Authentication Code
06:34
220
Adding User Login
06:24
221
Managing the User with a Subject
06:42
222
Storing the Token in Memory
04:56
223
Using the ID Observable Correctly
04:43
224
More userId Usage
04:58
225
Fixing the Subscription
00:50
226
Using the userId Everywhere
05:57
227
Storing Auth Data in Device Storag
04:23
228
Adding Autologin
06:49
229
Using Autologin
04:16
230
Adding a Reactive Logout System
07:53
231
Adding Autologout
08:01
232
Requiring the Auth Token on the Backend
06:23
233
Sending the Auth Token to the Backend
07:56
234
More Token Usage
04:13
235
Wrap Up
01:36
236
Module Introduction
01:07
237
Preparing App Configs
07:53
238
Custom Icons & Splash Screens
08:54
239
Android Deployment
03:55
240
iOS Deployment
03:34
241
Web Development
05:46
242
Course Roundup
01:38

Unlock unlimited learning

Get instant access to all 241 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

Create a full Ionic app with material design - full stack

Create a full Ionic app with material design - full stack

Sources: udemy
It's time to level up and take your design and development skills to the next level: hybrid app development. Ionic 3 allows you to build powerful hybrid apps th
3 hours 41 minutes 22 seconds
Ionic 4 Firebase Master Course

Ionic 4 Firebase Master Course

Sources: fireship.io
The Ionic4 Master Course will teach you the fundamentals of full-stack cross-platform app development, using the combined powers of Angular & Firebase.
1 hour 31 minutes 27 seconds