Ejercicio: Creación de recursos de Azure para hospedar una aplicación de pestaña de Teams

  • 8 minutos

En este ejercicio, primero creará y aprovisionará una aplicación de pestaña de Teams mediante el kit de herramientas de Teams para Visual Studio Code. En un ejercicio posterior, configurará la aplicación para que se hospede en Azure.

Nota:

Los ejercicios de este módulo de entrenamiento usan Teams Toolkit v5.0.0. Los pasos siguientes comienzan con la extensión kit de herramientas de Teams instalada.

Creación de una nueva aplicación de pestaña

  1. En Visual Studio Code, en la barra de actividad, seleccione el icono de Microsoft Teams.

  2. En el panel Kit de herramientas de Teams, seleccione el botón Crear una nueva aplicación .

  3. En las opciones, seleccione Pestaña.

    Captura de pantalla de la opción Kit de herramientas de Teams para tabular aplicación.

  4. A continuación, seleccione React con la interfaz de usuario de Fluent.

    Captura de pantalla de la plantilla de aplicación kit de herramientas de Teams con la pestaña seleccionada.

  5. En las opciones del lenguaje de programación, seleccione JavaScript.

  6. Seleccione una ubicación para la carpeta del proyecto de aplicación de pestaña y todos sus archivos.

  7. Para el nombre de la aplicación, escriba hello-tab y seleccione Entrar.

    Comienza el scaffolding del proyecto. Cuando se aplica scaffolding al proyecto, se abre una nueva ventana de Visual Studio Code con el nuevo proyecto cargado.

    Captura de pantalla del nuevo proyecto de pestaña del kit de herramientas de Teams después de que se haya aplicado scaffolding.

  8. En Visual Studio Code, seleccione Ejecutar>inicio de depuración o seleccione la tecla F5 para iniciar la sesión de depuración.

    Visual Studio Code compila e inicia la aplicación. Ejecute la sesión de depuración antes de empezar a aprovisionar los recursos de Azure.

  9. Cuando la aplicación se pruebe correctamente, deje de ejecutarla localmente.

    Para finalizar la sesión de depuración y dejar de ejecutar la aplicación, puede cerrar el explorador, seleccionar Ejecutar>detener depuración o mayús+F5.

Inicio de sesión en Azure en el kit de herramientas de Teams

A continuación, en el panel Kit de herramientas de Teams, inicie sesión en Azure.

  1. En la barra de actividad, seleccione el icono de Microsoft Teams .

  2. En el panel Kit de herramientas de Teams, en Cuentas, seleccione Iniciar sesión en Azure.

    Captura de pantalla del panel Kit de herramientas de Teams con el botón para iniciar sesión en Azure.

  3. En el cuadro de diálogo que aparece, seleccione Iniciar sesión.

    Captura de pantalla de un cuadro de diálogo para confirmar el inicio de sesión en Azure.

Aprovisionamiento de los recursos

Ahora puede aprovisionar los recursos que necesita la aplicación de pestaña de Teams.

  1. En el panel Kit de herramientas de Teams, en Ciclo de vida, seleccione Aprovisionar.

    Captura de pantalla que resalta la opción de aprovisionamiento en la nube en la sección de implementación.

  2. A continuación, debe seleccionar un grupo de recursos donde pueda aprovisionar los recursos. Cree un nuevo grupo de recursos seleccionando la opción Nuevo grupo de recursos en el menú Seleccionar un grupo de recursos .

    Captura de pantalla que muestra cómo crear un nuevo grupo de recursos.

  3. La herramienta sugiere automáticamente el nombre del grupo de recursos, como rg-hello-tab0989fd-dev. Seleccione Introducir.

  4. A continuación, seleccione la ubicación Este de EE. UU . para el nuevo grupo de recursos y seleccione Entrar.

  5. En un cuadro de diálogo para confirmar la selección, seleccione Aprovisionar.

    Captura de pantalla del cuadro de diálogo para confirmar el aprovisionamiento.

    El aprovisionamiento comienza para todos los recursos que necesita para hospedar la aplicación de pestaña Teams en Azure. El aprovisionamiento puede tardar un tiempo.

Ahora ha aprovisionado correctamente todos los recursos que necesita para hospedar la aplicación de pestaña de Teams.

A continuación, implementará el código fuente de la aplicación en estos recursos.