Kako stvoriti App RSS čitač u JavaScriptu

RSS (Really Simple Syndication) standardizirani je format koji koriste online izdavači udružiti njihov sadržaj drugim web-mjestima i uslugama. RSS dokument, također poznat kao a stočna hrana, je XML dokument nosi sadržaj koji izdavač želi distribuirati.

RSS izvori dostupni su na gotovo svim internetskim stranicama s vijestima i blogovima za njihove čitatelje ostanite upoznati sa njihovim sadržajem. Mogu se naći i na web-mjesta koja nisu bazirana na tekstu kao što je YouTube, gdje možete koristiti feed kanala usluge YouTube o najnovijim videozapisima.

Pozivaju se programi koji pristupaju tim feedovima i čitaju i prikazuju njihov sadržaj RSS čitači. Možete stvoriti jednostavan RSS čitač u JavaScriptu. U ovom vodiču vidjet ćemo kako.

Struktura RSS feeda

RSS feed ima korijenski element zvao , slično nalazi se u HTML dokumentima. Unutar oznaka, postoji element, vrsta kao u HTML-u uključuje mnoge podelemente koji sadrže distribuirani sadržaj web-mjesta.

Obrok obično nosi nešto Osnovne informacije kao što su naslov, URL i opis web-lokacije i pojedinačne ažurirane postove, članke ili druge sadržaje te web-lokacije. Te se informacije nalaze u </code>, <code><link></code>, i <code><description></code> pojedinačno. Kada su te oznake izravno prisutni unutar <code><channel></code>, imaju naslov, URL i opis web-lokacije. Kada su prisutan unutra <code><item></code> da sadrži informacije o ažuriranim postovima, oni predstavljaju istu informaciju kao i prije, ali i pojedine sadržaje koji svaki od njih <code><item></code> predstavljati. Tu su i neki izborni elementi koji mogu biti prisutni u RSS feedu, pružajući dodatne informacije kao što su slike ili autorska prava na distribuirani sadržaj. O tome možete saznati u ovome RSS 2.0 specifikacija na cyber.harvard.edu. Evo primjera kako RSS feed web-mjesta može izgledati ovako: <pre name="code"> <rss version="2.0"> <channel> <title>Hongkiat https://www.hongkiat.com/ Savjeti za dizajn, vodič i inspiracija hr-hr Zamislite bilo koji CSS stil s CSS statistikom Jeste li se ikada zapitali koliko je CSS pravila u stilu? Ili ste ikada željeli vidjeti ... 18/05/2017 https://www.hongkiat.com/blog/css-stylesheet-with-css-stats/ Amazon Echo Show - najnoviji pametni uređaj s pogonom na Alexa Amazon nije čudan koncept pametnih kućnih sustava s ugrađenim digitalnim pomoćnikom. Uostalom,… 17/05/2017 https://www.hongkiat.com/blog/alexa-device-amazon-echo-show/

`Dohvaćanje feeda`

 Moramo dohvatite feed s našom aplikacijom RSS čitača. Na web-lokaciji može biti URL RSS-a pronađeno unutar  pomoću oznake Primjena / RSS + XML tip. Na primjer, na Hongkiat.com ćete pronaći sljedeću vezu sa RSS feedom.
   
 Prvo, da vidimo kako dobiti URL feeda web-lokacije pomoću JavaScripta.
  fetch (websiteUrl) .tad ((res) => res.text ().) ((htmlTxt) => var domParser = novi DOMParser () neka doc = domParser.parseFromString (htmlTxt, 'text / html') var feedUrl = doc.querySelector ('veza [type = "application / rss + xml"]'). href)). catch (() => console.error ('Pogreška u dohvaćanju web lokacije')) 
  dohvatiti () metoda je globalna metoda koja asinkrono dohvaća resurs. URL resursa uzima se kao argument (URL web-lokacije u našem kodu). To vraća a Obećanje objekt, tako da kada metoda uspješno dohvaća web-lokaciju (tj Obećanje je ispunjena), prva funkcija unutar zatim() izjava rukuje dohvaćenim odgovorom (res u gornjem kodu).
  Dohvaćeni odgovor je tada čitati u tekstualni niz koristiti tekst() metoda. Ovaj tekst predstavlja HTML tekst naše preuzete web-lokacije. Kao dohvatiti (), tekst() također vraća a Obećanje objekt. Dakle, kada uspješno kreira tekst odgovora iz toka odgovora, zatim() obradit će taj tekst odgovora (htmlText u gornjem kodu).
 Kada je HTML tekst web-lokacije dostupan, koristimo ga DOMParser API do analizirati ga u DOM dokument. DOMParser analizira XML / HTML tekstualni niz u DOM dokument. Njegova metoda, parseFromString (), traje dva argumenta: tekst za analizu i vrstu sadržaja.
 Zatim, iz stvorenog DOM dokumenta, mi naći href vrijednost relevantne  označiti koristiti querySelector () da biste dobili URL feeda.
 Raščlanjivanje i prikazivanje feeda
 Kada dobijemo URL feeda web-lokacije, moramo to učiniti dohvatiti i pročitati RSS dokument pronađeno na tom URL-u.
  fetch (feedUrl) .tad ((res) => res.text ().) ((xmlTxt) => var domParser = novi DOMParser () neka doc = domParser.parseFromString (xmlTxt, 'text / xml') doc forEach ((item) => neka h1 = document.createElement ('h1') h1.textContent = item.querySelector ('title'). textContent document.querySelector ('output'). appendChild (h1)))) 
 Na isti način kao što smo dohvatili i analizirali web stranicu, sada smo dobiti i analizirati XML feed u DOM dokument. Da bismo to postigli, koristimo 'Text / xml' vrstu sadržaja u izborniku parseFromString () način.
 U analiziranom dokumentu odaberite sve  elementi koristiti querySelectorAll metoda i kroz svaku petlju.
 Unutar svakog elementa možemo pristupne oznake Kao </code>, <code><description></code>, i <code><link></code>, koji nose sadržaj hrane. I, naša jednostavna aplikacija za čitanje RSS-a je gotova, možete stilizirati sadržaj preuzetih feedova kako želite.</p> <h4>Github demo</h4> <p>Možete pogledati <strong>detaljnija verzija</strong> koda koji se koristi u ovom postu u našem Github repo-u. Detaljnija verzija <strong>dohvaća tri feeda</strong> (Mozilla Hacks, Hongkiat i webkit blog) <strong>pomoću JSON datoteke</strong> i dodaje neke CSS stilove u RSS čitač.</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">Kako stvoriti tajno prikriven mape bez dodatnog softvera</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">Kako stvoriti osiguran i zaključan mapu u sustavu 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">Kako stvoriti prilagodljivu navigaciju</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">Sljedeći članak</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">Kako stvoriti prečac pretraživanja na radnoj površini u sustavu Windows 8.1</a> </div>
				</div>
			
			</div>


			<div class="col-md-6">
				
					<div class="post">
                            <div class="prevnext-title">Prethodni članak</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">Kako stvoriti rutinu s 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">
			Korisni podaci i savjeti za web-razvoj. Programiranje, web dizajn, CSS, HTML, JAVASCRIPT. Konfigurirajte i ponovno instalirajte WINDOWS. Izrada web stranica i aplikacija ispočetka.
		</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>