Ejercicio: Creación de una extensión de mensaje

  • 10 minutos

En este ejercicio, creará una solución de extensión de mensaje. El kit de herramientas de Teams se usa en Visual Studio para crear los recursos necesarios y, a continuación, iniciar una sesión de depuración y probar en Microsoft Teams.

Captura de pantalla de los resultados de búsqueda devueltos por una extensión de mensaje basada en búsqueda en Microsoft Teams.

Creación de un proyecto de extensión de mensaje

Empiece por crear un nuevo proyecto de aplicación de Microsoft Teams configurado con una extensión de mensaje que contenga un comando de búsqueda. Aunque podría crear un proyecto mediante una plantilla de proyecto de Teams Toolkit for Visual Studio, es necesario realizar cambios en el proyecto con scaffolding para poder completar este módulo. En su lugar, se usa una plantilla de proyecto personalizada que está disponible como un paquete NuGet. La ventaja de usar una plantilla personalizada es que crea una solución con los archivos y dependencias necesarios, lo que le ahorra tiempo.

En una sesión de PowerShell:

  1. Comience con la instalación del paquete de plantilla desde NuGet mediante la ejecución de:

    dotnet new install M365Advocacy.Teams.Templates

  2. Cree un proyecto mediante la ejecución de:

    dotnet new teams-msgext-search --name "ProductsPlugin" `
  --internal-name "msgext-products" `
  --display-name "Contoso products" `
  --short-description "Product look up tool." `
  --full-description "Get real-time product information and share them in a conversation." `
  --command-id "Search" `
  --command-description "Find products by name" `
  --command-title "Products" `
  --parameter-name "ProductName" `
  --parameter-title "Product name" `
  --parameter-description "The name of the product as a keyword" `
  --allow-scripts Yes

  3. Espere a que se cree el proyecto.

  4. Cambie al directorio del proyecto ejecutando cd ProductsPlugin.

  5. Abra la solución en Visual Studio mediante la ejecución de .\ProductsPlugin.sln.

Creación de un túnel de desarrollo

Cuando el usuario interactúa con la extensión de mensaje, bot service envía solicitudes al servicio web. Durante el desarrollo, el servicio web se ejecuta localmente en la máquina. Para permitir que bot service llegue al servicio web, debe exponerlo más allá de la máquina mediante un túnel de desarrollo.

Captura de pantalla de la ventana Túneles de desarrollo en Visual Studio.

Continuar en Visual Studio:

  1. En la barra de herramientas, seleccione la lista desplegable junto al botón Inicio , expanda el menú Túneles de desarrollo (sin túnel activo) y seleccione Crear un túnel...
  2. En el cuadro de diálogo, especifique los valores siguientes:
    1. Cuenta: seleccione una cuenta de su elección
    2. Nombre: msgext-products
    3. Tipo de túnel: temporal
    4. Acceso: público
  3. Para crear el túnel, seleccione Aceptar. Se muestra un mensaje que indica que el nuevo túnel es ahora el túnel activo actual.
  4. Cierre el símbolo del sistema seleccionando Aceptar.

Preparación de recursos

Con todo ahora en su lugar, con el kit de herramientas de Teams, ejecute el proceso Preparar dependencias de aplicaciones de Teams para crear los recursos necesarios.

Captura de pantalla del menú del kit de herramientas de Teams expandido en Visual Studio.

El proceso Preparar dependencias de aplicaciones de Teams actualiza las variables de entorno BOT_ENDPOINT y BOT_DOMAIN en teamsApp\env\.env.local mediante la dirección URL del túnel de desarrollo activa y ejecuta las acciones descritas en el archivo TeamsApp\teamsapp.local.yml .

Dedique un momento a explorar los pasos del archivo teamsapp.local.yml .

Continuar en Visual Studio:

  1. Abra el menú Proyecto (también puede seleccionar con la derecha el proyecto TeamsApp en el Explorador de soluciones), expanda el menú Kit de herramientas de Teams y seleccione Preparar dependencias de aplicaciones de Teams.
  2. En el cuadro de diálogo Cuenta de Microsoft 365, inicie sesión en o seleccione una cuenta existente para acceder a su inquilino de Microsoft 365 y, a continuación, seleccione Continuar.
  3. En el cuadro de diálogo Aprovisionar , inicie sesión o seleccione una cuenta existente que se usará para implementar recursos en Azure y especifique los valores siguientes:
    1. Nombre de suscripción: use la lista desplegable para seleccionar una suscripción.
    2. Grupo de recursos: seleccione Nuevo... para abrir un cuadro de diálogo, en el cuadro de texto, escriba rg-msgext-products-local y seleccione Aceptar.
    3. Región: use la lista desplegable para seleccionar la región más cercana a usted.
  4. Para crear los recursos en Azure, seleccione Aprovisionar.
  5. En el aviso de advertencia del kit de herramientas de Teams, seleccione Aprovisionar.
  6. En el símbolo del sistema de información del kit de herramientas de Teams, seleccione Ver recursos aprovisionados para abrir una nueva ventana del explorador.

Tómese un momento para explorar los recursos creados en Azure y ver también las variables de entorno creadas en el archivo .env.local .

Nota:

Al cerrar y volver a abrir Visual Studio, la dirección URL del túnel de desarrollo cambiará y ya no se seleccionará como túnel activo. Si esto sucede, tendrá que volver a seleccionar el túnel y ejecutar el proceso Preparar dependencias de aplicaciones de Teams para reflejar la dirección URL actualizada en el manifiesto de la aplicación.

Ejecución y depuración

Teams Toolkit usa perfiles de inicio de varios proyectos. Para ejecutar el proyecto, debe habilitar una característica de vista previa en Visual Studio.

En Visual Studio:

  1. Abra el menú Herramientas y seleccione Opciones...
  2. En el cuadro de búsqueda, escriba multiproyecto.
  3. En Entorno, seleccione Características en versión preliminar.
  4. Active la casilla situada junto a Habilitar perfiles de inicio de varios proyectos y seleccione Aceptar para guardar los cambios.

De forma predeterminada, Visual Studio abrirá una ventana del explorador con el perfil principal de Microsoft Edge. Si decide usar una cuenta de Microsoft 365 durante el proceso Preparar dependencias de aplicaciones de Teams que sea diferente a la cuenta que usa en el perfil principal, se recomienda configurar Visual Studio para iniciar una ventana del explorador que use un perfil específico de Microsoft Edge. Esto garantiza que se usa la cuenta correcta y el inquilino de Microsoft 365 al probar la aplicación.

Para configurar Visual Studio para usar un perfil específico de Microsoft Edge:

En Microsoft Edge:

  1. Cambie al perfil que desea usar o cree un perfil nuevo.
  2. Vaya a edge://version y anote el valor de ProfilePath . Si la ruta de acceso del perfil es C:\Users\user\AppData\Local\Microsoft\Edge\User Data\Profile1, profile 1 es el nombre del directorio del perfil.
  3. Copie el nombre del directorio del perfil, por ejemplo, Perfil 1.

En Visual Studio:

  1. En la barra de herramientas, seleccione la lista desplegable junto al botón Inicio , seleccione Examinar con...

  2. Seleccione Agregar...

  3. En el cuadro de diálogo Agregar programa, especifique los valores siguientes:

    1. Programa: C:\Archivos de programa (x86)\Microsoft\Edge\Application\msedge.exe
    2. Argumentos: --profile-directory="Profile 1", reemplazando profile 1 por el nombre del directorio del perfil que desea usar.
    3. Nombre descriptivo: Microsoft Edge (nombre del perfil), reemplazando Nombre de perfil por el nombre del perfil que desea usar.

  4. Seleccione Aceptar.

  5. Seleccione Establecer como predeterminado y, a continuación, seleccione Cancelar.

Para iniciar una sesión de depuración e instalar la aplicación en Microsoft Teams:

  1. Presione F5 o seleccione Iniciar en la barra de herramientas.
  2. Espere hasta que se abra una ventana del explorador y aparezca el cuadro de diálogo de instalación de la aplicación en el cliente web de Microsoft Teams. Si se le solicita, escriba las credenciales de la cuenta de Microsoft 365.
  3. En el cuadro de diálogo de instalación de la aplicación, seleccione Agregar.

Para probar la extensión del mensaje:

  1. Abrir un chat de Microsoft Teams nuevo o existente
  2. En el área de redacción de mensajes, seleccione + para abrir el selector de aplicaciones.
  3. En la lista de aplicaciones, seleccione Productos de Contoso para abrir la extensión de mensaje.
  4. En el cuadro de texto, escriba hello
  5. Esperar a que aparezcan los resultados de la búsqueda
  6. En la lista de resultados, seleccione hello para insertar una tarjeta en el cuadro de mensaje de redacción.

Captura de pantalla de los resultados de búsqueda devueltos por una extensión de mensaje basada en búsqueda en Microsoft Teams.

Vuelva a Visual Studio y seleccione Detener en la barra de herramientas o presione Mayús + F5 para detener la sesión de depuración.