Building a Realtime Chat Application with Angular 5 and Firebase [Video]

Preview in Mapt

Building a Realtime Chat Application with Angular 5 and Firebase [Video]

Brice Ayres
New Release!

Build, launch and deploy your very own realtime chat application with authentication, using Angular 5, Bootstrap 4 and a Firebase backend.
Mapt Subscription
FREE
$29.99/m after trial
Video
$10.00
RRP $124.99
Save 91%
What do I get with a Mapt Pro subscription?
  • Unlimited access to all Packt’s 5,000+ eBooks and Videos
  • Early Access content, Progress Tracking, and Assessments
  • 1 Free eBook or Video to download and keep every month after trial
What do I get with an eBook?
  • Download this book in EPUB, PDF, MOBI formats
  • DRM FREE - read and interact with your content when you want, where you want, and how you want
  • Access this title in the Mapt reader
What do I get with Print & eBook?
  • Get a paperback copy of the book delivered to you
  • Download this book in EPUB, PDF, MOBI formats
  • DRM FREE - read and interact with your content when you want, where you want, and how you want
  • Access this title in the Mapt reader
What do I get with a Video?
  • Download this Video course in MP4 format
  • DRM FREE - read and interact with your content when you want, where you want, and how you want
  • Access this title in the Mapt reader
$0.00
$10.00
$29.99 p/m after trial
RRP $124.99
Subscription
Video
Start 14 Day Trial

Frequently bought together


Building a Realtime Chat Application with Angular 5 and Firebase [Video] Book Cover
Building a Realtime Chat Application with Angular 5 and Firebase [Video]
$ 124.99
$ 10.00
Hands-on Application Development with ASP.NET Core and Angular [Video] Book Cover
Hands-on Application Development with ASP.NET Core and Angular [Video]
$ 124.99
$ 10.00
Buy 2 for $20.00
Save $229.98
Add to Cart

Video Details

ISBN 139781788834483
Course Length3 hours and 55 minutes

Video Description

Angular 5 is a structural framework for building dynamic web applications. If you’re facing a challenge in building robust and efficient web applications with Angular 5, then look no further as this video course will enable you to get to grips with Angular 5 by enabling you to build a realtime chat application using Angular 5, 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 5 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 learn how to the send direct messages to users. Towards the end of this course, you will be able to build a fully featured realtime chat application using Angular 5 and Firebase and deploy it to AWS so that the world can see it. You will get started with Angular 5, understand how to apply it, and build some of the most robust, efficient and dynamic applications with Angular 5. After completing this course, you will likely find creative ways to apply it to your work.

Style and Approach

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.

Table of Contents

Starting Your Angular Application
The Course Overview
Setting Up Your Environment
Setting Up the Project Directory
Installing Bootstrap
Building the Initial Pages
Creating the Login Form
Creating the Login View
Creating the Sign Up Page
Adding the Navbar Component
Generating Chatroom Page Components
Creating Chatroom Page Layout
Using a Template Driven Form for New Message Input
Finalize Styling of Chatroom Page
Creating Alert, Loading, and Authentication Services
Creating an Alert Notification
Implementing Alert Notifications on the Login Page
Creating an Application Loading Indicator
Setting Up the Authentication Service
Connecting the Login and Signup Pages to the Authentication Service
Protecting Routes with an Authentication Guard
Setting Up and Connecting to Firebase
Setting Up Firebase
Connect Sign Up Page to Firebase
Connect Login Page to Firebase
Toggling Navbar Links Based on Authentication Status
Building the Chatroom Functionality
Seeding Our Firestore Database with Chatroom Data
Fetching List of Chatrooms from Firestore
Routing to Select a Chatroom
Fetching Chatroom Title Based on Route
Rendering Chatroom Messages from Our Firestore
Posting New Chat Messages
Creating User Profiles
Seeding Our Firestore Database with User Data
Creating User Profile Pages
Implementing the Edit Profile Page Logic
Edit Profile Page HTML and SCSS
Creating Guard to Prevent Editing of Other Users’ Profiles
Clean Up, Security, and Deploying to Amazon AWS S3
Backend Security in Firebase’s Firestore
Last Minute Clean Up and Styling Modifications
Build and Deploy to Amazon AWS S3

What You Will Learn

  • Scaffolding a new Angular 5 application with Angular CLI
  • Integrating Bootstrap 4, Font Awesome and Flexbox for layouts
  • Creating a Firebase backend to support your Angular 5 application
  • Integrating your frontend Angular 5 application with a Firebase backend
  • Implementing authentication using Angular services, guards and Firebase
  • Using RxJS Observables to create a realtime chat room
  • Building pages to support user functionality and persiting that data to Firebase
  • Implementing user search functionality and direct messaging
  • Building and deploying the Angular application to AWS

Authors

Table of Contents

Starting Your Angular Application
The Course Overview
Setting Up Your Environment
Setting Up the Project Directory
Installing Bootstrap
Building the Initial Pages
Creating the Login Form
Creating the Login View
Creating the Sign Up Page
Adding the Navbar Component
Generating Chatroom Page Components
Creating Chatroom Page Layout
Using a Template Driven Form for New Message Input
Finalize Styling of Chatroom Page
Creating Alert, Loading, and Authentication Services
Creating an Alert Notification
Implementing Alert Notifications on the Login Page
Creating an Application Loading Indicator
Setting Up the Authentication Service
Connecting the Login and Signup Pages to the Authentication Service
Protecting Routes with an Authentication Guard
Setting Up and Connecting to Firebase
Setting Up Firebase
Connect Sign Up Page to Firebase
Connect Login Page to Firebase
Toggling Navbar Links Based on Authentication Status
Building the Chatroom Functionality
Seeding Our Firestore Database with Chatroom Data
Fetching List of Chatrooms from Firestore
Routing to Select a Chatroom
Fetching Chatroom Title Based on Route
Rendering Chatroom Messages from Our Firestore
Posting New Chat Messages
Creating User Profiles
Seeding Our Firestore Database with User Data
Creating User Profile Pages
Implementing the Edit Profile Page Logic
Edit Profile Page HTML and SCSS
Creating Guard to Prevent Editing of Other Users’ Profiles
Clean Up, Security, and Deploying to Amazon AWS S3
Backend Security in Firebase’s Firestore
Last Minute Clean Up and Styling Modifications
Build and Deploy to Amazon AWS S3

Video Details

ISBN 139781788834483
Course Length3 hours and 55 minutes
Read More

Read More Reviews

Recommended for You

Hands-on Application Development with ASP.NET Core and Angular [Video] Book Cover
Hands-on Application Development with ASP.NET Core and Angular [Video]
$ 124.99
$ 10.00
Hands-on Full Stack Development with Angular 5 and Firebase Book Cover
Hands-on Full Stack Development with Angular 5 and Firebase
$ 31.99
$ 10.00
Build a Serverless App with AWS Lambda - Hands On! [Video] Book Cover
Build a Serverless App with AWS Lambda - Hands On! [Video]
$ 148.99
$ 10.00
Serverless Web Applications with React and Firebase Book Cover
Serverless Web Applications with React and Firebase
$ 31.99
$ 10.00
Angular 5 (formerly Angular 2) - The Complete Guide [Video] Book Cover
Angular 5 (formerly Angular 2) - The Complete Guide [Video]
$ 184.99
$ 10.01
Hands-On GUI Programming with C++ and Qt5 Book Cover
Hands-On GUI Programming with C++ and Qt5
$ 35.99
$ 10.00