Tutorial: Acceso y personalización del portal para desarrolladores

El portal para desarrolladores es un sitio web totalmente personalizable que se genera automáticamente con la documentación de las API. Aquí, los consumidores de API pueden detectar las API, aprender a usarlas y solicitar acceso.

En este tutorial, aprenderá a:

Puede encontrar más detalles del portal para desarrolladores en Introducción al portal para desarrolladores de Azure API Management.

Requisitos previos

• Complete el siguiente inicio rápido: Creación de una instancia de Azure API Management
• Importe y publique una instancia de Azure API Management. Para obtener más información, consulte Importación y publicación.

Disponibilidad

Acceso al portal como administrador

Siga los pasos siguientes para acceder a la versión administrada del portal.

1. Vaya a la instancia de API Management en Azure Portal.
2. Seleccione el botón Portal para desarrolladores en la barra de navegación superior. Se abrirá una nueva pestaña del explorador con una versión administrativa del portal.

Conceptos arquitectónicos del portal para desarrolladores

Los componentes del portal se pueden dividir lógicamente en dos categorías: código y contenido.

Código

El código se mantiene en el repositorio GitHub del portal para desarrolladores de API Management e incluye:

• Widgets: representan elementos visuales y combinan HTML, JavaScript, capacidad de estilo, configuración y asignación de contenido. Por ejemplo, una imagen, un párrafo de texto, un formulario o una lista de API.
• Definiciones de estilos: especifican cómo se pueden aplicar estilos a los widgets.
• Motor: que genera páginas web estáticas a partir del contenido del portal y está escrito en JavaScript.
• Editor de objetos visuales: permite la personalización y la experiencia de creación en el explorador.

Contenido

El contenido se divide en dos subcategorías: contenido del portal y contenido de API Management.

El contenido del portal es específico del portal e incluye lo siguiente:

• Páginas: por ejemplo, página de aterrizaje, tutoriales de API y entradas de blog.

• Elementos multimedia: imágenes, animaciones y otro contenido basado en archivos.

• Diseños: plantillas, que se comparan con una dirección URL y definen cómo se muestran las páginas.

• Estilos: valores para las definiciones de los estilos; por ejemplo, fuentes, colores o bordes.

• Valores: configuración, como iconos de favoritos (favicon) y metadatos de sitios web.

  El contenido del portal, a excepción de los elementos multimedia, se expresa como documentos JSON.

El contenido de API Management incluye entidades como API, operaciones, productos y suscripciones.

Descripción de la interfaz administrativa del portal

Contenido predeterminado

Si accede al portal por primera vez, se aprovisionará automáticamente y en segundo plano el contenido predeterminado. El contenido predeterminado se ha diseñado para presentar las funcionalidades del portal y minimizar las personalizaciones necesarias para personalizarlo. Puede obtener más información sobre lo que se incluye en el contenido del portal en Introducción al portal para desarrolladores de Azure API Management.

Editor visual

Puede personalizar el contenido del portal con el editor visual.

• Las secciones de menú de la izquierda permiten crear o modificar las páginas, los elementos multimedia, los diseños, los menús, los estilos o la configuración de sitios web.
• Los elementos de menú de la parte inferior permiten cambiar entre las ventanillas (por ejemplo, móvil o escritorio), ver los elementos del portal visibles para los usuarios autenticados o anónimos, o guardar o deshacer acciones.
• Para agregar filas a una página, haga clic en el icono azul con un signo más.
• Los widgets (por ejemplo, texto, imágenes o lista de API) se pueden agregar presionando un icono de color gris con un signo más.
• Reorganice los elementos de una página con la interacción de arrastrar y colocar.

Diseños y páginas

Los diseños definen cómo se muestran las páginas. Por ejemplo, en el contenido predeterminado, hay dos diseños: uno se aplica a la página principal y el otro a todas las demás páginas.

Para aplicar un diseño a una página, se hace coincidir la plantilla de dirección URL con la dirección URL de la página. Por ejemplo, un diseño con una plantilla de dirección URL con el valor /wiki/* se aplicará a todas las páginas con el segmento /wiki/ en la dirección URL: /wiki/getting-started, /wiki/styles, etc.

En la imagen anterior, el contenido que pertenece al diseño está marcado en azul, mientras que la página se marca en rojo. Las secciones de menú se marcan respectivamente.

Guía de estilos

La guía de estilos es un panel creado teniendo en cuenta a los diseñadores. Permite supervisar todos los elementos visuales del portal y aplicar estilos en ellos. Los estilos son jerárquicos: muchos elementos heredan propiedades de otros elementos. Por ejemplo, los elementos de botón usan colores para el texto y el fondo. Para cambiar el color de un botón, debe cambiar la variante de color original.

Para editar una variante, selecciónela y seleccione el icono del lápiz que aparece encima. Una vez realizados los cambios en la ventana emergente, ciérrela.

Botón Guardar

Siempre que realice un cambio en el portal, deberá guardarlo manualmente. Para ello, seleccione el botón Guardar del menú de la parte inferior o pulse [Ctrl]+[S]. Al guardar los cambios, el contenido modificado se carga automáticamente en el servicio de API Management.

Personalización del contenido del portal

Antes de que el portal esté disponible para los visitantes, debe personalizar el contenido generado automáticamente. Entre los cambios recomendados se incluyen los diseños, los estilos y el contenido de la página principal.

Página de inicio

La página Inicio predeterminada se rellena con el contenido del marcador de posición. Puede eliminar todas las secciones con este contenido o mantener la estructura y ajustar los elementos uno a uno. Reemplace las imágenes y el texto generados por los suyos y asegúrese de que los vínculos señalan a las ubicaciones deseadas. Puede editar la estructura y el contenido de la página principal con los siguientes métodos:

• Arrastrar y colocar elementos de página en la ubicación deseada en el sitio.
• Seleccionar elementos de texto y encabezado para editar y dar formato al contenido.
• Comprobar que los botones apuntan a las ubicaciones correctas.

Diseños

Reemplace el logotipo generado automáticamente en la barra de navegación por el suyo.

1. En el portal para desarrolladores, seleccione el logotipo predeterminado de Contoso en la parte superior izquierda de la barra de navegación.
2. Seleccione el icono Editar.
3. En la sección Principal, seleccione Origen.
4. En elemento emergente Elementos multimedia, seleccione:
   • Una imagen ya cargada en la biblioteca.
   • Cargar archivo para cargar una imagen nueva.
   • Ninguno para no usar un logotipo.
5. El logotipo se actualiza en tiempo real.
6. Seleccione fuera de las ventanas emergentes para salir de la biblioteca multimedia.
7. Haga clic en Guardar.

Estilos

Aunque no es necesario ajustar ningún estilo, puede ajustar elementos determinados. Por ejemplo, cambie el color principal para que coincida con el de la marca. Puede hacerlo de dos maneras:

Estilo general del sitio

1. En el portal para desarrolladores, seleccione el icono Estilos en la barra de herramientas de la izquierda.
2. En la sección Colores, seleccione el elemento de estilo de color que desee editar.
3. Haga clic en el icono Editar de ese elemento de estilo.
4. Seleccione el color en el selector de colores o escriba el código hexadecimal del color.
5. Haga clic en Agregar color para agregar otro elemento de color y darle nombre.
6. Haga clic en Guardar.

Estilo de contenedor

1. En la página principal del portal para desarrolladores, seleccione el fondo del contenedor.
2. Seleccione el icono Editar.
3. En el menú emergente, establezca:
   • Un fondo transparente, una imagen, un color específico o un degradado.
   • Tamaño, margen y relleno del contenedor.
   • Posición y alto del contenedor.
4. Seleccione fuera de las ventanas emergentes para salir de la configuración del contenedor.
5. Haga clic en Guardar.

Ejemplo de personalización

En el siguiente vídeo se muestra cómo editar el contenido del portal, personalizar el aspecto del sitio web y publicar los cambios.

Publicación del portal

Para que el portal y los últimos cambios estén disponibles para los visitantes, debe publicarlos. Puede publicar el portal dentro de la interfaz administrativa del portal o desde Azure Portal.

Publicación desde la interfaz administrativa

1. Asegúrese de guardar los cambios; para ello, seleccione el icono Guardar.

2. Seleccione Publicar sitio web en la sección Operaciones del menú. Esta operación puede tardar algunos minutos.

   

Publicación desde Azure Portal

1. Vaya a la instancia de API Management en Azure Portal.

2. En el menú de la izquierda, en Portal para desarrolladores, seleccione Información general del portal.

3. En la ventana Información general del portal, seleccione Publicar.

   

Visita del portal publicado

Después de publicar el portal, puede acceder a él en la misma dirección URL que el panel administrativo, por ejemplo, https://contoso-api.developer.azure-api.net. Véalo en una sesión de explorador independiente (modo de exploración de incógnito o privada) como visitante externo.

Aplicación de la directiva CORS en las API

Debe habilitar CORS (uso compartido de recursos entre orígenes) en las API para que los visitantes del portal puedan probar las API con la consola interactiva integrada. Para más información, consulte las preguntas frecuentes acerca del portal para desarrolladores de Azure API Management.

Pasos siguientes

Obtenga más información sobre el portal para desarrolladores:

• Introducción al portal para desarrolladores de Azure API Management
• Migración al nuevo portal para desarrolladores desde el portal heredado obsoleto.