Before we dive into coding, let's decide on the stack we wish to use with the application. In this chapter, we are going to use the following:
- The Angular framework, for the overall application
- Angular components (also known as Angular Material) so that we can build user interfaces with the Google Material Design specification
- Firebase, for authentication, real-time databases, and hosting
Let's provide a quick overview of each item and discuss why we need it for this project:
- Angular: We plan to build a simple chat application with the remote backend. This means you are going to need the HTTP client, routing to support multiple pages, such as the Login and Chat windows, and many other smaller pieces. To achieve our goal fast, we need to focus on the implementation of our application features, rather than building the whole ecosystem from scratch. This is why we aren't going to start with plain JavaScript and use the Angular CLI tool. We are about to generate a ready to use web application that we can package as an Electron project.
- Angular Material: Our chat application is going to need some UI components. We need at least a Login dialog, a Chat window, the input components, and many other blocks. To save time, we shall be using Angular Material components as an easy and natural way to build a typical Angular application. The Angular Material library already contains a great variety of components. Ensure that you check out the main website if you wish to view any documentation, guides, and examples: https://material.angular.io/.
Next, we need to pick our data storage solution. In this chapter, we are going to be using Google Firebase.
- Google Firebase: We need to store our chat data somewhere in the cloud. For this purpose, we are going to use Firebase. Firebase is a very popular mobile and web application development platform. It provides a wide variety of services that you can use to boost your applications, including the following:
- A real-time database that allows us to sync data across devices and platforms
- An authentication service with multiple protocols and integrations
- Hosting
- Push notifications
- Analytics
Please note that Google Firebase is not the only solution out there. Check out the following link for the top 10 Firebase alternatives: https://blog.back4app.com/2018/01/12/firebase-alternatives/.
It is effortless to get started with Google Firebase, and we are going to walk through that process in this chapter. First, though, let's create a new Angular project.
You can find the code files for this chapter in this book's GitHub repository: https://github.com/PacktPublishing/Electron-Projects/tree/master/Chapter08.