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

Build native iOS & Android as well as Progressive Web Apps with Angular, Capacitor and the Ionic Framework.

Start

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 top-rated courses - including my "Angular - The Complete Guide" course, the bestselling Angular course you can find!

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)

Does this sound great?

I can't wait to welcome you in this course!

Section: Getting Started

1. Course Introduction (2:25) Preview
2. What Is Ionic? (7:44) Preview
3. A Closer Look at the Ionic Platform (4:27) Preview
4. Join our Online Learning Community (1:00) Preview
5. What is Angular? (3:59) Preview
6. Our First Ionic App! (13:36) Preview
7. The History of Ionic (4:01) Preview
8. Ionic 4+ vs Ionic 3 (3:06) Preview
9. How to Build Native Mobile Apps with Ionic (3:45) Preview
10. Ionic Alternatives (1:00) Preview
11. Course Outline (6:23) Preview
12. How To Get The Most Out Of The Course (3:00) Preview
13. The Course Source Code (1:00) Preview

Section: Angular Refresher

14. Module Introduction (0:32)
15. What is Angular? (2:42)
16. Angular SPAs & Ionic (3:09)
17. Understanding Components (1:37)
18. Installing Angular with the CLI (4:29)
19. Installing the IDE (4:59)
20. Understanding the Folder Structure (8:14)
21. The App Component (7:04)
22. Creating Our First Component (4:05)
23. Cross Component Communication with Property Binding (5:23)
24. Understanding Directives & String Interpolation (4:05)
25. Handling User Input (4:08)
26. Understanding Event Binding (2:13)
27. Local References (1:49)
28. Understanding Two-Way-Binding (5:56)
29. Passing Data Around with Custom Events (3:58)
30. Implementing Routing (7:10)
31. Setting Up Services (3:15)
32. Using Services with Dependency Injection (2:48)
33. Working with Angular Lifecycle Hooks (3:25)
34. Adding a Person with Services (2:44)
35. Navigating between Components (2:03)
36. Removing Items Upon a Click (3:08)
37. "Push"ing Data Around with Subjects (5:34)
38. More on RxJS & Observables (1:00)
39. Sending Http Requests (10:03)
40. Showing a Placeholder Whilst Waiting for a Response (2:05)
41. Wrap Up (1:17)
42. Useful Resources & Links (1:00)

Section: Ionic Component Basics

43. Module Introduction (1:20)
44. Core App Building Blocks (4:26)
45. Under the Hood of Ionic Components (6:47)
46. Setting Up a Non-Angular Ionic Project (3:04)
47. Where to Learn all about Ionic Components (2:29)
48. Using Basic Ionic Components (5:11)
49. More Basic Components (3:23)
50. Component Categories (2:27)
51. Using the Ionic Grid (4:51)
52. Adding Icons & Using Slots (6:14)
53. Using CSS Utility Attributes (3:42)
54. Using Ionic Elements like "Normal" HTML Elements (4:12)
55. Validating User Input (2:46)
56. Creating Ionic Elements Programmatically (4:57)
57. Finishing Up the Base JavaScript Logic (3:39)
58. Finalizing the Layout (1:31)
59. Using Controller Components (7:48)
60. Assignment: Component Basics (Problem) (1:42)
61. Assignment: Component Basics (Solution) (12:28)
62. Why Angular? (5:29)
63. Useful Resources & Links (1:00)

Section: Angular + Ionic

64. Module Introduction (1:44)
65. Why Use Angular? (2:39)
66. Creating a New Ionic Angular Project (5:49)
67. Analyzing the Created Project (5:53)
68. How Angular & Ionic Work Together (3:53)
69. Adding & Loading a New Page (7:44)
70. Using Angular Features on Ionic Components (5:28)
71. Setting Up Angular Routes (4:06)
72. Managing State with Services (6:21)
73. Extracting and Displaying Route Param Data (8:34)
74. Navigating Between Pages (5:32)
75. Deleting a Recipe (4:34)
76. Injecting Ionic Controllers (3:31)
77. Angular Components vs Ionic Components (5:49)
78. Wrap Up (0:37)
79. Useful Resources & Links (1:00)

Section: Building Native Apps with Capacitor

80. Module Introduction (0:59)
81. General Information (1:28)
82. Creating an Android App (12:33)
83. Running the App on a real Android Device (1:00)
84. Creating an iOS App (9:10)
85. Running the App on a Real iOS Device (1:00)
86. Wrap Up (1:03)
87. Useful Resources & Links (1:00)

Section: Debugging

88. Module Introduction (0:44)
89. Error Messages & console.log() (4:02)
90. Using the Browser DevTools & Breakpoints (2:30)
91. Using VS Code for Debugging (1:00)
92. Debugging the UI & Performance (2:53)
93. Debugging Android Apps (4:16)
94. Debugging iOS Apps (4:16)
95. Wrap Up (0:40)
96. Useful Resources & Links (1:00)

Section: Navigation & Routing in Ionic Apps

97. Module Introduction (1:41)
98. How Routing Work In An Ionic + Angular App (4:37)
99. Ionic Page Caching & Extra Lifecycle Hooks (9:20)
100. Creating Our App Pages (7:44)
101. Adjusting Our Main Routing Configuration (1:59)
102. Understanding Ionic Tabs (1:29)
103. Adding Tabs to the App (15:22)
104. Preparing Data & Services for the Project (5:53)
105. Outputting "Places" (8:12)
106. Adding Forward Navigation (6:21)
107. Going Back with NavController (7:01)
108. Assignment: Ionic + Angular Navigation (Problem) (1:20)
109. Assignment: Ionic + Angular Navigation (Solution) (4:15)
110. Navigating via Toolbar Buttons (3:13)
111. Extracting the ID of Loaded Places (5:34)
112. Assignment: More Practicing! (Problem) (0:42)
113. Assignment: More Practicing! (Solution) (5:33)
114. Adding a SideDrawer (7:00)
115. Opening + Closing the SideDrawer (4:46)
116. Adding Links & Switching Pages (4:15)
117. Adding the Auth Service (3:28)
118. Adding an Auth Guard (7:47)
119. Opening a Modal (6:26)
120. Closing the Modal & Passing Data (7:21)
121. Wrap Up (1:24)
122. Useful Resources & Links (1:00)

Section: Ionic Components Overview

123. Module Introduction (1:52)
124. Attributes & Slots (6:09)
125. Ionic Grid Basics (8:35)
126. Controlling Grid Column Sizes (3:44)
127. Controlling Grid Alignment (5:29)
128. Responsive Grid Sizing (5:10)
129. Grid Summary (2:11)
130. ion-list vs ion-grid (3:06)
131. ion-label & ion-item (7:29)
132. ion-text (2:39)
133. Swipeable List Items (11:08)
134. Swipeable Bookings (10:12)
135. Understanding Virtual Scrolling (3:50)
136. Implementing Virtual Scrolling (5:23)
137. Adding Image Elements (2:45)
138. Segmented Buttons (5:47)
139. Adding a Spinner (4:17)
140. Using the Loading Controller (2:36)
141. Using the ActionSheet Controller (6:50)
142. Wrap Up (1:42)
143. Useful Resources & Links (1:00)

Section: Styling & Theming Ionic Apps

144. Module Introduction (1:12)
145. How Styling & Theming Works in Ionic Apps (6:44)
146. Docs & Utility Attributes (1:13)
147. Setting Global Theme Variables (3:28)
148. Setting Global Styles (1:18)
149. Setting All Colors at Once (2:35)
150. Setting Platform-Specific Styles (3:58)
151. Styling Core Components with Variables (8:13)
152. Adding Custom CSS Rules (10:01)
153. Component-specific CSS Variables (4:32)
154. Wrap Up (0:40)
155. Useful Resources & Links (1:00)

Section: Handling User Input

156. Module Introduction (1:32)
157. User Input Requirements (1:20)
158. Setting Up a Form Template (5:45)
159. Adding a Template-driven Form (7:37)
160. Handling Validation (6:02)
161. Switching Between Auth Modes (2:35)
162. Finishing the Auth Form (2:28)
163. Starting Work on a New Offer Form (3:54)
164. Finishing the Offer Form Template (4:22)
165. Creating a Reactive Form (5:21)
166. Syncing the Form to the Template (4:00)
167. Finishing the New Offer Form (4:01)
168. Edit Form Challenge (0:52)
169. Adding the Edit Offer Form (5:36)
170. Starting with the Booking Form (4:33)
171. Working on the Book Place Template (5:59)
172. Configuring the Date Controls (11:44)
173. Validating & Submitting the Form (8:12)
174. Wrap Up (1:26)
175. Useful Resources & Links (1:00)

Section: Managing State

176. Module Introduction (1:05)
177. What is State? (4:01)
178. Adding New Places (12:14)
179. Using RxJS Subjects for State Management (8:59)
180. Passing Data via Subjects & Subscriptions (12:24)
181. UI State in Action (8:10)
182. Updating Places (8:40)
183. UI State with Bookable Places (7:01)
184. Filtering & Navigation (1:00)
185. Booking Places (16:05)
186. Fixing a Bug (0:25)
187. Canceling Bookings (4:54)
188. Finishing Touches (4:36)
189. Useful Resources & Links (1:00)

Section: Sending Http Requests

190. Module Introduction (0:46)
191. How To Connect to a Backend (2:13)
192. Setting Up Firebase (2:11)
193. Sending Data via Http (7:12)
194. Using Response Data (3:36)
195. Fetching & Displaying Data (14:50)
196. Updating Places (6:38)
197. Fetching Data in Multiple Places (3:15)
198. Loading Data in a Single Place (6:59)
199. Updating Places Correctly (3:52)
200. Error Handling (3:27)
201. Fetching Single Places (6:18)
202. Adding a Booking (6:46)
203. Fetching Bookings By User (10:07)
204. Deleting Bookings (5:11)
205. Wrap Up (0:56)
206. Useful Resources & Links (1:00)

Section: Adding Google Maps

207. Module Introduction (1:29)
208. API Setup (3:32)
209. Adding a LocationPicker Component (6:51)
210. Opening the Map Modal (3:59)
211. Adding the Google Maps SDK (8:44)
212. Rendering a Map (6:04)
213. Picking Locations via a Click on the Map (3:41)
214. Finding the Address for a Place (8:47)
215. Fetching a Static Image URL (7:19)
216. Displaying a Place Preview (5:12)
217. Changing the Selection (1:01)
218. Removing the Click Listener (2:10)
219. Submitting the Location (8:14)
220. Outputting Address & Map (3:23)
221. Re-using the Maps Modal (8:36)
222. Useful Resources & Links (1:00)

Section: Using Native Device Features (Camera & Location)

223. Module Introduction (0:57)
224. Understanding Capacitor & Cordova (4:12)
225. Using the Docs (0:56)
226. Using Capacitor Plugins (6:39)
227. Getting the User Location (9:37)
228. Testing the Location Feature (6:17)
229. Starting With the Image Picker (4:26)
230. Taking Pictures (10:11)
231. Avoid Distorted Pictures (1:00)
232. Detecting the Platform Correctly (5:00)
233. Adding a Filepicker Fallback (4:43)
234. Getting the Picked Image (3:00)
235. Converting the Image String to a File (5:13)
236. Storing the Image in the Form (3:30)
237. Using PWA Elements (4:06)
238. Improving the ImagePicker Component (4:46)
239. MUST READ: Firebase Cloud Functions & Billing (1:00)
240. Adding Server-side Image Uploading Code (5:04)
241. Adding Image Upload (7:30)
242. Wrap Up (1:06)
243. Useful Resources & Links (1:00)

Section: Adding Authentication

244. Module Introduction (0:51)
245. How Authentication Works (3:00)
246. Adding User Signup (10:05)
247. Refactoring the Authentication Code (6:33)
248. Adding User Login (6:23)
249. Managing the User with a Subject (6:41)
250. Storing the Token in Memory (4:55)
251. Using the ID Observable Correctly (4:42)
252. More userId Usage (4:57)
253. Fixing the Subscription (0:49)
254. Using the userId Everywhere (5:56)
255. Storing Auth Data in Device Storag (4:22)
256. Adding Autologin (6:48)
257. Using Autologin (4:15)
258. Adding a Reactive Logout System (7:52)
259. Adding Autologout (8:00)
260. Requiring the Auth Token on the Backend (6:22)
261. Sending the Auth Token to the Backend (7:55)
262. More Token Usage (4:12)
263. Optional: Check Auth State When App Resumes (1:00)
264. Wrap Up (1:35)
265. Useful Resources & Links (1:00)

Section: Publishing the Apps

266. Module Introduction (1:06)
267. Preparing App Configs (7:52)
268. Custom Icons & Splash Screens (8:53)
269. Android Deployment (3:54)
270. iOS Deployment (3:33)
271. Web Development (5:45)
272. Useful Resources & Links (1:00)

Section: Course Roundup

273. Course Roundup (1:37)

Course Instructor

Image

Maximilian Schwarzmüller

As a self-taught professional I really know the hard parts and the difficult topics when learning new or improving on already-known languages. This background and experience enable me to focus on the most relevant key concepts and topics. My track record of many 5-star rated courses, more than 1,000,000 students worldwide as well as a successful YouTube channel is the best proof for that.

The most rewarding experience for me is to see how people find new, better jobs, build awesome web applications, work on amazing projects or simply enjoy their hobby with the help of my content. That's why, together with Manuel Lorenz, I founded Academind to offer the best possible learning experience and to share the pleasure of learning with our students.