Web Scraping In Arabic

Web Scraping

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

ان شاء الله في الـ post دا نتكلم عن الـ Web Scraping و ديه هي عملية بنستخدمها عشان نجمع و نستخرج data  من الـ web. زي ماقولنا في الـ post اللي فات فيه طرق كتير لتجميع الـ data في مرحلة الـ data collection في الـ data science life cycle.

مبدأيا عشان نعرف نشتغل في الـ web scraping في حاجات المهم نعرفها الاول عشان نعرف نتعامل و على فكره للي حابب يشتغل في الـ freelance أو العمل الحر كتير مشاريع بتطلب في الـ web scraping زي على upwork أو freelancer فالجزء دا مهم و حلو جدا لو عايز تبدأ تشتغل فيه و انت كمان بتتعلم data science و دا اللي انا فعليا عملته و كان الموضوع حلو جدا و ممتع بصراحة.

المهم نرجع لموضوعنا, عشان نخرج داتا من الويب لازم الاول نفهم صفحة الويب كهيكلة ماشية ازاي..

أولا هنتكلم عن الـ HTML أو الـ HyperText Markup Language و هي دي اللغة اللي بيتكتب بيها صفحة الويب اللغة دي عبارة عن tags بتقسم الصفحة لأجزاء عشان تهيكل المحتوى بتاع الصفحة ديه

HTML

هنتكلم عن شوية tags بس عشان نعرفم و شوية خصائص بتتستخدم مع الـ tags ديه بس مش بالتفصيل و مش كلهم و انا في اخر الـ post ان شاء الله هحط link فيه كل الـ  tags بكل الخصائص بالتفصيل للي حابب يعرف اكتر

فيه عندنا في الـ tags  الشائعة الاستخدام اللي هتقبلوها كتير

1-  الـ <div> و دا بيبقى فيه ممكن text و ممكن tags تانية

2-  الـ <p> و دا paragraph من اسمه باين و برضو ممكن يبقى فيه tags تاية.

3-  الـ <a> و ديه hyperlink دا tag بيتعمل عشان يوصل من صفحة لتانية او لمكان تاني في نفس الصفحة.

4-  الـ <img> و ديه من اسمها بتبقى صورة

5-  الـ <span> و ديه بردو text بس على صغير شوية

6-  الـ <table> و دا من اسمه باين و بيبقى ليه ملحقات tags تانية جواه زي

1-  الـ <tr> للـ Row او الصف

2-  الـ <th>  للـ header اللي بيبقى فيه اسماء الـ columns

3-  الـ <td> للـ column او العمود

طبعا فيه tags  تانية كتيرة اوي ممكن تعرفوها من اللينك اللي هحطه احر الـ post.

بعد ماعرفنا الـ tags دلوقتي عايزين نعرف اهم حاجة بالنسبة لينا و هي الـ attributes او الخصائص اللي بتتحط للـ  tags ديه و هنعرف قدام هي ليه مهمة اوي لينا كدا ان شاء الله.

فيه 3 attributes مهمة اوي هتكلم عنهم لانهم شائعين الاستخدام اكتر حاجة فيه طبعا attributes تانية بتستخدم ممكن تعرفوها من اللينك اللي هحطه ان شاء الله.

الـ attributes الـ 3 هم :

1-  الـ id بيبقى من اسمه كدا واحد في الـصفحة الواحد مبيتكررش و بيسنخدم لتمييز الـ tag .

2-  الـ class و دا بقى ممكن يتكرر عادي بيميز مجموعة من الـ tags وممكن tag واحد عادي

3-  الـ href دا بقى بيبقى attribute للـ <a> ودا بنحط فيه اللينك اللي عايزين الـ HyperLink يودينا ليه

طيب احنا دلوقتي عرفنا الحاجة ديه بس مش عارفين شكلها بيبقى ازاي في الـ code نفسه . بتتكتب بالطريقة ديه

<tagName  attributeName1=”value”  attributeName2=”value”> 

Content </tagName>

Web Scraping

دلوقتي بعد ما عرفنا الـ structure بتاع الـ web page هندخل في الـ web scraping

اولا الـ Libraries اللي هنستخدمها في الـ tutorial دا هم requests  و BeautifulSoup فيه  Libraries تانية ممكن نبقى نتكلم عنهم مرة تانية ان شاء الله بس المهم نفهم الـ basics و الـ concepts بتاعة الـ web scraping في الـ post دا ان شاء الله.

اولا للي بيشتغل بالـ jupytar notebook الخطوة ديه مش هتتعمل لكن اللي شغال بالـ python files  هيحتاج يعمل  install للـ packages ديه عن طريق الـ command line زي في الصورة اللي تحت ديه

المهم بعد ما سطبنا المكتبات اللي هنشتغل عليها نبدأ بقى بسم الله كدا في الموضوع الاساسي بتاعنا النهاردا الـ web scraping

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

https://en.wikipedia.org/wiki/List_of_largest_technology_companies_by_revenue

دا اللينك اللي هنلم منه داتا الصفحة ديه فيها جدول فيه معلومات عن اكبر شركات IT  في العالم

      

طبعا هو جدول صغير و الداتا فيه قليلة بس زي ماقلت دا مثال بسيط في الـ real world scenarios الداتا بتبقى حجمها مهول و عشان كدا الـ web scraping بيبقى مفيد و بيوفرلي وقت و مجهود في لم الداتا ديه في excel file مثلا

طيب انا دلوقتي جبت اللينك اللي هشتغل عليه نبدأ بقى نفتح فايل python جديد او jupytar notebook جديدة و نبدأ الاول بأول خطوة و هي import الـ Libraries بتاعتي كما يلي

احنا كدا جاهزنا كل حاجة عشان نبدأ شغل سطبنا الـ libraries و عملنالها import و دلوقتي هنبدأ شغل بس قبل مانبدأ نكتب كود لازم نفهم طبيعة الصفحة اللي هنستخرج منها الداتا بتاعتنا اولا معلش فيه concept الاول لازم نفهمه و هو الـ hierarchy بتاعة الـ HTML tags و هي كما يلي زي في الصورة كدا

زي ماحنا شايفين في الصورة كدا الـ tags بتاعتنا بتبقى بشكل شبيه بكدا بتبقى متدرجة لـ levels بنسمي كل level من الـ levels دي child او ابن للـ level اللي قبله يعني اللي جوا الـ tag او اللي بين قوسين الـ tag دا بيبقوا ولاد الـ tag اللي هم جواه فبالتالي الـ tag اللي هم جواه دا بيبقى parent و الـ tag اللي الـ parent و ولاده جواه اسمه grand parent بالنسبة للـ children اللي جوا خالص و هكذا يعني ببساطه في المثال دا الجد الكبير هنا هو الـ HTML تاج و ولاده هنا الـ head و الـ body واحفاد الـ html هنا الـ div و الاتنين p و دول يعتبروا children او اولاد الـ body و هكذاالجزئية ديه مهمة جدا عشان لو فاهمها هتعرف ازاي تجيب الـ data بتاعتك صح لانها بتبقى عادة في اعماق اعماق الـ tags اللي موجودة

نيجي بقى نبص لهيكلة صفحتنا كدا

زي ماحنا شايفين هنا الـ table tag جواه ابنه الـ tbody tag جوا الـ tbody tag فيه الـ tr tag و جوا الـ tr tag فيه الـ td tag و جوا الـ td tag فيه الـ Rank بتاع الشركة و دا اللي عايزين نستخرجه

احنا ان شاء الله هنستخرج الـ Rank و الـ Company Name و الـ Revenue و الـ Employees و الـ Headquarter

شوفنا الـ Rank موجود جوا انهي tags و الـ hierarchy  عشان يتجاب عامل ازاي عندنا اسم الشركة و الارباح و عدد الموظفين و مكان المقر الرئيسي في الصور اللي جاية اهو متوضح هم جوا انهي tags بالترقيم من اللي برا لحد جوا

بالنسبة للـ headquarter هنا المكان متقسم للينكين المدينة و البلد و هتلاقوهم الاتنين في a tags مختلفة جنب بعض و دا معناه انهم اخوات و الاتنين children لـالـ td tag

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

1-    هنـ load الـ html code بتاع الصفحة عندنا بالكود دا

احنا هنا حطينا اللينك اللي هنشتغل عليه في variable سميناه url و ادينا الـ url لـ requests عشان نتعامل زي الـ browser العادي  بديها request تديني response اللي هي بتبقى الصفحة اللي بنشفها قدامنا على الشاشة و بنخلي الـ response اللي بيجي يتحط في variable اسمه response انا كدا بقى خلاص مهمتي مع requests خلصت حاليا هبدأ اسشتغل مع beautifulsoup و دي المكتبة اللي هستخدمها عشان تفصصلي الـ html كود بتاعي و تطلعلي منها الـ data اللي هتطلبها منها فبدي beautifulsoup صفحة الـ html بتاعتي و هي هنا متخزنة في response.content و بعدين بقولها خدي بالك اللي هتقسميه دا html فاستخدمي الـ html parser و بعدين هترجعلي الـ html بتاع الصفح متخزن عندها بطريقة تقدر تدخل تدور فيه بين الـ tags و ترجعلي اللي انا طلباه منها

طيب لو بصينا على الصفحة هنلاقي اكتر من table طيب انا ازاي اما اجي اقولها هاتيلي الـ table الفلاني و هاتي من جواه كذا و كذا و كذا الـ table الفلاني دا انا بعرفهولها باستخدام الـ  attributes اللي اتكلمنا عليها في البداية زي الـ id و الـ class

زي ما شايفين هنا الـ class اللي محطوط للـ table هو wikitable sortable plainrowheads و هو دا اللي هنستخدمه عشان نميز بيه الـ table اللي عايزينه

هنا هنشوف في الكود دا خلينا beautifulsoup جيبلي بس الـ table اللي بالـ class دا كالآتي

قولتله هنا find الـ table اللي بالـ class دا و هو رجعهولي زي مانتوا شايفين

عايزين من جوا الـ table نجيب الـ tbody هنا لان الـ table مش بيبقى ليه غير tbody واحد مش محتاجين نميزه باي attribute فهنقوله find الـ tbody من من جوا الـ table و هو دا اللي بنستفيد منه في حكاية الـ hierarchy زي مقولنا قبل كدا

بعد مادخلنا في الـ body بتاع الـ table عايزين بقى نلف على الـ rows و نلم الـ data اللي محتاجنها فهنرجع كل الـ rows بتاعة الـ table و اللي هي بتبقى في tag اسمه tr و بعدين هنلف عليها بـ for loop كالتالي

هنا انا عملت list فاضية عشان كل شركة اجمع معلوماتها اخزنها في الـ list ديه

الـ i دا عملتع عشان لما يبقى ب 0 يعدي الـ row الاولني لانه مش داتا هو بيبقى اسماء الـ columns  اللي عندنا

فانا عملت for loop تلف على كل الـ tr tags اللي في الـ tbody و هتعمل الاتي

الاول هتتحقق من ان دا اول row اللي فيه اسماء الـ columns ولا لا عشان لو هو تتخطاه و تروح للي بعده

ثانيا هترجعلي الـ cells اللي في الـ row دا اللي هي هنا الـ td tags و هتخزنهالي في listانا بقى من التحقيق اللي عملته في الاول عن الصفحة عرفت ان الـ rank كان اول td و الـ company name كانت تالت td و الـ revenue كانت خامس td و الـ employees number كان السادس والـ headquarter location كان السابع

فيه ملحوظة ان في الـ list بنبدأ او عنصر فيها من الصفر فاول واحد هيكون صفر  تالت واحد اتنين و خامس واحد اربعة و سادس واحد خمسة و سابع واحد ستة و عشان نختار العنصر الاول مثلا من الـ list بنكتبها على هيئة cells[0] كدا جوا square brackets طيب الـ rank كانت جوا td على طول فانا قولتله cells[0].text عشان يجيبلي الـ text اللي جوا الـ td على طول طب في الـ  name كان جوا a tag جوا الـ td فانا هطلبه كدا cell[2].find(‘a’).text انا هنا قولتله هاتلي اللي جوا الـ a اللي جوا الـ td الثالثة طيب الـ revenue و الـ employees نفس طريقة الـ rank نيجي بقى للـ headquarter انا هنا قولت قبل كدا انه محطوط في اتنين a مختلفين الـ City في اول a و الـ Country في تاني a طيب هعمل ايه هنا اول حاجة هخليه يجبلي الاتنين a في list و انا هاخد اول عنصر في الـ list و هلزق فيه تاني عنصر في الـ list محطوط بينهم comma زي كدا Cairo,Egypt مثلا

بعد كدا هعمل dictionary و دا قالب بردو زيه زي الـ list بخزن فيه بس ليه هيكلة مختلفة شوية و هحط فيه الـ data اللي طلعتها زي مانتوا شايفين و بعد كدا هضيف الـ dictionary دا للـ list اللي كنا عملنها اسمها companies فوق ديه و هيقعد بقى يكرر نفس العملية ديه على كل الـ rows لحد مايخلص و يوصل للاخر و بعدين هيعرض الـ list بتاعة الـ companies و هيبقى شكلها زي كدا

ماتتخضوش من الشكل هنلقيله حل دلوقتي ان شاء الله بس قبل مانحل شكل الـ table فيه مشكلة في الـ data هنا جاية بالاقواس اللي كانت جمبها في الـصفحة طب هنعمل ايه ؟ ولا اي مشكلة هنزود بس عليهم كلمتين كود هيحلولنا الحوار دا كله كالآتي

هزود بس .split(‘[‘)[0] و ديه هتقسملي اللي طلعلي دا من عند القوس و انا هاخد اول عنصر خالص اللي هو الرقم اللي قبل القوس بس كدا

و دي النتيجة

طيب دلوقتي بقى نيجي للشكل دا ايه دا بقى انا المفروض كدا افهم من الكلام اللي جنب بعضه دا ؟ لا فيه package هايلة اوي اسمها pandas هنبقى نتكلم عنها بالتفصيل ان شاء الله المرة الجاية الـ package ديه فيها data structure بجد حلو اوي و التعامل فيه جميل جدا و فيه features كتيرة متميزة ان شاء الله هنتكلم عنها قدام بس حاليا خلينا في شكل الداتا بعد مانستخدمها

شوفوا كدا

شايفين دلوقتي الـ data متنظمة و شكلها يفرح كدا :D

هنا انا بس نديت من الـ pd و هو الـ pandas لما عملتلها import للاستسهال خلتلها variable اسمه pd و الـ pd دا شائع الاستخدام اوي المهم ناديت منه على DataFrame function و ادتلها الـ companies بتاعتي عشان تاخدها و تعمل منها dataframe  و خزته في variable اسمه df

طيب دلوقتي انا جمعت الـ data و بقيت عندي في dataframe طيب انا عايزة اخزنها في excel file مثلا اعملها ازاي؟ متقلقش سهلة اوي بسطر كود واحد

df.to_excel(‘filename.xlsx’)

السطر دا هيخزن الـ dataframe  في file اسمه filename و بس كدا

طيب انا دلوقتي الحمدلله عرفت ازاي امسك صفحة و اطلع منها data هل كدا وقفنا خلاص و عرفنا كل حاجة عن الـ Web scraping ؟ لا طبعا لسه في كتير حاجات تتعرف انا بس بدأت معاكم الطريق لسه فيه لو عندي بجمع data معمولة على كذا صفحة كالعادة زي websites كتير بيبقى عامل مثلا كل صفحة 20 record و بعدين يدخل على الصفحة اللي بعدها و هكذا ديه نقطة

فيه لو الـ Structure معقد عن كدا ولو الـ website دا مانع الـ robots  او الـ programs انها تدخل عليه ولو فيه الـ Captcha اللي بتبقى في مواقع كتير ديه مواضيع advanced ممكن ابقى اتكلم عنها قدام بس اللي حابب هحط links للتوسع في الجزء دا هحطلكم كمان لينكات لـ libraries بنستخدمها بردو في الـ scraping بصوا عليها مفيدة جدا و ممكن قدام ان شاء الله ابقى اتكلم عليها

كدا كفاية للنهاردا و ان شاء الله هبقى اتكلم المرة الجاية عن pandas

اشوفكم على خير

و اسيبكم مع اللينكات ديه بقى

HTML Tags

HTML Attributes

BeautifulSoupDocumentation

ScrapyDocumentation

SeleniumDocumentation