الصفحة الرئيسية » الترميز » كيفية إنشاء تطبيق قارئ RSS في JavaScript

    كيفية إنشاء تطبيق قارئ RSS في JavaScript

    آر إس إس (نقابة بسيطة حقا) هو تنسيق موحد يستخدمه الناشرون عبر الإنترنت إلى نقابة محتواها إلى المواقع والخدمات الأخرى. ل وثيقة آر إس إس, المعروف أيضا باسم تغذية, هو مستند XML تحمل المحتوى الذي يرغب الناشر في توزيعه.

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

    تسمى البرامج التي تصل إلى هذه الخلاصات وقراءة محتوياتها وعرضها القراء آر إس إس. يمكنك إنشاء برنامج قارئ RSS بسيط في JavaScript. في هذا البرنامج التعليمي ، سنرى كيف.

    هيكل آر إس إس

    تغذية RSS لديه عنصر الجذر مسمي , مشابهه ل علامة موجودة في مستندات HTML. داخل ال العلامة ، هناك عنصر ، نوع من مثل في HTML ، ذلك يتضمن العديد من العناصر الفرعية يحتوي على المحتوى الموزع للموقع.

    تغذية عادة ما تحمل بعض معلومات اساسية مثل العنوان وعنوان URL ووصف الموقع و المنشورات المحدثة الفردية أو المقالات أو المحتويات الأخرى من هذا الموقع. تم العثور على هذه المعلومات في </code>, <code><link></code>, و <code><description></code> العناصر ، على التوالي.</p> <p>عندما تكون هذه العلامات <strong>الحاضر مباشرة في الداخل <code><channel></code></strong>, لديهم عنوان الموقع وعنوانه ووصفه. عندما يكونون <strong>الحاضر في الداخل <code><item></code></strong> أن <strong>يحمل المعلومات حول المشاركات المحدثة</strong>, أنها تمثل نفس المعلومات كما كان من قبل ولكن من المحتويات الفردية التي لكل منها <code><item></code> تركيز.</p> <p>هناك أيضا بعض <strong>عناصر اختيارية</strong> التي قد تكون موجودة في موجز RSS ، حيث توفر معلومات إضافية مثل الصور أو حقوق النشر على المحتوى الموزع. يمكنك التعرف عليها في هذا <strong>مواصفات RSS 2.0</strong> في cyber.harvard.edu.</p> <p>وهنا عينة من كيف <strong>آر إس إس من موقع على شبكة الإنترنت</strong> قد تبدو مثل:</p> <pre name="code"> <rss version="2.0"> <channel> <title>Hongkiat https://www.hongkiat.com/ نصائح التصميم ، البرنامج التعليمي والإلهام أون لنا تصور أي ورقة أنماط CSS مع إحصائيات CSS هل تساءلت يومًا عن عدد قواعد CSS الموجودة في ورقة أنماط؟ أو هل تريد أن ترى ... 18/05/2017 https://www.hongkiat.com/blog/css-stylesheet-with-css-stats/ Amazon Echo Show - أحدث الأجهزة الذكية التي تعمل بأليكسا الأمازون ليست غريبة عن مفهوم أنظمة المنزل الذكي مع مساعد رقمي مضمن. بعد كل شيء ، ... 17/05/2017 https://www.hongkiat.com/blog/alexa-device-amazon-echo-show/

    جلب الأعلاف

    نحتاج إلى جلب الأعلاف مع تطبيق قارئ RSS الخاص بنا. على موقع ويب ، يمكن أن يكون عنوان URL لتغذية RSS وجدت داخل العلامة باستخدام التطبيق / آر إس إس أكس + نوع. على سبيل المثال ، ستجد رابط تغذية RSS التالي على Hongkiat.com.

    أولا ، دعونا نرى كيف الحصول على عنوان URL للخلاصة لموقع الويب باستخدام جافا سكريبت.

     إحضار (websiteUrl) .then ((res) => res.text (). ثم ((htmlTxt) => var domParser = new DOMParser () دع doc = domParser.parseFromString (htmlTxt، 'text / html') var feedUrl = doc.querySelector ('link [type = "application / rss + xml"]'). href)). catch (() => console.error ('خطأ في جلب موقع الويب'))

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

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

    بمجرد إتاحة نص HTML لموقع الويب ، نستخدمه DOMParser API إلى تحليلها في وثيقة DOM. DOMParser يوزع سلسلة نصية XML / HTML في مستند DOM. طريقته, parseFromString (), يأخذ حجتين: ال النص المراد تحليله و ال نوع المحتوى.

    ثم ، من وثيقة DOM التي تم إنشاؤها ، نحن أعثر على أ href قيمة ذات الصلة بطاقة باستخدام querySelector () طريقة من أجل الحصول على عنوان URL للخلاصة.

    تحليل وعرض التغذية

    بمجرد أن نحصل على عنوان URL الخاص بالموجز للموقع ، نحتاج إلى ذلك جلب وقراءة وثيقة آر إس إس وجدت في هذا URL.

     إحضار (feedUrl) .then ((res) => res.text (). ثم ((xmlTxt) => var domParser = جديد DOMParser () دع doc = domParser.parseFromString (xmlTxt ، 'text / xml') doc .querySelectorAll ('item'). forEach ((item) => let h1 = document.createElement ('h1') h1.textContent = item.querySelector ('title'). textContent document.querySelector ('output'). appendChild (h1))))

    بنفس الطريقة التي جلبنا بها الموقع ومحللته ، نحن الآن الحصول على وتحليل XML تغذية في وثيقة DOM. لتحقيق ذلك ، نستخدم "النص / أكس" نوع المحتوى في parseFromString () طريقة.

    في المستند المحلل ، نحن حدد كل عناصر باستخدام querySelectorAll طريقة و حلقة من خلال كل.

    داخل كل عنصر ، يمكننا علامات الوصول مثل </code>, <code><description></code>, و <code><link></code>, التي تحمل محتوى الأعلاف. ويتم تنفيذ تطبيق قارئ RSS البسيط الخاص بنا ، يمكنك تصميم محتوى الخلاصة التي تم جلبها حسب رغبتك.</p> <h4>جيثب التجريبي</h4> <p>يمكنك التحقق من <strong>نسخة أكثر تفصيلا</strong> من الكود المستخدم في هذا المنشور في جيثب الريبو. نسخة أكثر تفصيلا <strong>يجلب ثلاث يغذي</strong> (Mozilla Hacks و Hongkiat و Webkit blog) <strong>باستخدام ملف JSON</strong> ويضيف أيضًا بعض أنماط CSS إلى قارئ RSS.</p> <div class="rek-block"> <center> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6284591903398394" data-ad-slot="6432271471" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </center> </div> </div> </div> <div class="col-md-4"> <div class="bar"> <div class="rek-block"> <center> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6284591903398394" data-ad-slot="6432271471" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </center> </div> <div class="barpost"> <div class="bar-post-img"><a href="/articles/howto/how-to-create-a-secretly-disguised-folder-without-extra-software.html"><img src="//savtec.org/img/images_7/how-to-create-a-secretly-disguised-folder-without-extra-software_11.png" alt=""></a></div> <div class="bar-post-h1"> <a href="/articles/howto/how-to-create-a-secretly-disguised-folder-without-extra-software.html">كيفية إنشاء مجلد متخفي سرا دون برامج إضافية</a> </div> </div> <div class="barpost"> <div class="bar-post-img"><a href="/articles/computer-tips/how-to-create-a-secured-and-locked-folder-in-windows-xp.html"><img src="//savtec.org/img/images/how-to-create-a-secured-and-locked-folder-in-windows-xp.jpg" alt=""></a></div> <div class="bar-post-h1"> <a href="/articles/computer-tips/how-to-create-a-secured-and-locked-folder-in-windows-xp.html">كيفية إنشاء مجلد مؤمن ومغلق في نظام التشغيل Windows XP</a> </div> </div> <div class="barpost"> <div class="bar-post-img"><a href="/articles/coding/how-to-create-a-responsive-navigation.html"><img src="//savtec.org/img/images_2/how-to-create-a-responsive-navigation.jpg" alt=""></a></div> <div class="bar-post-h1"> <a href="/articles/coding/how-to-create-a-responsive-navigation.html">كيفية إنشاء الملاحة استجابة</a> </div> </div> </div> </div> </div> </div> <div class="prevnext"> <div class="container"> <div class="row"> <div class="col-md-6"> <div class="post"> <div class="prevnext-title">المادة التالية</div> <div class="post-img"><a href="/articles/howto/how-to-create-a-search-shortcut-on-the-desktop-in-windows-8-1.html"> <img src="//savtec.org/img/images_7/how-to-create-a-search-shortcut-on-the-desktop-in-windows-81_6.png" alt=""> </a></div> <div class="post-h1"> <a href="/articles/howto/how-to-create-a-search-shortcut-on-the-desktop-in-windows-8-1.html">كيفية إنشاء اختصار البحث على سطح المكتب في ويندوز 8.1</a> </div> </div> </div> <div class="col-md-6"> <div class="post"> <div class="prevnext-title">المقال السابق</div> <div class="post-img"><a href="/articles/smart-home/how-to-create-a-routine-with-amazon-alexa.html"> <img src="//savtec.org/img/images/how-to-create-a-routine-with-amazon-alexa.jpg" alt=""> </a></div> <div class="post-h1"> <a href="/articles/smart-home/how-to-create-a-routine-with-amazon-alexa.html">كيفية إنشاء الروتين مع الأمازون اليكسا</a> </div> </div> </div> </div> </div> </div> <footer> <div class="container"> <div class="langs-block"> <ul class="langs-list"> <li class="site-lang"><a href="https://www.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-TH"></i></a></li> <li class="site-lang"><a href="https://de.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-DE"></i></a></li> <li class="site-lang"><a href="https://ar.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-AE"></i></a></li> <li class="site-lang"><a href="https://bg.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-BG"></i></a></li> <li class="site-lang"><a href="https://cs.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-CZ"></i></a></li> <li class="site-lang"><a href="https://da.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-DK"></i></a></li> <li class="site-lang"><a href="https://el.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-GR"></i></a></li> <li class="site-lang"><a href="https://es.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-ES"></i></a></li> <li class="site-lang"><a href="https://et.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-EE"></i></a></li> <li class="site-lang"><a href="https://fi.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-FI"></i></a></li> <li class="site-lang"><a href="https://fr.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-FR"></i></a></li> <li class="site-lang"><a href="https://he.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-IL"></i></a></li> <li class="site-lang"><a href="https://hi.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-IN"></i></a></li> <li class="site-lang"><a href="https://hr.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-HR"></i></a></li> <li class="site-lang"><a href="https://hu.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-HU"></i></a></li> <li class="site-lang"><a href="https://id.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-ID"></i></a></li> <li class="site-lang"><a href="https://it.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-IT"></i></a></li> <li class="site-lang"><a href="https://ja.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-JP"></i></a></li> <li class="site-lang"><a href="https://ko.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-KR"></i></a></li> <li class="site-lang"><a href="https://lt.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-LT"></i></a></li> <li class="site-lang"><a href="https://lv.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-LV"></i></a></li> <li class="site-lang"><a href="https://ms.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-MY"></i></a></li> <li class="site-lang"><a href="https://nl.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-NL"></i></a></li> <li class="site-lang"><a href="https://no.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-NO"></i></a></li> <li class="site-lang"><a href="https://pl.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-PL"></i></a></li> <li class="site-lang"><a href="https://pt.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-PT"></i></a></li> <li class="site-lang"><a href="https://ro.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-RO"></i></a></li> <li class="site-lang"><a href="https://ru.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-RU"></i></a></li> <li class="site-lang"><a href="https://sk.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-SK"></i></a></li> <li class="site-lang"><a href="https://sl.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-SI"></i></a></li> <li class="site-lang"><a href="https://sr.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-RS"></i></a></li> <li class="site-lang"><a href="https://sv.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-SE"></i></a></li> <li class="site-lang"><a href="https://tr.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-TR"></i></a></li> <li class="site-lang"><a href="https://ua.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-UA"></i></a></li> <li class="site-lang"><a href="https://vi.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-VN"></i></a></li> </ul> </div> <div class="row align-items-center"> <div class="col-md-3"> © <script> var currentTime = new Date(); var year = currentTime.getFullYear(); document.write(year); </script> <a href="/">Savtec</a> </div> <div class="col-md-9"> معلومات مفيدة ونصائح تطوير الشبكة. البرمجة ، تصميم المواقع ، CSS ، HTML ، JAVASCRIPT. تكوين وإعادة تثبيت WINDOWS. إنشاء المواقع والتطبيقات من الصفر. </div> </div> </div> </footer> <link rel="stylesheet" href="css/flags.css"> <script src="https://unpkg.com/simple-jekyll-search@1.5.0/dest/simple-jekyll-search.min.js"></script> <script> SimpleJekyllSearch({ searchInput: document.getElementById('search-input'), resultsContainer: document.getElementById('results-container'), json: '/search.json', searchResultTemplate: '<li><a href="{url}">{title}</a></li>' }) </script> <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" /> <script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script> <script> window.addEventListener("load", function(){ window.cookieconsent.initialise({ "palette": { "popup": { "background": "#edeff5", "text": "#838391" }, "button": { "background": "#4b81e8" } }, "theme": "classic", "position": "bottom-right" })}); </script> </body> </html>