Um hackathon é geralmente um período breve e intenso de desenvolvimento conjunto, em geral em torno de uma causa ou tópico em particular. A ideia é fazer algo rapidamente e, é claro, fazer algo que impressione totalmente os juízes. Devido ao período curto, pode ser difícil desenvolver recursos básicos, como autenticação por Facebook ou envio de emails ou mensagens de texto, e ainda progredir na direção do objetivo principal.

“O DevOps Services da IBM fornece o ambiente de desenvolvimento colaborativo na web e o pipeline de entrega contínua, enquanto o IBM Bluemix fornece a hospedagem de nuvem necessária para executá-la, o que faz desse o par perfeito para o sucesso em hackathons”

O Hackathon Starter Project, de Sahat Yalkabov, et. al., hospedado no GitHub, fornece uma ótima coleção de recursos para usar como base das atividades de hackathon. O DevOps Services fornece o ambiente de desenvolvimento colaborativo na web e o pipeline de entrega contínua, enquanto o IBM Bluemix fornece a hospedagem de nuvem necessária para executá-la, o que faz desse o par perfeito para o sucesso em hackathons. Eu explico como implementar sua própria cópia do Hackathon Starter com uma versão nova da fonte, usando DevOps Services, e implementar automaticamente após cada mudança no BluemixPaaS.

Execute o Aplicativo

Obtenha o código

O Hackathon Starter fornece o padrão de aplicativo da web Node.js usando a estrutura Express e o banco de dados NoSQL MongoDB. Ele contém vários tipos de autenticação, incluindo autenticação local (os usuários configuram suas próprias credenciais) e autenticação OAuth usando Twitter, Facebook, Google, LinkedIn e outros. A UI padrão usa Bootstrap 3 e responde razoavelmente bem a vários tamanhos de tela. Há um formulário de contato com suporte por email, recursos gerais de gerenciamento de conta do usuário (incluindo suporte para perda de senha) e proteção contra cross-site request forgery (CSRF). Também há exemplos de API para diversos websites populares, incluindo Facebook, Foursquare, Tumbler, Twitter, Stripe e outros.

O README.md do Hackathon Starter no GitHub é detalhado e bem escrito. Ele inclui instruções para obter suas próprias chaves de API para vários serviços diferentes, boa documentação de alto nível sobre a estrutura de projeto e detalhes sobre a realização de certas ações necessárias para o sucesso do hackathon, como a inclusão de uma nova página ou rota. Também contém uma lista de referências sugeridas e uma enorme quantidade de código funcional, sendo, por isso, uma excelente ferramenta de aprendizado e referência, mesmo para quem não planeja participar de um hackathon. Sahat trabalhou para manter o projeto simples e fácil de entender, mas ainda aceitou as contribuições de mais de 30 pessoas.

O que será necessário para agilizar sua atividade em hackathons

Para começar:

• Um ID IBM registrado em DevOps Services e Bluemix (inscreva-se para o beta). Se você não tem um ID IBM, pode criar um em um desses sites.
• Um cliente Git. Eu uso a linha de comando neste artigo.
• Um arquivo zip do Hackathon Starter Project. Há um botão para fazer download do arquivo da fonte na parte superior do README.md na página do GitHub. Por que não um clone do Hackathon Starter? Porque queremos que sua cópia de DevOps Services seja a principal, e é mais simples criarmos nosso repositório lá e colocar o código do Hackathon Starter. Também é uma oportunidade de fazer algumas alterações necessárias antecipadamente.
• Um entendimento básico sobre JavaScript, Node.js, MongoDB, Express , Jade e Git são úteis, mas usaremos o código de outra pessoa como ponto de partida para as etapas neste artigo, por isso não são necessários.

Embora seja possível simplesmente bifurcar a cópia que eu configurei em DevOps Services para funcionar com este artigo como ponto de partida, isso daria a você apenas a versão 2.1. Para usar o mais recente, é necessário configurar sua própria cópia, e eu explicarei como fazer isso. Já fiz isso de maneiras diferentes, e apresento aqui aquela que penso ser o melhor ponto de partida com menos e mais simples etapas: um projeto DevOps Services que é implementado automaticamente no Bluemix sempre que um dos colegas envia uma alteração ao repositório de código-fonte.

Seis etapas para se preparar para hackathons

Aqui está uma visão geral das etapas:

1. Faça um projeto para o código do Hackathon Starter. Configure para usar Git para o código-fonte e selecione a opção “Deploy to Bluemix” ao enviar alterações. Isso fornece uma URL do Git para o repositório principal, para usar para enviar mudanças locais.
2. Use clone do Git para criar uma cópia local do projeto. Coloque a fonte do Hackathon Starter.
3. Acesse o Bluemix para criar um serviço MongoDB para usar em nosso armazenamento de dados.
4. Edite um arquivo, secrets.js, para recuperar a URL de banco de dados do serviço MongoDB do Bluemix e incluir um arquivo manifest.yml, que é necessário para a implementação automática.
5. Envie as alterações para a nuvem e veja a mágica acontecer.
6. Faça algumas pequenas alterações na nuvem, sincronize e envie para demonstrar a implementação automática.

Seis fáceis etapas para o sucesso na nuvem, para agilizar sua atividade em hackathons. Vamos lá!

Etapa 1. Faça um projeto DevOps Services

1. Acesse o DevOps Services, efetue login e clique em Create Project. No exemplo abaixo eu usei o nome hackathon-starter—use qualquer nome que seja adequado ao seu projeto.

2. Configure o projeto para usar um repositório Git para conter o código. Você irá armazenar dados de chaves API que pessoas que não são da equipe não devem ver, portanto, configure como Private.

3. Inclua recursos para desenvolvimento de scrum. Não usaremos isso neste artigo, mas é bom poder rastrear tarefas e defeitos ao trabalhar no projeto.

4. Selecione Deploy to Bluemix para configurar a implementação automática, que iremos configurar mais tarde.

5. Após criar o projeto, você deve convidar os demais membros. É possível fazer isso depois, mas apenas membros do projeto podem ver o código-fonte e trabalhar com ele. Todos os membros de projeto precisam de IDs IBM e precisam estar registrados em Bluemix e DevOps Services.

Etapa 2. Configure o código

1. Na página do projeto de abertura, localize a URL do projeto no Git:

2. Localize um diretório apropriado na máquina local no qual clonará o projeto. O clone do Git cria um subdiretório com o nome que você usou anteriormente para o projeto. Faça dele o diretório atualmente em funcionamento.

Isso recupera os dois arquivos criados por padrão quando o projeto foi criado no DevOps Services. Ele também configura o local como o ponto remoto para o qual enviaremos alterações.

3. Extraia no novo diretório o conteúdo do arquivo ZIP do Hackathon Starter que você transferiu por download anteriormente. Deve surgir um conflito no arquivo README.md. Mantenha o arquivo do DevOps Services. Ele é menor, e você provavelmente precisará do seu próprio arquivo para o projeto. Se não surgiu um conflito, você não extraiu no local correto. Nesse caso, exclua o arquivo extraído e use o local correto, do contrário a nova fonte não fará parte do novo repositório Git, ou o diretório de nível superior será diferente daquele usado nos exemplos abaixo, o que criaria conflito com estas etapas.

Etapa 3. Crie um serviço MongoDB no Bluemix

O Hackathon Starter depende do MongoDB para armazenamento de banco de dados. Quando fizermos as correções de código que precisam ser executadas no Bluemix, precisaremos do nome do serviço MongoDB para a implementação. O serviço precisa existir de qualquer forma, então vamos fazer isso agora.

Visite sua conta Bluemix, efetue login e, em seguida, acesse Catalog e role para baixo até a seção Data Management para ver os serviços. Escolha a opção de criar um serviço MongoDB. É possível usar o nome padrão ou inventar um. Anote o nome, pois precisaremos dele na próxima etapa. Não o associe a aplicativos que já existem. O arquivo manifest.yml criará a associação quando implementarmos.

Etapa 4. Faça algumas pequenas alterações

Primeiro faremos as alterações no código para conectar ao serviço MongoDB. Durante a implementação, o aplicativo é associado ao serviço. Informações sobre a conexão são criadas nesse momento e armazenadas como parte da configuração do aplicativo. Como estão disponíveis no ambiente do tempo de execução, podemos interrogá-las e extrair o valor da URL das credenciais para criar a conexão ao banco de dados. Eu incluí o código para isso abaixo e mostro onde inseri-lo. Se quiser saber como isso funciona, leia sobre a variável de ambiente VCAP_SERVICES nas perguntas mais frequentes sobre Bluemix.

Se olhar o código que você descompactou, verá que as informações de conexão do banco de dados são provenientes de /config/secrets.js. Ele está configurado para verificar se há uma variável de ambiente geral, ou se é possível usar a referência padrão localhost.

db: process.env.MONGODB|| 'mongodb://localhost:27017/test',

Antes, iremos incluir o código para verificar se existe uma entrada Bluemix configurada. Ele retorna nulo se não houver, de modo que o código existente ainda funcione para o caso de haver membros da equipe trabalhando localmente. A diff é assim:

Aqui está a função nova para você copiar e colar:

//fixup to retrieve MongDb creds from BlueMix if configured
var getBlueMixDbUrl = function() {
 var dbUrl = "";
 if (process.env.VCAP_SERVICES) {
 var env = JSON.parse(process.env.VCAP_SERVICES);
 if (env['mongodb-2.2']) {
 dbUrl = env['mongodb-2.2'][0].credentials.url; 
 }
 }
 if (dbUrl === "") return null;
 else return dbUrl;
};

Não se esqueça de incluir a verificação de getBlueMixDbUrl() || antes da expressão na linha db:. Salve isso.

Inclua um novo arquivo chamado manifest.yml no diretório-raiz do projeto. Coloque o código a seguir nele, substituindo os nomes conforme necessário. Por exemplo, meu projeto chama-se “hackathon-starter”, por isso preciso usar outro nome, ao menos para o atributo de host. O atributo de host é usado para criar a rota/URL do aplicativo: http://hackathon-starter.ng.bluemix.net. Substitua hackathon-starter em ambos os lugares (name: e host: ) e o nome do serviço hackathon-starter-db com o nome do seu serviço.

applications:
- services:
  - hackathon-starter-db
  host: hackathon-starter
  disk: 1024M
  name: hackathon-starter
  command: node app.js
  path: .
  domain: ng.bluemix.net
  mem: 512M
  instances: 1

Etapa 5. Ative-o!

Acredite ou não, está quase pronto. Bastam mais algumas etapas:

1. Precisamos incluir estas alterações no repositório Git local, confirmá-las e enviá-las ao repositório em DevOps Services. Use estes comandos na janela de comando:

git add . 
git commit -m "initial commit"
git push

2. Agora retorne ao DevOps Services, solte a página Edit Code para vê-la rapidamente e, em seguida, clique em BUILD & DEPLOY.

3. Na página BUILD & DEPLOY, altere o tipo de implementação para SIMPLE. A primeira implementação será iniciada e exibida como pendente na coluna Result da tabela Recent Auto-Deployments.

4. A primeira implementação irá demorar um pouco mais, pois o npm precisa resolver as várias dependências do Node.js e fazer as versões iniciais conforme especificado no arquivo package.json. Espere um pouco e depois acesse o Bluemix e confira a página de visão geral do aplicativo. Pode-se ver que ele está em execução, e que o serviço MongoDB foi associado automaticamente através do arquivo manfiest.yml.

5. Clique no link ao lado de Routes: abaixo do nome do aplicativo. Você será levado ao novo projeto.

Etapa 6. Faça ajustes na nuvem

Parece correto! Mas é totalmente genérico. Vamos alterar o nome do projeto e substituir o cabeçalho na página HTML de abertura. E, apenas por diversão, vamos fazer isso na nuvem, usando o editor online do DevOps Services e a interface Git.

1. Volte ao DevOps Services e acesse sua página Edit Code. Abra a pasta views e clique em home.jade. Em block content, altere a linha h1 (destacada) conforme mostrado, ou com o texto que você queira. Salve.

2. Abra a pasta partials em views e clique em navigation.jade. Substitua Project name por Jumpstart with DevOps Services (linha destacada). Salve.

3. Clique no ícone “disk” à esquerda (segundo de cima para baixo) para acessar a página de status do Git. Aqui você verá as mudanças não implementadas. Selecione ambas e clique no botão STAGE.

Se quiser saber quais alterações serão feitas, clique na seta à esquerda de uma entrada para exibir um diff do arquivo:

4. Selecione os dois arquivos, clique em COMMIT, inclua um comentário e envie as alterações.

5. Embora tenhamos enviado os arquivos ao nosso repositório Git, estamos trabalhando em uma área de trabalho local quando estamos no web client. Antes de enviar as alterações, precisamos sincronizar com o repositório principal. Por isso, realize uma busca para sincronizar antes de enviar as alterações, ou ocorrerá um erro. Clique em BUILD & DEPLOY, e você verá que uma nova implementação foi iniciada automaticamente.

6. Após alguns momentos, atualize a página do navegador que está exibindo o aplicativo de início. Como uma bonificação, você perceberá que o design do aplicativo é responsivo, ocultando as opções de menu sob um botão quando a tela é diminuída significativamente.

Feliz hackeamento! Se você usar este artigo para um hackathon no Bluemix, pedimos que inclua um comentário descrevendo o projeto e um link caso queira deixá-lo.

Conclusão

O DevOps Services fornece um ambiente flexível e fácil de usar para executar projetos, seja para um hackathon ou não, permitindo trabalhar localmente ou na web e implementar automaticamente as alterações mais recentes para os usuários verem. Há muito sobre o que não falamos neste exemplo. Planejamento, rastreamento e painéis permitem que os usuários enviem solicitações de aprimoramento (ou defeitos ocasionais) facilmente, e permitem que os patrocinadores do projeto vejam o trabalho sendo feito. Há ainda mais opções flexíveis de desenvolvimento e implementação disponíveis. Quando terminar seu hackathon, volte e dê uma olhada.

Agradecimentos

Queremos agradecer a John Kellerman, Michele Chilanti, Annie Cheng e Erik Mats pela revisão técnica e sugestões.