feat: Avatar para Usuários

[matheussatoshi]

Descrição

Avatar para Usuários

Descrição

Adicionar suporte para os usuários personalizarem seu perfil com um avatar. Isso ajudaria a criar uma identidade visual mais forte, tanto nas postagens quanto nos comentários.

Motivação

A introdução de avatares tornaria a experiência do usuário mais personalizada e visualmente atrativa, ajudando na identificação e engajamento entre os membros da comunidade.

@filipedeschamps

Sugestão de implementação

No response

[kayon-ariel]

Acredito que isso ainda não tenha sido implementado, pois irá gerar custos e aumentar a complexidade com storage de imagens.

Posso estar enganado mas pelo que vi, não tem nenhuma funcionalidade que englobe o upload de imagens atualmente.
Teria que ser utilizado algo como S3 da AWS ou min.io.

[ttdsgms]

Isso faz sentido e eu concordo, mas acho que tem como fazer isso mesmo sem um sistema/funcionalidade de upload de imagens e o storage de imagens. Trago ideias que acho que podem solucionar ou contornar esse problema e ainda um bônus: lidando com placeholders.

Como esse texto que eu vou mandar tem muita coisa vou colocar em lista pra ficar mais fácil.

1. Gravatar (Minha recomendação final)
2. Conta Google (Uma outra abordagem)
3. Link de URL (Uma outra abordagem, mas que não acho que seria a melhor ideia.)

1. Gravatar

Suponho que talvez vocês já conheçam o Gravatar, que é um serviço amplamente utilizado para associar uma imagem de perfil a um e-mail. Ele permite que o usuário configure uma foto associada ao seu endereço de e-mail e, em seguida, essa foto seja automaticamente carregada sempre que o e-mail for usado em diferentes sites que utilizam esse serviço. Isso pode ser muito útil, já que é uma solução que não depende de armazenar as imagens diretamente no TabNews, mas sim de uma plataforma externa. O Gravatar já é amplamente adotado em diversas plataformas e muitos usuários já possuem uma conta lá, o que poderia facilitar a integração com o sistema do TabNews. Sites como o WordPress, Slack, OpenAI com o ChatGPT, Figma, Stack Overflow e até o próprio GitHub usam o Gravatar.

2. Conta Google

Além disso, do Gravatar, uma outra abordagem seria usar a integração com contas Google. muitas vezes uma conta já possui uma foto de perfil associada. Isso pode ser uma boa alternativa, pois além de facilitar o processo de login, a foto de perfil do Google geralmente é sincronizada automaticamente em diversos serviços que utilizam a plataforma. Com isso, seria possível integrar facilmente a imagem de perfil do usuário sem a necessidade de upload manual ou armazenamento adicional de imagens no sistema do TabNews.

3. Link de URL

Uma outra abordagem seria permitir que o usuário insira diretamente um link de URL para a sua imagem de perfil. Isso poderia ser feito por meio de um simples campo de input onde o usuário colaria a URL da imagem que deseja utilizar. Apesar de parecer uma solução simples e direta, eu não considero essa a melhor alternativa por alguns motivos.

Primeiramente, existe uma questão de segurança. Permitir URLs externas pode abrir brechas para ataques de injeção, como o XSS, onde um atacante poderia inserir um link malicioso apontando para um conteúdo prejudicial. Além disso, URLs externas podem não ser confiáveis: uma imagem hospedada externamente pode ficar indisponível por diversos motivos (o servidor pode cair, a imagem ser removida, etc.), o que resultaria em um link quebrado, afetando a experiência do usuário.

Outro problema com URLs externas é o controle de privacidade. Não temos como garantir que o conteúdo da URL fornecida seja adequado ou seguro. Ou seja, é possível que um usuário insira uma imagem que contenha informações sensíveis ou inapropriadas, e isso pode gerar complicações em relação à moderação de conteúdo.

Por fim, performance também pode ser um problema. Se o usuário estiver usando imagens hospedadas em servidores lentos ou em plataformas que não têm boa performance de entrega (como servidores de imagens pessoais ou hospedagem gratuita), isso pode impactar a velocidade de carregamento da página. Como as imagens estariam sendo carregadas de servidores externos, a latência da rede pode ser um fator limitante.

Por esses motivos, apesar de ser uma solução simples, eu acredito que essa abordagem traz riscos consideráveis em termos de segurança, confiabilidade e performance. É sempre preferível usar soluções como Gravatar, contas de redes sociais ou até mesmo placeholders, que oferecem mais controle e consistência para a aplicação.

Ideia bônus: Lidando com placeholders

E para os casos em que os usuários não optarem por adicionar uma foto de perfil, uma alternativa interessante pode ser o uso de placeholders. Em vez de forçar o upload de uma imagem, podemos recorrer a imagens padrão geradas automaticamente, que serviriam como substitutas para perfis sem foto.

Caso a ideia do Gravatar vá pra frente, acaba que isso que eu vou falar a seguir pode ou não ser descartável porque o próprio Gravatar também oferece um recurso de placeholder. Quando um usuário não configura uma imagem de perfil, o Gravatar exibe uma imagem padrão com as iniciais do nome do usuário ou uma versão genérica, dependendo das configurações. Esse tipo de fallback pode ser útil para garantir que sempre haja uma imagem visível, sem precisar forçar um upload ou o uso de links externos.

Mas também da pra colocar placeholders sem ser a do Gravatar o que traria mais customização.

Existem várias ferramentas que permitem criar placeholders, inclusive algumas que geram imagens no formato SVG. Uma das opções mais conhecidas é o Via Placeholder, que oferece uma maneira fácil de gerar imagens com dimensões específicas. No entanto, essa ferramenta apresenta algumas limitações. Por exemplo, ela não oferece suporte para SVG e, além disso, senti que tem apresentado um desempenho um pouco ruim nas últimas semanas, com lentidão nas requisições, o que pode afetar a experiência do usuário.

Uma solução melhor, que eu recomendaria, é o Placehold.co. Ele é muito mais flexível, oferecendo suporte a uma variedade de formatos, incluindo SVG e outros tipos de mídia. O Placehold.co também permite uma personalização mais avançada, como a alteração das cores, fontes e até mesmo a adição de texto à imagem, tudo por meio de parâmetros na URL. Por exemplo, você pode gerar uma imagem de 128x128px com a inicial "T", com cores personalizadas, como neste exemplo: Placehold.co Exemplo. Isso proporciona um nível de customização interessante para que o sistema gere imagens únicas e adequadas ao estilo da plataforma.