MVC och API 🐱

💡 Vad är MVC + API?

MVC + API är som att ha en perfekt restaurang där allt fungerar smidigt! 🍽️

Tänk dig:

Kocken (Model) - Lagar maten (hanterar data)
Kyparen (Controller) - Tar beställningar och koordinerar
Matsalen (View) - Där gästerna sitter och njuter
Leveranstjänsten (API) - Hämtar ingredienser från andra ställen

I vårt exempel ska vi bygga en kul app som hämtar slumpmässiga kattfakta från internet! 🐾

🎯 TL;DR

MVC = organiserad kod med Models, Views, Controllers. API = hämta data från andra tjänster. Tillsammans = awesome webbappar som kan prata med hela internet!

📋 Efter att ha läst detta kommer du att kunna

Förstå MVC-arkitekturen på riktigt (inte bara teori!) 🏗️
Koppla ihop din app med externa API:er 🌐
Bygga en komplett webbapp som hämtar kattfakta 🐱
Följa Single Responsibility Principle (SRP) 📋
Hantera HTTP-anrop i ASP.NET MVC ⚡

🔧 MVC-arkitekturen förklarat

De tre vännerna som jobbar tillsammans:

🎭 MODEL = Vad (Data & Logik)

Håller koll på all data
Vet hur saker ska fungera
Pratar med databaser

👁️ VIEW = Hur (Utseende & Layout)

Bestämmer hur saker ser ut
HTML, CSS, användargränssnitt
Vad användaren faktiskt ser

🎮 CONTROLLER = När (Koordinatorn)

Tar emot förfrågningar från användare
Bestämmer vad som ska hända
Kopplar ihop Model och View

Använda Cat Facts API med ASP.NET MVC i C-Sharp

Nu när vi har förstått MVC-arkitekturen kan vi använda den för att integrera med Cat Facts API i en ASP.NET MVC-applikation i C-Sharp. Cat Facts API ger oss slumpmässiga fakta om katter, vilket kan vara ett roligt inslag i vår webbapplikation. Här är ett exempel på hur du kan göra det:

Börja med att skapa ett nytt ASP.NET MVC-projekt i Visual Studio.
Lägg till en modell som representerar en CatFact. Modellen följer SRP genom att endast innehålla egenskaper för att lagra fakta om katter.

public class CatFact
{
    public string Text { get; set; }
    public string Author { get; set; }
}

Skapa en controller som följer SRP genom att endast hantera begäranden och kommunicera med Cat Facts API.

public class CatFactController : Controller
{
    public async Task<ActionResult> Index()
    {
        using (HttpClient client = new HttpClient())
        {
            HttpResponseMessage response = await client.GetAsync("https://cat-fact.herokuapp.com/facts/random");
            if (response.IsSuccessStatusCode)
            {
                string json = await response.Content.ReadAsStringAsync();
                CatFact catFact = JsonConvert.DeserializeObject<CatFact>(json);
                return View(catFact);
            }
        }

        return View();
    }
}

I exemplet ovan används HttpClient-klassen för att göra en GET-förfrågan till Cat Facts API och hämta en slumpmässig faktarad om katter. Den erhållna JSON-datan deserialiseras sedan till en CatFact-modell, som skickas till vyn för att visas för användaren.

@model CatFact

<!DOCTYPE html>
<html>
<head>
    <title>🐱 Kattfakta Generator</title>
    <style>
        body { font-family: Arial; padding: 20px; background: #f0f8ff; }
        .cat-container { max-width: 600px; margin: 0 auto; }
        .cat-fact { background: white; padding: 20px; border-radius: 10px;
                   box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
        .refresh-btn { background: #4CAF50; color: white; padding: 10px 20px;
                      border: none; border-radius: 5px; cursor: pointer; }
    </style>
</head>
<body>
    <div class="cat-container">
        <h1>🐱 Kattfakta Generator</h1>

        @if (Model != null)
        {
            <div class="cat-fact">
                <h2>📚 Visste du att...</h2>
                <p><strong>@Model.Text</strong></p>

                @if (!string.IsNullOrEmpty(Model.Author))
                {
                    <p><em>- @Model.Author</em></p>
                }

                @if (Model.Verified)
                {
                    <span style="color: green;">✅ Verifierad fakta</span>
                }
            </div>
        }
        else if (!string.IsNullOrEmpty(ViewBag.ErrorMessage))
        {
            <div style="color: red; background: #ffe6e6; padding: 10px; border-radius: 5px;">
                <h3>🚨 Ojdå!</h3>
                <p>@ViewBag.ErrorMessage</p>
            </div>
        }

        <!-- Knapp för att hämta ny kattfakta -->
        <div style="margin-top: 20px;">
            <a href="@Url.Action("Index", "CatFact")" class="refresh-btn">
                🔄 Hämta ny kattfakta!
            </a>
        </div>
</body>
</html>

VIEW ansvar:

Visa data snyggt för användaren
Hantera när det inte finns data
Ge användaren knappar att klicka på

⚡ Steg 4: Koppla ihop allt

I Startup.cs eller Program.cs:

// Registrera HttpClient för Dependency Injection
builder.Services.AddHttpClient<CatFactController>();

// Lägg till MVC-support
builder.Services.AddControllersWithViews();

📊 Så här fungerar flödet

1. Användare klickar "Hämta ny kattfakta" 🖱️
   ↓
2. Browser skickar request till CatFactController 📨
   ↓
3. Controller gör HTTP-anrop till Cat Facts API 🌐
   ↓
4. API svarar med JSON-data 📦
   ↓
5. Controller deserialiserar till CatFact-objekt 🔄
   ↓
6. Controller skickar data till View 🎭
   ↓
7. View genererar HTML med kattfakta ✨
   ↓
8. Användaren ser den nya kattfaktan! 😻

⚠️ Vanliga misstag och hur du undviker dem

Misstag 1: Glömma felhantering

// 🚨 FEL - Vad händer om API:et är nere?
public async Task<ActionResult> BadExample()
{
    var response = await _httpClient.GetAsync("https://api.com/data");
    var json = await response.Content.ReadAsStringAsync(); // KRASCHAR!
    return View();
}

// ✅ RÄTT - Alltid kolla om anropet lyckades
public async Task<ActionResult> GoodExample()
{
    try
    {
        var response = await _httpClient.GetAsync("https://api.com/data");
        if (response.IsSuccessStatusCode)
        {
            var json = await response.Content.ReadAsStringAsync();
            // Fortsätt bara om allt gick bra
        }
    }
    catch (Exception ex)
    {
        // Hantera fel snyggt
    }
}

Misstag 2: Skapa HttpClient fel

// 🚨 FEL - Skapar ny HttpClient varje gång (resursläckage!)
public async Task<ActionResult> BadController()
{
    using var client = new HttpClient(); // Dåligt!
}

// ✅ RÄTT - Använd Dependency Injection
public class GoodController : Controller
{
    private readonly HttpClient _httpClient;

    public GoodController(HttpClient httpClient)
    {
        _httpClient = httpClient; // Återanvänder samma klient
    }
}

✨ Fördelar med MVC + API

🧩 Separation: Varje del har sitt ansvar
🧪 Testbarhet: Lätt att testa varje del för sig
🔄 Återanvändning: Controllers kan användas för flera Views
🌐 Skalbarhet: Kan enkelt lägga till fler API:er
👥 Teamwork: Olika utvecklare kan jobba på olika delar

📚 Sammanfattning

MVC + API = mäktiga webbappar:

Model håller data organiserad 🎭
View visar information snyggt 👁️
Controller koordinerar allt 🎮
API kopplar oss till hela internet 🌐
SRP håller koden ren och underhållbar 🧹

🎯 Övningar

🟢 Grundläggande: Bygg kattfakta-appen enligt guiden
🟡 Utmanande: Lägg till möjlighet att spara favoritfakta
🔴 Expert: Integrera flera API:er (väder, nyheter, quotes)

😄 Obligatorisk dad joke

Varför gillar katter MVC-arkitektur?

För att de älskar separation of con-purr-ns! 🐱😸