Miguel Duarte

Para grande surpresa minha, recebi no final de Novembro um convite da Microsoft para um evento que ia decorrer no Palmela Village Golf Resort, o Windows Phone App Code Camp. A premissa era um fim-de-semana em condições de luxo para desenvolvermos uma aplicação para Windows Phone 7 e, como não sou de recusar desafios, decidi candidatar-me. Para além de nunca ter desenvolvido aplicações para Windows Phone 7 ou em Silverlight, a minha experiência com C# era muito limitada, mas era a situação ideal para aprender a trabalhar com estas tecnologias.

Candidatei-me ao Code Camp com o Carlos Lima e o David Jardim. Os nossos projectos eram uma app para gestão de despesas/finanças pessoais (Carlos) e um jogo para testar a memória e o tempo de reacção do jogador (eu e o David). Felizmente, fomos todos aceites para o evento, juntamente com mais 57 participantes num total de 32 projectos.

No dia 16 de Dezembro, dirigimo-nos para o Resort prontos para criar uma aplicação mobile com tecnologias Microsoft. Fomos recebidos por uma pequena equipa developers, que nos deram algumas informações de como iria decorrer o evento. Para além de algumas sessões técnicas, iriam estar experts on-site para nos darem todo o apoio que precisássemos. Estava também planeada uma entrega de prémios no final para as 5 melhores apps.

As condições que tínhamos eram fantásticas: existia uma sala comum para desenvolvimento, denominada “App Factory”, com mesas para todas as equipas, uma divisão onde estavam os experts que podíamos abordar a qualquer altura, e até uma “cloud” de snacks redundantes que eram repostos automaticamente! A única falha foi a ligação à internet, que era bastante fraca, mas tenho noção que os organizadores fizeram tudo o que podiam para melhorar este aspecto.

Relativamente aos alojamentos, havia um apartamento T1 para cada equipa com belíssimas condições. O cenário envolvente era relaxante, visto que estávamos em pleno Golf Resort do Palmela Village. Estarmos rodeados pela Natureza nas pequenas caminhadas que fazíamos entre a área de refeições e a App Factory eram uma boa maneira de limpar a cabeça dos bugs e dos algoritmos, de forma a voltarmos à carga mais tarde com mais energia. Por falar em refeições, estas foram das melhores que já tive o prazer de degustar. Desconfio que era o  Chef Gordon Ramsay na cozinha!

A primeira sessão foi uma introdução ao desenvolvimento de WP7 com Silverlight, pelo Nuno Silva. Foi uma excelente maneira de saber o que nos esperava, principalmente para quem não conhecia nada, como eu. Desde a criação de layouts por XAML, até à manipulação dos mesmos com C#, ficámos com todas as bases necessárias de Silverlight para começarmos a trabalhar. Acabei por não assistir a mais nenhuma sessão visto que não estavam directamente relacionadas com o que precisávamos para desenvolver o jogo, para além de haver uma grande limitação de tempo.

À medida que as horas iam passando e estávamos mais perto da deadline para o final do evento, começámos a perceber que seria muito difícil concluirmos o jogo. Ainda faltavam algumas funcionalidades básicas para que ficasse jogável, mas continuámos a insistir. Os vencedores iriam ser escolhidos por votos dos restantes concorrentes no Facebook entre as 15h e 17h. Apenas conseguimos submeter o jogo para votação às 16h30, e tivemos que pensar rapidamente numa maneira de o divulgar. Carregámos o jogo para um dos dispositivos WP7 que tínhamos à nossa disposição e começámos a mostrar o jogo a quem nos aparecia à frente. O feedback que obtivemos foi muito positivo, e acabámos por ficar em 2º lugar na competição, o que nos valeu um par de telemóveis LG Quantum! Um dos pontos fortes do nosso jogo era o aspecto gráfico, que tinha sido desenhado pela Ana Jesus. Um grande obrigado a ela, porque o look and feel da aplicação fez toda a diferença. Aqui fica um pequeno vídeo do jogo:

Um grande obrigado também à organização, que esteve muitíssimo bem neste evento: Nuno Silva, Pedro Lamas, Miguel Vicente e André Malico. Só conseguimos terminar a nossa aplicação devido à vossa incansável ajuda durante os 3 dias! Espero que continuem com estas iniciativas, pois mostra um lado da Microsoft que não estamos habituados a ver no nosso dia-a-dia e dá-nos a oportunidade de experimentar tecnologias muito interessantes. Fiquei muito bem impressionado pelo Silverlight e pela experiência de desenvolvimento para o WP7 em geral.

Até um próximo evento!

UPDATE: Ficámos em primeiro lugar na competição final, que englobava apps desenvolvidas dentro e fora do WP App Code Camp! O prémio foi um Nokia Lumia 800.

Quando se instala um botão de like do Facebook num site e um utilizador clicka nele, aparece um item no mural desse utilizador. Normalmente aparece o título da página, algum do texto do artigo, e uma imagem. Se não fizermos nenhuma alteração, a  imagem é escolhida aleatoriamente das que estão presentes na página. Para escolhermos qual a imagem a aparecer, é necessário adicionar uma meta-tag ao cabeçalho das nossas páginas. A tag é a seguinte:

<meta property="og:image" content="LINK PARA A IMAGEM"/>

Se instalarem um plugin no WordPress para que apareça o botão de like em cada artigo, pode ser necessário inserir algum código se o plugin não tratar disso automaticamente. O código seguinte deve ser colocado no ficheiro header.php do template do WordPress e procura no conteúdo do artigo por uma imagem. Caso não haja nenhuma, é utilizada uma imagem por defeito.

function getFirstImage() {
	global $post;

	preg_match('/]+>/i', $post->post_content, $matches);
	preg_match('/(src)=("[^"]*")/i',$matches[0], $matchesFinal);
	$src = trim($matchesFinal[0]);

	if($src) //remover o src=" e as aspas finais
		return substr($src,5,strlen($src)-6);

	return "/facebook_default.png";
}

echo '<meta property="og:image" content="'.getFirstImage().'"/>';

?>

Podem alterar o nome da imagem “facebook_default.png” para a que quiserem. O Facebook aconselha utilizar uma imagem quadrada com uma largura maior que 50px.

No início do ano soube da existência de um passatempo promovido pela equipa do Sapo Mapas vocacionado para estudantes universitários que consistia em criar um site que utilizasse a API deles. Normalmente costumo ter bastantes dificuldades em encontrar uma ideia interessante para este tipo de concursos (confesso que a criatividade não é o meu forte), mas desta vez a coisa encarrilou. A ideia partiu de um problema com o qual já me deparei algumas vezes: dou por mim com um fim-de-semana para passear com a namorada, mas é sempre uma carga de trabalhos escolhermos o destino e os locais a visitar.

Comecei a pensar em como é que isto poderia ser resolvido por uma aplicação ou um site e cheguei a um conjunto de funcionalidades básicas que seriam interessantes. Primeiro, seria necessário escolher uma zona do país que gostássemos de visitar, e depois era importante saber o que é podemos visitar nessa região. Expliquei a ideia à equipa e começámos a iterar sobre ela. Acabámos por adicionar mais funcionalidades, como a possibilidade de criação de um roteiro que calculasse a melhor rota entre os vários pontos de interesse a visitar. Assim surgiu o Weekend Planner.

Esboços iniciais do Weekend Planner

Fechámos o planeamento com 3 etapas importantes para a interface do utilizador: 1) Escolher a zona de Portugal, 2) Escolher os pontos de interesse (Restaurantes, Hotéis, Cultura e Turismo), e 3) Ordenar os pontos de interesse e criar o roteiro. Também identificámos alguns pontos chave nos quais queríamos apostar: para além de um design limpo, simples e baseado no look and feel dos restantes serviços Sapo, era importante ter um interface dinâmico. O objectivo era não existirem refreshes nas páginas, por isso escolhemos basear tudo em Javascript em vez de optar por PHP, por exemplo. Isto revelou-se um desafio bastante grande porque nenhum de nós tinha experiência em Javascript.

Usámos o planeamento Weekend Planner na cadeira de Gestão de Projectos do Mestrado e fomos avançando na implementação no pouco tempo livre que nos sobrava e chegámos à data da deadline com um conjunto interessante de funcionalidades implementadas. Apesar disto, ficaram algumas coisas por fazer, que, na minha opinião, trariam bastante valor ao projecto. Seria importante poder adicionar o mesmo ponto de interesse ao roteiro mais do que uma vez, porque no caso de um hotel ou restaurante, será um ponto pelo qual passaremos várias vezes ao longo de um fim-de-semana. Também era muito importante ter um mecanismo de interacção com redes sociais para partilhar roteiros e até criar um ranking para os melhores roteiros em determinados pontos do país, para além de existir uma forma de exportar facilmente o roteiro para ser possível imprimir. Um ponto com o qual fiquei bastante satisfeitos foi o mapa em SVG/Raphaël.js que está na página inicial do projecto. Começámos com uma versão em Flash, mas rapidamente mudámos para esta solução, que é muito melhor.

Submetemos o site para aprovação do júri do passatempo com convicção que tínhamos feito um bom trabalho. Foi necessário aguardar até Novembro para sabermos os resultados: o nosso projecto ficou em 1º lugar, com direito a um portátil Sony Vaio e um estágio remunerado no Sapo para cada um dos elementos. Fiquei mesmo muito orgulhoso, tanto da nossa ideia como da nossa implementação. A implementação ainda tem algumas arestas que precisam de ser limadas, para não falar no esventramento completo da biblioteca de Javascript usada na página do Sapo Mapas (temos desculpa, estávamos a aprender ), mas acho o projecto bastante interessante e com potencial para estimular o turismo dentro de Portugal.

Se quiserem dar uma vista de olhos na implementação, está disponível no seguinte link: http://maps.miguelduarte.org

Para além de agradecer à equipa (Carlos Lima e Patrícia Mateus) pelo empenho, queria agradecer ao Sapo pela oportunidade e ao nosso “consultor” de Javascript e UX, o Luís Nabais

Mais um ano, mais um Codebits. Na minha estreia do ano passado fiquei viciado neste evento organizado a pensar na comunidade tecnológica (vulgos geeks). Aqui juntam-se centenas de participantes para 3 dias de programação, concursos, talks e convívio. As minhas expectativas estavam bastante altas, mas alegro-me em dizer que foram superadas.

Ao chegar ao Pavilhão Atlântico, fomos brindados com um welcome pack cheio de goodies. Fiquei surpreendido ao encontrar, entre eles, uma Yubikey! Para além disso, haviam alguns componentes de arduino, uma mala muito discreta e prática, um voucher para um e-book da O’Reilly, um sigg, uma t-shirt, and on, and on, and on… Após descermos as escadas começamos a ver a luminescência verde, a cortina de fumo com o logo do Sapo, os palcos, os puffs, as mesas… Ao entrar no Codebits, entramos noutro mundo.

O dia começou com as habituais keynotes. O Celso Martinho e o Zeinal Bava deram-nos as boas vindas com discursos particularmente interessantes. Ver o CEO da PT a dirigir-se de maneira impecável para aquele público alvo tão específico, falando sobre a sua carreira e sobre as escolhas que tomou ao longo da mesma, foi algo que não estava à espera. Esperava ouvir propaganda empresarial, mas saí de lá com uma lição de vida. CEOs out there, take notes! É assim que se cativa quem está a ouvir.

Após o almoço começámos a dar os primeiros toques no projecto. Depois de ter usado uma guitarra do Guitar Hero para tocar músicas reais na edição passada, este ano mantivémos o tema musical. A ideia era utilizar o Kinect da Microsoft para criar uma bateria virtual, sem nunca termos programado a sério em C#, XNA ou com o Kinect. Tinhamos cerca de 48h para aprender tudo e ter um produto acabado. Ficámos na mesma mesa que pessoal porreiro de Mafra, que também tinham um projecto relacionado com o Kinect e nos deram alguma ajuda preciosa.

Entre os primeiros stresses com o Visual Studio e algumas falhas de energia na nossa mesa, eu e o Carlos Lima decidimos ajudar o Luís Nabais na sua quest de sair do Codebits com um puff. Para isso, desenhámos um QR-code à mão em ponto grande no white board da nossa mesa. Foi engraçado ver muita gente a aproximar-se com o telemóvel para descodificar o QR-code e ir parar à página do Luís, onde ele fazia um choradinho por um puff. Até o Celso Martinho passou por lá para ver do que se tratava! Também achámos piada que a zona da PT Inovação também apareceu com uns QR-codes desenhados à mão, posteriormente.

Mais uma vez assisti ao Presentation Karaoke, onde um grupo de participantes tem que pegar em apresentações completamente disparatadas e inesperadas e apresentá-las como se as tivessem feito. Desde zombies, gatinhos e assassinos em série, viu-se de tudo. Deu para mandar umas belas gargalhadas em algumas das apresentações.

Depois de uma noite bem dormida em casa, voltámos ao ataque no nosso projecto. Estava tão focado em avançar que não fui ver nenhuma talk. Na próxima edição do Codebits não volto a cometer este erro. Apesar de todas serem gravadas e estarem disponíveis online, estar lá ao vivo é bastante melhor.

Pela segunda vez participei no “The Amazing Quiz Show”. É o “Quem Quer Ser Milionário” para informáticos, com perguntas do género “qual é o código hexadecimal da cor fuschia” ou “qual é o significado do código HTTP 305″. Estávamos na liderança até à última pergunta da nossa eliminatória, quando fomos ultrapassados numa pergunta sobre o jogo Second Life (#fail). Tivemos também a oportunidade de ver o episódio piloto da série “Capitão Falcão”, que é a coisa mais awesome que eu alguma vez vi na minha vida. Em principio irá estrear em televisão em breve.

A segunda noite já foi passada no recinto, tendo ficado com a equipa a programar até as 5h. Nessa altura já estávamos de rastos e fomos descansar 2 ou 3 horas para aguentar o último dia. Utilizámos a manhã para finalizar os preparativos e a aplicação ficou pronta quando faltavam apenas 2 horas para o início da sessão de apresentação. Devido ao alto risco de apresentarmos uma demonstração ao vivo, gravámos um vídeo que acabou por ser útil: a aplicação “explodiu” quando estávamos em cima do palco… O resultado final teve muito menos impacto do que o que pretendíamos, e o nosso projecto acabou por passar bastante despercebido. Mesmo que tivéssemos conseguido fazer a demonstração, não sei se teríamos hipótese de estar entre os finalistas. Haviam muitos projectos interessantes e cujas apresentações arrebataram o público.

Apesar de não termos pontuado, saí satisfeito do evento. Aprendemos tecnologias novas e convivemos com pessoal fixe num ambiente totalmente geek. O Codebits é um local onde se junta muito talento, e de forma a estarmos entre os melhores é necessário uma ideia, uma execução, e uma apresentação brilhantes. Agora temos um ano para pensar numa ideia para voltar à corrida aos prémios.

Queria agradecer ao Carlos Lima, à Teresa Futscher e ao Luís Teófilo por se terem dedicado ao projecto. Graças a vocês ficámos com uma aplicação terminada em 48h e aprendemos a lidar com tecnologias muito porreiras. Também queria agradecer ao Professor Miguel Dias e à ADETTI-IUL por nos terem cedido um Kinect. Sem ele não teríamos podido executar a nossa visão.

Até Novembro de 2012, Codebits!

Reparei há uns meses que não andava a despender tempo nenhum com literatura. Sempre gostei de ler, mas com a excepção de alguns livros técnicos no início da faculdade, costumava optar por obras relativamente light. Estava na altura de tomar a iniciativa e ver se aprendia uma coisinha ou duas. Infelizmente entre o trabalho e a faculdade não sobra muito tempo, pelo que me desafiei a ler (apenas) quatro livros durante este ano. Aqui ficam os escolhidos:

The Pragmatic Programmer – From Journeyman to Master

Andrew Hunt e David Thomas

O “The Pragmatic Programmer” foi recomendado por uma miríade de programadores no Stack Overflow, e foi por essa razão que o escolhi. Apesar de já ter alguns anos, aborda os principais assuntos relacionados com o desenvolvimento de código e manteve-se surpreendentemente actual. Está dividido em pequenas tranches, cada uma abordando uma boa prática de programação. Foi um dos melhores livros que já tive o prazer de ler, e tenho a certeza que o irei reler muitas mais vezes. Os bons conselhos são tantos que é difícil interiorizar toda a informação apenas numa passagem. É um livro para redescobrir, mudar hábitos, e recomendar a todos os que tenham uma paixão pela arte de programar e queiram passar de prosa a poesia com o código que escrevem.

Evolutionary Robotics – The Biology, Intelligence, and Technology of Self-Organizing Machines

Stefano Nolfi e Dario Floreano

Este livro apresenta uma análise em profundidade do trabalho mais relevante na área da Robótica Evolucionária até à data de publicação (2000). Também dá uma excelente visão geral dos processos envolvidos no desenvolvimento de metodologias evolucionárias, particularmente as que utilizam robótica ou simulação de agentes. A abordagem de auto-organização do comportamento tem várias vantagens relativamente às tradicionais soluções codificadas “à mão”, vantagens essas que são exploradas nos primeiros capítulos.

Na minha opinião, este livro é uma óptima introdução a este enorme mundo, com muitos exemplos de como desenhar e realizar experiências. Fiquei surpreendido com a quantidade de possibilidades que podem ser exploradas e investigadas, desde arquitecturas reactivas, a co-evolução, aprendizagem durante a vida, e mudanças de morfologia. Este livro é uma referência e recomendo a quem tenha interesse na área de Aprendizagem Automática e Robótica.

Code Complete: A Practical Handbook of Software Construction

Steve McConnell

Mais um livro que descobri através das recomendações do Stack Overflow. Na realidade, é mais uma bíblia que um livro, com quase 1000 páginas. Não posso falar muito sobre este visto que é o que está a ficar para o fim, por ser tão intimidante.  Aqui fica uma quote do Joel Spolsky: “The encyclopedia of good programming practice, Code Complete focuses on individual craftsmanship — all the things that add up to what we instinctively call “writing clean code.” This is the kind of book that has 50 pages just talking about code layout and whitespace“. Para quem conhece os meus hábitos de programação e já “sofreu” com isso (sou extremamente picuinhas) dirá que é um livro adequado a mim

97 Things Every Software Architect Should Know

Rebecca Parsonns

Este livro foi parte do espólio do Codebits 2010. Contém uma compilação de conselhos de muitos arquitectos de software sobre os mais variados tópicos relacionados com esta profissão. É relativamente pequeno, quando comparado com qualquer um dos outros. Ainda por cima cada secção tem 2 páginas e inclui uma pequena biografia de cada autor, pelo que se torna numa leitura bastante leve que pode ser feita aos poucos. Mesmo que só tenhamos 5 minutos para ler, dá para avançar sem ficar com capítulos a meio. Este livro está disponível online gratuitamente aqui. Se quiserem ver uma ou duas secções, posso recomendar (até onde li) a Stand Up! e a Don’t put your resume ahead of the requirements.

Se tiverem que escolher apenas um livro de programação, certifiquem-se que esse livro é o “The Pragmatic Programmer”. Caso queiram ver mais livros interessantes deixo aqui o link para a pergunta no Stack Overflow com dezenas de recomendações. Recomendo também o Good Reads para gerirem os vossos livros e a vossa wishlist.

Suponho que uma grande maioria dos programadores já tiveram que fazer scraping a um website. Eu, pelo menos, já o tive que fazer várias vezes. Recentemente tive que exportar imagens e informação de um catálogo online e escolhi o PHP para o fazer. Uma das primeiras tentações é tentar extrair informação com substrings e outros hacks “fáceis”.

Quando começamos a ver a loucura que é utilizar abordagem, tentamos tirar partido da estrutura do DOM com bibliotecas que façam o parse de uma forma mais estruturada. Mesmo assim, a tarefa pode ser bastante desafiante e estas bibliotecas por vezes introduzem obstáculos que são difíceis de ultrapassar. Ao tentar resolver este problema, deparei-me com o phpQuery. A grande vantagem de usar esta biblioteca é que podemos aplicar os nossos conhecimentos de jQuery, visto que a sintaxe é idêntica.

Deixo aqui um exemplo que extrai o preço, ID, link e imagem dos templates no site TemplateMonster. O texto é exportado em CSV para o ecrã do browser. A parte de extrair as imagens apenas funciona para os templates de PrestaShop. Disclaimer: não sou grande “espingarda” a trabalhar com jQuery, por isso se tiverem alguma dica para tornar as queries mais bonitas, digam

require('phpQuery.php');
$type = 43;
$domain = 'http://www.templatemonster.com';
$url = $domain."/prestashop-themes.php?type={$type}&from=";
$pageNumber = 0;
$templateNumber = 0;
do
{
   $pageNumber++;
   phpQuery::newDocumentFileHTML($url.$pageNumber,null);

   $validPage = pq('.thumbnail_wrapper')->html();

   if($validPage)
   {
      $templates = pq('.preview_box td:not(.nav)');

      foreach($templates as $t)
      {
         $templateNumber++;

         if(trim(pq($t)->html()))
         {

            $imageSmall = pq($t)->find('.thumbnail_wrapper img')->attr('src');
            $demoLink = $domain.pq($t)->find('.picture_menu a:nth-child(1)')->attr('href');
            $productLink = $domain.pq($t)->find('.picture_menu a:nth-child(2)')->attr('href');
            $price = pq($t)->find('.price-l span:eq(1)');

            $price = trim(str_replace('$','',$price));

            $imageBig = str_replace('m.jpg','prestashop-b.jpg',$imageSmall);

            preg_match('/([\d]+)/', $productLink, $match);
            $productId = $match[0];

            echo $templateNumber.';'.$productId.';'.$productLink.';'.$price.'< br/ >';

            $imageFile = "img/{$fileNumber}.jpg";

            if(!file_exists($imageFile))
               file_put_contents($imageFile, file_get_contents($imageBig));
         }
      }
   }
}while($validPage);