Compilación de la primera aplicación con Node.js

Inicie el desarrollo de aplicaciones de Microsoft Teams mediante la creación de la primera aplicación con una pestaña, un bot y una funcionalidad de extensión de mensaje.

Esta aplicación tiene todas las funcionalidades y cada una tiene su propia interfaz de usuario y experiencia de usuario:

En este tutorial, aprenderá lo siguiente:

• Cómo configurar un nuevo proyecto mediante herramientas de línea de comandos.
• Cómo crear tres aplicaciones con una funcionalidad diferente cada una: pestaña, bot y extensión de mensaje.
• Cómo implementar la aplicación desde el Portal para desarrolladores.

Requisitos previos

• 4 minutos restantes

Esta es una lista de herramientas que necesitará instalar para compilar e implementar una aplicación de Teams.

Comprobación de los números de versión de las herramientas instaladas

Use los siguientes comandos para comprobar que las versiones instaladas para las herramientas son las necesarias.

Para comprobar los números de versión de las herramientas instaladas:

1. Abra una ventana de terminal.

2. Ejecute el siguiente comando para comprobar la versión instalada en el git equipo:

   $ git --version
   

   Ejemplo de salida: git version 2.19.0.windows.1

3. Ejecute el siguiente comando para comprobar la node.js versión:

   $ node -v
   

   Ejemplo de salida: v8.9.3

4. Compruebe el número de versión de npm:

   $ npm -v
   

   Ejemplo de salida: 5.5.1

5. Compruebe el número de versión de gulp:

   $ gulp -v
   

   Ejemplo de salida: CLI version 2.3.0

   Local version 4.0.2

6. Ejecute el siguiente comando para comprobar el número de versión de Visual Studio Code:

   code --version
   

   Ejemplo de salida: 1.28.2

   929bacba01ef658b873545e26034d1a8067445e9

Puede usar una versión diferente de estas aplicaciones sin ningún problema.

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.

Habilitar la opción de 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.

¿Ya tiene un inquilino y tiene acceso de administrador? ¡Vamos a comprobar si realmente lo haces!

Compruebe si puede cargar una aplicación personalizada en Teams:

1. En el cliente de Teams, seleccione El icono de la Tienda .

2. Seleccione Administrar las aplicaciones.

3. Busque la opción Cargar una aplicación personalizada. Si ve la opción , la carga de aplicaciones personalizada está habilitada.

   

   Nota:

   Si Teams no muestra la opción de cargar una aplicación personalizada, póngase en contacto con el administrador de Teams.

Creación de un inquilino para desarrolladores de Teams gratuito

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

1. Vaya al programa para desarrolladores de Microsoft 365.

2. Seleccione Unirse ahora y siga las instrucciones en pantalla.

3. En la pantalla de bienvenida, seleccione Configurar suscripción A5.

4. Configure su cuenta de administrador. Cuando haya terminado, aparecerá la siguiente pantalla.

   

5. 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 y configura sus cuentas. A continuación, vamos a configurar el entorno de desarrollo y empezar a compilar.

Puede seguir usando esta ventana de terminal para ejecutar los comandos que se indican a continuación en este tutorial.

Descargar el ejemplo

Para este tutorial, use el ejemplo Hello, World! para empezar. Puede descargarlo y clonarlo desde GitHub.

Para usar Git Bash para clonar el repositorio de ejemplo:

1. Abra una ventana de terminal.

2. Ejecute el siguiente comando para clonar el repositorio de ejemplo en el equipo:

   git clone https://github.com/OfficeDev/Microsoft-Teams-Samples.git
   

Compilación de la primera aplicación de Node.js

• 3 minutos restantes

Después de clonar el repositorio para Node.js aplicación de ejemplo, puede compilar y probar la aplicación en el entorno local.

En esta página, aprenderá a:

1. Compilación y ejecución de la primera aplicación
2. Prueba de la aplicación de ejemplo

Compilar y ejecutar el ejemplo

Una vez clonado el repositorio, puede compilar la aplicación de ejemplo.

1. Abra una ventana de terminal.

2. Ejecute el comando change directory en el terminal para cambiar al directorio de la aplicación de ejemplo:

   cd Microsoft-Teams-Samples/samples/app-hello-world/nodejs/
   

3. Instale todas las dependencias mediante el siguiente comando:

   npm install
   

   Debería ver un montón de dependencias instaladas.

4. Ejecute la aplicación con el siguiente comando una vez completada la instalación:

   npm start
   

   Cuando se inicia la aplicación Hello World, se muestra App started listening on port 3333 en la ventana del terminal.

   Nota:

   Si ve un número de puerto diferente en el mensaje anterior, se debe a que tiene establecida una variable de entorno PORT. Puede seguir usando ese puerto o cambiar la variable de entorno a 3333.

5. Abra una ventana del explorador y use las siguientes direcciones URL para comprobar que se cargan todas las direcciones URL de la aplicación Hello World:

   • http://localhost:3333

     

   • http://localhost:3333/hello

     

   • http://localhost:3333/first

     

   • http://localhost:3333/second

     

Prueba de la aplicación de ejemplo en el entorno local

Recuerde que las aplicaciones de Microsoft Teams son aplicaciones web que exponen una o varias funcionalidades. Haga que la aplicación esté disponible en Internet para que la plataforma teams pueda cargarla. Para que la aplicación sea accesible desde Internet, debe hospedarla .

Para las pruebas locales, puede ejecutar la aplicación en el equipo local y crear un túnel con un punto de conexión web. ngrok es una herramienta gratuita que te permite hacer eso. Con ngrok, puede obtener una dirección web como https://d0ac14a5.ngrok.io (esta dirección URL es solo un ejemplo). Puede descargar e instalarngrok para su entorno. Asegúrese de agregarlo a una ubicación en .PATH

Creación de un túnel ngrok

Después de instalar ngrok, puede crear un túnel para implementar la aplicación localmente.

1. Abra una nueva ventana de terminal.

2. Ejecute el siguiente comando para crear un túnel. La aplicación de ejemplo usa el puerto 3333:

   ngrok http 3333 --host-header=localhost:3333
   

   Se crea un túnel ngrok. Este es un ejemplo de túnel ngrok.

   

   Ngrok escucha las solicitudes de Internet y las enruta a la aplicación que se ejecuta en el puerto 3333.

Para comprobar la implementación local de la aplicación:

1. Abra el explorador.

2. Cargue la aplicación con la siguiente dirección URL:

   https://<forwarding address in ngrok console session>/

   Este es un ejemplo de la dirección URL:

   

   Puede intentar agregar hello, firsto second a la dirección URL del túnel de ngrok para ver diferentes páginas de pestaña de la aplicación.

   Ngrok escucha las solicitudes de Internet y las enruta a la aplicación que se ejecuta en el puerto 3333.

3. Anote la dirección de reenvío en la consola de ngrok. Necesita esta dirección URL para implementar la aplicación en Teams.

   Nota:

   Si usó un puerto diferente durante la compilación y ejecución, asegúrese de usar el mismo número de puerto para configurar el túnel ngrok .

   Sugerencia

   Es una buena idea ejecutar ngrok en una ventana de terminal diferente para mantenerla en ejecución sin interferir con la aplicación de nodo, que es posible que más adelante tenga que detener, recompilar y volver a ejecutar. La sesión de ngrok devuelve información de depuración útil en esta ventana. La versión de pago de ngrok permite nombres persistentes.

   Importante

   Si usa la versión gratuita de ngrok, la aplicación solo estará disponible durante la sesión actual en el equipo de desarrollo. No está disponible si la máquina se apaga o deja de funcionar. Al reiniciar el servicio, devuelve una nueva dirección. A continuación, debe actualizar todas las ubicaciones que usen la dirección obsoleta. Recuerde este paso al compartir la aplicación para realizar pruebas.

Compilación Node.js paquete de la aplicación

Puede usar gulp CLI para compilar el paquete de la aplicación para Node.js.

1. Abra una ventana de terminal.

2. Asegúrese de que se encuentra en el directorio donde node.js se clona. Esta es la carpeta donde gulpfile.js se coloca.

3. Ejecute el siguiente comando para compilar el paquete de la aplicación Node.js.

   $ gulp

   Este es un ejemplo de la salida del comando:

   [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

   Se crea el helloworldapp.zip del paquete de la aplicación. Puede encontrar el archivo de paquete en la siguiente ruta de acceso.

   <path to the cloned repo>/Microsoft-Teams-Samples/samples/app-hello-world/nodejs/manifest

   Nota:

   Busque el archivo del paquete de la aplicación, helloworldapp.zip, si la ubicación no está clara en la herramienta que usa.

Configuración de la primera aplicación de Node.js mediante el Portal para desarrolladores

• 2 minutos restantes

Puede usar el Portal para desarrolladores para cargar el paquete de la aplicación en Teams y configurar las funcionalidades de la aplicación. Portal para desarrolladores es una aplicación de Teams que simplifica la creación y el registro de una aplicación. ¡Instala desde la Tienda Teams!

Después de compilar y probar la aplicación de Teams, puede configurarla y obtener una vista previa de ella mediante el Portal para desarrolladores.

La actualización del paquete de la aplicación incluye:

1. Importación del paquete de la aplicación en el Portal para desarrolladores
2. Configuración de las funcionalidades de la aplicación

Importación del paquete de la aplicación en el Portal para desarrolladores

Para importar el paquete de la aplicación:

1. Abra Microsoft Teams.

2. Seleccione el icono De la Tienda en la barra izquierda.

3. Busque Portal para desarrolladores en la barra de búsqueda y seleccione Portal para desarrolladores*.

   

4. Seleccione Abrir.

   

   Se abre el Portal para desarrolladores.

5. Seleccione la pestaña Aplicaciones .

   

6. Seleccione Importar aplicación.

   

7. Abra el paquete helloworldapp.zip de la aplicación desde la siguiente ruta de acceso en la estructura de directorios del repositorio de ejemplo de C#:

   <path to cloned node.js sample repo>\Source\Repos\Microsoft-Teams-Samples\samples\app-hello-world\nodejs\manifest

   La aplicación Hello World se importa en el Portal para desarrolladores.

   

   Después de importar la aplicación al Portal para desarrolladores, puede ver sus detalles en el Portal para desarrolladores.

Realice un recorrido por la aplicación en el Portal para desarrolladores.

Después de importar la aplicación al Portal para desarrolladores, puede ver sus detalles, incluido el archivo de manifiesto.

Visualización de la información de la aplicación

1. Seleccione Información básica en el panel izquierdo del Portal para desarrolladores.

   

2. Tenga en cuenta la siguiente información de la información básica:

   • Identificador de la aplicación
   • Información para desarrolladores
   • Direcciones URL de la aplicación

3. Seleccione Personalización de marca en el panel izquierdo para ver la información de personalización de marca.

   

   Estos detalles son importantes si va a escribir una nueva aplicación para su distribución.

Visualización de las características de la aplicación

• Seleccione Características de la aplicación en el panel izquierdo del Portal para desarrolladores.

  Las características de la aplicación aparecen en el panel derecho. Puede ver tarjetas para la aplicación personal, el bot y la extensión de mensaje.

  

Visualización del manifiesto de la aplicación

El archivo de manifiesto se usa para configurar funcionalidades, recursos necesarios y otros atributos importantes para la aplicación.

• Seleccione Publicar en el panel izquierdo para abrir la lista desplegable y, a continuación, seleccione Paquete de aplicación.

  El manifiesto de la aplicación aparece en el panel derecho.

  

  El archivo de manifiesto aparece en el panel derecho.

Configuración de las funcionalidades de la aplicación

Después de importar la aplicación en el Portal para desarrolladores, el siguiente paso es configurar las funcionalidades de la aplicación. El Portal para desarrolladores contiene toda la información de la aplicación en diferentes secciones. Facilita la configuración de las funcionalidades de la aplicación.

Con el Portal para desarrolladores, puede hacer lo siguiente:

1. Configurar la aplicación de pestaña personal.
2. Configuración del bot.
3. Configure la extensión de mensaje.

Configuración de la aplicación de pestaña personal

Para configurar la aplicación de pestaña personal:

1. Seleccione el icono de la tarjeta Aplicación personal en el panel Características de la aplicación y seleccione Editar.

   Aparecen los detalles de la pestaña Hola.

2. Seleccione el icono de la pestaña Hola y seleccione Editar para abrir los detalles de la aplicación para actualizar.

   

3. Escriba los detalles de la aplicación para la pestaña Hola en Agregar una pestaña a la aplicación personal.

   

   Escriba los detalles siguientes:

   • Nombre: pestaña Hola.
   • Dirección URL de contenido y dirección URL del sitio web: la dirección de reenvío en la sesión de consola de ngrok.
   • Contexto: seleccione la pestaña Personal.

4. Seleccione Actualizar.

   Los detalles de la pestaña Hola aparecen en el panel Aplicación personal .

5. Haga clic en Guardar.

   

   El panel Aplicación personal ahora muestra la nueva pestaña y una pestaña Acerca de creada automáticamente.

   

Configuración del bot

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 del ejemplo, pero debe registrarlo en Teams.

El bot que se importó desde el ejemplo no tiene un identificador de aplicación asociado. Tendrá que eliminarlo y crear un nuevo bot. El Portal para desarrolladores crea un nuevo identificador de aplicación y lo registra en Teams.

La adición y configuración de un bot implica lo siguiente:

1. Agregar un nuevo bot.
2. Agregar bot a la aplicación.
3. Configuración del ámbito del bot.

Para agregar un nuevo bot

1. Seleccione el icono de la tarjeta Bot en el panel Características de la aplicación y seleccione Eliminar.

2. Seleccione Herramientas para agregar funcionalidad.

   

3. Seleccione Administración de bots en el panel Herramientas .

   

4. Seleccione + Nuevo bot en el panel Administración de bots .

   

5. Escriba un nombre adecuado para el bot y seleccione Agregar.

   

   Aparece el panel Configurar que muestra los detalles del nuevo bot en el panel izquierdo.

6. Escriba la dirección URL de reenvío desde la ngrok consola y seleccione Guardar.

   

7. Seleccione Secretos de cliente y, a continuación, seleccione Agregar un secreto de cliente al bot para generar una contraseña para el bot.

   

   El Portal para desarrolladores genera una contraseña para el bot.

   Puede usar el icono para copiar la contraseña. En este tutorial, no es necesario copiarlo.

   

8. Seleccione Aceptar.

9. Seleccione < Bots para volver al panel Administración de bots .

   En el panel Administración de bots se muestra el nuevo bot agregado con un identificador de aplicación.

   

10. Asegúrese de guardar el identificador del bot junto con la contraseña de la sección Secreto de cliente .

Para agregar bot a la aplicación

1. Abra el panel Características de la aplicación y seleccione la tarjeta Bot .

   

   Aparece el panel Bot .

2. Seleccione la aplicación de bot en Seleccionar un bot existente y seleccione Guardar.

   

   El nuevo bot se agrega a la aplicación con su propio identificador de aplicación.

   

Para configurar el ámbito del bot

1. Seleccione el icono en la nueva tarjeta Bot y seleccione Editar.

2. Seleccione los tres ámbitos del comando en la página Bot .

   

3. Vaya al panel Bot para ver la sección Comandos y seleccione + Agregar un comando.

   

4. Escriba un nombre y una descripción adecuados, seleccione los tres ámbitos del comando y seleccione Agregar.

   • Personal
   • Team
   • Chat en grupo

   

   El nuevo comando se agrega a la sección Comandos del panel Bot .

5. Haga clic en Guardar.

   

   Se guardan los detalles del comando.

   

6. Abra el panel Características de la aplicación y seleccione Tarjeta de aplicación personal para ver los detalles de la pestaña de la aplicación.

   Verá que se agrega una pestaña para el nuevo bot de chat a la aplicación.

   

Configuración de la extensión de mensaje

Las extensiones de mensaje 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 mensaje aparecen en la parte inferior del cuadro de redacción.

Para agregar una nueva extensión de mensaje:

1. Seleccione el icono de la tarjeta Extensión de mensaje en el panel Características de la aplicación y seleccione Eliminar.

2. Seleccione Extensión de mensaje en el panel Características de la aplicación .

3. Seleccione el nombre de la aplicación de bot en la lista desplegable Seleccionar un bot existente en el panel Extensión de mensaje.

   

4. Haga clic en Guardar.

   

   La extensión de mensaje se guarda y la sección Comandos aparece en el panel Extensión de mensaje.

5. Seleccione + Agregar un comando para definir el ámbito de lo que puede hacer la aplicación de extensión de mensajes.

   

   Cuadro de diálogo Agregar un comando .

6. Asegúrese de que La búsqueda está seleccionada como el tipo de comando que desea agregar en el cuadro de diálogo Agregar un comando .

   

7. Escriba la información adecuada para los detalles siguientes:

   • Identificador de comando
   • Título del comando
   • Descripción del comando

8. Desplácese por el cuadro de diálogo para ver los detalles restantes.

   

9. Asegúrese de que la opción Make default (Establecer valor predeterminado ) esté seleccionada.

10. Seleccione los siguientes contextos para el comando de extensión de mensaje:

    • Cuadro de comandos
    • Cuadro Redactar
    • Mensaje

11. Escriba la información adecuada para los detalles siguientes:

    • Nombre del parámetro
    • Título del parámetro
    • Descripción del parámetro

12. Seleccione Texto como tipo de entrada.

13. Haga clic en Guardar.

14. El comando de extensión de mensaje se guarda y se muestra en la lista de comandos en el panel Extensión de mensaje.

    

15. Haga clic en Guardar.

16. Abra el panel Características de la aplicación .

    

    Verá las tres funcionalidades (aplicación de pestaña personal, bot y extensión de mensaje) configuradas para la aplicación Hello World.

Vista previa y prueba de la aplicación de Node.js

• 100 % completado.

Después de importar la aplicación y configurar las funcionalidades en el Portal para desarrolladores, puede obtener una vista previa y probar la aplicación de ejemplo.

Después de configurar las funcionalidades de la aplicación, puede obtener una vista previa y probar la aplicación en Teams en el entorno local.

Para obtener una vista previa de la aplicación:

1. Seleccione Vista previa en Teams en la barra de herramientas del Portal para desarrolladores.

   

   El Portal para desarrolladores le informa de que la aplicación personalizada se ha cargado correctamente.

2. Seleccione Administrar las aplicaciones. La aplicación aparece en las aplicaciones cargadas.

3. Busque la aplicación mediante el cuadro de búsqueda y seleccione los tres puntos de su fila.

4. Seleccione la opción Ver . Aparece la página Agregar de la aplicación.

5. Seleccione Agregar para cargar la aplicación en Teams.

   

   La aplicación ya está disponible en Teams. Puede ver todas las pestañas y probar las funcionalidades:

   • Pestaña Hola:

     

   • Bot de chat:

     

     Puede enviar un mensaje mediante el chat.

     

   • Extensión de mensaje:

     

     Puede probar una búsqueda mediante la extensión de mensaje.

     

   • Pestaña Acerca de: