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.

Site: www.saveway.com.br



Amaterasu é um dos deuses presentes na mitologia japonesa, outro fato que me levou a escolher este nome foi uma das habilidades especial de um personagem no anime Naruto.

Objetivo

Esta api tem um objetivo estremamente claro dentro da aplicação, ela foi escrita para gerir uma camada entre o extrato gerado pela VISA em tempo real, e a aplicação final do cliente. Era necessário que toda transação realizada dentro de um contexto especifico fosse tratada de uma maneira “especial”, exemplo: Uma compra de um grupo especifico / pré-definido deveria gerar pontos baseando-se em tal evento.


Porque AMATERASU?

Neste caso o nome é puramente estético, e o utilizei para batismo por conta de uma habilidade de personagens do anime Naruto (do qual sou um bocado fã), mas sei também que existe conexão com a mitologia oriental.


Tecnologias

Está api é escrita em Ruby, e utiliza quase que completamente uma gema chamada Shouryuken para executar seus serviços. A gema Shouryuken se conecta com uma fila de dados recebidos pelo serviço SQS da Amazon, e os absorve para dentro do banco de dados, para que posteriormente sejam consumidos pelas APIs que alimentam os aplicativos legados, podendo então exibir o extrato atualizado, a contagem de pontos, ou até mesmo as operações que podem ser realizadas naquele dia (com seu custo atualizado).



Github: Não disponível