32,39 €
Mehr erfahren.
- Herausgeber: Packt Publishing
- Kategorie: Wissenschaft und neue Technologien
- Sprache: Englisch
Build an end-to-end application from development to production by binding Angular with Firebase in this complete guide to web application development
Key Features
- Build a real-time production-ready web application by leveraging the features of Angular as front end and Firebase as the back end
- Learn more about authentication, databases, and security with Firebase
- Learn how to grow your application user base using Google analytics and how to make your application PWA compliant.
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.
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
Who this book is for
This book is for JavaScript developers who have some previous knowledge of the Angular framework and want to start developing serverless applications with Angular and Firebase. If you are looking for a more practical and less theory-based approach to learn these concepts, then this book is for you.
Uttam Agarwal at present works at VMware. He has more than 10 years of experience and has a wide range of knowledge of various technologies. He runs his own website, which is called CodingChum. He is an active open source contributor and regularly maintains his GitHub repository. He loves blogging and creating new products. You can check out his latest application—Heartbeat—on Google Play.Sie lesen das E-Book in den Legimi-Apps auf:
Seitenzahl: 226
Veröffentlichungsjahr: 2018
Ähnliche
Hands-On Full Stack Development with Angular 5 and Firebase
Copyright © 2018 Packt Publishing
All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.
Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing or its dealers and distributors, will be held liable for any damages caused or alleged to have been caused directly or indirectly by this book.
Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.
Commissioning Editor: Kunal ChaudhariAcquisition Editor: Nigel FernandesContent Development Editor: Arun NadarTechnical Editors: Prashant Mishra and Prajakta MhatreCopy Editor: Safis EditingProject Coordinator: Sheejal ShahProofreader: Safis EditingIndexer: Aishwarya GangawaneProduction Coordinator: Deepika Naik
First published: February 2018 Production reference: 1210218
Published by Packt Publishing Ltd. Livery Place 35 Livery Street Birmingham B3 2PB, UK.
ISBN 978-1-78829-873-5
www.packtpub.com
Mapt is an online digital library that gives you full access to over 5,000 books and videos, as well as industry leading tools to help you plan your personal development and advance your career. For more information, please visit our website.
Why subscribe?
Spend less time learning and more time coding with practical eBooks and Videos from over 4,000 industry professionals
Improve your learning with Skill Plans built especially for you
Get a free eBook or video every month
Mapt is fully searchable
Copy and paste, print, and bookmark content
PacktPub.com
Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.PacktPub.com and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at [email protected] for more details.
At www.PacktPub.com, you can also read a collection of free technical articles, sign up for a range of free newsletters, and receive exclusive discounts and offers on Packt books and eBooks.
Contributors
About the author
Uttam Agarwal at present works at VMware. He has more than 10 years of experience and has a wide range of knowledge of various technologies. He runs his own website, which is called CodingChum. He is an active open source contributor and regularly maintains his GitHub repository. He loves blogging and creating new products. You can check out his latest application—Heartbeat—on Google Play.
About the reviewers
Jonathan Irvin, as a full-stack developer, creates complex and responsive websites, web apps, and mobile apps in order to keep businesses continuously thriving. He analyzes the pain points of businesses, and alleviates them using the latest and greatest technologies. Jonathan is a freelancer who has worked with a wide range of technologies, such as React, Angular, Firebase, Node.js, PHP, Laravel, Ionic, MySQL, and MongoDB. You can contact him on Twitter at Jonathan__Irvin.
Nishant Shreshth is a dual degree (B. Tech. and M. Tech.) graduate in Electrical Engineering from IIT Bombay. He joined Amadeus Software Labs after college as a backend developer and worked on airline fares and pricing modules. He then moved to VMware, where he is currently employed, and works as a full-stack developer.
Packt is searching for authors like you
If you're interested in becoming an author for Packt, please visit authors.packtpub.com and apply today. We have worked with thousands of developers and tech professionals, just like you, to help them share their insight with the global tech community. You can make a general application, apply for a specific hot topic that we are recruiting an author for, or submit your own idea.
Table of Contents
Title Page
Copyright and Credits
Hands-On Full Stack Development with Angular 5 and Firebase
Packt Upsell
Why subscribe?
PacktPub.com
Contributors
About the author
About the reviewers
Packt is searching for authors like you
Preface
Who this book is for
What this book covers
To get the most out of this book
Download the example code files
Conventions used
Get in touch
Reviews
Organizing Your Angular Project Structure
Creating a project outline
Project structure
Overview of package.json
Setting up Firebase
Setting up an account for Firebase
Angular terminologies
The application's project structure
App module 
App routing
Authentication module
Authentication routing
Login component
Login component HTML
Login component scss
Login component spec
Authentication service
Date pipe
Common principles
Coding standard guidelines
Summary
Creating a Signup Component
Enabling authentication in Firebase
Introduction to angularfire2
Creating the authentication module
Creating services
Authentication service
User service
Defining domain model
Creating signup templates
FormModule
Bootstrap elements
Angular data binding
Error handling
Firebase errors
Creating a customized alert dialog
Creating a signup component
Summary
Creating a Login Component
Adding login functionalities to existing services
Authentication service
User service
Reusing the domain model
Creating a login template
Error handling for login
Firebase error
Creating a login component
Resetting the password
Adding modal template
Adding the onReset() functionality
Editing the password-reset template in Firebase
Summary
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
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
Creating a User's Friend List
Creating user's friend template
Creating the friend's service
Creating a Firebase node in our database
Implementing the Friend model class
Implementing the friend's service
Creating a friend's component
Creating our first date pipe
Summary
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
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
Connecting Chat Components with Firebase Database
Passing data using route parameters
Adding a route parameter ID
Linking a route to the parameter
Reading the parameter
Passing friend data to different chat components
Designing a Firebase database for chat
Creating a messaging service
Integrating our service to chat components
Summary
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
Debugging Techniques
Debugging Angular
Installing Augury
Using Augury's features
Component tree
Router tree
NgModules
Debugging a web application
HTML DOM
Layout preview
Debugging TypeScript
Viewing and searching a source file
Putting in breakpoints and watching live values
Adding code in the console window
Debugging CSS
Exploring the styles panel
Discovering and modifying styles
Network debugging
Summary
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
Growing Our Application Using Firebase
Introduction to Firebase cloud messaging
Adding FCM to our application
Google data analytics
Learning about Google adsense
Summary
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
Leave a review - let other readers know what you think
Preface
Hands-On Full Stack Development with Angular 5 and Firebase will provide you with the practical knowledge you need to develop web applications. In this book, we have introduced all the major tools and technologies required to write a complete social media application. The book is written in such a fashion that you will build the application from scratch, and as you progress through the book, you will learn about the major concepts in web development. As part of our development process, this book religiously follows common software principles and coding standards. I have also introduced unit testing our Angular component, service, and pipe. These practices in software development make us better developers.
As a part of this book, we will build web application from development to production with Angular as the frontend and Firebase as the backend. Firebase is completely scalable and real time, providing all the tools needed to develop rich, collaborative applications. With Firebase, it's easy to build and prototype any business application without creating complex backend services.
You will use Angular framework to build client-side applications using HTML and CSS. Angular provides advanced features that modularize the client-side code into HTML, CSS, components, and services. As a part of our development, we will also integrate our application with other commonly used libraries, such as RxJS.
So, stay tuned for a wonderful journey.
Who this book is for
This book is for JavaScript developers who have some previous knowledge of the Angular framework and want to start developing real-time applications with Angular and Firebase. This book is quite handy for any small scale start-up who want their business or idea to be online, as this book provide a practical tips to develop applications faster. This book is also very well suited for college students who want to build a complete web application without much investment. If you are looking for a more practical and less theory-based approach to learn major web application concepts, then this book is for you.
What this book covers
Chapter 1, Organizing Your Angular Project Structure, exposes you to the Angular project structure. You will create an Angular project using the Angular CLI command and go through all the important libraries in Angular projects.
Chapter 2, Creating a Signup Component, covers how to enable Firebase authentication and create a signup component, template, and service. You also learn about the AngularFire2 library.
Chapter 3, Creating a Login Component, teaches you how to create a login component and template. You will also perform a reset password operation.
Chapter 4, Routing and Navigation between Components, helps you to enable routes for modules and create a navigation bar to navigate between components.
Chapter 5, Creating a User Profile Page, focuses on the RxJs library and pass data between component modules. You will also create user profile page with edit operation.
Chapter 6, Creating a User's Friend List, teaches you how to create a friend list page with pagination. You will also create the friends service and custom Angular date pipe.
Chapter 7, Exploring Firebase Storage, discusses Firebase storage and configure storage for your application. You will also upload and download images from Firebase storage into your application.
Chapter 8, Creating a Chat Component, helps you create a chat module with sub-components. We also learn more about SCSS variables and mixin concepts.
Chapter 9, Connecting Chat Components with Firebase Database, covers how to integrate your chat component with Firebase database. You will also learn about passing data using route parameters.
Chapter 10, Unit Testing Our Application, teaches you about Angular testing. You will write unit test cases for our component, service, and pipe, and learn about code coverage.
Chapter 11, Debugging Techniques, covers different aspects of debugging techniques. As a part of this chapter, we will cover debugging for Angular, the web, TypeScript, CSS, and networks.
Chapter 12, Firebase Security and Hosting, teaches you about Firebase security and explains how to add security rules for users and chat messages. You also learn how to create multiple environments and host our friends application.
Chapter 13, Growing Our Application Using Firebase, covers Firebase cloud messaging. You will also learn about Google Analytics and Ads.
Chapter 14, Transforming Our App into a PWA, covers PWA features and shows how to make your application PWA-compliant. You will also learn about service workers.
To get the most out of this book
To get the most out of this book, you should have some experience of JavaScript development with HTML and CSS. As you progress through the chapters, there are links to all the important tools, editors, or frameworks required to develop Angular application.
Download the example code files
You can download the example code files for this book from your account at www.packtpub.com. If you purchased this book elsewhere, you can visit www.packtpub.com/support and register to have the files emailed directly to you.
You can download the code files by following these steps:
Log in or register at
www.packtpub.com
.
Select the
SUPPORT
tab.
Click on
Code Downloads & Errata
.
Enter the name of the book in the
Search
box and follow the onscreen instructions.
Once the file is downloaded, please make sure that you unzip or extract the folder using the latest version of:
WinRAR/7-Zip for Windows
Zipeg/iZip/UnRarX for Mac
7-Zip/PeaZip for Linux
The code bundle for the book is also hosted on GitHub athttps://github.com/PacktPublishing/Hands-On-Full-Stack-Development-with-Angular-5-and-Firebase. In case there's an update to the code, it will be updated on the existing GitHub repository.
We also have other code bundles from our rich catalog of books and videos available athttps://github.com/PacktPublishing/. Check them out!
Conventions used
There are a number of text conventions used throughout this book.
CodeInText: Indicates code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles. Here is an example: "Mount the downloaded WebStorm-10*.dmg disk image file as another disk in your system."
A block of code is set as follows:
public
addUser
(user: User):
void
{
this
.fireDb.
object
(
`
${
USERS_CHILD
}
/
${user.
uid
}
`
).
set
(user);}
Any command-line input or output is written as follows:
$ cd <your directory>\friends\src\app
Bold: Indicates a new term, an important word, or words that you see onscreen. For example, words in menus or dialog boxes appear in the text like this. Here is an example: "Click on Authentication."
Get in touch
Feedback from our readers is always welcome.
General feedback: Email [email protected] and mention the book title in the subject of your message. If you have questions about any aspect of this book, please email us at [email protected].
Errata: Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you have found a mistake in this book, we would be grateful if you would report this to us. Please visit www.packtpub.com/submit-errata, selecting your book, clicking on the Errata Submission Form link, and entering the details.
Piracy: If you come across any illegal copies of our works in any form on the Internet, we would be grateful if you would provide us with the location address or website name. Please contact us at [email protected] with a link to the material.
If you are interested in becoming an author: If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, please visit authors.packtpub.com.
Reviews
Please leave a review. Once you have read and used this book, why not leave a review on the site that you purchased it from? Potential readers can then see and use your unbiased opinion to make purchase decisions, we at Packt can understand what you think about our products, and our authors can see your feedback on their book. Thank you!
For more information about Packt, please visit packtpub.com.
Organizing Your Angular Project Structure
In this chapter, we will create project structure using the @angular/cli command. We will download all the necessary libraries using npm (node package manager). Then, we will start the project to take a look at our first Angular application running on the browser. We will go through all the important files that are required to develop a high-quality Angular application.
We will also run through setting up a testing framework setup and write test cases for some of the important components of our social application. Our aim is to develop a production-ready application through testing, development, and analytics.
At the end, we will go through the recommended guidelines for coding styles, as this is the most ignored part in development. We feel this is required when we develop any application in the team so that common terms and terminologies are followed across the development team.
The following topics will be covered in this chapter:
Creating a project outline
Project structure
Setting up Firebase
Angular terminologies
The application project structure
Common principles
Coding standard guidelines
Creating a project outline
Angular CLI (command-line interface) makes it easy to create a project. It also helps in creating component, routes, services, and pipes with a simple-to-use command. We will use Angular CLI to create a sample project outline. This provides all the necessary files to start building your application.
We require the following four steps to run our first Angular application without any coding and get our first welcome page. We also need npm to install important libraries; you can download npm from https://nodejs.org/en/download/:
Let's install Angular CLI using
npm
:
$npm install -g @angular/cli
Create the friends project structure using the
ng new
command. Since we are using SASS to create our style sheets, we will provide the
--style=sass
option as well, and this configures SASS in our application. Take a look at the following command:
$ng new friends --style=sass
Go to the newly created
friends
folder and execute
npm install
. This installs all the packages required to build our application, and it also creates the
node_modules
folder. Take a look at the
following
command:
$npm install
Finally, deploy the newly created friends project using
npm start
and take a look at your first Angular application running in a browser. Refer to the
following
command. The default port is 4200, and you can type
http://localhost:4200
to see your sample application in a browser:
$npm start
Congratulations on your first Angular application!
Project structure
The next step is to map the newly created project to an editor. We use WebStorm as our editor, which is a paid version. You can use Visual Studio Code or Sublime as your editor, which are free versions, and you can download them from the following URLs:
Visual Studio Code:
https://code.visualstudio.com/download
Sublime Text:
https://www.sublimetext.com/download
We mapped the project to our WebStorm editor and installed the dependent libraries using npm install, and it creates a node_modules folder. This folder contains all the dependent libraries. Our project structures in the editor looks like the following screenshot:
Overview of package.json
The package.json file specifies the starter packages for running the application. We can also add packages in this file as our application evolves.
The package.json file contains the following two sets of dependencies:
dependencies
:
The packages in "dependencies" contain all essential libraries for running the Angular application:
"dependencies"
: {
"@angular/animations"
:
"^5.2.0"
,
"@angular/common"
:
"^5.2.0"
,
"@angular/compiler"
:
"^5.2.0"
,
"@angular/core"
:
"^5.2.0"
,
"@angular/forms"
:
"^5.2.0"
,
"@angular/http"
:
"^5.2.0"
,
"@angular/platform-browser"
:
"^5.2.0"
,
"@angular/platform-browser-dynamic"
:
"^5.2.0"
,
"@angular/router"
:
"^5.2.0"
,
"core-js"
:
"^2.4.1"
,
"rxjs"
:
"^5.5.6"
,
"zone.js"
:
"^0.8.19"
},
Dependencies consist of the following libraries. We have explained only the important libraries in the following list:
@angular/common
:
It provides commonly used functionalities, such as pipes, services, and directives.
@angular/compiler
: It understands templates and converts them into a format that the browser understands so that our application can run and render. We don't interact directly with this library.
@angular/core
: It provides all common metadata, such as component, directive, dependency injection, and component life cycle hooks.
@angular/forms
: It provides a basic layout for inputs. This is used in login, signup, or feedback.
@angular/http
: It is an Angular service that provides a utility function for HTTP rest calls.
@angular/platform-browser
: It provides the
bootstrapStatic()
method for bootstrapping applications for production builds.
@angular/platform-browser-dynamic
:
It is mainly used in bootstrapping during development.
@angular/router
: It provides a component router for navigation between components.
core-js
: It patches the global context window with essential features of ES2015 (ES6).
rxjs
: It is a library for reactive programming using observables that help in writing asynchronous code for HTTP.
zone.js
:
It provides an execution context that persists across asynchronous tasks.
devDependencies
:
The packages in
devDependencies
contain libraries that
are mostly required during the development process. You can exclude
devDependencies
during production builds using the
following
npm
command:
$npm install my
-
application
--
production
Setting up Firebase
In our project, we use Firebase as a backend service, a mobile and web application platform. It provides complete suites of products integrated into one platform and makes the development process much faster with the major part handled by the platform. Its products are segregated around two major themes:
Develop and test your application
: These suites provide all the services required to develop a scalable application
Grow and engage your audience
: This is mostly required to grow our application
You can refer to the following link for more information on Firebase: https://firebase.google.com/.
