WetterApp mit HTML, Css und C# über Blazor Server App?

1 Antwort

regex9
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
HTML, CSS, Code
05.10.2023, 22:33

Sofern du mit ASP.NET/Blazor noch nicht vertraut bist, wäre es sinnvoll, wenn du dich erst einmal mit den Grundlagen dazu beschäftigst. Auf der Microsoft Learn-Plattform gibt es Tutorials zu dem Thema.

Bezüglich des Programmaufbaus wäre eine Service-Klasse nützlich, die die Anfragen an die Wetter-API durchführt.

public interface IWeatherService
{
  /* weather request methods like getTemperature or similar ... */
}

public class WeatherService : IWeatherService
{
  private readonly HttpClient _client;

  public WeatherService(HttpClient client)
  {
    _client = client;
  }

  /* implement interface ... */
}

In der Startup-Klasse wird der Service registriert:

public void ConfigureServices(IServiceCollection services)
{
  services.AddRazorPages();
  services.AddServerSideBlazor();
  services.AddHttpClient<IWeatherService, WeatherService>(client =>
  {
    // setup HTTP client (API base URL or similar) ...
  });
}

Anschließend kannst du ihn innerhalb einer Blazor-Komponente nutzen.

public class WeatherData : ComponentBase
{
  [Inject]
  public IWeatherService WeatherService { get; set; }

  /* ... */
}

Beschäftige dich in dem Zusammenhang noch, wie man mit Blazor Formulare handhabt, immerhin musst du ja noch die Daten vom Browser empfangen und dann verarbeiten.

Hinsichtlich deines HTML-Codes solltest du übrigens noch ein paar Fehler beachten/korrigieren:

  1. Mehrere deiner img-Tags sind unvollständig. Die schließende spitze Klammer fehlt.
  2. Deinen img-Elementen fehlt in jedem Fall ein alt-Attribut. Wenn alle Bilder nur dekorativer Natur sind, bleibt der Attributwert leer. Andernfalls ist dieser Guide hilfreich, um zu entscheiden, was im Attributwert stehen sollte. Bei deinem Button mit Bild würde sich übrigens ein image-input gut eignen. In jedem Fall sollte ein alt-Attribut ergänzt werden, in dem die Funktion des Buttons beschrieben wird (Bsp.: Start search).
  3. Bei den Paragraphen für die einzelnen Wochentage fehlt jeweils ein Leerzeichen zwischen den Attributen style und class. Da der Inline-Style stets denselben Style umsetzt, würde ich empfehlen, stattdessen einen Klassenselektor anzulegen, der die Farbe setzt.
bryth265 
Fragesteller
 06.10.2023, 09:09

Hallo, vielen Dank für die ausführliche Hilfe, ich bin noch nicht mit Blazor ganz vertraut, allerdings soll ich bis Dienstag die App zumindest die Logic fertig haben. Ich verstehe auch nicht ganz was du oben gemacht hast. Könntest du mir eventuell helfen damit das alles funktioniert. Bei dem SuchIcon kommt irgendwie immer ein Bild raus wenn ich draufklicke, aber ich möchte das es als Suchbutton fungiert. Außerdem weiß ich nicht ganz wie ich das mit der API mache. mit JavaScript habe ich es hinbekommen, aber für C# fehlt mir dazu noch das wissen. Für die App wurd mir vorgegeben aber C# zu verwenden und nicht JavaScript. Ich kann hier mal meinen JavaScript code rein schicken vielleicht weißt du was ich haben möchte. Danke für die Tipps nochmal!

const apiKey = "ApiKey";
const apiUrl = "ApiUrl";


const searchBox = document.querySelector(".search input");
const searchBtn = document.querySelector(".search button");
const weatherIcon = document.querySelector(".weather-icon");






async function checkWeather(city)
{
    const response = await fetch(apiUrl + city + `&appid =${ apiKey}`);
var data = await response.json();
console.log(data);


document.querySelector(".city").innerHTML = data.name;
document.querySelector(".temp").innerHTML = Math.round(data.main.temp) + "°c";
document.querySelector(".humidity").innerHTML = data.main.humidity + "%";
document.querySelector(".wind").innerHTML = data.wind.speed + " km/h";


const body = document.querySelector("body");


if (data.weather[0].main == "Clouds")
{
    weatherIcon.src = "images/suncloud.png";


}
else if (data.weather[0].main == "Clear")
{


    weatherIcon.src = "images/image1.png";
}


        }


        searchBtn.addEventListener("click", () => {
            checkWeather(searchBox.value);


        }
0
regex9  06.10.2023, 15:47
@bryth265

Wie ich schon schrieb: Beschäftige dich erst mit den Blazor-Grundlagen, denn ohne sie kannst du kaum weiterarbeiten und wirst auch den oben beschriebenen Lösungsweg nicht verstehen.

(...) Bei dem SuchIcon kommt irgendwie immer ein Bild raus wenn ich draufklicke, (...)

Laut deinem JavaScript-Code schickst du bei Klick auf den Button einen API-Request und setzt im Anschluss Texte (für Stadt, Temperatur, etc.) und ein Bild. Mehr lässt sich dazu kaum sagen. Für deine Aufgabe ist es aber eh relevant, denn bei Nutzung von Blazor ist der JavaScript-Code nicht mehr nötig.

Für die App wurd mir vorgegeben aber C# zu verwenden und nicht JavaScript.

Du brauchst eine Razor Page mit einer Formularkomponente (s.o.). Die API-Requests werden in der Service-Klasse implementiert (je API-Request eine Methode).

Beispiel für deine Anfrage (basierend auf meinem Beispiel von oben):

// IWeatherService
Task<CityWeather> GetWeatherForCity(string city);

// WeatherService
private const string ApiKey = "API Key ...";

public async Task<CityWeather> GetWeatherForCity(string city)
{
  var response = await _client.GetAsync($"?city={city}&appid={ApiKey}");

  if (!response.IsSuccessStatusCode)
  {
    // some error handling ...
  }
  else
  {
    var content = await response.Content.ReadAsStringAsync();
    var weather = JsonConvert.DeserializeObject<CityWeather>(content);
    return weather;
  }
}

Beim Aufbau der API-URL habe ich etwas geraten. Die BaseAdress (also der Stammteil der API-URL, der sich auch bei unterschiedlichen Anfragen an die API nie ändert) kannst du übrigens schon bei der Serviceregistration für den HttpClient setzen.

Das Ergebnis (JSON) kann auf eine Modelklasse gemappt werden, die in meinem Beispiel CityWeather heißt. Sie bildet also die Struktur des JSON ab.

public class CityWeather
{
  [JsonProperty("name")]
  public string Name { get; set; }

  [JsonProperty("main")]
  public WeatherData Main { get; set; }

  [JsonProperty("wind")]
  public Wind Wind { get; set; }
}

public class WeatherData
{
  [JsonProperty("humidity")]
  public double Humidity { get; set; }

  [JsonProperty("temp")]
  public double Temperature { get; set; }  
}

public class Speed
{
  [JsonProperty("speed")]
  public double Speed { get; set; }
}

Für die JSON-Verarbeitung (Mapping, Deserialisierung, etc.) verwende ich Newtonsoft.Json. Diese Bibliothek kann in Visual Studio via NuGet installiert werden.

1
bryth265 
Fragesteller
 06.10.2023, 15:59
@regex9

Hallo wirklich vielen Dank für deine Zeit und für deine großartige Hilfe! Ich werde mir die Tage die Basics anschauen, habe mir da etwas vorgenommen und habe leider nicht mehr soviel Zeit um es zu beenden weshalb ich das Projekt erst zu Ende bringen muss. Tut mir leid wenn ich deine Zeit in Anspruch nehme, aber kannst du mir verraten wo der code dafür ist, dass ich den "SearchIcon"-Button als such funktion programmiere?

0