Tutorial: Compilación de una aplicación de administración de tareas - Teams

El conector de Microsoft Teams es una aplicación de administración de tareas de ejemplo de Model-View-Controller (MVC) y se genera mediante la plantilla de aplicación web ASP.NET. La mayor parte del código está relacionado con la configuración básica de MVC o el sistema de administración de tareas. Puede agregar el conector existente para grupos de Microsoft 365 o crear uno nuevo en Teams.

Tipos de códigos de conector

ConnectorController.cs: Configurar y guardar acciones.
TaskController.cs: Crear y actualizar acciones.

Características clave del conector de Microsoft Teams

Simula un sistema de administración de tareas real.
Permite a los usuarios crear y ver tareas.
Genera contenido de forma aleatoria.
Simula la notificación que se va a enviar al canal de Microsoft Teams.

Esta guía paso a paso le ayuda a crear y probar un conector en Microsoft Teams. Verá la siguiente salida:

Captura de pantalla de la salida del conector del equipo de compilación después de completar correctamente la guía paso a paso.

Requisitos previos

10 minutos restantes

Asegúrese de instalar las herramientas siguientes y de configurar el entorno de desarrollo:

	Instalar	Para usar...
	Microsoft Teams	Microsoft Teams para colaborar con todos los usuarios con los que trabaje a través de aplicaciones para chat, reuniones y llamadas en un solo lugar.
	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.
	SDK de .NET Core	Enlaces personalizados para la depuración local y las implementaciones de aplicaciones de Azure Functions. Use la versión más reciente o instale la versión portátil.
	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`).

Nota:

Después de descargar ngrok, regístrese e instale authtoken.

Configuración del entorno local

9 minutos restantes

Abra Microsoft-Teams-Samples.
Seleccione Código.
En el menú desplegable, seleccione Abrir con GitHub Desktop.
Seleccione Clonar.

Habilitar la versión preliminar para desarrolladores

8 minutos restantes

Habilite la carga de aplicaciones en la consola de administración del inquilino.
1. Inicie sesión en el centro de administración de Microsoft 365 con sus credenciales de administrador.
2. En el panel izquierdo, seleccione Mostrar todo.
3. Seleccione Teams.
En el panel izquierdo, seleccione Aplicaciones de Teams.
Seleccione Directivas de instalación.
Seleccione Global (valor predeterminado para toda la organización).
Active el botón de alternancia Cargar aplicaciones personalizadas .
Haga clic en Guardar.

El inquilino de prueba ahora puede permitir la carga de aplicaciones personalizadas.

Sugerencia

La carga de aplicaciones personalizadas tarda algún tiempo en activarse.
Vaya a Microsoft Teams.
En la esquina superior derecha de Teams, seleccione ....
Seleccione Acerca de> Versión preliminar para desarrolladores.
Seleccione Cambiar a la versión preliminar del desarrollador.

Configuración del conector

7 minutos restantes

Abra TeamsToDoAppconnector.sln en Visual Studio desde el repositorio clonado.

Creación de un túnel
- túnel de desarrollo
- ngrok
1. Abra Visual Studio.
2. Seleccione Crear un nuevo proyecto.
3. En el cuadro de búsqueda, escriba ASP.NET. En los resultados de la búsqueda, seleccione ASP.NET Core Web App.
4. Seleccione Siguiente.
5. Escriba Nombre del proyecto y seleccione Siguiente.
6. Seleccione Crear.
  
  Aparece una ventana de información general.
7. En la lista desplegable de depuración, seleccione Túneles de desarrollo (sin túnel activo)>Crear un túnel....
  
  Aparecerá una ventana emergente.
8. 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.
9. Seleccione Aceptar.
  
  Aparece una ventana emergente que muestra que el túnel de desarrollo se ha creado correctamente.
10. Seleccione Aceptar.
  
  Puede encontrar el túnel que ha creado en la lista desplegable de depuración de la siguiente manera:
11. Seleccione F5 para ejecutar la aplicación en el modo de depuración.
12. Si aparece un cuadro de diálogo Advertencia de seguridad , seleccione Sí.
  
  Aparecerá una ventana emergente.
13. 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.
14. Vaya a Visual Studio y seleccione Ver > salida.
15. 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.
Vaya al Portal para desarrolladores del conector.
Seleccione Nuevo conector.
Escriba los detalles siguientes para registrar un nuevo conector:
- Nombre del conector.
- Logotipo
- Descripción breve de la aplicación (10 palabras o menos) .
- Descripción detallada de lo que hace el conector (entre 3 y 5 oraciones).
- Sitio web de la empresa.
- Página de configuración del conector como https://[BASE_URI]/connector/setup.
- Establezca Dominios válidos como https>//[Base URI].
- Seleccione Sí para habilitar la acción en tarjetas del conector.
- Establezca la dirección URL de Acciones como https://[BASE_URI]/Task/Update.
- Seleccione Acepto los términos y condiciones del Contrato para desarrolladores de aplicaciones.
- Haga clic en Guardar.
Ha registrado correctamente un nuevo conector. La ventana aparece con el identificador del conector registrado.

Sugerencia

Guarde el identificador del conector para futuras referencias.
Abra el archivo TeamsToDoAppConnector.csproj desde el repositorio clonado.
En el repositorio clonado, vaya a Microsoft-Teams-Samples>>samples connector-todo-notification>csharp.
Abra el archivo appsettings.json en Visual Studio y realice las siguientes actualizaciones.
- Reemplace con BASE_URLngork URL o dev tunnel URL.
- Reemplace por CONNECTOR_ID el identificador del conector creado.
En el repositorio clonado, vaya a Microsoft-Teams-Samples>>connector-todo-notification>csharp>TeamsAppPackages.
Abra el archivo manifest.json en Visual Studio y realice los siguientes cambios:
- Reemplace por CONNECTOR_ID el identificador del conector creado.
- Reemplace por VALID-DOMAIN el dominio de túnel de desarrollo de ngrok OR, excepto https://.
Pulse F5 para ejecutar el proyecto. Se abre una página web.

Conector de prueba en Microsoft Teams

6 minutos restantes

Cree un archivo .zip con los siguientes archivos presentes en la carpeta Manifiesto :
- manifest.json
- outline-icon.png
- color-icon.png
Vaya a Microsoft Teams.
1. En el panel izquierdo, seleccione el icono Aplicaciones .
2. Seleccione Administrar las aplicaciones.
3. Seleccione Cargar una aplicación.
4. Busque la opción Cargar una aplicación personalizada.
Seleccione el archivo .zip que creó en la carpeta Manifiesto y seleccione Abrir.
Seleccione Agregar a un equipo.
Seleccione el nombre del equipo o canal de la lista.
Seleccione Configurar un conector.
En el panel izquierdo, busque el conector ToDo de Teams en la barra de búsqueda y seleccione Configurar.
Seleccione Creado o Actualizado en la página de registro y seleccione Guardar.

Después de la configuración, puede ver la notificación en el canal con el vínculo al Portal del Administrador de tareas.
Vaya al Portal del Administrador de tareas.
Seleccione Crear nuevo.
Escriba los detalles de la nueva tarea:
- Title
- Descripción
- Asignar a
Haga clic en Guardar.

La tarjeta de mensaje aparece en el canal de Teams registrado.

Sugerencia

Puede probar los botones accionables disponibles en la tarjeta de mensaje.