Skip to content

Latest commit

 

History

History
127 lines (91 loc) · 4.93 KB

README.md

File metadata and controls

127 lines (91 loc) · 4.93 KB
Raw

Blazerdex

Creando una Pokedex con Blazor WebAssembly. La aplicación obtiene la información haciendo peticiones HTTP a PokeAPI.

Puedes ver el resultado final en el siguiente enlace: https://blazordex.web.app

Objetivos del Proyecto

  • Utilizar Blazor
  • Peticiones HTTP a PokeAPI
  • Renderización Listas
  • Enrutado simple
  • Formulario para manejar una búsqueda
  • Continuous Deployment con GitHub Actions

Stack Utilizado

  • .NET 6 + Blazor
  • Bootstrap v5
  • .NET CLI + Firebase CLI (vía npm)
  • GitHub Actions + Firebase Hosting
  • VSCode

Screenshots

Imagen del proyecto

Descripción de los pasos efectuados

1. Instalación

Creación de nuevo proyecto:

dotnet new blazorwasm -o Blazordex

Instalación de .NET Webassembly build tools:

dotnet workload install wasm-tools

Instalación del paquete para añadir peticiones HTTP:

dotnet add package Microsoft.Extensions.Http --version 6.0.0

2. Creación de los Modelos

  • Reside en la carpeta /Models
  • Documentación de refencia del Pokemon Endpoint.
  • Documentación de C# sobre el tipo primitivo record (Desde C# 9), que provee funcionalidades para encapsular datos: Link
  • Documentación de C# sobre Init only setters para eliminar el boilerplate en los constructores: Link

Serializamos el modelo a través de los siguientes records: NamedModel, Sprites, PokemonTypes, Pokemon, GetPokemonListResponse

3. Creación del Cliente

Creación de la clase PokeClient que utiliza los métodos:

  • GetPokemons(int offset): Para cargar más Pokemons
  • GetPokemon(string url):
  • GetPokemonByNameOrId(string identifier):

Necesitamos que la configuración del cliente apunte a la API de PokeAPI. Para ello configuramos appsettings.json en /wwwroot y lo registramos en Program.cs

4. Configuración

  • PokeApiOptions reside en la carpeta /Configurations
  • Necesitamos que la configuración apunte a la API de PokeAPI. Para ello configuramos BaseAddress en appsetings.json
  • Debemos también registrar la configuración en Program.cs

5. Creación de Shared Components

En particular, los componentes <PokemonCard>, <PokemonTypes> serán consumidos por las páginas.

5.1 Creación de Backgrounds personalizados

En función de los tipos de cada Pokemon se añade un background personalizado. El código reside en: PokemonCard.razor

  • Utilizamos un Diccionario para mapear los colores. Key es el Identificador y Value es el color rgb.
  • El método getBackgroundByType() es el encargado de asignar los backgrounds a cada tarjeta.

6. Creación de Páginas

  • Las páginas residen en /Pages

El proyecto sólo utiliza dos páginas: Index y PokemonDetails

7. Dar un poco de estilo

Los estilos están distribuídos en:

  • Clases para los elementos en Bootstrap, y
  • En los .css asociados a cada archivo .razor para los detalles más personalizados.
  • CSS inline para los backgrounds en función de los tipos de cada Pokemon.

8. Continuous Deployment

  1. Crear un nuevo proyecto en Firebase
  2. Instalar firebase CLI
npm install -g firebase-tools
  1. Asegurarse de tener abierto VSCode como administrador (Lo necesitaras para ejecutar comandos de firebase)
  2. Cambiar la directiva de ejecución: Documentación - Solución
Set-ExecutionPolicy -ExecutionPolicy Bypass -Scope CurrentUser
  1. Login en Firebase
firebase login
  1. Inicializar el proyecto y seguir los pasos de Firebase CLI
firebase init
  1. Publicar en el directorio release/wwwroot
  2. Script para ejecutar antes de cada deploy
dotnet publish -c Release -o release

Agradecimiento especial

A Adre Lopes - @alopes2 por mostrar sus conocimientos de una forma divertida y a @ssmkhrj por la inspiración.