Da Ideia ao Produto: Minha Jornada Construindo uma Versão Online de 'Cards Against Humanity'
Introdução
Olá, entusiastas da tecnologia! Como um apaixonado engenheiro de software, estou sempre à procura de desafios empolgantes. Recentemente, embarquei em um projeto paralelo envolvente. Decidi dar vida digital a um party game que todos nós conhecemos e amamos - "Cards Against Humanity". Este artigo desvenda a jornada de alto nível - os porquês, os o quês e os ondes desta fascinante expedição.
Essa iniciativa surgiu do meu carinho pessoal pelo "Cards Against Humanity". A capacidade única do jogo de acender risos e conexões é incomparável, e eu visava recriar essa experiência em um formato digital acessível. No entanto, senti que as versões online existentes não capturavam a essência do jogo, então decidi criar a minha própria.
Antes de prosseguirmos, vamos fazer uma rápida revisão de alguns clones digitais do nosso amado jogo, cada um com suas peculiaridades únicas:
E agora, um momento de autopromoção descarada - apresento a você o meu bebê digital, Cyber Chaos Cards. Sinta-se à vontade para conferir todos eles e decidir qual deles mais te diverte!
Vamos continuar, certo?
O objetivo deste projeto era duplo. Primeiramente, enriquecer meu entendimento sobre o desenvolvimento de jogos/aplicações em tempo real. O processo de construir um jogo online do zero era desafiador, mas gratificante, e eu estava ansioso para absorver o conhecimento.
Em segundo lugar, eu desejava criar uma peça de destaque para meu portfólio, algo que ilustrasse tanto minha proficiência técnica quanto minha paixão por unir criatividade e codificação.
Este artigo oferece uma visão geral de alto nível desta jornada de desenvolvimento - os conceitos iniciais, as decisões de design, a escolha das tecnologias e os dilemas de implantação. Para aqueles interessados nos detalhes do processo de desenvolvimento, estarei publicando um artigo detalhado por trás do código, que mergulhará mais profundamente nas complexidades técnicas deste projeto. Você poderá acessar isso [aqui](em breve).
O Drama do Design: Equilibrando Ideias e Modelando Simplicidade
Eu sabia o que queria - uma reencarnação digital de "Cards Against Humanity" que fosse tão intuitiva quanto visualmente atraente.
Eu visualizei minha criação com estes três mandamentos gravados em pedra:
- Amigável ao Usuário - O jogo tinha que ser intuitivo, fácil de navegar. A experiência deveria ser como um passeio tranquilo em um parque bem cuidado.
- Início Rápido - Eu queria eliminar barreiras entre a alegria de descobrir o jogo e a emoção de jogar. Eu pretendia evitar obstáculos de login, evitar busca de salas complicadas e pular detalhes de escolha de nome.
- Design Responsivo - A inclusividade era fundamental, e o jogo tinha que ser acessível para todos, independentemente do tamanho da tela.
Um dia, enquanto contemplava esse dilema de design, a elegância simples do Garticphone chamou minha atenção. Era uma bela mistura de minimalismo e funcionalidade, um jogo fácil de entender e envolvente em todos os dispositivos. O Garticphone era como encontrar o Código Konami do design de jogos. Era o tesouro escondido, o truque para projetar um jogo que fosse amigável, atraente e divertido. Simples, mas elegante, responsivo em todos os dispositivos, e livre das complexidades desnecessárias de telas de login ou pesquisas de salas.
Os mais de 28 Milhões de acessos mensais no game são uma validação de que ele contem uma boa experiencia.
Com essa inspiração como minha luz orientadora, entrei na fase de esboço. O canvas do Figma era meu playground, onde caixas cinzas começaram a desempenhar os papéis dos componentes do jogo. Como um escultor digital, comecei a dar forma a essas caixas sem forma, dando vida a elas gradualmente. Pouco a pouco, iteração após iteração, minha visão começou a se materializar. O layout, que antes era um vasto vazio, agora começava a transbordar com a vitalidade de um jogo prestes a se desdobrar.
Depois de ter o interface do meu jogo projetada, ainda faltava uma peça crucial do quebra-cabeça - um logotipo. Muito parecido com o emblema de um super-herói, um logotipo define o tom e dá uma identidade a um produto. Então, com esse entendimento, me encontrei de volta ao Figma, mas desta vez, com uma missão diferente.
Depois de diversas iterações cheguei a um resultado que eu olhasse e pensasse, "Eh, está bom". O logotipo final pode não ser uma obra-prima, mas como um pedaço confiável de código, é bom o suficiente por enquanto e faz o trabalho de forma eficaz!
A Saga do Desenvolvimento: Navegando entre Códigos e Tecnologias
Agora, vou mudar um pouco de direção e aventurar-me no reino da seleção de tecnologias. Mas não se preocupe, não vou bombardeá-lo com uma nuvem densa de jargões técnicos. Imagine isso mais como um tour panorâmico do que uma exploração em profundidade. Vamos embarcar no ônibus virtual da explicação, fazer paradas em várias tecnologias, e eu as apresentarei com analogias. Para aqueles entusiastas de tecnologia que gostam de espiar sob o capô e sujar as mãos com código, não temam! Estou preparando um artigo separado que mergulha nas entranhas dos processos de desenvolvimento. Mas por agora, sente-se e aproveite a vista panorâmica da paisagem tecnológica que sustenta este projeto.
A Seleção Tecnológica: Escolhendo as Ferramentas Certas para o Trabalho
Decidir pelas ferramentas e tecnologias adequadas foi um passo crucial nesta jornada. Eu queria uma stack robusta que me permitisse gerir efetivamente a natureza stateful do meu jogo em tempo real. Foi então que Next.js, TypeScript, Socket.IO e Node.js entraram em cena.
-
Next.js: Imagine que programar em React é como montar um quebra-cabeça. Você tem todas as peças, mas pode ser complicado juntá-las para formar a imagem completa. Agora, o Next.js é como um conjunto de quebra-cabeça com dicas nas peças, facilitando todo o processo. E a Vercel? Bom, a Vercel é como aquele amigo super prestativo que, após você montar o quebra-cabeça, leva-o com cuidado e o coloca num quadro para exibir na parede (ou seja, na web) para todos apreciarem. Em resumo, Next.js torna o React mais fácil de montar e a Vercel garante que todos possam ver sua obra de arte com o mínimo de esforço.
-
TypeScript: Imagine que é como um colete à prova de balas para o seu código. Te dá uma sensação de segurança e confiança, sabendo que ele vai te proteger contra possíveis 'balas perdidas' na forma de bugs e erros de compilação.
-
Socket.IO: Imagine um mensageiro infatigável que corre para entregar mensagens (dados) em tempo real, não importa o que aconteça. Ele também cria caixas de correio (salas) para cada usuário. É o nosso eficiente mensageiro de dados, Socket.IO!
-
Node.js: Este é como um todo-terreno robusto - não o mais rápido ou mais elegante, mas extremamente confiável e pode passar por qualquer terreno (neste caso, atendendo a diferentes necessidades de desenvolvimento). E, como um bônus, fica ainda melhor quando equipado com o 'kit de upgrade' do TypeScript.
O Desafio do Backend: Orquestrando Lógica e Funcionalidades
Primeiramente, alguns devem estar se perguntando por que não utilizei o backend embutido no Next.js. Como no meu jogo eu não queria fazer uso de bancos de dados para manter o desenvolvimento o mais simples o possível, eu optei por guardar tudo em memoria, Bem, é como se esse backend fosse uma mesa de jantar temporária montada apenas para cada refeição, não guardam nenhum estado nem informação da vez anterior que o código foi rodado.
Agora, vamos falar sobre essa grande festa que é o jogo online. Imagine que você está organizando uma festa épica. Para garantir que tudo corra perfeitamente, você contrata um experiente gerente de eventos, o RoomManager. Ao chegar até ele e expressar sua vontade de se divertir com seus amigos, o RoomManager rapidamente organiza uma sala confortável especialmente para vocês. Ele entrega a você vários convites (o link da sala) para que você possa compartilhá-los e convidar seus amigos para a festa.
Ao enviar os convites, seus amigos chegam à festa e se apresentam ao RoomManager, que os guia até a sala que você reservou. Nessa sala de festa personalizada, você define as regras, escolhe a playlist de músicas e decide quais drinques serão servidos. É como ter seu próprio espaço exclusivo para criar a atmosfera perfeita para se divertir.
O RoomManager também fica de olho em quem entra e sai da sala, se por acaso você como líder sair da sala, tem que passar a responsabilidade de líder para outra pessoa, para que a festa não pare. E quando todos saem da festa, o RoomManager rapidamente limpa tudo e organiza para uma próxima.
E aqui está o incrível: cada sala representa um jogo separado. Imagine que cada uma delas é como um mini universo, com seus próprios baralhos de cartas, lista de convidados e configurações exclusivas. Essas salas são autossuficientes e cuidam de todos os detalhes - desde embaralhar as cartas até proclamar o grande vencedor da festa. É como ter várias festas dentro de uma mansão festiva. Simplesmente espetacular!
Nossa confiável ferramenta de comunicação, o Socket.IO, atua como o diligente mordomo da sala. Sempre presente, sempre alerta. Este mordomo não está lá apenas para atender às demandas internas da sala. Oh não! Ele também tem a tarefa de manter uma linha de comunicação ininterrupta com o mundo externo.
Então, imagine isto: um convidado (front-end) na festa quer enviar uma mensagem para a sala. Ele escreve um bilhete (envia uma mensagem) e o entrega ao mordomo (Socket.IO). O mordomo, sendo o fiel intermediário, imediatamente leva essa mensagem para a sala de festas correspondente (o back-end).
Agora, lembra da nossa sala autossuficiente? É hora de ela entrar em ação. Assim que a mensagem chega, a sala (GameRoom) sabe exatamente o que fazer. Seja para chamar um garçom para servir mais bebidas, passar para a próxima musica, ou para anunciar o próximo jogo, a sala ativa o método necessário com base no conteúdo da mensagem.
E é assim que nosso confiável mordomo Socket.IO garante que todas as mensagens dos convidados (front-end) sejam atendidas prontamente pela sala (back-end), garantindo uma festa sem problemas e divertida para todos!
E é assim, meus caros amigos, que organizamos uma grande festa digital, ao estilo "Cards Against Humanity"!
A Arte do Frontend: Construindo Interfaces e Experiências
Um Jogo não pode "só funcionar", ele tem que ser bom de jogar, os jogadores tem que ter uma experiencia boa.
Criar o frontend do jogo foi um desafio empolgante e complexo. A primeira preocupação foi garantir que a interface fosse responsiva e visualmente agradável em todos os tamanhos de tela. Afinal, queríamos que os jogadores pudessem desfrutar da experiência do jogo independentemente do dispositivo que estivessem usando. Para acelerar o processo de desenvolvimento, decidi utilizar o Tailwind CSS em conjunto com a biblioteca DaisyUI. Essas ferramentas foram essenciais para agilizar a estilização e garantir um design coeso e atraente.
Ao lidar com a complexidade do gerenciamento de estado no React, o contexto desempenhou um papel crucial. No projeto, temos o GameContext, um contexto especial que armazena todas as informações recebidas do servidor e está disponível em todo o projeto. Isso significa que em qualquer lugar do jogo, podemos acessar e exibir informações em tempo real sobre o estado atual do jogo.
O GameContext também inclui várias funções importantes que nos permitem interagir com o jogo. Podemos entrar em uma sala, sair dela e realizar jogadas. Essas funções permitem que os jogadores participem ativamente do jogo e garantem que todas as ações sejam refletidas no estado do jogo em tempo real.
Ao utilizar o GameContext, os componentes podem consultar esse contexto para obter as informações atualizadas do jogo de forma fácil e eficiente. Se um componente precisar exibir dados específicos do jogo ou realizar ações relacionadas ao estado do jogo, basta consultar o GameContext para obter as informações necessárias. Essa abordagem torna o desenvolvimento mais simples e ajuda a manter uma sincronização consistente entre os componentes.
Automatizando o Deploy
Pronto, na minha máquina funciona, mas agora surge a grande questão: como compartilhar esse projeto com o mundo? Chegou a hora do tão aguardado deploy. É nesse momento que levamos nosso trabalho do ambiente de desenvolvimento para um servidor acessível a todos. É hora de mostrar ao mundo a nossa criação e permitir que todos desfrutem da experiência que construímos.
No entanto, o processo de deploy pode ser complexo e desafiador. Temos muitas questões para responder, configurar corretamente os serviços e garantir que tudo esteja funcionando perfeitamente são etapas cruciais para o sucesso do lançamento. Mas não se preocupe! Estamos prontos para enfrentar esse desafio de frente.
Ao decidir sobre o provedor de hospedagem para o meu projeto, ponderar as opções disponíveis foi fundamental. Embora a AWS e outros provedores de hospedagem renomados tenham suas vantagens e ampla popularidade, optei por embarcar na jornada com a Linode. Por quê? Em primeiro lugar, o fator determinante foi o aspecto financeiro. A Linode oferece uma solução de hospedagem mais acessível, ideal para projetos em escala menor, como o meu. Além disso, a interface da Linode também desempenhou um papel importante na minha decisão. Senti que ela era mais organizada e intuitiva, o que facilitou a minha experiência de gerenciamento e implantação do projeto. Embora as escolhas de hospedagem possam variar de acordo com as necessidades e preferências individuais, a Linode se mostrou a escolha certa para o meu projeto, proporcionando uma hospedagem eficiente e confiável.
Beleza, temos um lugar para colocar o jogo para funcionar, eu poderia acessar o meu host, baixar o projeto lá e mandar rodar. Porem, software nunca está pronto, e se eu quiser fazer uma alteraçãozinha, terei que mandar manualmente os arquivos novos e reiniciar o servidor, não é algo pratico, muito menos divertido.
Aqui entra em ação o algumas ferramentas novas, Docker e Github Actions.
Docker pode ser imaginado como um pacote especial para seu projeto. Ele empacota todas as dependências e configurações necessárias, semelhante a um chef que prepara todos os ingredientes para você, garantindo eficiência e funcionamento sem problemas.
Agora, vamos conhecer o GitHub Actions. Ele é como o maestro de uma orquestra. Ele coordena todas as partes móveis do processo de implantação, garantindo que tudo aconteça no momento certo e na sequência correta. É como ter um regente que conduz a melodia, chamando as ações necessárias quando necessário. Com o GitHub Actions, você pode definir fluxos de trabalho personalizados que executam tarefas automatizadas, como compilação, teste e implantação, sem você precisar levantar um dedo.
Apresentados os heróis da festa, vou dizer o que eles fizeram de bom para o projeto, falando sobre as ações do Github Actions. Na primeira ação, o pipeline do GitHub Actions coloca o seu código backend em destaque, enviando-o diretamente para o Docker Hub. É como ter um correio rápido e eficiente que leva o seu código para um local seguro, pronto para ser implantado no mundo digital.
Mas isso é apenas o começo! Na segunda ação o script chama um personagem especial no servidor chamado "update.sh". Esse script é, desenvolvido especialmente para o nosso projeto. Ele tem a tarefa de interromper a execução do servidor atual, remover o container onde o jogo está rodando, baixar novamente o projeto atualizado diretamente do Docker Hub e, por fim, executar o container Docker com a versão mais recente do jogo.
Essa combinação de ações é como um maestro regendo uma sinfonia perfeita. Cada movimento é sincronizado, garantindo que o jogo esteja sempre atualizado e pronto para ser jogado. É como ter um assistente pessoal que cuida de todas as atualizações e implantações para você, deixando-o livre para focar no desenvolvimento.
Domínio
Após realizar as configurações necessárias, direcionei o domínio principal "cyberchaoscards.com" para o frontend do jogo, proporcionando aos jogadores uma experiência única ao acessar o site. Além disso, criei um subdomínio chamado "server.cyberchaoscards.com" dedicado ao backend.
Além do domínio eu precisava adicionar o certificado SSH, para que aquele cadeado bonito que significa que o HTTPS está disponível na minha pagina.
No frontend foi fácil, a Vercel que escolhi de host cuida de todo o trabalho para mim. Agora no backend, precisei adicionar mais um super herói na lista, o Nginx.
Primeiramente, era necessário configurar um proxy reverso para direcionar corretamente o tráfego do servidor web. Como um verdadeiro mestre de cerimônias, o Nginx entrou em cena. Ele assumiu o papel de direcionar as solicitações recebidas no domínio "server.cyberchaoscards.com" para o container docker rodando o servidor, onde o jogo estava sendo executado. É como ter um guia experiente que leva cada convidado à sala de festa correta, garantindo que todos cheguem ao destino desejado.
Com o Nginx configurado era hora de adicionar o certificado SSH, encontrei a ferramenta Certbotsó segui a documentação de como utilizá-lo com Nginx e sucesso, tudo funcionando perfeitamente.
Em resumo,
- Queria fazer uma versão do jogo "Cards Agains Humanity" online.
- Encontrei um jogo de sucesso com um design que se encaixava no meu jogo.
- Figma me ajudou a "copiar" o design fazendo as adaptações necessárias.
- Desenvolvimento com React, NextJS, Nodejs e SocketIO
- Deploy do frontend foi feito na Vercel
- Deploy do backend foi feito na Linode
- Github Actions e Docker ajudaram a diminuir a barreira entre desenvolvimento e deploy.
- Me diverti muito jogando o resultado final com meus amigos.
Nada é mais empoderador do que dar vida às suas próprias visões. Ao mesclar sua paixão com habilidades técnicas, você pode criar um mundo de possibilidades ilimitadas. Não espere que outros o façam por você - seja o mestre de sua própria criação.
Resultado
