viernes, 23 de octubre de 2026

Capítulo 015. Creación de un Web API con ASP.NET Core utilizando Visual Studio

Introducción

En este capítulo crearemos nuestro primer proyecto ASP.NET Core Web API utilizando Visual Studio. Esta API será el backend de la aplicación que desarrollaremos durante el curso y será responsable de exponer los servicios que consumirá nuestra aplicación Angular.

Si vas a trabajar con Visual Studio Code en lugar de Visual Studio, puedes omitir este capítulo y seguir el procedimiento alternativo que se mostrará más adelante.


Crear un nuevo proyecto Web API

Comienza abriendo Visual Studio.

En la pantalla principal selecciona la opción:

Create a new project


Visual Studio mostrará una lista con las plantillas de proyectos disponibles, entre las que se encuentran:

  • Aplicaciones de consola.

  • Aplicaciones Blazor.

  • Aplicaciones .NET Aspire.

  • Razor Pages.

  • APIs web.

  • Entre otras.

Para este curso seleccionaremos la plantilla:

ASP.NET Core Web API


Asegúrate de elegir la opción que utiliza C# como lenguaje de programación.

Luego haz clic en:

Next



Configuración del proyecto

En la siguiente pantalla debemos configurar la información básica del proyecto.

Nombre del proyecto

Utilizaremos el siguiente nombre:

PeliculasAPI


Ubicación

Selecciona la carpeta donde deseas almacenar el proyecto.

Una vez configurados estos valores, haz clic en:

Next



Configuración de ASP.NET Core

En la pantalla de configuración adicional seleccionaremos las siguientes opciones:

Framework

.NET 9


HTTPS

Mantén habilitado HTTPS para trabajar en un entorno seguro durante el desarrollo.

OpenAPI Support

Activa la opción:

Enable OpenAPI support


Controllers

Selecciona la opción:

Use controllers


Finalmente, haz clic en:

Create


Visual Studio generará automáticamente la estructura inicial de nuestro proyecto Web API.


Configurar el archivo launchSettings.json

Antes de comenzar a desarrollar, realizaremos algunas configuraciones adicionales.

En el Explorador de Soluciones navega hasta:

Properties

└── launchSettings.json


Este archivo contiene la configuración utilizada cuando ejecutamos la aplicación.

Habilitar apertura automática del navegador

Ubica la propiedad:

"launchBrowser": false


y cámbiala por:

"launchBrowser": true


De esta forma, al ejecutar el proyecto Visual Studio abrirá automáticamente el navegador.

Es recomendable realizar este cambio tanto en el perfil HTTP como en el perfil HTTPS.


Configurar la URL inicial

Agrega o modifica la propiedad:

"launchUrl": "swagger"


Esta configuración indica que, al iniciar la aplicación, se abrirá directamente la interfaz de Swagger.


¿Qué es Swagger?

Swagger es una herramienta que permite documentar y probar APIs de manera visual.

A través de Swagger podremos:

  • Visualizar todos los endpoints disponibles.

  • Consultar los parámetros requeridos.

  • Ejecutar peticiones HTTP.

  • Analizar respuestas del servidor.

  • Probar la API sin utilizar herramientas externas.

A lo largo del curso trabajaremos frecuentemente con esta herramienta.


Instalar Swashbuckle

Para habilitar Swagger en nuestro proyecto utilizaremos una biblioteca llamada Swashbuckle.AspNetCore.

Abrir el administrador de paquetes NuGet

Haz clic derecho sobre el proyecto:

PeliculasAPI


y selecciona:

Manage NuGet Packages...


Después ve a la pestaña:

Browse


y busca:

Swashbuckle.AspNetCore


Selecciona el paquete y haz clic en:

Install


Luego acepta los términos de instalación.


Configurar Swagger en Program.cs

Después de instalar el paquete Swashbuckle.AspNetCore, abre el archivo Program.cs y reemplaza la configuración de OpenAPI por la siguiente:

var builder = WebApplication.CreateBuilder(args);


// Add services to the container.


builder.Services.AddControllers();


// Servicios necesarios para Swagger

builder.Services.AddEndpointsApiExplorer();

builder.Services.AddSwaggerGen();


var app = builder.Build();


// Configuración de Swagger

if (app.Environment.IsDevelopment())

{

    app.UseSwagger();

    app.UseSwaggerUI();

}


app.UseHttpsRedirection();


app.UseAuthorization();


app.MapControllers();


app.Run();


Explicación

Registrar los servicios de Swagger

builder.Services.AddEndpointsApiExplorer();

builder.Services.AddSwaggerGen();


Estas líneas agregan los servicios necesarios para:

  • Descubrir los endpoints de la API.

  • Generar automáticamente la documentación OpenAPI.

  • Mostrar dicha documentación mediante Swagger UI.

Habilitar Swagger

app.UseSwagger();


Genera el documento JSON con la descripción de la API.

Habilitar Swagger UI

app.UseSwaggerUI();


Activa la interfaz gráfica que permite:

  • Ver los endpoints disponibles.

  • Consultar parámetros.

  • Ejecutar peticiones.

  • Visualizar respuestas.


Configuración de launchSettings.json

Además, el instructor configura el archivo Properties/launchSettings.json para que el navegador se abra automáticamente en Swagger.

"launchBrowser": true,

"launchUrl": "swagger"


Por ejemplo:

"profiles": {

  "https": {

    "commandName": "Project",

    "launchBrowser": true,

    "launchUrl": "swagger",

    "applicationUrl": "https://localhost:7001;http://localhost:5001",

    "environmentVariables": {

      "ASPNETCORE_ENVIRONMENT": "Development"

    }

  }

}



Resultado

Al ejecutar la aplicación con:

Ctrl + F5


o

Start Without Debugging


se abrirá automáticamente una URL similar a:

https://localhost:7001/swagger


donde podrás visualizar y probar todos los endpoints de tu Web API desde la interfaz de Swagger.

Nota para ASP.NET Core 9

Cuando creas un proyecto nuevo con la plantilla de .NET 9 Web API, es común encontrar inicialmente algo parecido a:

builder.Services.AddOpenApi();


...


if (app.Environment.IsDevelopment())

{

    app.MapOpenApi();

}


En este curso, esa configuración se reemplaza por:

builder.Services.AddEndpointsApiExplorer();

builder.Services.AddSwaggerGen();


...


app.UseSwagger();

app.UseSwaggerUI();


porque se utilizará Swagger UI durante todo el desarrollo para probar los endpoints de forma visual.



Ejecutar la aplicación

Para iniciar el proyecto podemos utilizar:

Ctrl + F5


o el botón:

Start Without Debugging


Visual Studio compilará la aplicación y abrirá automáticamente el navegador.

Si la configuración fue correcta, la URL mostrada será similar a:

https://localhost:xxxx/swagger


donde xxxx corresponde al puerto asignado por ASP.NET Core.


Explorar Swagger

Al abrir Swagger veremos una interfaz similar a la siguiente:

PeliculasAPI

└── Endpoints disponibles


De manera predeterminada, ASP.NET Core crea un endpoint de ejemplo que nos permitirá verificar que todo funciona correctamente.

Para probarlo:

  1. Expande el endpoint.

  2. Haz clic en Try it out.

  3. Presiona Execute.

Swagger enviará una petición HTTP al servidor y mostrará:

  • La URL utilizada.

  • El código de estado HTTP.

  • La respuesta recibida.

Esto confirma que nuestra API está funcionando correctamente.


Otras herramientas para probar APIs

Aunque utilizaremos Swagger durante el curso, existen otras alternativas para interactuar con APIs REST.

Entre las más populares se encuentran:

Postman

Herramienta de escritorio especializada en pruebas de APIs.

Permite:

  • Crear colecciones de peticiones.

  • Automatizar pruebas.

  • Organizar endpoints.

Archivos HTTP

Visual Studio y Visual Studio Code permiten crear archivos .http para realizar peticiones HTTP directamente desde el editor.

Ejemplo:

ejemplo.http


Desde estos archivos es posible ejecutar solicitudes sin necesidad de aplicaciones externas.


Enfoque utilizado en este curso

Aunque existen varias formas de probar una API, en este curso utilizaremos principalmente Swagger, ya que:

  • Está integrado directamente en ASP.NET Core.

  • No requiere software adicional.

  • Permite visualizar rápidamente todos los endpoints.

  • Facilita el aprendizaje y las pruebas durante el desarrollo.


Resumen

En este capítulo creamos nuestro primer proyecto ASP.NET Core Web API utilizando Visual Studio.

Las actividades realizadas fueron:

  1. Crear el proyecto PeliculasAPI.

  2. Configurar .NET 9 y el soporte para controladores.

  3. Modificar el archivo launchSettings.json.

  4. Instalar el paquete Swashbuckle.AspNetCore.

  5. Configurar Swagger en Program.cs.

  6. Ejecutar la aplicación.

  7. Verificar el funcionamiento de la API mediante Swagger.

Con esto ya tenemos preparado el backend que servirá de base para el desarrollo de nuestra aplicación de películas utilizando Angular 19, ASP.NET Core 9 y SQL Server.


viernes, 16 de octubre de 2026

Capítulo 014. Creando Nuestra Primera Aplicación Angular

Introducción

Una vez completada la configuración del entorno de desarrollo, estamos listos para crear nuestra primera aplicación Angular.

Para ello utilizaremos Angular CLI, la herramienta oficial de Angular que nos permite realizar las tareas más comunes durante el desarrollo, tales como:

  • Crear proyectos.

  • Generar componentes y servicios.

  • Ejecutar la aplicación en modo desarrollo.

  • Compilar el proyecto.

  • Actualizar versiones de Angular.

  • Generar versiones para producción.

Angular CLI será una de las herramientas más importantes que utilizaremos a lo largo del curso.


Abrir una terminal

Antes de crear el proyecto, necesitamos abrir una interfaz de línea de comandos.

Opción 1: CMD

En Windows:

  1. Presiona Windows + R.

  2. Escribe:

cmd


  1. Presiona Enter.


Opción 2: PowerShell

También puedes abrir PowerShell directamente desde una carpeta:

  1. Mantén presionada la tecla Shift.

  2. Haz clic derecho sobre la carpeta donde deseas crear el proyecto.

  3. Selecciona:

Open PowerShell Window Here


o la opción equivalente disponible en tu versión de Windows.

Ambas alternativas son válidas. En este curso se utilizará CMD, aunque puedes trabajar con la terminal que prefieras.


Navegar a la carpeta de trabajo

Una vez abierta la terminal, desplázate hacia el directorio donde almacenarás tus proyectos.

Por ejemplo:

cd Ruta\De\Tus\Proyectos


Asegúrate de ubicarte en la carpeta donde deseas crear la aplicación Angular.


Crear el proyecto

Para generar una nueva aplicación Angular ejecuta el siguiente comando:

ng new angular-peliculas


Angular CLI comenzará a realizar algunas preguntas de configuración.

Selección de hojas de estilo

Cuando se solicite el formato de estilos, selecciona:

CSS


En este curso utilizaremos CSS como lenguaje de estilos.

Server-Side Rendering (SSR)

Angular también preguntará si deseas habilitar Server-Side Rendering (SSR) o renderizado del lado del servidor.

Selecciona:

No


ya que esta funcionalidad no será utilizada durante el curso.


Instalación de dependencias

Después de responder las preguntas de configuración, Angular CLI procederá a:

  • Crear la estructura del proyecto.

  • Generar los archivos iniciales.

  • Descargar e instalar las dependencias necesarias mediante npm.

Durante este proceso se creará una carpeta llamada:

angular-peliculas


que contendrá todo el código de la aplicación.

Este procedimiento puede tardar varios minutos dependiendo de la velocidad del equipo y de la conexión a Internet.


Abrir el proyecto en Visual Studio Code

Una vez finalizada la creación del proyecto, navega hacia la carpeta generada:

cd angular-peliculas


Y abre el proyecto con Visual Studio Code mediante:

code .


Explicación del comando

  • code abre Visual Studio Code.

  • . indica la carpeta actual.

Como resultado, Visual Studio Code abrirá directamente el proyecto Angular recién creado.


Confirmar la confianza del proyecto

La primera vez que abras el proyecto, Visual Studio Code puede mostrar un mensaje preguntando si confías en los archivos de la carpeta.

Selecciona:

Yes, I trust the authors


o la opción equivalente.

Esto permitirá que Visual Studio Code habilite todas sus funcionalidades para el proyecto.


Instalar Angular Language Service

Para mejorar la experiencia de desarrollo es recomendable instalar la extensión Angular Language Service.

Instalación

  1. Abre la sección Extensions de Visual Studio Code.

  2. Busca:

Angular Language Service


  1. Haz clic en Install.

Beneficios

Esta extensión proporciona funcionalidades como:

  • IntelliSense.

  • Autocompletado avanzado.

  • Validación de plantillas Angular.

  • Navegación de componentes.

  • Detección temprana de errores.

Gracias a ella, el desarrollo de aplicaciones Angular resulta mucho más cómodo y productivo.


Abrir una terminal en Visual Studio Code

Visual Studio Code incorpora una terminal integrada que evita tener que cambiar constantemente entre el editor y una ventana externa.

Para abrirla puedes:

Desde el menú

Terminal → New Terminal


Mediante atajo de teclado

Ctrl + `


(La tecla ubicada normalmente debajo de Escape).


Ejecutar la aplicación

Con la terminal abierta dentro de la carpeta del proyecto, ejecuta:

ng serve -o


¿Qué hace este comando?

  • Compila la aplicación Angular.

  • Inicia un servidor de desarrollo local.

  • Observa los cambios realizados en el código.

  • Abre automáticamente el navegador.

El parámetro:

-o


proviene de open y hace que Angular abra automáticamente el navegador cuando la aplicación esté lista.


Verificar el servidor de desarrollo

Después de algunos segundos Angular mostrará un mensaje similar a:

Local: http://localhost:4200/


Esta dirección indica dónde se encuentra ejecutándose nuestra aplicación.

Dirección por defecto

http://localhost:4200


  • localhost hace referencia a nuestra computadora local.

  • 4200 es el puerto predeterminado utilizado por Angular.


Visualizar la aplicación

Si todo ha funcionado correctamente, el navegador se abrirá automáticamente y mostrará la página inicial de Angular.

Aunque todavía no hemos desarrollado ninguna funcionalidad, esta pantalla confirma que:

  • Angular está instalado correctamente.

  • Angular CLI funciona adecuadamente.

  • Node.js está configurado correctamente.

  • El proyecto se creó sin errores.

En otras palabras, nuestro entorno está listo para comenzar a desarrollar la aplicación.


Resumen

En este capítulo creamos nuestra primera aplicación Angular utilizando Angular CLI.

Los comandos utilizados fueron:

Crear el proyecto

ng new angular-peliculas


Entrar a la carpeta

cd angular-peliculas


Abrir en Visual Studio Code

code .


Ejecutar la aplicación

ng serve -o


Al finalizar, pudimos acceder a la aplicación mediante:

http://localhost:4200


Con esto hemos creado y ejecutado exitosamente nuestro primer proyecto Angular. En el próximo capítulo exploraremos la estructura de archivos generada por Angular CLI y comprenderemos el propósito de cada uno de los elementos que componen el proyecto.