Learn Ionic 3 From Scratch

Learn Ionic 3 From Scratch
Learn Ionic 3 From Scratch
English | MP4 | AVC 1280×720 | AAC 48KHz 2ch | 11 Hours | 1.72 GB

Create Cross Platform Mobile Applications with Ionic 3, Angular 4, TypeScript and Firebase.

Within the "Learn Ionic 3 From Scratch" course, you will be making the Github Profile Searcher from scratch. Prior to interacting with any API, we create our mock data and TypeScript interfaces for a strongly typed approach to development.

We then look at making 'Beep', the social chat application from UX design all the way to full implementation*. As you follow the course, we design the application in Adobe Experience Design and then look at implementing the various features to a production standard within our project.

We use Firebase for our real-time database and authentication, as well as the latest release candidate which includes the modularisation of AngularFire2 into different packages.

By the end of this course, you'll be able to make cross platform mobile applications using Angular 4, TypeScript and Ionic 3. This means that you'll be able to:

  • Create high performance mobile applications using web technologies (HTML5 and JavaScript).
  • Have a strong portfolio of applications* and understanding of Ionic 3, TypeScript and Angular 4.
  • Master the Ionic 3 CLI with a section dedicated to it's usage.
  • Use Ionic Native and Cordova to hook into native device features.
  • Theme your Ionic applications with bespoke styles, and understand common accessibility patterns.
  • Master Ionic 3 navigation patterns with lifecycle hooks.
  • Increase performance of your Ionic 3 applications with lazy loading.
Table of Contents

Introduction
1 Introduction
2 Course Overview
3 Prerequisites
4 QA
5 Environment Setup - Windows
6 Environment Setup - Mac
7 Ionic and Cordova Setup
8 Editors
9 VSCode Plugins
10 Recap

Angular 4 Primer
11 Angular Anatomy
12 Introduction to the Angular CLI
13 Creating our First Angular Application
14 Angular Folder Structure and Testing
15 NgModule
16 Components
17 CLI Basics
18 Data Binding
19 Events
20 NgModel
21 ngIf Directive
22 ngIf Else
23 ngFor Directive
24 Component Communication
25 Pipes
26 Recap

Ionic 3 CLI
27 Installing the Ionic 3 CLI
28 Creating a New Project with the Ionic 3 CLI
29 Listing Project Templates
30 Running our Project in the Browser and on a Device
31 Using Live Reload on a Device
32 Generating Project Components with the Ionic CLI
33 Getting Environment Information with Ionic Info
34 Accessing the Ionic Documentation
35 Creating an Ionic.io Account
36 Authenticating to Ionic.io Within the CLI
37 Creating an Application on the Ionic.io Platform
38 Using Ionic View to Run Your Application on a Device
39 Generating Splash Screen and Icon With the CLI

Getting Started with Ionic 3
40 Installing Dependencies
41 Creating Our First Project
42 Run Your Application in a Browser
43 Folder Structure
44 Config.XML and Application Name
45 Package.json
46 Adding Content to Our Application
47 Recap

Navigation
48 Creating a New Page
49 Navigating to Another Page
50 Lazy Loading Navigation
51 Lazy Loading Components - FeatureShared Modules
52 Navigation Parameters
53 Lifecycle Hooks
54 Back Navigation
55 Root Navigation and Stack Overview

Theming
56 Introduction - Colour Selection
57 Custom Colours
58 Text Alignment
59 Text Transformation
60 Padding
61 Margin
62 Changing Colour Contrast

Project Greeting Application
63 Introduction
64 Project Initiation
65 Run the Project in the Browser
66 Creating the HomePage Template
67 Capturing the Greeting Name
68 Displaying a Greeting Toast
69 Recap
70 Source Code

Project GitHub Profile Searcher
71 Creating the GitHub Profile Searcher Project
72 Creating the Profile Search Page
73 Profile Search View and Model
74 Navigation and Parameters
75 Mocking User Data
76 Search Results Implementation
77 Displaying Search Results on Screen
78 Mocking Repository Data
79 Displaying Repositories in Search Results
80 Mid Section Recap
81 Retrieving User Data
82 Retrieving User Repositories
83 IonicPage Decorator and Deep Linking
84 Final Thoughts
85 Source Code

Project 2 Shopping List - Ionic Firebase CRUD
86 Project Introduction
87 Creating the Project
88 Installing Dependencies
89 Creating a Firebase Account
90 Firebase Credentials and Project Setup
91 Creating the Shopping List Page
92 Creating the Add Shopping Page Styling
93 Navigating the Add Shopping Page
94 Add Shopping Page View Scaffold
95 Template Forms
96 Adding Shopping to Firebase
97 Displaying Shopping List Data
98 Removing Shopping Items
99 Creating an EditShoppingItemPage and Passing NavParams
100 Edit Shopping Item
101 Recap
102 Source Code

UX Driven Design Designing the Beep Application
103 Preface
104 Scaffolding our Application Design
105 Splash Screen
106 Login and Navigation
107 Register
108 Inbox
109 Channel List
110 Profile
111 Selecting a User
112 Chatroom
113 One on One Chat
114 Edit Profile
115 Reviewing Requirements
116 Searching for Users
117 Recap
118 Beep Design Prototype

Work in Progress Beep Create a Chat Application with Ionic 3 and Firebase
119 Preface
120 Creating our Beep Application
121 Creating the Login Page
122 Login Form and Styling
123 Register
124 Theming
125 Page Creation and Navigation
126 Tabs
127 Tab Icons
128 Lazy Loading
129 Theming the Inbox Page
130 Mocking Data
131 Showing Messages On Screen
132 Adding Components and Refactoring
133 Creating User Accounts with Firebase and AngularFire2
134 Authenticating Users with Firebase and AngularFire2
135 Component Communication with EventEmitters
136 Abstract Authentication to a Service
137 Refactoring Register Form Component to use EventEmitters
138 Creating an Edit Profile Form
139 Saving Authenticated User Profile Data to Firebase
140 Login FormFlow Improvements
141 LoginRegister Form Validation
142 Displaying User Profile
143 Searching Users and Configuring Firebase Rules
144 Edit Profile as an Authenticated User
145 Temporary Automatic User Authentication
146 Trimming Search Queries
147 Creating the Message Page
148 Removing Tabs from Sub Pages
149 Adding a Send Message Box
150 Displaying Chat Messages
151 Adding a Signout Button
152 Combining Observables with mergeMap
153 Adding Chat Channels
154 Displaying Channel List
155 Sending Messages to Channels
156 Showing Online Users
157 Firebase Hosting Deployment
158 Chat Message Structure
159 User Messages with Firebase Cloud Functions
160 Preparing Chat Messages Component
161 Sending One on One Chat Messages
162 Displaying One on One Messages
163 Generate Last Messages with Cloud Functions
164 Displaying Last Message List and Starting Conversations

Ionic 3 Components
165 Preface
166 Buttons
167 Badges
168 Chips
169 FAB List
170 Modal
171 Toast
172 Toggle
173 Tooltips
174 Popover and onDismiss
175 Events
176 Using IonicPage for Deep Linking

Ionic Native Plugins
177 Introduction
178 Call Number
179 Cordova
180 Application Version
181 AdMobPro
182 Brightness
183 Fingerprint AIO
184 Flashlight
185 SQLite
186 Speech to Text
187 Network Detection
188 Notification Badges
189 Vibration
190 Video Player

Misc
191 Performance Improvements with WebViews Crosswalk UIWebView WKWebView
192 Platform Aware UI
193 Using Async and Await
194 Using Ionic View to Test Our Application