Alguém já jogou Star Wars Chess?

Essa é para aqueles que viveram o início da década de 90. :)

Não sei se vocês sabem, mas existiu um jogo de xadrez para o DOS e para Sega-CD chamado Star Wars Chess:



Vendo agora este vídeo, percebi o quanto o jogo era meio "tosco". :P

Sei lá, o Dark Side de Dama no Xadrez soa meio estranho...

Mas, o importante, é que juntaram duas coisas que eu gostava (e acho que a maioria dos nerds gosta): Star Wars + Xadrez.

Quem quiser dar uma olhada, pode usar emuladores como o Gens (Sega-CD) ou o DOSBox e baixar a ISO.

Até mais!

Tutorial - Parte 5 - Fazendo um Genius em PhoneGAP

Agora é a última parte. :)

Para iOS:

- No arquivo zipado do PhoneGap, vá na pasta lib/ios e execute o arquivo "Cordova-X.X.X.dmg";
- Clique duas vezes (ou uma vez, dependendo de como seu Mac esteja configurado...) no item "Cordova-X.X.X.pkg";
- Clique nos botões "Next" (ou "Continuar"), até que finalize a instalação (quando o botão exibido é o "Close" (ou "Fechar"));
- Clique no botão "Close" (ou "Fechar");
- Abra o "Xcode";
- Clique no item "Create a new Xcode project";

- Escolha o template "Cordova-based Application";
- Preencha os campos, retire o "check" "Use Automatic Reference Counting" (na versão 1.7 do Cordova ainda não tinha suporte...) e finalize (clique no botão "Next");
- Vá para a pasta www do projeto criado;
- Copie ou crie o arquivo html de sua aplicação na pasta www e renomeie para index.html (se já existir um, remova-o e coloque o seu);
- Clique no menu "File"->"Add Files to <Projeto>" do Xcode;
- Selecione a pasta www, selecione o item "Create folder references for any added folders" e clique no botão "Add";
- No Xcode, selecione o projeto/dispositivo a ser rodado e clique no botão "Run";

Se tudo der certo, a aplicação aparecerá assim:

Uia, iguar quenhem a otra! :)

E, finalmente, terminamos o tutorial...

Obs.: Eu dei uma arrumada nas outras partes do tutorial (isso que dá fazer sem testar...), agora deve estar tudo certo para que este pequeno jogo funcione. :P

Desculpem pelas mancadas!

Até mais!

Tutorial - Parte 4 - Fazendo um Genius em PhoneGAP

Vamos instalar a nossa aplicação?
- Primeiro, baixe o PhoneGap: http://phonegap.com/download;
- Expanda o arquivo zip;

Para Android:
- Abra o Eclipse e crie um novo projeto Android (selecione a versão 2.2 do Android);
- Crie em seu projeto no Eclipse, as pastas libs e assets/www;
- Jogue na pasta libs o arquivo cordova-X.X.X.jar do diretorio /lib/android que esta dentro do zip;
- Jogue no pasta assets/www o arquivo cordova-X.X.X.js do  diretorio /lib/android que esta dentro do zip;
- Clique com o botão direito no projeto (Eclipse) e vá em Properties;

- Nos itens a esquerda, vá para o item "Java Build Path";
- Na aba "Libraries", adicione o arquivo cordova-X.X.X.jar da pasta libs (interno do projeto);
- Agora, abra o arquivo "AndroidManifest.xml" em um editor (pode ser no Eclipse mesmo) e adicione as seguintes linhas entre as tags "uses-sdk" e "application":

    <supports-screens

        android:anyDensity="true"

        android:largeScreens="true"

        android:normalScreens="true"

        android:resizeable="true"

        android:smallScreens="true" />

    <uses-permission android:name="android.permission.VIBRATE" />

    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />

    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

    <uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />

    <uses-permission android:name="android.permission.READ_PHONE_STATE" />

    <uses-permission android:name="android.permission.INTERNET" />

    <uses-permission android:name="android.permission.RECEIVE_SMS" />

    <uses-permission android:name="android.permission.RECORD_AUDIO" />

    <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />

    <uses-permission android:name="android.permission.READ_CONTACTS" />

    <uses-permission android:name="android.permission.WRITE_CONTACTS" />

    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

    <uses-permission android:name="android.permission.GET_ACCOUNTS" />

    <uses-permission android:name="android.permission.BROADCAST_STICKY" />

- E na tag "activity" adicione as seguintes propriedades (dentro da tag):

            android:screenOrientation="portrait"

            android:configChanges="orientation|keyboardHidden"

- Agora abra a classe <Nome_do_Projeto>Activity (deve ser a única na pasta src) e mude ela para extender de DroidGap e use o método loadUrl no onCreate de sua classe:

package org.toolbox.game.genius;

import org.apache.cordova.DroidGap;

import android.os.Bundle;

public class <Nome_do_Projeto>Activity extends DroidGap {

    /** Called when the activity is first created. */

    @Override

    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        super.loadUrl("file:///android_asset/www/index.html");

    }

}

- Crie ou coloque o arquivo html da aplicação que a gente criou (no caso, o nosso genius) na pasta assets/www e renomeie para index.html (caso este não se chame assim);

- Se você criou um javascript separado, coloque nesta pasta (se ele estiver em outra pasta, coloque ele dentro da mesma hierarquia, ou seja, coloque a pasta completa :) );

- Clique no menu "Window"-> "AVD Manager"

- Crie um emulador, clicando no botão "New" (se já não existir), coloque um nome para este "dispositivo" e escolha em "Target" o valor "Android 2.2 - API Level 8";

- Clique no botão "Create AVD";

- Selecione o projeto no "Package Explorer" e clique no item "Run"->"Run" do menu principal;

- Selecione o item "Android Application" e clique no botão "Ok";

Se der certo, ele abrirá o simulador (agora, você deve esperar um bom tempo...) e aparecerá esta tela:

Legal, não?

O próximo passo é instalar no iOS e, com isso, será o fim de nosso tutorial! :)

Tutorial - Parte 3 - Fazendo um Genius em PhoneGAP

Terceira parte, e vamos que vamos! :)

Depois que a seqüência é exibida, precisamos obter os itens (cores) que o usuário digitar. Para isso, vamos mexer na função swithOnLight():

/**
* Função de acende a luz do item da seqüência selecionada
  */
function swithOnLight() {
//Se o indice esta na seqüência...
if ((index >=0) && (index < sequence.length)) {
  //Obtem o item da seqüência
  selected = sequence[index];
    //Acende a "luz" do item indicado
    switchLight(selected.x, selected.y);
    //Espera meio segundo para apagar o item selecionado
    setTimeout('switchOffLight();', 500);
} else {
   //Se o indice não estiver seqüência ou chegou no fim da seqüência,
   //habilito os botões para que o usuário possa digitar a seqüência de cores
index = 0;
alert('Sua vez!');
for (var i = 0; i < 4; i++) {
var el = document.getElementById('genius[' + parseInt(i % 2) + '][' + parseInt(i / 2) + ']');
if (typeof(el.ontouchstart)!='undefined') {
el.ontouchstart = play;
} else if (typeof(el.onclick)!='undefined') {
el.onclick = play;
}
}    
}
}

Agora, precisamos verificar se a seqüência que o usuário digitar é válida através da função play:

/**
* Função do evento de click de um dos botões de cores
*/
function play(event) {
   var el = event.srcElement;
        var color = "" + el.style.backgroundColor;
        //Troco a cor deste (se ele estiver mais escuro (por exemplo RGB(0,153,0)) , coloco uma cor mais clara (RGB(0,255,0) ou vice-versa)
        color = color.indexOf('153') >= 0 ? color.replace(/153/gi,'255') : color.replace(/255/gi,'153');
        //Coloco a nova cor para o elemento a ser exibido
        el.style.backgroundColor = color;
        setTimeout(function() {
            //Verifico se o que o usuário clicou esta correto na seqüência guardada
if (el.id == 'genius[' + sequence[index].x + '][' + sequence[index].y + ']') {
//Se sim passo para o próximo item da seqüência
index++;
//Se for o último item é por que a seqüência esta correta e completa.
if (sequence.length == index) {
alert('Seqüência correta!');
//Desabilito os botões de cores (Removo os eventos)
for (var i = 0; i < 4; i++) {
var btnCores = document.getElementById('genius[' + parseInt(i % 2) + '][' + parseInt(i / 2) + ']');
if (typeof(btnCores.ontouchstart)!='undefined') {
btnCores.ontouchstart = null;
} else if (typeof(el.onclick)!='undefined') {
btnCores.onclick = null;
}
}
//Habilito o botão de Start!
btnStart.disabled = false;
}
} else {
   //Senão, ele errou e deve fazer a seqüência tudo de novo
index = 0;
alert('Errou! Tente de novo!');
}
       //Troco a cor deste (se ele estiver mais escuro (por exemplo RGB(0,153,0)) , coloco uma cor mais clara (RGB(0,255,0) ou vice-versa)
       color = color.indexOf('153') >= 0 ? color.replace(/153/gi,'255') : color.replace(/255/gi,'153');
        //Coloco a nova cor para o elemento a ser exibido
        el.style.backgroundColor = color;
}, 500);
}

Ufa..., agora só falta instalar o PhoneGap para Android ou para iOS (e isso vai ser feito no próximo tutorial) :)

Até mais!

A Árvore e o Balanço no Desenvolvimento de Software

Alguém já viu a imagem acima?

Pois é, faz uns 10 anos atrás que vi esta imagem e parece que a gente nunca aprende...

Quando me falam de um projeto novo, já fico pensando em customizações do sistema, em efeitos visuais (ter drag n'drop, menu rotativo, fade in, fade out, etc.) ou em tecnologias novas... Mas, que se formos pensar,  são coisas que, no final, não são prioritárias ou agregam pouco ou nenhum valor para a aplicação ou o usuário final.

Acho que, algumas vezes, precisamos focar no que é realmente necessário para o nosso cliente. Esta certo que fazer algo realmente bonito é muito legal, mas o importante, na minha singela opinião, é que a aplicação que construimos tem que ser algo mais que bonito, tem que ser algo útil para ele.

De que me adianta um sistema que faz relatórios 3D na tela, se no final o que a pessoa precisa é de uma simples listagem dos produtos mais vendidos?

"Quanto mais simples, melhor..." -- já me dizia um professor meu na faculdade.

É, errando e aprendendo... ;)

Até mais!

Teste sua aplicação Android com Robotium

Alguém já usou Selenium?

Se sim, você sabia que existe uma ferramenta de teste que se diz parecido com o Selenium mas que testa aplicações nativas em Android?

Pois é, ele existe e se chama Robotium (até o nome é parecido... :P ):
http://code.google.com/p/robotium/

Obs.: Para quem não sabe o que é Selenium: ele é uma ferramenta de testes automatizados para web que não só checa a "lógica" do sistema, como também o fluxo e as estruturas das páginas. Mais informações: http://seleniumhq.org/

Até mais!

Tutorial - Parte 2 - Fazendo um Genius em PhoneGAP

Vamos continuar o tutorial, agora escrevendo uma parte do javascript (aquela que "liga" e "desliga" as "luzes"):

Primeiramente, vamos criar uma funçāo que obtem um elemento e troca a cor deste para uma mais clara ou escura, dependendo do estado anterior:

<SCRIPT>
      /*
       * Função que "liga" ou "desliga" a "luz"
       * Parametros: x - posição horizontal da "luz" (0 (coluna 1) ou 1 (coluna 2)), y - posição vertical da "luz" (0 (linha 1) ou 1 (linha 2))
       */
        function switchLight(x, y) {
            //Obtenho o elemento que exibe a cor
            var el = document.getElementById('genius['+ x +']['+ y +']');
            //Obtenho a cor do elemento
            var color = "" + el.style.backgroundColor;
            //Troco a cor deste (se ele estiver mais escuro (por exemplo RGB(0,153,0)) , coloco uma cor mais clara (RGB(0,255,0) ou vice-versa)
            color = color.indexOf('153') >= 0 ? color.replace(/153/gi,'255') : color.replace(/255/gi,'153');
            //Coloco a nova cor para o elemento a ser exibido
            el.style.backgroundColor = color;
        }
</SCRIPT>

Para ver se a função deu certo, coloco esta no evento onclick (ou ontouchstart, em mobile) no botão:

<!-- Acende ou apaga a "luz" verde-->
<BUTTON id="start" ontouchstart="switchLight(0,0);">Start!</BUTTON>

Se tudo ocorrer bem, quando você clicar no botão "Start!", ele vai acender a luz verde e, quando clicar de novo, apagar! :)

Próximo passo: precisamos guardar a seqüência das luzes a cada nova interação. Para isso, criamos uma variável global (array):

var sequence = [];

E também uma função que gera e guarda a seqüência:

/* Função que gera uma seqüência: escolhe uma linha (zero ou um) e uma coluna (zero ou um) e guarda em um array
 */
function addSequence() {
//Gera um número aleatório de 0 ao 1
var x = Math.round(Math.random());
//Gera um número aleatório de 0 ao 1
var y = Math.round(Math.random());
//Guarda em um array
sequence.push({"x": x, "y": y});
}

Agora vem a parte mais difícil, que é reproduzir a seqüência na tela. Vamos criar as funções que lê um item da seqüência, acende a luz indicada por este item e depois apaga:

//Variável global que indica o item da seqüência a ser utilizada
var index = 0;
//Variável global que contém o item selecionado na seqüência
var selected = null;
//Variável que faz referência ao botão html
var btnStart = null; 
...

/**
 * Evento onload
 */
window.onload = function() {
btnStart = document.getElementById('start');
}

/**
 * Função de acende a luz do item da seqüência selecionada
 */
function swithOnLight() {
//Se o indice esta na seqüência...
if ((index >=0) && (index < sequence.length)) {
   //Obtem o item da seqüência
   selected = sequence[index];
   //Acende a "luz" do item indicado
   switchLight(selected.x, selected.y);
   //Espera meio segundo para apagar o item selecionado
   setTimeout('switchOffLight();', 500);
} else {
    //Se o indice não estiver seqüência ou chegou no fim da seqüência, habilito o botão "Start!" 
    btnStart.disabled = false;
}
}

/**
 * Função que apaga a luz e vai acender (se existir) o próximo item da sequência 
 */
function switchOffLight() {
//Se existe um item "acendido" (selecionado)
if (selected != null) {
     //então apago
     switchLight(selected.x, selected.y);
     selected = null;
}
//Vai para o próximo item da seqüência
index++;
//e tento acender este
setTimeout('swithOnLight()', 500);
}

Agora, retiramos o evento ontouchstart ou onclick (se foi colocado) do botão "Start!" e colocamos os eventos para criar a animação das luzes:
              
/**
 * Função que inicia a animação da sequência de cores
 */
function startSequence() {
     //Animação começa desde do inicio da sequência
     index = 0;
     //Desabilita o botão
     btnStart.disabled = true;
    //Adiciona um item na sequência
    addSequence();
    //tenta acender a primeira luz da sequência e executa as demais.
    swithOnLight();
}

/**
 * Evento onload

 */
window.onload = function() {
    btnStart = document.getElementById('start');
    if (btnStart != null) {
         //Adiciono o evento onclick ou ontouchstart para executar a sequência
         if (typeof(btnStart.ontouchstart) != 'undefined') {
              btnStart.ontouchstart = function() {
            startSequence();
            }
         } else if (typeof(btnStart.onclick) != 'undefined') {
              btnStart.onclick = function() {
            startSequence();
            }
         }          
    }
}

Por enquanto é só (mas agora falta pouco... :) ).

Até mais!