Ejercicio Layout

Crear un layout con flex (y todos los conocimientos adquiridos) parecido a este:

No tiene por qué ser igual, mucho menos el mismo tema, pero sí que tenga esas secciones, divisiones, etcétera. No tiene que ser responsive porque todavía no hemos hecho media queries.

Flexbox

Hoy hemos visto una manera más eficiente de maquetar, utilizando la propiedad Flexbox. En w3schools la explican bien:

https://www.w3schools.com/css/css3_flexbox.asp

http://www.emenia.es/flexbox-la-caja-flexible-css3/

Podemos ver las propiedades de una manera muy visual aquí:

https://demos.scotch.io/visual-guide-to-css3-flexbox-flexbox-playground/demos/

Aquí lo podemos ver animado:

https://jstutorial.medium.com/flexbox-the-animated-tutorial-8075cbe4c1b2
Flexbox el tutorial animado

Y aquí otra guía completa:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Templates con flexbox:

https://www.quackit.com/html/templates/css_flexbox_templates.cfm

Cómo calcular como crecen y se encogen los elementos (no es tan sencillo como parece):

https://ed.team/blog/guia-definitiva-de-flexbox-2-flex-basis-flex-frow-flex-shrink

Ejemplos prácticos de cómo hacer cosas con flexbox:

https://www.sketchingwithcss.com/samplechapter/cheatsheet.html

18 recursos interesantes:

https://bashooka.com/coding/css3-flexbox-resources/

https://www.chenhuijing.com/blog/flexbox-and-absolute-positioning/

Un juego para aprender flexbox:

https://flexboxfroggy.com/#es

Ejercicio form

Crear un formulario que nos pida los siguientes datos:

Nombre
Edad
Email
Tipo de problema (urgente, muy urgente, para ayer)
Fecha
Es cliente o no
Es Premium o no
Observaciones

Elegid los tipos de objeto que creáis conveniente para cada dato.

JSON dnámico

 static async Task Main(string[] args)
    {
        // URL del JSON
        string url = "https://jsonplaceholder.typicode.com/posts";

        // Leer el JSON de la URL
        var json = await ObtenerJsonDesdeUrl(url);

        // Deserializar el JSON en un tipo anónimo
        var datos = JsonSerializer.Deserialize<dynamic>(json, new JsonSerializerOptions
        {
            PropertyNameCaseInsensitive = true
        });

        // Iterar y mostrar datos
        foreach (var elemento in datos)
        {
            Console.WriteLine($"ID: {elemento.id}, Título: {elemento.title}");
        }
    }

    // Método para obtener el JSON desde una URL
    public static async Task<string> ObtenerJsonDesdeUrl(string url)
    {
        using HttpClient client = new HttpClient();
        var response = await client.GetAsync(url);
        response.EnsureSuccessStatusCode(); // Lanza excepción si el estado no es 2xx
        return await response.Content.ReadAsStringAsync();
    }
}

Mockup

using CapaServicio.Controllers;
using CapaServicio.Models;
using CapaServicio.Repository;
using CapaServicio.Service;
using Microsoft.AspNetCore.Mvc;
using Moq;

namespace CapaTest
{

    public class UnitTest1
    {
        private Mock<IAlumnoService> _mockService;
        private AlumnoesController _controller;

        public UnitTest1()
        {
            // Crear el mock del servicio y configurar su comportamiento
            _mockService = new Mock<IAlumnoService>();
            // Esto son datos falsos de prueba que será lo que obtengamos cuando
            // El controlador llame al servicio
            _mockService.Setup(s => s.ObtenerTodos()).Returns(new List<Alumno> { new Alumno(), new Alumno() });
            _mockService.Setup(s => s.ObtenerPorId(2)).Returns(new Alumno());

            //// Crear una instancia del controlador con el mock del servicio
            _controller = new AlumnoesController(_mockService.Object);
        }

        [Fact]
        public async Task Test1Async()
        {
            // Aquí verifico el index
            var result = await _controller.Index() as ViewResult;

            // Verificar
            Assert.NotNull(result);
            // Compruebo, por ejemplo, que el modelo es una lista de alumnos
            Assert.IsType(typeof(List<Alumno>), result.Model);
            Assert.Equal(2, ((List<Alumno>)result.Model).Count);

            // Aquí verifico el Details con un id 2
            result = await _controller.Details(2) as ViewResult;
            Assert.NotNull(result);
            // Compruebo que el modelo sea alumno...
            Assert.IsType(typeof(Alumno), result.Model);


        }
    }
}

Ejercicio

Esta clase:

public static class Solver
    {
        public static (double? x1, double? x2) segundoGrado(double a, double b, double c)
        {
            if(a == 0 && b == 0)
            {
                return (null,null);
            }

            double discriminante = b * b - 4 * a * c;
            if (discriminante<0)
            {
                return (null, null);
            }
            return (0, 0);

        }
    }

Cread un proyecto que tenga esta clase y una clase de test que compruebe que funciona. Con Fact y con Theory

Ejercicio Pokemons

1.- En el mantenimiento de pokemons que pueda acceder cía el menú, que se vea el nombre de la categoría en el desplegable y que cuando acceda a una categoría vea todos sus pokemons relacionados (solo el nombre) pero que cada uno tenga un enlace pra poder ver el detalle

2.- Crear una API para categorias y pokemons

3.- Si da tiempo: Que en el pokemon salga en la  api todos los datos de su categoría y en la categoría una lista de los pokemons SIN la categoría

4.- Hacer un endpoint get categoria/{id}/pokemons que nos devuelva una lista de los pokemons de esa categoría

5.- En el endpoint categoria/{id}/pokemons si hacemos una petición post pasando los datos de un pokemon que nos añada ese pokemon nuevo con esa categoría

Swagger en API

Instalar el paquete siguiente:

Install-Package Swashbuckle.AspNetCore -Version 6.6.2

Habilitar esto en program:

builder.Services.AddControllers();

builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen();

if (app.Environment.IsDevelopment())
{
app.UseSwagger();
app.UseSwaggerUI();
}