Overview

Following the calamitous events of November 2nd and 4th in Quarrata, the inspiration behind this application stemmed from a deep-seated desire to aid future relief and rescue efforts. Witnessing the challenges faced during those events, the vision for this app emerged as a means to facilitate and enhance future intervention strategies. This app aims to streamline and support emergency response initiatives, ensuring more effective and coordinated assistance in times of need within Quarrata and similar communities.

Some informations on events:

1. Vigili del Fuoco TV - Alluvione a Quarrata
2. Il Sole 24 Ore - Maltempo in Toscana
3. Agenzia Giornalistica Italia (AGI) - Situazione in Toscana
4. La Nazione - Quarrata: esonda il fiume
5. La Nazione - Alluvione in Toscana
6. Il Tirreno - Alluvione a Quarrata
7. Il Tirreno - Alluvione a Quarrata, città devastata

Web-App Real Time Disaster Response Project

This is a fullstack project created using Angular, Spring and SQL database. This is my first time with Angular so I tryed to create module, components, service and tests to understand better how this framework works.

Client Side

As explained before this is an Angular project.
Please read:

1. Angular.io
2. Angular CLI
3. Angular test: Jasmine + Karma
4. Visual Studio Documentation
5. Node.js
6. npm

Environment Note

• As explained on Microsoft Powershell Security, if you encounter this issue during installation:

  Remeber, before use "ng new my-app", use promt as Administrator:
  "Set-ExecutionPolicy RemoteSigned -Scope CurrentUser"
  "Set-ExecutionPolicy restricted"

• jQuery installation: in app folder... npm install jquery

• Bootstrap installation: in app folder... npm install bootstrap

• You need to modify angular.json file with Boostrap and jQuery scripts from Node.js

  "styles": [
      "src/styles.css",
      "node_modules/bootstrap/dist/css/bootstrap.min.css"
  ],
  "scripts": [
      "node_modules/jquery/dist/jquery.min.js",
      "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
  ]

• Using bcryptjs, is necessary to modify angular.json:

   "allowedCommonJsDependencies": [
      "bcryptjs"
    ]

• Using crypto, is necessary to modify package.json:

   "browser": {
      "crypto": false
    }

• For pagination, install: ng add ngx-pagination

• You can test every single component using: ng test --include="**/home.component.spec.ts"

• You can test all project using: ng test angular-front-end

Google Maps Note

This is the core of this project, so is very important to understand how use Google Maps API in Angular framework.
Please read these documentation to install google-maps (npm i @angular/google-maps) and use it.
The third link is the most important to set correctly HTML, CSS and JS.

1. Angular google-maps
2. GitHub google-maps
3. Google Maps Developers Documentation

Is so important to add "google.maps" as type so:

1. npm install @types/google.maps --save-dev
2. Add "google.maps" to the types array in both files tsconfig.app.json and tsconfig.spec.json

   "types": ["google.maps"]

To test component or service that use google.maps is necessary a Mock. You can check my example class MockLatLng implements google.maps.LatLng

Server Side

Database

In this example I used an SQL database as you can see in db folder
The E-R Schema is so simple and is visible below.

Spring Framework

As explained in Visual Studio Code Spring Documentation, I developed a basic backend code to manage user information storage and seamlessly respond to requests from the Angular frontend.
This example comprises only the essential Entities, Controllers, and Repositories. Therefore, I'll not delving into details.