ArtGo

Essa é a história de um sistema de pedidos que desenvolvi para a hamburgueria da minha mãe. Com ele, os pedidos que antes levavam vários minutos para serem processados, se reduziram a pedidos instantâneos. Um processo de atendimento ao cliente, que antes tinha diversas falhas humanas, ficou ordens de grandeza mais eficiente e assertivo. Recebemos muitos feedbacks positivos e um aumento na média de conversões.

Esse projeto é muito mais do que só um “sisteminha” que eu talvez tivesse feito para colocar no meu portfólio para simplesmente falar por aí que fiz. Na verdade, eu falei para poucas pessoas sobre ele, pois estava muito mais preocupado em ajudar minha mãe da melhor maneira possível, dentro do que até o momento sabia fazer de melhor ( ou que achava que sabia ).

A História a seguir tem como personagens principais: Next Js, React, TypeScript, Sass, Firebase e GIMP.

A 52 Art Burguer

Tudo começa entre junho e julho de 2021, depois de ter fechado uma pequena academia familiar que tínhamos dado toda a crise que foi a pandemia, minha mãe, padastro, eu e meu irmão tivemos a ideia de começar um serviço de delivery de hambúrgueres.

Assim como qualquer brasileiro que sempre se lança no desconhecido e arrisca apostando sempre no tudo ou nada, nós também entramos de cabeça em um negócio do qual não tínhamos nenhum conhecimento, estrutura, networking, fornecedores, stakeholders. Tudo foi difícil desde o início. Precisamos de muita pesquisa, e precisamos errar muito. Fazer tudo errado várias vezes até começar a pegar o jeito. Até mesmo o nome foi difícil definir, até que 52ArtBurguer foi estabelecido. O nome mais verboso possível escolhido depois de termos investido muito tempo com essa parte.

Em seguida, meu irmão havia feito uma logo bem simples, e bem rápido.

A Hamburgueria começou com hambúrgueres artesanais com serviço de delivery, na cozinha de casa. O atendimento era por WhatsApp. Para o atendimento por whatsapp, nós tínhamos alguns cardápios que eram enviados para os clientes, para que pudessem escolher por um hamburger.

No início as entregas eram feitas por um motoqueiro já conhecido nosso, que em pouco tempo não conseguimos mais pagá-lo.

Então, em meados de agosto e setembro conseguimos um espaço melhor em casa do qual era possível comer hambúrguer presencialmente também. Era novidade no bairro, então sempre tentamos fazer o melhor ambiente possível.

Nas primeiras semanas tivemos picos de vendas, mas que foram gradativamente caindo, e caindo. Por muito tempo estivemos em um ponto em que o faturamento era suficiente para “colocar comida na mesa”. O marketing sempre foi uma dor. fazer posts em redes sociais, fazer panfletos, divulgar de alguma forma. Era um trabalho que deveria acontecer sempre e custava muito do meu tempo e do meu irmão. Um dos primeiros movimentos de melhoria nesse sentido foi o rebrand que eu mesmo fiz, e ele permanece como marca até hoje:

As principais cores da marca são preto e branco para ser minimalista e para poder ser impressa em qualquer impressora, porque impressora também sempre foi uma dor. A outra cor mais utilizada é o amarelo para ter alguma personalidade e por que simplesmente é a cor da mesma tinta que pintou o nosso muro. Então literalmente, o amarelo é tão presente por conta da cor que o estabelecimento tinha previamente.

Além disso, a logo tem o formato de uma caixa para remeter ao delivery do hambúrguer, pois nossos hambúrgueres eram entregues em caixinhas.

Nunca fui designer, estudante de design ou algo do tipo. Sou bem entusiasta e amador quanto a isso e sempre levo como um capricho a mais que tenho para as coisas. Com toda a certeza do mundo, um designer profissional e bem pago faria um trabalho dez vezes melhor e mais refinado.

A história da hamburgueria se estende até os dias de hoje e houveram vários outros acontecimentos importantes além dos que já descrevi.

O Design da Solução

Os meses agora são novembro e dezembro de 2021. São os últimos dias de outro longo semestre letivo da PUC. Eu estava finalizando o meu segundo período de Engenharia de Software e tinha alguns conhecimentos de desenvolvimento web, que comparado ao que sei hoje não é muita coisa. Além disso, eu estava a pouco tempo na IPRO Jr. como projetista.

Não me lembro muito bem qual foi a ocasião, mas bastou pedir um hambúrguer em uma sexta-feira em outra hamburgueria do bairro ao lado. Diferente de todas as outras que eu já conhecia e sabia que atendiam por WhatsApp, essa tinha um sistema web próprio do qual os clientes faziam os próprios pedidos assim como em um iFood ou outros serviços. Depois de montar o pedido na loja ele era enviado no WhatsApp já formatado.

Fiquei impressionado com aquilo e pensei que se fizesse algo parecido conseguiria sanar vários dos problemas do nosso delivery. Até aquele momento nós atendiamos os clientes por conversas no WhatsApp após eles pelo menos terem dado um “Boa Noite”. O processamento de pedidos era demorado, eram vários minutos gastos até conseguir os dados do cliente, escrever em um papel e entregar esse papel na cozinha. Era necessário a maior parte do tempo de uma pessoa para fazer o atendimento, sendo que esse tempo poderia ser investido em outras tarefas. Além disso, existem várias outras coisas subjetivas como a forma de atendimento ao cliente, que é basicamente lidar com pessoas, ou como as falhas humanas que aconteciam frequentemente nesse processamento de pedidos.

Outro ponto importante que observei, é que não operamos como a maioria das hamburguerias porque os hambúrgueres artesanais eram a nossa vertical principal. Então vários aspectos como ingredientes, disponibilidade, horário de funcionamento, público alvo, preparo, entrega eram muito específicos para a gente. É nesse momento que a Engenharia de Software entra.

Estivemos presentes em plataformas como o iFood, e para nós, o iFood nunca foi perfeito. Sempre tínhamos que adaptar todos os processos ao iFood. Uma sistema web semelhante às outras hamburguerias não era o ideal que minha mãe precisava, pois exigiam que basicamente existisse um computador dentro da cozinha, e um teclado e mouse não é a coisa mais prática para se ter por perto em um ambiente onde tudo tem que ser rápido e também prático. Diante de tudo isso comecei a desenvolver o ArtGo.

Eu já sabia muita coisa de React a um tempo, e acabei descobrindo o Next Js por alguns vídeos no youtube. Sem saber basicamente nada de Next, eu comecei o ArtGo com ele. Além do Next acabei optando por utilizar outras coisas que para mim eram bem modernas como o TypeScript e o Sass.

Eu não sabia quase nada de banco de dados, ou backend. Eu também não tinha dinheiro para pagar por qualquer tipo de hospedagem ou VPS. E por isso usei o Firebase. Porque era de graça, fornecia um banco de dados NoSQL, do qual que não gosto muito de trabalhar nos dias de hoje por ser complexo modelar, e fornecia uma hospedagem. Gastei um bom tempo lendo documentação para aprender Firebase até conseguir hospedar o ArtGo.

O ArtGo

O restante do trabalho foi transformar todos os requisitos e casos de uso em um software. Dois softwares para ser mais exato. A minha missão era desenvolver uma aplicação web da qual os clientes acessam para fazer os pedidos, e um aplicativo android para o celular da minha mãe. Esse ficaria na cozinha o tempo todo e deveria ser capaz de abrir ou fechar o estabelecimento. Ser capaz de encerrar o delivery a qualquer momento e controlar a disponibilidade dos produtos na loja.

Além disso, todo o Design da interface deveria estar de acordo com a marca que eu havia trabalhado antes. Então novamente o que vemos é mais presença de amarelo, preto e branco. Existem vários outros caprichos e sofisticações como recortar as imagens dos hambúrgueres, e de outros produtos para que tivessem um fundo infinito e demonstrasse alguma seriedade.

Porém, até onde eu sei uma hamburgueria pequena de um bairro qualquer não deveria ter uma comunicação que destoasse tanto. Por isso, optei por desenvolver uma segunda marca para a vitrine da loja. Assim ela ficaria conhecida como “Pedidos Art”, em português mesmo para ser mais simples das pessoas entenderem.

Através desta loja virtual os clientes conseguem montar seus pedidos rapidamente. Na última etapa do processo, depois de inserir dados importantes como nome, endereço de entrega, forma de pagamento, os pedidos são enviados no WhatsApp da hamburgueria com uma formatação clara e com todas as informações do pedido para que ele começasse a ser produzido.

O outro lado do sistema opera na cozinha. Ele tem algumas poucas funcionalidades como abrir e fechar o estabelecimento online para ser prático de se usar. Foi desenvolvido com React Native e o build para produção feito pelo Expo. Não temos dispositivos IOS, então nesse caso o Android nesse caso era mais do que suficiente.

O aplicativo Android, que internamente chamamos de ArtGo, tem várias integrações a mais que o Pedido Art com o Firebase. Ele possui um sistema de login de e-mail e senha do firebase implementados, então só nós da hamburgueria conseguimos escrever no banco de dados. Isso só é possível se configurar todas as regras de segurança do próprio Firebase.

Fiz os primeiros Deploys para produção em Janeiro de 2022. Foi um início bem conturbado, tive que fazer vários ajustes nas primeiras semanas e por isso acabei aprendendo a como fazer deploys automáticos pelo GitHub actions. Assim, bastava fazer merge com a master e os deploys aconteciam automaticamente.

Resultados

Um sucesso. Uma solução totalmente inovadora, desenvolvida internamente e que foi refinada com o tempo.

Desde que entrou em operação, tivemos poucos problemas para a quantidade de clientes que utilizam o sistema. Alguns eram erros 404, outros simplesmente precisavam de uma ajuda a mais para aprender a usar.

Durante todo o período, de Janeiro de 2022 até os dias atuais de Julho de 2022, o Google Analytics apontou um existem entre 30 e 50 usuários ativos do sistema. Isso nem de longe é o suficiente para ultrapassar os limites de leitura, escrita, banda e armazenamento gratuitos do Firebase. Sim, sempre trabalhamos para aumentar a nossa base de clientes, mas ainda são números relativamente pequenos para a aplicação como um todo.

Com o tempo refatorei várias coisas que faziam do código ineficiente. Como aumentar o nível de persistência dos dados em ambos os Front Ends para evitar ler o cardápio do banco o tempo inteiro, cortando gastos.

Conclusão

Aprendi muitas coisas nessa história inteira. Da ideia até o Google Analytics lidei com um React de novos paradigmas pelo Next Js, como projetar uma interface que fosse coesa e fácil de usar, como gerenciar o código fonte e várias features entre branches do Git, e como fazer deploys automáticos, além de várias outras coisas. Apesar de serem todas ferramentas poderosas e importantes e terem somado no final mais 600Kb de código fonte, a que realmente salvou a minha vida se chamava GIMP, para tratar tantas imagens e fazer tantos designs.

Quanto ao código fonte, eu não posso simplesmente divulgá-lo em um repositório público porque se trata de código proprietário. Meu código proprietário. Espero gerar cada vez mais valor com ele. Talvez eu abra minha própria empresa de software.

Assim como havia dito antes, a história da 52 Art Burguer ainda não é uma história ou caso de sucesso. Todos os dias vivenciamos coisas novas e tentamos melhorar sempre. Por isso, se você estiver no nosso raio de alcance, imagino que queira experimentar alguns dos hamburgueres: https://artgo-81447.web.app/