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("http://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("http://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
Nenhum trackbacks ainda.