Como criar um aplicativo de leitor de RSS em JavaScript

RSS (Really Simple Syndication) é um formato padronizado usado por editores on-line para distribuir seu conteúdo para outros sites e serviços. A Documento RSS, também conhecido como alimentação, é um Documento XML carregando o conteúdo que um editor deseja distribuir.

Os feeds RSS estão disponíveis em quase todos os sites de notícias e blogs on-line para que seus leitores mantenha-se atualizado com seu conteúdo. Eles também podem ser encontrados em sites não baseados em texto como o YouTube, onde você pode usar o feed de um canal do YouTube para ser informado sobre os vídeos mais recentes.

Programas que acessam esses feeds e lêem e exibem seus conteúdos são chamados Leitores de RSS. Você pode criar um programa simples de leitor de RSS em JavaScript. Neste tutorial, vamos ver como.

Estrutura de um feed RSS

Um feed RSS tem um elemento raiz chamado , semelhante ao tag encontrada em documentos HTML. Dentro de tag, existe um elemento, tipo de gosto em HTML, isso inclui muitos subelementos contendo o conteúdo distribuído do site.

Um feed geralmente leva alguns informação básica como o título, URL e descrição do site e do site postagens, artigos ou outros conteúdos atualizados individualmente desse site. Essas informações são encontradas em </code>, <code><link></code>, e <code><description></code> elementos, respectivamente. Quando essas tags são diretamente presente dentro <code><channel></code>, eles possuem o título, o URL e a descrição do site. Quando eles estão presente dentro <code><item></code> naquela contém as informações sobre as postagens atualizadas, eles representam a mesma informação de antes, mas a do conteúdo individual que cada <code><item></code> representar. Existem também alguns elementos opcionais que pode estar presente em um feed RSS, fornecendo informações complementares, como imagens ou direitos autorais, sobre o conteúdo distribuído. Você pode aprender sobre eles neste Especificação RSS 2.0 em cyber.harvard.edu. Aqui está uma amostra de como o Feed RSS de um site pode parecer com: <pre name="code"> <rss version="2.0"> <channel> <title>Hongkiat https://www.hongkiat.com/ Dicas de Design, Tutorial e Inspirações en-us Visualize qualquer folha de estilo CSS com CSS Stats Já imaginou quantas regras CSS estão em uma folha de estilo? Ou você já quis ver ... 18/05/2017 https://www.hongkiat.com/blog/css-stylesheet-with-css-stats/ Amazon Echo Show - O mais recente dispositivo inteligente com alimentação Alexa A Amazon não é estranha ao conceito de sistemas domésticos inteligentes com um assistente digital incorporado. Afinal, o… 17/05/2017 https://www.hongkiat.com/blog/alexa-device-amazon-echo-show/

`Buscando o feed`

 Nós precisamos buscar o feed com o nosso aplicativo leitor de RSS. Em um site, o URL de um feed RSS pode ser encontrado dentro do  tag usando o aplicativo / rss + xml tipo. Por exemplo, você encontrará o seguinte link de feed RSS em Hongkiat.com.
   
 Primeiro, vamos ver como obter o URL do feed de um website usando JavaScript.
  fetch (websiteUrl) .then ((res) => res.text (). then ((htmlTxt) => var domParser = novo DOMParser () let doc = domParser.parseFromString (htmlTxt, 'text / html') var feedUrl = doc.querySelector ('link [type = "aplicativo / rss + xml"]'). href)). catch (() => console.error ('Erro ao buscar o site')) 
 o buscar() método é um método global que de forma assíncrona obtém um recurso. Leva a URL do recurso como um argumento (a URL do site em nosso código). isto retorna um Promessa objeto, então quando o método busca com sucesso o site (ou seja, o Promessa é cumprida), a primeira função dentro do então() declaração lida com a resposta buscada (res no código acima).
  A resposta buscada é então leia completamente em uma string de texto usando o texto() método. Este texto representa o Texto HTML do nosso site buscado. Gostar buscar(), texto() Além disso retorna um Promessa objeto. Então, quando ele cria com sucesso um texto de resposta a partir do fluxo de resposta, então() irá lidar com esse texto de resposta (htmlText no código acima).
 Uma vez que o texto HTML do site esteja disponível, nós usamos API DOMParser para analisá-lo em um documento DOM. DOMParser analisa uma cadeia de texto XML / HTML em um documento DOM. Seu método, parseFromString (), leva dois argumentos: a texto a ser analisado e a tipo de conteúdo.
 Então, a partir do documento DOM criado, nós encontre o href valor do relevante  tag usando o querySelector () método para obter o URL do feed.
 Analisando e exibindo o feed
 Assim que tivermos o URL do feed do site, precisamos buscar e ler o documento RSS encontrado nessa URL.
  fetch (feedUrl) .then ((res) => res.text (). então ((xmlTxt) => var domParser = new DOMParser () deixa doc = domParser.parseFromString (xmlTxt, 'text / xml') doc .querySelectorAll ('item'). forEach ((item) => let h1 = document.createElement ('h1') h1.textContent = item.querySelector ('título'). textContent document.querySelector ('saída'). appendChild (h1)))) 
 Da mesma forma que buscamos e analisamos o site, agora obter e analisar o feed XML em um documento DOM. Para conseguir isso, usamos o 'text / xml' tipo de conteúdo no parseFromString () método.
 No documento analisado, nós selecione todos os  elementos usando o querySelectorAll método e loop através de cada.
 Dentro de cada elemento, podemos tags de acesso gostar </code>, <code><description></code>, e <code><link></code>, que estão transportando o conteúdo do feed. E, nossa simples aplicação de leitor de RSS é feita, você pode estilizar o conteúdo dos feeds buscados como você deseja.</p> <h4>Demonstração do Github</h4> <p>Você pode conferir o <strong>versão mais detalhada</strong> do código usado neste post em nosso repositório do Github. A versão mais detalhada <strong>obtém três feeds</strong> (Mozilla Hacks, Hongkiat e o blog do Webkit) <strong>usando um arquivo JSON</strong> e também adiciona alguns estilos CSS ao leitor 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">Como criar uma pasta secretamente disfarçada sem software extra</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">Como criar uma pasta segura e bloqueada no 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">Como criar uma navegação responsiva</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">Artigo seguinte</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">Como criar um atalho de pesquisa na área de trabalho no Windows 8.1</a> </div>
				</div>
			
			</div>


			<div class="col-md-6">
				
					<div class="post">
                            <div class="prevnext-title">Artigo anterior</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">Como criar uma rotina com o 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">
			Informações úteis e dicas de desenvolvimento da web. Programação, web design, CSS, HTML, JAVASCRIPT. Configure e reinstale o WINDOWS. Criação de sites e aplicativos a partir do zero.
		</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>