#desenvolvimento

Desenvolvendo um leitor de RSS com jQuery Mobile


Olá pessoal.

Procurando por meios de começar o desenvolvimento para dispositivos móveis encontrei o Sencha Touch e o jQuery Mobile. Brinquei um pouco com Sencha Touch mas percebi que seria necessário estudar o ExtJs primeiro. Então preferi aprofundar no jQuery Mobile e utilizar o conhecimento que tenho sobre jQuery.

Resolvi fazer um leitor de RSS para o meu blog que pode ser acessado aqui, e o código completo encontra-se no meu GitHub.

Inicialmente tive um pouco de dificuldade em ler o feed, já que o RSS do WordPress não é disponibilizado como JSON. (Observação: Para quem possui uma instância do WordPress instalada, existem vários plugins para exportar o feed como JSON.) Após pesquisar encontrei o Google Feed API que faz o download do RSS em vários formatos, incluindo JSON o qual escolhi para fazer o meu leitor de feeds.

Vamos ao código:

Primeiro vamos configurar nossa página para utilizar os plugins necessários.

<!DOCTYPE html>
   <html>
      <head>
         <meta charset="utf-8" />
         <title>Reflexões Brenianas - Feed</title>
         <!-- CSS do jQuery Mobile -->
         <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
         <!-- jQuery -->
         <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
         <!-- jQuery Mobile -->
         <script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js">
         <!--
              Google Feed API
              Será necessário gera uma chave através do link http://code.google.com/apis/loader/signup.html
         -->
         <script type="text/javascript" src="https://www.google.com/jsapi?key=[SUA_CHAVE_GERADA]"></script>
      </head>

O corpo da página já utiliza as tags do HTML 5 (section, header, footer), mas também é possível fazer com divs.

   <body id="page_body">
      <!-- Início da home -->
      <section id="home" data-role="page">
         <!-- Cabeçalho -->
         <header data-role="header" data-position="fixed">
            <center>
               <h1>Reflexões Brenianas - Feed</h1>
            </center>
         </header>
         <!-- Conteúdo -->
         <div data-role="content">
            <ul data-role="listview">
            </ul>
         </div>
         <!-- Rodapé -->
         <footer data-role="footer" data-position="fixed">
            <center>
               <h3>monteirobrena</h3>
            </center>
         </footer>
      </section>
      <!-- Fim da home -->

Agora falta a codificação Javascript facilitada pelos plugins utilizados 😉

   <script type="text/javascript">
      // Carrega a API do Google para download do Feed.
      google.load("feeds", "1");

      // Inicializa a obtenção do feed.
      function initialize() {

         // Obtém o feed do blog.
         var feed = new google.feeds.Feed("https://monteirobrena.wordpress.com/feed");

         // Define a quantidade de entradas do feed que será buscada.
         feed.setNumEntries(10);

         // Carrega o arquivo do feed.
         feed.load(function(result) {

            // Obtém a página.
            var $page = $("#home");

            // Remove o conteúdo contido na div que utiliza a classe 'content'.
            $page.find(".content").empty();

            // Verifica se houve algum erro ao buscar o feed.
            if (result.error) {
               alert("Nenhum post encontrado.");
            }else{

               // Cria uma nova lista de posts.
               $page.find(".content").html("<ul></ul>");

               // Obtém a lista onde os posts serão adicionados.
               $list = $page.find(".content ul");

               // Percorre a lista de posts.
               for (var count = 0; count < result.feed.entries.length; count++) {

                  // Obtém o item do feed pelo índice.
                  var entry = result.feed.entries[count];

                  // Obtém o título do post.
                  var title = entry.title;

                  // Obtém o link do post.
                  var link = entry.link;

                  // Constrói o item da lista com o título do post e cria um link com o índice.
                  var strLink = '<li><a href="javascript:create_page(' + count + ',\'' + title + '\');">';

                  strLink += title;

                  strLink += '</a></li>\n';

                  // Atribui o html montado para um item.
                  var item = $(strLink);

                  // Adiciona o item na lista de posts.
                  $list.append(item);
            }
            // Atribui a lista montada à listview
            $list.listview();
         }
      });
   }
   // Chama a função que inicializa.
   google.setOnLoadCallback(initialize);

Com este código já conseguimos montar nossa home carregando uma lista com os posts.

Para finalizar falta criarmos uma página com o post no momento que um item da lista for clicado, ou melhor, quando ele receber um evento TAP.

// Cria uma página com o post
function create_page(page_id, title) {

   // Obtém o título.
   var titlePost = title;

   // Obtém o feed do blog.
   var feed = new google.feeds.Feed("https://monteirobrena.wordpress.com/feed");

   // Define a quantidade de entradas do feed que será buscada.
   feed.setNumEntries(10);

   // Carrega o arquivo do feed.
   feed.load(function(result) {

      // Get the content of page.
      var $page = $("#home");

      // Remove o conteúdo contido na div que utiliza a classe 'content'.
      $page.find(".content").empty();

      // Verifica se houve algum erro ao buscar o feed.
      if (result.error) {
         alert("Post não encontrado.");
      }else{
         // Percorre a lista de post.
         for (var count = 0; count < result.feed.entries.length; count++) {

            // Verifica se o título é igual.
            if (titlePost == result.feed.entries[count].title){

               // Obtém o item do feed pelo índice.
               var entry = result.feed.entries[page_id];

               // Obtém o conteúdo do post.
               var post = entry.content;

               // Monta a tela do post.
               var strPost = '<section id="page_' + page_id + '" data-role="page">';
               strPost += '<header data-role="header" data-position="fixed">';

               // Adiciona um link com o estilo de um botão de voltar que chama a função para recarregar a lista de posts.
               strPost += '<a href="#home" data-icon="back" onclick="initialize();">Voltar</a>';

               strPost += '<center><h1>Reflexões Brenianas - Feed</h1></center></header>';
               strPost += '<div data-role="content">';

               // Adiciona o título do post.
               strPost += '<h3>' + title + '</h3>';

               // Adiciona o conteúdo do post.
               strPost += post + '</div>';

               strPost += '<footer data-role="footer" data-position="fixed">';
               strPost += '<center><h3>monteirobrena</h3></center></footer></section>';

               // Adiciona o html montado à página.
               $('#page_body').append(strPost);

               // Inicializa a página.
               $.mobile.initializePage();

               // Navega até a página.
               $.mobile.changePage("#page_" + page_id, "slide", true, false);
            }
         }
      }
   });

Possivelmente deve existir formas mais fáceis para criar uma nova página sem precisar, por exemplo, criar novamente o section e poder reaproveitar o cabeçalho e o rodapé. Mas preferi mostrar um jeito mais didático.

A quem interessar e quiser aprender um pouco mais sobre jQuery Mobile recomendo a leitura do livro jQuery Mobile O’Reilly e jQuery Mobile First Look.

Até breve 😉

Anúncios
Padrão

7 comentários sobre “Desenvolvendo um leitor de RSS com jQuery Mobile

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s