Storing data in Firebase

The application will be able to store photos and their location in Firebase. We will use the Storage service to upload our photos and the Cloud Firestore database to keep their location. We will further expand our application in the following tasks:

• Creating a Firebase project
• Integrating the AngularFire library

First, we must set up a new Firebase project for our application.

Creating a Firebase project

We can set up and configure a Firebase project using the Firebase console at https://console.firebase.google.com:

1. Click on the Add project button to create a new Firebase project:

   

   Figure 6.4 – Create a new Firebase project

2. Enter a name for your project and click the Continue button:

   

   Figure 6.5 – Enter the project name

   Firebase generates a unique identifier for your project, which is located underneath the project name and is used in various Firebase services.

3. Disable Google Analytics for this project and click on the Create project button...

Previewing photos with CesiumJS

The next feature of our application will be to display all the photos we have taken with the camera on a 3D map. The CesiumJS library provides a viewer with a 3D globe that we can use to visualize various things, such as images in specific locations. This new feature of our application will consist of the following:

• Configuring CesiumJS
• Displaying photos on the viewer

We will begin by learning how to set up the CesiumJS library.

Configuring CesiumJS

The CesiumJS library is an npm package that we can install to start working with 3D maps and visualizations:

1. Run the following npm command to install CesiumJS:

npm install cesium

1. Open the angular.json configuration file and add the following entries in the assets array of the build architect option:

{
  "glob": "**/*",
  "input": "node_modules/cesium/Build/Cesium/Workers",
  "output": "/assets/cesium/Workers"
},
{
  "glob": "...

Summary

In this chapter, we built a mobile application for taking photos, tagging them with the current location, and displaying them on a 3D map. Initially, we learned how to create a new mobile application using the Ionic framework. We built the application locally and integrated Capacitor to interact with the camera and the GPS device. The camera was used to take photos, and the GPS to mark them with the location.Later on, we used Firebase services to store our photo files and data in the cloud. Finally, we learned how to retrieve the stored photos from Firebase and display them on a 3D globe using the CesiumJS library.In the next chapter, we will investigate another way to prerender content in Angular. We will use server-side rendering techniques to create a GitHub portfolio website.

Practice questions

1. Which toolkit can we use to create a UI in a Capacitor application?
2. Which method do we use to take photos with the camera in a Capacitor application?
3. How do we read the current location in a Capacitor application?
4. How do we add a menu toggle button with Ionic?
5. Which Capacitor command do we use to sync the application bundle with native mobile projects?
6. What is the difference between test and production modes in Cloud Firestore?
7. How do we initialize an application with the AngularFire library?
8. Which method do we use to fetch data from a Cloud Firestore collection?
9. How do we create a pin using the CesiumJS library?
10. How do we convert latitude and longitude to degrees using CesiumJS?

Further reading

• Getting started with Capacitor: https://capacitorjs.com/docs/getting-started
• Android getting started guide for Capacitor: https://capacitorjs.com/docs/android#getting-started
• iOS getting started guide for Capacitor: https://capacitorjs.com/docs/ios#getting-started
• Angular development with Ionic: https://ionicframework.com/docs/angular/overview
• AngularFire library documentation: https://firebaseopensource.com/projects/angular/angularfire2
• CesiumJS quick start guide: https://cesium.com/docs/tutorials/quick-start
• CesiumJS and Angular article: https://cesium.com/blog/2018/03/12/cesium-and-angular

Taking photos with Capacitor

The first page of our application will allow the user to take photos using the camera. We will use the Capacitor runtime to get access to the native resource of the camera. To implement the page, we need to take the following actions:

• Create the user interface.
• Interact with Capacitor.

Let’s start building the user interface of the page.

Creating the user interface

Each page in our application is a different Angular component. To create an Angular component in Ionic, we can use the generate command of the Ionic CLI:

ionic generate page capture

The previous command will perform the following actions:

• Create an Angular component named capture.
• Create a related routes file.

Let’s start building the logic of our new page now:

1. First, make our page the default when the user opens the application. Open the app.routes.ts file and change the first entry of the routes property...

Storing data in Firebase

The application will be able to store photos and their location in Firebase. We will use the Storage service to upload our photos and the Cloud Firestore database to keep their location. We will further expand our application in the following tasks:

• Creating a Firebase project
• Integrating the AngularFire library

First, we must set up a new Firebase project for our application.

Creating a Firebase project

We can set up and configure a Firebase project using the Firebase console at https://console.firebase.google.com:

1. Click on the Add project button to create a new Firebase project:

Figure 6.4 – Create a new Firebase project

2. Enter a name for your project and click the Continue button:

   

   Figure 6.5 – Enter the project name

   Firebase generates a unique identifier for your project, which is located underneath the project name and is used in various Firebase services...

Previewing photos with CesiumJS

The next feature of our application will be to display all the photos we have taken with the camera on a 3D map. The CesiumJS library provides a viewer with a 3D globe that we can use to visualize various things, such as images in specific locations. This new feature of our application will consist of the following:

• Configuring CesiumJS
• Displaying photos on the viewer

We will begin by learning how to set up the CesiumJS library.

Configuring CesiumJS

The CesiumJS library is an npm package that we can install to start working with 3D maps and visualizations:

1. Run the following npm command to install CesiumJS:

   npm install cesium
   

2. Open the angular.json configuration file and add the following entries in the assets array of the build architect option:

   {
     "glob": "**/*",
     "input": "node_modules/cesium/Build/Cesium/Workers",
     "output"...

Summary

In this chapter, we built a mobile application for taking photos, tagging them with the current location, and displaying them on a 3D map. Initially, we learned how to create a new mobile application using the Ionic framework. We built the application locally and integrated Capacitor to interact with the camera and the GPS device. The camera was used to take photos, and the GPS to mark them with the location.

Later on, we used Firebase services to store our photo files and data in the cloud. Finally, we learned how to retrieve the stored photos from Firebase and display them on a 3D globe using the CesiumJS library.

In the next chapter, we will investigate another way to prerender content in Angular. We will use server-side rendering techniques to create a GitHub portfolio website.

Practice questions

1. Which toolkit can we use to create a UI in a Capacitor application?
2. Which method do we use to take photos with the camera in a Capacitor application?
3. How do we read the current location in a Capacitor application?
4. How do we add a menu toggle button with Ionic?
5. Which Capacitor command do we use to sync the application bundle with native mobile projects?
6. What is the difference between test and production modes in Cloud Firestore?
7. How do we initialize an application with the AngularFire library?
8. Which method do we use to fetch data from a Cloud Firestore collection?
9. How do we create a pin using the CesiumJS library?
10. How do we convert latitude and longitude to degrees using CesiumJS?

Further reading

• Getting started with Capacitor: https://capacitorjs.com/docs/getting-started
• Android getting started guide for Capacitor: https://capacitorjs.com/docs/android#getting-started
• iOS getting started guide for Capacitor: https://capacitorjs.com/docs/ios#getting-started
• Angular development with Ionic: https://ionicframework.com/docs/angular/overview
• AngularFire library documentation: https://firebaseopensource.com/projects/angular/angularfire2
• CesiumJS quick start guide: https://cesium.com/docs/tutorials/quick-start
• CesiumJS and Angular article: https://cesium.com/blog/2018/03/12/cesium-and-angular

Join our community on Discord

Join our community’s Discord space for discussions with the author and other readers:

https://packt.link/AngularProjects3e