Beranda » Coding » Cara Membuat Aplikasi Pembaca RSS dalam JavaScript

    Cara Membuat Aplikasi Pembaca RSS dalam JavaScript

    RSS (Sindikasi Sungguh Sederhana) adalah format standar yang digunakan oleh penerbit online untuk sindikat konten mereka ke situs web dan layanan lain. Sebuah Dokumen RSS, juga dikenal sebagai a makan, adalah Dokumen XML membawa konten yang ingin didistribusikan oleh penerbit.

    Umpan RSS tersedia di hampir semua situs web dan blog berita online untuk pembaca mereka tetap perbarui konten mereka. Mereka juga dapat ditemukan di situs web non-teks seperti YouTube, tempat Anda dapat menggunakan umpan dari saluran YouTube diinformasikan tentang video terbaru.

    Program yang mengakses feed ini, dan membaca serta menampilkan isinya disebut Pembaca RSS. Anda dapat membuat program pembaca RSS sederhana dalam JavaScript. Dalam tutorial ini, kita akan lihat caranya.

    Struktur umpan RSS

    Umpan RSS memiliki elemen root bernama , mirip dengan tag ditemukan di dokumen HTML. Di dalam tag, ada a elemen, jenis suka dalam HTML, itu termasuk banyak sub-elemen mengandung konten yang didistribusikan dari situs web.

    Umpan biasanya membawa beberapa informasi dasar seperti judul, URL, dan deskripsi situs web dan masing-masing posting, artikel, atau konten lain yang diperbarui dari situs web itu. Informasi ini ditemukan di </code>, <code><link></code>, dan <code><description></code> elemen, masing-masing.</p> <p>Ketika tag ini <strong>langsung hadir di dalam <code><channel></code></strong>, mereka memegang judul, URL, dan deskripsi situs web. Kapan mereka <strong>hadir di dalam <code><item></code></strong> bahwa <strong>menyimpan informasi tentang pos yang diperbarui</strong>, mereka mewakili informasi yang sama seperti sebelumnya tetapi masing-masing isi dari masing-masing <code><item></code> mewakili.</p> <p>Ada juga beberapa <strong>elemen opsional</strong> yang mungkin ada dalam umpan RSS, memberikan informasi tambahan seperti gambar atau hak cipta pada konten yang didistribusikan. Anda dapat mempelajarinya dalam hal ini <strong>Spesifikasi RSS 2.0</strong> di cyber.harvard.edu.</p> <p>Berikut ini contoh bagaimana <strong>Umpan RSS sebuah situs web</strong> mungkin terlihat seperti:</p> <pre name="code"> <rss version="2.0"> <channel> <title>Hongkiat https://www.hongkiat.com/ Tips Desain, Tutorial dan Inspirasi id-kita Visualisasikan Semua Lembar Gaya CSS dengan Statistik CSS Pernah bertanya-tanya berapa banyak aturan CSS dalam stylesheet? Atau pernahkah Anda ingin melihat ... 18/05/2017 https://www.hongkiat.com/blog/css-stylesheet-with-css-stats/ Amazon Echo Show - Perangkat Smart terbaru yang didukung Alexa Amazon tidak asing dengan konsep sistem rumah pintar dengan asisten digital tertanam. Bagaimanapun, ... 17/05/2017 https://www.hongkiat.com/blog/alexa-device-amazon-echo-show/

    Mengambil umpan

    Kita harus ambil feed dengan aplikasi pembaca RSS kami. Di situs web, URL umpan RSS dapat berupa ditemukan di dalam tag menggunakan application / rss + xml mengetik. Misalnya, Anda akan menemukan tautan umpan RSS berikut di Hongkiat.com.

    Pertama, mari kita lihat caranya dapatkan URL umpan dari suatu situs web menggunakan JavaScript.

     fetch (websiteUrl) .then ((res) => res.text (). then ((htmlTxt) => var domParser = DOMParser baru () biarkan doc = domParser.parseFromString (htmlTxt, 'text / html') var feedUrl = doc.querySelector ('tautan [type = "application / rss + xml"]'). href)). catch (() => console.error ('Kesalahan dalam mengambil situs web'))

    Itu mengambil() Metode adalah metode global itu secara tidak sinkron mengambil sumber daya. Dibutuhkan URL sumber daya sebagai argumen (URL situs web dalam kode kami). Saya t mengembalikan a Janji objek, jadi ketika metode berhasil mengambil situs web (mis Janji terpenuhi), fungsi pertama di dalam kemudian() pernyataan menangani respons yang diambil (res dalam kode di atas).

    Respons yang diambil kemudian sepenuhnya dibaca menjadi string teks menggunakan teks() metode. Teks ini mewakili Teks HTML dari situs web kami yang diambil. Seperti mengambil(), teks() juga mengembalikan a Janji obyek. Jadi, ketika berhasil membuat teks respons dari aliran respons, kemudian() akan menangani teks respons itu (htmlText dalam kode di atas).

    Setelah teks HTML situs web tersedia, kami menggunakan API DOMParser untuk parse ke dalam dokumen DOM. DOMParser mem-parsing string teks XML / HTML ke dalam dokumen DOM. Metodenya, parseFromString (), mengambil dua argumen: itu teks yang akan diuraikan dan Jenis konten.

    Kemudian, dari dokumen DOM yang dibuat, kami temukan href nilai yang relevan menandai menggunakan querySelector () metode untuk mendapatkan URL umpan.

    Memilah dan menampilkan umpan

    Setelah kami mendapatkan URL umpan dari situs web, kami perlu melakukannya ambil dan baca dokumen RSS ditemukan di URL itu.

     ambil (feedUrl) .then ((res) => res.text (). then ((xmlTxt) => var domParser = DOMParser baru () biarkan 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))))

    Dengan cara yang sama seperti kita mengambil dan mengurai situs web, sekarang kita dapatkan dan parsing umpan XML ke dokumen DOM. Untuk mencapai ini, kami menggunakan 'teks / xml' tipe konten dalam parseFromString () metode.

    Dalam dokumen yang diuraikan, kami pilih semua elemen menggunakan querySelectorAll metode dan loop melalui masing-masing.

    Di dalam setiap elemen, kita bisa tag akses seperti </code>, <code><description></code>, dan <code><link></code>, yang membawa konten umpan. Dan, aplikasi pembaca RSS sederhana kami selesai, Anda dapat mengatur gaya konten dari feed yang diambil sesuai keinginan Anda.</p> <h4>Demo Github</h4> <p>Anda dapat memeriksa <strong>versi yang lebih detail</strong> dari kode yang digunakan dalam posting ini di repo Github kami. Versi yang lebih detail <strong>mengambil tiga umpan</strong> (Mozilla Hacks, Hongkiat, dan blog Webkit) <strong>menggunakan file JSON</strong> dan juga menambahkan beberapa gaya CSS ke pembaca 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">Cara Membuat Folder Tersembunyi secara Diam-diam Tanpa Perangkat Lunak Ekstra</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">Cara Membuat Folder yang Aman dan Terkunci di 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">Cara Membuat Navigasi yang Responsif</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">Artikel selanjutnya</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">Cara Membuat Pintasan Pencarian di Desktop pada Windows 8.1</a> </div> </div> </div> <div class="col-md-6"> <div class="post"> <div class="prevnext-title">Artikel sebelumnya</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">Cara Membuat Rutin Dengan Amazon Alexa</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"> Informasi bermanfaat dan tip pengembangan web. Pemrograman, desain web, CSS, HTML, JAVASCRIPT. Konfigurasikan dan instal ulang WINDOWS. Pembuatan situs dan aplikasi dari awal. </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>