Desarrollar una extensión web

  • Artículo
  • Tiempo de lectura: 6 minutos

Azure DevOps Services | Azure DevOps Server 2020 | Azure DevOps Server 2019 | TFS 2018 | TFS 2017

Use extensiones para mejorar la Azure DevOps nuevas experiencias web, widgets de panel, tareas de compilación y mucho más. Puede desarrollar extensiones mediante tecnologías estándar como HTML, JavaScript y CSS. Se empaquetan y publican en el Visual Studio Marketplace y, a continuación, se pueden instalar en una organización.

Sugerencia

Consulte nuestra documentación más reciente sobre el desarrollo de extensiones mediante el SDK Azure DevOps Extension.

Este tutorial le guía a través de la creación de su primera extensión web, que incluye las siguientes tareas.

  • Instalación de las herramientas necesarias
  • Leer un directorio local para la extensión
  • Creación de un archivo de manifiesto de extensión y una contribución del centro
  • Empaquetado y publicación de la extensión en Marketplace
  • Prueba de la extensión en una organización
¿Necesita ayuda? Publique preguntas en el Azure DevOps Services developer Community.

Prerrequisitos

Debe tener los siguientes permisos e instalaciones.

  • Es el propietario de una organización. Si no tiene una organización, puede crear una organización de forma gratuita.
  • Instale Node.js.
  • Instale la herramienta de empaquetado de extensiones (TFX) mediante la ejecución npm install -g tfx-cli desde un símbolo del sistema.

Creación de un directorio y un manifiesto

Una extensión se compone de un conjunto de archivos que incluye un archivo de manifiesto necesario. Se empaqueta en un archivo .vsix y se publica en Visual Studio Marketplace.

  1. Cree un directorio para contener los archivos necesarios para la extensión:

    mkdir my-first-extension

  2. Desde este directorio, inicialice un nuevo manifiesto de paquete NPM:

    npm init -y

    En este archivo se describen las bibliotecas necesarias para la extensión.

  3. Instale el paquete del SDK de extensión web vss de Microsoft y guárdelo en el manifiesto del paquete NPM:

    npm install vss-web-extension-sdk --save

    Este SDK incluye una biblioteca de JavaScript que proporciona las API necesarias para comunicarse con la página en la que se inserta la extensión.

  4. Cree un archivo de manifiesto de extensión vss-extension.json denominado en la raíz del directorio de extensión con el siguiente contenido:

    {
    "manifestVersion": 1,
    "id": "my-first-extension",
    "publisher": "",
    "version": "1.0.0",
    "name": "My First Extension",
    "description": "A sample Visual Studio Services extension",
    "public": false,
    "categories": ["Azure Repos"],
    "targets": [
        {
            "id": "Microsoft.VisualStudio.Services"
        }
    ],
    "contributions": [
        {
            "id": "my-hub",
            "type": "ms.vss-web.hub",
            "targets": [
                "ms.vss-code-web.code-hub-group"
            ],
            "properties": {
                "name": "My Hub",
                "uri": "my-hub.html"
            }
        }
    ],
    "files": [
        {
            "path": "my-hub.html",
            "addressable": true
        },
        {
            "path": "node_modules/vss-web-extension-sdk/lib",
            "addressable": true,
            "packagePath": "lib"
        }
    ]
}

    Nota:

    La public propiedad controla si la extensión es visible para todos los usuarios del Visual Studio Marketplace. Mantenga las extensiones privadas durante el desarrollo.

  5. Cree un archivo denominado en la raíz del directorio de extensión con el siguiente contenido, que es para la vista (también conocida como centro) aportada my-hub.html a la experiencia web.

    <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="lib/VSS.SDK.min.js"></script>
    <style>
        body {
            background-color: rgb(0, 67, 117);
            color: white;
            margin: 10px;    
            font-family: "Segoe UI VSS (Regular)","-apple-system",BlinkMacSystemFont,"Segoe UI",sans-serif;
        }
    </style>
    <script type="text/javascript">
        VSS.init();
        VSS.ready(function() {
            document.getElementById("name").innerText = VSS.getWebContext().user.name;
        });
    </script>
</head>
<body>        
    <h1>Hello, <span id="name"></span></h1>
</body>
</html>

  6. El directorio de extensión debe tener un aspecto parecido al del ejemplo siguiente.

    |-- my-hub.html
|-- node_modules
    |-- @types
    |-- vss-web-extension-sdk
|-- package.json
|-- vss-extension.json

Ya está listo para empaquetar, publicar y probar la extensión.

Empaquetar y publicar la extensión

Creación de un publicador

Todas las extensiones, incluidas las extensiones de Microsoft, están en un publicador. Cualquier persona puede crear un publicador y publicar extensiones en él. También puede proporcionar a otras personas acceso al publicador si un equipo está desarrollando la extensión.

  1. Inicie sesión en el portal Visual Studio de administración de Marketplace.

  2. Si aún no tiene un publicador, se le pedirá que cree uno.

  3. En el formulario Crear Publisher, escriba su nombre en el campo nombre del publicador. El campo id. debe establecerse automáticamente en función de su nombre:

    Publicador de Creat

    Nota:

    Anote el identificador. Debe establecerlo en el archivo de manifiesto de la extensión.

Ya está listo para empaquetar la extensión y publicarla (cargarla) en Marketplace. Mantenga abierta esta ventana del explorador, ya que volverá aquí después de empaquetar la extensión.

Empaquetado de la extensión

  1. Abra el archivo de manifiesto de extensión ( vss-extension.json ) y establezca el valor del campo en el identificador del publisher publicador. Por ejemplo:

    {
    ...
    "id": "my-first-extension",
    "publisher": "AnnetteNielsen",
    ...
}

  2. El SDK de extensiones web de VSS requiere TFX. Si aún no lo ha instalado, abra un símbolo del sistema y ejecute el siguiente comando.

    npm install -g tfx-cli

  3. Desde un símbolo del sistema, ejecute el comando packaging de la herramienta TFX desde el directorio de extensión.

    npx tfx-cli extension create

    Cuando se complete, verá un mensaje que indica que la extensión se ha empaquetado correctamente:

    === Completed operation: create extension ===
- VSIX: C:\my-first-extension\AnnetteNielsen.my-first-extension-1.0.0.vsix
- Extension ID: my-first-extension
- Extension Version: 1.0.0
- Publisher: AnnetteNielsen

Upload la extensión

  1. En el portal de administración,seleccione el publicador en la lista desplegable de la parte superior de la página.

  2. Seleccione Nueva extensióny, a continuación, Azure DevOps.

    Visual Studio Desarrollo de nuevas extensiones de Marketplace

  3. Arrastre y coloque el archivo o selecciónelo para buscar el archivo VSIX que creó en el paso de empaquetado anterior y, a continuación, elija Upload.

    Upload nueva extensión para Azure DevOps

    Después de unos segundos, la extensión aparece en la lista de extensiones publicadas. No se preocupe, la extensión solo es visible para usted.

    La extensión aparece en la lista de extensiones publicadas.

Instalación de la extensión

Para probar una extensión, debe instalarse en una organización de Azure DevOps. La instalación requiere ser el propietario de la organización (o tener los permisos necesarios). Dado que la extensión es privada, primero debe compartirse con la organización en la que desea instalarla.

  1. En el portal de administración, seleccione la extensión en la lista, haga clic con el botón derecho y elija Compartir/Dejar de compartir o Publicar/Anularpublicación, en función de la extensión; Recurso compartido = Publicar y Dejar de compartir = Anular publicación.

    Seleccione la extensión y elija Compartir.

  2. Seleccione Organizacióny escriba el nombre de la organización. Seleccione Entrar.

    Compartir con la organización

  3. Cierre el panel.

    La extensión ahora se puede instalar en esta organización.

  4. En Marketplace, seleccione la extensión para abrir su página de información general.

Página de información general
Página de información general

Nota:

Dado que la extensión es privada, solo usted y cualquier miembro de la organización con el que se comparte pueden ver esta página.

  1. Seleccione Obtener gratis para iniciar el proceso de instalación. Seleccione la organización con la que ha compartido la extensión en el menú desplegable.

    Panel de extensión de la instalar

  2. Seleccione Instalar.

¡Enhorabuena! La extensión ahora está instalada en una organización y está lista para probarse.

Prueba de la extensión

La extensión ha contribuido con una vista denominada "Mi centro" al área código del nivel de proyecto. Vamos a navegar hasta él.

  1. Seleccione Continuar con la organización al final del Asistente para la instalación para ir a la página principal de la organización en la que se instaló la extensión ( ).

  1. Seleccione cualquiera de los proyectos enumerados para navegar a él:

    seleccionar proyecto

    Si no hay ningún proyecto en la organización, se le pedirá que cree uno.

  2. Vaya al área Código y, a continuación, al centro contribuido por la extensión(Mi centro):

    Mi centro

  1. Seleccione Configuración de laorganización y, a continuación, seleccione Extensiones para ver la extensión recién instalada.

    Configuración de la organización, página extensiones

Sugerencia

Asegúrese de actualizar el explorador después de instalar la extensión. Debería ver el nuevo centro de extensiones en el panel izquierdo bajo el centro principal al que agregó la extensión. Si no ve el nuevo centro de extensiones, publique este problema en el Azure DevOps Services Developer Community.

Depuración de la extensión

Para depurar la extensión mediante Visual Studio o Browser Herramientas de desarrollo y acelerar el desarrollo sin volver a implementar la extensión cada vez que cambie el código fuente, necesita cambiar la propiedad de adición del baseUri manifiesto:

{
    ...
    "baseUri": "https://localhost:44300",
    ...
}

Al cambiar el manifiesto se carga la extensión desde la instancia del servidor web local. Por ejemplo, IISExpress en Visual Studio. Después de cambiar el manifiesto, implemente e instale esta extensión de depuración solo una vez.

Nota:

Ejecute el servidor web local en modo SSL, ya que Azure DevOps requiere que la página web se sirve desde un origen seguro; de lo contrario, obtendrá un error en la consola del explorador durante la carga de la extensión IFRAME.

Pasos siguientes

Exploración de los ejemplos de extensión