Zelfstudie: De ontwikkelaarsportal openen en aanpassen

De ontwikkelaarsportal is een automatisch gegenereerde, volledig aanpasbare website met de documentatie van uw API's. Hier kunnen API-gebruikers uw API's ontdekken, leren hoe ze deze kunnen gebruiken, en toegang aanvragen.

In deze zelfstudie leert u het volgende:

Meer informatie over de ontwikkelaarsportal vindt u in het Overzicht van de API Management-ontwikkelaarsportal.

Vereisten

• Voltooi de volgende quickstart: Een Azure API Management-exemplaar maken
• Importeer en publiceer een Azure API Management-exemplaar. Zie Importeren en publiceren voor meer informatie

Beschikbaarheid

Toegang krijgen tot de portal als beheerder

Volg de onderstaande stappen om toegang te krijgen tot de beheerde versie van de portal.

1. Blader in Azure Portal naar uw API Management-exemplaar.
2. Selecteer de knop Ontwikkelaarsportal in de bovenste navigatiebalk. Er wordt een nieuw browsertabblad geopend met een beheerversie van de portal.

Architectuurconcepten voor ontwikkelaarsportal

De portalonderdelen kunnen logisch worden onderverdeeld in twee categorieën: code en inhoud.

Code

Code wordt onderhouden in de API Management ontwikkelaarsportal GitHub opslagplaats en bevat:

• Widgets: vertegenwoordigen visuele elementen en combineren HTML, JavaScript, stijlbaarheid, instellingen en inhoudstoewijzing. Voorbeelden zijn een afbeelding, een teksta alinea, een formulier, een lijst met API's, enzovoort.
• Stijldefinities: geef op hoe widgets kunnen worden gestijld
• Engine: deze engine genereert statische webpagina's van portalinhoud en is geschreven in JavaScript
• Visuele editor: hiermee kunt u in de browser aanpassingen en ontwerpervaringen gebruiken

Content

Inhoud is onderverdeeld in twee subcategorieën: portalinhoud en API Management inhoud.

Portalinhoud is specifiek voor de portal en omvat:

• Pagina's: bijvoorbeeld landingspagina, API-zelfstudies, blogposts

• Media: afbeeldingen, animaties en andere inhoud op basis van bestanden

• Indelingen: sjablonen die zijn afgestemd op een URL en definiëren hoe pagina's worden weergegeven

• Stijlen: waarden voor stijldefinities, zoals lettertypen, kleuren, randen

• Instellingen: configuraties zoals favicon, websitemetagegevens

  Portalinhoud, met uitzondering van media, wordt uitgedrukt als JSON-documenten.

API Management inhoud bevat entiteiten zoals API's, bewerkingen, producten, abonnementen.

De beheerinterface van de portal begrijpen

Standaardinhoud

Als u de portal de eerste keer opent, wordt de standaardinhoud automatisch op de achtergrond ingericht. Standaardinhoud is ontworpen om de mogelijkheden van de portal te presenteren, en om de aanpassingen te minimaliseren die nodig zijn om de portal persoonlijker te maken. In het Overzicht van de Azure API Management-ontwikkelaarsportal vindt u meer informatie over wat is opgenomen in de portalinhoud.

Visuele editor

U kunt de inhoud van de portal aanpassen met de visuele editor.

• Met de menusecties aan de linkerkant kunt u pagina's, media, indelingen, menu's, stijlen of website-instellingen maken of wijzigen.
• Met de menu-items onderaan kunt u schakelen tussen viewports (bijvoorbeeld mobiel of desktop), de elementen van de portal weergeven die zichtbaar zijn voor geverifieerde of anonieme gebruikers, of opslaan of acties ongedaan maken.
• Voeg rijen toe aan een pagina door te klikken op een blauw pictogram met een plusteken.
• Widgets (bijvoorbeeld tekst, afbeeldingen of een API-lijst) kunnen worden toegevoegd door te drukken op een grijs pictogram met een plusteken.
• Rangschik items opnieuw op een pagina met de interactie slepen-en-neerzetten.

Indelingen en pagina's

Indelingen bepalen hoe pagina's worden weergegeven. De standaardinhoud heeft bijvoorbeeld twee indelingen: de ene is van toepassing op de startpagina en de andere op alle resterende pagina's.

U kunt een indeling toepassen op een pagina door de bijbehorende URL-sjabloon te laten overeenkomen met de URL van de pagina. Een indeling met een URL-sjabloon /wiki/* wordt bijvoorbeeld toegepast op elke pagina die het segment /wiki/ bevat in de URL: /wiki/getting-started, /wiki/styles, enzovoort.

In de voorgaande afbeelding is inhoud die hoort bij de indeling, gemarkeerd in blauw, terwijl de pagina is gemarkeerd in rood. De menusecties zijn respectievelijk gemarkeerd.

Stijlgids

De stijlgids is een paneel dat is gemaakt voor ontwerpers. Het biedt een overzicht van alle visuele elementen in de portal en biedt de mogelijkheid om deze vorm te geven. Vormgeving is hiërarchisch: veel elementen nemen de eigenschappen over van andere elementen. Knopelementen gebruiken bijvoorbeeld kleuren voor tekst en achtergrond. Als u de kleur van een knop wilt wijzigen, moet u de oorspronkelijke kleurvariant wijzigen.

Als u een variant wilt bewerken, selecteert u deze en selecteert u het potloodpictogram dat er overheen wordt weergegeven. Sluit het pop-upvenster nadat u de wijzigingen hebt aangebracht.

De knop Opslaan

Wanneer u een wijziging aanbrengt in de portal, moet u deze handmatig opslaan door in het menu onderaan de knop Opslaan te selecteren, of op [Ctrl]+[S] te drukken. Wanneer u de wijzigingen opslaat, wordt de gewijzigde inhoud automatisch geüpload naar de API Management-service.

Inhoud van de portal aanpassen

Voordat u de portal beschikbaar maakt voor bezoekers, moet u de automatisch gegenereerde inhoud personaliseren. Aanbevolen wijzigingen zijn onder andere de indelingen, stijlen en de inhoud van de startpagina.

Startpagina

De standaardversie van de Startpagina staat vol met tijdelijke aanduidingen voor inhoud. U kunt hele secties met deze inhoud verwijderen, of de structuur handhaven en de elementen één voor één aanpassen. Vervang de gegenereerde tekst en afbeeldingen door uw eigen inhoud, en zorg ervoor dat de koppelingen naar de gewenste locaties verwijzen. U kunt de structuur en inhoud van de startpagina bewerken door:

• Pagina-elementen slepen en verwijderen naar de gewenste plaatsing op de site.
• Tekst- en kopelementen selecteren om inhoud te bewerken en op te maken.
• Controleren of uw knoppen naar de juiste locaties wijzen.

Indelingen

Vervang het automatisch gegenereerde logo in de navigatiebalk door uw eigen afbeelding.

1. Selecteer in de ontwikkelaarsportal het contoso-standaardlogo linksboven in de navigatiebalk.
2. Selecteer het pictogram Bewerken.
3. Selecteer bron in de sectie Main.
4. Selecteer in het pop-up pop-up van Media het volgende:
   • Een afbeelding die al is geüpload in uw bibliotheek, of
   • Upload om een nieuw afbeeldingsbestand te uploaden dat moet worden gebruikt, of
   • Selecteer Geen om af te zien van het gebruik van een logo.
5. Het logo wordt in realtime bijgewerkt.
6. Selecteer buiten de pop-upvensters om de mediabibliotheek af te sluiten.
7. Klik op Opslaan.

Vormgeving

Hoewel u geen stijlen hoeft aan te passen, kunt u overwegen bepaalde elementen aan te passen. U kunt bijvoorbeeld de primaire kleur aanpassen aan de kleur van uw merk. U kunt dit op twee manieren doen:

Algemene sitestijl

1. Selecteer in de ontwikkelaarsportal het pictogram Stijlen in de linkerhulpprogrammabalk.
2. Selecteer in de sectie Kleuren het kleurstijlitem dat u wilt bewerken.
3. Klik op het pictogram Bewerken voor dat stijlitem.
4. Selecteer de kleur in de kleur kiezen of voer de hexx-kleurcode in.
5. Voeg nog een kleuritem toe en geef deze een naam door op Kleur toevoegen te klikken.
6. Klik op Opslaan.

Containerstijl

1. Selecteer op de hoofdpagina van de ontwikkelaarsportal de containerachtergrond.
2. Klik op het pictogram Bewerken.
3. Stel het volgende in het pop-uppop-up:
   • De achtergrond die u wilt leeg maken, een afbeelding, een specifieke kleur of een kleurovergang.
   • De containergrootte, marge en opvulling.
   • Positie en hoogte van de container.
4. Selecteer buiten de pop-upvensters om de containerinstellingen af te sluiten.
5. Klik op Opslaan.

Voorbeeld van aanpassing

In de volgende video ziet u hoe u de inhoud van de portal bewerkt, het uiterlijk van de website aanpast, en de wijzigingen publiceert.

De portal publiceren

Als u de portal en de meest recente wijzigingen in deze portal beschikbaar wilt maken voor bezoekers, moet u de portal publiceren. U kunt de portal publiceren in de beheerinterface van de portal, of vanuit Azure Portal.

Publiceren vanuit de beheerinterface

1. Zorg ervoor dat u de wijzigingen hebt opgeslagen door het pictogram Opslaan te selecteren.

2. Selecteer in de sectie Bewerkingen van het menu de optie Website publiceren. Deze bewerking kan enkele minuten duren.

   

Publiceren vanuit Azure Portal

1. Blader in Azure Portal naar uw API Management-exemplaar.

2. Selecteer in het linkermenu onder Ontwikkelaarsportal de optie Overzicht van de portal.

3. Selecteer in het Overzicht van de portal de optie Publiceren.

   

De gepubliceerde portal bezoeken

Nadat u de portal hebt gepubliceerd, kunt u deze bereiken via dezelfde URL als het beheerpaneel, bijvoorbeeld https://contoso-api.developer.azure-api.net. Bekijk de portal in een afzonderlijke browsersessie (met behulp van de modi Incognito of Private Browsing) als een externe bezoeker.

Het CORS-beleid toepassen op API's

Schakel CORS (Cross-Origin Resource Sharing) in voor uw API's om de bezoekers van de portal de API's te laten testen via de ingebouwde interactieve console. Zie veelgestelde vragen over de Azure API Management developer portal voor meer informatie.

Volgende stappen

Meer informatie over de ontwikkelaarsportal:

• Overzicht van de Azure API Management-ontwikkelaarsportal
• Migreer naar de nieuwe ontwikkelaarsportal van de afgeschafte verouderde portal.