Aplicativo Web Progressivo (<abbr title="Progressive Web App">PWA</abbr>), para empresa de mármore Magma, Os técnicos dessa empresa podem ao longo da jornada de trabalho verificar quais clientes eles precisam visitar e realizar agendamentos. O aplicativo foi feito utilizando componentes de interface do Bootstrap, Javascript em sua programação, e a API Service Worker para permitir sua execução offline, além de permitir uma experiência próxima de um aplicativo nativo para Android. O mesmo também foi integrado a uma API REST, onde os dados de agendamento são centralizado permitindo login e gerenciamento das informações pela empresa

PWA usado para realizar agendamento de visitas pelos técnicos da Magma, empresa de marmoraria.

Javascript

Nodejs

Gulp usado para minificação e empacotamento do código

Gulp

Aplicativo para agendamento de visitas técnica

Cuponeria - Innoventures Ideias em Soluções S.A

Primepass Entretenimento Interativo Ltda

Bizsys - Consultoria de negócios e tecnologia de informação LTDA

Leydev

Sonda

Atualmente em meu tempo livre, faço projetos experimentais e de código aberto, por puro aprendizado. E não há um nicho definido, pode ser front-end, back-end, redes.  Você pode me acompanhar no Github.

Esse é uma analizador de ondas sonoras, para auxiliar na afinação de instrumentos músicais de corda

Afinador Active Tuner

Open source & experimentos

Projetos concluÍdos

A Asher Açaiteria, é uma sorveteria por quilo self-service, a qual realiza suas vendas por pesagem. A loja precisava de um programa, com integração com as balanças, gerenciamento de estoque com produtos unitários e pesáveis e emissões de relatórios dos lucros. Utilizei o Electron o qual provê um ecossistema com Nodejs e ter acesso ao protocolo RS-232 (porta serial), e permitir execução no computador do caixa independente de sistema operacional. Fiz uso de React para desenvolver o sistema, typescript no auxílio da programação, Material-UI na construção da interface do usuário. Para garantir a escalabilidade do uso do programa em caso de novas franquias da loja, o sistema conta com o armazenamento dos dados em servidores e comunicação por meio de API REST, a qual foi desenvolvida usando Nodejs e MariaDB.

Com este programa, o operador do caixa pode gerenciar produtos em estoque, registrar vendas, e fazer a pesagem em uma sorveteria self-service.

React utiliza para construção do sistema

React

Electron como ecosistema para execução do programa em multiplataformas

Electron

Gulp para criar tarefas de transpilação e empacotamento

MariaDB como solução para armazenar os dados gerados pelo programa

Maria DB

Nodejs para comunicação por porta serial com a balança

Node JS

PM2 para redundância e escalabilidade da API REST 

Typescript para auxiliar no desenvolvimento do código

TypeScript

Webpack para empacotamento das dependências e código fonte

Webpack

Ponto de Venda & estoque

Marketplace o qual permite compra de produtos e/ou obtenção de cupons promocionais para os clientes da empresa TICKET SERVIÇOS S.A. Entendendo “white label” como uma template de layout com padrões pré estabelecidos, foi implementado toda a identidade visual a pedido da Ticket, em uma white label de estilo marketplace a qual é denominada Ticket Vantagens. Todos os produtos exibidos neste marketplace são provenientes de integração com API REST da Cuponeria, a qual faz integração de sistema com sua parceira VIA S.A. Na construção deste site foram utilizados: Nextjs para renderização do lado do servidor, garantindo SEO (Search Engine Optimization) e typescript para auxiliar no desenvolvimento do código.

Marketplace com promoções exclusivas para clientes Ticket

React é uma biblioteca JavaScript para criar interfaces de usuário.

Nextjs para renderização do lado do servidor com fins de SEO e Whitelabel

Nextjs

Marketplace Ticket Vantagens

Marketplace o qual permite compra de produtos e/ou obtenção de cupons promocionais para os clientes da empresa BITZ SERVIÇOS FINANCEIROS. Entendendo “white label” como uma template de layout com padrões pré estabelecidos, foi implementado toda a identidade visual a pedido do BITZ, em uma white label de estilo marketplace a qual é denominada Lojão do Bitz. Todos os produtos exibidos neste marketplace são provenientes de integração com API REST da Cuponeria. Na construção deste site foram utilizados: Nextjs para renderização do lado do servidor, garantindo SEO (Search Engine Optimization) e typescript para auxiliar no desenvolvimento do código.

Marketplace com promoções exclusivas para clientes Bitz

Marketplace Lojão do Bitz

White label o qual permite obtenção de cupons promocionais para os clientes da empresa Claro Pay. Entendendo “white label” como uma template de layout com padrões pré estabelecidos, foi implementado toda a identidade visual a pedido do Claro. Essa página é aberta dentro de uma WebView no aplicativo da Claro. Todos os produtos exibidos neste, são provenientes de integração com API REST da Cuponeria. Na construção deste site foram utilizados: Nextjs e typescript para auxiliar no desenvolvimento do código.

Página com promoções exclusivas para clientes Claro Pay

White Label Claro Pay

White label o qual permite obtenção de cupons promocionais para os clientes da empresa Elo. Entendendo “white label” como uma template de layout com padrões pré estabelecidos, foi implementado toda a identidade visual a pedido da Elo. Todos os produtos exibidos neste, são provenientes de integração com API REST da Cuponeria. Na construção deste site foram utilizados: Nextjs e typescript para auxiliar no desenvolvimento do código.

Página com promoções exclusivas para clientes Elo

White Label Elo

Site feito com Nextjs e app com React Native, onde os cliente podem acessar para verificar termos, serviços, sobre a empresa e ainda assinar planos mensais ou anuais além de poderem consultar seu próprio perfil. Como extra no aplicativo, os usuários podem fazer check-in de sua localização no cinema, para validar o direito ao ingresso.

A primepass oferece combos de pacotes de serviços de streaming e ingresso de cinema por assinatura

Website & aplicativo

Um quiz para promover a série The Witcher da Netflix. Caso os participantes respondessem corretamente às perguntas, a máquina entregava um pôster da série. A máquina foi construída usando Chromium em modo kiosk, React para compor a interface do usuário. Nodejs para fazer a interface “software/hardware” por meio do protocolo RS-232 (porta serial) e arduino.

Um quiz para promover a série The Witcher da Netflix. Caso os participantes respondessem corretamente às perguntas, a máquina entregava um pôster da série.

NodeJs intermediario entre o react e o arduino

Arduino

Zabbix

Máquina de Posters The Witcher

Máquina de amostragem(sampling machine), para distribuição do novo creme corporal da Natura, chamado Natura Todo Dia A máquina foi construída usando Chromium em modo kiosk, React para compor a interface do usuário. Nodejs para fazer a interface “software/hardware” por meio do protocolo RS-232 (porta serial) e arduino.

Máquina de amostragem para promover o novo creme corporal da Natura

Máquina de Amostras Natura Todo Dia 

Mídia out of home para promover a série Irmandade da Netflix. A porta temática possuía um sensor infravermelho para detectar a presença de uma pessoa à frente, e consequentemente reproduzir vídeos gravados como no modelo acima, em um monitor curvo para dar sensação de profundidade. Foram 7 mídias espalhadas pelo centro de São Paulo ao longo de uma semana. A máquina foi construída usando VLC Player, Raspberry PI e Nodejs para interagir com sensor por intermédio de um Arduino.

Mídia out of home para promover a série Irmandade da Netflix

Out of Home para série Irmandade

Karaokê (out of home) para promover o evento Mega da Virada da Caixa Econômica Federal. Os participantes cantavam e ganhavam literalmente uma caneta azul como parte da abordagem publicitária envolvendo a parceria do cantor Manoel Gomes. A máquina foi construída usando Chromium em modo kiosk, React para compor a interface do usuário. Nodejs para fazer a interface “software/hardware” por meio do protocolo RS-232 (porta serial) e arduino.

Máquina de karaokê para promover o evento Mega da Virada

Karaokê Mega da Virada, Caneta Azul

Analisador de frequências sonoras, para auxílio na afinação de instrumentos musicais. Ele detecta frequências entre C₀ (16,35 Hertz) e B₈ (7902,13 Hertz), e exibe a nota referente a frequência captada. O Active Tuner tem como objetivo o aprendizado do funcionamento de ondas sonoras e sua representação digital. Foi necessário a compreensão básica de algoritmos para a conversão do sinal analógico para digital. O aprendizado do funcionamento da API de áudio utilizado pelos browsers, ex. Chrome e Firefox. E a construção de uma aplicação Web que pudesse representar a frequência e sua nota referente no momento da captação. Foram utilizados a API de Web áudio para processamento das frequências sonoras, algoritmo de detecção de tom (<abbr title="Pitch detection algorithm">PDA</abbr> - Pitch detection algorithm), API Canvas para desenhos de gráfico, React para composição da interface do usuário e typescript/javascript para programação. Outros autores: <a href="https://www.linkedin.com/in/renanlopes77/" rel="nofollow" target=”_blank”>Renan Lopes</a> atuou na pesquisa e desenvolvimento deste projeto, <a href="https://github.com/freirezinho" target=”_blank”>Saulo Freire</a> atuou na correção de bugs no navegador Safari para Mac e iPhone e <a href="https://www.behance.net/luizgusiqueir" rel="nofollow" target=”_blank”>Luiz Gustavo</a> designer responsável pelas artes e interface do aplicativo.

React usado para criar a interface de usuário.

TypeScript para auxilio na programação com Javascript

Webpack usado para transpilação, minificação e empacotamento do código

HTML5 para uso das APIs Web Áudio, Canvas e Service Worker

HTML 5 APIs

Firebase

Github com serviço de entrega continua integrado à hospedagem no Firebase

CI/CD

Dynamic DNS Cloudflare é um serviço que roda em segundo plano no sistema operacional e periodicamente se comunica com o serviço de DNS da Cloudflare para atualizar a referência do <abbr title="internet Protocol">IP</abbr> com o domínio. Esse programa é útil quando se precisa fazer servidores caseiros ou não, seja para jogar Minecraft e CS 1.6 com os amigos, configurar <abbr title="Virtual Private Network">VPN</abbr>, <abbr title="Digital Video Recorder">DVR</abbr> para câmeras de segurança, dentre outros serviços. Porém a internet disponível só tem endereçamento IP dinâmico. Para evitar a queda do servidor na internet nesse tipo de situação e não ter de pagar caro por um IP estático, é necessário a implementação de um Sistema de Nomes de Domínio Dinâmico (<abbr title="Dynamic Domain Name System">DDNS</abbr>). Você pode mover o controle do seu domínio para o serviço de DNS da Cloudflare e instalar esse programa para ficar atualizando o DNS com o atual IP do servidor. OBS: Apesar de eu ter disponibilizado para download só a versão Linux, você mesmo pode baixar o projeto e modificar para ter uma versão Windows ou para qualquer outro sistema. O programa é feito com Nodejs e empacotado independente. Você pode criar um shell script que, durante a instalação do programa, vai configurar o mesmo para rodar em background toda vez que o sistema for iniciado.

Agendador para realizar a sincronização periódica de endereços IPs de servidores sem endereçamento estático na Cloudflare

Shell Script para automatizar a instalação do programa no Systemd do Linux

Shell Script

Node.js é um ambiente de execução JavaScript multiplataforma e de código aberto.

Node.js

TypeScript implementa sintaxe para suportar inferência de tipos em JS.

DNS Dinâmico Cloudflare

Um dos meus primeiros projetos experimentais (<abbr title="Progressive Web App">PWA</abbr>), clássico jogo da velha. Meu objetivo aqui foi entender como funcionava o protocolo WebSocket, para comunicação bidirecional (full duplex). Os modelos de comunicação entre 2 ou mais dispositivos normalmente exige a reconexão com o servidor todas as vezes para consultar novas informações. Isso em aplicações escaláveis causa um aumento de tráfego, processamento e sobrecarrega no servidor, além de atraso na obtenção de informações críticas, pois o protocolo TCP exige que o processo Three-way Handshake seja realizado a cada nova conexão. Fora as demais validações que deverão ocorrer por outros protocolos acima do TCP de acordo com o modelo do Sistemas Abertos de Interconexão <abbr title="Open Systems Interconnection">OSI</abbr>. Com o protocolo WebSocket é possível conectar diversos dispositivos ao servidor, e solicitar que a mesma conexão se mantenha aberta até que 1 dos correspondentes não responda em tempo hábil as requisições de status (ping), obstrução a nível físico da rede ou encerramento da comunicação por um dos correspondentes. Com a conexão aberta e permitindo troca de mensagens bidirecionais, a comunicação passa a ser orientada a eventos, permitindo que qualquer um dos correspondentes (cliente ou servidor) enviem mensagem entre si a qualquer momento O aplicativo foi feito utilizando componentes de interface do Bootstrap, Javascript em sua programação, e a API nativa WebSocket. Do lado do servidor foi utilizado o módulo <a href="https://www.npmjs.com/package/ws">ws</a>, que ajuda na implementação do protocolo WebSocket sobre o HTTP e TCP em ambiente Nodejs, pois até o presente momento, esse ambiente não tem o protocolo nativamente implementado

O clássico jogo da velha em PWA, você pode jogar: contra as máquina ou mutiplayer com deus amigos

HTML5

App Jogo Da Velha (PvP Online)

Elaboração de programas que podem ser executados nos três principais sistemas operacionais, sem a necessidade de reescrever o código para cada plataforma, usando o ecosistema de frameworks como Electron e Tauri.

Soluções multiplataforma

Desenvolvimento de APIs sobre HTTP, permitindo fácil integração com outros sistemas, usando Nginx, MySQL MongoBD e outros. Combinado com fatores para aumentar a segurança do armazenamento e tráfego dos dados como Firewall, SSL, Bcrypt e JWT.

Sincronismo entre dispositivos

Sou desenvolvedor há 5 anos, implementando soluções como programas, sites, aplicações web e IoT. Já trabalhei por meio de agências para diversos clientes como: Netflix, Natura, Caixa Econômica Federal, Ford Motor e etc. Como programador uso Javascript/Typescript e Rust, além de ferramentas que possuo domínio como Nextjs/React e Vue. Tenho entendimento de banco de dados SQL e NoSQL, arquitetura de sistemas Linux e Windows e também redes de computadores sendo seus protocolos, topologias e segurança.

Aplicativo para agendamento de visitas técnica

Tecnologias

Sobre o projeto