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 courseIonic 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!
Course content
Section 1Getting Started
- Course Introduction2:25
- What Is Ionic?7:44
- A Closer Look at the Ionic Platform4:27
- Join our Online Learning Community1:00
- What is Angular?3:59
- Our First Ionic App!13:36
- The History of Ionic4:01
- Ionic 4+ vs Ionic 33:06
- How to Build Native Mobile Apps with Ionic3:45
- Ionic Alternatives1:00
- Course Outline6:23
- How To Get The Most Out Of The Course3:00
- The Course Source Code1:00
Section 2Angular Refresher
- Module IntroductionPremium0:32
- What is Angular?Premium2:42
- Angular SPAs & IonicPremium3:09
- Understanding ComponentsPremium1:37
- Installing Angular with the CLIPremium4:29
- Installing the IDEPremium4:59
- Understanding the Folder StructurePremium8:14
- The App ComponentPremium7:04
- Creating Our First ComponentPremium4:05
- Cross Component Communication with Property BindingPremium5:23
- Understanding Directives & String InterpolationPremium4:05
- Handling User InputPremium4:08
- Understanding Event BindingPremium2:13
- Local ReferencesPremium1:49
- Understanding Two-Way-BindingPremium5:56
- Passing Data Around with Custom EventsPremium3:58
- Implementing RoutingPremium7:10
- Setting Up ServicesPremium3:15
- Using Services with Dependency InjectionPremium2:48
- Working with Angular Lifecycle HooksPremium3:25
- Adding a Person with ServicesPremium2:44
- Navigating between ComponentsPremium2:03
- Removing Items Upon a ClickPremium3:08
- "Push"ing Data Around with SubjectsPremium5:34
- More on RxJS & ObservablesPremium1:00
- Sending Http RequestsPremium10:03
- Showing a Placeholder Whilst Waiting for a ResponsePremium2:05
- Wrap UpPremium1:17
- Useful Resources & LinksPremium1:00
Section 3Ionic Component Basics
- Module IntroductionPremium1:20
- Core App Building BlocksPremium4:26
- Under the Hood of Ionic ComponentsPremium6:47
- Setting Up a Non-Angular Ionic ProjectPremium3:04
- Where to Learn all about Ionic ComponentsPremium2:29
- Using Basic Ionic ComponentsPremium5:11
- More Basic ComponentsPremium3:23
- Component CategoriesPremium2:27
- Using the Ionic GridPremium4:51
- Adding Icons & Using SlotsPremium6:14
- Using CSS Utility AttributesPremium3:42
- Using Ionic Elements like "Normal" HTML ElementsPremium4:12
- Validating User InputPremium2:46
- Creating Ionic Elements ProgrammaticallyPremium4:57
- Finishing Up the Base JavaScript LogicPremium3:39
- Finalizing the LayoutPremium1:31
- Using Controller ComponentsPremium7:48
- Assignment: Component Basics (Problem)Premium1:42
- Assignment: Component Basics (Solution)Premium12:28
- Why Angular?Premium5:29
- Useful Resources & LinksPremium1:00
Section 4Angular + Ionic
- Module IntroductionPremium1:44
- Why Use Angular?Premium2:39
- Creating a New Ionic Angular ProjectPremium5:49
- Analyzing the Created ProjectPremium5:53
- How Angular & Ionic Work TogetherPremium3:53
- Adding & Loading a New PagePremium7:44
- Using Angular Features on Ionic ComponentsPremium5:28
- Setting Up Angular RoutesPremium4:06
- Managing State with ServicesPremium6:21
- Extracting and Displaying Route Param DataPremium8:34
- Navigating Between PagesPremium5:32
- Deleting a RecipePremium4:34
- Injecting Ionic ControllersPremium3:31
- Angular Components vs Ionic ComponentsPremium5:49
- Wrap UpPremium0:37
- Useful Resources & LinksPremium1:00
Section 5Building Native Apps with Capacitor
- Module IntroductionPremium0:59
- General InformationPremium1:28
- Creating an Android AppPremium12:33
- Running the App on a real Android DevicePremium1:00
- Creating an iOS AppPremium9:10
- Running the App on a Real iOS DevicePremium1:00
- Wrap UpPremium1:03
- Useful Resources & LinksPremium1:00
Section 6Debugging
- Module IntroductionPremium0:44
- Error Messages & console.log()Premium4:02
- Using the Browser DevTools & BreakpointsPremium2:30
- Using VS Code for DebuggingPremium1:00
- Debugging the UI & PerformancePremium2:53
- Debugging Android AppsPremium4:16
- Debugging iOS AppsPremium4:16
- Wrap UpPremium0:40
- Useful Resources & LinksPremium1:00
Section 7Navigation & Routing in Ionic Apps
- Module IntroductionPremium1:41
- How Routing Work In An Ionic + Angular AppPremium4:37
- Ionic Page Caching & Extra Lifecycle HooksPremium9:20
- Creating Our App PagesPremium7:44
- Adjusting Our Main Routing ConfigurationPremium1:59
- Understanding Ionic TabsPremium1:29
- Adding Tabs to the AppPremium15:22
- Preparing Data & Services for the ProjectPremium5:53
- Outputting "Places"Premium8:12
- Adding Forward NavigationPremium6:21
- Going Back with NavControllerPremium7:01
- Assignment: Ionic + Angular Navigation (Problem)Premium1:20
- Assignment: Ionic + Angular Navigation (Solution)Premium4:15
- Navigating via Toolbar ButtonsPremium3:13
- Extracting the ID of Loaded PlacesPremium5:34
- Assignment: More Practicing! (Problem)Premium0:42
- Assignment: More Practicing! (Solution)Premium5:33
- Adding a SideDrawerPremium7:00
- Opening + Closing the SideDrawerPremium4:46
- Adding Links & Switching PagesPremium4:15
- Adding the Auth ServicePremium3:28
- Adding an Auth GuardPremium7:47
- Opening a ModalPremium6:26
- Closing the Modal & Passing DataPremium7:21
- Wrap UpPremium1:24
- Useful Resources & LinksPremium1:00
Section 8Ionic Components Overview
- Module IntroductionPremium1:52
- Attributes & SlotsPremium6:09
- Ionic Grid BasicsPremium8:35
- Controlling Grid Column SizesPremium3:44
- Controlling Grid AlignmentPremium5:29
- Responsive Grid SizingPremium5:10
- Grid SummaryPremium2:11
- ion-list vs ion-gridPremium3:06
- ion-label & ion-itemPremium7:29
- ion-textPremium2:39
- Swipeable List ItemsPremium11:08
- Swipeable BookingsPremium10:12
- Understanding Virtual ScrollingPremium3:50
- Implementing Virtual ScrollingPremium5:23
- Adding Image ElementsPremium2:45
- Segmented ButtonsPremium5:47
- Adding a SpinnerPremium4:17
- Using the Loading ControllerPremium2:36
- Using the ActionSheet ControllerPremium6:50
- Wrap UpPremium1:42
- Useful Resources & LinksPremium1:00
Section 9Styling & Theming Ionic Apps
- Module IntroductionPremium1:12
- How Styling & Theming Works in Ionic AppsPremium6:44
- Docs & Utility AttributesPremium1:13
- Setting Global Theme VariablesPremium3:28
- Setting Global StylesPremium1:18
- Setting All Colors at OncePremium2:35
- Setting Platform-Specific StylesPremium3:58
- Styling Core Components with VariablesPremium8:13
- Adding Custom CSS RulesPremium10:01
- Component-specific CSS VariablesPremium4:32
- Wrap UpPremium0:40
- Useful Resources & LinksPremium1:00
Section 10Handling User Input
- Module IntroductionPremium1:32
- User Input RequirementsPremium1:20
- Setting Up a Form TemplatePremium5:45
- Adding a Template-driven FormPremium7:37
- Handling ValidationPremium6:02
- Switching Between Auth ModesPremium2:35
- Finishing the Auth FormPremium2:28
- Starting Work on a New Offer FormPremium3:54
- Finishing the Offer Form TemplatePremium4:22
- Creating a Reactive FormPremium5:21
- Syncing the Form to the TemplatePremium4:00
- Finishing the New Offer FormPremium4:01
- Edit Form ChallengePremium0:52
- Adding the Edit Offer FormPremium5:36
- Starting with the Booking FormPremium4:33
- Working on the Book Place TemplatePremium5:59
- Configuring the Date ControlsPremium11:44
- Validating & Submitting the FormPremium8:12
- Wrap UpPremium1:26
- Useful Resources & LinksPremium1:00
Section 11Managing State
- Module IntroductionPremium1:05
- What is State?Premium4:01
- Adding New PlacesPremium12:14
- Using RxJS Subjects for State ManagementPremium8:59
- Passing Data via Subjects & SubscriptionsPremium12:24
- UI State in ActionPremium8:10
- Updating PlacesPremium8:40
- UI State with Bookable PlacesPremium7:01
- Filtering & NavigationPremium1:00
- Booking PlacesPremium16:05
- Fixing a BugPremium0:25
- Canceling BookingsPremium4:54
- Finishing TouchesPremium4:36
- Useful Resources & LinksPremium1:00
Section 12Sending Http Requests
- Module IntroductionPremium0:46
- How To Connect to a BackendPremium2:13
- Setting Up FirebasePremium2:11
- Sending Data via HttpPremium7:12
- Using Response DataPremium3:36
- Fetching & Displaying DataPremium14:50
- Updating PlacesPremium6:38
- Fetching Data in Multiple PlacesPremium3:15
- Loading Data in a Single PlacePremium6:59
- Updating Places CorrectlyPremium3:52
- Error HandlingPremium3:27
- Fetching Single PlacesPremium6:18
- Adding a BookingPremium6:46
- Fetching Bookings By UserPremium10:07
- Deleting BookingsPremium5:11
- Wrap UpPremium0:56
- Useful Resources & LinksPremium1:00
Section 13Adding Google Maps
- Module IntroductionPremium1:29
- API SetupPremium3:32
- Adding a LocationPicker ComponentPremium6:51
- Opening the Map ModalPremium3:59
- Adding the Google Maps SDKPremium8:44
- Rendering a MapPremium6:04
- Picking Locations via a Click on the MapPremium3:41
- Finding the Address for a PlacePremium8:47
- Fetching a Static Image URLPremium7:19
- Displaying a Place PreviewPremium5:12
- Changing the SelectionPremium1:01
- Removing the Click ListenerPremium2:10
- Submitting the LocationPremium8:14
- Outputting Address & MapPremium3:23
- Re-using the Maps ModalPremium8:36
- Useful Resources & LinksPremium1:00
Section 14Using Native Device Features (Camera & Location)
- Module IntroductionPremium0:57
- Understanding Capacitor & CordovaPremium4:12
- Using the DocsPremium0:56
- Using Capacitor PluginsPremium6:39
- Getting the User LocationPremium9:37
- Testing the Location FeaturePremium6:17
- Starting With the Image PickerPremium4:26
- Taking PicturesPremium10:11
- Avoid Distorted PicturesPremium1:00
- Detecting the Platform CorrectlyPremium5:00
- Adding a Filepicker FallbackPremium4:43
- Getting the Picked ImagePremium3:00
- Converting the Image String to a FilePremium5:13
- Storing the Image in the FormPremium3:30
- Using PWA ElementsPremium4:06
- Improving the ImagePicker ComponentPremium4:46
- MUST READ: Firebase Cloud Functions & BillingPremium1:00
- Adding Server-side Image Uploading CodePremium5:04
- Adding Image UploadPremium7:30
- Wrap UpPremium1:06
- Useful Resources & LinksPremium1:00
Section 15Adding Authentication
- Module IntroductionPremium0:51
- How Authentication WorksPremium3:00
- Adding User SignupPremium10:05
- Refactoring the Authentication CodePremium6:33
- Adding User LoginPremium6:23
- Managing the User with a SubjectPremium6:41
- Storing the Token in MemoryPremium4:55
- Using the ID Observable CorrectlyPremium4:42
- More userId UsagePremium4:57
- Fixing the SubscriptionPremium0:49
- Using the userId EverywherePremium5:56
- Storing Auth Data in Device StoragPremium4:22
- Adding AutologinPremium6:48
- Using AutologinPremium4:15
- Adding a Reactive Logout SystemPremium7:52
- Adding AutologoutPremium8:00
- Requiring the Auth Token on the BackendPremium6:22
- Sending the Auth Token to the BackendPremium7:55
- More Token UsagePremium4:12
- Optional: Check Auth State When App ResumesPremium1:00
- Wrap UpPremium1:35
- Useful Resources & LinksPremium1:00
Section 16Publishing the Apps
- Module IntroductionPremium1:06
- Preparing App ConfigsPremium7:52
- Custom Icons & Splash ScreensPremium8:53
- Android DeploymentPremium3:54
- iOS DeploymentPremium3:33
- Web DevelopmentPremium5:45
- Useful Resources & LinksPremium1:00
Section 17Course Roundup
- Course RoundupPremium1:37
Course instructor
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.