Crear un front-end de aplicación de lienzo para su API web ASP.NET (versión preliminar)

[Este artículo es documentación preliminar y está sujeto a modificaciones].

Power Platform permite a los desarrolladores de API web crear rápidamente aplicaciones móviles o web utilizando una aplicación de lienzo de Power Apps como front-end. Con el servicio conectado de Power Platform en Visual Studio 2022, los desarrolladores de API web ASP.NET pueden crear fácilmente un conector personalizado para su uso con Power Apps y Power Automate.

Puede usar túneles de desarrollo de Visual Studio para crear una aplicación de lienzo antes de publicar tu API en un punto de conexión público. Los túneles de desarrollo crean una conexión ad-hoc entre su API web que se ejecuta localmente y su Power Apps. Puede usarlos para probar y depurar localmente su API web en el contexto de Power Platform en tiempo real (bucle interno).

Este instructivo usa la API web de Weather de muestra ASP.NET para agregar una conexión a una aplicación de lienzo. Se basa en el tutorial Crear una API web con ASP.NET Core.

Requisitos previos

• Visual Studio Versión 2022 17.6 versión preliminar 2 con la ASP.NET carga de trabajo de desarrollo web instalada. Debe iniciar sesión en Visual Studio para crear y usar túneles de desarrollo. La característica no está disponible en Visual Studio para Mac.
• Un entorno de desarrollador de Power Platform con permiso para crear conectores personalizados

Crear un proyecto ASP.NET en Visual Studio

1. Cree un proyecto de API web de ASP.NET Core.
2. Seleccione Siguiente.
3. Ingrese WeatherSample para el Nombre del proyecto y luego seleccione Siguiente.
4. Seleccione Crear.

El proyecto WeatherSample contiene un controlador de ejemplo para un servicio RESTful HTTP.

Agregar Power Platform como un servicio conectado

1. En el Explorador de soluciones haga clic con el botón secundario en el nodo Servicios conectados y seleccione Administrar servicios conectados en el menú contextual.

2. En la pestaña Servicios conectados, seleccione el icono + para Dependencias del servicio.

3. En el cuadro de diálogo Agregar dependencia, escriba Power Platform en el cuadro de búsqueda.

4. Seleccione Microsoft Power Platform y, a continuación, Siguiente.

   Si aún no ha iniciado sesión, inicie sesión en su cuenta de Microsoft Power Platform. Si no tiene una cuenta de Power Platform, Cree un entorno de desarrollador.

5. En la pantalla Conectar a Microsoft Power Platform: seleccione su entorno de desarrollador.

6. En Nombre de conectores personalizados, el valor WeatherSample_Connector ya debería estar configurado.

7. En Seleccionar un túnel de desarrollo público, seleccione el icono +.

   1. En el campo Nombre, escriba SampleTunnel.
   2. Seleccione Tipo de túnel: Persistente.
   3. Seleccione Acceso: público.
   4. Seleccione Aceptar.

8. Seleccione Finalizar

9. Una vez que el servicio conectado esté configurado, seleccione Cerrar.

Crear una aplicación de lienzo con el conector personalizado

Cuando Visual Studio ejecuta una aplicación web y un túnel está activo, el navegador web abre una URL de túnel en lugar de una URL de host local.

1. Ejecute su solución de Visual Studio y comience a depurar.

2. Cuando se abre el navegador, se abre una página de advertencia con la primera solicitud enviada a la URL del túnel. Seleccione Continuar.

3. Con la API web en ejecución, abre Power Apps en una nueva pestaña del navegador.

4. Seleccione el entorno de desarrollo en la esquina superior derecha.

5. Cree una aplicación de lienzo en blanco con Teléfono como formato.

6. En el menú superior, seleccione Agregar datos.

7. Busque y seleccione WeatherSample_Connector y luego seleccione Conectar. Más información: Agregar conexiones a aplicaciones de lienzo

8. Inserte un botón y arrástrelo hasta la parte inferior del formulario.

9. Cambie el botón Texto a Cargar datos.

10. Introduzca la siguiente fórmula en la propiedad OnSelect del botón:

    ClearCollect(weatherCollection, WeatherSample_Connector.GetWeatherForecast())
    

11. Insertar una galería vertical

12. Seleccione weatherCollection como origen de datos y luego cambie el diseño a Título y subtítulo.

13. Ejecute la aplicación. Debería tener un aspecto similar al del siguiente ejemplo:

    

Depurar la API

Con su aplicación de lienzo en ejecución, establezca un punto de interrupción y depúrelo. También puede usar Hot Reload.

Consulte también

¿Qué son las aplicaciones de lienzo?
Cómo usar túneles de desarrollo en 2022 con aplicaciones principales Visual Studio ASP.NET