Actualizar Node.js de la aplicación en App Studio

Sugerencia

Pruebe el Portal para desarrolladores: App Studio ha evolucionado. Configure, distribuya y administre las aplicaciones Teams con el nuevo Portal de desarrolladores.

App Studio es una Teams que puedes instalar desde la Teams tienda. Simplifica la creación y el registro de una aplicación.

Siga estos pasos para actualizar el paquete de la aplicación:

  1. Para instalar App Studio en Teams, selecciona el icono Aplicaciones en la parte inferior de la barra izquierda y busca App Studio:

    Finding App Studio in the Store View
  2. Selecciona el icono de App Studio y elige Instalar. App Studio está instalado:

    Installing App Studio
  3. Para crear el paquete de la aplicación para Teams aplicación, selecciona la pestaña Editor de manifiestos en App Studio:

    App Studio

    El ejemplo viene con su propio manifiesto y está diseñado para crear un paquete de aplicación cuando se crea el proyecto. En Node.js, esto se realiza escribiendo en la línea gulp de comandos del directorio raíz del proyecto.

    Puedes crear el paquete de la aplicación en Node.js escribiendo en la línea gulp de comandos en el directorio raíz del proyecto.

    $ gulp
    [13:39:27] Using gulpfile ~\documents\github\msteams-samples-hello-world-nodejs\gulpfile.js
    [13:39:27] Starting 'clean'...
    [13:39:27] Starting 'generate-manifest'...
    [13:39:27] Finished 'generate-manifest' after 11 ms
    [13:39:27] Finished 'clean' after 21 ms
    [13:39:27] Starting 'default'...
    Build completed. Output in manifest folder
    [13:39:27] Finished 'default' after 62 μs
    

    El nombre del paquete de aplicación generado es helloworldapp.zip. Puede buscar este archivo si la ubicación no está clara en la herramienta que está usando.

  4. Ahora, para modificar este paquete de aplicación, selecciona Importar una aplicación existente en el editor de manifiestos:

    Importing an existing app
  5. Selecciona el icono Hello World para la aplicación recién importada:

    Newly imported app view

    La siguiente imagen muestra el paquete de aplicación importado en App Studio:

    Importing the app package

    En el lado izquierdo del editor de manifiesto hay una lista de pasos. En el lado derecho hay una lista de propiedades que deben rellenarse para cada paso. Al empezar con una aplicación de ejemplo, gran parte de la información ya se ha completado. Los siguientes pasos te permiten actualizar las propiedades de la aplicación Hello World.

Detalles de la aplicación

Seleccione Detalles de la aplicación en Detalles. Selecciona el botón Generar para crear un nuevo identificador de aplicación.

El nuevo identificador de aplicación es similar a 2322041b-72bf-459d-b107-f4f335bc35bd .

Consulta los detalles de la aplicación en el panel derecho, incluida la información del desarrollador y los detalles de personal de marca. Estos detalles son importantes si vas a escribir una nueva aplicación para su distribución.

Pestañas

Es sencillo agregar pestañas a una Teams aplicación. La aplicación de ejemplo ya admite varias pestañas y puedes habilitarlas.

Ficha Equipo

La aplicación solo puede tener una pestaña Equipo:

Adding a Teams tab

En este ejemplo, la pestaña Equipo es donde se muestra la página de configuración. Seleccione el símbolo ... de la dirección URL de configuración tab y elija Editar en el menú desplegable. Cambie la dirección URL a https://yourteamsapp.ngrok.io/configure donde yourteamsapp.ngrok.io debe reemplazarse por la dirección URL que usó al hospedar la aplicación.

Pestañas personales

La aplicación puede tener hasta 16 pestañas, incluida la pestaña Equipo.

Las pestañas personales son diferentes de la pestaña Equipo. Hello Tab ya aparece en la lista de pestañas personales con un valor de marcador de posición com.contoso.helloworld.hellotab . Seleccione el símbolo ... de la dirección URL de configuración tab y elija Editar en el menú desplegable. Aparece el siguiente cuadro de diálogo:

Adding a personal tab dialog

Actualice los siguientes cuadros con la dirección URL de la aplicación:

  • Cambiar el cuadro Dirección URL de contenido a https://yourteamsapp.ngrok.io/hello
  • Cambiar el cuadro Dirección URL del sitio web a https://yourteamsapp.ngrok.io/hello

Reemplace yourteamsapp.ngrok.io por la dirección URL que usó al hospedar la aplicación.

Bots

Es fácil agregar la funcionalidad de bots a la aplicación. La aplicación de ejemplo Hello World ya tiene un bot como parte de la muestra, pero debes registrarlo con Microsoft:

Adding a bot

El bot que se importó desde el ejemplo no tiene un identificador de aplicación asociado. Debes crear un bot nuevo para que App Studio pueda crear un nuevo id. de aplicación y registrarlo con Microsoft.

Nota

El id. de aplicación creado por App Studio para el bot es diferente del id. de aplicación creado para la aplicación. Cada bot de una aplicación requiere su propio identificador de aplicación.

Siga estos pasos para configurar el bot:

  1. Seleccione Eliminar junto al bot importado en la lista de bots. Ahora no quedan bots que mostrar.

  2. Seleccione Configurar para mostrar el cuadro de diálogo Configurar un bot.

    Adding a bot dialog
  3. Agregue un bot name Contoso bot y active las tres casillas en Scope.

  4. Elija Guardar para salir del cuadro de diálogo. App Studio registra el bot con Microsoft y muestra el nuevo bot en la lista de bots.

  5. Ahora abra un archivo de texto en el bloc de notas y copie y pegue el nuevo identificador de bot en él.

  6. Haga clic en Generar nueva contraseña y anote la contraseña en el mismo archivo de texto que anotó el id. de la aplicación del bot.

  7. Actualice la dirección del extremo bot a y reemplace por la dirección URL que https://yourteamsapp.ngrok.io/api/messages yourteamsapp.ngrok.io usó al hospedar la aplicación.

  8. Ahora guarda el archivo de texto, ya que debes agregar la información del archivo a la aplicación hospedada para permitir una comunicación segura con el bot.

Extensiones de mensajería

Las extensiones de mensajería permiten a los usuarios solicitar información del servicio y publicar esa información. La información se publica en forma de tarjetas en la conversación del canal. Las extensiones de mensajería aparecen en la parte inferior del cuadro de redacción.

Siga estos pasos para configurar la extensión de mensajería:

  1. Seleccione Extensiones de mensajería en Funcionalidades en el panel izquierdo de App Studio para configurar la extensión de mensajería:

    Adding a messaging extension

    La extensión de mensajería de ejemplo se muestra en el panel Extensiones de mensajería.

  2. Seleccione Eliminar para quitar la extensión de mensajería, seleccione Configurar y siga los mismos pasos usados para bots. Se muestra el cuadro de diálogo Extensión de mensajería.

  3. Seleccione la pestaña Usar bot existente y Seleccionar de uno de mis bots existentes.

  4. Selecciona el bot que creaste en el menú desplegable. Agregue un nombre bot y seleccione Guardar para cerrar el cuadro de diálogo.

  5. En la sección Comando, seleccione Agregar. Para agregar un comando basado en búsqueda, seleccione la opción Permitir a los usuarios consultar su servicio para obtener información e insertarla en un mensaje.

  6. En el cuadro de diálogo Nuevo comando, escriba los siguientes valores:

    En Nuevo comando:

    • Identificador de comando: escriba texto aleatorio
    • Title: Enter random title
    • Descripción: escriba una descripción aleatoria

    En Parámetro:

    • Nombre: escriba el nombre del parámetro
    • Título: escriba el título de la tarjeta
    • Descripción: escriba la descripción de la tarjeta
  7. Después de escribir la información, seleccione Guardar para cerrar el cuadro de diálogo.

Registrar la aplicación en Teams

Después de especificar los detalles de la aplicación, siga estos pasos para registrar la aplicación en Teams:

  1. Usa Probar y distribuir App Studio para instalar la aplicación en Teams.

  2. Actualice la aplicación hospedada con el identificador de aplicación y la contraseña del bot. Para la aplicación de ejemplo, usa el mismo id. de la aplicación y la misma contraseña para bot y extensión de mensajería.

  3. Seleccione Probar y distribuir en Finalizar en el panel izquierdo de App Studio:

    Testing your app
  4. Para cargar la aplicación en Teams, selecciona el botón Instalar en Probar y distribuir:

    Adding a messaging extension dialog

    Nota

    Si no puedes realizar la instalación local de la aplicación, comprueba si has habilitado la carga personalizada de la aplicación.

  5. Selecciona el cuadro Buscar en la sección Agregar a un equipo y selecciona un equipo para agregar la aplicación de ejemplo. Puede configurar un equipo especial para las pruebas.

  6. Seleccione el botón Instalar en la parte inferior del cuadro de diálogo.

    La aplicación ya está disponible en Teams. Sin embargo, el bot y la extensión de mensajería no funcionarán hasta que actualice el entorno de aplicaciones hospedadas con los IDs y contraseñas de la aplicación.

    The finished app

Actualizar las credenciales de la aplicación hospedada

La aplicación de ejemplo requiere que las siguientes variables de entorno se establezcan en los valores de los que has tomado nota anteriormente:

MICROSOFT_APP_ID=<YOUR BOT'S APP ID>
MICROSOFT_APP_PASSWORD=<YOUR BOT'S PASSWORD>
WEBSITE_NODE_DEFAULT_VERSION=8.9.4

Las variables de entorno forman parte del entorno. Solo el código de la aplicación puede tener acceso a ellos. No están expuestos a terceros.

Si estás ejecutando la aplicación con ngrok, tendrás que configurar variables de entorno local. Puede usar Visual Studio Code para agregar una configuración de inicio:

{
    "type": "node",
    "request": "launch",
    "name": "Launch - Teams Debug",
    "program": "${workspaceRoot}/src/app.js",
    "cwd": "${workspaceFolder}/src",
    "env": {
        "BASE_URI": "https://yourNgrokURL.ngrok.io",
        "MICROSOFT_APP_ID": "00000000-0000-0000-0000-000000000000",
        "MICROSOFT_APP_PASSWORD": "yourBotAppPassword",
        "NODE_DEBUG": "botbuilder",
        "SUPPRESS_NO_CONFIG_WARNING": "y",
        "NODE_CONFIG_DIR": "../config"
    }
}

Donde:

  • Las credenciales de autorización del bot son las siguientes:
    • MICROSOFT_APP_ID es id.
    • MICROSOFT_APP_PASSWORD es contraseña
  • NODE_DEBUG muestra lo que está sucediendo en el bot en la Visual Studio Code de depuración
  • NODE_CONFIG_DIR apunta al directorio en la raíz del repositorio (de forma predeterminada, cuando la aplicación se ejecuta localmente, busca el directorio raíz en la src carpeta).

Nota

Si no has detenido npm desde antes en el tutorial, tendrás que ejecutar para que Visual Studio Code las variables de configuración de npm stop inicio correctamente.

Probar las capacidades de la aplicación en Teams

Después de instalar la aplicación en Teams, debes configurarla para mostrar contenido.

Pruebe la pestaña en Teams

  1. Vaya a un canal de Teams y seleccione el botón '+' para agregar una nueva pestaña.
  2. A continuación, puede Hello World elegir entre la lista Agregar una pestaña.
  3. En el cuadro de diálogo de configuración, seleccione la pestaña que desea mostrar en el canal. A continuación, seleccione Guardar.

Puede ver la Hello World pestaña cargada con la pestaña que eligió:

Screenshot of configure

Pruebe el bot en Teams

Ahora puede interactuar con el bot en Teams. Elige un canal en el equipo donde registraste la aplicación y escribe @your-bot-name , seguido del mensaje. Este tipo de mensaje se denomina @ mención. Cualquier mensaje que envíes al bot se te enviará como respuesta:

Bot responses

Probar la extensión de mensajería

Para probar la extensión de mensajería

  1. Seleccione los tres puntos debajo del cuadro de entrada en la vista de conversación. Se muestra un menú con la aplicación "Hello World".

  2. Seleccione el menú. Se muestra un conjunto de textos aleatorios. Puede seleccionar uno de los textos aleatorios y que se inserta en la conversación.

    Messaging extension menu Messaging extension result
  3. Seleccione uno de los textos aleatorios. La tarjeta con formato aparece lista para enviar con su propio mensaje incluido en la parte inferior:

    Messaging extension send
   
Back