Ionic 4 Mega Course: Build 10 Real World Apps

Build 10 real world mobile apps using Ionic 4

4.10 (42 reviews)
Udemy
platform
English
language
Mobile Apps
category
448
students
33.5 hours
content
Jul 2019
last update
$49.99
regular price

What you will learn

Ionic 4 framework

Build 10 real world mobile apps

Learn to use plugins like File, MediaCapture, VideoEditor, WebView, StreamingMedia etc.

Use third-party APIs

Create flashlight app by using flashlight plugin

Create compass app by using the device orientation plugin

Create mirror app by using the camera preview Ionic native plugin

Create a countdown timer app and use HTML5 Audio to play audio files

Create voice recorder app by using plugins like Media and FIle

Create a calendar app by using an Angular calendar module and Firebase cloud storage

Create a note app and store data using Firebase cloud storage

Create video recorder app by using plugins like MediaCapture, File, VideoEditor, StreamingMedia etc

Create a video player app

Build a weather app using a third-party API

Description

This Ionic 4 course is a hands-on course which is more practical than theoretical. You learn by building real applications that can be used on your mobile device. The course follows a modern approach where students learn by doing. You will start from a more simpler app and then move up from there.

The course has multiple sections comprising of videos, quizzes,  source codes, code samples and projects. if you have no experience with Ionic 4, don't worry. The applications built will get you up and running with working with the Ionic 4 framework. If you are coming from Ionic 3 background then you are going to see the similarities and differences between both versions of the framework.

The applications you will build covers a wide range of interesting topics like

  • Understanding the file system layouts of mobile devices using File plugin

  • Displaying Alerts, Toasts and even loaders inside applications

  • Loading audio files inside applications

  • Creating directories/folders inside your mobile device that will be used by the application

  • Fetching specific files from your mobile device

  • Playing audio and video files

  • Recording audio and video files

  • Using third-party modules

  • Integrating Firebase into Ionic 4 application

  • Using RxJS

The 10 applications that will be built are:

  • Flashlight App

  • Compass App

  • Mirror App

  • Countdown Timer App

  • Voice Recorder App

  • Calendar App

  • Note App

  • Video Recorder App

  • Video Player App

  • Weather App

Note: You can see demo of each app in Section 2 of the course content

These apps will give you an understanding of how the Ionic 4 and Cordova plugins are used. Also, you will gain understanding of the UI components used in Ionic 4 and how styles can be applied to them. This course is a great way to get started with the Ionic 4 framework. Once you buy the course, you have lifetime access to all the course content. Sign up today and start building apps with Ionic 4 framework.

Content

Introduction

Introduction
About Source Codes
Projects Github Links

Ionic 4 Apps Demo

Flashlight App Demo
Compass App Demo
Mirror App Demo
Countdown Timer App Demo
Voice Recorder App Demo
Calendar App Demo
Note App Demo
Video Recorder App Demo
Video Player App Demo
Weather App Demo

Tools Setup

Angular Installation
Ionic 4 Installation
Cordova Installation
VS Code

Flashlight App

Section Introduction
Flashlight App Github Repo
Create Flashlight Project
Ionic 4 UI Components
Ionic 4 Plugins
Create Home Page
Add Flashlight Icon
Add Image
Flashlight Page SCSS Style
Install Flashlight Plugin
Flashlight On Method
Flashlight Off Method
Create Alert
Install Cordova Android
Run Ionic App
Flashlight Mobile Demo
Section Quiz

Compass App

Section Introduction
Compass App Github Repo
Create Compass Project
Chrome Remote Devices
Compass App Ion Header
Compass Images
Compass Footer
Device Orientation Plugin
Install Device Orientation Plugin
Device Watch Heading
Display Compass Degree
Rotate Compass
Display Cardinal Points - Part 1
Display Cardinal Points - Part 2
NG Coordinates Plugin
Coordinates Style
Display Longitude and Latitude
Compass Final Demo
Section Quiz

Mirror App

Section Introduction
Mirror App Github Repo
Create Mirror App Project
Add Image Frame
Set Screen Width and Height
Zoom Icons
Add Range Component
Change Image Frame
Change Frame Switch Case Statement
Install Brightness Plugin
Add Cordova Platform
First Demo on Device
Use Brightness Plugin - Part 1
Use Brightness Plugin - Part 2
Install Camera Preview Plugin
Start Camera Preview
First Camera Preview Demo
Change Icon Color
Zoom In Method
Zoom Out Method
Change Icon Display
Zoom Demo
Section Quiz

Countdown Timer App

Section Introduction
Countdown Timer Github Repo
Create Countdown Timer Project
Create Timer Page
Add Datetime Component
Circle Progress Bar
Ionic 4 Floating Action Button (FAB)
Add Timer Progress
Style Circle Progress Component
Change Time to Seconds
Display Time
Display Time in Progress Bar
Seconds as Digital Clock
Count Down Timer
Pause and Resume Timer
Disable Play Buttons
Hide Circle Progress Bar
Reduce Circle Progress
Load Timer Sound - Part 1
Load Timer Sound - Part 2
Play Timer Sound
Ticking Sound
Load Alert Sound
Play Alert Sound
Pause Ticking Sound
Section Quiz

Voice Recorder App

Section Introduction
Voice Recorder App Github Repo
Create Voice Recorder Project
Home Page HTML
Home Page Style
Navigate to Recordings Page
Recordings Page HTML Template
Timer Service
Start Timer Method
Pad Method
Emit Timer Event
Display Timer
Unsubscribe From Timers
Show Mic Icon
Ionic Natvie File Plugin
Install Media Plugin
Create Recording Name
Create Directory on Mobile Device
Create Media Method
Alert Prompt
Move File
Save Recording Demo
List Files in Directory
Add Files to Array
Get Recording Date
Display Recordings
Play Audio Method
Emit Duration
Display Steps Count
Hide Play Button
Hide Ion Range
Ion Range Steps
Remove File Method
Delete Audio
Section Quiz

Calendar App

Section Introduction
Calendar App Github Repo
Create Calendar Project
Create All Pages
Calendar Page HTML
Install Angular Calendar Module
Install Angular Animations
Add Calendar Components
Previous and Next Icons
Change View Encapsulation
Format Day of Week Strings
Add Event Page HTML
Close Modal
Add ngModel Input Property
Validate Input Fields
Create Firebase Project
Install Angular Fire
Create Events Interface
Add Event Method - Part 1
Add Event Method - Part 2
Add More Events Method
User Calendar Events Method
Fix Event Typo
Unsubscribe Add Event
Get Events Method
Format Start Date
Add Todays Events To Calendar
Set Future Events Background
Display Todays Events
Display Title Date
View Event Page HTML
View Event Page
On Did Dismiss Method
Delete Events Method
Delete Event On View Page
Remove Deleted Events
Delete Events From List - Part 1
Delete Events From List - Part 2
No Event Display Message
Split Load Data Method
Calendar Events Unsubscription
Schedule Page HTML
Schedule Page
Install Local Notifications Plugin
Display Notifications Method
Reminder Notifications Method
Notifications Demo
Schedule Component Unsubscription
Section Quiz

Note App

Section Introduction
Note App Github Repo
Create Note App Project
Delete Home and List Pages
Style Notes Pages
Notes Display Component
List View
Grid View
Change Display Method
Show List or Grid View
Persist Selected View
Add-Notes Pages
Create Tags Modal
Add Tags Array
Pass Modal Data
Favorite Icon
Install Angular Fire
Create Notes Service
Add user Note Method
Add More Notes Method
Use Add More Notes Method
Get User Notes
Display Notes
Create Edit Notes Pages
Edit Notes Page Template
Ion Blur Event
Display Edit Note Values
Edit Note Method
Edit Note Demo
Delete Note
Side Menu Items
Side Menu Style
Notes Count
Tags Count
Get Query Params
Change Notes Page
Change Notes page Back Button
Set Tag Properly
Add Spinner
Add Notes Params
Increase Input Height Directive
Fix User Id Errors
User Id With No Notes
Fix Edit Page Error
Router Events
Unsubscribe From Events
Note App Mobile Demo
Section Quiz

Video Recorder App

Section Introduction
Video Recorder App Github Repo
Create Video Recorder Project
Video Ion List
Add Spinner
Add Ion FAB
Create Service File
Install Media Capture Plugin
Video Capture Method
Create Video Directory
Show Media File Response
Show Created Directory
Move File
Show Added Videos In Directory
Add Other Plugins
List Directory Method
Create Video Thumbnail
Video Array
Sort by Date
Display Thumbnail
Display Last Added Video
Display New Recordings
Play Video Method
Play Video Demo
Hide Ion FABs
Display Native Video Player
Unsubscribe From Events
Section Quiz

Video Player App

Section Introduction
Video Player App Github Repo
Create Video Player Project
Add Style To Home Page
Skeleton Text Page
Install Plugins
Add Android Platform
Skeleton Page Style
Get All Folders
List Directories With Videos - Part 1
List Directories With Videos - Part 2
Video Directory Entries
Display Video Directories
Fix Dir Name
Reload Page
Add Ion Toast
Videos Page
Videos Page HTML
Videos in Directory Methods
File Size Method
Display Videos on Videos Page
Get Videos Information
Hide Checkbox
Play Video
Ionic Gesture
Show or Hide Footer
Delete Alert Controller
Remove Video - Part 1
Remove Video - Part 2
Add Toast Method
Delete Demo
Deselect Video
Video Detail Page
Video Detail Page HTML
Display Video Details
Close Modal
Unsubscribe From Events
Section Quiz

Weather App

Section Introduction
Weather App Github Repo
Create Weather Project
Current temperature Ion Card
Change Font
Updated Time Card
Hourly Forecast Card
Sample Hourly Demo
Dark Sky API
Get Location Coordinates
Location Coordinates Interface
Get Weather Information
CORS Anywhere
Current Weather Interface
Daily and Hourly Weather Interface
Display Temperature
Fahrenheit to Celsius
Round Function
Display Updated Time
Display Hourly Forecast
Display Weather Icons
Daily Component
Display Daily Weather Information
Component Interaction
Chart Component
Chart Data
Pass Data to Chart Component
Line Chart - Part 1
Line Chart - Part 2
Humidity Component
Add Circle Component
Display Comfort Levels
UV Index Method
Change Style
Wind Component
Wind Component Style
Display Wind Values
Wind Direction
Mobile Display Demo
Algolia Search API
City Search Component
Emit Search Result
Display City Information
Add Spinner

Screenshots

Ionic 4 Mega Course: Build 10 Real World Apps - Screenshot_01Ionic 4 Mega Course: Build 10 Real World Apps - Screenshot_02Ionic 4 Mega Course: Build 10 Real World Apps - Screenshot_03Ionic 4 Mega Course: Build 10 Real World Apps - Screenshot_04

Reviews

Chantal
June 27, 2022
the instructor doesn't go into explaining what are promises, async, await or even how to deploy to ios devices. if you are a beginner this course is not for you because u wil leave with no real understanding on how things work.
Amit
May 15, 2020
Voice is low for some of the chapters e.g Video Recorder App, even with full volume can barely understand what instructor is saying

Charts

Price

Ionic 4 Mega Course: Build 10 Real World Apps - Price chart

Rating

Ionic 4 Mega Course: Build 10 Real World Apps - Ratings chart

Enrollment distribution

Ionic 4 Mega Course: Build 10 Real World Apps - Distribution chart

Related Topics

2361638
udemy ID
5/10/2019
course created date
11/21/2019
course indexed date
Bot
course submited by