Tutorial: Mengakses dan menyesuaikan portal pengembang

  • Artikel

BERLAKU UNTUK: Pengembang | Dasar | Dasar v2 | Standar | Standar v2 | Premium

Portal pengembang adalah situs web yang dibuat secara otomatis dan dapat disesuaikan sepenuhnya dengan dokumentasi API Anda. Di sinilah konsumen API dapat menemukan API Anda, mempelajari cara menggunakannya, dan meminta akses.

Dalam tutorial ini, Anda akan mempelajari cara:

  • Mengakses versi portal pengembang yang dikelola
  • Menavigasi antarmuka administratifnya
  • Menyesuaikan konten
  • Menerbitkan perubahan
  • Menampilkan portal yang diterbitkan

Untuk informasi selengkapnya tentang fitur dan opsi portal pengembang, lihat Gambaran umum portal pengembang Azure API Management.

Cuplikan layar portal pengembang API Management - mode administrator.

Prasyarat

Mengakses portal sebagai administrator

Ikuti langkah-langkah ini untuk mengakses versi terkelola portal pengembang.

  1. Di Portal Microsoft Azure, navigasikan ke instans API Management Anda.

  2. Jika Anda membuat instans di tingkat layanan v2 yang mendukung portal pengembang, pertama-tama aktifkan portal pengembang.

    1. Di menu sebelah kiri, di bawah Portal pengembang, pilih Pengaturan portal.
    2. Di jendela Pengaturan portal, pilih Diaktifkan. Pilih Simpan.

    Mungkin perlu waktu beberapa menit untuk mengaktifkan portal pengembang.

  3. Di menu sebelah kiri, di bawah Portal pengembang, pilih Gambaran umum portal. Lalu pilih tombol portal Pengembang di bilah navigasi atas. Tab browser baru dengan versi administratif portal akan terbuka.

Memahami antarmuka administratif portal

Sebagai administrator, Anda dapat menyesuaikan konten portal menggunakan editor visual.

Cuplikan layar editor visual di portal pengembang.

  • Gunakan opsi menu di sebelah kiri untuk membuat atau mengubah halaman, media, tata letak, menu, gaya, atau pengaturan situs web.

  • Di bagian atas, beralih antar viewports (untuk layar dengan ukuran yang berbeda), atau lihat elemen portal yang terlihat oleh pengguna di grup yang berbeda. Misalnya, Anda mungkin ingin menampilkan halaman tertentu hanya ke grup yang terkait dengan produk tertentu, atau kepada pengguna yang dapat mengakses API tertentu.

  • Selain itu, simpan atau batalkan perubahan yang Anda buat, atau terbitkan situs web.

Menambahkan gambar ke pustaka media

Anda mungkin ingin menggunakan gambar Anda sendiri dan konten media lainnya di portal pengembang untuk mencerminkan branding organisasi Anda. Jika gambar yang ingin Anda gunakan belum ada di pustaka media portal, tambahkan di portal pengembang:

  1. Di menu sebelah kiri editor visual, pilih Media.
  2. Lakukan salah satu hal berikut ini:
    • Pilih Unggah file dan pilih file gambar lokal di komputer Anda.
    • Pilih Tautkan file. Masukkan URL Referensi ke file gambar dan detail lainnya. Lalu pilih Unduh.
  3. Pilih Tutup untuk keluar dari pustaka media.

Tip

Anda juga dapat menambahkan gambar ke pustaka media dengan menyeret dan menjatuhkannya langsung di jendela editor visual.

Ganti logo default di halaman beranda

Logo tempat penampung disediakan di sudut kiri atas bilah navigasi. Anda dapat menggantinya dengan logo Anda sendiri agar sesuai dengan merek organisasi Anda.

  1. Di portal pengembang, pilih logo Contoso default di bagian kiri atas bilah navigasi.
  2. Pilih Edit.
  3. Di pop-up Gambar, di bawah Utama, pilih Sumber.
  4. Di pop-up Media, pilih salah satu hal berikut ini:
    • Gambar yang sudah diunggah di pustaka media Anda
    • Mengunggah file untuk mengunggah file gambar baru ke pustaka media Anda
    • Tidak ada jika Anda tidak ingin menggunakan logo
  5. Logo diperbarui secara real time.
  6. Pilih di luar jendela pop-up untuk keluar dari pustaka media.
  7. Di bilah atas, pilih Simpan.

Mengedit konten di halaman beranda

Halaman Beranda default dan halaman lainnya disediakan dengan teks tempat penampung dan gambar lainnya. Anda dapat menghapus seluruh bagian yang berisi konten ini atau mempertahankan struktur dan menyesuaikan elemen satu per satu. Ganti teks dan gambar yang dihasilkan dengan teks dan gambar Anda sendiri dan pastikan tautan apa pun menunjuk ke lokasi yang diinginkan.

Edit struktur dan konten halaman yang dihasilkan dengan beberapa cara. Contohnya:

  • Pilih elemen teks dan judul yang ada untuk mengedit dan memformat konten.

  • Tambahkan bagian ke halaman dengan mengarahkan mouse ke atas area kosong lalu klik ikon biru dengan tanda plus. Pilih dari beberapa tata letak bagian.

    Cuplikan layar memperlihatkan ikon tambahkan bagian di portal pengembang.

  • Tambahkan widget (misalnya, teks, gambar, widget kustom, atau daftar API) dengan mengarahkan mouse ke area kosong, lalu klik ikon abu-abu dengan tanda plus.

    Cuplikan layar memperlihatkan ikon tambahkan widget di portal pengembang.

  • Susun ulang item dalam halaman dengan seret dan letakkan.

Mengedit warna utama situs

Untuk mengubah warna, gradien, tipografi, tombol, dan elemen antarmuka pengguna lainnya di portal pengembang, edit gaya situs. Misalnya, ubah warna utama yang digunakan di bilah navigasi, tombol, dan elemen lainnya agar sesuai dengan merek organisasi Anda.

  1. Di portal pengembang, di menu sebelah kiri editor visual, pilih Gaya.
  2. Di bagian Warna, pilih gaya warna item yang ingin Anda edit. Misalnya, pilih Utama.
  3. Pilih Edit warna.
  4. Pilih warna dari pemilih warna, atau masukkan kode heksa warna.
  5. Di bilah atas, pilih Simpan.

Warna yang diperbarui diterapkan ke situs secara real time.

Tip

Jika mau, tambahkan dan beri nama item warna lain dengan memilih + Tambahkan warna pada halaman Gaya .

Mengubah gambar latar belakang di halaman beranda

Anda dapat mengubah latar belakang di halaman beranda portal Anda menjadi gambar atau warna yang cocok dengan merek organisasi Anda. Jika Anda belum mengunggah gambar yang berbeda ke pustaka media, Anda dapat mengunggahnya sebelum mengubah gambar latar belakang, atau saat mengubahnya.

  1. Pada beranda portal pengembang, klik di sudut kanan atas sehingga bagian atas disorot di sudut dan menu pop-up muncul.

  2. Di sebelah kanan artikel Edit di menu pop-up, pilih panah atas-bawah (Beralih ke induk).

  3. Pilih Edit bagian.

  4. Di pop-up Bagian , di bawah Latar Belakang, pilih salah satu ikon:

    Cuplikan layar pengaturan latar belakang di portal pengembang.

    • Hapus latar belakang, untuk menghapus gambar latar belakang
    • Gambar latar belakang, untuk memilih gambar dari pustaka media, atau untuk mengunggah gambar baru
    • Warna latar belakang, untuk memilih warna dari pemilih warna, atau untuk menghapus warna
    • Gradien latar belakang, untuk memilih gradien dari halaman gaya situs Anda, atau untuk menghapus gradien

  5. Di bawah Ukuran latar belakang, buat pilihan yang sesuai untuk latar belakang Anda.

  6. Di bilah atas, pilih Simpan.

Mengubah tata letak default

Portal pengembang menggunakan tata letak untuk menentukan elemen konten umum seperti bilah navigasi dan footer pada grup halaman terkait. Setiap halaman secara otomatis dicocokkan dengan tata letak berdasarkan templat URL.

Secara default, portal pengembang dilengkapi dengan dua tata letak:

  • Beranda - digunakan untuk halaman beranda (templat /URL )

  • Default - digunakan untuk semua halaman lain (templat /*URL ).

Cuplikan layar tata letak default di portal pengembang.

Anda dapat mengubah tata letak untuk halaman apa pun di portal pengembang dan menentukan tata letak baru untuk diterapkan ke halaman yang cocok dengan templat URL lainnya.

Misalnya, untuk mengubah logo yang digunakan di bilah navigasi tata letak Default agar sesuai dengan merek organisasi Anda:

  1. Di menu sebelah kiri editor visual, pilih Halaman.
  2. Pilih tab Tata Letak , dan pilih Default.
  3. Pilih gambar logo di sudut kiri atas dan pilih Edit.
  4. Di bawah Utama, pilih Sumber.
  5. Di jendela pop-up Media, pilih salah satu hal berikut ini:
    • Gambar yang sudah diunggah di pustaka media Anda
    • Unggah file untuk mengunggah file gambar baru ke file media yang dapat Anda pilih
    • Tidak ada jika Anda tidak ingin menggunakan logo
  6. Logo diperbarui secara real time.
  7. Pilih di luar jendela pop-up untuk keluar dari pustaka media.
  8. Di bilah atas, pilih Simpan.

Edit menu navigasi

Anda dapat mengedit menu navigasi di bagian atas halaman portal pengembang untuk mengubah urutan item menu, menambahkan item, atau menghapus item. Anda juga dapat mengubah nama item menu dan URL atau konten lain yang mereka arahkan.

Misalnya, tata letak Default dan Beranda untuk portal pengembang menampilkan dua menu kepada pengguna tamu portal pengembang:

  • menu utama dengan tautan ke Beranda, API, dan Produk
  • menu pengguna anonim dengan tautan ke halaman Masuk dan Daftar .

Namun, Anda mungkin ingin menyesuaikannya. Misalnya, jika Anda ingin mengundang pengguna secara independen ke situs Anda, Anda dapat menonaktifkan tautan Daftar di menu pengguna anonim.

Cuplikan layar menu navigasi default di portal pengembang.

  1. Di menu sebelah kiri editor visual, pilih menu Situs.
  2. Di sebelah kiri, perluas menu pengguna Anonim.
  3. Pilih pengaturan (ikon gigi) di samping Daftar, dan pilih Hapus.
  4. Pilih Simpan.

Mengedit pengaturan situs

Edit pengaturan situs untuk portal pengembang untuk mengubah nama situs, deskripsi, dan detail lainnya.

  1. Di menu sebelah kiri editor visual, pilih Pengaturan.
  2. Di pop-up Pengaturan, masukkan metadata situs yang ingin Anda ubah. Secara opsional, siapkan favicon untuk situs dari gambar di pustaka media Anda.
  3. Di bilah atas, Simpan.

Tip

Jika Anda ingin mengubah nama domain situs, Anda harus terlebih dahulu menyiapkan domain kustom di instans API Management Anda. Pelajari selengkapnya tentang nama domain kustom di API Management.

Menerbitkan portal

Untuk membuat portal Anda dan perubahan terbarunya tersedia untuk pengunjung, Anda perlu menerbitkannya.

Untuk menerbitkan dari antarmuka administratif portal pengembang:

  1. Pastikan Anda menyimpan perubahan dengan memilih tombol Simpan .

  2. Di menu di bagian atas, pilih Terbitkan situs. Operasi ini mungkin memakan waktu beberapa menit.

    Cuplikan layar tombol Terbitkan situs web di portal pengembang.

Tip

Opsi lain adalah menerbitkan situs dari portal Azure. Pada halaman Ringkasan portal instans API Management Anda di portal Azure, pilih Terbitkan.

Mengunjungi portal yang diterbitkan

Untuk melihat perubahan setelah Anda menerbitkan portal, akses di URL yang sama dengan panel administratif, misalnya https://contoso-api.developer.azure-api.net. Lihat dalam sesi browser terpisah (menggunakan mode penelusuran incognito atau pribadi) sebagai pengunjung eksternal.

Menerapkan kebijakan CORS pada API

Untuk memungkinkan pengunjung portal Menguji API melalui konsol interaktif bawaan, aktifkan CORS (berbagi sumber daya lintas asal) di API Anda, jika Anda belum melakukannya. Pada halaman Ringkasan portal instans API Management Anda di portal Azure, pilih Aktifkan CORS. Pelajari selengkapnya.

Langkah berikutnya

Dalam tutorial ini, Anda mempelajari cara:

  • Mengakses versi portal pengembang yang dikelola
  • Menavigasi antarmuka administratifnya
  • Menyesuaikan konten
  • Menerbitkan perubahan
  • Menampilkan portal yang diterbitkan

Melanjutkan ke tutorial berikutnya:

Mengimpor dan mengelola API menggunakan Visual Studio Code

Lihat konten terkait tentang portal pengembang: