23 setembro 2014

Iniciando em programação de forma divertida: code.org

Uma das coisas que mais gosto de fazer é ensinar a programação as pessoas. Imagine então, quando você encontra um site que tem esse propósito? :) O site code.org tem essa ideia e oferece uma oportunidade para aprender a programação, porém, de forma lúdica, ou seja, divertida.



Esse video acima mostra vários profissionais e pessoas conhecidas que falam da importância de aprender a programação. Eu já falei aqui no blog do porque isso é relevante [O que aprendi com a programação hoje: dia 6 - por que programar?], e não é somente eu quem está dizendo.

Estou utilizando o site do code.org para estimular alunos a gostarem da programação. Muitas vezes aprender a programar não é uma tarefa fácil para alunos, e nem para quem ensina. Mas quando tornamos o processo mais divertido: porque ELE pode SER assim, há bons resultados.



O vídeo acima demonstra um exemplo do que você pode encontrar no site indicado neste post.



Certificado de sucesso.
Ao final dos módulos, quando supera os desafios, você ganha o certificado e vai se sentir estimulado ir em frente ainda mais. :)

20 setembro 2014

O que aprendi com a programação hoje: dia 11 - liderando um time

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

Por mais técnico que possa parecer, a programação lhe permite aprender e exercitar aspectos que não são necessariamente técnicos, aprendizados que só se aprende fazendo, vivenciando o dia a dia: trata-se da liderança.

Como é liderar um time de desenvolvimento de software? Não existe uma resposta simples, mas me arrisco a falar um pouco do que estou aprendendo com essa experiência atual. Ouça o "carcast" 4 e tire as suas próprias conclusões.



Links citados no podcast:

- O Monge e o Executivo: https://www.youtube.com/watch?v=57t8MAYErqI
- Palestra sobre liderança na atualidade: http://pt.slideshare.net/mcmoraescosta/liderana-na-atualidade

16 setembro 2014

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.

12 setembro 2014

O que aprendi com a programação hoje: dia 9 - devtools e javascript


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

Um grande aprendizado que me permitiu rever os meus "preconceitos" com a linguagem javascript foi entender como testar o meu código usando o Browser, e foi a série do vídeo abaixo que me ajudou.

Recomendo assistir:



Depois de assistir esse vídeo comecei a compreender como fazer a depuração usando o ambiente DevTool, que inclusive me permiti escrever um post sobre ele aqui [dia 3].


09 setembro 2014

O que aprendi com a programação hoje: dia 8 - internacionalização em Javascript

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

2/4/95

Você consegue distinguir o formato de data acima? Não se sabe ao certo se o 2 indica o dia e o 4 o mês, pois poderia ser o contrário (1995-04-02 ou 1995-02-04). Sabe-se, no entanto que é um padrão de formato de data usado e aceito tanto nos EUA como na Inglaterra. Segundo destaca esse post, há pelo menos 6 possíveis interpretações. Mas agora veja o formato abaixo, será que o mesmo é familiar para você?

globalização do software (fonte da imagem)
09/09/2014

Provavelmente você terá condição de entender melhor, o formato de data que é mais familiar para você ou aquele que você já conhece. O formato de datas possui diversas representações universais, mas dependendo do país que o pratique, haverá maior familiaridade e facilidade de identificação de sua parte. A mesma coisa ocorre com os usuário do mundo.





Por que esses formatos são relevantes e qual a relação com a programação?
Quando estamos querendo popularizar nosso site ou nosso aplicativo, qual será a sua abrangência desejada? Será global ou continental, regional ou talvez local? Em qual país pretende disponibiliza-lo?  
Essas são apenas algumas das perguntas que terás que responder se desejar publicar um site ou aplicativo universal, no qual temos que levar em consideração o lugar, a cultura, os padrões estabelecidos do idioma do usuário.  Dependendo das suas respostas e de como decidir representar as informações, terás que traduzir os termos e textos contidos para mais de um idioma.

Haverá preocupação também com a moeda local, da representação do dinheiro, além do seu formato de datas considerando onde o usuário está agora, ou seja, a sua localização geográfica. Essa preocupação de representar a informação "correta", dependendo do idioma preferido do usuário, é uma das preocupações mais relevantes para um aplicativo que deseja ser global. Trata-se da tradução e da localização dos dados, e chamamos esse tratamento e implementação de: internacionalização.

Processo de Internacionalização e localização (fonte Wikipédia)

O processo de internacionalização pode ser feito com qualquer software e linguagens modernas, preparando e definindo diversos arquivos de dados para cada idioma pretendido. Geralmente, damos suporte para idiomas mais falados no mundo: Inglês, Espanhol, Mandarim e o idioma nativo da equipe envolvida na produção do software. Mas isso depende sempre da demanda do projeto do cliente, da equipe envolvida e da natureza do que se está fazendo. Além disso, não estou dizendo que é fácil de fazer, uma vez que traduzir conteúdo de qualidade consome esforço que deve ser considerado.

Em projetos com Android e iOS já existem formas padronizadas pelas tecnologias para usar a internacionalização. Basta seguir os procedimentos indicados e que estão detalhados na documentação de ambas. Essas padronizações, favorecem o impacto do esforço envolvido no que tange a codificação dos dados, mas não diminui o esforço de tradução.
Um bom tradutor pode valer mais do que um Google Translate? Essa discussão está fora de questão para o meu blog. :) Mas fique "esperto" sobre isso! 

Como fazer a internacionalização em um projeto Web que utiliza a linguagem Javascript, HTML 5 e CSS? 

Existem várias bibliotecas disponíveis em Javascript e que podem ser usadas. Veja essa discussão no Stackoverflow.com sobre isso.

Em nosso projeto experimentamos utilizar a biblioteca chamada i18Next, e após um pouco de estudo, achamos interessante utilizá-la primeiramente porque é simples, em segundo porque possui integração com outra biblioteca que já estamos utilizando, a conhecida jQuery. E em terceiro lugar, podemos criar mais de um arquivo de tradução usando o formato de dados JSON, um arquivo para cada idioma de tradução.

Dessa forma, vamos entender como usar essa biblioteca. Baixe as seguintes bibliotecas i18Next e jQuery, depois poderá referenciá-las no seu código HTML. Abaixo, veja o código HTML que demonstra uso de internacionalização preparado para esse post (no final do post coloquei o link para baixar o exemplo completo):




Insert title here






:

termos específicos:
  • coming:
  • completed:
  • congratulations:
termos comuns:
  • key1:
  • key2:

Agora que já declaramos nossas dependências na tag ..., podemos ver o código que utiliza a tag (data-i18n="chave"), que permite usar o valor associado à chave e descrito dos arquivos de tradução. Já o código abaixo utiliza uma estrutura Javascript criada para representar o uso da biblioteca i18Next:

/*global i18n */

var Internacionalizacao = {

 LANGUAGES_AVAILABLE : [ 'en-US', 'pt-BR' ],

 /*
  * Inicializa arquivo de traducao de acordo com a lib i18Next.
  * Veja mais detalhes aqui: 
  */
 init : function() {
  var language = Internacionalizacao.getLanguage();

  // detecta a lingua do browser e se nao tiver a desejada, setamos uma default
  if (!(Internacionalizacao.LANGUAGES_AVAILABLE.indexOf(language) > -1)) {
   language = Internacionalizacao.LANGUAGES_AVAILABLE[0]; // default en-US
  }


  i18n.init({
   lng : language,
   load : 'current'
  }, function(t) {
   Internacionalizacao.translateElements(t);
  });
 },

 /* 
  * Detecta a linguagem atual do browser do usuario
  * @return linguagem atual, exemplo: pt-BR, en-US... 
  */
 getLanguage : function() {
  var userLang = navigator.language || navigator.userLanguage;
  return userLang;
 },

 /*
  * Funcao que traduz todos os elementos que possuem data-i18n e substitui 
  * pela traduz contida em sua chave. 
  * 
  * O arquivo deve estar em /arquivo_traducao.json>.
  */
 translateElements : function(t) {
  var elements, element;

  elements = document.querySelectorAll('[data-i18n]');

  for (var index = 0; index < elements.length; index++) {
   element = elements[index];
   element.innerHTML = t(element.getAttribute('data-i18n'));
  }
 }
};

// inicializar biblioteca de traducao i18Next durante o load da página
Internacionalizacao.init();


Esse código foi criado com o nome internacionalizacao.js com o objetivo de parametrizar as configurações da biblioteca i18Next. Existem várias opções disponíveis. Veja mais detalhes no site do desenvolvedor aqui.

Por fim, teremos 4 pastas com conteúdos semelhantes a estrutura do arquivo a seguir. Cada pasta, representa um idioma suportado usando um padrão de nomes internacional para representar um idioma_país (ex. pt-BR (português do Brasil), en-US (inglês norte americano), es (espanhol), dev (padrão e comum para o aplicativo como um todo)). Sendo que o "dev" representa neste caso, palavras em comum para qualquer idioma.

{
  "coming": "Em breve teremos novos desafios a ...",
  "completed": "Você completou todos os desafios!",
  "congratulations": "Parabéns!",
  "goal": "Objetivo"
}


Rodando em alguns Browsers, por que nem todos funcionam?

A primeira coisa que demorei a compreender tem haver com a pergunta acima. Os exemplos que estava utilizando não pareciam funcionar. As mensagens de logs que a tela de inspeção de elementos (Debugging) [veja o post do dia 3 para mais detalhe], usando a view de Console, não me permitiram entender o que estava acontecendo. Pior ainda, me levando a crer que eu estava fazendo alguma coisa errada no código ou no uso da biblioteca i18Next. Tentei outras bibliotecas também. Acho que no total, foram umas 8 horas de pesquisas e testes.

Após ler uma dica do desenvolvedor do i18Next, sugerindo que testasse o exemplo do seu site no browser Firefox, me dei conta que eu estava testando apenas no Chrome. Então percebi que o Chrome possui validações de segurança para impedir que códigos maliciosos possam danificar o sistema operacional. Assim, por padrão alguns códigos não tem permissão de rodarem. A menos que usemos um server side instalado em nossa máquina, como Apache, node.js, etc. Neste caso, o browser roda sem problemas.

Rodando no browser Firefox


A imagem acima mostra como o Browser exibe o nosso pequeno exemplo. Veja que no Firefox (acima), o resultado esperado está certo, enquanto que o Chrome (abaixo), não funciona pelo motivo explicado anteriormente.

Rodando browser Chrome


Moral da história: em programação para Web, não use somente um Browser para realizar seus testes. Utilize os mais recentes, usando diferentes resoluções de telas. Os principais browsers são ilustrados na imagem abaixo:

Browsers (fonte)

O que aprendi com a programação usando a internacionalização é que podemos tornar nossa aplicação mais globalizada, considerando a região e localização do usuário. Assim, espera-se maior aceitação do aplicativo, além de considerar uma maior abrangência de sua comercialização, podendo expandir sua distribuição geográfica. 

Também aprendi que temos que tomar cuidado com os termos usados na tradução, pois o significado de uma palavra mal traduzida pode expressar outro significado, correndo risco de errar, e no pior caso, cometendo uma grande gafe ou equívoco.
A programação com javascript usando internacionalização torna o processo bem mais fácil, mas somente do ponto de vista técnico. Isso não garante conteúdo traduzido de qualidade. 

Outras estratégias também podem ser usadas para realizar a internacionalização tais como, usar imagens e metáforas visuais para representar significados. Mas isso deve ser ponderado ainda mais, pois se uma imagem vale mil palavras, errar essa representação da imagem pode representar 1000 problemas. Você tem ideia do quanto isso pode lhe custar? Mas isso é um assunto que transcende esse post. Talvez possa ser discutido em outra ocasião.

Se gostou desse post, tiver críticas ou sugestões, ou mesmo se souber de algum material que complemente o assunto discutido aqui, sinta-se encorajado em contribuir, comentando ou compartilhando em sua rede social, expandindo ainda mais nosso papo que não se encerra aqui.

:)

Os códigos fontes dos exemplos criados para esse post podem ser baixados aqui.


04 setembro 2014

O que aprendi com a programação hoje: dia 7 - Parse.com

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

A plataforma Parse fornece uma solução de back-end completa para o um aplicativo móvel. Segundo a sua documentação, o objetivo do Parse é eliminar totalmente a necessidade de escrever código do servidor ou manutenção de servidores. Hoje vou abordar um pouco sobre essa tecnologia que permitiu validar uma funcionalidade de nosso projeto, no qual, dependia da infraestrutura de server side.

Para contextualizar, escute o áudio que preparei para que você entenda melhor o contexto da nossa necessidade em questão, pelo qual foi necessário encontrar soluções alternativas como serviços (SAAS).



A ideia é eliminar a dependência da infraestrutura de servidor para armazenar os dados dos diferentes clientes, que rodam nosso aplicativo em seus celulares. Com o Parse, podemos viabilizar essa estrutura com pouco esforço. O objetivo é minimizar a configuração e rapidamente começar a construir seu aplicativo com JavaScript e HTML5 em Parse.

Site do Parse.com com tradução Google Translate

Apps

Em Parse, você cria um aplicativo para cada um de seus aplicativos móveis. Cada aplicativo tem seu próprio ID e sua chave de cliente JavaScript, assim você poderá usar na sua aplicação web. Sua conta no Parse pode acomodar vários Apps. Isto é útil mesmo se você tiver um aplicativo, uma vez que você pode implantar versões diferentes para teste e produção.

Acesse o site do Parse, crie uma conta e cadastre seu aplicativo. Leia a documentação que ele possui para entender melhor.

Dependências

O JavaScript SDK do Parse, praticamente não necessita de quaisquer bibliotecas externas. A única exceção é a classe do Parse.View, que exige que você forneça jQuery ou jQuery compatível $ método.

Modelo de Objetos (Parse.Object)

Armazenamento de dados em Parse é construído em torno Parse.Object. Cada Parse.Object contém pares de chave-valores de dados JSON-compatíveis. Este dado é sem esquema, o que significa que você não precisa especificar de antemão que existem chaves em cada Parse.Object. Você simplesmente define qualquer pares de chave-valor que você quer, e a infraestrutura do Parse irá armazená-la.

Por exemplo, digamos que você está acompanhando altas pontuações para um jogo. Um único Parse.Object poderia conter:

pontuacao: 20500, nomeJogador: "Douglas Frari" , faseAtual: 3

As chaves devem ser sequências de caracteres alfanuméricos. Os valores podem ser strings, números, boleanos, ou mesmo matrizes e dicionários - qualquer coisa que pode ser JSON codificado.

Cada Parse.Object é uma instância de uma subclasse específica com um nome de classe que você pode usar para distinguir diferentes tipos de dados. Por exemplo, poderíamos chamar a pontuação mais alta como um objeto de nome GameScore.

Salvando objetos

Vamos dizer que você deseja salvar o GameScore descrito acima para o Parse Cloud. Poderia fazer assim:

var GameScore = Parse.Object.extend("GameScore");
var gameScore = new GameScore();
 
gameScore.set("score", 1337);
gameScore.set("playerName", "Sean Plott");
gameScore.set("cheatMode", false);
 
gameScore.save(null, {
  success: function(gameScore) {
    // Execute any logic that should take place after the object is saved.
    alert('New object created with objectId: ' + gameScore.id);
  },
  error: function(gameScore, error) {
    // Execute any logic that should take place if the save fails.
    // error is a Parse.Error with an error code and description.
    alert('Failed to create new object, with error code: ' + error.message);
  }
});


Recuperando os dados

Pode-se recuperar os objetos usando uma forma simples, porém, com muitas possibilidades para fazer filtros. Veja essa página com dicas: https://parse.com/docs/js_guide#objects-retrieving

 var GameScore = Parse.Object.extend("GameScore");
  query = new Parse.Query(GameScore);
  query.limit(10);
  // Sorts the results in descending order by the score field
  query.descending("score");

  query.find({
   success : function(results) {
    console.log("Successfully retrieved " + results.length
      + " scores.");
    // Do something with the returned Parse.Object values
    var object, i;

    for (i = 0; i < results.length; i++) {
     object = results[i];
     console.log(object.id + ' - '
       + object.get("playerName") + ': '
       + object.get("score"));
    }

   },
   error : function(error) {
    console.log("Error: " + error.code + " " + error.message);
   }
  });
 
Essa foi a dica do Parse.com, um serviço como alternativa a servidores externos.

Aprendi que esses serviços estão sendo muito usados por aplicativos móveis em Android e iOS, pois oferecem transparência e simplicidade aos desenvolvedores, reduz custos de desenvolvimento e eliminam a necessidade de manter um servidor externo. 

Além disso, não há preocupações com a hospedagem e manutenção desse server side. Mas nem tudo são flores. Para serviços externos mais complexos, talvez o Parse não seja tão interessante. Mas isso é tópico para se investigar por demanda em futuros posts.

03 setembro 2014

O que aprendi com a programação hoje: dia 6 - por que programar?

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

Hoje vou lembrar um aprendizado antigo, mas que continua me inspirando até hoje: a importância da programação. Foi após perceber que pela programação, através do seu processo intrínseco de criação, vários estímulos criativos são ativados em nossa mente, desafiando nossa imaginação e nos motivando a decifrar um problema.

Governo Britânico adota programação no currículo básico
O problema em questão é similar a um quebra-cabeças, nos desafia em certa medida, a ponto de tornar esse desafio uma coisa potencialmente promissora de se exercitar. É como praticar um esporte, quanto mais se faz, mais se desperta interesse a medida que ganhamos algo com isso. Na programação se usam muitos neurônios, talvez por isso que o café é bastante popular.

E se você pensa que isso é papo de programador, o que justifica alguns governos da Europa (britânico por exemplo), adotarem o ensino da programação tornando-a parte do currículo básico na formação educacional? Não é de hoje que isso vem acontecendo lá na Europa.

Vou mostrar alguns argumentos para tentar justificar a importância e necessidade de usar a programação agora.

O uso dos computadores, celulares e dispositivos eletrônicos em geral estão se tornando cada vez mais populares, pois são utilizados para diversos propósitos, tais como nas áreas do entretenimento, finanças, lazer, comunicação, etc. Os aplicativos assumiram um papel relevante para as pessoas.

A demanda por software tem alcançado níveis gigantescos. A área do conhecimento que contribui para agrupar os diferentes níveis do software é a programação. O profissional programador tem um papel relevante na criação do software e para tal requer conhecimentos de lógica de programação e algoritmos, além de compreender o uso das linguagens de programação.

A programação é considerada por especialistas da educação como uma extensão da língua, pois permite ao aprendiz desenvolver o raciocínio de forma sistemática e lógica, motivando a construção de relações com os outros campos do conhecimento humano. Escrever código engaja as pessoas em um novo caminho do pensamento. Elas aprendem a organizar, refinar e refletir sobre suas ideias.

As habilidades de programação permitem aos alunos "escreverem" novos tipos de coisas/pensamentos/conhecimentos - estórias interativas, jogos, animações e simulações. Consequentemente, há cada vez mais demandas da sociedade por pessoas ou profissionais que saibam "mexer"/programar com a criação de software.
No processo de aprender a codificar os programas os alunos aprendem muitas outras coisas. Eles não aprendem apenas a codificar, eles estão codificando o aprendizado. Aprendendo matemática e ideias computacionais (como variáveis e condicionais), eles estão aprendendo estratégias para resolver problemas, criando projetos e comunicando ideias. Essas habilidades são uteis não apenas para cientistas da computação, mas para qualquer um, independente da idade, conhecimentos prévios ou ocupação.
Esses foram apenas alguns dos argumentos que eu posso citar. Imagine quantas pesquisas estão sendo feitas e quanto potencial e demanda existe?

Uso de linguagens por idade e experiência (fonte)

Essa pesquisa mostra quais as linguagens estão sendo usadas, para quais grades escolares e para qual faixa de idade estão sendo usados para o ensino da programação. Não é legal?

Se você tem ouvidos e olhos,  veja com os próprios esses dois vídeos. O primeiro é de um garoto que foi apresentar no TED a sua experiência com a programação. O segundo é um depoimento de Bill Gates sobre coisas que não lhe dizem na escola.


A importância de aprender a programar




11 coisas que não se aprende na escola




02 setembro 2014

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.

01 setembro 2014

O que aprendi com a programação hoje: dia 4 - sons em Javascript

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

Se você está fazendo um jogo ou pretende fazê-lo, ou simplesmente está com curiosidade em saber do que se trata, considere compreender como adicionar efeitos sonoros no seu aplicativo ou game, pois a experiência do usuário fica bem melhor. Neste pequeno post vou mostrar como usar os sons, pois com a linguagem Javascript, tudo fica super simples.

Para tocar uma música ou som, você precisa ter um código Javascript que rode algo como isso:

var audio = new Audio('audio.mp3');
audio.play();


Considerando o exemplo publicado no post do dia 2, sobre animação, que tal adicionar uns efeitos para entender como se faz na prática? Podemos adicionar um tema musical, no qual ficará sempre tocando, além de alguns efeitos sonoros de acordo com o desejado. Neste caso vou demonstrar o efeito de um click na tela, que junto animação da bola, vai tocar efeito sonoro a cada click.

var Sound = {

 init : function() {
  Sound.audio = new Audio('main_theme.mp3');
  Sound.audio.loop = true;
  Sound.play();
 },

 play : function() {
   Sound.audio.play();
 },

 resetAndPlay : function() {
  Sound.audio.currentTime = 6;
  Sound.play();
 },

 pause : function() {
  Sound.audio.pause();
 },

 playSound : function(sound) {
   var audioFile, audio;
   audioFile = sound;
   audio = new Audio(audioFile);
   audio.play();
 },

 playClick : function() {
  var audio = "smb_kick.wav";
  Sound.playSound(audio);
 },

 gameOver : function() {
  Sound.pause();
  var audio = "smb_gameover.wav";
  Sound.playSound(audio);
 },

};

Sound.init();



O código é relativamente simples. Em Javascript temos o objeto Audio, e neste temos alguns controles padrões, tais como: loop do áudio e currentTime. O loop podemos configurar para tornar a música repetitiva quando ela acabar. Enquanto que em currentTime podemos configurar para a música começar a partir de um determinado intervalo de tempo.

Podemos criar funções para tocar ou pausar os sons específicos. Vários formatos de arquivos são suportados pelo Browser. Eu já testei com MP3, WAV e OGG. Todos funcionaram. É importante destacar que se uma música está em execução, e você desejar tocar outra, basta chamá-la que o novo som vai tocar em paralelo com o atual. Se desejar parar ou pausar a música atual, pode chamar o método pausar. Para estudar melhor sobre sons em Javascript de uma olhada neste link.

Vejamos como o jogo principal foi atualizado para possuir as chamadas do sound.js pelo arquivo bola.js:

var Animacao = {
 // variaveis globais
 CANVAS : null,
 CONTEXT : null,
 bola : null,
 emProcessoAnimacao : false,
 contadorAnimacao : 0,

 // inicializa a Animacao
 init : function() {
  // variaveis de canvas
  Animacao.CANVAS = document.querySelector(".canvas");
  Animacao.CONTEXT = Animacao.CANVAS.getContext("2d");

  // registra eventos
  Animacao.addEventListeners();


  bola = new Bola(0,0);
  bola.init();

  setTimeout(Animacao.pintar,100);


 },

 // limpa a tela
 clearCanvas : function() {
  Animacao.CONTEXT.clearRect(0, 0, Animacao.CANVAS.width, Animacao.CANVAS.height);
 },

 // registra eventos
 addEventListeners : function() {
  Animacao.CANVAS.addEventListener("click", Animacao.clickAnimacaoHandler);
 },

 clickAnimacaoHandler : function(e) {

  Animacao.emProcessoAnimacao = true;

  // SOM de click
  Sound.playClick();

  Animacao.pintar();
 },

 pintar : function() {

  // desenha a Animacao aqui
  Animacao.clearCanvas();

  // atualizar posicao e pintar objeto
  bola.update();
  bola.draw();


  // se objeto saiu da tela
  if (bola.y > Animacao.CANVAS.height) {

   console.log("Animacao saiu da tela -> gameOver");

   bola.y = 0;
   bola.draw();

   // SOM de game over

   Sound.gameOver();
   setTimeout(Sound.resetAndPlay,4000);
  }

  // chamar novamente o metodo (pelo menos 5 vezes)
  if (Animacao.emProcessoAnimacao) {

    Animacao.contadorAnimacao++;

    if (Animacao.contadorAnimacao >= 5) {
     Animacao.contadorAnimacao = 0;
     Animacao.emProcessoAnimacao = false;

    } else {

     // repintar a tela novamente
     requestAnimationFrame(Animacao.pintar);
    }
  }
 },

};


function Sprite(image) {
 this.image = new Image();
 this.image.src = image + ".jpg";

 this.draw = function(x, y) {
  Animacao.CONTEXT.drawImage(this.image, x, y);
 };
}

function Bola(x, y) {
 this.x = x;
 this.y = y;
 this.clicked = false;
 this.sprite;

 this.init = function() {
  this.sprite = new Sprite("bola");
 };

 this.update = function() {

  this.y += (this.sprite.image.height/10);

 };

 this.draw = function() {
  this.sprite.draw(this.x, this.y);
 };

 this.click = function() {
  this.clicked = true;
  this.draw();
 };

 this.animate = function() {
  this.type.sprite.animate();
 };

}


// o javascript vai carregar esse metodo a cada refresh no browser
window.onload = Animacao.init;



Baixei alguns sons prontos que encontrei em uma busca na internet. No entanto, tenha cuidado para não sair copiando da internet qualquer som que você achar legal, pois há licenças proibitivas (copyrights), e que podem não estarem autorizados pelos detentores da propriedade intelectual. Para fins de testes, eu copiei as músicas do Mário neste site. Se desejar publicar, recomendo utilizar sons de domínio público ou produzir seus próprios.

Um detalhe importante: se deseja fazer diferentes partes do código Javascript chamarem os sons específicos, garanta que o arquivo sound.js seja declarado no HTML antes dos demais Javascripts para que sejam reconhecidos.



 
 Bola



 

início

This browser is not supported

fim


Aprendi com a programação para tratamento de sons usando Javascript que é muito simples de usá-los. Percebi também que o mais difícil não é fazê-los tocarem, mas encontrar um som de nosso agrado. O ideal seria produzir os próprios sons. Mas isso também envolve um custo adicional. 

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

Que tal usar persistência em Javascript/HTML 5. De forma simples poderemos salvar dados do usuário e tornar nosso aplicativo bem mais "inteligente". No próximo post vou tentar explicar como gravar dados.