البرنامج التعليمي: الوصول وتخصيص مدخل المطور

ينطبق على: المطور | أساسي | الإصدار 2 الأساسي | قياسي | الإصدار 2 القياسي | قسط

مدخل المطور هو موقع ويب يتم إنشاؤه تلقائياً وقابل للتخصيص بالكامل مع وثائق واجهات برمجة التطبيقات الخاصة بك. حيث يمكن لمستهلكي واجهة برمجة التطبيقات اكتشاف واجهات برمجة التطبيقات الخاصة بك، وتعلم كيفية استخدامها، وطلب الوصول.

في هذا البرنامج التعليمي، تتعلم كيفية:

• الوصول إلى الإصدار المدار من مدخل المطور
• التنقل في واجهتها الإدارية
• تخصيص المحتوى
• انشر التغيرات
• عرض المدخل المنشور

لمزيد من المعلومات حول ميزات مدخل المطور وخياراته، راجع نظرة عامة على مدخل مطور Azure API Management.

المتطلبات الأساسية

• أكمل التشغيل السريع التالي:إنشاء مثيل لـ Azure API Management.
• استيراد واجهة برمجة تطبيقات ونشرها .

الوصول إلى المدخل كمسؤول

اتبع هذه الخطوات للوصول إلى الإصدار المدار من مدخل المطور.

1. في مدخل Azure، انتقل إلى مثيل API Management الخاص بك.

2. إذا قمت بإنشاء المثيل الخاص بك في طبقة خدمة v2 التي تدعم مدخل المطور، فبادر أولا بتمكين مدخل المطور.

   1. في القائمة اليسرى، ضمن مدخل المطور، حدد إعدادات المدخل.
   2. في نافذة Portal settings ، حدد Enabled. حدد حفظ.

   قد يستغرق الأمر بضع دقائق لتمكين مدخل المطور.

3. في القائمة اليسرى، ضمن مدخل Developer، حدد Portal overview. ثم حدد زر مدخل المطور في شريط التنقل العلوي. سيتم فتح علامة تبويب مستعرض جديدة مع إصدار إداري للمدخل.

فهم الواجهة الإدارية للمدخل

بصفتك مسؤولا، يمكنك تخصيص محتوى المدخل باستخدام المحرر المرئي.

• استخدم خيارات القائمة على اليسار لإنشاء صفحات أو وسائط أو تخطيطات أو قوائم أو أنماط أو إعدادات موقع ويب أو تعديلها.

• في الجزء العلوي، قم بالتبديل بين موانئ العرض (للشاشات من أحجام مختلفة)، أو اعرض عناصر المدخل المرئية للمستخدمين في مجموعات مختلفة. على سبيل المثال، قد ترغب في عرض صفحات معينة فقط للمجموعات المقترنة بمنتجات معينة، أو للمستخدمين الذين يمكنهم الوصول إلى واجهات برمجة تطبيقات معينة.

• أيضا، احفظ التغييرات التي تجريها أو تراجعها، أو انشر موقع الويب.

تلميح

لمزيد من المرونة في تخصيص المدخل، يمكنك استخدام مكون إضافي لمدخل المطور مفتوح المصدر ل Wordpress. استفد من قدرات الموقع في WordPress لترجمة المحتوى وتخصيص القوائم وتطبيق أوراق الأنماط المخصصة والمزيد.

إضافة صورة إلى مكتبة الوسائط

ستحتاج إلى استخدام صورك الخاصة ومحتوى الوسائط الأخرى في مدخل المطور لتعكس العلامة التجارية لمؤسستك. إذا لم تكن الصورة التي تريد استخدامها موجودة بالفعل في مكتبة وسائط المدخل، أضفها في مدخل المطور:

1. في القائمة اليسرى من المحرر المرئي، حدد الوسائط.
2. قم بأحد الإجراءات التالية:
   • حدد تحميل ملف وحدد ملف صورة محلي على الكمبيوتر.
   • حدد Link file. أدخل عنوان URL مرجعي لملف الصورة وتفاصيل أخرى. ثم حدد تنزيل.
3. حدد إغلاق للخروج من مكتبة الوسائط.

تلميح

يمكنك أيضا إضافة صورة إلى مكتبة الوسائط عن طريق سحبها وإفلاتها مباشرة في نافذة المحرر المرئي.

استبدال الشعار الافتراضي على الصفحة الرئيسية

يتم توفير شعار عنصر نائب في الزاوية العلوية اليمنى من شريط التنقل. يمكنك استبداله بشعارك الخاص لمطابقة العلامة التجارية لمؤسستك.

1. في مدخل المطور، حدد شعار Contoso الافتراضي في شريط التنقل أعلى اليسار.
2. حدد تحرير.
3. في النافذة المنبثقة صورة ، ضمن Main، حدد Source.
4. في النافذة المنبثقة الوسائط ، حدد أحد الإجراءات التالية:
   • صورة تم تحميلها بالفعل في مكتبة الوسائط
   • تحميل ملف لتحميل ملف صورة جديد إلى مكتبة الوسائط
   • لا شيء إذا كنت لا تريد استخدام شعار
5. يتم تحديث الشعار في الوقت الحقيقي.
6. حدد خارج النوافذ المنبثقة للخروج من مكتبة الوسائط.
7. في الشريط العلوي، حدد حفظ.

تحرير المحتوى على الصفحة الرئيسية

يتم توفير الصفحة الرئيسية الافتراضية والصفحات الأخرى مع نص نائب وصور أخرى. يمكنك إما إزالة مقاطع كاملة تشمل هذا المحتوى أو الاحتفاظ بالبنية وضبط العناصر واحداً تلو الآخر. استبدل النص والصور التي تم إنشاؤها بالنص الخاص بك وتأكد من أن أي ارتباطات تشير إلى المواقع المطلوبة.

تحرير بنية الصفحات التي تم إنشاؤها ومحتواها بعدة طرق. على سبيل المثال:

• حدد عناصر النص والعنوان الموجودة لتحرير المحتوى وتنسيقه.

• أضف مقطعا إلى صفحة عن طريق تمرير الماوس فوق منطقة فارغة ثم انقر فوق أيقونة زرقاء بعلامة الجمع. اختر من بين العديد من تخطيطات المقاطع.

  

• أضف عنصر واجهة مستخدم (على سبيل المثال، النص أو الصورة أو عنصر واجهة المستخدم المخصص أو قائمة واجهات برمجة التطبيقات) عن طريق تمرير الماوس فوق منطقة فارغة، ثم انقر فوق أيقونة رمادية بعلامة الجمع.

  

• إعادة ترتيب العناصر في صفحة عن طريق السحب والإفلات.

تحرير اللون الأساسي للموقع

لتغيير الألوان والتدرجات والطباعة والأزرار وعناصر واجهة المستخدم الأخرى في مدخل المطور، قم بتحرير أنماط الموقع. على سبيل المثال، قم بتغيير اللون الأساسي المستخدم في شريط التنقل والأزرار والعناصر الأخرى لمطابقة العلامة التجارية لمؤسستك.

1. في مدخل المطور، في القائمة اليسرى من المحرر المرئي، حدد أنماط.
2. ضمن قسم "Colors"، حدد عنصر نمط اللون الذي تريد تحريره. على سبيل المثال، حدد Primary.
3. حدد تحرير اللون.
4. حدد اللون من منتقي الألوان، أو أدخل رمز اللون السداسي عشري.
5. في الشريط العلوي، اختر حفظ.

يتم تطبيق اللون المحدث على الموقع في الوقت الفعلي.

تلميح

إذا أردت، أضف عنصر لون آخر وقم بتسمية هذا العنصر عن طريق تحديد + إضافة لون في صفحة الأنماط.

تغيير صورة الخلفية على الصفحة الرئيسية

يمكنك تغيير الخلفية على الصفحة الرئيسية لمدخلك إلى صورة أو لون يتطابق مع العلامة التجارية لمؤسستك. إذا لم تكن قد قمت بالفعل بتحميل صورة مختلفة إلى مكتبة الوسائط، فيمكنك تحميلها قبل تغيير صورة الخلفية، أو عند تغييرها.

1. في الصفحة الرئيسية لمدخل المطور، انقر في الزاوية العلوية اليسرى بحيث يتم تمييز القسم العلوي في الزوايا وتظهر قائمة منبثقة.

2. على يمين مقالة تحرير في القائمة المنبثقة، حدد السهم لأعلى لأسفل (التبديل إلى الأصل).

3. حدد تحرير المقطع.

4. في النافذة المنبثقة مقطع ، ضمن الخلفية، حدد أحد الأيقونات:

   

   • مسح الخلفية، لإزالة صورة خلفية
   • صورة خلفية، لتحديد صورة من مكتبة الوسائط، أو لتحميل صورة جديدة
   • لون الخلفية، لتحديد لون من منتقي الألوان، أو لمسح لون
   • تدرج في الخلفية، لتحديد تدرج من صفحة أنماط الموقع، أو لمسح تدرج

5. ضمن تغيير حجم الخلفية، قم بإجراء تحديد مناسب لخلفيتك.

6. في الشريط العلوي، حدد حفظ.

تغيير التخطيط الافتراضي

يستخدم مدخل المطور التخطيطات لتعريف عناصر المحتوى الشائعة مثل أشرطة التنقل والتذييلات على مجموعات من الصفحات ذات الصلة. تتم مطابقة كل صفحة تلقائيا مع تخطيط يستند إلى قالب URL.

بشكل افتراضي، يأتي مدخل المطور مع تخطيطين:

• الصفحة الرئيسية - تستخدم للصفحة الرئيسية (قالب /URL )

• الافتراضي - يستخدم لجميع الصفحات الأخرى (قالب /*URL).

يمكنك تغيير تخطيط أي صفحة في مدخل المطور وتحديد تخطيطات جديدة لتطبيقها على الصفحات التي تطابق قوالب URL الأخرى.

على سبيل المثال، لتغيير الشعار المستخدم في شريط التنقل للتخطيط الافتراضي لمطابقة العلامة التجارية لمؤسستك:

1. في القائمة اليسرى للمحرر المرئي، حدد Pages.
2. حدد علامة التبويب تخطيطات، وحدد افتراضي.
3. حدد صورة الشعار في الزاوية العلوية اليمنى وحدد تحرير.
4. ضمن Main، حدد Source.
5. في النوافذ المنبثقة للوسائط ، حدد أحد الإجراءات التالية:
   • صورة تم تحميلها بالفعل في مكتبة الوسائط
   • تحميل ملف لتحميل ملف صورة جديد إلى ملف الوسائط الذي يمكنك تحديده
   • لا شيء إذا كنت لا تريد استخدام شعار
6. يتم تحديث الشعار في الوقت الحقيقي.
7. حدد خارج النوافذ المنبثقة للخروج من مكتبة الوسائط.
8. في الشريط العلوي، حدد حفظ.

تحرير قوائم التنقل

يمكنك تحرير قوائم التنقل في أعلى صفحات مدخل المطور لتغيير ترتيب عناصر القائمة أو إضافة عناصر أو إزالة العناصر. يمكنك أيضا تغيير اسم عناصر القائمة وعنوان URL أو المحتوى الآخر الذي تشير إليه.

على سبيل المثال، يعرض التخطيطان الافتراضي والمنزلي لمدخل المطور قائمتين للمستخدمين الضيوف لمدخل المطور:

• قائمة رئيسية مع ارتباطات إلى الصفحة الرئيسية وواجهات برمجة التطبيقات والمنتجات
• قائمة مستخدم مجهولة مع ارتباطات إلى صفحات تسجيل الدخول والاشتراك.

ومع ذلك، قد تحتاج إلى تخصيصها. على سبيل المثال، إذا كنت تريد دعوة المستخدمين إلى موقعك بشكل مستقل، فيمكنك تعطيل ارتباط التسجيل في قائمة المستخدم المجهول.

1. في القائمة اليسرى للمحرر المرئي، حدد قائمة الموقع.
2. على اليسار، قم بتوسيع قائمة المستخدم المجهول.
3. حدد الإعدادات (أيقونة الترس) بجوار التسجيل، وحدد حذف.
4. حدد حفظ.

تحرير إعدادات الموقع

قم بتحرير إعدادات الموقع لمدخل المطور لتغيير اسم الموقع ووصفه وتفاصيل أخرى.

1. في القائمة اليسرى من المحرر المرئي، حدد الإعدادات.
2. في النافذة المنبثقة الإعدادات، أدخل بيانات تعريف الموقع التي تريد تغييرها. بشكل اختياري، قم بإعداد favicon للموقع من صورة في مكتبة الوسائط الخاصة بك.
3. في الشريط العلوي، حفظ.

تلميح

إذا كنت تريد تغيير اسم مجال الموقع، يجب أولا إعداد مجال مخصص في مثيل APIM. تعرف على المزيد حول أسماء المجالات المخصصة في APIM.

نشر المدخل

لجعل مدخلك وآخر التغييرات التي تمت متاحة للزائرين تحتاج إلى نشره.

للنشر من الواجهة الإدارية لمدخل المطور:

1. تأكد من حفظ التغييرات عن طريق تحديد الزر حفظ .

2. في القائمة الموجودة في الأعلى، حدد Publish site. قد تستغرق هذه العملية بضع دقائق.

   

تلميح

خيار آخر هو نشر الموقع من مدخل Microsoft Azure. في صفحة نظرة عامة على المدخل لمثيل API Management في مدخل Microsoft Azure، حدد Publish.

زيارة المدخل المنشور

لعرض التغييرات بعد نشر المدخل، قم بالوصول إليها في نفس عنوان URL مثل اللوحة الإدارية، على سبيل المثال https://contoso-api.developer.azure-api.net. عرضها في جلسة متصفح مستعرض منفصلة (باستخدام وضع التصفح المتخفي أو الخاص) كزائر خارجي.

تطبيق سياسة CORS على واجهات برمجة التطبيقات

للسماح لزوار المدخل باختبار واجهات برمجة التطبيقات من خلال وحدة التحكم التفاعلية المضمنة، قم بتمكين CORS (مشاركة الموارد عبر المنشأ) على واجهات برمجة التطبيقات الخاصة بك، إذا لم تكن قد فعلت ذلك بالفعل. في صفحة نظرة عامة على المدخل لمثيل API Management في مدخل Microsoft Azure، حدد Enable CORS. اعرف المزيد.

الخطوات التالية

في هذا البرنامج التعليمي، نتعلم طريقة القيام بما يأتي:

• الوصول إلى الإصدار المدار من مدخل المطور
• التنقل في واجهتها الإدارية
• تخصيص المحتوى
• انشر التغيرات
• عرض المدخل المنشور

تقدم إلى البرنامج التعليمي الآتي:

استيراد واجهات برمجة التطبيقات وإدارتها باستخدام Visual Studio Code

راجع المحتوى ذي الصلة حول مدخل المطور:

• نظرة عامة على مدخل مطور Azure APIM
• تكوين المصادقة إلى مدخل المطور باستخدام أسماء المستخدمين وكلمات المرور أو معرف Microsoft Entra أو Azure AD B2C.
• تعرّف على المزيد حول تخصيص وتوسيع وظائف مدخل المطور.