Hands-on Full Stack Development with Angular 5 and Firebase

Build an end-to-end application from development to production by binding Angular with Firebase in this complete guide to web application development
Preview in Mapt

Hands-on Full Stack Development with Angular 5 and Firebase

Uttam Agarwal
New Release!

Build an end-to-end application from development to production by binding Angular with Firebase in this complete guide to web application development
Mapt Subscription
FREE
$29.99/m after trial
eBook
$16.00
RRP $31.99
Save 49%
Print + eBook
$39.99
RRP $39.99
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
$16.00
$39.99
$29.99 p/m after trial
RRP $31.99
RRP $39.99
Subscription
eBook
Print + eBook
Start 14 Day Trial

Frequently bought together


Hands-on Full Stack Development with Angular 5 and Firebase Book Cover
Hands-on Full Stack Development with Angular 5 and Firebase
$ 31.99
$ 16.00
Switching to Angular - Third Edition Book Cover
Switching to Angular - Third Edition
$ 23.99
$ 12.00
Buy 2 for $28.00
Save $27.98
Add to Cart

Book Details

ISBN 139781788298735
Paperback256 pages

Book Description

This book is a complete package for you to build real-time web applications. You will build an end-to-end social networking web application from development to production with Angular as the frontend and Firebase as the backend.

You will create an application called Friends with authentication, friends, and chat features. During the process, you’ll use Firebase authentication to register new users and Firebase database to store your extra user data. You’ll take a look at how to store and retrieve your user's images from Firebase storage. Then, you’ll create a real-time chat module with the Firebase database. Next, you’ll secure your database using Firebase security, make your application live with Firebase hosting, and develop your application with analytics.

Moving on, you’ll take a look at how to create web pages using bootstrap with HTML, CSS, and TypeScript. You will use the angularfire2 library API in Angular services to interact with Firebase and write unit tests using the Jasmine framework that will help you to write a production-ready application. You’ll also discover various debugging techniques to troubleshoot any bug in your application. Finally, you’ll make your application Progressive Web Applications compliant.

By the end of this book, you’ll be able to confidently build any complex application.

Table of Contents

Chapter 1: Organizing Your Angular Project Structure
Creating a project outline
Project structure
Setting up Firebase
Angular terminologies
The application's project structure
Common principles
Coding standard guidelines
Summary
Chapter 2: Creating a Signup Component
Enabling authentication in Firebase
Introduction to angularfire2
Creating the authentication module
Creating services
Defining domain model
Creating signup templates
Error handling
Creating a customized alert dialog
Creating a signup component
Summary
Chapter 3: Creating a Login Component
Adding login functionalities to existing services
Reusing the domain model
Creating a login template
Error handling for login
Creating a login component
Resetting the password
Summary
Chapter 4: Routing and Navigation between Components
Enabling routes in an app component
Creating a routing module for authentication
Exploring more routing techniques
Adding authentication guards
Firebase session lifecycle
Our project structure as of now
Summary
Chapter 5: Creating a User Profile Page
Introduction to RxJS
Passing data between module components
Introduction to SASS
Creating a user profile component
Enhancing services for update operation
Creating an edit dialog component
Firebase session for the update operation
Summary
Chapter 6: Creating a User's Friend List
Creating user's friend template
Creating the friend's service
Creating a friend's component
Creating our first date pipe
Summary
Chapter 7: Exploring Firebase Storage
Introducing Firebase storage
Configuring Firebase storage
Uploading the profile picture
Downloading friends images
Deleting the profile images
Handling errors in Firebase storage
Summary
Chapter 8: Creating a Chat Component
Creating a chat module
Creating a color variable
Creating a chat component
Creating a chat message list component
Creating a mixin for the message view
Creating a chat message component
Creating a chat message form component
Summary
Chapter 9: Connecting Chat Components with Firebase Database
Passing data using route parameters
Passing friend data to different chat components
Designing a Firebase database for chat
Creating a messaging service
Integrating our service to chat components
Summary
Chapter 10: Unit Testing Our Application
Introduction to Angular testing
Unit testing an Angular component
Unit testing an Angular service
Unit testing Angular pipe
Code coverage
Summary
Chapter 11: Debugging Techniques
Debugging Angular
Debugging a web application
Debugging TypeScript
Debugging CSS
Network debugging
Summary
Chapter 12: Firebase Security and Hosting
Introducing Firebase security
Adding security rules for users
Adding security rules for chat messages
Indexing users and friends
Setting up multiple environments
Hosting the friends app in Firebase
Summary
Chapter 13: Growing Our Application Using Firebase
Introduction to Firebase cloud messaging
Adding FCM to our application
Google data analytics
Learning about Google adsense
Summary
Chapter 14: Transforming Our App into a PWA
Introduction to PWA
Introduction to service worker
Adding our application to phone home screens
Enabling offline mode
Compliance testing using Lighthouse
Summary

What You Will Learn

  • Understand the core concepts of Angular framework
  • Create web pages with Angular as front end and Firebase as back end
  • Develop a real-time social networking application
  • Make your application live with Firebase hosting
  • Engage your user using Firebase cloud messaging
  • Grow your application with Google analytics
  • Learn about Progressive Web App

Authors

Table of Contents

Chapter 1: Organizing Your Angular Project Structure
Creating a project outline
Project structure
Setting up Firebase
Angular terminologies
The application's project structure
Common principles
Coding standard guidelines
Summary
Chapter 2: Creating a Signup Component
Enabling authentication in Firebase
Introduction to angularfire2
Creating the authentication module
Creating services
Defining domain model
Creating signup templates
Error handling
Creating a customized alert dialog
Creating a signup component
Summary
Chapter 3: Creating a Login Component
Adding login functionalities to existing services
Reusing the domain model
Creating a login template
Error handling for login
Creating a login component
Resetting the password
Summary
Chapter 4: Routing and Navigation between Components
Enabling routes in an app component
Creating a routing module for authentication
Exploring more routing techniques
Adding authentication guards
Firebase session lifecycle
Our project structure as of now
Summary
Chapter 5: Creating a User Profile Page
Introduction to RxJS
Passing data between module components
Introduction to SASS
Creating a user profile component
Enhancing services for update operation
Creating an edit dialog component
Firebase session for the update operation
Summary
Chapter 6: Creating a User's Friend List
Creating user's friend template
Creating the friend's service
Creating a friend's component
Creating our first date pipe
Summary
Chapter 7: Exploring Firebase Storage
Introducing Firebase storage
Configuring Firebase storage
Uploading the profile picture
Downloading friends images
Deleting the profile images
Handling errors in Firebase storage
Summary
Chapter 8: Creating a Chat Component
Creating a chat module
Creating a color variable
Creating a chat component
Creating a chat message list component
Creating a mixin for the message view
Creating a chat message component
Creating a chat message form component
Summary
Chapter 9: Connecting Chat Components with Firebase Database
Passing data using route parameters
Passing friend data to different chat components
Designing a Firebase database for chat
Creating a messaging service
Integrating our service to chat components
Summary
Chapter 10: Unit Testing Our Application
Introduction to Angular testing
Unit testing an Angular component
Unit testing an Angular service
Unit testing Angular pipe
Code coverage
Summary
Chapter 11: Debugging Techniques
Debugging Angular
Debugging a web application
Debugging TypeScript
Debugging CSS
Network debugging
Summary
Chapter 12: Firebase Security and Hosting
Introducing Firebase security
Adding security rules for users
Adding security rules for chat messages
Indexing users and friends
Setting up multiple environments
Hosting the friends app in Firebase
Summary
Chapter 13: Growing Our Application Using Firebase
Introduction to Firebase cloud messaging
Adding FCM to our application
Google data analytics
Learning about Google adsense
Summary
Chapter 14: Transforming Our App into a PWA
Introduction to PWA
Introduction to service worker
Adding our application to phone home screens
Enabling offline mode
Compliance testing using Lighthouse
Summary

Book Details

ISBN 139781788298735
Paperback256 pages
Read More

Read More Reviews

Recommended for You

Switching to Angular - Third Edition Book Cover
Switching to Angular - Third Edition
$ 23.99
$ 12.00
Complete Bootstrap: Responsive Web Development with Bootstrap 4 Book Cover
Complete Bootstrap: Responsive Web Development with Bootstrap 4
$ 35.99
$ 18.00
Learning Node.js Development Book Cover
Learning Node.js Development
$ 31.99
$ 16.00
Hands-On Full-Stack Development with Swift Book Cover
Hands-On Full-Stack Development with Swift
$ 35.99
$ 18.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
$ 25.00
Docker - Swarm, Services and Stack - Hands-On [Video] Book Cover
Docker - Swarm, Services and Stack - Hands-On [Video]
$ 196.99
$ 39.40