Building a Realtime Chat Application with Angular and Firebase

Building a Realtime Chat Application with Angular and Firebase

English | MP4 | AVC 1920×1080 | AAC 48KHz 2ch | 3h 55m | 942 MB

Build, launch and deploy your very own realtime chat application with authentication, using Angular, Bootstrap 4 and a Firebase backend.

AngularJS is a structural framework for building dynamic web applications. If you’re facing a challenge in building robust and efficient web applications with Angular, then look no further as this video course will enable you to get to grips with Angular by enabling you to build a realtime chat application using Angular, Angular CLI, Bootstrap 4 and Firebase. Initially, you will quickly scaffold a new Angular application using Angular CLI and then, you’ll add Bootstrap 4 and a few other dependencies to build your application rapidly. On your journey, you will create new pages, implement routing, authentication and more. Next, you’ll work on setting up a new Firebase account and integrating the Firebase backend into your Angular application.

As you progress further, you will make use of a Reactive pattern and implement Observables to add realtime capabilities to your chat application. In addition to building a realtime chat room, you will also build user profile pages; implement a search engine for users and the sending of direct messages to users. Towards the end of this course, you will be able to build a fully featured realtime chat application using Angular and Firebase and deploy it to AWS so that the world can see it. We will help you to get started with Angular, understand how to apply it, and build some of the most robust, efficient and dynamic applications with Angular. After completing this course, you will likely find creative ways to apply it to your work.

The best way to learn is by doing. Therefore, this course will walk you through building a real world application,in a step-by-step manner. The exact steps taken in this course could be repeated to build and deploy your own realtime chat application.

What You Will Learn

  • Effective techniques for managing cryptographic keys for IoT systems.
  • Learn how to integrate cryptographic modules in IoT systems
  • Get a grip of why and how safety should be considered in IoT system implementations
  • Integrating your existing security services to protect an IoT system
  • Dive into the fundamentals of Cryptography, key management and implementing cryptography.
  • Security Credential Management System (SCSM) was developed to support the connected car market
  • Explore securing connecting to the cloud, processing and storing data in the cloud, and integrating cloud security services for your IoT system
Table of Contents

Starting Your Angular Application
1 The Course Overview
2 Setting Up Your Environment
3 Setting Up the Project Directory
4 Installing Bootstrap

Building the Initial Pages
5 Creating the Login Form
6 Creating the Login View
7 Creating the Sign Up Page
8 Adding the Navbar Component
9 Generating Chatroom Page Components
10 Creating Chatroom Page Layout
11 Using a Template Driven Form for New Message Input
12 Finalize Styling of Chatroom Page

Creating Alert, Loading, and Authentication Services
13 Creating an Alert Notification
14 Implementing Alert Notifications on the Login Page
15 Creating an Application Loading Indicator
16 Setting Up the Authentication Service
17 Connecting the Login and Signup Pages to the Authentication Service
18 Protecting Routes with an Authentication Guard

Setting Up and Connecting to Firebase
19 Setting Up Firebase
20 Connect Sign Up Page to Firebase
21 Connect Login Page to Firebase
22 Toggling Navbar Links Based on Authentication Status

Building the Chatroom Functionality
23 Seeding Our Firestore Database with Chatroom Data
24 Fetching List of Chatrooms from Firestore
25 Routing to Select a Chatroom
26 Fetching Chatroom Title Based on Route
27 Rendering Chatroom Messages from Our Firestore
28 Posting New Chat Messages

Creating User Profiles
29 Seeding Our Firestore Database with User Data
30 Creating User Profile Pages
31 Implementing the Edit Profile Page Logic
32 Edit Profile Page HTML and SCSS
33 Creating Guard to Prevent Editing of Other Users’ Profiles

Clean Up, Security, and Deploying to Amazon AWS S3
34 Backend Security in Firebase’s Firestore
35 Last Minute Clean Up and Styling Modifications
36 Build and Deploy to Amazon AWS S3