Project to Calculate COVID Moving Average — A Chart using Angular + Google Charts[Part 4]
This is a series of posts, all related to the same project, but each one is focused on specific issues.
After a while, I finally decided to complete this project by adding an UI so that users can see a chart depicting the COVID Moving Average. The result is simple but objective, see here how it looks, and if you want to see the repository containing the project it be found here.
To do the chart the following technologies were used:
- Angular 10 (Single Page Application Framework)
- Google Charts (Chart Generation)
- Heroku (Deploy & Hosting)
1. Angular Project
Angular was used to create a SPA (Single Page Application) to present the data in a chart. A simple project was created using the command:
$ng new <project-name>
Below is the template, which is described line by line next.
- Line 3: Is the Google chart component provided by Angular Google Charts. See that ComboChart was used, because we need to provide two series, one as bars and another as a line;
- Line 6: Is a button to trigger CSV generation;
- Line 13: Is an else block that contains a CSS Spinner to be displayed while the data is loaded, for details go here (in portuguese).
In addition, a service injecting HttpClient was created to access the Firebase COVID information. It uses the link provided by Firebase (https://covid-moving-average.firebaseio.com/covid.json). The development of this Covid Database was presented here, here and here.
Chart generation used Google Charts along with a wrapper library called Angular Google Charts. It is important to mention that the chart presents two pieces of information, the number of deaths (in a month) in blue bars and the moving average in a line.
In addition, to provide CSV data export, a library called Export to CSV was used. Below is the chart of 04/12/2021.
2. Host & Deploy
As previou posts, Heroku was used to Host & Deploy the application. The main issue is to understand what happens behind the scenes to make the deployment of an Angular Application to work. Let me try to explain:
Angular is a SPA Framework, this means the App is not rendered on a server. This also means that the browser requests the page to a URL and the response contains everything the client needs to render the page, in other words, HTML+CSS+Javascript. But, WHO will provide the response to the request?
The answer is: A Web server!
Hold on, now let’s go to Angular documentation, and check what does Angular do after we build an application: It “Compiles an Angular app into an output directory named dist/ at the given output path. Must be executed from within a workspace directory.”
Ok… So, that line means we need to call the build command on Heroku and after that the application will be inside dist/ directory. All that is left is a web server to accept requests, read this folder and reply with the contents of /dist.
As seen here. We can use Express as a Web Server that will accept requests and will provide responses to requests. So, on command line do:
$npm install express path --save
The command above will add the express dependency to the project. Remember to create a file called server.js as shown bellow:
This file is a mini Web Server that will listen Port 8080 and will return the index.html of our application.
This is it.
