O que aprendi com a programação: dia 10 - integração com Facebook

Eu sempre quis implementar um aplicativo que faz integração com as redes sociais, mas ainda não tinha oportunidades de experimentar. Porém, tudo mudou quando precisei integrar nosso aplicativo com a rede social do Facebook.

A ideia deste post é mostrar, resumidamente, como você pode integrar o seu aplicativo ou site com a rede social do Facebook, compreender como realizar o login e como obter os dados do usuário da rede social, que precisam ser autorizados ao aplicativo para ter acesso as diversas informações disponíveis na conta.

Ouça o podcast para entender sobre alguns pontos importantes dessa integração com o Facebook usando um aplicativo ou site:



A primeira coisa que você deve fazer é registrar o seu aplicativo no site do desenvolvedor do Facebook, clicando na opção "Add a New App", e deste ponto em diante, as configurações vão depender da plataforma escolhida:

Escolha da plataforma do app. do Facebook

Para o exemplo deste post, escolhi a opção "Site". Então você terá que categorizar seu aplicativo de acordo com algumas opções pré-definidas, bastando clicar em um botão de Confirmação que seu aplicativo será criado.



O próximo passo o próprio Facebook exibirá uma tela com as próximas configurações que podem ser feitas. Haverá um código exemplo que pode ser testado no seu Website. O ponto aqui é observar a chave de acesso: AppId, que deve ser usada sempre que precisaremos acessar o Facebook para realizar o login e assim, obter os dados do usuário.

Configuração do aplicativo do Facebook com exemplos básicos

Logo abaixo da tela acima temos uma opção muito importante. Como escolhemos a plataforma web, temos que cadastrar o domínio do nosso Web site que desejamos utilizar a funcionalidade de login:

Configuração do site que pretende suportar o login

Com a configuração acima realizada, já podemos testar a funcionalidade do login no site cadastrado. Para isso,  selecione o produto "Facebook Login": https://developers.facebook.com/docs/facebook-login/v2.1 e copie o código exemplo que tem já. Tal como:

Não se esqueça de atualizar seu APP_ID no lugar correspondente. Ao acessar a página com o código acima, se clicar em login, o facebook irá realizar o login, porém, dependendo do seu User, vai exibir uma página de autorização. Se o usuário confirmar, então as resposta de sucesso ou falha serão chamadas usando a lógica demonstrada no exemplo acima.

Tela de autorização do usuário do Facebook após fazer o login

Esse processo é descrito na página do Facebook Development e deve ser entendido se você deseja realizar o login. Umas das mudanças da nova API 2.1, é que o usuário poderá rever as informações que o aplicativo está utilizando, podendo alterar ao acessar na opção "Reveja as informações que você compartilha".

Informações que o aplicativo usará antes do login do usuário

Podemos ver na tela abaixo o login sendo exibido. Para você testar, tente acessar a URL com o código citado anteriormente e acessando o aplicativo criado no Facebook para realizar login:
http://profdouglas.blogspot.com.br/p/login-test-facebook.html

Tela com o login sendo chamado

O que aprendi com o login do Facebook

Existem algumas diferenças quando tentamos acessar o login usando um aplicativo nativo (ex. Android, iOS e outros). Uma delas é que temos que possuir uma URL para redirecionar quando o login for feito com sucesso. Então, se você não tiver um server side (servidor) com um domínio registrado, pode-se utilizar uma URL temporária provida pelo próprio Facebook.

Neste caso, temos que acessar a tela de configuração do aplicativo, acessar a opção de "Settings/Advanced", procurando a opção "Valid OAuth redirect URIs" e adicionar a URL:
https://www.facebook.com/connect/login_success.html.

Desta forma, quando as requisições foram feitas pelo seu aplicativo nativo, após o usuário efetuar o login, o Facebook irá redirecionar para essa página e lhe enviar o Token com as credenciais aceitas. Eu encontrei neste site umas dicas de como implementar esse esquema para uma aplicação web nativa.

Outro aprendizado que me custou algum tempo para entender... o código de exemplo do Facebook talvez não funcione na sua página local ou no seu Browser. Lembre-se que esses códigos precisam estar executando em algum servidor web. Ou então os códigos podem não funcionar no browser Chrome por conta das restrições de segurança. Se testar no Firefox a probabilidade de que funciona aumenta. Além disso, procure exibir a tela de console para certificar que o fluxo previsto está sendo chamado.

O que aprendi com a programação hoje: dia 5 - persistência em Javascript

Esse post faz parte de uma série: o que aprendi com a programação, e tudo começou no dia 1.

Imagine como seria usar um sistema que não guardasse suas informações? Ao tentar acessar seus dados e sempre que você quisesse manipular uma informação, se não estivessem armazenados, você teria que cadastrá-los antes de utilizá-los. Isso seria possível, porém bastaria reiniciar o sistema que haveria necessidade de repetir o processo anterior. Portanto, guardar informações em um sistema, tecnicamente chamada de persistência, é uma funcionalidade essencial em qualquer programa.

Um dos primeiros tablets que eu me lembro e que foram lançados no mercado, isso se podemos considerá-lo tablet, chamado Palm, possuía vários recursos interessantes para sua época, tal como uma caneta, tela com toque, programas de agenda e aplicativos com ênfase em produtividade (tais como notas, calculadora, calendário, ...). No entanto, se a bateria descarregasse, as informações previamente escritas seriam perdidas. (só os primeiros modelos) Não demorou muito para uma solução ser proposta como uma memória externa para permitir manter os dados persistentes. É claro que a experiência mostrou que esse tipo de funcionalidade deve ser integrada de forma transparente aos usuários, ou seja, deve ser utilizado de forma natural, sem que o usuário perceba, assim como você utiliza a sua memória cerebral para guardar informações.

Os programas feitos para internet usando HTML e tecnologias para Web, têm propostos diferentes abordagens para realizar uma forma de persistência. Cada linguagem propõe diferentes mecanismos. Talvez a mais simples e conhecida seja aquela abordagem de HTML, usando os chamados Cookies. Estes são apenas um conjunto de dados agrupados na representação de chave e valor, no qual a chave é uma forma de associar a informação e o valor é a própria informação propriamente dita. Essa informação é gerenciada usando o Browser do usuário e tem sido usado até hoje pela simplicidade. Porém, em termos de segurança podemos questionar o seu uso.

A proposta dos Cookies são simplicidade para armazenar e recuperar a informação quando necessário. O grande problema, talvez seja porque se diferentes browsers forem utilizados, em diferentes sistemas operacionais, por diferentes plataformas de hardware, temos uma necessidade de utilizar as linguagens de programação e suas tecnologias de banco de dados. Mas neste caso, para onde vai nossa simplicidade?

Neste sentido, o armazenamento de persistência em HTML 5 não se propõe a resolver o problema do parágrafo anterior, mas tornar ainda mais simples a forma que o Cookie propôs, ou seja, manter a possibilidade para registrar dados usando chave e valor. Só que agora, na minha opinião, usando de forma padrão para que todos que desejarem usar HTML utilizem uma maneira em comum de se fazer isso, permitindo maior compatibilidade e reuso.

Em HTML 5 podemos escolher persistir a informação em duas áreas: área de sessão e a área local.

A área de sessão mantém os dados salvos em memória RAM enquanto a sessão do navegador estiver ativa. No momento que o Browser é fechado os dados armazenados nesta área serão apagados automaticamente. Na prática os dados irão para o "céu dos computadores".

Já a área chamada de local, os dados poderão permanecer persistentes após o Browser ser fechado. Isso permite manter e recuperar os dados associadas a chaves específicas. Então se você precisa salvar os dados e recuperá-los quando a sua página é carregada, use essa área, tecnicamente conhecida como localStorage.

Vejamos um exemplo de trecho de código Javascript para fazer a persistência usando um método setar(minhaChave,meuValor):

 function set(key, data) {
  if (window.hasOwnProperty('localStorage')) {
   window.localStorage.setItem(key, data);
  }
 }

A dinâmica dessa verificação é simples. A função set(key,data) possui dois parâmetros com a chave desejada e um valor para associar com essa chave. O bloco da condição IF verifica se o atual usuário já possui a área de local disponível para ser utilizada. Caso afirmativo, podemos usar o atributo do objeto window.localStorage invocando a função setItem(...).

 function get(key) {
  if (window.hasOwnProperty('localStorage')) {
   return window.localStorage.getItem(key);
  }
 },

A forma para recuperar a informação é ainda mais simples. Só precisamos saber qual a chave que contém os dados associados com a chave apropriada. O cuidado aqui é criar chaves específicas para informações específicas. Evite nomes de chaves complicados ou com caracteres especiais. Pense em um nome de variável para renomear suas chaves.

Uma estrutura que achamos interessante utilizar e poderia ser usado através de um arquivo Javascript chamado persistencia.js:

var Persistencia = {

 property : 'localStorage',

 set : function(key, data) {
  if (window.hasOwnProperty(Persistencia.property)) {
   window.localStorage.setItem(key, data);
  }
 },

 setHash : function(key, data) {
  Persistencia.set(key, JSON.stringify(data));
 },

 get : function(key) {
  if (window.hasOwnProperty(Persistencia.property)) {
   return window.localStorage.getItem(key);
  }
 },

 getHash : function(key) {
  var data = Persistencia.get(key);

  if (data) {
   return JSON.parse(data);
  }
 },

 remove : function(key) {
  if (window.hasOwnProperty(Persistencia.property)) {
   window.localStorage.removeItem(key);
  }
 },

 clear : function() {
  if (window.hasOwnProperty(Persistencia.property)) {
   if (localStorage.length > 0) {
    localStorage.clear();
    console.log("clear function");
   }
  }
 }

};

Implementação da persistência

Que tal um pouco de prática?

Vamos complementar nosso exemplo de animação anterior e adicionar uma informação de forma persistente. Contar a quantidade de cliques na tela e manter essa informação persistente na área local. Assim, no momento que acessar o HTML da animação do nosso exemplo, a última atualização realizada deverá ser exibida na tela. Caso desejar resetar o valor atualmente persistente, pode utilizar o comando abaixo usando a ferramenta DevTools, na área de Console:

localStorage.clear();

Para baixar todos os arquivos com seus códigos fontes acesse aqui.

A imagem ao lado demonstra a execução do arquivo Bola.html que pode ser baixado, junto com os demais arquivos, no link indicado acima.

Se você tiver alguma sugestão de tópico, sugestão ou crítica, fique a vontade para comentar ou solicitar aqui.

O que aprendi com a programação hoje: dia 3 - DevTools

Esse post faz parte de uma série: o que aprendi com a programação, e tudo começou no dia 1.

Sabem o que mais fiquei surpreso com Javascript? Ao preparar os ambientes de desenvolvimento para realizar a execução dos testes, percebi o quanto os navegadores de internet evoluíram. Pois é, você deve estar se perguntando: quanto tempo esse cara não se informa sobre as tendências de desenvolvimento Web? Foram pelo menos 10 anos sem me preocupar com Javascript. Mas antes tarde que nunca, não é mesmo? :)

Copyright

Com advento dos novos recursos da especificação do HTML 5, surgiram novas possibilidades de desenvolvimento, e com elas, há uma nítida evolução dos navegadores de internet. Quem ainda usa Internet Explorer? É claro que muita gente usa, porém, é o Chrome e Firefox que são os lideres do rankink mundial de uso pelas pessoas. Mas o que isso tem haver com a programação?

No caso do Chrome, da Google, para desenvolvedores Web, podem facilmente testarem seus aplicativos utilizando seu próprio browser, e, praticamente não se precisam de muitas outras ferramentas. Mesmo assim, não deixamos de utilizar editores para realizar a codificação, porque elas melhoram a produtividade.

Vou abordar aqui um pouco de como podemos usar as ferramentas de desenvolvimento, tentando relatar brevemente, como foi o nosso aprendizado nesta jornada de preparação do ambiente de programação Javascript, além de sua forma de execução e teste no browser.

Ambiente de Desenvolvimento para Web ou Mobile?

Já que estamos falando de ambientes de programação voltados para Web, deixa eu lhe explicar o contexto do projeto que estou contribuindo para sintuá-lo melhor. Me refiro às tecnologias móveis (voltada para smartphones), utilizando front-end HTML 5, CSS e Javascript para implementação do projeto. Normalmente usamos essas tecnologias para desenvolvimento voltado para Web, mas neste caso, a ideia é aplicá-lo para tecnologia mobile. Este é o cenário que estou inserido.

As aplicações voltadas para esse mobile target (celulares), normalmente utilizam a própria linguagem nativa para seu desenvolvimento. Por exemplo, no Android usamos a linguagem Java, no iOS usamos a linguagem Objective-C (agora com a nova linguagem Swift), no Windows Phone a linguagem C#, e assim sucessivamente. E se usássemos a expertise de Web (HTML 5, CSS e Javascript) para programar para tecnologias móveis? Essa é a proposta da tecnologia TIZEN, no qual estou investigando.

Ao instalar o SDK do Tizen e iniciar o desenvolvimento do projeto, em algum momento precisamos testá-lo. Há duas possibilidades: usando o próprio emulador do Tizen, ou usando um navegador de internet, tal como o Chrome para reproduzir o nosso aplicativo. Você gostaria que eu falasse mais sobre Tizen? Deixe seu comentário se preferir.

Mas voltando ao ponto deste post: o que aprendi com a programação usando essa tecnologia: o conhecimento da tríade HTML, CSS e Javascript já estão bastante consolidados e facilmente entendemos como fazer as coisas aparecerem na tela, tudo que se precisa é a inteligência do browser para compreender as especificações dessas tecnologias. Foi o que a Samsung está fazendo com o Tizen. Mas vamos deixar esse assunto para outro momento.

Aprendi que o browser Chrome possui ferramentas que todo desenvolvedor Web, possivelmente já sabem que tem, mas que eu somente as descobri agora. Pelo menos isso me animou, pois assim posso testar de forma rápida os códigos Javascript, HTML e CSS. 

Usando a ferramenta DevTools

Quando usamos o Chrome, podemos usar a ferramenta integrada DevTool: https://developer.chrome.com/devtools

"The Chrome Developer Tools (DevTools for short), are a set web authoring and debugging tools built into Google Chrome. The DevTools provide web developers deep access into the internals of the browser and their web application. Use the DevTools to efficiently track down layout issues, set JavaScript breakpoints, and get insights for code optimization."

Para abrir o DevTools, podemos fazê-lo de 3 formas:

1) Selecione o menu do Chrome, e no topo direito acesse Tools/Developers Tools (talvez esses nomes estejam em português);

2) Com o botão direito em qualquer área da página atual sendo exibida, selecione Inspect Element (Inspecionar Elemento);

3) Usar atalhos de comandos do teclados do seu computador. Ex. para o MAC OS use:
     

Atalhos (veja fonte)

   
Área do DevTools    

As áreas são organizadas dentro de grupos de tarefas e estão organizadas na barra de ferramenta superior da janela principal. Cada item da área corresponde a um painel de trabalho com um tipo específico de finalidade ou propósito, incluindo elementos DOM, recursos e códigos fontes dos conteúdos carregados atualmente pela janela do browser.

DevTools do Chrome

Em resumo temos 8 diferentes tipos principais de ferramentas disponíveis: Elementos, Recursos, Rede, Fontes, Linha Tempo, Profiles, Armazenamento, "Auditoria" e Console. As principais áreas que observei foram a Console e Fontes. Em Console podemos visualizar uma saída de dados textual referente ao comando abaixo:

console.log("alguma coisa para mostrar no console...");

Extremamente útil para exibir alguma coisa nos blocos do nosso algoritmo. Fácil de usar e rápido de visualizar. Basta acrescentar o comando nas linhas do programa, como código Javascript e carregar a página HTML que usa o código javascript. Somente quando exibirmos essa tela Console que poderemos perceber seu uso.

A outra ferramenta fica em Fontes (Sources), que considero a mais incrível de todas, a tela mais inovadora dessa ferramenta. Sabe por que? Ela permite fazer Debugging JavaScript, ou seja, depuração de código passo a passo. Semelhante as IDEs tradicionais das outras linguagens.

Ferramenta de Debugging

"As the complexity of JavaScript applications increase, developers need powerful debugging tools to help quickly discover the cause of an issue and fix it efficiently. The Chrome DevTools include a number of useful tools to help make debugging JavaScript less painful."

Para usar simplesmente carregue primeiro sua página HTML, que utiliza o seu código Javascript, em seguida abra o DevTools seguindo os procedimentos mencionados anteriormente, e então acesse a área Sources/Fontes. Procure o seu arquivo Javascript ou HTML que possua o javascript, e o abra clicando duas vezes. Por fim, procure a linha no qual gostaria de realizar a depuração e clique com o mouse na borda da linha. Instruções detalhadas veja aqui.

Agora quando você rodar o seu HTML interagindo ou recarregando a página, quando a execução do algoritmo chegar na função no qual definiu seu breakpoints, a linha irá parar naquele ponto, e você poderá rodar passa a passo usando os botões Step Into ou Step Over. Existem atalhos de teclado que podem ser aprendidos para fazer isso de forma mais rápida no dia a dia.

Depois que aprendi a depurar em código Javascript, todos os algoritmos mais complexos, puderam ser validados considerando essa funcionalidade, permitindo acelerar ainda mais o desenvolvimento do algoritmo.

No próximo post, que tal mostrar como colocar sons e como gerenciá-los com Javascript? Isso permite inserir efeitos sonoros em sua aplicação. Por se tratar de um jogo, essa funcionalidade é extremamente interessante.

Mudanças de perspectivas em aplicações Android: evite recriar a Activity

Usuários de aplicativos em geral podem requerer mudar a orientação do aparelho para visualizar melhor os conteúdos sendo exibidos na tela. Dependendo do que está sendo visto é comum girar a orientação da tela para o sentido horizontal (landscape) ou sentido vertical (portrait).

(1) Tela em modo Portrait

Em aplicações Android e iOS (smartphones e tablets) é comum implementar telas que vão funcionar em diferentes perspectivas de orientação de tela. No entanto, programadores de Android precisam estar atentos que quando ocorrem mudanças de orientação no aplicativo, o comportamento padrão do Android recria a Activity em execução, chamando os métodos do ciclo de vida: onPause(), onStop(), onDestroy(), para em seguida chamar o método onCreate() novamente, além dos métodos do ciclo de vida: onStart() e onResume().

Problema / Solução

Se a tela atual da sua aplicação apenas desenha elementos visuais sem obter dados de fontes custosas (para memória em geral ou uso da Internet para baixar os dados), então esse procedimento padrão do Android não será um problema. Contudo, caso sua Activity requeira dados da internet ou algum outro tipo de esquema de processamento “mais pesado” para ser realizado, talvez seja necessário evitar recarregar a instância da Activity, mantendo o estado dos objetos carregados na memória. Desta forma podemos evitar consultar a rede novamente, além de otimizar o uso do processamento do aparelho, melhorando o consumo da bateria. :)

Esse comportamento pode ser realizado de 2 formas: (que eu conheço)

1. Salvar os dados atuais (o estado atual) utilizando o mecanismo do ciclo de vida da Activity do Android, através dos métodos onSaveInstanceState(bundle) para salvar, e o onRetainNonConfigurationInstance() para recuperar os dados do estado atual;
2. Alterar o comportamento default do Android, descrito acima, evitando que a Activity seja automaticamente recriada. Desta forma o Android apenas irá notificar Activity que ocorreu uma mudança de orientação, através do método onConfigurationChanged(Configuration c).

Neste post vou mostrar como podemos implementar abordagem (2), ou seja, como evitar que o Android recrie Activity do ciclo de vida do aplicativo.

Essa dica eu encontrei no site oficial do desenvolvedor Android. Está neste link: Handling Runtime Changes: http://developer.android.com/guide/topics/resources/runtime-changes.html

Vou descrever passo a passo:

Passo 1: altere o arquivo AndroidManifest.xml conforme o exemplo abaixo adicionando a propriedade chamada (android:configChanges="orientation|screenSize") da sua Activity:

Passo 2: implementar no código Java da sua Activity o método conforme exemplo:

package br.com.blogspot.profdouglas.dicas3.orientationchange;

import android.app.Activity;
import android.content.res.Configuration;
import android.os.Bundle;
import android.util.Log;
import android.view.Menu;
import android.widget.TextView;

public class OrientationChange extends Activity {

 @Override
 public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_orientation_change);

  Log.d("DOUGLAS", "OrientationChange.onCreate");

  TextView orientationTextView = (TextView) findViewById(R.id.orientationTextView);

  // detect the current orientation
  int currentOrientation = getResources().getConfiguration().orientation;

  if (currentOrientation == Configuration.ORIENTATION_LANDSCAPE) {
   // setting orientation landscape
   orientationTextView.setText(R.string.orientation_landscape);

  } else if (currentOrientation == Configuration.ORIENTATION_PORTRAIT) {
   // setting orientation portrait
   orientationTextView.setText(R.string.orientation_portrait);
  }

 }

 @Override
 public boolean onCreateOptionsMenu(Menu menu) {
  getMenuInflater().inflate(R.menu.activity_orientation_change, menu);
  return true;
 }

 @Override
 protected void onStart() {
  super.onStart();
  Log.i("DOUGLAS", "OrientationChange.onStart");
 }

 @Override
 protected void onResume() {
  super.onResume();
  Log.i("DOUGLAS", "OrientationChange.onResume");
 }

 @Override
 protected void onStop() {
  super.onStop();
  Log.i("DOUGLAS", "OrientationChange.onStop");
 }

 @Override
 protected void onPause() {
  super.onPause();
  Log.i("DOUGLAS", "OrientationChange.onPause");
 }

 @Override
 protected void onDestroy() {
  super.onDestroy();
  Log.i("DOUGLAS", "OrientationChange.onDestroy");
 }

 /**
  * Caution: Beginning with Android 3.2 (API level 13), the "screen size"
  * also changes when the device switches between portrait and landscape
  * orientation. Thus, if you want to prevent runtime restarts due to
  * orientation change when developing for API level 13 or higher (as
  * declared by the minSdkVersion and targetSdkVersion attributes), you must
  * include the "screenSize" value in addition to the "orientation" value.
  * That is, you must decalare
  * android:configChanges="orientation|screenSize". However, if your
  * application targets API level 12 or lower, then your activity always
  * handles this configuration change itself (this configuration change does
  * not restart your activity, even when running on an Android 3.2 or higher
  * device).
  */
 @Override
 public void onConfigurationChanged(Configuration newConfig) {
  super.onConfigurationChanged(newConfig);
  Log.d("DOUGLAS", "MainActivity.onConfigurationChanged");

  TextView orientationTextView = (TextView) findViewById(R.id.orientationTextView);

  if (newConfig.orientation == Configuration.ORIENTATION_PORTRAIT) {
   Log.i("DOUGLAS",
     "MainActivity.onConfigurationChanged (ORIENTATION_PORTRAIT)");
   // setting orientation portrait
   orientationTextView.setText(R.string.orientation_portrait);

  } else if (newConfig.orientation == Configuration.ORIENTATION_LANDSCAPE) {
   Log.i("DOUGLAS",
     "MainActivity.onConfigurationChanged (ORIENTATION_LANDSCAPE)");
   orientationTextView.setText(R.string.orientation_landscape);
  }
 }

}

Observe o javadoc que deixei para que você entenda porque a propriedade do manifest precisou utilizar dois valores. A figura (2) demonstra o log (da view LogCat) demonstrando que a Activity não foi recriada, mas o método onConfigurationChanged foi notificado.

(2) Tela em modo Landscape sem recriar a Activity após mudar orientação

Conclusão

Ao executar seu aplicativo agora, quando ocorrer mudanças de orientação de tela sua Activity não será recriada e o método onConfigurationChanged será automaticamente notificada a cada mudança de orientação. 

Como sugestão, caso queira fazer algo específico para cada modo de orientação, pode-se usar a lógica da condição implementada no método, que atualmente possui instruções com logs. Dependendo do cenário no qual seu aplicativo está sendo usado, essa dica pode ser útil para você.

Assim que possível vou fazer uma vídeo aula sobre isso também e colocar aqui. O código fonte do exemplo do projeto pode ser baixado aqui.

Aprenda a depurar (debugging) seu programa Java no Eclipse

Alguns anos atrás fiz um post relacionado sobre o processo de depuração no Eclipse. Desta vez resolvi criar uma vídeo aula para exemplificar o processo passo a passo.

No contexto de programação como podemos entender o que é a depuração e como fazê-la acontecer na prática? Quase sempre quando trabalho com novas turmas vejo uma grande maioria dos alunos ainda não utilizou esse precioso recurso do programador. O objetivo deste post é dar uma noção básica e mostrar como fazer na prática usando a IDE Eclipse. (fonte do post original Depuração no Eclipse (debugger))

Em resumo, depuração (do inglês debugging) é um processo de acompanhamento do programa a fim de acompanhar o fluxo de execução passo a passo, seguindo as linhas de codificação do ponto inicial até o ponto final do algoritmo que está sendo interpretado pelo computador.

Minha percepção do porquê depurar o código... 

Podemos acompanhar o ciclo de vida do aplicativo (do início ao fim), procurando verificar o valor de variáveis, de expressões, acessando métodos entre outras possibilidades.

"Na minha opinião a principal vantagem é permitir o acompanhamento em tempo real. Já resolvi muitos bugs em menor tempo por utilizar esse recurso. Na prática, percebemos nosso erro de lógica quando podemos entender o que o computador está fazendo em determinada situação. A maioria das vezes o erro é do próprio programador que não previu determinada situação. Ao perceber isso, com ajudada da depuração, temos mais probabilidade de corrigir o bug alterando a lógica do programa."

Criação de Janelas Gráficas (GUI) com NetBeans (sobre a série vídeo aulas)

Neste post comento da série que chamei de Curso Básico de Criação de Janelas Gráficas (GUI) com NetBeans, que foi produzido um total de 10 vídeo aulas, contabilizando 2h:12m:30s de conteúdos para o YouTube, inteiramente gratuito.  No final deste post tem o link para baixar o código fonte.



Foi a minha primeira experiência na produção de vídeos para a internet e creio que aprendi muito. Recebi vários feedbacks de pessoas que nem conheço, no qual fico muito agradecido e motivado a tentar melhorar. Tenha certeza que nos próximos vídeos eu levarei em consideração as dicas sugeridas nos comentários de vocês, bem como espero contribuir cada vez mais nesta iniciativa.

Meus agradecimentos a todos que contribuem e contribuíram. Lembrem-se que é ajudando que se é ajudado, não é mesmo? :)

Um pouco sobre a série... 

Esta série de vídeo aulas objetiva ajudar alunos da disciplina de Programação Orientada a Objetos entender como criar janelas visuais usando NetBeans.

Endereço da série no canal do YouTube (com os 10 vídeos):
http://www.youtube.com/playlist?list=PLEA1EF325BD74F0E7

Endereço para baixar o projeto completo (versão do NetBeans 7.1.2 ou superior):
https://sites.google.com/site/douglasfrari/arquivos/SistemaCadastroProdutos.zip

Criando atalhos para geração de LOGs no Android usando templates do editor de código da IDE Eclipse

Este post objetiva compartilhar uma dica simples para geração de logs, que permitiu aumentar a produtividade na programação durante a realização desta atividade. Trata-se do uso do editor de templates do Eclipse para geração de código automático (famoso Ctrl+space+template

Tenho hábito e prática de utilizar logs na programação. De forma simples, isso nada mais é do que prover uma saída de dados textual na tela do console para visualizar o fluxo atual em execução no programa. Assim, podemos de forma rápida comprovar nossas hipóteses que o algoritmo está se comportando exatamente como o imaginamos. J Isso não é lindo? Para termos certeza que tudo vai correr bem é necessário fazer esse tipo de processo de validação N vezes até que tenhamos certeza absoluta que vai funcionar.

Geralmente através de testes de unidade, ou simplesmente para constatar se os comandos dados e as ordens programadas (formalmente escritas na forma de código fonte) foram percorridos como se esperava dentro do programa em execução, permitindo estruturar e validar o percurso do algoritmo e da lógica de programação como um todo. Dependendo da complexidade do software, podemos criar cenários não desejados – conhecidos como bugs. Nem tudo é perfeito minha gente! J

Percebo também que eu não sou o único que tem esse hábito de usar logs. Todos os programadores que conheço fazem isso.  Fazer logs é uma boa prática. No entanto, para fazê-lo precisamos escrever uma linha de código utilizando a criatividade, que varia de programador para programador. Se perder o controle e ficar criando log de tudo, pode poluir demasiadamente o código com comentários inúteis ou não mais necessários. Normalmente se usa algo como isso:

System.out.println(“*Classe*.metodo() - comentário opcional”);

System.out.println(“TelaCadastroCliente.salvar() – registrando dados ...”);

Na prática temos um exemplo concreto sem padrão algum, apenas para ver o valor da variável na saída:

public class Teste {

       static char caracter = 170;

      

       public static void main(String[] args) {

             

              System.out.println("valor = "+caracter);

              System.out.println("valor (int) = "+(int)caracter);

       }

}

Escrever a linha de comando System.out.println usando o Eclipse se torna fácil quando conhecemos o nome que chama o template para preenchimento automático. Por exemplo, se eu digitar “sysout + (Crtl+SPACE), o editor do Eclipse irá substituir a palavra “sysout” pelo comando System.out.println(), e ainda deixar o cursor dentro dos parênteses. Para quem não sabe você acabou de usar o template de código do editor Eclipse para códigos da linguagem Java. Isso não é show de bola? Os programadores sabem que isso torna o trabalho mais eficaz. Eu pelo menos me sinto muito animado quando uso editores assim.

Criando templates para geração de LOG automático para uso no emulador Android

O SDK do emulador Android oferece a saída de dados usando a janela do LogCat (Windows/Show View/Other/Android/LogCat), que fica disponível após instalar o plugin ADT. Nesta janela podemos visualizar os logs de acordo com o seu nível. Veja a tabela:

Nível	Sigla	Cor
Debug	D	azul
Verbose	V	preto
Info - Informação	I	verde
Warn - alerta	W	laranja
Error - erro	E	vermelho

Níveis de logs e suas cores

Assim, no Android temos que usar a classe android.util.Log para escrever os logs de acordo com os níveis disponíveis da tabela. Temos então no código:

Por exemplo, vamos criar o código abaixo e sua tecla de atalho correspondente:

Exemplo uso android.util.Log	Nome do Atalho pretendido
Log.d("SUA_TAG", "log DEBUG");	dbg
Log.i("DOUGLAS", "log INFORMATION");	dbgi
Log.e("DOUGLAS", "log ERROR");	dbge

Crie as tags acima no Eclipse usando uma tecla de atalho

Acesse a opção de preferências no menu principal do Eclipse, no caso do sistema operacional ser o Windows, use o atalho Windows/Preferences/. Na figura abaixo (A), observe o campo para digitar a busca. Digite o termo “templates” para filtrar a quantidade de opções disponíveis. Veja a imagem (B). Acesse opção Java/Editor/Templates/

(A)

(B)

Agora basta inserir novas entradas clicando no botão “New...”. (B) Crie 3 ou mais entradas de acordo com o código abaixo. Veja também a imagem (C).

(C)

Name	Description	Pattern
dbg	Log.DEBUG level (default)	Log.d("DOUGLAS","${enclosing_type}.${enclosing_method}${cursor}");
dbgi	Log.INFORMATION level	Log.i("DOUGLAS","${enclosing_type}.${enclosing_method}${cursor}");
dbge	Log.ERROR level	Log.e("DOUGLAS","${enclosing_type}.${enclosing_method}${cursor}");
…	…	…

Esse código é uma linguagem de expressão do Eclipse e faz com que o nome da classe atual seja obtida ( ${enclosing_type} ), e o nome do método atual seja obtido e substituído (${enclosing_method} ), e por fim, sete o cursor para o final deste comentário ( ${cursor} ).  Se desejar poderá criar outros templates estudando essa linguagem de expressão do Eclipse.

Após criar seus templates poderá utilizá-los durante a codificação do seu aplicativo no Android, e usar as teclas de atalho criadas. Ex. digite dbg + (Crtl+Space) e poderá ver as opções disponíveis do template. Assim que escolher um, o código será gerado automaticamente obtendo o nome da classe, o nome do método e você poderá ainda testar seu código neste trecho sem a necessidade de digitar todo o código.

Espero que essa dica seja útil para você tanto quanto está sendo para mim. J

Caminho para ensinar programação ! ?

Neste post comento um pouco sobre um e-mail que recebi de umas das listas que faço parte (alg-prog-l@sbc.org.br) e que achei interessante o questionamento:

"Amigos, boa tarde!!!
Gostaria muito da ajuda de você com relação a lógica de programação.
Qual parte da matematica se faz necessário para treinar o nosso cerebro a ter raciocino lógico? só com a lógica de programação conseguimos isso?
Os colegas poderiam me indicar materiais, dicas, livros, locais para pesquisa.

Estou muito interessado na area."

Aprenda a programar brincando. :)

Essa pergunta me fez pensar e então resolvi responder para essa lista divulgando um pouco do que já aprendi por aí - com pouco de experiência para compartilhar com vocês...

Qual o caminho para ensinar programação?
Não tem um caminho único. O que importa, talvez seja há vontade de ajudar os outros a aprenderem.

Como desenvolvedor de software e professor de programação, trabalhei um ano ensinando algoritmos na faculdade e posso lhes dar umas pequenas dicas:

1. Desenvolver a Lógica de Programação no alunado requer acima de tudo exercitar práticas para dar ordem ao computador de forma que ele entenda através de algoritmos. Praticar numa linguagem real ajuda, mas é preciso focar menos na linguagem e mais no desenvolvimento das competências básicas de algoritmos);
2. Fazer o aluno praticar usando um simulador ou linguagem real;
3. Use uma ferramenta que possa motivar os alunos, ao mesmo tempo que lhes permitam exercitar os conceitos. Sugiro utilizar a ferramenta Scratch http://scratch.mit.edu/  (tive uma experiência muito gratificante);
4. Existem N caminhos para resolver os problemas e desafios na programação (assim como na vida), deixar claro que o objetivo final é fazer funcionar (o computador precisa obedecer o que lhe foi mandado), o caminho ideal é aquele que trás resultados positivos;
5. Trabalhe na perspectiva que faça o aluno exercitar a construção do algoritmo para determinado problema (dos mais simples aos mais complexos), e principalmente, ter em mente que a maneira do aluno não é melhor e nem pior que a sua. O algoritmo que será construído é válido de qualquer forma, uma vez que a solução final atenda os requisitos esperados (muitas vezes avaliados de forma subjetiva pelos usuários e clientes).

enfim...apenas algumas dicas de quem sabe ensinar na prática e na teoria. Mas as vezes nada disso funciona e precisamos nos re-inventar no ensino. :)

Segundo Leonardo Boff, o conhecimento é muito importante, mas o essencial é não perder a capacidade de aprender.

Programando para BADA (samsung)

Estou desenvolvendo aplicações aqui no C.E.S.A.R usando a plataforma Bada (c++). Já fiz algumas aplicações e estou achando legal e interessante essa plataforma mobile. Neste post, falarei um pouco sobre Bada para curiosos.

O que é Bada?

Bada significa oceano (na Korea), no qual a Samsung acredita que essa tecnologia permitirá um oceano de novas aplicações.

"Samsung bada is a new smartphone platform that allows developers to create feature-rich applications that elevate the user experience in mobile spaces." (documentação do SDK). Ou seja, uma plataforma para dispositivos smartphones da Samsung para desenvolver aplicativos mais ricos, tal como os aplicativos do iPhone.

Visão da Samsung sobre Bada (fonte: http://www.bada.com/whatisbada/)

A Samsung espera que sua tecnologia venha ter uma fatia de mercado considerável no futuro, uma vez que os celulares menos afortunados (conhecidos como features phones) tendem a ser substituidos por smartphones. Além disso, quer competir com iPhone (Apple) e Android (OHA).

...

Para conseguir atingir essa meta eles criaram um ecossistema parecido (pra não dizer igual) ao modelo de negócio da Apple (AppleStore). Neste modelo o desenvolvedor pode fazer aplicativos para usuários, podendo disponibilizar na loja da Samsung (http://www.samsungapps.com/).

Para entender o ciclo em detalhes consulte a fonte: http://www.bada.com/whatisbada/ecosystem/

Dispositivo WAVE

A samsung lançou o dispositivo W.A.V.E (http://www.bada.com/badadevices/) que possui um bom hardware e pode ser comparado com iPhone 4 (em teoria).

Para saber mais:

• Site oficial: baixe o Bada SDK - http://developer.bada.com/
• Site da comunidade BadaDev - http://www.badadev.com/
• CESAR: foram realizados cursos para profissionais em Bada - http://www.cesar.org.br/c-e-s-a-r-samsung-oferecem-curso-gratuito-sobre-bada/ além de um programa de residência: http://www.cesar.org.br/samsung-e-c-e-s-a-r-lancam-programa-de-residencia-em-bada/
• DevGuide - An Introduction to Bada: A Developer's Guide (Paperback): http://www.bookdepository.co.uk/book/9780470974018/

Em resumo, a tecnologia Bada é uma plataforma promissora de desenvolvimento, equivalente ao modelo iPhone (embora com mercado insignificante ainda), que permite os desenvolvedores fazerem aplicações e podendo ser remunerados tal como o modelo da Apple. Próximos posts vou abordar alguns exemplos e problemas que já tive com Bada.