Ionic 6+: crear aplicaciones ios, android y pwas con angular download

Índice Show

Information
Course Includes
What you’ll learn
Course Content
Requirements
Description
Who this course is for

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 (Ionic 4+).

Information

Created by : Maximilian Schwarzmüller

Rating: 4.7 out of 5 (14,854 ratings)

Student : 64,130

Last updated :Last updated 1/2022

Language : English

SubTitle : English, French, German, Indonesian, Italian, Portuguese, Spanish

Course Includes

30-Day Money-Back Guarantee
Certificate of completion

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

Course Content

18 sections • 290 lectures • 20h 25m 06s total length

Getting Started (14 lectures) (53:45)

Course Introduction (02:27)
What Is Ionic? (07:44)
Join our Online Learning Community (00:23)
A Closer Look at the Ionic Platform (04:28)
What is Angular? (03:59)
Node.js Download (00:19)
Our First Ionic App! (13:36)
The History of Ionic (04:02)
Ionic 4+ vs Ionic 3 (03:06)
How to Build Native Mobile Apps with Ionic (03:45)
Comparing Ionic to Alternatives (00:08)
Course Outline (06:23)
How To Get The Most Out Of The Course (03:02)
The Course Source Code (00:22)

Angular Refresher (30 lectures) (01:48:52)

Module Introduction (00:32)
What is Angular? (02:42)
Angular SPAs & Ionic (03:09)
Understanding Components (01:37)
Important: Creating an Angular Project with the CLI (00:52)
Installing Angular with the CLI (04:29)
Installing the IDE (04:59)
Understanding the Folder Structure (08:14)
The App Component (07:04)
Creating Our First Component (04:05)
Cross Component Communication with Property Binding (05:23)
Understanding Directives & String Interpolation (04:05)
Handling User Input (04:08)
Understanding Event Binding (02:13)
Local References (01:49)
Understanding Two-Way-Binding (05:56)
Passing Data Around with Custom Events (03:58)
Implementing Routing (07:10)
Setting Up Services (03:15)
Using Services with Dependency Injection (02:48)
Working with Angular Lifecycle Hooks (03:25)
Adding a Person with Services (02:44)
Navigating between Components (02:03)
Removing Items Upon a Click (03:08)
“Push”ing Data Around with Subjects (05:34)
More on RxJS & Observables (00:03)
Sending Http Requests (10:03)
Showing a Placeholder Whilst Waiting for a Response (02:05)
Wrap Up (01:17)
Useful Resources & Links (00:02)

Ionic Component Basics (20 lectures) (01:13:01)

Module Introduction (01:20)
Core App Building Blocks (04:26)
Under the Hood of Ionic Components (06:47)
Setting Up a Non-Angular Ionic Project (03:04)
Where to Learn all about Ionic Components (02:29)
Using Basic Ionic Components (05:11)
More Basic Components (03:23)
Component Categories (02:27)
Using the Ionic Grid (04:51)
Adding Icons & Using Slots (06:14)
Using CSS Utility Attributes (03:42)
Using Ionic Elements like “Normal” HTML Elements (04:12)
Validating User Input (02:46)
Creating Ionic Elements Programmatically (04:57)
Finishing Up the Base JavaScript Logic (03:39)
Finalizing the Layout (01:31)
Use the right Ionic Import (00:04)
Using Controller Components (06:28)
Practicing Ionic Components (1 question)
Why Angular? (05:29)
Useful Resources & Links (00:01)

Angular + Ionic (21 lectures) (01:14:28)

Module Introduction (01:44)
Why Use Angular? (02:39)
Important: Creating a New Project with the CLI (00:29)
Creating a New Ionic Angular Project (05:49)
Important: CSS Utility Attributes (00:17)
Analyzing the Created Project (05:54)
How Angular & Ionic Work Together (03:53)
Important: Extra Routing Modules (00:24)
Adding & Loading a New Page (07:44)
Using Angular Features on Ionic Components (05:28)
Setting Up Angular Routes (04:06)
Managing State with Services (06:21)
Extracting and Displaying Route Param Data (08:34)
A Potential Bug (+ Fix) (00:45)
Navigating Between Pages (05:32)
Deleting a Recipe (04:34)
There’s a Bug! (00:15)
Injecting Ionic Controllers (03:31)
Angular Components vs Ionic Components (05:49)
Wrap Up (00:37)
Useful Resources & Links (00:02)

Building Native Apps with Capacitor (8 lectures) (25:44)

Module Introduction (00:59)
General Information (01:28)
Creating an Android App (12:33)
Running the App on a Real Android Device (00:15)
Creating an iOS App (09:10)
Running the App on a Real iOS Device (00:12)
Wrap Up (01:03)
Useful Resources & Links (00:03)

Debugging (9 lectures) (19:30)

Module Introduction (00:44)
Error Messages & console.log() (04:02)
Using the Browser DevTools & Breakpoints (02:30)
Using VS Code for Debugging (00:06)
Debugging the UI & Performance (02:53)
Debugging Android Apps (04:16)
Debugging iOS Apps (04:16)
Wrap Up (00:40)
Useful Resources & Links (00:03)

Navigation & Routing in Ionic Apps (26 lectures) (02:06:59)

Module Introduction (01:41)
How Routing Work In An Ionic + Angular App (04:37)
Ionic Page Caching & Extra Lifecycle Hooks (09:20)
Planning the Course Project (04:06)
Creating Our App Pages (07:44)
MUST READ: Ionic 5 and Routing / Lazy Loading (01:23)
Adjusting Our Main Routing Configuration (01:59)
Understanding Ionic Tabs (01:29)
Adding Tabs to the App (15:22)
Preparing Data & Services for the Project (05:53)
Outputting “Places” (08:12)
Adding Forward Navigation (06:21)
Going Back with NavController (07:01)
Practicing Ionic + Angular (1 question)
Navigating via Toolbar Buttons (03:13)
A Bug with Ionic (00:30)
Extracting the ID of Loaded Places (05:34)
More Practicing! (1 question)
Optional: Assignment Solution Code (00:05)
Adding a SideDrawer (07:00)
Opening + Closing the SideDrawer (04:46)
Adding Links & Switching Pages (04:15)
Adding the Auth Service (03:28)
Adding an Auth Guard (07:47)
Opening a Modal (06:26)
Closing the Modal & Passing Data (07:21)
Wrap Up (01:24)
Useful Resources & Links (00:01)

Ionic Components Overview (22 lectures) (01:41:15)

Module Introduction (01:52)
Attributes & Slots (06:09)
Ionic Grid Basics (08:35)
Controlling Grid Column Sizes (03:44)
Controlling Grid Alignment (05:29)
Responsive Grid Sizing (05:10)
Grid Summary (02:11)
ion-list vs ion-grid (03:06)
ion-label & ion-item (07:29)
ion-text (02:39)
Swipeable List Items (11:08)
Swipeable Bookings (10:12)
Understanding Virtual Scrolling (03:50)
Implementing Virtual Scrolling (05:23)
Virtual Scrolling Bugs (00:20)
Adding Image Elements (02:45)
Segmented Buttons (05:47)
Adding a Spinner (04:17)
Using the Loading Controller (02:36)
Using the ActionSheet Controller (06:50)
Wrap Up (01:42)
Useful Resources & Links (00:01)

Styling & Theming Ionic Apps (13 lectures) (44:14)

Module Introduction (01:12)
How Styling & Theming Works in Ionic Apps (06:44)
Docs & Utility Attributes (01:13)
Setting Global Theme Variables (03:28)
Setting Global Styles (01:18)
Setting All Colors at Once (02:35)
Setting Platform-Specific Styles (03:58)
Styling Core Components with Variables (08:13)
Missing iOS Icons (00:15)
Adding Custom CSS Rules (10:01)
Component-specific CSS Variables (04:32)
Wrap Up (00:40)
Useful Resources & Links (00:05)

Handling User Input (23 lectures) (01:27:50)

Module Introduction (01:32)
User Input Requirements (01:20)
Setting Up a Form Template (05:45)
Angular 8 & @ViewChild() (00:14)
Adding a Template-driven Form (07:37)
Handling Validation (06:02)
Switching Between Auth Modes (02:35)
Finishing the Auth Form (02:28)
Starting Work on a New Offer Form (03:54)
Finishing the Offer Form Template (04:22)
Creating a Reactive Form (05:21)
Syncing the Form to the Template (04:00)
Finishing the New Offer Form (04:01)
Edit Form Challenge (00:52)
Adding the Edit Offer Form (05:36)
Starting with the Booking Form (04:33)
Working on the Book Place Template (05:59)
Ionic 6 & Date Controls (00:08)
Configuring the Date Controls (11:44)
Avoid Errors (00:08)
Validating & Submitting the Form (08:12)
Wrap Up (01:26)
Useful Resources & Links (00:01)

Managing State (14 lectures) (01:29:44)

Module Introduction (01:05)
What is State? (04:01)
Adding New Places (12:14)
Using RxJS Subjects for State Management (08:59)
Passing Data via Subjects & Subscriptions (12:24)
UI State in Action (08:10)
Updating Places (08:40)
UI State with Bookable Places (07:01)
Filtering & Navigation (01:08)
Booking Places (16:05)
Fixing a Bug (00:25)
Canceling Bookings (04:54)
Finishing Touches (04:36)
Useful Resources & Links (00:02)

Sending Http Requests (17 lectures) (01:24:18)

Module Introduction (00:46)
How To Connect to a Backend (02:13)
Setting Up Firebase (02:11)
Sending Data via Http (07:12)
Using Response Data (03:36)
Fetching & Displaying Data (14:50)
Updating Places (06:38)
Fetching Data in Multiple Places (03:15)
Loading Data in a Single Place (06:59)
Updating Places Correctly (03:52)
Error Handling (03:27)
Fetching Single Places (06:18)
Adding a Booking (06:46)
Fetching Bookings By User (10:07)
Deleting Bookings (05:11)
Wrap Up (00:56)
Useful Resources & Links (00:01)

Adding Google Maps (17 lectures) (01:19:18)

Module Introduction (01:29)
API Setup (03:32)
Angular 8 & @ViewChild() (00:14)
Adding a LocationPicker Component (06:51)
Opening the Map Modal (03:59)
Adding the Google Maps SDK (08:44)
Rendering a Map (06:04)
Picking Locations via a Click on the Map (03:41)
Finding the Address for a Place (08:47)
Fetching a Static Image URL (07:19)
Displaying a Place Preview (05:12)
Changing the Selection (01:01)
Removing the Click Listener (02:10)
Submitting the Location (08:14)
Outputting Address & Map (03:23)
Re-using the Maps Modal (08:36)
Useful Resources & Links (00:02)

Using Native Device Features (Camera & Location) (24 lectures) (01:30:00)

Module Introduction (00:57)
Understanding Capacitor & Cordova (04:12)
Using the Docs (00:56)
Using Capacitor v3 (00:42)
Using Capacitor Plugins (06:39)
Getting the User Location (09:37)
Testing the Location Feature (06:17)
Angular 8 & @ViewChild() (00:14)
Starting With the Image Picker (04:26)
Taking Pictures (10:11)
Avoid Distorted Pictures (00:16)
Detecting the Platform Correctly (05:00)
Adding a Filepicker Fallback (04:43)
Getting the Picked Image (03:00)
Converting the Image String to a File (05:13)
Storing the Image in the Form (03:30)
Capacitor v1 & PWA Elements (00:19)
Using PWA Elements (04:06)
Improving the ImagePicker Component (04:46)
MUST READ: Firebase Cloud Functions Billing (01:12)
Adding Server-side Image Uploading Code (05:04)
Adding Image Upload (07:30)
Wrap Up (01:06)
Useful Resources & Links (00:02)

Adding Authentication (23 lectures) (01:46:57)

Module Introduction (00:51)
How Authentication Works (03:00)
Firebase API Key (00:07)
Adding User Signup (10:05)
Refactoring the Authentication Code (06:33)
Adding User Login (06:23)
Managing the User with a Subject (06:41)
Storing the Token in Memory (04:55)
Using the ID Observable Correctly (04:42)
More userId Usage (04:57)
Fixing the Subscription (00:49)
Using the userId Everywhere (05:56)
Storing Auth Data in Device Storag (04:22)
Adding Autologin (06:48)
Using Autologin (04:15)
Adding a Reactive Logout System (07:52)
Adding Autologout (08:00)
Requiring the Auth Token on the Backend (06:22)
Sending the Auth Token to the Backend (07:55)
More Token Usage (04:12)
Optional: Check Auth State When App Resumes (00:35)
Wrap Up (01:35)
Useful Resources & Links (00:01)

Publishing the Apps (7 lectures) (31:06)

Module Introduction (01:06)
Preparing App Configs (07:52)
Custom Icons & Splash Screens (08:53)
Android Deployment (03:54)
iOS Deployment (03:33)
Web Development (05:45)
Useful Resources & Links (00:03)

Roundup (1 lecture) (01:37)
Bonus Content (1 lecture) (00:20)

Bonus: More Content! (00:20)

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

Description

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 … 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! 🙂

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