استخدام Jsoup مع الاندرويد لاستخراج البيانات من صفحات HTML

Android

ربما اردت يوما عرض محتويات موقع في تطبيقك او التعامل معه ولكن للاسف ربما يكون هذا الموقع لايوفر خدمات API او تكون مواقع اخبارية او خاصة وربما انك استخدمت webview لعرض هذه المحتويات ولكن تكون بشكل غير احترافي . سيكون هذا الدرس عن افضل المكتبات للتعامل مع HTML وهي مكتبة JSOUP

. Jsoup هي مكتبة جافا تسمح لنا بالتعامل مع HTML وتوفر مجموعة من API البسيطة والسريعة لاستخراج البيانات من HTML والتعامل معها .

وتتميز هذه المكتبة بـ

  1. استخراج HTML من ملف او نص او رابط انترنت .
  2. استخراج البيانات من العناصر .
  3. العثور على العناصر باستخدام CSS او DOM.
  4. استخراج HTML بشكل مرتب وانيق .

وقد تم برمجتها وتصميمها للتعامل مع جميع انواع HTML بشكل واضح وسريع .

الان سنبدأ في شرح بعض الاساسيات في هذه المكتبة بشكل مبسط وسريع ثم بعد ذلك سنقوم باستخدامها بشكل كبير على احد المواقع الاخبارية ??.

  1. انشئ مشروع جديد :

تعلمنا سابقا كيفية انشاء مشروع جديد في اندرويد ستديو .

قم بتسمية Activity باي اسم يناسبك .

  1. اضافة المكتبة في gradle .
سنقوم بنسخ هذا compile الى ملف bulid.gradle  
compile 'org.jsoup:jsoup:1.8.3'<br>

بعد الانتهاء من المزامنه سنقوم بالذهاب الى Activity الخاص بنا .

  1. اساسيات Jsoup :

نستطيع في مكتبة Jsoup من تحليل ملفات HTML سواء كانت من رابط او ملف او نص عادي موجود مسبقا لدينا وبما ان هذا سيكون فقط لشرح الاسياسيات فساقوم باستخدام نص HTML 

String html = "<html><head><title>First parse</title></head>"<br>        + "<body><p>Parsed HTML into a doc.</p>" +<br>        "<img width=\"750\" height=\"410\" src=\"https://another.local/wp-content/uploads/2015/10/upload-image-tp-server.png\" class=\"single-featured wp-post-image\" alt=\"upload image tp server\" srcset=\"https://another.local/wp-content/uploads/2015/10/upload-image-tp-server-300x164.png 300w, https://another.local/wp-content/uploads/2015/10/upload-image-tp-server.png 750w\" sizes=\"(max-width: 750px) 100vw, 750px\" />" +<br>        "</body></html>";

نلاحظ في الكود السابق كود صفحة HTML تحتوي على title وايضا p بالاضافة لوجود img صورة .

سنقوم بتحويل هذه الصفحة HTML الى Jsoup للتعامل معها.

Document doc = Jsoup.parse(html);

هنا قمنا باضافة ملف HTML الى Jsoup وكان المتغير من نوع Document.

سنقوم الان بطباعة Title الخاص بالصفحة وذلك عن طريق هذا السطر

String title = doc.title();

الان لو اردنا استخراج النص من داخل تاق p فسنقوم باستخدام دالة getElementByTag ونقوم بتمرير اسم التاق المراد الى الدالة كما في السطر القادم .

String p = doc.getElementsByTag("p").first().text();

الان يتبقى لدينا شئ وحد وهو كيفية الحصول على رابط الصورة من داخل img ؟!!

String url_image = doc.getElementsByTag("img").attr("src");

قمنا باستخدام دالة getElementsByTag بعد ذلك قمنا باستدعاء attr وكتبنا نوع Attrabutes المراد استخراج البيانات منه وهو src “رابط الصورة” .

عند تجربة الاكواد على الاندرويد ستكون النتيجة كما في الشكل في LogCat :

12-22 16:54:41.962 15732-15732/

? D/MainActivity: Title Page = First parse
12-22 16:54:41.962 15732-15732/

? D/MainActivity: Print Element Text !! = Parsed HTML into a doc.
12-22 16:54:41.962 15732-15732/

? D/MainActivity: Image Url = https://another.local/wp-content/uploads/2015/10/upload-image-tp-server.png

الان سنقوم بالسطو ? على محتويات احد المواقع التقنية وهو موقع التقنية بلا حدود ? “لا حد يعلم سلطان ? ” وعرضها في التطبيق لدينا ? .

  • مشاهدة مصدر الموقع :

توفر اغلب المتصفحات اضافة لمشاهدة مصدر الصفحة اي اكواد HTML وغيره الخاصة بها وطريقة تركيب وترتيب الصفحة وبناءها وعلى هذا الاساس سنقوم باخذ البيانات .

اضغط زر الفأرة الايمن وقم باختيار ” View Page Source “ او ” مشاهدة مصدر الصفحة “ وستكون النتيجة بهذا الشكل :

Screen Shot 2015-12-24 at 5.21.27 AM

بسم الله الرحمن الرحيم ? ? وش هذا !!

هذا كود HTML للصفحة الرئيسية للموقع المراد سحب البيانات منه . نتأكد هل هناك استخدام للـRequest او لا !!

لا يوجد هنا اي استخدام لها هنا الان سنقوم بتحليل الصفحة جزء جزء .

  • تحليل خبر واحد من قائمة الاخبار للتعامل مع بقية الاخبار :

اذا اردنا اخذ النصوص من صفحة HTML باستخدام Jsoup سنحتاج الى :

  1. اسم Tag .
  2. اسم Class المستخدم .
  3. اسم Id المستخدم .

من صفحة الموقع الرئيسية نضغط زر الفأرة الايمن على عنوان الخبر ونختار “inspect” وستظهر لنا نافذة بالاسفل :

Screen Shot 2015-12-24 at 5.30.22 AM

نلاحظ الان الجزء المظلل بالازرق داخل الكود والموقع وهذا يعني ان الجزء المحدد هو Contaner او المحتوى الخاص بقائمة الاختبار . اذا سنحتاج الى هذا Tag وهو من نوع Div وايضا سنحتاج الى id الخاص به وهو main 

<div id="main" class="cb-main clearfix cb-module-block cb-light-off cb-blog-style-roll" role="main">

الان كل العناصر التي داخل هذا Tag تكون خاصة بالاخبار .

  • سنحتاج الان لمعرفة Tag الخاص بعنوان الخبر :
<h2 class="cb-post-title"><a href="http://www.unlimit-tech.com/blog/?p=150768">محكمة نيوزيلندا تقضي بتسليم مؤسس موقع Megaupload للولايات المتحدة</a></h2>

نلاحظ الان ان هذا كود HTML الخاص بالعنوان وهو من نوع h2 واسم Class هو cb-post-title 

  • معرفة رابط الصورة للخبر :
<img width="750" height="400" src="https://i2.wp.com/www.unlimit-tech.com/blog/wp-content/uploads/Megaupload-owner.jpg?zoom=2&amp;resize=750%2C400" class="attachment-cb-750-400 wp-post-image" alt="Megaupload-owner" srcset="http://i2.wp.com/www.unlimit-tech.com/blog/wp-content/uploads/Megaupload-owner.jpg?zoom=2&amp;resize=750%2C400" src-orig="http://i2.wp.com/www.unlimit-tech.com/blog/wp-content/uploads/Megaupload-owner.jpg?resize=750%2C400" scale="2">

الان حصلنا على العنوان والصورة وبقية العناصر سيكون عليك استخراجها بنفس الطريقة ? ” شطووورين“

  • كتابة كود التطبيق :

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

Document  doc = Jsoup.connect("http://www.unlimit-tech.com/blog/").get();

الان عند الاتصال سيتم سحب كود HTML للرابط ووضعه في Document .

  • عرض المحتوى الاساسي للاخبار:

عرفنا Tag الخاص بالمحتوى الاساسي للخبر وهو div وله id باسم main فسيكون الطلب لدينا بهذا الشكل

Elements news = document.select("div#main");

نلاحظ كتبنا div متبوعا بـ# وهذا يعني ان main هو id للـdiv المراد العثور عليه ويكون من نوع Elemnts اذا كان لدينا اكثر من main 

الان سنقوم بالدخول الى Elemnts السابق وهو main واخذ جميع التاق الخاصة بالاخبار 

Elements title = news.select("article");

نلاحظ article وهي الاخبار فكل خبر يعبر عنه بـarticle كما هو في الموقع وبما ان لدينا اكثر من خبر فاننا سنحتاج الى foreach لعرض جميع الاخبار كما في الكود التالي :

for (Element el : title) {
    text.append("\n " + " " + el.select("h2").text());
    text.append("\n  " + el.select("img").attr("src"));
    text.append("\n " + el.select("time").text());
    text.append("\n " + el.select("div.cb-author.cb-byline-element").text());
    text.append("\n " + el.select("div.cb-post-views.cb-byline-element").text());
    text.append("\n " + el.select("div.cb-excerpt").select("p").text());
}

كما شرحنا سابقا كيفية اخذ النصوص من خلال Tag الخاصة بـHtml وعرضها باستخدام select او findelemntsby* 

النتيجة النهائية للتطبيق بهذا الشكل :

device-2015-12-24-050704

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

اترك تعليقاً

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

6 أفكار عن “استخدام Jsoup مع الاندرويد لاستخراج البيانات من صفحات HTML”

  2. Mr.Saif

    ما شاء الله درس رائع. اخوي تكفى ساعدني حاولت اطبق الدرس على موقع وعملت connect وما نفع
    الموقع السورس له كذا:
    ———–

    Spanish la lega

    ——————-
    كيف اقدر احصل قيمة البيانات “lega” من meta و title من الرابط ؟

    رد
      1. يعقوب السعدي

        السلام عليكم اخي سيف….
        اذا ممكن تواصل معي لاني تعرضت لنفس مشكلتك وحتى الآن لم استطع حلها…محتاج مساعدتك
        تواصل معي لو سمحت على بريدي الالكتروني yaqoub44@gmail.com

        رد
  3. يعقوب السعدي

    عمل جبار تشكر عليه…الله يوفقك
    بس عندي ملاحظة بسيطة…لو ضغطنا على كل item يفترض يقودنا لصفحة جديدة فيها تفاصيل الخبر…
    حاولت أعمل زي ذي الفكره بس ما نجحت حتى الآن
    لو تساعدني بكون لك ممنون…

    رد

مرتبطة