Oktatóanyag: Az új fejlesztői portál elérése és testreszabása

A KÖVETKEZŐKRE VONATKOZIK: Fejlesztő | Alapszintű | Alapszintű v2 | Standard | Standard v2 | Prémium | Prémium v2

A fejlesztői portál egy automatikusan létrehozott, teljesen testre szabható webhely az API-k dokumentációjával. Itt fedezhetik fel az API-kat az API-k felhasználói, megismerhetik azok használatát, és kérhetnek hozzáférést.

Ebben az oktatóanyagban az alábbiakkal fog megismerkedni:

• A fejlesztői portál felügyelt verziójának elérése
• Navigálás a felügyeleti felületen
• A tartalom testreszabása
• A módosítások közzététele
• A közzétett portál megtekintése

A fejlesztői portál funkcióival és beállításaival kapcsolatos további információkért tekintse meg az Azure API Management fejlesztői portál áttekintését.

Előfeltételek

• Tekintse át a következő rövid útmutatót: Azure API Management-példány létrehozása.
• API importálása és közzététele .

Hozzáférés a portálhoz rendszergazdaként

A fejlesztői portál felügyelt verziójának eléréséhez kövesse az alábbi lépéseket.

1. Az Azure Portalon keresse meg az API Management-példányt.

2. Ha a példányt egy v2-es szolgáltatási szinten hozta létre, először engedélyezze a fejlesztői portált.

   1. A bal oldali menü Fejlesztői portál területén válassza a Portál beállításai lehetőséget.
   2. A Portál beállításai ablakban válassza az Engedélyezve lehetőséget. Válassza a Mentés lehetőséget.

   A fejlesztői portál engedélyezése eltarthat néhány percig.

3. A bal oldali menü Fejlesztői portál területén válassza a Portál áttekintése lehetőséget. Ezután válassza a Fejlesztői portál gombot a felső navigációs sávon. Megnyílik egy új böngészőlap a portál rendszergazdai verziójával.

Megjegyzés:

• Továbbfejlesztjük a fejlesztői portált a Fluent felhasználói felület webes összetevőivel a React keretrendszerben. A portál első megnyitásakor megjelenő helyőrző tartalmat is frissítjük. A portál megjelenése kissé eltérhet a jelen cikkben szereplő képernyőképektől, de a funkció egységes marad.
• Ha az előző összetevőkre épülő portálverziót használ, a bal oldali menü alján megjelenik egy előzetes verziójú új felhasználói felületi kialakítási beállítás. Engedélyezze ezt a beállítást a legújabb felület kipróbálásához.
  
  

A portál felügyeleti felületének ismertetése

Rendszergazdaként testre szabhatja a portál tartalmát a vizualizációszerkesztővel.

• A bal oldali menübeállítások használatával lapokat, médiatartalmakat, elrendezéseket, menüket, stílusokat vagy webhelybeállításokat hozhat létre vagy módosíthat.

• Felül váltson a nézetportok között (különböző méretű képernyők esetén), vagy tekintse meg a portál különböző csoportokban lévő felhasználói számára látható elemeit. Előfordulhat például, hogy bizonyos lapokat csak bizonyos termékekhez társított csoportoknak vagy adott API-k elérésére jogosult felhasználóknak szeretne megjeleníteni.

• Emellett mentheti vagy visszavonhatja a végrehajtott módosításokat, vagy közzéteheti a webhelyet.

Tipp.

A portál testreszabásának még nagyobb rugalmasságáért használhatja a WordPress nyílt forráskódú fejlesztői portál beépülő modulját. Használja ki a WordPress webhelyfunkcióit a tartalom honosításához, a menük testreszabásához, az egyéni stíluslapok alkalmazásához stb.

Kép hozzáadása a médiatárhoz

A fejlesztői portálon saját rendszerképeket és egyéb médiatartalmat érdemes használnia, hogy tükrözze a szervezet védjegyét. Ha egy használni kívánt kép még nem szerepel a portál médiatárában, adja hozzá a fejlesztői portálhoz:

1. A vizualizációszerkesztő bal oldali menüjében válassza a Média lehetőséget.
2. Tegye az alábbiak egyikét:
   • Válassza a Fájl feltöltése lehetőséget, és válasszon ki egy helyi képfájlt a számítógépen.
   • Válassza a Hivatkozás fájl lehetőséget. Adja meg a képfájl hivatkozási URL-címét és egyéb adatait. Ezután válassza a Letöltés lehetőséget.
3. Válassza a Bezárás lehetőséget a médiatárból való kilépéshez.

Tipp.

A képet közvetlenül a vizualizációszerkesztő ablakában húzva és húzva is hozzáadhatja a médiatárhoz.

Az alapértelmezett embléma cseréje a kezdőlapon

A navigációs sáv bal felső sarkában található egy helyőrző embléma. Lecserélheti a saját emblémájára, hogy megfeleljen a szervezet arculatának.

1. A fejlesztői portálon válassza ki az alapértelmezett emblémát a navigációs sáv bal felső részén.
2. Válassza a Szerkesztés lehetőséget.
3. A Kép előugró ablakban, a Fő területen válassza a Forrás lehetőséget.
4. A Média előugró ablakban válassza az alábbiak egyikét:
   • Már feltöltött kép a médiatárba
   • Fájl feltöltése új képfájl feltöltéséhez a médiatárba
   • Nincs , ha nem szeretne emblémát használni
5. Az embléma valós időben frissül.
6. Válassza ki az előugró ablakokat a médiatárból való kilépéshez.
7. A felső sávon válassza a Mentés lehetőséget.

Tartalom szerkesztése a kezdőlapon

Az alapértelmezett kezdőlap és más lapok helyőrző szöveggel és más képekkel vannak ellátva. Eltávolíthatja a tartalmat tartalmazó teljes szakaszokat, vagy megtarthatja a struktúrát, és egyenként módosíthatja az elemeket. Cserélje le a létrehozott szöveget és képeket a saját helyére, és győződjön meg arról, hogy a hivatkozások a kívánt helyekre mutatnak.

A létrehozott lapok szerkezetének és tartalmának többféleképpen is szerkeszthető. Példa:

• Jelölje ki a meglévő szöveg- és címsorelemeket a tartalom szerkesztéséhez és formázásához.

• Adjon hozzá egy szakaszt egy laphoz úgy, hogy egy üres területre mutat, majd egy pluszjellel ellátott kék ikonra kattint. Válasszon több szakaszelrendezés közül.

  

• Adjon hozzá egy widgetet (például szöveg, kép, egyéni widget vagy API-lista) egy üres területre mutatva, majd kattintson egy pluszjellel ellátott szürke ikonra.

  

• Egy lap elemeinek átrendezése húzással.

A webhely elsődleges színének szerkesztése

A színek, színátmenetek, tipográfia, gombok és egyéb felhasználói felületi elemek módosításához szerkessze a webhelystílusokat. Módosíthatja például a navigációs sávban, a gombokban és más elemekben használt elsődleges színt, hogy megfeleljen a szervezet arculatának.

1. A fejlesztői portálon, a vizualizációszerkesztő bal oldali menüjében válassza a Stílusok lehetőséget.
2. A Színek szakaszban jelölje ki a szerkeszteni kívánt színstílus-elemet. Válassza például az Elsődleges lehetőséget.
3. Válassza a Szín szerkesztése lehetőséget.
4. Válassza ki a színválasztó színét, vagy adja meg a szín hexa kódot.
5. A felső sávon válassza a Mentés lehetőséget.

A frissített szín valós időben lesz alkalmazva a webhelyre.

Tipp.

Ha szeretné, adjon hozzá és adjon nevet egy másik színelemnek a Stílusok lapon a + Szín hozzáadása lehetőség kiválasztásával.

A háttérkép módosítása a kezdőlapon

A portál kezdőlapján lévő hátteret a szervezet arculatának megfelelő képre vagy színre módosíthatja. Ha még nem töltött fel másik képet a médiatárba, feltöltheti azt a háttérkép módosítása előtt vagy a módosításkor.

1. A fejlesztői portál kezdőlapján kattintson a jobb felső sarokban, hogy a felső szakasz ki legyen emelve a sarkokban, és megjelenik egy előugró menü.

2. Az előugró menü Szerkesztés elemétől jobbra válassza a felfelé mutató nyilat (Váltás szülőre).

3. Válassza a Szerkesztés szakaszt.

4. A Szakasz előugró ablak Háttér területén válassza ki az ikonok egyikét:

   

   • Háttér törlése háttérkép eltávolításához
   • Háttérkép, kép kiválasztása a médiatárból, vagy új kép feltöltése
   • Háttérszín, szín kiválasztása a színválasztóból vagy szín törlése
   • Háttérátmenet, színátmenet kiválasztása a webhelystílusok lapról vagy színátmenet törlése

5. A Háttér méretezése területen válasszon a háttérnek megfelelő beállítással.

6. A felső sávon válassza a Mentés lehetőséget.

Az alapértelmezett elrendezés módosítása

A fejlesztői portál elrendezésekkel határozza meg az olyan gyakori tartalomelemeket, mint a navigációs sávok és az élőlábak a kapcsolódó oldalak csoportjain. Minden lap automatikusan megfelel egy URL-sablonon alapuló elrendezésnek.

A fejlesztői portál alapértelmezés szerint két elrendezéssel rendelkezik:

• Kezdőlap – a kezdőlaphoz használatos (URL-sablon /)

• Alapértelmezett – az összes többi laphoz (URL-sablonhoz /*) használható.

A fejlesztői portál bármely lapjának elrendezését módosíthatja, és új elrendezéseket határozhat meg, amelyek más URL-sablonoknak megfelelő lapokra alkalmazhatók.

Ha például módosítani szeretné az Alapértelmezett elrendezés navigációs sávján használt emblémát, hogy megfeleljen a szervezet arculatának:

1. A vizualizációszerkesztő bal oldali menüjében válassza a Lapok lehetőséget.
2. Válassza az Elrendezések lapot, és válassza az Alapértelmezett lehetőséget.
3. Jelölje ki a bal felső sarokban látható emblémát, és válassza a Szerkesztés lehetőséget.
4. A Fő területen válassza a Forrás lehetőséget.
5. A Média előugró ablakban válassza az alábbiak egyikét:
   • Már feltöltött kép a médiatárba
   • Fájl feltöltése új képfájl feltöltéséhez a médiafájlba, amelyet kiválaszthat
   • Nincs , ha nem szeretne emblémát használni
6. Az embléma valós időben frissül.
7. Válassza ki az előugró ablakokat a médiatárból való kilépéshez.
8. A felső sávon válassza a Mentés lehetőséget.

Navigációs menük szerkesztése

A fejlesztői portál lapjainak tetején található navigációs menük szerkesztésével módosíthatja a menüelemek sorrendjét, hozzáadhat elemeket, vagy eltávolíthatja az elemeket. Módosíthatja a menüelemek nevét, valamint az URL-címet vagy az általuk megjelenített egyéb tartalmakat is.

A fejlesztői portál Alapértelmezett és Kezdőlap elrendezései például két menüt jelenítenek meg a fejlesztői portál vendégfelhasználói számára:

• a kezdőlapra, API-kra és termékekre mutató hivatkozásokat tartalmazó főmenü
• egy névtelen felhasználói menü, amelyen a bejelentkezési és regisztrációs oldalakra mutató hivatkozások találhatók.

Előfordulhat azonban, hogy testre szeretné szabni őket. Ha például független módon szeretne felhasználókat meghívni a webhelyére, letilthatja a regisztrációs hivatkozást a névtelen felhasználói menüben.

1. A vizualizációszerkesztő bal oldali menüjében válassza a Webhely menüt.
2. A bal oldalon bontsa ki a Névtelen felhasználói menüt.
3. Válassza a Regisztráció melletti beállításokat (fogaskerék ikon), majd a Törlés lehetőséget.
4. Válassza a Mentés lehetőséget.

Webhelybeállítások szerkesztése

Szerkessze a fejlesztői portál webhelybeállítását a webhely nevének, leírásának és egyéb adatainak módosításához.

1. A vizualizációszerkesztő bal oldali menüjében válassza a Beállítások lehetőséget.
2. A Beállítások előugró ablakban adja meg a módosítani kívánt webhely metaadatait. Ha szeretné, állítson be egy favicont a webhelyhez egy képből a médiatárban.
3. A felső sáv mentési sávjában.

Tipp.

Ha módosítani szeretné a webhely tartománynevét, először be kell állítania egy egyéni tartományt az API Management-példányban. További információ az egyéni tartománynevekről az API Managementben.

A portál közzététele

Ha elérhetővé szeretné tenni a portált és annak legújabb módosításait a látogatók számára, közzé kell tennie .

Közzététel a fejlesztői portál felügyeleti felületén:

1. A Mentés gombra kattintva győződjön meg arról, hogy mentette a módosításokat.

2. A felső menüben válassza a Webhely közzététele lehetőséget. A művelet eltarthat néhány percig.

   

Tipp.

Egy másik lehetőség a webhely közzététele az Azure Portalon. Az AZURE Portal API Management-példányának Portál áttekintése lapján válassza a Közzététel lehetőséget.

A közzétett portál felkeresése

Ha meg szeretné tekinteni a módosításokat a portál közzététele után, a felügyeleti panel url-címével megegyező URL-címen érheti el, például https://contoso-api.developer.azure-api.net. Tekintse meg egy külön böngésző munkamenetben (inkognitó vagy privát böngészési módban) külső látogatóként.

A CORS-szabályzat alkalmazása API-kra

Ha azt szeretné, hogy a portál látogatói teszteljék az API-kat a beépített interaktív konzolon, engedélyezze a CORS-t (forrásközi erőforrás-megosztást) az API-kon, ha még nem tette meg. Az Azure Portal API Management-példányának Portál áttekintése lapján válassza az Enable CORS (CORS engedélyezése) lehetőséget. További információ.

Következő lépések

Ez az oktatóanyag bemutatta, hogyan végezheti el az alábbi műveleteket:

• A fejlesztői portál felügyelt verziójának elérése
• Navigálás a felügyeleti felületen
• A tartalom testreszabása
• A módosítások közzététele
• A közzétett portál megtekintése

Folytassa a következő oktatóanyaggal:

API-k importálása és kezelése a Visual Studio Code használatával

A fejlesztői portál kapcsolódó tartalmai:

• Az Azure API Management fejlesztői portál áttekintése
• Hitelesítés konfigurálása a fejlesztői portálon felhasználónevekkel és jelszavakkal, Microsoft Entra-azonosítóval vagy Külső Microsoft Entra-azonosítóval.
• További információ a fejlesztői portál funkcióinak testreszabásáról és kibővítéséről .