This article on Angular shows how in certain scenarios, cloud services can remove the need to write your own backend. We are using Google Firebase as an example, but this should be possible with any other well-known cloud service provider.
Our fictional company IT Sports (see Tutorial: Angular & Internationalization) wanted us to create an Angular app is back and has additional requirements. Now, their customers should be able to join the courses via the website. As a first draft, we go with two different screens – one for the user to log in and the other one to subscribe for courses.
Since we don’t know yet how the authentication works, this is a grey box for now. Once the user is logged in, a redirect to the courses page is triggered:
This existing page shall be extended – the user shall be able to join and leave a course.
Authentication of Users
One crucial requirement for our Angular application is the authentication of users. We want the course slots to be booked (and cancelled, if necessary) by identifiable individuals.
The registration via firebase.google.com/ is straightforward and the project setup is self-explanatory. You can already define that you want to use the Firebase hosting as well:
It’s recommended to read the manual of the library since many configuration options are available. We follow the general instructions for setting up the library, but we are allowing accounts created by e-mail (and enforce that the user enters a first and last name as per requirement) and via a Google account. Therefore, we add the following configuration object in app.module.ts:
With this and the additional steps described in the manual, we are seeing a sign-up box
Since the user is able to sign in now, there should also be an option to sign out. We are using the AngularFireAuth service for the logout command and to check in the template whether we are logged in already:
Additionally, we need to add the new message key to our json files.
Although the user can’t interact with the courses yet, sign-up, login and logout are now possible. Let’s take a look at how we can display data for the users.
Database for the Angular App
We need a way to persist the user’s bookings. Therefore, we need some sort of persistent storage. Firebase offers two different databases compatible with the latest Angular version:a real-time database and the firestore. Although both would probably suit this small-scale application, we will choose the real-time database. Be aware that it’s not a relational database, but a json file! This requires a sql-accustomed mind to bend in another direction. Since we are using a database now, we can refactor the application and move the hard-coded course information to the database.
Here’s the initial data model:
The courses are defined as an array, and the id is just the position in the array, so that we can modify it via its position. This works only if new courses are appended on the bottom of the list. For participants, we use a different approach. Here we do not have a list, but an object with the
Next, we have to define security rules which regulate the read/write access to the different parts of the json file. We can either explicitly mention a node in the json or use a variable (indicated with a $ prefix), which we can use later.
We can upload an initial json with the course information (since we cannot add them via UI) as database seed and configure the security rules via Firebase web interface.
In order to connect our Angular application to the database, we need to add the AngularFireDatabaseModule to app.module.ts. From the project settings in Firebase we can copy the new firebaseConfig, which should contain a databaseURL.
To retrieve the courses, we define an Observable:
You can find the rest of the refactoring to show the records from the database and the whole code on GitHub.
Deployment of the Angular App
The first step is to login and initialise via:
>> firebase login
>> firebase init
In order to deploy, we need to make sure the Firebase config is also present in environment.prod.ts. After this, we can run the build with
All that’s left is to run
At the end, the URL to the app appears in the console. The convenient part is that we can deploy from any branch. Once you enter some data into the database, it should look like this:
With this “production-ready prototype” our work for this blog article is over, but there are plenty of features that would improve the user experience both for IT Sports and their customers. First of all, we haven’t looked into different roles for identity management yet. Combining this with an admin interface would make it obsolete to edit a json file in the Firebase console each time we introduce a new course or an existing one needs modifications.
Another interesting feature – from the technological point of view – are push notifications which can inform the user about upcoming changes. Alternatively, this can happen via email by an email service like SendGrid.
We extended the Angular application with important features such as authentication and persistence. Bringing it to “production” was easy and it is a great way to develop prototypes or after-work applications for friends and family.
The chosen cloud services provider substitutes our whole backend infrastructure and stores all our data, so we are caught in a vendor lock-in. This means switching to a different provider will most likely be difficult. When more users are interacting with the app and storage or traffic increases, we might need to switch to the paid plan of the chosen cloud provider. Therefore, it’s important to compare the providers and anticipate the usage scenarios.
In case we need more complicated backend logic which exceeds CRUD functionality, we might be able to use the computing resources of the cloud providers – also known as serverless computing. This might be an interesting topic for another blog article.
Apart from the technical fascination, we need to be aware that all the sensitive data is stored in the cloud. Thus, we need to make sure that we are complying with the data protection laws of the countries where we offer our services. Hopefully, this article gave you a first glimpse into the vast possibilities of software development with cloud services. We at Dreamix, an Angular development company, would love to hear about your experiences!