Självstudie: Få åtkomst till och anpassa utvecklarportalen

Utvecklarportalen är en automatiskt genererad, helt anpassningsbar webbplats med dokumentationen för dina API:er. Det är där API-konsumenter kan identifiera dina API:er, lära sig hur de används och begära åtkomst.

I den här guiden får du lära dig att:

Mer information finns på utvecklarportalen i Översikt över Azure API Management utvecklarportalen.

Förutsättningar

• Slutför följande snabbstart: Skapa en Azure API Management-instans
• Importera och publicera en Azure API Management instans. Mer information finns i Importera och publicera

Tillgänglighet

Få åtkomst till portalen som administratör

Följ stegen nedan för att få åtkomst till den hanterade versionen av portalen.

1. I Azure Portal navigerardu till din API Management instans.
2. Välj knappen Utvecklarportal i det övre navigeringsfältet. En ny webbläsarflik med en administrativ version av portalen öppnas.

Arkitekturbegrepp för utvecklarportalen

Portalkomponenterna kan logiskt delas in i två kategorier: kod och innehåll.

Kod

Koden finns på lagringsplatsen API Management utvecklarportalen GitHub innehåller:

• Widgetar – representerar visuella element och kombinerar HTML, JavaScript, format förmåga, inställningar och innehållsmappning. Exempel är en bild, ett textstycke, ett formulär, en lista över API:er osv.
• Formatdefinitioner – ange hur widgetar kan formateras
• Motor – som genererar statiska webbsidor från portalinnehåll och skrivs i JavaScript
• Visuellt redigeringsprogram – gör det möjligt att anpassa och redigera i webbläsaren

Innehåll

Innehållet är indelat i två underkategorier: portalinnehåll och API Management innehåll.

Portalinnehållet är specifikt för portalen och innehåller:

• Sidor – till exempel landningssida, API-självstudier, blogginlägg

• Media – bilder, animeringar och annat filbaserat innehåll

• Layouter – mallar som matchas mot en URL och definierar hur sidor visas

• Format – värden för formatdefinitioner, till exempel teckensnitt, färger, kantlinjer

• Inställningar – konfigurationer somicon, webbplatsmetadata

  Portalinnehåll, förutom media, uttrycks som JSON-dokument.

API Management innehåller entiteter som API:er, åtgärder, produkter och prenumerationer.

Förstå portalens administrativa gränssnitt

Standardinnehåll

Om du öppnar portalen för första gången etableras standardinnehållet automatiskt i bakgrunden. Standardinnehåll har utformats för att demonstrera portalens funktioner och minimera de anpassningar som behövs för att anpassa din portal. Du kan lära dig mer om vad som ingår i portalinnehållet i översikten över Azure API Management developer portal.

Visuellt redigeringsprogram

Du kan anpassa innehållet i portalen med den visuella redigeraren.

• Med menyavsnitten till vänster kan du skapa eller ändra sidor, media, layouter, menyer, format eller webbplatsinställningar.
• Med menyalternativen längst ned kan du växla mellan visningsområdet (till exempel mobil eller skrivbord), visa de element i portalen som är synliga för autentiserade eller anonyma användare eller spara eller ångra åtgärder.
• Lägg till rader på en sida genom att klicka på en blå ikon med ett plustecken.
• Widgetar (till exempel text, bilder eller API:er) kan läggas till genom att trycka på en grå ikon med ett plustecken.
• Ordna om objekt på en sida med dra och släpp-interaktionen.

Layouter och sidor

Layouter definierar hur sidor visas. I standardinnehållet finns det till exempel två layouter: en gäller för startsidan och den andra för alla återstående sidor.

En layout tillämpas på en sida genom att matcha dess URL-mall med sidans URL. Till exempel tillämpas en layout med en URL-mall av på varje /wiki/* sida med segmentet i /wiki/ URL:en: /wiki/getting-started , /wiki/styles osv.

I föregående bild markeras innehåll som hör till layouten i blått, medan sidan är markerad i rött. Menyavsnitten är markerade.

Formatguide

Formatguiden är en panel som skapats med designers i åtanke. Det gör det möjligt att övervaka och formatera alla visuella element i portalen. Formateringen är hierarkisk – många element ärver egenskaper från andra element. Knappelement använder till exempel färger för text och bakgrund. Om du vill ändra en knapps färg måste du ändra den ursprungliga färgvarianten.

Om du vill redigera en variant markerar du den och väljer pennikonen som visas ovanpå den. När du har gjort ändringarna i popup-fönstret stänger du den.

Knappen Spara

När du gör en ändring i portalen måste du spara den manuellt genom att välja knappen Spara i menyn längst ned eller trycka på [Ctrl]+[S]. När du sparar ändringarna överförs det ändrade innehållet automatiskt till din API Management tjänst.

Anpassa portalens innehåll

Innan du gör din portal tillgänglig för besökare bör du anpassa det automatiskt genererade innehållet. Rekommenderade ändringar omfattar layouter, format och innehållet på startsidan.

Startsida

Standardsidan Start är fylld med platshållarinnehåll. Du kan antingen ta bort hela avsnitt som innehåller det här innehållet eller behålla strukturen och justera elementen ett i steg. Ersätt den genererade texten och bilderna med din egen och se till att länkarna pekar på önskade platser. Du kan redigera strukturen och innehållet på startsidan genom att:

• Dra och släppa sidelement till önskad placering på platsen.
• Välja text- och rubrikelement för att redigera och formatera innehåll.
• Kontrollera att knapparna pekar på rätt platser.

Layouter

Ersätt den automatiskt genererade logotypen i navigeringsfältet med din egen bild.

1. I utvecklarportalen väljer du Contoso-standardlogotypen längst upp till vänster i navigeringsfältet.
2. Välj ikonen Redigera.
3. Under avsnittet Main väljer du Källa.
4. I popup-programmet Media väljer du antingen:
   • En avbildning som redan har laddats upp i biblioteket, eller
   • Upload fil för att ladda upp en ny bildfil som ska användas, eller
   • Välj Ingen att förförse med hjälp av en logotyp.
5. Logotypen uppdateras i realtid.
6. Välj utanför popup-fönstret för att avsluta mediebiblioteket.
7. Klicka på Spara.

Styling

Även om du inte behöver justera några format kan du överväga att justera vissa element. Du kan till exempel ändra den primära färgen så att den matchar ditt varumärkes färg. Du kan göra det här på två sätt:

Övergripande webbplatsformat

1. I utvecklarportalen väljer du ikonen Format i det vänstra verktygsfältet.
2. Under avsnittet Färger väljer du det färgformatobjekt som du vill redigera.
3. Klicka på ikonen Redigera för det formatobjektet.
4. Välj färg från färgväljaren eller ange hexadexfärgkoden.
5. Lägg till och namnge ett annat färgobjekt genom att klicka på Lägg till färg.
6. Klicka på Spara.

Containerformat

1. På huvudsidan i utvecklarportalen väljer du containerbakgrunden.
2. Klicka på ikonen Redigera.
3. I popup-programmet ställer du in:
   • Bakgrunden som ska rensas, en bild, en viss färg eller en toning.
   • Containerns storlek, marginal och utfyllnad.
   • Containerposition och höjd.
4. Välj utanför popup-fönstret för att avsluta containerinställningarna.
5. Klicka på Spara.

Anpassningsexempel

I följande video visar vi hur du redigerar innehållet i portalen, anpassar webbplatsens utseende och publicerar ändringarna.

Publicera portalen

För att göra din portal och dess senaste ändringar tillgängliga för besökare måste du publicera den. Du kan publicera portalen i portalens administrativa gränssnitt eller från Azure Portal.

Publicera från det administrativa gränssnittet

1. Se till att du har sparat ändringarna genom att välja ikonen Spara.

2. I avsnittet Åtgärder på menyn väljer du Publicera webbplats. Den här åtgärden kan ta några minuter.

   

Publicera från Azure Portal

1. I Azure Portal navigerardu till din API Management instans.

2. I den vänstra menyn, under Utvecklarportalen, väljer du Portalöversikt.

3. I portalens översiktsfönster väljer du Publicera.

   

Besök den publicerade portalen

När du har publicerat portalen kan du komma åt den på samma URL som den administrativa panelen, till exempel https://contoso-api.developer.azure-api.net . Visa den i en separat webbläsarsession (med inkognitoläge eller privat surfläge) som en extern besökare.

Tillämpa CORS-principen på API:er

Om du vill att portalbesökarna ska kunna testa API:erna via den inbyggda interaktiva konsolen aktiverar du CORS (resursdelning mellan ursprung) på dina API:er. Mer information finns i Vanliga frågor och svar API Management Azure API Management utvecklarportalen.

Nästa steg

Läs mer om utvecklarportalen:

• Översikt över Azure API Management-utvecklarportalen
• Migrera till den nya utvecklarportalen från den inaktuella äldre portalen.