Deploying our app with Firebase hosting

Firebase is a hosting solution provided by Google that we can use to deploy our Angular applications. The Firebase team has put much effort into creating an Angular CLI schematic for deploying an Angular application using one single command. Before diving deeper, let's learn how to set up Firebase hosting:

1. Use a Google account to log in to Firebase at https://console.firebase.google.com.
2. Click the Add project button to create a new Firebase project.

3. Enter the name of the project, weather-app, and click the Continue button.

   Firebase generates a unique identifier for your project, such as weather-app-b11a2, underneath the name of the project. The identifier will be used in the hosting URL of your project later on.

4. Disable the use of Google Analytics for your project and click the Create project button.

5. Once the project has been created, the following will appear on the screen:

   

   Figure 4.9 – Firebase project creation

6. Click on the Continue...

Summary

In this chapter, we built a PWA application that displays weather information for a given city.Initially, we set up the OpenWeather API to get weather data and created an Angular application from scratch to integrate it. We learned how to use the built-in HTTP client of the Angular framework to communicate with the OpenWeather API. We also installed the Angular Material library and used some ready-made UI components for our application.After creating the Angular application, we introduced the Angular service worker and enabled it to work offline. We learned how to interact with the service worker and provide notifications for updates in our application. Finally, we deployed a production version of our application into the Firebase hosting and installed it locally on our device.In the next chapter, we will learn how to create an Angular desktop application with Electron, the big rival of PWA applications.

Exercise

Use the OpenWeather API to display a weekly forecast for the selected city. The OpenWeather API provides the 5 Day / 3 Hour Forecast collection that can be used. The collection returns forecast every 3 hours for each day so we are currently interested in the weather at 12:00pm each day. The forecast should be displayed as a grid list of card components and should be positioned below the current weather of the city.You can find the solution to the exercise in the Chapter04 folder of the exercise branch at https://github.com/PacktPublishing/Angular-Projects-Third-Edition/tree/exercise.

Further reading

• PWA: https://web.dev/progressive-web-apps
• OpenWeather API: https://openweathermap.org/api
• Angular Material: https://material.angular.io
• Angular HTTP client: https://angular.io/guide/http
• Angular service worker: https://angular.io/guide/service-worker-getting-started
• Communicating with the Angular service worker: https://angular.io/guide/service-worker-communications
• HTTP server: https://www.npmjs.com/package/http-server
• Firebase hosting: https://firebase.google.com/docs/hosting
• Deployment in Angular: https://angular.io/guide/deployment#automatic-deployment-with-the-cli

Setting up the OpenWeather API

The OpenWeather team created the OpenWeather API, which contains current and historical weather information from over 200,000 cities worldwide. It also supports forecast weather data for more detailed information.

We need to get an API key first to start using the OpenWeather API:

1. Navigate to the OpenWeather API website at https://openweathermap.org/api.

   You will see a list of all available APIs from the OpenWeather team.

2. Find the Current Weather Data section and click the Subscribe button.

   You will be redirected to the page with the available pricing schemes of the service. Each scheme supports a different combination of API calls per minute and month. For this project, we are going to use the Free tier.

3. Click on the Get API key button.

   You will be redirected to the sign-up page of the service.

4. Complete all the required details and click the Create Account button.

   A confirmation...

Displaying weather data

In this section, we will create an Angular application to display weather information for a given city. The user will enter the name of the city in an input field, and the application will use the OpenWeather API to get weather data for the specified city. We will cover the following topics in more detail:

• Setting up the Angular application
• Communicating with the OpenWeather API
• Displaying weather information for a city

Let’s start by creating the Angular application first in the following section.

Setting up the Angular application

We will use the ng new command of the Angular CLI to create a new Angular application from scratch:

ng new weather-app --style=scss --routing=false

The preceding command will create a new Angular CLI application with the following properties:

• weather-app: The name of the Angular application
• --style=scss: Indicates that our Angular application will use the SCSS...

Enabling offline mode with the service worker

Users from anywhere can now access our Angular application to get weather information for any city they are interested in. When we say anywhere, we mean any network type, such as broadband, cellular (3G/4G/5G), and Wi-Fi. Consider the case where a user is in a place with low coverage or frequent network outages. How is our application going to behave? Let’s find out by experimenting:

1. Run the Angular application using the ng serve command of the Angular CLI.
2. Open your favorite browser and navigate to http://localhost:4200, the default address and port number for an Angular CLI project. You should see the input field for entering the name of the city:

Figure 4.3 – Entering the name of a city

3. Open the developer tools of your browser and navigate to the Network tab. Set the value of the Throttling dropdown to Offline:

Figure 4.4 – Offline network mode

4. Try...

Staying up to date with in-app notifications

When we want to apply a change in a web application, we make the change and build a new version of our application. The application is then deployed to a web server, and every user can access the latest version immediately. But PWAs are different.

When we deploy a new version of our PWA, the service worker must act accordingly and apply a specific update strategy. It should notify the user of the new version or install it immediately. Which update strategy we follow depends on our requirements. In this project, we want to show a prompt to the user and let them decide whether they want to update the app. Let’s see how to implement this feature in our application:

1. Open the app.module.ts file and add MatSnackBarModule to the imports array of the @NgModule decorator:

   import { MatSnackBarModule } from '@angular/material/snack-bar';
   @NgModule({
     declarations: [
       AppComponent,
       WeatherComponent
    ...

Deploying our app with Firebase Hosting

Firebase is a hosting solution provided by Google that we can use to deploy our Angular applications. The Firebase team has put much effort into creating an Angular CLI schematic for deploying an Angular application using one single command. Before diving deeper, let’s learn how to set up Firebase Hosting:

1. Use a Google account to log in to Firebase at https://console.firebase.google.com.
2. Click the Add project button to create a new Firebase project.
3. Enter the name of the project, weather-app, and click the Continue button.

   Firebase generates a unique identifier for your project, such as weather-app-b11a2, underneath the name of the project. The identifier will be used in the hosting URL of your project later on.

4. Disable the use of Google Analytics for your project and click the Create project button.
5. Once the project has been created, the following will appear on the screen...

Summary

In this chapter, we built a PWA that displays weather information for a given city.

Initially, we set up the OpenWeather API to get weather data and created an Angular application from scratch to integrate it. We learned how to use the built-in HTTP client of the Angular framework to communicate with the OpenWeather API. We also installed the Angular Material library and used some ready-made UI components for our application.

After creating the Angular application, we introduced the Angular service worker and enabled it to work offline. We learned how to interact with the service worker and provide notifications for updates in our application. Finally, we deployed a production version of our application into Firebase Hosting and installed it locally on our device.

In the next chapter, we will learn how to create an Angular desktop application with Electron, the big rival of PWAs.

Exercise

Use the OpenWeather API to display a weekly forecast for the selected city. The OpenWeather API provides the 5 Day / 3 Hour Forecast collection that can be used. The collection returns a forecast every 3 hours for each day, so, for a weekly forecast, you should just focus on the weather at 12:00pm each day. The forecast should be displayed as a grid list of card components and should be positioned below the current weather of the city.

You can find the solution to the exercise in the Chapter04 folder of the exercise branch at https://github.com/PacktPublishing/Angular-Projects-Third-Edition/tree/exercise.

Further reading

• PWAs: https://web.dev/progressive-web-apps
• OpenWeather API: https://openweathermap.org/api
• Angular Material: https://material.angular.io
• Angular HTTP client: https://angular.io/guide/http
• Angular service worker: https://angular.io/guide/service-worker-getting-started
• Communicating with the Angular service worker: https://angular.io/guide/service-worker-communications
• HTTP server: https://www.npmjs.com/package/http-server
• Firebase Hosting: https://firebase.google.com/docs/hosting
• Deployment in Angular: https://angular.io/guide/deployment#automatic-deployment-with-the-cli