Angular Weather App

Weather App with Angular, C# (ASP.NET Core), Tailwind CSS, and SQLite

The Weather App is a versatile tool that provides detailed weather forecasts and historical weather conditions. Users can add and manage different cities, assigning each a unique information text and storing their weather data by date. The app enables the recording of temperature (°C), rainfall (mm), and wind speed (m/s), as well as the editing or deletion of these data as needed.

About

This application serves as a comprehensive weather data management tool. It integrates with the Chart.js library for visualizations, helping users understand weather trends over time. Additionally, it includes integration with the OpenWeather API for real-time weather information from any location.

Functionality

Users have the ability to:

• Record Weather Data: Manually input weather data for different locations including temperature, rainfall, and wind speed.
• Edit and Delete Entries: Update or remove previously entered data as required.
• Visualize Data: Utilize Chart.js for graphical representation of weather trends.
• Fetch Real-Time Data: Seamlessly integrate with OpenWeather API for current weather conditions and forecasts.

API Interaction

You can use tools like Postman to test the API endpoints. For instance, to fetch all cities, you can use the following GET request:

GET https://localhost:5001/api/cities

Integration with Open Weather API

In addition to manual data management, the application integrates with the Open Weather API, which provides real-time weather information. This feature allows users to:

• Fetch Current Weather Data: Automatically retrieve and display weather conditions for a chosen location.

Project Setup

For the root of the API, you could create a basic configuration as follows, for example:

appsettings.json

{
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft.AspNetCore": "Information"
    }
  },
  "AllowedHosts": "*",
  "OpenWeatherSettings": {
    "ApiKey": "<API_KEY>"
  }
}

appsettings.Development.json

{
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft.AspNetCore": "Warning"
    }
  },
  "ConnectionStrings": {
    "DefaultConnection": "Data source=weatherapp.db"
  },
  "OpenWeatherSettings": {
    "ApiKey": "<API_KEY>"
  }
}

Running the Application

To run the application, start the frontend and backend (API) separately.

In the frontend root directory, install dependencies with:

npm install

Then, launch the frontend with:

ng serve

In the Backend / API root directory, ensure the necessary packages are installed with:

dotnet restore

And then start the backend with:

dotnet run

Backend / API Commands

• dotnet ef database drop - Drop the existing database
• dotnet ef migrations add InitialCreate - Create initial database migrations
• dotnet ef database update - Apply the database updates
• dotnet watch - Start the backend with live reloading
• dotnet run - Run the backend

Note

• It is recommended to configure HTTPS for secure connections when deploying the application to a production environment
• When moving the application to a production environment, database connection settings should be updated to match the production server's configuration