Ejercicio: Creación de una interfaz de usuario con componentes de Blazor

  • 5 minutos

En este ejercicio, comenzará a crear una nueva aplicación Blazing Pizza para la empresa de entrega de pizzas. La empresa ha proporcionado CSS, las imágenes y el HTML actuales de su sitio anterior para trabajar.

Nota:

En este módulo se usan la CLI de .NET y Visual Studio Code para el desarrollo local. Después de finalizar este módulo, puede aplicar los conceptos mediante Visual Studio para Windows o Visual Studio para Mac para macOS. Para un desarrollo continuo, puede usar Visual Studio Code para Windows, Linux y macOS.

Si no ha creado antes una aplicación de Blazor, siga las instrucciones de instalación de Blazor para instalar la versión correcta de .NET y compruebe que la máquina esté configurada correctamente. Deténgase en el paso Create your app (Creación de la aplicación).

Creación de una aplicación Blazor

En este módulo se usa el SDK de .NET 6.0. Asegúrese de que tiene instalado .NET 6.0 mediante la ejecución del siguiente comando en la terminal que prefiera:

dotnet --list-sdks

Verá un resultado similar al siguiente:

3.1.100 [C:\program files\dotnet\sdk]
5.0.100 [C:\program files\dotnet\sdk]
6.0.100 [C:\program files\dotnet\sdk]

Asegúrese de que aparezca una versión que comience en 6. Si no aparece ninguna o no se encuentra el comando, instale el SDK más reciente de .NET 6.0.

.NET permite crear nuevos proyectos con cualquier versión de Visual Studio o comandos de terminal. En los ejercicios siguientes se muestran los pasos mediante el terminal y Visual Studio Code.

  1. Abra Visual Studio Code.

  2. Seleccione Ver para abrir el terminal integrado desde Visual Studio Code. Después, en el menú principal, seleccione Terminal.

  3. En el terminal, vaya a donde desea crear el proyecto.

  4. Ejecute el comando terminal dotnet:

    dotnet new blazorserver -o BlazingPizza --no-https true -f net6.0

    Este comando crea un nuevo proyecto de servidor Blazor en una carpeta denominada BlazingPizza. También indica al proyecto que deshabilite HTTPS.

  5. Seleccione Archivo>Abrir carpeta.

  6. En el cuadro de diálogo Abrir, vaya a la carpeta BlazingPizza y elija Seleccionar carpeta.

  7. Visual Studio Code le pide que agregue los recursos necesarios para compilar y depurar el proyecto. Seleccione Sí.

    Captura de pantalla que muestra el cuadro de diálogo de recursos que faltan.

  8. Visual Studio Code agrega launch.json y tasks.json en la carpeta .vscode del proyecto.

Estos archivos le permiten ejecutar y depurar la aplicación Blazor con las herramientas de depuración de Visual Studio Code.

Comprobación de la configuración

Puede optar por usar el terminal o usar Visual Studio Code para ejecutar la aplicación.

  1. En la ventana del terminal, inicie la aplicación Blazor con:

    dotnet watch

    Este comando compila e inicia la aplicación. El comando watch indica a dotnet que observe todos los archivos del proyecto. Los cambios que realice en los archivos del proyecto desencadenan automáticamente una recompilación y luego reinician la aplicación.

    El explorador predeterminado de los equipos debe abrir una nueva página en http://localhost:5000.

  2. Para detener la aplicación, seleccione Ctrl + C en la ventana del terminal.

También puede ejecutar y depurar el proyecto con Visual Studio Code.

  1. En Visual Studio Code, presione F5. O bien, en el menú Ejecutar, seleccione Iniciar depuración.

    La aplicación debe compilarse y abrir una nueva página del explorador.

  2. Visual Studio Code también cambia a la ventana Run and Debug (Ejecutar y depurar) que le permite reiniciar o detener la aplicación.

    Captura de pantalla de la ventana de depuración en Visual Studio Code.

  3. Presione Mayús + F5 para detener la aplicación.

Descarga de los recursos y los archivos de inicio de Blazing Pizza

Ahora clonará los archivos del proyecto de aplicación Blazor existentes de los equipos desde el repositorio de GitHub.

  1. Elimine la carpeta BlazingPizza, con el explorador de archivos o Visual Studio Code.

  2. En el terminal, clone los archivos de trabajo actuales en una nueva carpeta BlazingPizza.

    git clone https://github.com/MicrosoftDocs/mslearn-interact-with-data-blazor-web-apps.git BlazingPizza

  3. Ejecute la versión actual de la aplicación. Seleccione F5.

    Captura de pantalla que muestra la aplicación Blazing Pizza de inicio.

Crear algunas pizzas

El componente Páginas/index.razor permite a los clientes seleccionar y configurar las pizzas que desean pedir. El componente responde a la dirección URL raíz de la aplicación.

El equipo también ha creado clases para representar los modelos en la aplicación. Revise el modelo PizzaSpecial actual.

  1. En Visual Studio Code, en el explorador de archivos, expanda la carpeta Model. A continuación, seleccione PizzaSpecial.

    namespace BlazingPizza;

/// <summary>
/// Represents a pre-configured template for a pizza a user can order
/// </summary>
public class PizzaSpecial
{
    public int Id { get; set; }

    public string Name { get; set; }

    public decimal BasePrice { get; set; }

    public string Description { get; set; }

    public string ImageUrl { get; set; }

    public string GetFormattedBasePrice() => BasePrice.ToString("0.00");
}

    Tenga en cuenta que un pedido de pizza tiene Name, BasePrice, Description y ImageUrl.

  2. En el explorador de archivos, expanda Páginas y, después, seleccione index.razor.

    @page "/"

<h1>Blazing Pizzas</h1>

    En este momento, solo hay una etiqueta H1 para el título. Va a agregar código para crear pizzas especiales.

  3. En la etiqueta <h1>, agregue este código C#:

    @code {
    List<PizzaSpecial> specials = new();

    protected override void OnInitialized()
    {
        specials.AddRange(new List<PizzaSpecial>
        {
            new PizzaSpecial { Name = "The Baconatorizor", BasePrice =  11.99M, Description = "It has EVERY kind of bacon", ImageUrl="img/pizzas/bacon.jpg"},
            new PizzaSpecial { Name = "Buffalo chicken", BasePrice =  12.75M, Description = "Spicy chicken, hot sauce, and blue cheese, guaranteed to warm you up", ImageUrl="img/pizzas/meaty.jpg"},
            new PizzaSpecial { Name = "Veggie Delight", BasePrice =  11.5M, Description = "It's like salad, but on a pizza", ImageUrl="img/pizzas/salad.jpg"},
            new PizzaSpecial { Name = "Margherita", BasePrice =  9.99M, Description = "Traditional Italian pizza with tomatoes and basil", ImageUrl="img/pizzas/margherita.jpg"},
            new PizzaSpecial { Name = "Basic Cheese Pizza", BasePrice =  11.99M, Description = "It's cheesy and delicious. Why wouldn't you want one?", ImageUrl="img/pizzas/cheese.jpg"},
            new PizzaSpecial { Name = "Classic pepperoni", BasePrice =  10.5M, Description = "It's the pizza you grew up with, but Blazing hot!", ImageUrl="img/pizzas/pepperoni.jpg" }               
        });
    }
}

    El bloque @code crea una matriz para contener las pizzas especiales. Cuando se inicializa la página, agrega seis pizzas a la matriz.

  4. Seleccione F5 o Ejecutar. A continuación, seleccione Iniciar depuración.

    La aplicación debe compilarse y ejecutarse, y verá que no ha cambiado nada. Nada del HTML del lado cliente usa el código. Vamos a solucionarlo.

  5. Seleccione Mayús + F5 o Detener depuración.

  6. En Index.razor, reemplace <h1>Blazing Pizzas</h1> por este código:

    <div class="main">
  <h1>Blazing Pizzas</h1>
  <ul class="pizza-cards">
    @if (specials != null)
    {
      @foreach (var special in specials)
      {
        <li style="background-image: url('@special.ImageUrl')">
          <div class="pizza-info">
              <span class="title">@special.Name</span>
                  @special.Description
                <span class="price">@special.GetFormattedBasePrice()</span>
          </div>
        </li>
      }
    }
  </ul>
</div>

    Este código combina HTML sin formato junto con las directivas de bucle y acceso de miembros. El bucle @foreach crea una etiqueta <li> para cada pizza de la matriz specials.

    Dentro del bucle, cada pizza especial muestra su nombre, descripción, precio e imagen con directivas de miembro.

  7. Seleccione F5 o Ejecutar. A continuación, seleccione Iniciar depuración.

    Captura de pantalla de una lista de Blazing Pizzas.

Ahora tiene un componente base de pizza para permitir a los clientes pedir una pizza. Mejorará este componente en los ejercicios siguientes.