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>
Table of Contents (20 chapters)
Title Page
Packt Upsell
Contributors
Preface
Index

Reusing the domain model


Once the user is successfully logged in, we will retrieve the user object from our Firebase database. On successful log in, we get the string uid of the user and use this uid to retrieve the user details from the user's node in the Firebase database. As discussed in the preceding section, we get the data in the JSON format as follows:

{
  "email": "[email protected]",
  "mobile": "9972022242",
  "name": "Uttam Agarwal",
  "uid": "qu3bXn9tTJR7j4PBp9LzBGKxHAe2"
}

This JSON object needs to be mapped to the user object. When we retrieve the JSON object from Firebase using AngularFireDatabase, we provide the type object in angle brackets, <User> and this maps the JSON to the user object:

public getUser(uid: string): Observable<User> {
  return this.fireDb.object<User>(`${USERS_CHILD}/${uid}`).valueChanges();
}

The constructor accepts all the parameters assigned to its member variable as shown in the following code; here's the complete user.ts:

export...