Da teoria à prática: Criando um produto.
Sabe aquele projeto ou aquelas ideias que você anota em um papel ou guarda na cabeça e deixa de lado por um bom tempo ?! É sobre isso que vou falar aqui.
Antes de mais nada, esse post não é somente técnico, então espero que seja útil para que você, assim como eu, comece a tirar suas ideias do papel e pôr em prática 😊🤙🏼
Há 2 anos mais ou menos, por uma necessidade bem específica para uma determinada tarefa da minha sprint na Nuvemshop, acabei comprando um domínio que serviria como uma “máscara” de uma url que a gente pudesse alterar depois. Após essa tarefa o domínio não teria mais utilidade(ou não). Em Janeiro de 2020 isso mudou.
Em 2019 dediquei uma parte do meu tempo para estudar mais sobre novas tecnologias, processos e etc. Entrei de cabeça em alguns livros, cursos e muita documentação. As semanas OmniStack da RocketSeat me deram um boost nesse caminho e consegui aprender muita coisa legal e útil em poucas semanas. Super indico para quem quer aprender mais sobre as tecnologias utilizadas pelos maiores players do mercado e para dar um up na sua carreira como profissional de tecnologia. 🚀🚀
Começando…
Quando veio a renovação do domínio(tinu.be), eu poderia pagar ou deixar vencer. Paguei! Imaginei que esse ato seria o start do projeto. A partir daí comecei a pensar qual seria o projeto, então pelo nome tão curto e pelo que ele já foi utilizado antes, decidi criar um encurtador de urls.
“Ah Bruno mas já existem vários por ai”. Óbvio que existem, assim como existem vários apps de to-do, de música, de postar fotos e etc. Mas se eu tenho a oportunidade de criar algo do zero, aprender com isso e ainda tornar útil para alguém, por que não fazê-lo?! Eu quero mais é aprender fazendo!
Documentação
Antes de começar o projeto, busquei referências e necessidades relacionadas a encurtadores de url, então documentei algumas possíveis funcionalidades no Evernote e criei tarefas de acompanhamento no Trello.
Escolhendo as tecnologias e linguagens
Como meu foco sempre foi desenvolvimento Frontend e interface, tudo que estudei era baseado nisso, incluindo o backend com nodeJS que é Javascript. Então ficou da seguinte maneira:
- Frontend: ReactJS para a interface
- Backend: NodeJS + Express para criar a api
- Banco de dados: MongoDB para salvar as informações das urls
Não vou entrar a fundo em como cada parte foi feita, escolhi essa stack por ser a que venho estudando nos últimos meses. Preferi organizar de forma que a api ficasse independente, porque pensando a longo prazo, quero deixar o projeto open-source ou de alguma forma disponibilizar para que outros profissionais possam utilizar e quem sabe me ajudar a melhorar o projeto. 🙌🏼
A interface
Antes de criar a interface, um ponto importante é entender a core feature do projeto, que é o “formulário para encurtar a url”. Por ser um SPA (single page application) essa feature deve ser o ponto principal e é preciso torná-la fácil de usar para garantir a melhor experiência(UX — User experience) para o usuário. Normalmente começo com um moodboard, que é basicamente uma tela com várias imagens de referência para o projeto.
Depois começo a criar algumas ideias no papel e logo em seguida sigo para protótipos mais realistas no Sketch App de forma bem livre.
Mas como escolher a melhor opção? não tem uma melhor opção, quem vai “dizer” se é bom ou não é o usuário enquanto utiliza sua aplicação. Não é sobre ser bonito é sobre ser funcional. 😉
O desenvolvimento
Como dito mais acima, o desenvolvimento está sendo feito em ReactJS e nodeJS, consigo trabalhar de forma assíncrona adicionando os 2 ao vsCode. Ainda tenho muito a aprender e continuo estudando sobre essa stack, então busquei fazer com a menor dependência de packages possível, mas ainda utilizei alguns para eu poder me focar no core.
As urls encurtadas são gravadas no banco de dados e também ficam disponíveis na tela do usuário via localStorage(temporariamente), até que a funcionalidade de cadastro de usuários seja implementada.
Outro recurso que me ajuda bastante é o Insomnia, ele é um client para debugar/testar rest api.
Separei a aplicação em dois repositórios no github, um para o backend e outro para o frontend, até mesmo porque nem sempre vou precisar fazer deploy desses dois ao mesmo tempo, exemplo: se eu mudo a cor de um botão isso não influencia no backend, então faço deploy do que foi modificado diretamente no frontend
E a infraestrutura? hospedagem?
Eu sempre trabalhei em projetos com escopos e objetivos bem variados e para a maioria deles eu utilizava a Digital Ocean onde sempre tive um bom atendimento e experiência. Então criei um droplet para o projeto e fiz toda a configuração via ssh(terminal). Meu primeiro desafio foi rodar uma aplicação nodeJS em um servidor rodando Linux do zero, felizmente encontrei facilmente artigos na comunidade da D.O que me ajudaram com esse passo.
O deploy
Para fazer o deploy para o servidor, estou usando o Codeship, ele automatiza o build e faz o deploy com a branch master de cada repositório.
Estou utilizando um custom script de deploy com rsync no ‘pós-build’. Não sei se atualmente é a melhor forma de fazê-lo, mas é a que eu conheço e utilizo em outros projetos. Pretendo estudar outras formas em breve 😊
A branch master só recebe um commit quando uma nova release é criada, assim que o merge dessa release é feito na master, o Codeship roda o build e consecutivamente o deploy.
Próximos passos
Continuar estudando e acompanhando o projeto afim de criar melhorias e ajustar tudo que for necessário para oferecer a melhor experiência para quem usa. Também pretendo criar uma admin para usuários cadastrados.
E quem sabe, enfim, saia o app 👀
Aprendizados importantes
- Peça ajuda sempre que necessário, mas não espere a solução de bandeja. Aprenda como essa solução que você está buscando é feita. Agradecimento especial ao amigo Regison Melo por toda ajuda com a infra mesmo em outro fuso-horário. 🤜🏼 🤛🏼
- Documente TUDO! E leia a documentação de tudo que você usa.
- Você poderá levar dias para solucionar um ‘problema’ que será resolvido em alguns minutos, faz parte, apenas não desista, aprenda. 🤞🏼
Se você chegou até aqui, obrigado!! 🤙🏼
[Atualização em 21/04/2020 👇🏼]
