Ionic 4 - Build iOS, Android & Web Apps with Ionic & Angular
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.
More
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)
- 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
- 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 Ionic 4 - Build iOS, Android & Web Apps with Ionic & Angular
| # | Title | Duration |
|---|---|---|
| 1 | Course Introduction | 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 |
Similar courses to Ionic 4 - Build iOS, Android & Web Apps with Ionic & Angular
Create a full Ionic app with material design - full stack
