API:Picture of the day viewer/ar

نظرة عامة
سوف تتعلم في هذا التدريب التعليمي كيفية تصميم عارض ويكيبيديا:صورة اليوم المختارة مستخدما واجهة برمجة تطبيقات ميدياويكي من النوع Action. تنزيل الكود المصدري من غت هب ابحث عن التطبيق في مصنع الأدوات

سوف يعلمك هذا التدريب التعليمي كيفية تنفيذ هذا مستخدما:


 * بايثون 3 وكذا إطار عمل فلاسك
 * واجهة برمجة تطبيقات ميدياويكي التي تحمل اسم Action وكذا وحدات و البرمجية

تأسيس بايثون
يستخدم هذا التدريب التوضيحي بايثون الإصدار 3. يمكنك تنزيل أحدث إصدار من بايثون من هنا:


 * بايثون لأنظمة ويندوز 7 و8 و10
 * بايثون لنظام التشغيل Mac OS X

طالع الدليل الإرشادي للمبتدئين في نظام بايثون لمزيد من التعليمات التي تتناول تنصيب بايثون على أنظمة تشغيل أخرى.

تأسيس فلاسك
إن بيب (Pip) هو نظام لإدارة الحزم يمكنك استخدامه في تثبيت Flask:. إن لم يكن لديك «بيب» بالفعل، ثبته من الموقع الشبكي الرسمي لبيب.

الخطوة 2: إنشاء تطبيق فلاسك بسيط
لو كان كل شيء مثبتًا لديك ويعمل على ما يرام، ضع النص البرمجي التالي في ، داخل مجلد مشروعك:. حينما تشغله (مستخدمًا  أو  )، سوف يعرض «Hello world» في http://localhost:5000/:

الخطوة 3: عارض صورة اليوم المختارة
منذ أن كل شيء جاهز، يمكنك البدء في كتابة الكود البرمجي لعارض صورة اليوم المختارة. صورة اليوم المختارة، اختصارًا «POTD»، هي Wikipedia:Wikipedia:Featured_pictures صورة مختارة تعرض يوميًا على الصفحة الرئيسية لويكيبيديا. سوف تحصل على الصورة من قالب ويكي يتغير كل يوم.

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

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

استدعاء واجهة برمجة التطبيقات التي تحمل اسم Action
تعمل واجهة برمجة التطبيقات التي تحمل الاسم Action عن طريق إرسال البيانات ردًا على طلبات إتش تي تي بي. كي تنفّذ ذلك، سوف تستورد مكتبة طلبات بايثون.

تاليًا أضف متغيرين اثنين جديدين:  و. سوف تستخدم عنصر  كي ترفع طلبات إلى معرف الموارد الموحد.

استدعي في دالة جديدة، ، العنصر  كي تطلب دمج الصورة داخل صفحة عارض صورة اليوم المختارة المحمية (مثال). From this call, use the picture's filename to call, and retrieve the image's source url. In this example, the second API call is handled in the helper function,.

Wikipedia's archives lists dates by ISO standard format, for example: 2019-01-31, for 31 January, 2019. You can get the correct format by using the date method,.

Finally, alter  to call. Import  from , and make   return.

عرض الصفحة


Flask templates mostly contain HTML markup, but they also use Jinja to render dynamic content. Jinja markup looks like this:, and is used to inject Python variables or expressions into our basic page structure. Add some basic HTML 5 boilerplate and a few elements to. Make sure to save it to a directory within your app, named.

تحويلها إلى صفحة تفاعلية
Add a element to , and give it the following submit button inputs: Back and Next. When either button is selected, the form will submit a POST request, and the selected value will be passed back to. This will allow users to browse through the Picture of the Day archives.

Next, update  with a   function, for setting the date presented to the user. Also extend the  route to handle POST requests from the form. To allow  to read the POST request message, import Flask's   class.

The complete Python and HTML code:

تحديد نمط تطبيقك
Flask uses a directory, named static, to contain any helper files that stay the same throughout the lifecycle of the app. This is a useful place to put any stylesheets or additional scripts. Our stylesheet will be using some colors and visual motifs based on the Wikimedia Style Guide. Place a CSS file in.

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

 * Contribute a demo app that you have developed using the MediaWiki API to this code samples repository.
 * Learn some ways to add descriptive text from the Picture of the day page:
 * provides  which can be used as a link preview
 * can be used to obtain the whole parsed text from articles on Wikis that have the extension installed (see example).

انظر أيضا

 * : Overview of the Action API
 * : FAQ describing the Action API in more depth
 * MediaWiki Action API Code Samples repo: Contains more demos and sample code
 * More on Wikipedia and IFTTT
 * MediaWiki Action API Code Samples repo: Contains more demos and sample code
 * More on Wikipedia and IFTTT