Crear una ficha de canal y de grupo personalizada con ASP.NET Core

En este tutorial rápido, vamos a crear una pestaña de canal o de grupo personalizada con C# y página de Razor ASP.Net Core. También usaremos App Studio para Microsoft Teams para finalizar el manifiesto de la aplicación e implementar la pestaña en Teams.

Requisitos previos

  • Para completar este tutorial, necesitará un inquilino de Office 365 y un equipo configurado con la opción permitir la carga de aplicaciones personalizadas habilitada. Para obtener más información, vea preparar el inquilino de Office 365.

    • Si actualmente no tiene una cuenta de Office 365, puede registrarse para obtener una suscripción gratuita a través del programa de desarrolladores de office 365. La suscripción permanecerá activa siempre que la use para el desarrollo continuado.
  • Usará App Studio para importar la aplicación a Microsoft Teams. Para instalar App Studio, **** seleccione aplicación de la tienda de aplicaciones en la esquina inferior izquierda de la aplicación Teams y busque App Studio. Una vez que encuentre el icono, selecciónelo y elija instalar en el cuadro de diálogo ventana emergente.

Además, este proyecto requiere que tenga instalado lo siguiente en el entorno de desarrollo:

  • La versión actual del IDE de Visual Studio con la carga de trabajo multiplataforma del núcleo de .net instalada. Si todavía no tiene Visual Studio, puede descargar e instalar la versión más reciente de la comunidad de Microsoft Visual Studio Community de forma gratuita.

  • La herramienta de proxy inverso de ngrok . Usará ngrok para crear un túnel a los puntos de conexión HTTPS del servidor Web que se ejecutan de forma local. Puede descargarla aquí.

Obtener el código fuente

Abra un símbolo del sistema y cree un nuevo directorio para el proyecto de pestañas. Proporcionamos un proyecto sencillo para empezar. Para recuperar el código fuente, puede descargar la carpeta ZIP y extraer los archivos o clonar el repositorio de muestra en el nuevo directorio:

git clone https://github.com/OfficeDev/microsoft-teams-sample-tabs.git

Una vez que tenga el código fuente, abra Visual Studio y seleccione abrir un proyecto o solución. Navegue hasta el directorio de la aplicación de la pestaña y Abra ChannelGroupTab. sln.

Para compilar y ejecutar la aplicación, presione F5 o elija iniciar depuración en el menú depurar . En un explorador, navegue a las direcciones URL que aparecen a continuación y compruebe que la aplicación se cargó correctamente:

  • http://localhost:44355
  • http://localhost:44355/privacy
  • http://localhost:44355/tou

Revisar el código fuente

Startup.cs

Este proyecto se creó a partir de una plantilla vacía de la aplicación Web de ASP.NET Core 2,2 con la casilla de verificación Advanced-configure for https seleccionada en la instalación. Los servicios MVC se registran mediante el método del marco ConfigureServices() de inserción de dependencias. Además, la plantilla vacía no habilita el servicio de contenido estático de forma predeterminada, por lo que el middleware de Configure() archivos estáticos se agrega al método:

public void ConfigureServices(IServiceCollection services)
  {
    services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_2);
  }
public void Configure(IApplicationBuilder app)
  {
    app.UseStaticFiles();
    app.UseMvc();
  }

carpeta wwwroot

En ASP.NET Core, la carpeta Web raíz es donde la aplicación busca archivos estáticos.

Index. cshtml

ASP.NET Core trata los archivos denominados index como página principal o predeterminada del sitio. Cuando la dirección URL del explorador apunta a la raíz del sitio, se mostrará index. cshtml como la Página principal de la aplicación.

Tab.cs

Este archivo de C# contiene un método al que se llamará desde Tab. cshtml durante la configuración.

Carpeta AppManifest

Esta carpeta contiene los siguientes archivos de paquete de la aplicación obligatorios:

  • Un icono de color completo que mide 192 x 192 píxeles.
  • Un icono de contorno transparente que mide 32 x 32 píxeles.
  • Un archivo manifest. JSON que especifica los atributos de la aplicación.

Estos archivos deben comprimirse en un paquete de la aplicación que se usará para cargar la pestaña en Teams. Cuando un usuario elige agregar o actualizar la pestaña, Microsoft Teams cargará los especificados en el manifiesto, los configurationUrl incrustará en un iframe y los representará en la pestaña.

. csproj

En la ventana Explorador de soluciones de Visual Studio, haga clic con el botón secundario en el proyecto y seleccione Editar archivo de proyecto. En la parte inferior del archivo, verá el código que crea y actualiza la carpeta ZIP cuando se genera la aplicación:

<PropertyGroup>
    <PostBuildEvent>powershell.exe Compress-Archive -Path \"$(ProjectDir)AppManifest\*\" -DestinationPath \"$(TargetDir)tab.zip\" -Force</PostBuildEvent>
  </PropertyGroup>

  <ItemGroup>
    <EmbeddedResource Include="AppManifest\icon-outline.png">
      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
    </EmbeddedResource>
    <EmbeddedResource Include="AppManifest\icon-color.png">
      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
    </EmbeddedResource>
    <EmbeddedResource Include="AppManifest\manifest.json">
      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
    </EmbeddedResource>
  </ItemGroup>

Establecer un túnel seguro a la pestaña

Microsoft Teams es un producto basado en la nube completamente y requiere que el contenido de la pestaña esté disponible en la nube con puntos de conexión HTTPS. Teams no permite el hospedaje local. Tendrá que publicar su pestaña en una dirección URL pública o usar un proxy que expondrá el puerto local a una dirección URL accesible desde Internet.

Para probar la pestaña, use ngrok. Los puntos de conexión web del servidor estarán disponibles mientras se ejecuta ngrok en el equipo local. Si cierra ngrok, las direcciones URL serán distintas la próxima vez que la inicie.

  • Abra un símbolo del sistema en la raíz del directorio del proyecto y ejecute el siguiente comando:
ngrok http https://localhost:44355 -host-header="localhost:44355"
  • Ngrok escuchará las solicitudes de Internet y las dirigirá a la aplicación cuando se ejecute en el puerto 44355. Debe ser similar a https://y8rCgT2b.ngrok.io/ donde y8rCgT2b se reemplaza por su dirección URL https alfanumérica de ngrok.

  • Asegúrese de mantener el símbolo del sistema con ngrok en ejecución y tome nota de la dirección URL, que lo necesitará más adelante.

Actualizar la aplicación

Dentro de Tab. cshtml , la aplicación presenta al usuario dos botones de opción para mostrar la ficha con un icono rojo o gris. Al elegir el botón seleccionar gris o seleccionar rojo saveGray() , saveRed()se activa o, settings.setValidityState(true)respectivamente, establece y se habilita el botón Guardar en la página de configuración. Este código permite que los equipos sepan que ha satisfecho los requisitos de configuración y que la instalación puede continuar. Al guardar, se establecen los settings.setSettings parámetros de. Por último saveEvent.notifySuccess() , se llama a para indicar que la dirección URL del contenido se ha resuelto correctamente.

_Layout. cshtml

Para que la pestaña aparezca en Microsoft Teams, debe incluir el SDK del cliente de JavaScript para Microsoft Teams e incluir una llamada a microsoftTeams.initialize() después de que se cargue la página. Así es cómo se comunican la pestaña y el cliente de Microsoft Teams:

  • Navegue hasta la carpeta compartida , Abra _Layout. cshtmly agregue lo siguiente a la <head> etiqueta:
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
<script src="https://statics.teams.cdn.office.net/sdk/v1.6.0/js/MicrosoftTeams.min.js"></script>

Importante

No copie ni pegue las <script src="..."> direcciones URL de esta página, ya que es posible que no representen la versión más reciente. Para obtener la versión más reciente del SDK, vaya siempre a: API de JavaScript de Microsoft Teams.

TAB. cshtml

Abra el . cshtml y actualice el insertado <script> de la siguiente manera:

  • En la parte superior del script, llame microsoftTeams.initialize()a.

  • Actualice los websiteUrl valores contentUrl y en cada función con la dirección URL https ngrok a su ficha.

El código ahora debería ser similar al siguiente con y8rCgT2b reemplazado por su dirección URL de ngrok:

    microsoftTeams.initialize();

    let saveGray = () => {
        microsoftTeams.settings.registerOnSaveHandler(function (saveEvent) {
            microsoftTeams.settings.setSettings({
                websiteUrl: `https://y8rCgT2b.ngrok.io`,
                contentUrl: `https://y8rCgT2b.ngrok.io/gray/`,
                entityId: "grayIconTab",
                suggestedDisplayName: "MyNewTab"
            });
            saveEvent.notifySuccess();
        });
    }

    let saveRed = () => {
        microsoftTeams.settings.registerOnSaveHandler(function (saveEvent) {
            microsoftTeams.settings.setSettings({
                websiteUrl: `https://y8rCgT2b.ngrok.io`,
                contentUrl: `https://y8rCgT2b.ngrok.io/red/`,
                entityId: "redIconTab",
                suggestedDisplayName: "MyNewTab"
            });
            saveEvent.notifySuccess();
        });
    }

Asegúrese de guardar la pestaña. cshtmlactualizada.

Compilar y ejecutar la aplicación

  • En Visual Studio, presione F5o elija iniciar depuración en el menú depurar . Compruebe que ngrok se está ejecutando y que funciona correctamente abriendo el explorador y yendo a la página de contenido a través de la dirección URL https ngrok que se proporcionó en la ventana del símbolo del sistema.

Sugerencia

Debe tener la aplicación en Visual Studio y ngrok en ejecución para completar este inicio rápido. Si necesita detener la ejecución de la aplicación en Visual Studio para trabajar en ella, mantenga ngrok en ejecución. Seguirá escuchando y reanudará el enrutamiento de la solicitud de la aplicación cuando se reinicie en Visual Studio. Si tiene que reiniciar el servicio ngrok, devolverá una nueva dirección URL y tendrá que actualizar la aplicación con la nueva dirección URL.

Cargar la pestaña en Teams con App Studio

Nota

Usamos App Studio para editar el archivo manifest. JSON y cargar el paquete completado en Teams. También puede editar manualmente el archivo manifest. JSON si lo prefiere. Si lo hace, asegúrese de volver a crear la solución para crear el archivo . zip de pestañas que se va a cargar.

  • Abra el cliente de Microsoft Teams. Si usa la versión basada en Web , puede inspeccionar el código Front-end con las herramientas de desarrollode su explorador.

  • Abra App Studio y seleccione la pestaña Editor de manifiestos .

  • Seleccione el icono importar una aplicación existente en el editor de manifiestos para empezar a actualizar el paquete de la aplicación de la pestaña. El código fuente incluye su propio manifiesto parcialmente completado. El nombre del paquete de la aplicación es Tab. zip. Se debe encontrar aquí:

/bin/Debug/netcoreapp2.2/tab.zip
  • Cargue la ficha. zip en App Studio.

Actualizar el paquete de la aplicación con el editor de manifiestos

Una vez que haya cargado el paquete de la aplicación en App Studio, tendrá que finalizar la configuración.

  • Seleccione el icono de la pestaña recién importada en el panel derecho de la página de bienvenida del editor de manifiestos.

Hay una lista de pasos en la parte izquierda del editor de manifiestos y, a la derecha, una lista de propiedades que deben tener valores para cada uno de estos pasos. La gran parte de la información se ha proporcionado en manifest. JSON , pero hay algunos campos que debe actualizar:

Detalles: detalles de la aplicación

  • En identificación , seleccione generar para reemplazar el identificador del marcador de posición por el GUID necesario para la pestaña.

  • En información para desarrolladores , actualice el campo dirección URL del sitio web con la dirección URL https de ngrok .

  • En direcciones URL de aplicaciones , actualice los campos declaración de privacidad y condiciones de uso URL con la dirección URL https de ngrok . Recuerde que debe incluir las rutas de /privacy y /tou al final de las direcciones URL.

Capacidades: pestañas

En la sección de tabulaciones :

  • En la pestaña equipo , seleccione Agregar.

  • En la ventana emergente de la pestaña equipo, actualice la dirección URL de configuración a https://<yourngrokurl>/tab.

  • Por último, asegúrese de que la configuración de se *puede actualizar. *Los cuadros equipo y grupo de chat están seleccionados y seleccione Guardar.

Finalizar: dominios y permisos

En la sección dominios y permisos , los dominios del campo de pestañas deben contener la dirección URL de ngrok sin el <yourngrokurl>.ngrok.io/prefijo https.

Pruebas y distribución: probar y distribuir

Importante

En el campo Descripción de la derecha, verá la siguiente ADVERTENCIA:

⚠ "la matriz ' validDomains ' no puede contener un sitio de túnel..."

Esta advertencia puede omitirse mientras se prueba la pestaña.

En la sección probar y distribuir :

  • Haga clic en Instalar.

  • En el campo Agregar a un equipo o chat de la ventana emergente, especifique el equipo y seleccione instalar.

  • En la siguiente ventana emergente, elija el canal de equipo en el que desea que se muestre la pestaña y seleccione configurar.

  • En la última ventana emergente, seleccione un valor para la página de ficha (bien un icono rojo o gris) y seleccione Guardar.

Para ver la pestaña, navegue hasta el equipo en el que se instaló y selecciónela en la barra de pestañas. Debe mostrarse la página elegida durante la configuración.