Executando verificação de segurança...
2

Pitch: [Processo de criação] PolarizeMe - O Gerador de Polaroid - Parte 2

Hey, pessoal! Como vão?
To de volta e com diversas novidades!

Se você caiu de paraquedas e ainda não conhece o PolarizeMe, clique aqui e veja a primeira parte deste artigo onde conto com detalhes como desenvolvi um gerador de imagens polaroides e com quais ferramentas.

Site: www.polarizeme.com.br

Para os que já estão familiarizados, neste segundo mês de vida do PolarizeMe consegui desenvolver bastante coisa legal e quero compartilhar tudinho com vocês. Preparados!?

5° semana:

Ao entrarmos no site logo de cara era possível ver o dropzone onde é feito o upload da foto e gerado a polaroid. Recebi alguns feedbacks no 1° artigo para incluir um exemplo da imagem polaroid gerada, pois nem todas as pesssoas sabem o que é uma polaroid. E bom, eles estão certos.

Pensando nisso, comecei a me sentir insatisfeita com o layout do site e decidi que iria reformular bastante coisa. Dessa ideia, se iniciou o desenvolvimento da versão 3.0!

  1. Implementei o Google Analytic, pois o web Analytics da Vercel é limitada e em um futuro próximo eu iria precisar de um plano pago para continuar visualizando métricas importantes. Continuo visualizando as métricas pela Vercel, porém quando não for mais viável, já terei um substituto.
  2. Adicionei a seção "Sobre nós" com detalhes sobre o projeto para que todos entendam seu propósito.
  3. Como o header estava apenas com a logo, adicionei algumas redes sociais relacionadas a mim e ao projeto para não deixá-lo inutilizado.
  4. Um dos requisitos do Google Adsense é um banner para coletar o consentimento do usuário relacionados aos cookies de terceiros. Pra criá-lo peguei diversas referências e estudei sobre o assunto para compreendê-lo da melhor forma possível. Caso tenha interesse na implementação, veja aqui para acessar os arquivos deste componente.
  5. Reorganização da nomenclatura das imagens.

6° e 7° semana:

Foram as semanas mais agitadas e monotonas ao mesmo tempo para o projeto, pois eu estava com um turbilhão de ideias, mas não conseguia tirar nenhuma delas do papel. Começava uma implementação e em seguida parava pela metade, mas no fim, consegui boas referências e com os bons resultados nas tarefas desenvolvidas no trabalho, consegui ter mais energia para finalizar algumas coisas e dar continuidade à outras.

  1. Para trazer modernidade e mais profissionalismo ao site, decidi reformular a página inicial. Antes do usuário por a mão na massa, queria que ele entendesse a utilidade do site, então adicionei um título informando pra que o site serve, uma frase de efeito, um botão para a nova página (que ainda seria criada) do gerador e um exemplo bem vívido do que seria uma imagem polaroid. Como referência utilizei o website PicWish.
  2. Com a mudança acima, decidi criar uma página dedicada para o gerador, pois dessa forma conseguiria criar funcionalidades com mais facilidade, de uma forma mais isolada e organizada. Seu design permaneceu o mesmo de início, apenas realizei alguns ajustes nas funcionalidades já existentes, como o ajuste de manipulação da legenda e seu isolamento em um componente.
  3. Correção da vulnerabilidade word-wrap, porque não é só de novas funcionalides que vive o desenvolvedor.
  4. Houve diversas refatorações de código. Removi CSS inutilizado, reutilizei estilos, tentei utilizar o mínimo possível de bibliotecas, criei componente menores que reutilizo em diversos lugares e ainda estou pensando em maneiras de refatorar a lógica do dropzone.

Bônus: Uma das minhas ideias era adicionar um contador runtime para indicar quantas polaroides já foram baixadas, no entanto, não estava muito afim de criar uma API do zero para essa implementação e o cache não ajudaria muito. Sei que em um futuro próximo irei criar a funcionalidade de login, mas mesmo assim não pretendia criar uma API.

Entretanto, todavia, havia uma opção interessante: Serveless, o melhor amigo de desenvolvedores frontends. Ele é um modelo de computação em nuvem no qual os desenvolvedores podem criar e executar aplicativos sem a necessidade de gerenciar servidores ou infraestrutura de servidor subjacente. Nesse modelo, os provedores de serviços em nuvem, como Amazon Web Services (AWS), Microsoft Azure e Google Cloud Platform (GCP), assumem a responsabilidade pelo gerenciamento dos servidores, escalabilidade e alocação de recursos de forma automática e dinâmica.

Li artigos, ouvi podcasts e vi alguns vídeos sobre Serveless para entender se iria suprir as necessidades do site há longo prazo e como funcionava sua implemetação. O que mais me ajudou foi este vídeo da Rockeatseat, no entanto, priorizei outras funcionalidades mais necessárias.

8° semana:

Mesmo com todas as melhorias, o Google Adsense decidiu ignorar a minha aprovação, então fui pra guerra e comecei a estudar e implementar algumas coisas em paralelo:

  1. Realizei um estudo de campo para conhecer os sites cocorrentes e entender quais os pros e contras do PolarizeMe. Mapeei funcionalidades, verifiquei responsividade e navegação mobile, quantos passos eram necessários para realmente criar uma polaroid, entre outras coisas. No entanto, ainda estou analisando antes de por tudo no papel. Logo trago pra vocês.
  2. Adicionei uma seção para informar as extensões de imagens aceitas com links externos para que seja possível compreender qual a utilidade de cada uma delas, já que a imagens especificadas que pode utilizar da funcionalidade de cor de fundo. Utilizei o (Convert.io)[https://convertio.co/pt/image-converter/] como referência.
  3. Para uma melhor experiência e reconhecimento do PolarizeMe como uma "câmera polaroid online", se tornou possível imprimi-las, além da possibilidade de realizar o download.

Confissão: A navegação mobile está um pouco prejudicada, porém será tratada com mais carinho neste próximo mês.


Isso é tudo? Nops...

Como já se passou quase uma semana do 3° mês, novas coisas já estão sendo desenvolvidas ou finalizadas, porém vou deixá-los ansiosos para saber das novidades hehe.

Gostaria de feedbacks, então caso encontrem melhorias, novas funcionalidades ou até mesmo realizar um code review, estou aberta para ouví-los.

Sobre as métricas deste mês:

Obs: não houve divulgações.

DataUsuáriosVisualizações
01/08 - 01/0982170
DispositivoDesempenho
Mobile96
Desktop83
Tablet99
Carregando publicação patrocinada...
1

Olá meu projeto demorou uns dias para ser aprovado!
Mas demorou por falta de conteúdo!

  • Ideia coloca versão escura o povo tem tara por isso!
  • Versão em inglês, dois motivos, mais gente vai achar e adsense paga mais
  • Aumente as fontes no meu notebook aparecem muitos espaços vazios então aumentar a fonte fica bom pra quem tem visão ruim e coisas fullhd/4k

Se puder faça um pequeno blog(por causa do adsense) 3, ou 4 postagens já ajudam o adsense mudar de ideia!
Alguns artigos de faq já da uns 3, 4 posts para o blog

Boa sorte