القائمة الرئيسية

الصفحات

شرح Web Scraping بإستخدام فلاتر والحصول على بيانات المنتاجات من على الانترنت

شرح Web Scraping بإستخدام فلاتر والحصول على بيانات المنتاجات من على الانترنت


 شرح Web Scraping بإستخدام فلاتر والحصول على بيانات المنتاجات من على الانترنت

مجال Web Scraping من اقوى المجالات المطلوبة في السوق وذلك لانها تسهل الكثير من الوقت على مدخل البيانات في معظم المتاجر ولكن ماذا لو قلت لك انك يمكنك ان تقوم بالحصول على معلومات صفحه معينه على سبيل المثال في موقع اماوزن يمكنك الحصول على روابط المنتجات والاسماء والصور دفعه واحده دون المرور على العناصر واحد تلو الاخر وهذه هي ميزة الWeb Scraping وكثير من الاشخاص لا يعرفون عنها ولا يعرفون اهميتها الكبيره ولهذا قررنا عمل مقال حول كيفية عمل Web Scraping في فلاتر بطريقة بسيطه .


بيئة تطوير متكاملة جيدة لتطوير تطبيقات Android الأصلية. بالمقارنة مع IDEs الأخرى مثل eclipse، فإن أداء Android Studio يعد ابطئ قليلا من البرامج الاخرى ولكنه الاقوى. على الهواتف الذكية التي تعمل بنظام Android ، يعمل البرنامج المدمج بشكل رائع. يقوم بإنشاء تطبيقات Android موثوقة وقيمة باستخدام IDE هذا. ومع ذلك ، فهو يقدم فقط تطبيقات Android الأصلية. Android Studio متاح أيضًا لأنظمة Windows و Mac OS X و Linux. ومع ذلك ، يمكننا فقط إنشاء تطبيقات Android أصلية.




المكتبات التي تحتاجها لتنفيذ لعمل web scraping

  http: ^0.13.4

  html: ^0.15.0


Web Scraping with Flutter


بكل بساطة سوف نقوم بإستدعاء المكتبات السابقه ونرمز لكل مكتبة بإسم ,مثل dom باسم dom وهكذا بعدها قمنا بتحويل التصميم الى StatefulWidget  وقمنا بعمل List باسم  articles  وهي من نوع Article وهذا عباره عن class model قمنا بتصميمه بالاسفل لكي يحفظ القيم بداخله , وعند بدء تشغيل التصميم يتم استدعاء getWebsiteData وهيا عباره عن methode يتم من خلالها الحصول على البيانات بداخلها نقوم بعمل Uri.parse ونضع بداخلها الرابط الخاص الذي نريد البحث في داخله وهنا فتحنا موقع امازون وبحثنا على الماوس وقمنا بنسخ الرابط ووضعه بداخلها .


الان نضع titles ونكتب الكود كما هو موضح وبعدها نفتح الموقع ونضغط right click من على العنصر الذي نريد الحصول عليه وهنا قمنا بعملها على العنوان وبعدها نلاحظ ان العنوان موجود في الجزء المحدد بعدها قم بعملية نسخ الذي تم تحديده وسوف تلاحظ ان الرابط طويل قليلا ولهذا سوف نحتاج فقط نهايه الرابط ونضعها كما هو موضح بالصورة الخاصه بالكود والكود نفسه .


Web Scraping with Flutter

الان في مرحلة الصوره والرابط نلاحظ ان الرابط موجود في href وهذا الجزء الذي يحتوي على الرابط لهذا سوف نستخدم e.attributes['href'] والان نلاحظ ان الرابط ظهر بدون عنوان النطاق الاول لهذا قمنا باضافة العنوان الخاص بالموقع او النطاق بعدها نضع الرابط ليصبح رابط قابل للنقر , والصور كانت نفس الفكرة ولكن لا تحتاج الى ان تقوم بإضافة الرابط في البداية فقط يمكنك اتقباس رابط الموقع فقط كما هو موضح 


Web Scraping with Flutter

الان بعد الانتهاء من كل شيئ يمكنك عمل setstate لتغيير العناصر ووضعها بداخل الmodel واخيرا نقوم بعمل list بالاسم لايظهار العناصر وهنا قمنا بعمل for بسيط لمعرفة عدد العناصر وطباعتها فقط يمكنك تخطي هذه المرحلة .


Web Scraping with Flutter

gee.dart


import 'package:flutter/material.dart';
import 'package:html/dom.dart' as dom;
import 'package:http/http.dart' as http;

class CodeLess extends StatefulWidget {
  const CodeLess({Key? key}) : super(key: key);

  @override
  State<CodeLess> createState() => _CodeLessState();
}

class _CodeLessState extends State<CodeLess> {
  List<Article> articles =[];

  @override
  void initState() {
    super.initState();
    getWebsiteData();
  }

  Future getWebsiteData () async {
    final url = Uri.parse('https://www.amazon.com/s?k=mouse');
    final response = await http.get(url);
    dom.Document html = dom.Document.html(response.body);

    final titles  = html
        .querySelectorAll('h2 > a > span')
        .map((e) => e.innerHtml.trim())
        .toList();

    // #search > div.s-desktop-width-max.s-desktop-content.s-opposite-dir.sg-row > div.s-matching-dir.sg-col-16-of-20.sg-col.sg-col-8-of-12.sg-col-12-of-16 > div > span:nth-child(4) > div.s-main-slot.s-result-list.s-search-results.sg-row > div:nth-child(14) > div > div > div > div > div > div.sg-col.sg-col-4-of-12.sg-col-8-of-16.sg-col-12-of-20.s-list-col-right > div > div > div.a-section.a-spacing-none.s-padding-right-small.s-title-instructions-style > h2 > a
    final urls  = html
        .querySelectorAll('h2 > a')
        .map((e) => 'https://www.amazon.com/${e.attributes['href']}')
        .toList();

    // #search > div.s-desktop-width-max.s-desktop-content.s-opposite-dir.sg-row > div.s-matching-dir.sg-col-16-of-20.sg-col.sg-col-8-of-12.sg-col-12-of-16 > div > span:nth-child(4) > div.s-main-slot.s-result-list.s-search-results.sg-row > div:nth-child(2) > div > div > div > div > div > div > div > div.sg-col.sg-col-4-of-12.sg-col-4-of-16.sg-col-4-of-20.s-list-col-left > div > div.s-product-image-container.aok-relative.s-image-overlay-grey.s-text-center.s-padding-left-small.s-padding-right-small.s-flex-expand-height.s-media-gallery.s-media-gallery-treatment-T2.s-media-gallery-ready > div > span > a > div > img:nth-child(1)
    final images  = html
        .querySelectorAll('span > a > div > img')
        .map((e) => e.attributes['src'])
        .toList();


    print('count ${titles.length}');
    setState(() {
      articles = List.generate(titles.length,
              (index) => Article(
                title: titles[index] ,
                url:  urls[index],
                img:  images[index]!,
              ));
    });

    for (final title in titles) {
      print('this title is $title');
    }

  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: SafeArea(
        child: Center(
          child: ListView.separated(
            physics: const BouncingScrollPhysics(),
            separatorBuilder: (context,index)=> const Divider(thickness: 1),
            padding: const EdgeInsets.all(15),
            itemCount: articles.length,
              itemBuilder: (context,index) {
                final article = articles[index];
                return ListTile(
                  title: Text(article.title),
                  subtitle: Text(article.url , maxLines: 2,overflow: TextOverflow.ellipsis),
                  leading: Image.network(article.img,fit: BoxFit.fitHeight,width: 50,),
                );

              }),
        ),
      ),
    );
  }
}

class Article {
  final String url;
  final String title;
  final String img;

  Article({
    required this.url,
    required this.title,
    required this.img
});

}


مزيد من الاكواد البرمجية :

تعليقات

التنقل السريع