البرمجةالدروس

دورة XML: إنشاء search engine plugin لمتصفح الفايرفوكس

.

.

يوفر متصفح الفايرفوكس صندوق للبحث في عدّة مواقع ومحرّكات بحث مثل amazon و Google وغيرها، بعض المواقع الَّتي لا يوفّر لها الفايرفوكس search engine plugin يتمّ توفير إضافة خاصّة بها للمستخدم – مثل محرّك البحث bing.

بالمناسبة، ما هي الـ search engine plugin تقنيًا؟

هي عبارة عن ملفات xml! كلّ محرّك بحث له ملف xml خاصّ به في مجلّد  Mozilla Firefox/search plugins،  بمجرّد معرفتنا بذلك فإنّنا نستطيع إنشاء إضافة لأيّ موقع يقدّم خدمة البحث عن طريق إنشاء ملف xml يحتوي على بياناته.

screencast: بسيط يوضّح كيفيّة إنشاء إضافة للبحث عن الصور في محرّك  bing، الأفضل أن تشاهد الفيديو بحجم كامل الشاشة:

كنتُ أرجو الاكتفاء بهذا الفيديو للشرح، لكن لا بدّ من توضيح عناصر ملف الـ xml للـ search plugin:

[xml] <!–bing.xml –>
<SearchPlugin xmlns="http://www.mozilla.org/2006/browser/search/">
<ShortName>bing image</ShortName>
<Description>image search engine for pictures and images</Description>
<InputEncoding>UTF-8</InputEncoding>
<Image />
<Url type="text/html" method="GET" template="http://www.bing.com/images/search">
<Param name="q" value="{searchTerms}"/>
<Param name="form" value="QBIL" />
<Param name="qs" value="n" />
</Url>
<SearchForm>http://www.bing.com/images</SearchForm>
</SearchPlugin>

[/xml]
  • SearchPlugin: العنصر الجذر الَّذي يحمل جميع العناصر الأخرى.
  • ShortName: الاسم الذي سيظهر على صندوق البحث.
  • Description: وصف للإضافة.
  • InputEncoding: ترميز المدخلات، الأفضل تغييرها إلى الترميز UTF-8 كي نتمكّن من البحث باللغة العربيّة.
  • Image: صورة الأيقونة، يتمّ كتابتها إمّا بصيغة Image Schema أو استدعاء صورة بامتداد .ico من الويب، ولأنّي لا أعرف كيفيّة كتابة الأولى ولم أجد أيقونة للـ bing في الويب، لم أضع صورة << حلول سريعة :D
  • Url: له 3 صفات:
    Type = text/html/ عند التعامل مع الـ API لبعض المواقع قد تحتاج إلى تغييرها إلى application/xml حسب البيانات المرسلة وطريقة استقبالها.
    method = GET
    / طريقة إرسال الاستعلام.
    template = http://www.bing.com/images/search
    / رابط البحث.
  • Param: عدد من المتغيّرات الَّتي تختلف من موقعٍ لآخر، تحمل صفتين: name/ اسم المتغيّر، value/ قيمة المتغير.

كيف أحصل على هذه المتغيرات؟

قم بزيارة موقع bing للبحث عن الصور، وابحث عن أيّ صورة، flower على سبيل المثال، سوف تجد عدد من المتغيرات أُرسلت إلى جانب الرابط في شريط المتصفح.

الجزء المظلل هو المتغيرات الَّتي تنتقل مع الرابط ، كل متغير يُفصل عن الآخر بعلامة &، وجميع المتغيرات ثابتة ما عدا q، سوف تأخذ القيمة المكتوبة في نموذج البحث، لذلك نضع قيمتها بـ {searchTerms}.

أرجو أن يكون الدرس قد قدّم لكم فائدة تطبيقيّة للجزء الأول من دورة XML. وبهذا نكون قد أنهينا الجزء الأول من دورة تعلم لغة العصر في مدونة عالم التقنية، سوف نحاول البدء بطرح دروس الجزء الثاني في الوقت المناسب قدر استطاعتنا.

اقتراحاتكم وانتقاداتكم وآراءكم في الدورة، رجائي رجائي لا تحرموني منها ^_^

‫14 تعليقات

  1. درس من النادر ان تراه بالإنجليزية ومعقد كذلك ..

    ولكن بالعربية وبشرح ممتاز ورائع كهذا .. شكراً استاذة إحسان ..

    تحياتي ..

  2. مجهود طيب .. رغم اني اعرف فعلياً اني لن اقدم خطوة واحدة لاصنع اضافة محرك لمواقعي التي اريد .. لا لشي الا اني لا احسن البرمجة !

    لكن سؤال ؟

    هل السكربت اعلاه كفيل بتطبيقه على جميع المواقع .. و هل المحركات التي تضاف من خلال Mycroft Project مشابه للمحرك اعلاه

    + يوجد محرك لـ Bing في الموقع الذي يعد مشروعا تجميعياً لاضافات المحركات .

  3. مشكور أخوي على هذا الشرح الجميل والفكرة الرائعة
    “لكن الفيديو غير شغال عندي”

  4. مجهود طيب .. رغم اني اعرف فعلياً اني لن اقدم خطوة واحدة لاصنع اضافة محرك لمواقعي التي اريد .. لا لشي الا اني لا احسن البرمجة !

    لا تحتاج إلى إتقان البرمجة كي تفعل ذلك :)
    إذا كنت تريد معرفة المزيد حول لغة XML زر صفحة الدروس في عالم التقنية من هنا : https://www.tech-wd.com/wd/edu/xml/


    هل السكربت اعلاه كفيل بتطبيقه على جميع المواقع ؟

    نعم إن شاء الله :)


    هل المحركات التي تضاف من خلال Microsoft Project مشابه للمحرك اعلاه ؟

    ما فهمت ..

  5. الفـ شكـرٍ لكـ اخـت احسـان …

    وربي مشـالله عليـك عندك امكـانية وقدره على توصيـل المعـلومه في اسهـل الطرق الله يسعدك ان شالله

    انا طبقت الدرس ولكن عندي فضـول حبيت اسئل عنه

    لما استخدمنا الداله قيت سحبنا اغلب البيانات من الرابط الموجود في الاعلى

    لكن انا لاحظت القيمه هذي sc=8-6 مااستخدمت ليش وماذا تعني وهل اقدر استخدمها

    اما وجودها والعدم واحد

    يعطيك ربي الف عافيه اخت احسـان وجعل الجنه دارك في الاخره ان شالله

  6. الله يسعدك أخي ..
    ما أعرف بالضبط وظيفة هذا البارميتر ، لكن مثلما قلت في ردك ” وجودها والعدم واحد ” .
    لأنّي جربت التطبيق في الحالتين ولم يتغير شيء ..

  7. ربي يجزااكـ خيير اختي
    اسلوبكـ بتوصيل المعلومه ومحاولة تسهيله شيء ملفت بصراحه
    الله لا يحركم الاجر ويكثر من امثالك
    انا عن نفسي استفدت كثيير من الدورة الحمد لله
    منتظرين الجزء الثاني باحر من الجمر

  8. جزاكِ الله خير أختي إحسان .. جميع دروس الجزء الأول رائعة، كنت متابعة وتطبيق دروسك بصمت،، ننتظر جديدك بإذن الله والتطبيق العملي لا تنسيه .. نحن في انتظاره .. وفقك الله لكل ما يحبه ويرضاه

    في انتظار الجزء الثاني بفارغ الصبر :)

    جزاكِ الله كل خير على ما تقدميه من علم ونفع للناس .. اللهم آميـــن

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

زر الذهاب إلى الأعلى