---

Tecnologias

• EC2 / AWS - VPS Linux Ubuntu
• S3 / AWS
• MySQL
• PHP - FrontEnd
• NodeJS - API
• VueJS - FrontEnd - Dashboard de administração
• Java & Kotlin - Aplicativo Android

---

Este foi um dos maiores projetos que já fiz sozinho, que tenho mais carinho, e por um bocado de tempo também foi um dos mais belos que pude participar.

O projeto atualmente que rebatizei de CYNEMA foi constituido inicialmente como PATROCINE CINEMAS, foi feito gradativamente e sob medida para este cliente especifico.

---

O Inicio

Um dos clientes com quem eu já trabalhava a algum tempo em outros pequenos projetos, veio para mim um dia com a demanda de desenvolvimento da identidade digital de um novo empreendimento que ele estava tocando, explodi de surpresa ao descobrir que o “empreendimento” se tratava da construção de um cinema. Sim, um cinema de verdade, com sala em 3D, pipoca e tudo. Um cinema cinema nasceria fisicamente, e eu estava sendo convidado para dar vida a ela na parte digital.

A parte mais legal de um projeto desse, são todas as possibilidades de criar muitas e muitas coisas bonitas, por conta da variedade de filmes, e gêneros diferentes. Em um mês tudo está mais obscurecido e voltado para o terror, e no outro, tudo muito colorido por conta de um lançamento infantil.

---

Necessidades

• Desenvolvimento do logo e identidade visual
• Página do Facebook
• Perfil no Instagram
• Website com informações do filme
• Aplicativo com informações do site

---

Desenvolvimento

Ambiente

Como também acabo por fazer na maioria dos meus projetos, elegi o ambiente de desenvolvimento linux pra alocar todos os módulos da aplicação.

Banco de dados

A modelagem do banco de dados foi feita utilizando MySQL, e alocada dentro da VPS separada para o projeto.

API

Ao menos no meu ciclo, crio o desenho do fluxo inicial de uma solução, depois do banco de dados com o qual vai se conectar por meio da API, é apenas pela API que os acessos ao banco são realizados, e todos os fronts dependentes se conectam aqui.

---

demonstração: https://cynema.soucriador.com
url original: https://patrocine.com.br

Ainda no segmento de construir coisas novas, e explicar o intuito e decisões tomadas no processo, nasceu o projeto CYANO. Ele nada mais é que uma SPA construida com Node.js e Vue.js.

O frontend realiza algumas chamadas das quais a app depende (principalmente no consumo de dados para exibição), para isso se conectando no backend Atlas* (que por sua vez esmiuçarei em detalhes posteriormente). O link para o código fonte pode ser encontrado no final deste post, e as informações para executa-la estarão disponíveis no repositório da mesma. Este projeto está em constante atualização, por ser um experimento meu.

Objetivo

Construir uma aplicação simples para exibir alguns detalhes simples de projetos que construi ou participei, utilizando dentre alguns recursos Node.js, e abrindo o código-fonte para que possa ser consultado por outras pessoas (desenvolvedores, ou não).

Porque CYANO?

Bem, o nome Cyano é a versão em inglês da cor Ciano. Vez ou outra eu topava com essa palavra em algum poema, texto ou cancão, e então uma das bandas de que mais gosto (a Fresno) lançou um cd com este nome. O Ciano, apesar de ser uma cor substrativa do vermelho é uma espécie de azul (que é uma cor que sempre gostei demais), como o sketch* inicial deste projeto continha um quantidade muito abundante de azul, decidi nomea-lo assim. Também tem o fato de que Blue (azul do inglês) é na maior parte das vezes relacionado a tristeza ou melancolia, e admito que eu estava em uma fase em que sentia um bocado disso, mas ainda assim sentia e ainda sinto agora que posso criar algo bonito disso.

Tecnologias

Como citado anteriormente, Cyano possui como base um framework de frontend chamado Vue.js, escolhi o mesmo porque dentre os que eu estava estudando naquele momento (que eram Vue.js, React e Angular2), foi o que me pareceu mais flexivel e com maior acesso (rápido) a comunidade. Pessoalmente ainda utilizo e estudo os outros dois com frequencia, mas para este projeto fiquei tentato a explorar mais do Vue.js, e descobrir de fato porque o número de adptos a ele vem crescendo tanto. E projetos pessoais são para isso não é? Liberdade para experimentar e descobrir mais do que você pode fazer com tecnologias emergentes.

Estrutura

A SPA construida é bem simples, no momento apresentando uma Home, uma pagina com projetos, um link para o blog (que é onde você se encontra agora), e um link para o email de contato.
Uma vez que criei a estrutura, a segunda coisa que fiz foi implementar internacionalização na página, para que a mesma operasse em português e em inglês, é um recurso simples (e que admito precisarei ir refinando aos poucos), mas são pequenos detalhes que dão um charme diferente, e um ar de profissionalismo a página.

A estrutura dessa SPA inclusive é algo que estou constantemente modificando, a medida que me sinto mais confortável com a estrutura do Vue.js, vou refatorando pedaços de código que escrevi previamente com o objetivo de tornar o código do repositório cada vez mais limpo. Pode ser que ninguém nunca chegue a ver todos aqueles códigos que estão por trás, mas se chegar a isso quero que tenham ao menos um pouco de percepção do programador que sou (mesmo meu foco dos últimos anos não ser Javascript, estou engatinhando nisso ainda) pela lógica utilizada.

Para a aparência e uniformidade de algumas telas, utilizei-me do Bootstrap Saas, mas posteriormente vou avaliar se vou mantê-lo.. Tenho feito testes com a Semantic UI, e definitivamente estou encantado com a mesma, se eu não carrega-la para o Cyano, o farei em outro projeto.

Comunicação

Para carregar dados a aplicação realiza chamadas em ajax para uma API no backend de nome Atlas* (que estou escrevendo em conjunto com a Cyano), no inicio a maior parte dos dados eram estaticos, mas agora com a implementação da área restrita e o amadurecimento inicial da API os dados são dinâmicos.
Outro ponto importante a ser ressaltado sobre comunicação, é que todas as imagens do qual a aplicação depende estarão sendo migradas para o S3 da Amazon, se é para construir algo top, melhor fazer certinho :) .

---

Github: https://github.com/jhonattas/cyano

Quando ingressei na Saveway como estagiário, o site da empresa estava precisando de uma reformulada, na época eu estava estudando e realizando diversos testes com tecnologias que eram emergentes (bem como html5, css3, e layout responsivo que era o mais novo hype do momento).

Eu acabara de ganhar um iPhone 5, e a internet móvel em um aparelho de muita qualidade era algo totalmente novo para mim, mas ainda mais que isso, por ter passado tanto tempo com aparelhos com hardware extremamente limitado, já que me era comum toda a dificuldade que um usuário low-end* tendia a enfrentar quando acessava determinados sites ou aplicações “mais robustas”, comecei justamente neste período a observar que alguns sites funcionavam muito bem em telas pequenas, e a me questionar porque outros destes não possuiam um desempenho tão bom assim. E mais ainda que isso, eu não era leigo no assunto de desenvolvimento para web (já que meu primeiro contato com html fora mais de 5 anos antes deste momento), eu já me sentia a cada dia mais confortável em criar telas cada vez melhores (ou na minha mentalidade daquele momento: mais bonitas), mas eu não entendia ainda como fazer com que uma página de um formato só; contemplasse mais de 3 cenários distintos de usuários com telas em tamanhos diferentes. Isso fundia tanto minha cabeça que comecei a estudar o assunto, eu queria criar telas lindas, que possuiam movimento fluido, que funcionassem no meu celular novo, no velho, e se possível até em uma televisão.

Eu queria também que todos e tudo ao me redor usufluissem do mesmo, então sem contar para ninguém, construi um mockup do que eu imaginava que deveria ser o novo site da empresa (porque acreditava eu que aquele que estava no ar era horrível) e apresentei para um dos responsáveis pelo meu estágio. Claro que morrendo de medo (e não pouco) de uma crítica absoluta, porque não era algo no qual eu deveria estar consumindo tempo, mas para minha surpresa, eles abraçaram a ideia, e partindo desse momento me auxiliaram a nivelar um pouco mais alguns detalhes do que viria a se tornar a página institucional da empresa por alguns aninhos… E mais que isso uma página pronta para diversos tipos de tela! E com elementos novos de animação em CSS! <3 (Gente eu amo vocês de verdade, isso significou tanto e ainda significa para mim).

Ter liberdade para curvar o conhecimento que absorvo, e conseguir aplicar isso de maneira criativa no que me é necessário fez e ainda faz muita diferença na minha vida, é uma marca muito linda que vocês deixaram em mim, e que agradeço e vou carregar para sempre.