Book Image

Hands-on Full Stack Development with Angular 5 and Firebase

By : Uttam Agarwal
Book Image

Hands-on Full Stack Development with Angular 5 and Firebase

By: Uttam Agarwal

Overview of this book

<p>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.</p> <p>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.</p> <p>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.</p> <p>By the end of this book, you’ll be able to confidently build any complex application.</p>

Related Content you might be interested in

Current Title:

Small book image
Hands-on Full Stack Development with Angular 5 and Firebase
Uttam Agarwal
Feb, 2018 | 256 pages
Small book image
TypeScript 2.x for Angular Developers
Chris Nwamba
Dec, 2017 | 240 pages
Small book image
Bootstrap 4 Cookbook
Ajdin Imsirovic
Jun, 2017 | 338 pages
Small book image
Hands-On Full Stack Web Development with Angular 6 and Laravel 5
Fernando Monteiro
Jul, 2018 | 420 pages
Table of Contents (20 chapters)
Title Page
Title Page
Packt Upsell
Packt Upsell
Contributors
Contributors
Preface
Preface
Free Chapter
1
Organizing Your Angular Project Structure
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
2
Creating a Signup Component
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
3
Creating a Login Component
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
4
Routing and Navigation between Components
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
5
Creating a User Profile Page
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
6
Creating a User's Friend List
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
7
Exploring Firebase Storage
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
8
Creating a Chat Component
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
9
Connecting Chat Components with Firebase Database
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
10
Unit Testing Our Application
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
11
Debugging Techniques
Debugging Techniques
Debugging Angular
Debugging a web application
Debugging TypeScript
Debugging CSS
Network debugging
Summary
12
Firebase Security and Hosting
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
13
Growing Our Application Using Firebase
Growing Our Application Using Firebase
Introduction to Firebase cloud messaging
Adding FCM to our application
Google data analytics
Learning about Google adsense
Summary
14
Transforming Our App into a PWA
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
Other Books You May Enjoy
Other Books You May Enjoy
Leave a review - let other readers know what you think
Index
Index

Network debugging

Network debugging is quite useful in understanding the API call and its response. In the  Firebase API call, we won't find this of much use, as the Firebase database portal provides a view of the JSON response. Network debugging tools are quite handy when we explore live debugging of network calls. In this section, we will discuss the following two tools:

  • Postman: This is similar to Augury extension; you can install the Postman from the Chrome extension, or you can download the OS-specific installer from https://www.getpostman.com/. This tool is really useful in the initial phase of development, as this helps to understand the APIs and response and to integrate the APIs in the application accordingly. You can create HTTP methods, such as GET, POST, PUT, or DELETE, using Authorization, Headers, and Body:
  • The network tab in the Chrome developer tool: This is really useful in live debugging of network calls in the Chrome developer tool. This shows all the network calls when...
Previous Section
End of Section 6
Next Section