Angular x Cloud Services

Introduction 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. Scenario Our fictional company IT Sports (see Tutorial: Angular & Internationalization) wanted us to […]

by Christian Fritz

February 1, 2022

6 min read

headerImage - Angular x Cloud Services

Introduction

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.

Scenario

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.

Welcome - Angular x Cloud Services

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:

Courses - Angular x Cloud Services

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.

Implementation

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:

Angular Google Firebase

After installing the Firebase dependency and adding the Firebase config to our app, we are ready to implement the authentication solution. There’s a manual for web (JavaScript), but not specifically for Angular. Luckily, npm packages exist for almost anything nowadays, so we use firebaseui-angular, which wraps the javascript. The readme file states that internationalisation is not supported, unfortunately. There is a fork called firebaseui-angular-i18n, which adds multi-language support. However, as of now, it’s not compatible with the latest Angular version and the other dependencies. We will announce the bad news to IT Sports later and continue with an English signup process for now.


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:

Angular firebaseUiAuthConfig

With this and the additional steps described in the manual, we are seeing a sign-up box

YD1f8TzG4qfvDtbf24 dprqD4GS6uklKbucc0hCvWdxQJ IkLfFASg88rXoJS4DtS2Ry WBb0NqcIga T0IGBU8bKK IcfpHVcRby24k 4xn88gtr RYCWZrU qPCQZSb5kAiKkR - Angular x Cloud Services

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:

Angular, AngularFireAuth
Angular, AngularFireAuth

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.

Design

Here’s the initial data model:

Angular code

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 userIDs as properties. This allows us to query for a certain user easily and we do not have to go through the whole object. Similar to a relational database design, the design decisions depend on your requirements and which queries are required or need to be performant.

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.

Angular code

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.

Implementation

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:

Angular app

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
>> ng build
All that’s left is to run
>> firebase deploy
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:

Angular

Future Work

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.

Conclusion

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!

Categories

Software Developer and Team Lead at Dreamix