Iniciando no OpenCode utilizando o Cloud9

O Cloud 9 é uma ferramenta que permite a você desenvolvedor iniciar um novo projeto, seja ele complexo ou simples, sem instalar nenhuma dependência em seu computador. Uma solução cloud que permite que o seu ambiente de desenvolvimento esteja sempre ao alcance, não importa onde você está ou se você esqueceu seu notebook em casa.

Tudo o que você precisa é de um navegador e uma conexão com a internet. 

Nos passos abaixo demonstraremos como iniciar um tema do zero, você perceberá como é simples e prático dar os primeiros passos na plataforma OpenCode e o quão simples é a IDE do Cloud9, além disso, no final do artigo, deixamos uma dica que agilizará bastante seu workflow.

1 - Bem vindo ao Cloud 9

Os passos abaixo demonstram como é simples a criação de uma conta e em apenas alguns cliques iniciaremos um projeto OpenCode.

Você pode criar qualquer projeto, seja ele HTML5, CSS3, JavaScript, Ruby, Python, PHP, etc...

1.1 - Criando sua conta

O primeiro passo não poderia ser mais óbvio, acesse o site do Cloud9 e siga os passos para efetuar seu cadastro:

Você pode usar sua conta no Github ou Bitbucket, se você ainda não faz controle de versão, apesar de não ser obrigatório, é algo extremamente importante e o Cloud9 facilita bastante o processo.

1.2 - Criando seu workspace

Depois de ter sua conta criada, vamos dar início ao processo de criação do primeiro workspace:

Clique em "Create a new workspace", os campos a serem preenchidos no próximo passo são simples não tem como errar:

  • Owner: Deixe como está, provavelmente aparecerá seu nome de usuário;
  • Workspace Name: Aqui você preenche com nome do seu projeto, exemplo: "primeiro-tema";
  • Description: Uma descrição do projeto, exemplo: "Iniciando na plataforma OpenCode utilizando o Cloud9";
  • Agora temos duas opções: Hosted Workspace e Remote Workspace; Utilizaremos a primeira, já que criaremos um projeto do zero;
  • Caso deseje, deixe seu projeto como público, através do Cloud9 é possível compartilhar seu código com qualquer pessoa, e essa pessoa pode te ajudar a montar seu template em tempo real, legal não?
  • Logo depois temos um campo para preenchermos com nossa URL do git, como este não é o foco do post vamos deixá-lo em branco.

E por fim, temos a opção de selecionar um template, esses templates servem para iniciarmos o projeto com alguns ambientes já pré moldados, porém, no nosso caso, utilizaremos o Template Custom.

Clique em Create Workspace e pronto, acabou, seu projeto já esta criado e você já tem um ambiente para programar da maneira que você quiser.

2 - OpenCode + Cloud 9

Tudo aqui se parece com um editor de texto comum e lembra bastante o Sublime Text.

Além de suportar várias linguagens, vários recursos de uma IDE comum estão disponíveis aqui também. Funcionalidades como auto-completar, busca por classes e refatoração estão presentes.

Uma feature muito legal que o Cloud9 oferece é a possibilidade de você compartilhar seu código com qualquer pessoa e passar a programar juntos no mesmo ambiente, em tempo real.

Nos passos a seguir instalaremos a OpenCode Console Tool (GEM) e criaremos nosso primeiro template, vamos lá?

2.1 - Instalando a OpenCode Console Tool (GEM)

Recentemente atualizamos a maneira com que a GEM é atualizada

Perceba que na parte inferior do Cloud9 existe um terminal, é através dele que faremos a instalação da ferramenta em nosso projeto.

Clique no terminal e digite o comando gem install opencode_theme ao pressionar enter, se tudo ocorrer bem, o terminal irá retornar algo parecido com a mensagem abaixo:

A OpenCode Console Tool já está instalada.

2.2 - Instalando o primeiro tema

Em nossa documentação disponibilizamos uma loja virtual para desenvolvedores testarem as funcionalidades da plataforma, você pode entrar lá e conferir mais detalhes sobre a loja e comandos porem estou disponibilizando abaixo a API KEY e o PASSWORD necessários para criar um tema na loja virtual de testes:

API_KEY: 11451c354c1f95fe60f80d7672bf184a

Password: 14ae838d9e971465af45b35803b8f0a4

Agora que você já possui a Opencode Console Tool instalada, é só utilizar o comando abaixo no terminal para criar seu primeiro tema e já sair editando:

opencode bootstrap 11451c354c1f95fe60f80d7672bf184a 14ae838d9e971465af45b35803b8f0a4 "PrimeiroTema"

Você pode substituir o nome PrimeiroTema pelo nome que desejar ou alterar as chaves para a de um lojista por exemplo. Se o comando foi digitado corretamente ao dar enter o terminal irá retornar algo parecido com a imagem abaixo:

O que acabamos de fazer aqui foi: enviar um comando passando a API KEY e o PASSWORD fornecidos anteriormente para criarmos um tema chamado PrimeiroTema, assim que o comando foi enviado, o tema foi criado e todos os arquivos foram baixados em nosso ambiente, você pode conferir a estrutura dos arquivos no canto esquerdo da tela.

2.3 - Editando os arquivos

Entre na pasta do tema utilizando o comando cd PrimeiroTema, logo após utilize o comando opencode open.

Este comando serve para abrir a URL de preview do tema, porém como estamos dentro de uma aba do navegador o comando não funciona muito bem, você deve clicar no link gerado no terminal para abri-lo, após clicar no link aperte CTRL+C ou COMMAND + C em seu teclado, caso contrário você não irá conseguir utilizar o proximo comando.

Agora utilizaremos o comando opencode watch para editarmos nossos arquivos, com este comando ativado, toda vez que modificar e salvar algum arquivo dentro da estrutura de pastas do tema o mesmo será enviado automaticamente para o servidor e você já poderá ver as atualizações em tempo real bastando atualizar a pagina. Por exemplo, com o comando watch rodando, navegue até o arquivo layouts/default.html, remova as linhas abaixo:

{% if pages.current == 'home' and banner.home %}
  <div class="banner banner-home">
   {{ banner.home }}
  </div>
{% endif %}

Você acabou de remover um banner do tema, atualize a página que foi aberta anteriormente e pronto! As alterações já foram refletidas! :)

3 - Bônus time: GULP

Você já deve ter percebido que o OpenCode possui uma estrutura inicial com CSS e JS minificados. O que você pode não ter notado é que esses arquivos são gerados automaticamente pelo GULP.

Perceba que a pasta css possui uma subpasta chamada sass, o arquivo css/theme.min.css tem sua estrutura montada com base estes arquivos .scss e o mesmo acontece para o arquivo theme.min.js

Se você ainda não conhece as ferramentas mencionadas acima é altamente recomendado que você de uma pesquisada no assunto

Nos passos abaixo irei demonstrar como incluir nosso gulpfile em seu workflow, facilitando ainda mais o processo de desenvolvimento dos temas.

3.1 - Arquivos necessários

Primeiramente você deverá fazer o upload de dois arquivos na pasta raiz do seu template do C9 (não insira estes arquivos dentro do tema OpenCode ex: PrimeiroTema), são eles:

  1. gulpfile.js - Responsável por gerenciar as tasks que serão utilizadas no tema;
  2. package.json - Responsável por adicionar as dependências do gulpfile.

Sua estrutura de pastas deve se parecer com a imagem abaixo:

3.2 - Instalando o GULP

Agora você deverá rodar o comando npm install gulp Este comando é responsável por instalar o Gulp no ambiente do Cloud9, posteriormente utilize o comando gulp -v, se a mensagem retornada no painel for parecida com a imagem abaixo, podemos continuar.

3.3 Instalando as dependências

Agora que já possuímos toda estrutura de pastas execute o comando npm install, a mensagem retornada deve se parecer com a imagem abaixo:

Perceba que foram incluídos alguns arquivos em nossa estrutura de pastas, a pasta node_modules foi criada juntamente com os módulos que o Gulp irá utilizar.

3.4 Minificando arquivos e utilizando pré-processadores CSS

Tudo pronto, agora é só colocar a mão na massa, a única coisa que precisamos fazer antes é utilizar o comando gulp em nosso terminal.

Recomendo que você trabalhe com no mínimo duas abas do terminal aberta, uma será responsável pelo comando opencode watch e a outra pelo comando gulp, dessa maneira basta salvar os arquivos para que tudo ocorra o processamento dos arquivos e upload dos mesmos.

Agora, ao realizar alterações em qualquer arquivo da pasta css/sass as alterações serão automaticamente refletidas no arquivo css/theme.min.css

O mesmo acontece para alterações realizadas no arquivo js/modules/theme.js toda alteração realizada aqui será refletida no arquivo theme.min.js

Chegamos ao fim do artigo e acredito que os passos citados acima te ajudarão a ser muito mais produtivo durante a rotina de trabalho, você pode deixar comentários aqui em baixo, pedindo ajuda ou sugerindo modificações.

Todos os arquivos mencionados aqui estão disponíveis pra download nos links abaixo, até a próxima. :D