Sobrevivendo ao HackinPoa 2015

Ou como programar 24 horas e continuar vivo.

Nos dias 11 e 12 de Abril de 2015, participei de um hack-a-ton em Porto Alegre, RS. O evento, chamado de Hack In POA 2015, foi organizado para celebrar a o novo escritório da Globo.com aqui na capital gaúcha.

Dois dias de desenvolvimento e diversão.
O Hack in PoA comemora a vinda da globo.com para Porto Alegre, e é uma forma de agradecer à cidade pela ótima recepção.

O evento permitira o desenvolvimento de novos aplicativos, divididos em três categorias: aplicações web, aplicações para celular e aplicações voltadas para cidadânia. Ao final do evento, as aplicações seriam apresentadas por cada equipe e avaliadas por um comitê. Como prêmio, cada equipe vencedora em cada categoria ganharia um MotoX e a melhor aplicação geral ganharia um iPhone 6.

O evento teve ampla cobertura do portal TechTudo e pelo twitter utilizando a hashtag #hackinpoa. Nesse artigo, tentarei exibir meu ponto de vista em relação ao evento e ao processo inteiro das (mais de) 24 horas que participamos desse hackaton.


Inscrição

O processo de inscrição para participação no evento foi bem simples: após entrar no site do evento, era necessário marcar o interesse em participar do evento e conectar alguma conta social (face, twitter, github). De acordo com o que foi divulgado pela organização, mais de 900 pessoas realizaram a inscrição para participar do evento. Infelizmente, devido a limitações físicas e técnicas, apenas 150 foram selecionadas para participar.

Após selecionado, você recebia um e-mail solicitando para confirmar a inscrição no evento. Na semana do evento, fui contatado por telefone, mais uma vez, para confirmar se realmente estaria presente. E ser informado do local e dos procedimentos permitidos.

Pré-Evento

Foi disponibilizado um sistema para que os projetos pudessem ser pré-cadastrados e para que as pessoas pudessem escolher se gostariam de se juntar a algum projeto.

Viagem

Como minhas atividades não estão baseadas em Porto Alegre, necessitei viajar de Santa Maria até lá. Optei por ir de ônibus pela comodidade. Meu ônibus saiu as 01:00 (da madrugada) de Santa Maria e chegou em Porto Alegre as 05:00 (da manhã). Optei por desembarcar no Aeroporto, visto que o evento seria realizado na FIERGS, e o transporte entre a Rodoviária e a FIERGS seria bem caro.

Desde que comprei meu Chromebook no final de 2013, só tenho utilizado ele. É rápido, leve, e a bateria dura quase 10 horas. Aproveitei que estaria no Aeroporto e participei do Google CodeJam (e fiz uma burrada bem grande…) antes de ir pro Hack in POA.

Credenciamento

Cheguei no Teatro da FIERGS por volta das 07h45 e logo fui para a área do evento. Ao chegar, me deparo com alguns puffs e sofás e vários devs esperando a abertura dos trabalhos.

O credenciamento iniciou um pouco antes das 08:00 da manhã. Ao realizar o credenciamento, ganhavamos uma sacolinha do evento com alguns brindes (camisa, sacolinha, bloco, caneta, ARDUINO UNO) e uma credencial de plástico (mandaram muito bem).

Hora 0

Perto das 08h30, a sala do evento foi liberada. Era um enorme salão, com cerca de 30 mesas com 7 ou 8 cadeiras cada. na parte da trás existia uma área de convivência com duas mesas longas, puffs e sofás. Na parte da frente, um palco elevado com duas telas (uma em cada lado), onde eram feitos os anúncios e apresentações.

Como não era um evento específico de Python, não reconheci muita gente. Logo tratei de me abancar em uma mesa e colocar anúncios físicos em cima dela (procurando programadores Python, Javascript e/ou Designers). Não demorou muito e consegui o primeiro seguidor. Um cara que eu ainda não conhecia, chamado Fabiano Moraes e que desenvolve em Python na região de Caxias do Sul.

Alguns minutos depois também fomos introduzidos a dois Designers, o André Schneider Albuquerque e outro que não recordo o nome completo (acho que era Alexandre). Conversamos sobre algumas idéias e ficamos conversando sobre mercado e sobre outras coisitas mas.

Pelas 10h00 foi realizada uma palestra de apresentação da Globo.com, explicando como seria realizado o evento e o que aconteceria a seguir. Foi servido um coffee-break e fomos instigados a nos conhecer uns aos outros até que o evento tivesse início.

No coffee-break reunimos mais gente e acabamos com um grupo de cerca de 9 pessoas, começamos um grande brainstorm para ver as idéias de todo mundo e decidir o que fazer. Como as equipes eram limitadas as 3 ou 4 integrantes, eu, Fabiano e André optamos por seguir uma idéia do Adão Santos e trabalhar em um criador de rotas para viagens de moto. Nos separamos desse grupo e iniciamos o trabalho.

Hora 1 (10:00–11:00)

Nos organizamos rapidamente, levamos uns 30 minutos para decidir o qual seria o escopo do nosso trabalho, como faríamos ele e que ferramentas utilizariamos. Chamamos nosso projeto de MotoTrip, pois ele iria ser focado no nicho dos motociclistas.

Optamos por utilizar o Trello para gerenciar nossas tarefas e subir arquivos. Github para gerenciar nosso código e o rodaríamos a aplicação no Tsuru. Faríamos a interface usando o Bootstrap.

Eu fiquei responsável por subir o projeto, criar a equipe no Tsuru, gerenciar o repositório. O Fabiano ficou responsável pela parte de integração com o Google Maps. Adão começou a desenvolver o modelo ER da aplicação e o André começou a desenvolver o protótipo das nossas telas. Criamos nossas history cards no trello e começamos a gerenciar a coisa toda por lá.

Hora 2 (11:00–12:00)

Tinha criado um boilerplate do Django 1.8 para subir a aplicação o mais rápido possível, já que (em teoria), tudo deveria ter sido desenvolvido durante o evento. Como escolhemos usar o Bootstrap e meu boilerplate estava configurado para o MaterializeCSS, tive que fazer um esqueleto novo e acertar os arquivos.

Decidimos por permitir o login social com Facebook, Google e Twitter. Como eu tinha trabalhado recentemente com isso (no WazLog), decidi utilizar a biblioteca django-allauth. Pouco sabia eu que essa lib não está ok com o Django 1.8. Tivemos que regredir algumas coisas e voltamos a usar o 1.7.

https://twitter.com/danilomoura/status/586902493243768833

Alguns testes e alguns minutos depois, tudo já estava rodando.

Hora 3 (12:00–13:00)

Comecei a criar as aplicações e chaves nos serviços de login que a gente iria utilizar e dei uns tapas nas views de criação. Corrigi uns problemas de deploys no tsuru e criei um fixture de dados iniciais para serem carregados e facilitar os testes da aplicação.

O Adão e o André continuavam trabalhando nas telas e definindo o fluxo de funcionamento do aplicativo. Definimos a logotipo e as cores. Enquanto isso o Fabiano continuava testando a API do Google Maps.

O André bolou nossa logo e a página inicial

Hora 4 (13:00–14:00)

Depois de algumas horas pensando, fomos agraciados com um rico buffet. Falo rico tanto na quantidade de pratos, como na qualidade. Comida preparada por cheffs, coisa de primeiro mundo. Me lembrou bastante os almoços da DjangoCon US do ano passado. A sobremesa também estava fantástica.

Perdi cerca de 30 minutos almoçando, mas como estava com algumas idéias na cabeça, voltei para a sala do evento, e o André Augusto registrou essa foto minha:

Esse tempo de pausa para almoçar foi bem produtivo. Consegui por a cabeça no lugar e conhecer um pouco mais sobre os membros da equipe (afinal, não falaríamos sobre trabalho na hora do almoço).

Hora 5 (14:00–15:00)

O Adão terminou o diagrama ER da aplicação e o André estava com a maior parte das telas já prontas.

Aproveitei para dar uma mão na instalação e configuração do ambiente na máquina do Adão, já que ele não era programador Python. Questão de 15 minutinhos e já estavamos com tudo rodando e ele começou a codificar as telas em um ambiente igual ao meu e ao do Fabiano.

Hora 6 (15:00–16:00)

Com toda a estrutura do projeto funcionando (deploy, testes, fixture), telas de login e cadastro social funcionando, comecei a trabalhar nas outras apps. Perfil do usuário e Grupos.

Hora 7 (16:00–17:00)

Continuei trabalhando nas telas de perfil e grupos. Os primeiros trejeitos de como traçar rotas no Maps começam a ser feitos.

Hora 8 (17:00–18:00)

Comecei a trabalhar na página de cadastro de perfil do usuário. Elencamos os campos que seriam úteis em um eventual trabalho. O André montou um mockup de como seria a tela de cadastro.

Projeto da Tela de Perfil do Usuário do MotoTrip.

Tivemos também um coffee-break. Sempre bem servido, com direito a pães de queijo quentinhos e bebida liberada. Cada vez mais os breaks são úteis para começar a pensar reto.

Hora 9 (18:00–19:00)

Ganhei essa hora escrevendo testes pra parte de gerenciamento de grupos. Embora tenhamos optado por reduzir essas funcionalidades no final e dar mais foco ao traçamento da rota, os testes ajudaram bastante a manter todo o projeto funcionando.

Hora 10 (19:00–20:00)

Comecei a adicionar as primeiras views dos grupos. Funções básicas como buscar grupos, adicionar e remover membros. Listar seus próprios grupos.

Hora 11 (20:00–21:00)

Retomei os trabalhos na página de perfil do usuário.

Hora 12 (21:00–22:00)

Encerrei o trabalho nos grupos e voltei pro perfil de usuário. Agora as telas estavam cruas, mas a funcionalidade e os testes já estavam prontos.

Foi servido um jantar, que consumiu uns 30 minutos do meu tempo. A organização optou por servir Subway pra todo mundo. Confesso que não sou muito fã de salada, mas o sanduíche estava gostoso. Também serviram alguns salgadinhos quentes. Tudo muito bom.

Hora 13 (22:00–23:00)

Essa foi uma das horas menos produtivas. Aproveitei pra fazer um code review e quebrar um pouco a build do projeto.

Uma maratona de programação não envolve sempre escolhas sadias (a nível de código). Optamos por trabalhar com um technical debt, ou seja, sabíamos que algumas decisões seriam bem ruins, mas o tempo nos obrigava a isso.

Aqui um dos momentos mais tristes do evento. Começou a tocar uma música de academia, e ficou tocando por uns 20 minutos. Quase deu vontade de dormir.

Felizmente a organização foi rápida e bolou o #musichackinpoa. Era só mandar um tweet com essa tag e o DJ do evento procurava e colocava a música pra tocar. Isso alegrou a madrugada do pessoal.

Hora 14 (23:00–00:00)

Decidi terminar a página de perfil do usuário, escrevi os testes e eles começaram a falhar. Ohava o código, olhava os testes e não compreendia como eles falhavam.

Perdi uns belos 15 minutos vendo que eu tinha criado um ExtraUserCreationForm mas na view eu estava chamado só o UserCreationForm. Foi provavelmente um dos momentos onde eu me senti estúpido… Pelo menos os testes automatizados estavam funcionando.

Como as coisas não estavam andando na programação, decidi fazer um esforço junto com o Adão e dar uma mão na codificação das telas. Com a ajuda dele, migramos muita coisa para a maneira como as telas iam ser apresentadas.

Hora 15 (00:00–01:00)

Continuei trabalhando na estrutura dos formulários com o Adão e com o Fabiano. Começamos a usar um módulo chamado django-widget-tweaks.

A documentação era bem ruim, e ele não ajudou tanto quanto prometia. Algumas decisões ruins foram tomadas nesse horário.

Hora 16 (01:00–02:00)

Refatorei os grupos. Decidimos remover várias funcionalidades que não agregariam muito ao nosso MVP. Reduzimos bastante o escopo para entregar algo o mais funcional possível.

Começamos a trabalhar na página da apresentação do nosso projeto.

Hora 17 (02:00–03:00)

Provavelmente meu horário menos produtivo. O gás estava meio que acabando. Foi legal porque a organização colocou Monty Python para tocar no telão, o que acabou sendo bem divertido.

Também rolou uma surpresa em muito boa hora. Latas e mais latas de energético (RedBull!!).

Hora 18 (03:00–04:00)

Voltei a programar e fiquei escovando uns bits de CSS enquanto o Adão dormia e o Fabiano conseguia fazer as rotas funcionarem.

Nos prometeram Pizza, mas nos entregaram minipizza ☹. Mesmo assim estava muito boa. E serviu muito bem. Além das minipizzas, rolou um milkshake supremo de ovomaltine. #gordo #gordofeelings #debarrigacheia

Hora 19 (04:00–05:00)

Comecei a fazer o trabalho pesado junto com o Fabiano. Ele pediu pra mim dar uma mão pra ele na tela de cadastro de roteiros, enquanto ele resolvia uns bugs de Javascript. Isso consumiu praticamente toda aquela hora (embora revendo os commits, tudo pareça ser relativamente simples).

Hora 20 (05:00–06:00)

O Fabiano foi dormir, e o Adão ocasionalmente acordava. Aproveitei para criar um novo initial data e não termos que ficar fazendo os testes de interface a mão.

Hora 21 (06:00–07:00)

Decidi ficar acordado e ir escovando CSS onde possível. Removi várias referências a funcionalidades que ficaram fora do nosso MVP. Aproveitei para normalizar as expressões e o visual das páginas internas.

Hora 22 (07:00–08:00)

Pessoal começou a acordar. Começamos a ver que tudo estava ficando redondinho. Demos o último grande gás.

Fabiano terminou a parte de plotagem dos waypoints no mapa e salvar eles no banco. Eu comecei a trabalhar na parte de visualização das rotas.

Hora 23 (08:00–09:00)

Terminei a parte de visualização das rotas e começamos a planejar a versão final do nosso aplicativo. Removemos todas as menções a locais não implementados e polimos a maior parte das telas.

O Adão arrumou alguns bugs na página principal e fez vários ajustes no CSS das páginas internas.

Hora 24 (09:00–10:00)

Como já estavamos esgotados, decidimos finalizar tudo nessa hora. Nosso MVP contemplava as principais partes da nossa proposta. Se tivesse que estimar, acho que conseguimos completar 90% da aplicação.

Encerramos as novas funcionalidades, subimos a versão final para o Tsuru. Aproveitamos que foi servido um café da manhã e utilizamos o resto do tempo para socializar.

Hora 25 (10:00–11:00)

Embora a competição encerrasse oficialmente as 11 horas, não fizemos nada durante essa última hora. Aproveitamos que o café continuava servido e discutimos como seria a apresentação, vimos os pontos negativos e positivos e revisamos toda a experiência.

Apresentação

Todos os projetos seriam apresentados. Cada projeto teria 5 minutos para ser demonstrado e explicado. A apresentação começou com dois projetos desenvolvidos pelo pessoal da Globo.com durante a madrugada. A cobertura das apresentações foi realizada ao vivo pelo portal TechTudo.

O primeiro projeto era um sistema de votação chamado thumbs-down e o segundo era o Top, que percorria os repositórios das equipes participantes e gerava o número de commits de cada equipe. Confesso que foi divertidíssimo conferir a corrida na madrugada, e minha equipe commitou muito. Ficamos em segundo, mas não commitavamos qualquer espaço em branco (#ciumes).

Depois disso foram apresentados os 10 projetos Web. Os projetos foram apresentados em ordem alfabética. Fomos a 6a equipe a apresentar. Gostamos muito do que fizemos. Recebemos um feedback muito positivo em relação a aplicação e várias menções no twitter falando sobre o aplicativo.

Almoço

Ao final das apresentações da categoria Web, a organização serviu um almoço. Dessa vez os participantes podiam escolher entre uns sanduíches do sub (e com novidade! sem salada!) ou uma massa ao molho de queijo. Naturalmente escolhi as duas.

O almoço durou uns 30 minutos, mas o pessoal já estava bem agitado esperando a continuação das apresentações.

Continuação das Apresentações

Foram apresentados mais 9 projetos da categoria Mobile e 9 projetos da categoria Cidadania. Após a apresentação dos projetos, as bancas de avaliação dessas categorias se formaram e retornaram para informar o resultado cerca de 30 minutos depois.

Infelizmente o MotoTrip não foi o ganhador em nenhuma categoria. O aplicativo Ta Novinho ganhou na categoria Web, o Bota na Conta foi vencedor na categoria Mobile, o Spread Blood na categoria Cidadania. O prêmio principal ficou para um aplicativo mobile de notícias chamado EuRepórter.

Confesso que fiquei #chatiado por não ter levado nada para casa (além do arduíno, da camisa, sacolinha, 10kg, sono, caneta), mas a competição foi de extrema qualidade.

Pós-Evento

Após a premiação foi servido um coquetel, regado a DadoBier e socialização com a equipe da Globo.com. Infelizmente não pude ficar muito, já que tinha uma longa jornada de volta pra casa.

Foto da Equipe MotoTrip depois do final do evento. Adão, André, Fabiano e Henrique.