terça-feira, 28 de agosto de 2012

iOS: Lendo JSON

Olá povo,

Nesse post vou mostrar como ler JSON utilizando a API nativa do iOS. Como exemplo, vamos obter os principais tópicos do Twitter conhecidos como Top Trends.
Crie um novo projeto no Xcode, e marque para utilizar Storyboards e o ARC (Automatic Reference Counting). No ViewController principal da aplicação, declare um NSMutableArray que armazenará a lista dos tópicos que serão mostrados na UITableView. Declare também um NSMutableData, que armazenará os bytes do arquivo JSON que iremos ler na conexão HTTP.
Note que nossa classe implementa o protocolo NSURLConnectionDelegate, que contém os métodos que são chamados pela conexão HTTP. No nosso caso, estamos utilizando para ler os bytes da conexão ser travar a Thread de UI.

#import <UIKit/UIKit.h>

@interface NGViewController : UITableViewController
  <NSURLConnectionDelegate> {

  NSMutableArray *trends;
  NSMutableData *data;
}
@end
O arquivo de implementação ficará como abaixo:
#import "NGViewController.h"

@implementation NGViewController

- (void)viewDidLoad {
  [super viewDidLoad];

  trends = [NSMutableArray new];
  data = [NSMutableData new];
    
  NSURL *url = [NSURL URLWithString:
    @"https://api.twitter.com/1/trends/23424768.json"];
  NSURLRequest *request = 
    [[NSURLRequest alloc]initWithURL:url];   
  NSURLConnection *conexao = [[NSURLConnection alloc]
    initWithRequest:request delegate:self];
  [conexao start];
}

- (void)viewDidUnload {
  [super viewDidUnload];
  trends = nil;
  data = nil;
}

// Métodos de UITableViewController

- (UITableViewCell *)tableView:
  (UITableView *)tableView 
  cellForRowAtIndexPath:(NSIndexPath *)indexPath {

  UITableViewCell *cell = [tableView
    dequeueReusableCellWithIdentifier:@"Cell"];
    
  cell.textLabel.text = 
    [trends objectAtIndex:indexPath.row];
    
  return cell;
}

- (NSInteger)numberOfSectionsInTableView:
  (UITableView *)tableView {
  return 1;
}

- (NSInteger)tableView:(UITableView *)tableView
  numberOfRowsInSection:(NSInteger)section {
  return trends.count;
}

// NSURLConnectionDelegate

- (void)connection:(NSURLConnection *)connection
  didReceiveData:(NSData *)pdata {
  [data appendData:pdata];
}


- (void)connectionDidFinishLoading:
  (NSURLConnection *)connection {   
  id jsonObject = [NSJSONSerialization 
    JSONObjectWithData:data 
    options:NSJSONReadingMutableContainers error:nil];
    
  id jsonTrends =  [
    [jsonObject objectAtIndex:0] 
      objectForKey:@"trends"];
        
  for (NSDictionary *trend in jsonTrends) {
    [trends addObject:[trend objectForKey:@"name"]];
  }
    
  [self.tableView reloadData];
}

@end
No método viewDidLoad inicializamos nossos dois atributos e logo em seguida começamos o processo de conexão com o servidor. Notem que a URL termina com 23424768.json, esse número é o woeid do Brasil, se quiser os tópicos mundiais, basta substituir por 1.json. Mas se quiser obter os tópicos de outro país, basta acessar http://developer.yahoo.com/yql/console/ e digitar o comando select * from geo.places where text="Seu Local". Mais informações sobre woeid aqui.
Em seguida criamos um request e enviamos essa solicitação através da conexão. O parâmetro delegate indica que nossa classe será notificada sobre eventos na conexão. O método viewDidUnload liberará os recursos alocados.
Não vou comentar os métodos de UITableViewController, mais detalhes aqui. Na nossa classe implementamos dois métodos do protocolo NSURLConnectionDelegate. O método connection:didReceiveData alimentará o nosso atributo data com os bytes recebidos pela conexão. Já o método connectionDidFinishLoading será chamado quando os dados terminarem de serem lidos. É nele que estamos fazendo a leitura do JSON.
A classe NSJSONSerializarion recebe um objeto NSData e retorna um objeto. Um documento JSON em Objective-C consta basicamente de NSArray ou NSDictionary. Se acessarmos a URL que definimos no primeiro método da nossa classe, vamos visualizar o arquivo JSON e se quisermos vê-lo de uma forma mais amigável, podemos utilizar o site http://jsonviewer.stack.hu/ e colar o texto do arquivo JSON lá. Então será apresentado o documento de uma forma hierárquica. Conforme a figura abaixo:
O elemento com [] é um array, enquanto que o {} é um dicionário (contento chave/valor). Sendo assim, a variável jsonObject contém um array de apenas um elemento. Dentro desse elemento temos um array chamado trends. Esse array está sendo representado pela variável jsonTrends. Em seguida, percorremos esse array (que tem vários dictionaries) e em cada dictionary obtemos o valor da chave name, que contém o nome do tópico mais comentado.
O resultado da aplicação é mostrado abaixo:
Qualquer dúvida, deixem seus comentários,

4br4ç05,
nglauber

sábado, 18 de agosto de 2012

Pipe igual?

Olá povo,

Recebi um email com uma dúvida simples, mas interessante sobre Java, então resolvi posta aqui. O "|" (chama-se pipe ou popularmente "barra-em-pé") representa o operador OR binário. Quando utilizamos || (dois pipes) em uma expressão booleana, se a primeira for verdadeira, ele nem avalia a segunda.
boolean a = true;
int x = 0;
if (a == true || ++x > 0){
   // O valor de x não mudará
}
x continuará zero, pois a segunda expressão não será avaliada.
Mas quando utilizamos o operador em uma atribuição, estamos fazendo uma operação binária de OR.
int a = 2; // Em binário 00000010
int b = 4; // Em binário 00000100

// Vai ativar os bits de "a" (que é 2) em "b"
// Logo, em binário, ficará 00000110 que é igual a 6
b |= a; 
Você pode se perguntar: "em que isso influencia?" ou ainda "onde vou usar isso?". Essa abordagem é muito usada quando vc quer que uma propriedade possa assumir uma combinação de valores. Por exemplo, uma fonte pode ser bold, itálico e/ou sublinhado.
int bold = 1;      //00001
int italic = 2;    //00010
int underline = 4; //00100
Pra deixar uma fonte, itálico e sublinhada, usaríamos:
int fonte = bold | underline; // 00101 = 5
Aí você pode perguntar: qual a diferença entre isso e o + ? É que quando você usa o OR, se o valor já estiver setado, ele não é alterado. Continuando com o exemplo acima:
// ao invés de usar
fonte += bold; 
// igual a 6 (não seria o que queremos)

// usamos
fonte |= bold; 
// como o primeiro bit já está como 1, fonte continua 5
Já para checar se uma das opções da fonte está habilitada, usamos o operador &.
// assumindo que fonte = 5 = 00101
if (fonte & bold != 0){
  // fonte é negrito
}
Fui claro? :)

4br4ç05,
nglauber

sexta-feira, 10 de agosto de 2012

Cuide da sua AsyncTask

Olá povo,

Eu comecei a escrever esse post na Campus Party Recife 2012. Palestrei sobre Android no evento, e apresentei um exemplo que faz uma busca no Twitter e exibe o resultado dessa pesquisa.
Entretanto, durante a palestra não deu para mostrar e resolver alguns problemas básicos que aplicação apresenta. São eles:
1) O Adapter que preenche a lista não foi implementado de forma eficiente;
2) Dar um feedback visual para o usuário enquanto está baixando informações;
3) Avisar ao usuário quando não houver conexão com a internet;
4) Fazer um tratamento caso tenha ocorrido algum problema durante o parse do JSON que é retornado pelo Twitter;
5) Tratar mudança de orientação para evitar que os dados sejam baixados novamente.

O objetivo desse post é mostrar como solucionar esses problemas. Mas antes de começar, vamos mostrar as duas classes básicas da aplicação: Tweet e BuscaTwitter.
public class Tweet {
  String text;
  String profile_image_url;
 
  public String getText() { 
    return text; 
  }
  public void setText(String text) { 
    this.text = text;
  }
  public String getProfile_image_url() {
    return profile_image_url;
  }
  public void setProfile_image_url(String profile_image_url) {
    this.profile_image_url = profile_image_url;
  }
}
public class BuscaTwitter {
  List<Tweet> results;

  public List<Tweet> getResults() {
    return results;
  }
  public void setResults(List<Tweet> result) {
    this.results = result;
  }
}
A primeira mapeia representará cada tweet postado pelo usuário com a hashtag #CPRecife. E a segunda representa a lista desses tweets. Criei essas classes para utilizar a biblioteca GSON que comentarei mais adiante. Vamos agora a lista das soluções.

Solução 1
A classe TweetAdapter utiliza o padrão Adapter para preencher as informações do componente visual de lista. Diferentemente da versão criada na palestra, a versão abaixo é implementada de forma eficiente.
public class TweetAdapter extends ArrayAdapter<Tweet> {

  public TweetAdapter(
    Context context, List<Tweet> objects) {
    super(context, 0, 0, objects);
  }

  public View getView(
    int position, View convertView, ViewGroup parent) {

    ViewHolder holder;

    Tweet tweet = getItem(position);

    if (convertView == null) {
      convertView = LayoutInflater.from(
        getContext()).inflate(
          R.layout.linha_tweet, null);

      holder = new ViewHolder();
      holder.txtTexto = (TextView) 
        convertView.findViewById(R.id.textView1);
      holder.imgFoto = (ImageView) 
        convertView.findViewById(R.id.imageView1);
      convertView.setTag(holder);
    } else {
      holder = (ViewHolder) convertView.getTag();
    }

    holder.txtTexto.setText(tweet.getText());
    BitmapManager.getInstance().loadBitmap(
      tweet.getProfile_image_url(),
      holder.imgFoto);

    return convertView;
  }

  static class ViewHolder {
    ImageView imgFoto;
    TextView txtTexto;
  }
} 
Não entendeu essa classe? Clique aqui.
O arquivo de layout usado pelo adapter é mostrado abaixo:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:orientation="horizontal" >

  <ImageView
    android:id="@+id/imageView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_launcher" />

  <TextView
    android:id="@+id/textView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Medium Text"
    android:textAppearance="?android:attr/textAppearanceMedium" />
</LinearLayout>
No exemplo acima, estou usando a classe BitmapManager que faz o download de forma assíncrona e por demanda da foto do perfil do usuário que postou o Tweet. Além disso, ela faz um cache em memória dessas imagens. Disponibilizei essa classe aqui, mas se quiser melhora-la, você pode salvar as imagens no cartão de memória do aparelho.

Solucão 2, 3, 4 e 5 :)
As demais soluções são implementadas no Fragment e na AsyncTask. A Activity do projeto é mostrada abaixo.
public class ListTweetActivity 
  extends FragmentActivity {

  @Override
  protected void onCreate(Bundle savedInstance) {
    super.onCreate(savedInstance);
    setContentView(R.layout.activity_list_tweet);
  }
}
A Activity acima, apenas exibe o arquivo de layout abaixo, que contém apenas um fragmento:
<fragment 
  xmlns:android="http://schemas.android.com/apk/res/android"
  class="ngvl.android.cprecife.ListTweetFragment"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:tag="listTweets" />
A maior parte da solução é feita no fragmento e na AsyncTask descritas na classe abaixo. Não conhece fragments? Clique aqui.
public class ListTweetFragment 
  extends ListFragment 
  implements OnClickListener {

  private TweetAsyncTask asyncTask;
  private List<Tweet> tweets; 
  private ProgressDialog dialog;
 
  @Override
  public View onCreateView(LayoutInflater inflater, 
    ViewGroup container, Bundle savedInstanceState) {

    View layout = inflater.inflate(
      R.layout.fragment_list_tweet, container); 
  
    layout.findViewById(R.id.btnRefresh)
      .setOnClickListener(this);
  
    return layout;
  }
 
  @Override
  public void onActivityCreated(
    Bundle savedInstanceState) {
    super.onActivityCreated(savedInstanceState);
    setRetainInstance(true);
  
    if (asyncTask == null){
      iniciarDownload();
    } else if 
      (asyncTask.getStatus() == Status.RUNNING){
      showDialog();
    }
  }
 
  @Override
  public void onDetach() {
    super.onDetach();
    if (dialog != null) dialog.dismiss();
  }
 
  public void onClick(View v) {
    iniciarDownload();
  }

  private void showDialog() {
    dialog = ProgressDialog.show(getActivity(),
      "Aguarde", "Carregando tweets");
  }

  private void iniciarDownload(){
    ConnectivityManager cm = (ConnectivityManager)
      getActivity().getSystemService(
        Context.CONNECTIVITY_SERVICE);
  
    int wifi = ConnectivityManager.TYPE_WIFI;
    int mobile = ConnectivityManager.TYPE_MOBILE;
  
    if (cm.getNetworkInfo(mobile).isConnected() ||
        cm.getNetworkInfo(wifi).isConnected()){

      asyncTask = new TweetAsyncTask();
      asyncTask.execute();

    } else {
      Toast.makeText(getActivity(), 
        "Sem conexão com a internet", 
          Toast.LENGTH_SHORT).show();
    }
  }
 
  private void configuraAdapter(List<Tweet> tweets){
    TweetAdapter adapter = 
      new TweetAdapter(getActivity(), tweets);
    setListAdapter(adapter);
  }
 
  class TweetAsyncTask extends 
    AsyncTask<Void, Void, BuscaTwitter> {
  
    @Override
    protected void onPreExecute() {
      super.onPreExecute();
      showDialog();
    }
  
    @Override
    protected BuscaTwitter doInBackground(
      Void... params) {

      String url = 
        "http://search.twitter.com/"+
        "search.json?q=CPRecife";
      try {
        InputStream is = new URL(url).openStream();
        Gson gson = new Gson();
        BuscaTwitter resultadoBusca = gson.fromJson(
          new InputStreamReader(is), 
          BuscaTwitter.class);
        return resultadoBusca;

      } catch (Exception e) {
        e.printStackTrace();
      }
      return null;
    }

    @Override
    protected void onPostExecute(BuscaTwitter result) {
      super.onPostExecute(result);
      if (result != null && 
          result.getResults() != null) {
        tweets = result.getResults();
        configuraAdapter(tweets);
    
      } else {
        Toast.makeText(getActivity(), 
          "Falha ao carregar tweets", 
          Toast.LENGTH_SHORT).show();
      }
      dialog.dismiss();
    }
  }
}
Solução 2
Uma solução para dar um feedback para o usuário é a ProgressDialog. Ele será exibido no método onPreExecute, e retirado da tela no método onPostExecute. Esses métodos são chamados, como o próprio nome diz, antes e depois do download das informações. Se você não conhece a AsyncTask, da uma olhada aqui.

Solução 3
Para verificar se existe conexão com a internet, estamos utilizando a classe ConnectivityManager. Essa checagem está sendo feita no método iniciarDownload. Para utilizar essa classe é necessário adicionar a permissão ACCESS_NETWORK_STATE. Mais informações, é só olhar esse post aqui.

Solução 4
Essa é a mais simples. No método que está baixando o JSON (doInBackground) temos um try/catch, para que caso ocorra algum problema, a exceção seja capturada. Nesse caso o método retornará null. Assim, se no método onPostExecute, o parâmetro result vier nulo é porque houve algum problema. E nesse caso, mostrar uma mensagem pro usuário.

Solução 5
Essa é a parte mais complexa do post. Ao girar o aparelho, (por padrão) o Android destrói e recria a Activity que está sendo exibida. Para tratar esse comportamento, temos 3 opções conforme falei nesse post aqui. As duas primeiras (fixar uma orientação e evitar que a Activity seja recriada) não são boas opções de design de software, pois elas impedem que criemos layouts diferentes para as duas orientações, e também impedem que ao mudarmos de idioma, a Activity recarregue os textos do idioma corrente.
Sendo assim, a API de Fragmentos nos dá a opção de manter seu estado mesmo que a activity seja destruída. Fazemo isso com o método setRetainInstance do Fragment. No nosso fragmento temos três atributos:
  • a AsyncTask que ferá o download das informações;
  • uma lista com os Tweets que já foram baixados, e vai servir para que não tenhamos que baixar a informação novamente quando girarmos o aparelho; 
  • e um ProgressDialog que falamos na solução 2.
No método onActivityCreate verificamos se a AsyncTask é igual a nulo, neste caso iniciamos o download das informações. Caso contrário, verificamos se a AsyncTask ainda está executando, em caso positivo, apenas exibimos o ProgressDialog.

Ao clicar no botão refresh, não podemos solicitar que a AsyncTask execute novamente, pois semelhante a classe Thread, não podemos reusá-la. Nesse caso, precisamos criar uma nova.

Para finalizar, se vocês observarem, estou utilizando a classe Gson para ler o JSON retornado pelo Twitter. Essa classe faz parte da biblioteca GSON, e faz o parse automático de um JSON para um objeto Java, desde que eles tenham a mestra estrutura. No nosso exemplo, a estrutura é representada pelas classes BuscaTwitter e Tweet. Para baixar a biblioteca do GSON é só clicar aqui. Descompacte o arquivo e coloque o JAR na pasta libs do projeto.

O arquivo de layout do fragment é mostrado abaixo:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  android:id="@+id/LinearLayout1"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:orientation="vertical" >

  <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#cccccc" >
    <TextView
      android:id="@+id/textView1"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_gravity="center_vertical"
      android:layout_weight="1"
      android:text="#CPRecife"
      android:textAppearance="?android:attr/textAppearanceLarge" />
    <ImageButton
      android:id="@+id/btnRefresh"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:src="@android:drawable/stat_notify_sync" />
  </LinearLayout>

  <ListView
    android:id="@android:id/list"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />
</LinearLayout>

Pronto! Agora você pode executar a aplicação e girar o aparelho a vontade que tudo deve funcionar bem :)

É isso pessoal. Qualquer dúvida, deixem seus comentários.

4br4ç05,
nglauber