Recently I had the idea to control my light using hand gestures. While I was creating this code I found out many interesting libs that I will share in this post. I will not enter in all the details of the implementation here, but you can find all the code in this repository:
https://github.com/MatheusR42/yeelight-hand-controller

With this code you can turn on and off your Yeelight just with a finger snap and change the brightness intensity raising or lowering your hand.

Equipments

• Webcam
• Microphone
• Yeelight 2nd generation YLDP06YL (it’s possible to use other lamps too, you will just need to find out a nice lib to work with your version)

Libs

• TensorFlow.js
• Teachablemachine
• MediaPipe Hands
• YEELIGHT AWESOME
• Express

How it works

The YEELIGHT AWESOME lib gives handful methods to play with Yeelight(I think that it has all the methods of the App) so you just need to use your imagination to work with that :D.

To turn on and off the light with a finger snap I recorded background noises of my room together with some finger snaps and use this data to train a TensorFlow model using Teachablemachine.

To control the brightness intensity I use MediaPipe Hands lib. This lib can track with high precision multiples hand landmarks.

I choose to use the wrist landmark because it is more stable to angle changes so it will work similarly even if you use other hand positions like with the palm pointing forward.

To put everything together, I use a node back-end with Express to create API endpoints that trigger YEELIGHT AWESOME commands. At the front-end I just write some functions to listen to Tensorflow and MediaPipe and call the back-end. You can find the code here.

Improvements

The Yeelight also can change colors so it is possible to train more categories like clap and whistle with Tensorflow or listen for other types of movements to play around with the light.

Trabalho com Front-end na Corebiz há aproximadamente dois anos e meio e até o início desse ano já havia desenvolvido diversas aplicações, algumas até com certa complexidade. Porém, muitos tópicos da comunidade me faziam sentir desatualizado e parecia que até mesmo o pouco que eu sabia estava incompleto.

O final do ano chegou e como de costume olhei para trás. Para a minha surpresa percebi que aprendi muito mais JavaScript do que esperava. Neste texto pretendo contar um pouco dessa história.

Há pouco mais de um ano fui chamado para participar do Hackaton da VTEX. Esse evento tinha o objetivo de divulgar o VTEXIO, uma forma totalmente inovadora de desenvolver na plataforma. O IO trouxe uma série de novidades como o conceito de apps e componentes, criação de workspaces e live reload direto na nuvem. Porém, o que mais me marcou foram as tecnologias utilizadas. React com Server Side Render, Node e GraphQL. Simplesmente não tinha ideia de como tudo isso funcionava.

O Hackton não foi exatamente como eu esperava. Cheguei apenas com uma ideia rudimentar de como o React e o GraphQL funcionavam. Para piorar a plataforma apresentou instabilidades, afinal, esse foi o primeiro teste real com diversos desenvolvedores. De qualquer forma resolvi me aprofundar no JavaScript.

Eloquent JavaScript

Antes de mergulhar de cabeça na infinidade de frameworks e bibliotecas é sempre bom ter uma ideia sobre a base da linguagem de programação escolhida. Para isso pesquisei bons livros sobre JavaScript. Optei pelo livro pois, além da praticidade de consulta no futuro, também criei um habito de leitura no ônibus a caminho do trabalho. O livro mais recomendado na maioria dos sites foi o Eloquent JavaScript: A Modern Introduction to Programming.

O Eloquent JavaScript é um livro sensacional e cobre diversos conteúdos que vão desde o básico, como o que são variáveis e como funciona o console.log, até conceitos que causam um pouco mais de confusão como Higher-order functions, Clojures, escopo e programação assincronia. Ao longo do livro o autor nos dá diversas dicas que normalmente não são explicadas em nenhum curso. Além disso, existem projetos extremamente interessantes que utilizam os conceitos aprendidos nos capítulos anteriores, como o Eletronic Life onde criamos um “ecossistema” usando muito prototype.

Não era exatamente esse tipo de ecossistema JavaScript que eu estava procurando no início, mas foi bem legal de desenvolver. Se desejar saber mais, adicionei o código com algumas alterações neste repositório: https://github.com/MatheusR42/EletronicLife

ECMAScript 2015

Infelizmente a edição do Eloquent JavaScript que li não era a mais atualizada e não cobria as novas funcionalidades da linguagem que vieram com o ES6. O React utiliza muito essa sintaxe e portanto esse foi o próximo objeto de estudo. A principal fonte que usei foi o curso ES2015 Crash Course do Laracasts. No ano anterior eu já havia feito um curso de Laravel no mesmo site e achei a didática do Jeffrey incrível.

No inicio estranhei um pouco a sintaxe do ECMAScript 6, parecia ser apenas mais uma forma de fazer o que eu já sabia. Todavia, após algum tempo de uso percebi que mais do que otimizar o desenvolvimento também acaba gerando um código mais limpo.

React, Redux e React Native

Finalmente estava preparado para o React! Escolhi iniciar pelo o React Native porque sempre quis desenvolver apps e tinha visto uma palestra no JS Experience em que a palestrante deu um argumento muito interessante para iniciar com o Native. O argumento era mais ou menos o seguinte: para quem está acostumado a fazer páginas usando o JQuery o React simplesmente não faz sentido, a todo o momento você ficará tentado a manipular o DOM diretamente e por isso é mais fácil iniciar pelo mobile. Você apenas ignora o que aprendeu para web e aceita a nova forma de desenvolver com o React. Ademais, aplicativos costumam ter uma identidade visual mais bem definida e dessa forma fica mais fácil aplicar o conceito de componentização.

Novamente entrei na fase de busca pelo melhor conteúdo e um site que me ajudou, e ainda me ajuda bastante, foi o hackr.io. Neste site você encontra diversos cursos classificados por avaliação de outros usuários. Um dos cursos que estava mais bem rankeado no momento era o The Complete React Native and Redux Course do Stephen Grider. Neste curso além de aprender como desenvolver aplicativos com React Native consegui entender melhor a ideia do Redux.

Primeiro Projeto

Até então havia aprendido bastante coisa, porém não tinha feito nada. Quer dizer, quase nada. Já aplicava alguns conceitos durante o trabalho, mas não havia feito nenhum projeto para juntar tudo isso. A primeira oportunidade surgiu quando me pediram para automatizar um processo.

O problema era o seguinte: A empresa estava crescendo e alguns serviços eram cobrados por horas, essas horas ficavam nas tarefas do Jira e não existia uma forma fácil de calculá-las. Era necessário exportar planilhas, retirar dados desnecessários e deixá-los de uma maneira mais atrativa e compreensível. Esse processo ocorria para vários clientes mensalmente, mas também havia casos de reports semanais. Simplesmente não era possível escalar.

A primeira versão foi um app simples que buscava as tarefas utilizando a API do Jira, separava por status e calculava as horas.

A ideia de aplicativo é bem legal, mas para algo simples acaba gerando mais problemas do que vantagens. Em primeiro lugar é necessário instalá-lo, para isso é interessante publicá-lo nas lojas da Google e da Apple, logo, é preciso dar suporte a duas plataformas e versões diferentes de sistema operacional. Além disso, por se tratar de uma ferramenta corporativa, a maioria das pessoas acabam utilizando no desktop.

Diante disso, resolvemos migrar para a versão web. Durante a migração a função render precisou ser quase que totalmente refeita. (Até o momento não sei exatamente como compartilhar essa parte entre as duas plataformas). Por outro lado, foi possível reaproveitar quase todo o resto do código e isso mostrou um pouco do poder da Stack React.

Loja oBoticário e GraphQL

Após o desenvolvimento do CoreTime comecei a tocar outros projetos pessoais e dei uma pausa no JavaScript, mas logo surgiu outra oportunidade para retornar. Fui chamado para participar da equipe de desenvolvimento do novo site do oBoticário, a primeira loja a usar o sistema de pages do VTEXIO(a mesma plataforma que citei no início do texto).

Fazer um projeto para uma grande empresa é algo completamente diferente. A complexidade é maior, a responsabilidade é maior. Estávamos trabalhando com code review, tester e com uma tecnologia nova que estava evoluindo junto ao projeto. Foi nesse momento que comecei a visualizar as vantagens do GraphQL.

O site do oBoticário possuí diversos componentes que consomem APIs de servidores diferentes, neste contexto o GraphQL cai como uma luva. Se vários componentes precisam do mesmo dado, você não precisa se preocupar com excessos de chamadas ou pensar em uma maneira de enviar tudo isso para a Redux store, basta plugar o GraphQL em todos os componentes e deixar que ele gerencie e cacheie as chamadas para você. Se precisar buscar, validar e juntar dados de mais do que um endpoint, crie um resolver que faça tudo isso e apenas retorne os dados tratados para o front. Além disso, assim que configurado você não ficará mais na incerteza do que é retornado de uma API. Ao criar os resolvers a documentação é gerada automaticamente com a tipagem da resposta e dos parâmetros.

Todos esses pontos facilitam o desenvolvimento e manutenção e por isso valem o esforço inicial de configuração.

Conclusão e futuro…

Ainda tenho muito o que aprender, durante esse ano fui exposto a diversos conceitos e tecnologias que pretendo me aprofundar, entre elas o Node. Fiz apenas um curso e alguns resolvers, mas já tenho diversas ideias para aplicá-lo.

Para finalizar, tive a felicidade de saber que depois de muito esforço fui escolhido por meio de votação popular como o profissional referência do ano! Sou muito grato às pessoas que me incentivaram e proporcionam oportunidades sensacionais, sem elas essa história não seria a mesma.

Valeu!

No texto não consegui colocar todos os projetos e materiais importantes que utilizei, por isso vou deixar essa lista com alguns conteúdos que me ajudaram bastante:

6 JavaScript Native Array Functions in 5 Minutes — Code Whisperer

Eloquent JavaScript: A Modern Introduction to Programming — Marjin Haverbeke

ES2015 Crash Course — Laracasts

GraphQL with React: The Complete Developers Guide — Stephen Grider

JavaScript Array Reduce in 4 Minutes — Code Whisperer

Node with React: Fullstack Web Development — Stephen Grider

React.js Succinctly — Samer Buna

The Complete React Native and Redux Course — Stephen Grider