Compartir vía


Crear una nueva aplicación de Teams

En esta sección, puede aprender a crear un nuevo proyecto de Microsoft Teams mediante Microsoft Visual Studio Code.

Creación de un proyecto de Teams con Visual Studio Code

Puede crear un nuevo proyecto de Teams seleccionando Crear una nueva aplicación en microsoft Teams Toolkit. Puede empezar desde plantillas de aplicación de Teams integradas o empezar por ejemplos oficiales de aplicaciones de Teams en Teams Toolkit. Además, Teams Toolkit admite para empezar con plantillas de complementos de Outlook para crear sus propios complementos de Outlook.

Captura de pantalla que muestra las opciones de funcionalidad de la aplicación.

Para empezar con las funcionalidades de Teams, puede crear los siguientes tipos de aplicación de Teams:

Tipos de aplicación Definición
Aplicaciones de Teams basadas en escenarios Este grupo de plantillas está diseñado para escenarios empresariales abstractos concretos para los que la aplicación de teams puede servir. Por ejemplo, bot de notificación, bot de comandos, pestaña habilitada para SSO o aplicación de pestaña Panel.
Aplicaciones básicas de Teams Las aplicaciones básicas de Teams son solo una pestaña, un bot o una extensión de mensaje de Teams de hola mundo que puede crear y personalizar según sus necesidades.
Extensión de la aplicación teams en Microsoft 365 Este grupo de aplicaciones de Teams se puede instalar y ejecutar en Outlook y Office.com.

Crear una nueva aplicación de Teams

El proceso para crear una nueva aplicación de Teams es similar para todos los tipos de aplicaciones.

Para crear una aplicación básica de Teams:

  1. Abra Visual Studio Code.

  2. Seleccione el kit de herramientas de> TeamsCrear una nueva aplicación.

    Captura de pantalla que muestra el botón Crear nuevo proyecto en la barra lateral del kit de herramientas de Teams.

  3. En este ejemplo, seleccione Pestaña como funcionalidad de aplicación.

    Captura de pantalla que muestra la funcionalidad de la aplicación que se va a seleccionar.

  4. Seleccione Pestaña Básica como funcionalidad de la aplicación.

    Captura de pantalla que muestra la opción para seleccionar Característica de aplicación mediante una pestaña como pestaña Básica.

  5. Seleccione JavaScript como lenguaje de programación.

    Captura de pantalla que muestra el lenguaje de programación que se va a seleccionar.

  6. Seleccione Carpeta predeterminada para almacenar la carpeta raíz del proyecto en la ubicación predeterminada.

    Captura de pantalla que muestra la opción de ubicación predeterminada que se va a seleccionar.

    Aprenda a cambiar la carpeta predeterminada:
    1. Seleccione Examinar.

      Captura de pantalla que muestra la opción Examinar resaltada para buscar almacenamiento.

    2. Seleccione la ubicación del área de trabajo del proyecto.

      Captura de pantalla que muestra la opción Seleccionar carpeta resaltada.

    La carpeta que seleccione es la ubicación del área de trabajo del proyecto.

    1. Escriba un nombre adecuado para la aplicación, como helloworld, como nombre de la aplicación. Asegúrese de usar solo caracteres alfanuméricos. Presione Entrar.

    Captura de pantalla que muestra dónde escribir el nombre de la aplicación.

    La aplicación de pestaña Teams se crea en unos segundos.

    Captura de pantalla que muestra la aplicación creada.

Estructura de directorios para diferentes tipos de aplicaciones

Teams Toolkit proporciona todos los componentes para crear una aplicación. Después de crear el proyecto, puede ver las carpetas y los archivos del proyecto en la sección EXPLORER .


Estructura de directorios para la aplicación básica de Teams

En el ejemplo siguiente se muestra una estructura básica de directorios de aplicación de pestaña de Teams:

Nombre de la carpeta Contenido
.vscode Configuración de VS Code para compilar y depurar la aplicación de Teams.
appPackage Archivo de manifiesto de aplicación (anteriormente denominado manifiesto de aplicación de Teams) y archivos de icono que Teams usó para reconocer la aplicación de Teams.
env Almacena diferentes parámetros de entorno.
infra Archivos de plantilla de Azure bicep . Se usa para implementar la aplicación de Teams en Azure.
src Código fuente para la funcionalidad Tab, incluida la aplicación front-end, los componentes de la interfaz de usuario y el aviso de privacidad, los términos de uso,
src/app.js Punto de entrada de la aplicación y restify controladores para el sitio web.
src/views/hello.html Plantilla HTML que se enlaza al punto de conexión de pestaña.
src/static El servidor web puede proporcionar recursos estáticos, como archivos CSS y JavaScript.
teamsapp.yml Este archivo de configuración define el comportamiento del kit de herramientas de Teams para el ciclo de vida de aprovisionamiento, implementación y publicación. Puede personalizar este archivo para cambiar el comportamiento del kit de herramientas de Teams en cada ciclo de vida.
teamsapp.local.yml Esto invalida teamsapp.yml con acciones que permiten la ejecución y depuración locales.

Nota:

Si tiene una aplicación de extensión de bot o mensaje, las carpetas pertinentes se agregan a la estructura de directorios.

Para obtener más información sobre la estructura de directorios de diferentes tipos de aplicaciones básicas de Teams, consulte la tabla siguiente:

Tipo de aplicación Vínculos
Para la aplicación de pestaña Cree su primera aplicación de pestaña con JavaScript
Para la aplicación bot Cree su primera aplicación de bot con JavaScript
Para la aplicación de extensión de mensaje Cree su primera aplicación de extensión de mensajes con JavaScript

Estructura de directorios para una aplicación de Teams basada en escenarios

En el ejemplo siguiente se muestra una estructura de directorio de la aplicación teams del bot de notificación basado en escenarios:

La nueva carpeta del proyecto contiene el siguiente contenido:

Nombre de la carpeta Contenido
.vscode Configuración de VS Code para compilar y depurar la aplicación de Teams.
appPackage El archivo de manifiesto de la aplicación y los archivos de icono que Teams usó para reconocer la aplicación de Teams.
env Almacena diferentes parámetros de entorno.
infra Archivos de plantilla de Azure bicep . Se usa para implementar la aplicación de Teams en Azure.
teamsapp.yml Este archivo de configuración define el comportamiento del kit de herramientas de Teams para el ciclo de vida de aprovisionamiento, implementación y publicación. Puede personalizar este archivo para cambiar el comportamiento del kit de herramientas de Teams en cada ciclo de vida.
teamsapp.local.yml Esto invalida teamsapp.yml con acciones que permiten la ejecución y depuración locales.

La implementación de notificación principal se almacena en la carpeta src y contiene:

Nombre de archivo Contenido
src\adaptiveCards\ Plantillas para tarjeta adaptable.
src\internal\ Código de inicialización generado para la funcionalidad de notificación.
src\index.ts Punto de entrada para controlar los mensajes del bot y enviar notificaciones.
.gitignore Archivo para excluir archivos locales del proyecto de bot.
package.json El archivo de paquete npm para el proyecto de bot.

Nota:

Si tiene un bot de comandos, un bot de flujo de trabajo, una pestaña habilitada para SSO o una aplicación de pestaña SPFx, las carpetas pertinentes se agregan a la estructura de directorios.

Para más información sobre la estructura de directorios de diferentes tipos de aplicaciones de Teams basadas en escenarios, consulte la tabla siguiente:

Tipo de aplicación Vínculos
Para la aplicación de bot de notificación Enviar notificación a Teams
Para la aplicación de bot de comandos Crear un bot de comandos
Para la aplicación de bot de flujo de trabajo Creación de un bot de flujo de trabajo de Teams
Para la aplicación de pestaña SPFx Crear una aplicación Teams con SPFx

Vea también