Cree la primera aplicación con Blazor
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.
Nota:
Actualmente, El kit de herramientas de Teams no admite la funcionalidad de extensión de mensajes.
Requisitos previos
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.
Descargue la versión más reciente de Visual Studio.
Abra
vs_enterprise__3bed52501a604464b1eff2ce580fd4eb.exedesde 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.
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.
Create 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!
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. Create 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.
Create área de trabajo del proyecto para la aplicación de pestaña
Abra Visual Studio.
Seleccione Create un nuevo proyecto.
Aparece la Create una nueva página del 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 Create.
Seleccione la pestaña 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.
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.
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 de ASP.NET Core a la aplicación.
Compilación y ejecución de la primera aplicación de pestaña de Teams
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 volverá a cargar.
Detener la depuración en Visual Studio.
Vista previa de la primera aplicación de pestaña de Teams
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 :
- Seleccione el nombre de la suscripción en la lista desplegable.
- Seleccione el Grupo de recursos en la lista desplegable.
- 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.
- 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 ver el Azure Portal.
Inicie sesión en el Azure Portal.
Aparecerá la aplicación-dev-rg.
Los recursos se aprovisionan en el 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.
Create área de trabajo del proyecto para la aplicación bot
Inicie el desarrollo de aplicaciones de Teams mediante la creación de la primera aplicación. Esta aplicación usa la funcionalidad del bot.
Create el proyecto de bot
Abra Visual Studio.
Seleccione Create un nuevo proyecto.
Aparece la Create una nueva página del 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 Create.
Aparece el Create una nueva ventana de 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.
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 de Explorador de soluciones de la versión más reciente de Visual Studio.
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 de ASP.NET Core a la aplicación.
Compilación y ejecución de la primera aplicación de bot
Para crear y ejecutar la aplicación localmente:
Create un túnel
Abra Visual Studio.
Seleccione Create un nuevo proyecto.
En el cuadro de búsqueda, escriba ASP.NET. En los resultados de la búsqueda, seleccione ASP.NET Core aplicación web.
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 Dev Tunnels (no active tunnel)>Create a Tunnel....
Aparecerá una ventana emergente.
Actualice los detalles siguientes en la ventana emergente:
- Cuenta: escriba una cuenta de Microsoft o GitHub.
- Nombre: escriba un nombre para el túnel.
- Tipo de túnel: en la lista desplegable, seleccione Temporal.
- 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.
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
helloworldpara 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 volverá 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
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 :
Seleccione el nombre de la suscripción en la lista desplegable.
Seleccione el Grupo de recursos en la lista desplegable.
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.
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 ver el Azure Portal.
Inicie sesión en el Azure Portal.
Aparecerá la aplicación-dev-rg.
Los recursos se aprovisionan en el 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
helloworldpara mostrar una tarjeta de introducción para una tarjeta adaptable.
Enhorabuena.
¡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.
¿Tiene algún problema con esta sección? Si es así, envíenos sus comentarios para que podamos mejorarla.
Comentarios
Próximamente: A lo largo de 2024 iremos eliminando gradualmente GitHub Issues como mecanismo de comentarios sobre el contenido y lo sustituiremos por un nuevo sistema de comentarios. Para más información, vea: https://aka.ms/ContentUserFeedback.
Enviar y ver comentarios de