Hola mundo con Blazor - Teams

Blazor le permite crear interfaces de usuario web interactivas mediante C#, en lugar de JavaScript.

Puede crear una aplicación de pestaña y una aplicación de bot con Blazor y la versión más reciente de Visual Studio.

Captura de pantalla de la aplicación Blazor que muestra la pestaña Bot y la salida de la extensión de mensaje después de completar correctamente la guía paso a paso.

Nota:

Teams Toolkit no admite la funcionalidad de extensión de mensaje.

Requisitos previos

8 minutos restantes

Esta es una lista de las herramientas que necesita para compilar e implementar la aplicación.

	Instalar	Para usar...
	Visual Studio 2022	Puede instalar la versión empresarial en Visual Studio 2022 e instalar las cargas de trabajo ASP.NET y desarrollo web. Use la versión más reciente.
	Microsoft Teams	Microsoft Teams para colaborar con todos los usuarios con los que trabaje a través de aplicaciones para chat, reuniones y llamadas a todos en un solo lugar.
	Microsoft Edge (recomendado) o Google Chrome	Un explorador con herramientas de desarrollo.
	Túnel de desarrollo	Las características de aplicaciones de Teams (bots conversacionales, extensiones de mensajes y webhooks entrantes) necesitan conexiones entrantes. Un túnel conecta el sistema de desarrollo a Teams. Dev tunnel es una herramienta eficaz para abrir de forma segura tu host local a Internet y controlar quién tiene acceso. El túnel de desarrollo está disponible en Visual Studio 2022, versión 17.7.0 o posterior. o también puede usar ngrok como túnel para conectar el sistema de desarrollo a Teams. No es necesario para las aplicaciones que solo incluyen pestañas. Este paquete se instala en el directorio del proyecto (mediante npm `devDependencies`).

Después de instalar las herramientas necesarias, configure el entorno de desarrollo.

Instalación del kit de herramientas de Microsoft Teams

El kit de herramientas de Teams ayuda a simplificar el proceso de desarrollo con herramientas para aprovisionar e implementar recursos en la nube para la aplicación, publicar en microsoft Teams Store y mucho más.
Puede usar el kit de herramientas con Visual Studio o la CLI (interfaz de línea de comandos) denominada teamsfx.

Visual Studio
Línea de comandos

Descargue la versión más reciente de Visual Studio.
Abra vs_enterprise__3bed52501a604464b1eff2ce580fd4eb.exe desde la carpeta de descarga.
Seleccione Continuar en la página Instalador de Visual Studio para configurar la instalación.
Seleccione ASP.NET y desarrollo web en Cargas de trabajo.
Seleccione Herramientas de desarrollo de Microsoft Teams en Detalles de instalación.
Seleccione Instalar.

Visual Studio se instala en unos minutos.

Para instalar la CLI de TeamsFx, use el administrador de npm paquetes:

npm install -g @microsoft/teamsfx-cli

En función de la configuración, es posible que tenga que usar sudo para instalar la CLI:

sudo npm install -g --unsafe-perm @microsoft/teamsfx-cli

Esta condición es más común en sistemas Linux y macOS.

Asegúrese de agregar la memoria caché global npm a la ruta de acceso. Este paso se realiza normalmente como parte del instalador de Node.js.

Puede usar la CLI con el teamsfx comando . Compruebe que el comando funciona ejecutando teamsfx -h.

Precaución

Para poder ejecutar TeamsFx en terminales de PowerShell, debe habilitar la directiva de ejecución firmada remota para PowerShell.

Configuración del inquilino de desarrollo de Teams

Un inquilino es como un espacio o un contenedor para su organización en Teams, donde chatea, comparte archivos y ejecuta reuniones. Este espacio también es donde carga y prueba la aplicación personalizada. Vamos a comprobar si está listo para desarrollar con el inquilino.

Habilitación de la carga de aplicaciones personalizadas

Después de crear la aplicación, debe cargarla en Teams sin distribuirla. Este proceso se conoce como carga de aplicaciones personalizada. Inicie sesión en su cuenta de Microsoft 365 para ver esta opción.

En el cliente de Teams, seleccione el icono Aplicaciones .
Seleccione Administrar las aplicaciones.
Seleccione Cargar una aplicación.
Busque la opción Cargar una aplicación personalizada. Si ve la opción , la carga de aplicaciones personalizada está habilitada.

Nota:

Póngase en contacto con el administrador de Teams si no tiene la opción de cargar una aplicación personalizada.

Creación de un inquilino para desarrolladores de Teams gratuito (opcional)

Si no tiene una cuenta de desarrollador de Teams, puede obtenerla de forma gratuita. ¡Únete al programa para desarrolladores de Microsoft 365!

Vaya al programa para desarrolladores de Microsoft 365.
Seleccione Unirse ahora y siga las instrucciones en pantalla.
En la pantalla de bienvenida, seleccione Configurar suscripción A5.
Configure su cuenta de administrador. Cuando haya terminado, aparecerá la siguiente pantalla.
Inicie sesión en Teams con la cuenta de administrador que acaba de configurar. Compruebe que tiene la opción Cargar una aplicación personalizada en Teams.

Obtener una cuenta gratuita de Azure

Si desea hospedar la aplicación o acceder a los recursos en Azure, debe tener una suscripción a Azure. Cree una cuenta gratuita antes de empezar.

Ahora tiene todas las herramientas para configurar su cuenta. A continuación, vamos a configurar el entorno de desarrollo y empezar a compilar. Seleccione primero la aplicación que desea crear.

Creación del área de trabajo del proyecto para la aplicación de pestaña

7 minutos restantes

Abra Visual Studio.
Seleccione Crear un nuevo proyecto.

Aparece la página Crear un nuevo proyecto .
En el cuadro de búsqueda, escriba Microsoft Teams. En los resultados de la búsqueda, seleccione Aplicación de Microsoft Teams.
Seleccione Siguiente.
Escriba Nombre del proyecto y seleccione Crear.
Seleccione Tab como la funcionalidad de la aplicación.
Seleccione Crear.

La aplicación de pestaña de Teams se crea en unos segundos.

Un resumen rápido de la creación de una aplicación de pestaña de Teams.

Vea este breve resumen para crear una aplicación de pestaña de Teams.

La representación gráfica muestra el proceso de creación de la aplicación de tabulación de Teams.

Realice un recorrido por el código fuente de la aplicación de pestaña de Teams.

Después de la creación del proyecto, tiene los componentes para crear una aplicación personal básica. Puede ver la estructura de directorios del proyecto en el panel Explorador de soluciones de Visual Studio.

Captura de pantalla del Explorador de soluciones que muestra los componentes para compilar una aplicación personal básica.

Teams Toolkit crea un scaffolding para el proyecto en función de las funcionalidades seleccionadas. Entre otros archivos, Teams Toolkit mantiene lo siguiente:

Nombre de la carpeta	Contenido
Iconos de la aplicación	Los iconos de aplicación se almacenan como archivos PNG en `color.png` y `outline.png`.
`manifest.json`	El manifiesto de aplicación (anteriormente denominado manifiesto de aplicación de Teams) para publicar a través del Portal para desarrolladores para Teams se almacena en `Properties/manifest.json`.
`BackendController.cs`	Se proporciona un controlador back-end en `Controllers/BackendController.cs` para ayudar con la autenticación.
`Pages/Tab.razor`	El manifiesto de aplicación para publicar a través del Portal para desarrolladores para Teams se almacena en `Properties/manifest.json`.
`TeamsFx.cs` y `JS/src/index.js`	El contenido se usa para inicializar las comunicaciones con el host de Teams.

Puede agregar funcionalidad de back-end agregando otros controladores ASP.NET Core a la aplicación.

Compilación y ejecución de la primera aplicación de pestaña de Teams

6 minutos restantes

Después de configurar el área de trabajo del proyecto con Teams Toolkit, compile el proyecto de pestaña.

Para compilar y ejecutar la aplicación:

Seleccione Project>Teams Toolkit>Prepare Teams App Dependencies (Preparar dependencias de aplicaciones de Teams).
Inicie sesión en su cuenta de Microsoft 365 y seleccione Continuar.
Seleccione Depurar>Iniciar depuración o F5.
Si aparece un cuadro de diálogo Advertencia de seguridad , seleccione Sí.
Seleccione Agregar para instalar la aplicación en Teams.

Enhorabuena, la primera aplicación de pestaña se ejecuta en el entorno local.
Para permitir que la aplicación recupere los detalles del usuario mediante Microsoft Graph, seleccione Autorizar.
Seleccione Aceptar.
La fotografía y los detalles aparecen en la pestaña Personal.

Puede realizar actividades de depuración normales, como establecer puntos de interrupción, como si fuera cualquier otra aplicación web. La aplicación es compatible con "hot reloading". Si cambia cualquier archivo dentro del proyecto, la página se vuelve a cargar.
Detener la depuración en Visual Studio.

Vista previa de la primera aplicación de pestaña de Teams

5 minutos restantes

Ha aprendido a crear, compilar y ejecutar aplicaciones de Teams con funcionalidad de tabulación. Los pasos finales siguientes son implementar la aplicación en Azure y versión preliminar en Teams:

Vamos a implementar la primera aplicación con funcionalidad de tabulación en Microsoft Azure mediante el kit de herramientas de Teams.

Para aprovisionar la aplicación de pestaña en Azure

Seleccione ProjectTeams ToolkitProvision in the Cloud (Aprovisionamiento del kit > de herramientas de Project> Teams en la nube).
Escriba los detalles de la suscripción y el grupo de recursos en el cuadro de diálogo Aprovisionar :
1. Seleccione el nombre de la suscripción en la lista desplegable.
2. Seleccione el Grupo de recursos en la lista desplegable.
3. Si no tiene un grupo de recursos existente, puede crear un nuevo grupo de recursos. Para crear un nuevo grupo de recursos, seleccione Nuevo> escriba el nombre > del recurso y seleccione Aceptar. Seleccione una ubicación en la lista desplegable nueva ubicación del grupo de recursos.
4. Seleccione Aprovisionar.
Aparece un cuadro de diálogo de advertencia del kit de herramientas de Teams .
Seleccione Aprovisionar.

El grupo de recursos tarda unos minutos en aprovisionarse en la nube.
Seleccione Aceptar.
Seleccione Ver recursos aprovisionados para verlos en Azure Portal.
Inicie sesión en Azure Portal.

Aparecerá la aplicación-dev-rg.

Los recursos se aprovisionan en Azure Portal.

Para implementar la aplicación de pestaña en la nube

Seleccione ProjectTeams Toolkit>Deploy to the Cloud... (Implementar> en la nube).
Seleccione Aceptar.

La aplicación de pestaña se ha implementado correctamente en la nube.

Para obtener una vista previa de la aplicación de pestaña en Teams

Seleccione Project Teams ToolkitPreview (Versión preliminardel kit de herramientas de>Project> Teams) en Teams.
Seleccione Agregar.

Enhorabuena, la primera aplicación de pestaña se ejecuta en el entorno de Azure.
Seleccione Autorizar para permitir que la aplicación recupere los detalles del usuario mediante Microsoft Graph.
Seleccione Aceptar.

La fotografía y los detalles aparecen en la pestaña Personal.

Creación del área de trabajo del proyecto para la aplicación de bot

4 minutos restantes

Inicie el desarrollo de aplicaciones de Teams mediante la creación de la primera aplicación. Esta aplicación usa la funcionalidad del bot.

Captura de pantalla que muestra el área de trabajo de la aplicación de bot.

Creación del proyecto de bot

Abra Visual Studio.
Seleccione Crear un nuevo proyecto.

Aparece la página Crear un nuevo proyecto .
En el cuadro de búsqueda, escriba Microsoft Teams. En los resultados de la búsqueda, seleccione Aplicación de Microsoft Teams.
Seleccione Siguiente.

Aparecerá la ventana Configurar el nuevo proyecto .
Escriba Nombre del proyecto y seleccione Crear.

Aparece la ventana Crear una nueva aplicación de Teams .
Seleccione La característica de aplicación de Teams.
Seleccione la aplicación Bot de comandos como la funcionalidad de la aplicación.
Seleccione Crear.

La aplicación de bot de Teams se crea en unos segundos.

Un resumen rápido de la creación de una aplicación de bot de Teams.

Vea este breve resumen para crear una aplicación de bot de Teams.

La representación gráfica muestra el proceso de creación de la aplicación de bot de jTeams.

Realice un recorrido por el código fuente de la aplicación bot de Teams.

Después de la creación del proyecto, tiene los componentes para crear una aplicación personal básica. Puede ver la estructura de directorios del proyecto en el área Explorador de soluciones de la versión más reciente de Visual Studio.

Captura de pantalla del Explorador de soluciones con BlazorApp resaltado.

Teams Toolkit crea un scaffolding para el proyecto en función de las funcionalidades seleccionadas. Entre otros archivos, Teams Toolkit mantiene lo siguiente:

Nombre de la carpeta	Contenido
Iconos de la aplicación	Los iconos de aplicación se almacenan como archivos PNG en `color.png` y `outline.png`.
`manifest.json`	El manifiesto de aplicación para publicar a través del Portal para desarrolladores para Teams se almacena en `Properties/manifest.json`.
`BackendController.cs`	Se proporciona un controlador back-end en `Controllers/BackendController.cs` para ayudar con la autenticación.
`TeamsFx.cs` y `JS/src/index.js`	El contenido se usa para inicializar las comunicaciones con el host de Teams.

Puede agregar funcionalidad de back-end agregando otros controladores ASP.NET Core a la aplicación.

Compilación y ejecución de la primera aplicación de bot

3 minutos restantes

Para crear y ejecutar la aplicación localmente:

Creación de un túnel

túnel de desarrollo
ngrok

Abra Visual Studio.
Seleccione Crear un nuevo proyecto.
En el cuadro de búsqueda, escriba ASP.NET. En los resultados de la búsqueda, seleccione ASP.NET Core Web App.
Seleccione Siguiente.
Escriba Nombre del proyecto y seleccione Siguiente.
Seleccione Crear.

Aparece una ventana de información general.
En la lista desplegable de depuración, seleccione Túneles de desarrollo (sin túnel activo)>Crear un túnel....

Aparecerá una ventana emergente.
Actualice los detalles siguientes en la ventana emergente:
1. Cuenta: escriba una cuenta de Microsoft o GitHub.
2. Nombre: escriba un nombre para el túnel.
3. Tipo de túnel: en la lista desplegable, seleccione Temporal.
4. Acceso: en la lista desplegable, seleccione Público.
Seleccione Aceptar.

Aparece una ventana emergente que muestra que el túnel de desarrollo se ha creado correctamente.
Seleccione Aceptar.

Puede encontrar el túnel que ha creado en la lista desplegable de depuración de la siguiente manera:
Seleccione F5 para ejecutar la aplicación en el modo de depuración.
Si aparece un cuadro de diálogo Advertencia de seguridad , seleccione Sí.

Aparecerá una ventana emergente.
Seleccione Continuar.

La página principal del túnel de desarrollo se abre en una nueva ventana del explorador y el túnel de desarrollo ya está activo.
Vaya a Visual Studio y seleccione Ver > salida.
En el menú desplegable Consola de salida , seleccione Túneles de desarrollo.

La consola de salida muestra la dirección URL del túnel de desarrollo.

Use ngrok o símbolo del sistema para crear un túnel a los puntos de conexión HTTPS disponibles públicamente del servidor web en ejecución local. Ejecute el siguiente comando en ngrok:

ngrok http --host-header=localhost 3978

Sugerencia

Si encuentra ERR_NGROK_4018, siga los pasos proporcionados en el símbolo del sistema para registrarse y autenticar ngrok. A continuación, ejecute el comando ngrok http --host-header=localhost 3978.

La ventana muestra la dirección URL HTTPS.

Captura de pantalla que muestra la dirección URL HTTPS de ngrok.

Seleccione Project>Teams Toolkit>Prepare Teams App Dependencies (Preparar dependencias de aplicaciones de Teams).
Inicie sesión en su cuenta de Microsoft 365 y seleccione Continuar.
Seleccione Depurar>Iniciar depuración o F5 para ejecutar la aplicación en modo de depuración.
Seleccione Agregar.

Ahora el bot se ejecuta correctamente en Teams. Una vez cargada la aplicación, se abre una sesión de chat con el bot.

Puede escribir helloworld para mostrar una tarjeta de introducción para una tarjeta adaptable.

Puede realizar actividades de depuración normales, como establecer puntos de interrupción, como si fuera cualquier otra aplicación web. La aplicación es compatible con "hot reloading". Si cambia cualquier archivo dentro del proyecto, la página se vuelve a cargar.

Obtenga información sobre cómo solucionar problemas si la aplicación no se ejecuta localmente.

Para ejecutar correctamente la aplicación en Teams, asegúrese de que ha habilitado la carga de aplicaciones personalizadas en su cuenta de Teams. Puede obtener más información sobre la carga de aplicaciones personalizadas en la sección requisitos previos.

Vista previa de la primera aplicación de bot

2 minutos restantes

Para aprovisionar la aplicación de bot en Azure

Seleccione ProjectTeams ToolkitProvision in the Cloud (Aprovisionamiento del kit > de herramientas de Project> Teams en la nube).
Escriba los detalles de la suscripción y el grupo de recursos en el cuadro de diálogo Aprovisionar :
1. Seleccione el nombre de la suscripción en la lista desplegable.
2. Seleccione el Grupo de recursos en la lista desplegable.
3. Si no tiene un grupo de recursos existente, puede crear un nuevo grupo de recursos. Para crear un nuevo grupo de recursos, seleccione Nuevo> escriba el nombre > del recurso y seleccione Aceptar. Seleccione una ubicación de la lista desplegable nueva ubicación del grupo de recursos.
4. Seleccione Aprovisionar.
  
  Aparece un cuadro de diálogo de advertencia del kit de herramientas de Teams .
Seleccione Aprovisionar.

El grupo de recursos tarda unos minutos en aprovisionarse en la nube.
Una vez completada la aprovisionamiento, seleccione Aceptar.
Seleccione Ver recursos aprovisionados para verlos en Azure Portal.
Inicie sesión en Azure Portal.

Aparecerá la aplicación-dev-rg.

Los recursos se aprovisionan en Azure Portal.

Para implementar la aplicación de bot en la nube

Seleccione ProjectTeams Toolkit>Deploy to the Cloud (Implementar> en la nube).
Seleccione Aceptar.

La aplicación de bot se implementa correctamente en la nube.

Para obtener una vista previa de la aplicación de bot en Teams

Seleccione Project Teams ToolkitPreview (Versión preliminardel kit de herramientas de>Project> Teams) en Teams.
Seleccione Agregar.

Ahora el bot se ejecuta correctamente en Teams. Una vez cargada la aplicación, se abre una sesión de chat con el bot.
Puede escribir helloworld para mostrar una tarjeta de introducción para una tarjeta adaptable.

Enhorabuena.

100 % completado.

¡Lo has hecho!

Ha creado dos aplicaciones, cada una con una funcionalidad diferente: una aplicación de pestaña y una aplicación de bot.

Ha completado el tutorial para compilar aplicaciones con Blazor.

Compartir a través de

Cree la primera aplicación con Blazor