Saiba como colocar o feed de um site em um aplicativo

por Lucas Longo (@iaibrasil)*

Continuamos nosso tutorial sobre como criar um aplicativo para ter o nosso site na tela do iPhone. Se você perdeu alguma edição, corra até a loja Digerati (www.digerati.com.br/loja) e adquira os números anteriores.

Na matéria anterior, começamos a parte mais complicada, ou seja, pegar as notícias do site, via feed RSS para jogar no aplicativo. Agora, vamos começar a preparar a interface para essa funcionalidade do programa.

Para o título do view, que aparecerá no centro da navigation bar, utilizamos o valor da tag “title”. Vamos usar um web view para exibir a matéria com a formatação HTML que recebemos do feed RSS do site, via a tag “content:encoded”.

Veja abaixo como recebemos o feed e de onde pegamos os nomes das tags.

Utilizei o NSLog para imprimir essas informações no Console (Aplicativos/Utilitários):

NSLog(@”Noticias dict %@”, [noticiaDict description]);

Noticias dict {

category = “Windows Phone 7″;

comments = “http://www.macmais.com.br/noticias/estudo-aponta-que-google-passara-apple-no-numero-de-apps-ainda-este-ano/#comments”;

“content:encoded” = “<p><strong>Por Daniel Pavani, da </strong><a href=\”http://www.geek.com.br\” target=\”_blank\”><strong>Geek</strong></a><strong>.</strong></p>\n<p>Uma empresa de pesquisa de mercado dos Estados Unidos apresentou os resultados de um trabalho com as diversas lojas de aplicativos para smartphones existentes hoje. Os n\U00fameros indicam que o Android Market pode ultrapassar a App Store em poucos meses.</p>\n<p><a href=\”http://www.macmais.com.br/wp-content/uploads/2011/04/grafico.jpg\”><img class=\”aligncenter size-full wp-image-22013\” title=\”grafico\” src=\”http://www.macmais.com.br/wp-content/uploads/2011/04/grafico.jpg\” alt=\”\” width=\”540\” height=\”426\” /></a></p>\n<p>O estudo da empresa Distimo foi realizado com as lojas de aplicativo App Store (para iPhone e para iPad), Google Android Market, Nokia Ovi Store, BlackBerry App World, GetJar, Palm App Catalog e a Marketplace do Windows Phone 7. De acordo com os resultados encontrados, as lojas da Google e da Microsoft s\U00e3o as que apontam um crescimento mais r\U00e1pido, conta o site\U00a0<a href=\”http://news.cnet.com/8301-27076_3-20058080-248.html?part=rss&amp;subj=news&amp;tag=2547-1_3-0-20\”>CNET</a>.</p>\n<p>Ainda, se as lojas mantiverem o ritmo de crescimento atual, em cerca de cinco meses a Android Market ir\U00e1 ultrapassar a Apple App Store, se tornando a loja com o maior n\U00famero de aplicativos. Outro dado interessante \U00e9 que a Marketplace do Windows Phone 7 deve ser maior que a Ovi Store e a App World antes de um ano de vida.</p>\n<p>Deve-se ressaltar, entretanto, que toda estimativa deste tipo \U00e9 baseada nas caracter\U00edsticas e comportamentos dos \U00faltimos meses e, portanto, est\U00e3o sujeitas a mudan\U00e7as, seja para mais ou para menos. Neste caso, este ritmo de crescimento pode diminuir ou aumentar em um futuro pr\U00f3ximo, estando dentro de uma margem de erro.</p>\n<p>Mesmo assim, s\U00e3o dados interessantes que mostram uma tend\U00eancia que pode significar a perda da lideran\U00e7a da Apple no n\U00famero de aplicativos e desenvolvedores.</p>\n”;

“dc:creator” = “Reda\U00e7\U00e3o MacMais”;

description = “Mais um epis\U00f3dio da corrida entre Apple e Google.

\n”;

guid = “http://macmais.com.br/?p=22012″;

link = “http://www.macmais.com.br/noticias/estudo-aponta-que-google-passara-apple-no-numero-de-apps-ainda-este-ano/”;

pubDate = “Thu, 28 Apr 2011 19:51:08 +0000″;

“slash:comments” = 1;

title = “Estudo aponta que Google passar\U00e1 Apple no n\U00famero de apps ainda este ano”;

“wfw:commentRss” = “http://www.macmais.com.br/noticias/estudo-aponta-que-google-passara-apple-no-numero-de-apps-ainda-este-ano/feed/”;
}

Com o RSSDetailViewController.xib aberto, primeiro definimos quanto espaço realmente teremos para desenhar na tela. Nas propriedades do view, encontramos os Simulated Metrics, ou Métricas Simuladas. Como o nosso view controller está dentro de um Tab Bar e de um Navigation Controller, temos de setar (indicar) o Top Bar e o Bottom Bar para refletir isso.

Em seguida, arrastamos um UIWebView para dentro do view e um UIActivityIndicatorView para indicar a atividade do web view. Depois, configuramos o UIActivityIndicatorView para ficar maior e esconder-se automaticamente quando estiver parado ou sem animação. É possível conectar também o delegate do UIWebView com o File’s Owner, isto é, a nossa subclasse. É ali que vamos implementar os métodos do delegate do UIWebView que nos avisa quando uma página começou a ser carregada, quando terminou, quando deu erro, entre outras coisas.E, finalmente, precisamos ter acesso a esses elementos na interface pelo código. Para isso, é necessário declarar na nossa interface ou header file (.h) os objetos que estão na interface com a “palavra mágica” IBOutlet. No Xcode 4, este processo deixou de ser manual. Podemos fazer isso diretamente da interface.

O primeiro passo é exibir o Assistant Editor, que pode ser ligado nos botões do Editor no topo direito do Xcode. Certifique-se de que na tela nova que apareceu a opção Automatic esteja selecionada. Assim, ele exibirá automaticamente o header file.

Vamos selecionar o web view na coluna da esquerda e as conexões na coluna da direita, arrastando a bolinha do Referencing Outlets > New Referencing Outlet para dentro do código, dentro das chaves do @interface.

O Xcode pedirá o nome para esta variável e, automaticamente, cria o código necessário.

Fazemos o mesmo para o UIActivityIndicatorView

De volta ao código, vamos indicar (setar) o título do view que aparecerá no navigation bar. Pegamos a string associada à chave “title” do dicionário e colocamos esta string no título do view controller (self ):

RSSDetailViewController.m

#pragma mark – View lifecycle

- (void)viewDidLoad

{

[super viewDidLoad];

// Do any additional setup after loading the view from its nib.

NSLog(@”News Dict %@”, [newsDict description]);

NSString* titulo = [newsDict objectForKey:@"title"];

self.title = titulo;

}

Em seguida, vamos abrir o HTML no web view. Primeiro, pegamos o string do HTML do dicionário – o objeto associado à chave “content:encoded”. Passamos este string para o web view e pedimos para ele exibir este conteúdo:

#pragma mark – View lifecycle

- (void)viewDidLoad

{

[super viewDidLoad];

// Do any additional setup after loading the view from its nib.

NSLog(@”News Dict %@”, [newsDict description]);

NSString* titulo = [newsDict objectForKey:@"title"];

self.title = titulo;

NSString* conteudo = [newsDict objectForKey:@"content:encoded"];

[meuWebVIew loadHTMLString:conteudo baseURL:nil];

}

O resultado pode ser visto na tela.

Vamos partir para o toque final, que é exibir o UIActivityIndicatorView quando a página está sendo carregada e quando terminou de carregar. Para tanto, usamos dois métodos do delegate do web view.

É sempre boa prática declarar no seu header (.h) quais protocolos a classe implementa. Vamos informar ao compilador que vamos implementar o delegate do UIWebView – o UIWebViewDelegate.

RSSDetailViewController.h

#import <UIKit/UIKit.h>

@interface RSSDetailViewController : UIViewController <UIWebViewDelegate> {NSDictionary* newsDict;

IBOutlet UIWebView *meuWebVIew;

IBOutlet UIActivityIndicatorView*spinner;

}

@property(nonatomic,retain)NSDictionary* newsDict;

@end

De volta à implementação [method file (.m)], implementamos os métodos do UIWebViewDelegate, onde iniciamos e paramos a animação do “spinner” (aquele sinal que fica girando quando algo está sendo carregado) – nosso UIActivityIndicatorView:

#pragma mark - UIWebViewDelegate

-(void)webViewDidStartLoad:(UIWebView *) webView

{

[spinner startAnimating];

}

-(void)webViewDidFinishLoad:(UIWebView *)webView

{

[spinner stopAnimating];

}

Use o #pragma mark para marcar seu código e mantê-lo organizado quando clicar na barra do documento aberto.

E para o “auto-complete” funcionar para métodos do delegate, basta digitar “ -” seguido do nome da classe. Ao testar o aplicativo, observamos o “spinner” sendo exibido enquanto as imagens são carregadas. Vemos também o título da matéria e o botão RSS que aparece automaticamente. Este RSS é simplesmente o título do view controller anterior.

*Matéria publicada originalmente na MAC+ 62.