Creando componentes para conexión a la API

Clase 12 de 19 • Curso de Aplicaciones Web con Blazor WebAssembly y .NET

Jose G. Romero C.

student•

Con esta web pueden auto generar las clases a partir de un objecto json.

https://quicktype.io/csharp

Cesar Bautista Mejia

student•

La agrego a favoritos

Henry Espinoza

student•

Es util si ya tienes experiencia, si recien vas aprendiendo lo mejor es practicar

Oriana Carolina Ailigo

student•

productService.cs

using System.Net.Http.Json;
using System.Text.Json;

namespace blazorappdemo;

public class ProductService{

    private readonly HttpClient client;
     private readonly JsonSerializerOptions option;

    public ProductService(HttpClient httpClient,JsonSerializerOptions optionsJson){
        client=httpClient;
        option=optionsJson;
      }  
    public async Task<List<Product>?> Get(){
        var response=await client.GetAsync("/v1/product");
        return await JsonSerializer.DeserializeAsync<List<Product>>(await response.Content.ReadAsStreamAsync());
        
    }

    public async Task Add(Product product){
        var response=await client.PostAsync("v1/products", JsonContent.Create(product));
        var content= await response.Content.ReadAsStringAsync();
        if (!response.IsSuccessStatusCode)
        {
            throw new ApplicationException(content);
        }
    }

    public async Task Delete(int productId){
        var response=await client.DeleteAsync($"v1/products/{productId}");
        var content= await response.Content.ReadAsStringAsync();
        if (!response.IsSuccessStatusCode)
        {
            throw new ApplicationException(content);
        } 
    }
    
}

Oriana Carolina Ailigo

student•

category.cs

using System.Text.Json;

namespace blazorappdemo;

public class CategoryService{

    private readonly HttpClient client;
     private readonly JsonSerializerOptions option;

    public CategoryService(HttpClient httpClient){
        client=httpClient;
        option=new JsonSerializerOptions{PropertyNameCaseInsensitive =true};
      }  
    public async Task<List<Category>?> Get(){
        var response=await client.GetAsync("/v1/Categories");
        var content= await response.Content.ReadAsStringAsync();
        if (!response.IsSuccessStatusCode)
        {
            throw new ApplicationException(content);
        }
        return JsonSerializer.Deserialize<List<Category>>(content,option);
        
    }
    
}

Esteban Cerda Román

student•

Gracias!

Miguel Estuardo Samayoa Giron

student•

Graciaas, me ahorraste bastante tiempo jajajaja

Jairo Alonso Contreras Mateus

student•

Si por alguna razon a alguien le genera error el <List<Product>?>, es poor que falta el using que llama la carpeta Models, ejemplo:

using BlazorAppVisualStudio.Models;

Juan Betancur

student•

En el curso de API's con .Net los modelos se construían de esta manera,

public class Category
{
    public  int Id { get; set; }
    public string Name { get; set; }
    public string? Image { get; set; }
    public ICollection<Product> Products { get; set; }
}

¿afecta en algo tener o no tener la colección en el modelo? ¿Cuál es la diferencia de manejarlo así?

Miguel Teheran

teacher•

correcto! gracias por compartir

Oriana Carolina Ailigo

student•

Category.cs

namespace blazorappdemo;

public class Category{

    public int Id {get;set;}
    public string Name {get;set;}
    public string? image {get;set;}
    
}

Jesus David Mendez Coronell

student•

public class Product{

public int Id {get;set;}
public string title {get;set;}
public decimal? price {get;set;}
public string Description {get;set;}
public int CategoryId {get;set;}
public string[] Images {get;set;}
public string? image {get;set;}

}

Cesar Bautista Mejia

student•

Yo utilizo 2 formas por que en ocasiones tienen errores:

Visual Studio (Comunity, Professional, etc), Editar -> Pegado Especial -> Pegar JSON como Clases

Lo único que necesitas es tener en el Json o Xml en el portapapeles (o seleccionar el texto y darle CTRL + C) No utilices librerías externas a partir de .net core ya vienen las librerías

Sergio Sanchez

student•

En este video no se uso el "options" que fue injectado, que implicaciones tendria el no incluirlo?

(Hice la prueba y funciona igual si borro la DI de jsonOptions)

Israel Arroyo

student•

Ctr + .

Genera el constructor easy

Juan Daniel Diaz Jaramillo

student•

using System.Net.Http;

using System.Text.Json;

namespace blazorapp;

public class ProductService

{

private readonly HttpClient client;

private readonly JsonSerializerOptions options;

public ProductService(HttpClient httpClient, JsonSerializerOptions optionsJson)

{

client = httpClient;

options = optionsJson;

}

public async Task<List<Product>?> Get()

{

var response = await client.GetAsync("/v1/products");

response.EnsureSuccessStatusCode(); // <- Esto lanza excepción si no fue 200 OK

await using var stream = await response.Content.ReadAsStreamAsync();

return await JsonSerializer.DeserializeAsync<List<Product>>(stream, options);

}

Javier Sevillano

student•

En un proyecto real, en Visual studio tendríamos el proyecto web con Blazor, un proyecto Web API que dependería de un un proyecto de servicios, el cual a su vez dependería de un proyecto de Infraestructura donde estarían las clases generadas para usar Entity Framework, que a su vez dependería de un proyecto Core donde están las entidades y DTOs. Este proyecto Core podría referenciarse al proyecto Blazor, cierto? porque las entidades son las mismas

Miguel Teheran

teacher•

Si correcto, si es un proyecto pequeño se puede hacer refrencia directa, si es un proyecto grande (que use microservicios, microfrontend o que sea una suite de varias apps que se comunican) lo ideal es usar artefactos y crear paquetes nugets con nuestro propio servidor nuget

Juan Betancur

student•

Porque mencionas que no se va a hacer el crud de categoría? en caso de hacerse el modelo tendría otras cosas adicionales?

Miguel Teheran

teacher•

Es una tarea para ustedes como un ejercicio, la idea es replicar exactamente lo mismo

edward.arroyave

student•

Si estás siguiendo el curso con Visual Studio, puedes usar una funcionalidad llamada "Pegado especial", que lo genera automáticamente.

Jonathan Camilo Bernal Aldana

student•

en está página a partir del json te genera los modelos par csharp

Israel Arroyo

student•

Profe, Por que la linea 20 del file ProductService.cs tine que ser con await? No se supone que solo las peticiones a la API deben ser async?

using System.Net.Http.Json;
using System.Text.Json;

namespace blazorappdemo;

public class ProductService{

    private readonly HttpClient client;
     private readonly JsonSerializerOptions option;

    public ProductService(HttpClient httpClient,JsonSerializerOptions optionsJson){
        client=httpClient;
        option=optionsJson;
      }  
    public async Task<List<Product>?> Get(){
        var response=await client.GetAsync("/v1/product");
        return await JsonSerializer.DeserializeAsync<List<Product>>(await response.Content.ReadAsStreamAsync());
        
    }

    public async Task Add(Product product){
        var response=await client.PostAsync("v1/products", JsonContent.Create(product));
        var content= await response.Content.ReadAsStringAsync();
        if (!response.IsSuccessStatusCode)
        {
            throw new ApplicationException(content);
        }
    }

    public async Task Delete(int productId){
        var response=await client.DeleteAsync($"v1/products/{productId}");
        var content= await response.Content.ReadAsStringAsync();
        if (!response.IsSuccessStatusCode)
        {
            throw new ApplicationException(content);
        } 
    }
    
}

using System.Text.Json;

namespace blazorappdemo;

public class CategoryService{

    private readonly HttpClient client;
     private readonly JsonSerializerOptions option;

    public CategoryService(HttpClient httpClient){
        client=httpClient;
        option=new JsonSerializerOptions{PropertyNameCaseInsensitive =true};
      }  
    public async Task<List<Category>?> Get(){
        var response=await client.GetAsync("/v1/Categories");
        var content= await response.Content.ReadAsStringAsync();
        if (!response.IsSuccessStatusCode)
        {
            throw new ApplicationException(content);
        }
        return JsonSerializer.Deserialize<List<Category>>(content,option);
        
    }
    
}

public int Id {get;set;}
public string title {get;set;}
public decimal? price {get;set;}
public string Description {get;set;}
public int CategoryId {get;set;}
public string[] Images {get;set;}
public string? image {get;set;}

Creando componentes para conexión a la API

Introducción

Presentación

Prerrequisitos

¿Qué es WebAssembly y Blazor?

Creando un proyecto de Blazor en Visual Studio

Creando un proyecto de Blazor con el CLI

Analizando extensiones de Visual code para blazor

Componentes de Blazor

Estructura de componentes y arquitectura en Blazor

Ciclo de vida en componentes y parámetros

Creando componentes compartidos

Creando archivo de configuración

Conectando Blazor a Backend

Configurando conexión al backend para el proyecto

Creando componentes para conexión a la API

Mostrando lista de productos

Creando Menú y CSS para la lista de productos

Creando formulario para agregar registros

Integrando formulario con servicios

Usando Librerías de Blazor

Creando funcionalidad de eliminar usando JavaScript

Usando Librerías de Blazor

Cierre

Conclusión y cierre