Forem: Edeilton Oliveira

Utilizando pseudo-elementos do CSS e interfaces no TypeScript

Edeilton Oliveira — Sun, 11 Feb 2024 06:25:58 +0000

Hoje vamos misturar CSS com TypeScript no mesmo post para entender como construir interfaces usando pseudo-elementos e interfaces! (what?)

Revisei pseudo-elementos no CSS durante o desenvolvimento do temporizador disponível aqui nesse link, mas não é de hoje que esses seletores me chamam a atenção. Acho interessantíssima a ideia de poder criar e estilizar um elemento que é renderizado em tela, sem a necessidade de adicionar elementos extras ao HTML ou ter que usar JavaScript.

Na especificação desse projeto, há uma tabela com uma coluna de status que tem uma bolinha (que pode assumir três cores diferentes) e o título do status, conforme mostrado abaixo, na coluna mais à direita:

Para criar essa bolinha, talvez o seu primeiro pensamento seja usar um componente estilizado dentro do td de status da tabela (mesmo que não seja um componente em outro arquivo, já que é algo simples). Daí teríamos dois elementos: a bolinha e o texto, com um gap entre eles.

Mas dá pra fazer melhor: pode ser só o texto com um ::before. E se você ainda não sabe o que é isso, vem comigo que eu te explico — e se já sabe, vem relembrar!

Utilizando pseudo-elementos

Resumidamente, ::before e ::after são pseudo-elementos do CSS criados, respectivamente, antes e depois da coisa que você tá estilizando. No exemplo abaixo (que utiliza Styled Components), estou criando a bolinha antes dessa div estilizada, já que ela fica à esquerda do texto:

export const Status = styled.div`
  display: flex;
  align-items: center;
  gap: 0.5rem;

  ::before {
    content: '';
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: ${(props) => props.theme['yellow-500']};
  }
`

O background desse pseudo-elemento utiliza uma arrow function com props.theme somente por conta do Theme Provider da aplicação, mas você não precisa se preocupar com isso agora. Se preferir, por enquanto, imagine apenas uma cor fixa em hexadecimal e teremos o mesmo resultado.

Lembre-se que mesmo que você não queira exibir conteúdo algum dentro do pseudo-elemento, é sempre necessário usar o content: '';, caso contrário, ele não aparece na tela. Já na estrutura da página, cada linha da tabela será assim:

<tr>
  <td>Tarefa X</td>
  <td>30 minutos</td>
  <td>Há 3 meses</td>
  <td>
    <Status>Concluído</Status>
  </td>
</tr>

Agora que o texto e a bolinha já aparecem na página, vamos pro próximo passo: mudar a cor de acordo com o status do componente.

Adicionando uma interface em TypeScript

Como alterar a cor no arquivo de estilos de acordo com o status da tarefa? Fácil: passando propriedades, mais ou menos como fazemos em componentes JSX.

Para isso, você pode criar uma interface no arquivo de estilos e passar pro componente usando os generics do TypeScript. Confira abaixo:

interface StatusProps {
  statusColor: 'green' | 'yellow' | 'red'
}

export const Status = styled.div<StatusProps>``

E não podemos esquecer de passar a propriedade ao usar o componente lá na estrutura da página:

<Status statusColor="green">Concluído</Status>

“E aí, tá pronto?”

Não.

Definindo a constante de cores

A cor ainda não muda pois tá fixa dentro do estilo do Status (no primeiro snippet de código desse post) e as cores que estamos utilizando ficam em um objeto que tá em outro arquivo, pois a aplicação utiliza o ThemeProvider do Styled Components. Você pode conferir conferir as constantes de cor no arquivo src/styles/themes/main.ts.

Para ter acesso a esses valores, uma solução é criar uma constante STATUS_COLORS, como é mostrado a seguir:

const STATUS_COLORS = {
  green: 'green-500',
  yellow: 'yellow-500',
  red: 'red-500',
} as const

Por fim, lembra do background com o props.theme que poderia ser uma cor fixa? Agora precisamos tornar ela dinâmica, de acordo com o Theme Provider e a constante de cores que acabamos de definir. Veja no exemplo abaixo:

::before {
  background: ${(props) => props.theme[STATUS_COLORS[props.statusColor]]};
}

Ou seja: pegue a propriedade statusColor (disponível nas props do componente), utilize como índice no objeto STATUS_COLORS e, com o valor retornado, acesse a cor desejada no theme do provider (também disponível via props, no arquivo App.tsx da aplicação).

Com isso — e contando que seu Theme Provider esteja configurado — o componente já deve alterar a cor da bolinha conforme o status passado por meios das propriedades. Lindo, né?

Vamos revisar o funcionamento:

O componente Status recebe a cor pela propriedade statusColor lá no JSX;
O estilo dele pega esse valor via generic do TypeScript — que está recebendo a interface StatusProps, definida nos estilos;
Essa interface fixa que os valores aceitos são os mesmos da constante STATUS_COLORS;
Os valores das chaves na constante STATUS_COLORS coincidem com os nomes das cores fornecidas pelo Theme Provider no arquivo App.tsx;
O Theme Provider recebe o objeto mainTheme, contendo os hexadecimais das cores.

Facilitando a manutenção

Perceba que, na etapa 3 da revisão acima, os valores possíveis para a interface devem coincidir com a constante. Mas e se uma nova cor de status for adicionada ao componente? Precisamos editar a constante e a interface?

Até aí sim, mas podemos evitar isso adaptando a interface StatusProps para que statusColor sempre se ajuste aos valores das chaves da constante STATUS_COLORS. Confira:

interface StatusProps {
  statusColor: keyof typeof STATUS_COLORS
}

Depois de dessa alteração, sabemos que sempre vamos ter uma equivalência entre as chaves de STATUS_COLORS e a lista de cores aceitas pela nossa interface. Agora não precisamos mexer em dois lugares ao modificar a lista de cores — basta alterar a constante.

Pronto! Agora, com tudo configurado, basta chamar o componente Status passando a propriedade que corresponda ao status da tarefa.

Concluímos que, além de uma solução bastante elegante, os pseudo-elementos no CSS são ferramentas excelentes para adicionar elementos em tela sem poluir o HTML ou recorrer ao JavaScript.

Em relação ao uso de interfaces em TypeScript e uma constantes de cores, percebemos que essas soluções tornam a implementação mais flexível e fácil de se adaptar a mudanças posteriores do projeto — o que torna a manutenção do código muito mais simples.

Curtiu aprender um pouco mais sobre o mundo do desenvolvimento front-end? Então me segue que em breve tem mais!

Personalizando o modelo de usuário do Django

Edeilton Oliveira — Sat, 02 Dec 2023 16:37:50 +0000

Quer usar o seu próprio modelo de usuário na autenticação do Django? Vem comigo que eu te ensino em 4 passos simples!

O Django é uma ferramenta bastante útil para acelerar o processo de desenvolvimento de software pois já entrega diversas funcionalidades comuns — entre elas, um sistema de autenticação com um modelo próprio de usuário, que será o foco das próximas linhas.

Se você está desenvolvendo um projeto nesse framework e seus models incluem uma classe de usuário que não é nativa dele, ela não será lida automaticamente como um modelo para autenticação de usuário.

O que acontece é que, ao implementar a autenticação para usuários por meio da função helper create_user(), o Django cria uma tabela própria de usuários, ignorando o modelo e as características que você definiu no arquivo models.py. Isso pode ser um problema quando o modelo de usuário da sua aplicação tem atributos específicos ou, ainda, é referenciado por Foreign Keys (FK) em outros modelos.

AbstractUser e AbstractBaseUser

Para resolver isso, precisamos criar um modelo personalizado baseado no modelo padrão do Django e existem duas maneiras de fazer isso: estendendo AbstractUser ou AbstractBaseUser.

Escolhendo AbstractUser, você estenderá uma classe que inclui recursos normalmente utilizados em modelos de usuário. Isso inclui campos como username, password, email, first_name e last_name, além de outros atributos e métodos para funcionalidades comuns relacionadas à manipulação de usuários.

Enquanto isso, AbstractBaseUser fornece apenas o mínimo necessário para um modelo de usuário. Não inclui os campos citados anteriormente e é mais adequada quando você deseja ter controle total sobre o modelo de usuário, permitindo que você defina seus próprios campos.

Nesse último caso, como é especificado pela documentação do framework, você também precisa definir o campo de nome de usuário (usado como login) e os campos obrigatórios do modelo por conta própria.

Executando o passo a passo

Nesse caso, vamos escolher AbstractUser pois é uma classe mais completa e já fornece, entre outros, os campos de nome de usuário e senha.

Passo 1: crie o novo modelo de usuário

No arquivo models.py, faça o seguinte:

from django.contrib.auth.models import AbstractUser

class CustomUser(AbstractUser):
    bio = models.CharField(max_length=128, null=True)
    # Adicione características personalizadas conforme necessário

Observe que não é necessário incluir campos básicos de login, como nome de usuário, e-mail e senha, pois eles já estão presentes em AbstractUser. Além disso, por padrão, o Django não trata o campo de e-mail como único na tabela, portanto, se desejar que isso seja feito, especifique isso na definição do CustomUser:

email = models.EmailField(unique=True, null=False)

Depois da definição, use CustomUser como FK onde for necessário nos outros modelos. Por exemplo:

class Post(models.Model):
    author = models.ForeignKey(CustomUser, on_delete=models.CASCADE, null=False)

Passo 2: atualize as configurações do projeto

No arquivo settings.py, certifique-se de que a aplicação faça parte do projeto:

INSTALLED_APPS = [
    'app',
]

Informe também que o modelo de autenticação que deve ser utilizado pelo Django agora é o seu modelo customizado:

AUTH_USER_MODEL = 'app.CustomUser'

Nos dois casos, lembre-se de alterar app pelo nome da sua aplicação.

Passo 3: personalize a interface administrativa

No arquivo admin.py, importe e registre os novos modelos e, se desejar, utilize list_display para definir quais campos do modelo serão exibidos no painel de administração do Django:

from django.contrib.auth.admin import UserAdmin
from .models import CustomUser

class CustomUserAdmin(UserAdmin):
    list_display = (
        'id', 'email', 'username', 'bio', 'created_at', 'is_staff'
    )

admin.site.register(CustomUser, CustomUserAdmin)

Se não quiser personalizar a exibição com o list_display, use a palavra reservada pass no lugar. O painel administrativo exibirá a tabela de usuários com os campos padrão do AbstractUser. Isso não influenciará nos atributos do model, é apenas um ajuste para a exibição dos registros.

Passo 4: aplique as mudanças no banco de dados

Finalmente, execute os comandos makemigrations e migrate para aplicar as modificações ao banco de dados:

$ python manage.py makemigrations app
$ python manage.py migrate

E claro, mais uma vez, lembre-se de alterar app pelo nome da sua aplicação.

Depois de seguir esse passo a passo, você poderá utilizar o sistema de autenticação do Django ao mesmo tempo em que mantém as características específicas do seu modelo de usuário.

E aí, gostou? Se liga aí que em breve tem mais post ;)

Root, flash e custom ROM no Xperia X8 (e um pouco de história)

Edeilton Oliveira — Wed, 13 Sep 2023 00:40:13 +0000

Como fazer o root, o flash de um recovery e instalar uma custom ROM no Sony Ericsson Xperia X8 de um jeito fácil (dentro do possível).

Se você só tá precisando do tutorial (o que eu duvido muito, já que estamos em 2023) e quer ir direto pra ele, vá para o próximo subtítulo. Aqui eu vou falar brevemente sobre por que quis inaugurar meu blog com um tutorial de custom ROM pra um smartphone idoso.

Um pouco de história

A real é que eu sempre gostei de documentar coisas, explicar, fazer tutoriais e registrar a minha história. Meus celulares fizeram parte disso e traquinar no sistema deles era meu hobby.

Em uma dessas eu comprei um Xperia X8 que rodava Android 2.1 e uma das limitações daquela versão era que os aplicativos não podiam ser movidos para o cartão de memória — e a memória interna dele era bastante limitada.

Pensei "vou comprar e atualizar pro Froyo" (aliás, quem lembra de quando a Google nomeava as versões do robozinho com nomes de doces? Bons tempos). O problema era que a Sony Ericsson já tinha encerrado o ciclo de atualizações dele — que iniciou no Android 1.6 — o que me obrigava a ir pras custom ROMs.

O então projeto CyanogenMod era a melhor (senão a única) opção para isso e só dependia de uma aplicação de recovery personalizada — que, por sua vez, dependia de um sistema com root. Digo com segurança que o X8 foi o aparelho que mais me deu trabalho pra fazer tudo isso e é por isso que decidi fazer um tutorialzinho lá na época, pro caso de precisar no futuro.

Juntei links, anotei passos que executei graças aos tutoriais que fui lendo e no fim tive uma documentação tão bonita que quis compartilhar com quem mais tivesse interesse e, pra isso, mandei pra um blog que acompanhava, sugerindo a publicação.

O tutorial foi publicado lá em 2012 e sempre levei isso como algo especial ~~na minha carreira de construtor de tutoriais~~. Hoje, 11 anos depois, quero manter essa história viva, então trouxe ele pra cá.

E aí, quer saber como instalar uma custom ROM no Xperia X8? Vem comigo que eu te ensino — ou melhor, o Edeilton do passado vai te ensinar!

O tutorial

Daqui em diante siga por sua conta e risco e, caso decida continuar, não esqueça de fazer backup. Esse processo irá apagar todos os dados que estejam armazenados na memória interna.

Os links pra download dos programas estão no fim do tutorial, mas depois de mais de uma década, não funcionam mais. Mantive apenas pra ter uma lista fácil do que baixar.

Root do sistema

Instale o PC Companion;
Execute o SuperOneClick como administrador;
No celular, vá em Configurações > Aplicativos > Desenvolvimento > Depuração USB e marque essa opção;
Conecte-o por USB ao PC e aguarde reconhecer;
Clique em “Root” na barra superior do SuperOneClick e aguarde o término do processo;
Clique em OK nas possíveis mensagens e veja na área de notificações do lado esquerdo se o processo continua. Caso não, reconecte o aparelho e tente novamente;

Para saber se deu certo, veja no celular se foi instalado um aplicativo chamado “SuperUser”. Se sim, está pronto. Se não, refaça o processo.

Flash do xRecovery

Baixe o xRecovery e copie os arquivos que estiverem contidos nele para o cartão de memória do celular;
Baixe no Android Market, o ES Explorador de Arquivos;
Baixe o Root Explorer, e transfira-o para o cartão de memória do X8;
Com o ES, procure o Root Explorer, instale-o e depois reinicie o aparelho;
Com o Root Explorer, procure os arquivos do xRecovery (busybox, chargemon e xrecovery.tar) e copie um por um para a pasta /system/bin do celular. Antes de colá-los na pasta, procure no topo do Root Explorer, um botão chamado “Mount RW”, toque nele, depois cole os arquivos (deverá ficar como “Mount RO”).
Reinicie o aparelho e ao aparecer o nome e logo da Sony Ericsson, segure no botão de voltar. Se aparecer uma tela com opções em inglês e um Android Trollface ao fundo, o xRecovery foi instalado corretamente. Se não, refaça o processo.

Flashtool

Baixe o FlashTool e extraia numa pasta (você pode mudar o idioma do programa em Languages e mudar para Portuguese, se quiser);
Baixe o arquivo de Firmware e Baseband;
Vai ter uma série de arquivos. Crie uma pasta (por exemplo, “i15a_2.1.1.A.0.6_Xperia”) na pasta firmware do FlashTool, descompacte e jogue os arquivos lá. A pasta firmware pode estar localizada na pasta do usuário ou no disco C.
Baixe o Loader (x8.sin), renomeie ele para loader.sin e substitua o loader.sin da pasta i15a_2.1.1.A.0.6_Xperia que você acabou de criar;
Execute o Flashtool como admin, vá em Avançadas > Criar Bundle. Ao selecionar a pasta, escolha o local onde você extraiu os arquivos. Há alguns campos de textos que você deve preencher e você pode colocar qualquer coisa, mas a sugestão é preencher com i15a, 2.1.1.A.0.6 e Xperia nos campos Telemóvel, Versão e Branding, respectivamente.
Passe todos os arquivos listados na janela da esquerda para a direita. Para isso, selecione todos, clique na seta para a direita
e clique em OK. Ele irá criar um arquivo .tft que será jogado automaticamente para a pasta firmware.
Ainda com o Flashtools aberto, clique em Flash, escolha o arquivo Firmware e de OK. Espere alguns segundos e uma janela com instruções irá aparecer.

7.1. Desconecte o celular, desligue e aguarde 10 segundos;

7.2. Conecte o cabo USB no celular enquanto segura o botão voltar;

7.3. Solte o botão voltar quando um LED verde acender na parte superior do aparelho. Feito isso, aguarde o término do processo.

Instalando a custom ROM

Transfira a ROM para a raiz do cartão de memória;
Renomeie para “update” (mantenha a extensão .zip);
Reinicie o aparelho com o botão voltar pressionado;
Ao abrir o xRecovery, acesse Factory Reset (full wipe) e confirme a ação;
Vá até Wipe cache partition e confirme, se necessário;
Finalmente, vá em Install update.zip from SD card e confirme;
Aguarde o término do processo e reinicie;

Caso o celular não saia da tela de boot, refaça todos os passos de instalação da custom ROM.

Pronto! Agora o seu Xperia X8 está com Android 2.2 CyanogenMod estável :D