كابتشا حسوب من فكرة لتطبيق عملي

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

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

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

الآن عودة لبرمجة الكابتشا، الهدف كان:

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

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

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

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

دعم بروتوكول https في حال استخدام كابتشا حسوب في صفحات تستخدم هذا البروتوكول وشهادات SSL لتشفير الاتصال، لو لم نوفر ذلك سيظهر تحذير للمستخدم وهذا شيء لا يريده أحد فنحن أيضاً نستخدم بروتوكول https في صفحة التسجيل في اعلانات حسوب. الأمر لا يحتاج لبرمجة اضافية بل لإعداد السيرفر ولشهادة SSL موقعة فقط وهذا أمر متوفر بالفعل.

توفير واجهة برمجية (API) تمكن المبرمجون من تخصيص ألوان الكابتشا وتحديد اللغة التي يريدون عرضها للمستخدم بشكل افتراضي احتاج قليل من جافاسكريبت و CSS فمن الضروري أن يتمكن صاحب أي موقع من التحكم بهذه الأمور. التوثيق الموجود حالياً يوضح كيفية اضافة كابتشا حسوب للصفحات، سأضيف عليه لاحقاً بحيث أوضح كيف يمكن للمطور التحكم الكامل حتى بطريقة اظهار الصورة وتخصيص حقل ادخال كلمة التأكد للمستخدمين.

التقنيات المستخدمة في السيرفر أستخدم لغة روبي كعادتي ولإظهار الكابتشا XHTML, CSS و JavaScript طبعاً. بخصوص الجزء المتعلق بصناعة الصور يحتاج لمكتبة معالجة صور والصعوبة كانت أن أغلب المكتبات لا تدعم كتابة الكلمات العربية بشكل صحيح أو بأحرف متصلة. نظراً لضيق الوقت استخدمت حل مؤقت في البداية وهو الاعتماد على أداة في لينكس pango-view لصناعة صورة كلمة عربية كتبت بشكل صحيح ثم تحميلها للبرنامج واضافة تشويش لها بالإعتماد مكتبة ImageMagick لإطلاعي المسبق على هذه المكتبة ولأنها مدعومة بسهولة في روبي مع كثير من الأمثلة (RMagick). المشكلة حدثت بعد تركيب الخدمة على السيرفر، اكتشفت أن سرعة صناعة الصورة بطيئة جداً تجعل من الخدمة غير عملية وتسبب ضغط على السيرفر.

الحل الوحيد هو استبدال مكتبة ImageMagick بأخرى وهذا يعني إعادة كتابة الجزء المسؤول عن صناعة واضافة التشويش للصورة بشكل كامل. كوني سأعيد كتابته مرة أخرى لم أرغب بحل مؤقت هذه المرة لذلك قررت الإستغناء عن الإعتماد على أداة pango-view أيضاً والتعامل مع المكتبة التي تعتمد عليها الأداة مباشرة وهي مكتبة Cairo نفسها المستخدمة في واجهة GTK+ وحتى متصفح Firefox. احتجت لقراءة توثيق هذه المكتبة وتعلمه لكن مشكلة أخرى واجهتني أن توثيق هذه المكتبة في لغة روبي غير جيد ولا يحتوي الكثير من الأمثلة مما أجبرني على إجراء العديد من التجارب، الرجوع للملف المصدري للمكتبة وقراءة أمثلة بلغات مثل سي، بايثون وبيرل لأتمكن من فهمة وبرمجة هذا الجزء بشكل صحيح بنهاية الأمر.

هذا كل شيء! عوضاً عن كتابة خبر فقط عن إطلاق كابتشا حسوب قررت مشاركتكم مراحل التطوير وما هي الأمور التي مررت بها بدء من الفكرة وحتى الإطلاق. سأحاول برمجة مكتبات جاهزة تتحقق من الكابتشا بالإعتماد على الواجهة البرمجية لكابتشا حسوب وتوفيرها للاستخدام مباشرة لمطوري المواقع (أولها سيكون php) كذلك برمجة إضافات لأنظمة ادارة المحتوى الأكثر استخدماً تمكن الجميع من استخدام كابتشا حسوب في مواقعهم.. أي مساهمات مرحب بها طبعاً!

تحديث 05/01/2012: الأخ محمد من مدونة شبكة مطوري web 2.0 العرب قام مشكوراً ببرمجة إضافة ووردبريس و PHP class لخدمة كابتشا حسوب. أصبح بامكان مطوري PHP استخدام الكابتشا في تطبيقات الويب الخاصة بهم بكل سهولة. شكراً محمد.

تحديث 11/01/2012: الأخ بركات جزاه الله خيراً برمج مكتبة للغة بايثون وأخرى للغة بيرل يمكن الحصول عليهم من مجتمع لينكس العربي.

التعليقات

  1. نسيم

    صراحة ما شاء لله .. عمل رائع جدا
    وخصوصا لما وفرت API لإستعمال العام كانت حركة رائع من عندك
    و لم أكن أظن أنك عملتها بروبي ظننتها php
    بالتوفيق لك

  2. Dr.H4ck3rZ

    السلام عليكم ورحمة الله وبركاته

    تقريبا كنت من الناس الاولى التي قامت بتجربت خدمة كابتشا عند انطلاقها وأحببت الفكرة خصوصا وأنها من صنع أيادي عربية 100%
    أتمنى لك التوفيق وفي إنتظار مشاريع ثانية ;)

  3. AR

    جميل جدًا ;)

    قمت بتطبيق هذه الفكرة مسبقًا بتقنية asp.net
    لكني لم أفكر بإتاحتها للآخرين .
    أتوقع نجاح هذا المشروع إن شاء الله

    أتمنى لك التوفيق , تحياتي ^__^

  4. abuobaeda

    فكرة كابتشا عربية كانت حركة رائعة منك اخي عبدو وشكرا على ابداعك وبالتوفيق
    طيب صارت وصارت ليش ماتساويلنا كابتشا كردية :):)

  5. محمد حبش

    كما اعرفك .. دوماً تنظر الى الفكرة من رؤية ابتكارية لمحاولة صنع شيء خاص بك وينفع الاخرين ، وها انت فعلت

    اتمنى لك كل التوفيق عزيزي عبد .. نجاح آخر يضاف الى رصيدك

  6. عبدالمهيمن

    شكراً لكم جميعاً..

    @AR: من المؤسف أنك لم تشاركنا تجربتك :) مكتبات معالجة الصور في دوت نت تدعم اللغة العربية بشكل ممتاز؟ حسب ما أعرف. لكن رغم ذلك أفضل أن أعتمد دائماً على تقنيات مفتوحة المصدر.

    @محمد حبش: أسعدني وجودك وتمنياتي لك بكل التوفيق =)

    @ريان: المنافسة لا تهمني. كل ما هنالك أني طورت شيء أحتاجه وقمت بتوفيره للجميع. بالنهاية كل واحد يستخدم ما يناسبه.

  7. سامي

    فكرة مشاركة مراحل تطوير عملك هذا أحترمك و أهنئك على جدّك و اجتهادك

    فوق أني استفدت ,استمتعت بالقراءة

    شكرا جزيلا لك !

التعليقات مغلقة.