DEV Community: Pedro Ramon

Debugar app Android via WSL

Pedro Ramon — Mon, 23 Jan 2023 19:23:12 +0000

A lógica que vou seguir é conectar o android usando o ADB pelo USB normalmente. Na sequência configurar um acesso pela rede (tcpip) e com isso permitir que se conecte pelo WSL. Para isso funcionar, você precisa ter uma conexão de rede entre o smartphone e o computador (provavelmente via WiFi).

Como vamos precisar conectar via USB pelo windows, e depois acessar pelo WSL, você vai precisar do ADB instalado em ambos os sistemas. O jeito mais prático de conseguir isso é instalando o Android Studio. Mas se você, assim como eu prefere não instalar um IDE PESADONA que nunca vai usar, pode instalar o SDK Platform-Tools e fazer o resto tudo via linha de comando.

Baixar o SDK Platform-Tools

O conteúdo baixado será um pacote compactado (5MB), que contém todos os executáves que vamos usar. Decompacte em um local de fácil acesso e se pretende usar com frequência, adicione ao PATH do sistema. (Isso é válido tanto para o windwos, quanto para o WSL)

Agora é simples, pelo terminal do windows conecte seu dispositivo usando o ADB:

adb start-server
# certifique-se que seu device se conectou (aprove se necessário)
adb tcpip 5555
# veja o ip do wifi obtido pelo seu smartphone
adb connect <seu-ip>

Agora, é só ir ao WSL (com adb já instalado) e conectar por lá!

adb connect <seu-ip>

É isso! E você ainda pode remover o cabo USB e seguir só com o WiFi.

Roteando as api do NextJS usando verbos HTTP

Pedro Ramon — Thu, 26 May 2022 00:52:35 +0000

ATENÇÃO
Esse post foi escrito em maio de 2022, nessa data o NextJS está na versão 12 e, até aqui, não existe um jeito nativo que resolva esse problema. Se estiver lendo isso em uma data futura, lembre-se se procurar no documentação oficial do framework e ver se não existem soluções mais modernas.

Criar um endpoint de API no NextJS é extremamente simples, mas se você já precisou lidar com mais de um verbo HTTP na mesma rota, percebeu que vai precisar se organizar para não deixar as coisa confusas.

O problema é que o NextJS não te fornece uma maneira nativa de rotear suas requisições pelo verbo HTTP, apenas pelo PATH da requisição.

Existem algumas bibliotecas prontas no mercado que adicionam alguns super poderes para essas apis, mas na maioria dos cenários você não precisa de tanto poder, só separar a função que trata o GET da que trata o POST, por exemplo.

Nesse contexto, eu tenho um helper que costumo usar e que resolve isso pra mim de um jeito bem elegante, na minha visão.

//helper/verbs-route.js
export function verbsRouter(router) {
  const sanitizedVerbs = {};
  Object.keys(router).forEach((verb) => {
    sanitizedVerbs[verb.toLowerCase()] = router[verb];
  });

  return (req, res) => {
    const method = req.method.toLowerCase();
    const route = sanitizedVerbs[method];
    if (!route || typeof route !== 'function') {
      return res.status(405).end();
    }

    return route(req, res);
  };
}

E só! =)

O uso fica assim:

//pages/api/my-api.js
import { verbsRouter } from '../../helper/verbs-route.js'

export default verbsRouter({

  async get (req, res) {
  },

  async post (req, res) {
  },

  async put (req, res) {
  },

  async delete (req, res) {
  },

})

É isso. Sem adicionar dependência, com poucas linhas de código, você tem um reteador de verbos HTTP para suas apis.

Melhorando a UX de digitação no mobile

Pedro Ramon — Tue, 24 May 2022 19:12:00 +0000

Introdução

Quando construímos formulários com HTML, é importante se preocupar com o fluxo de preenchimento. Isso implica em conhecer, além da linguagem, também os recursos oferecidos pelos navegadores e dispositivos que serão usados pelo seu usuário.

Um bom uso da linguagem HTML somado ao conhecimento das plataformas que a executam, torna a experiência de preenchimento de um formulário muito mais produtiva e pode aumentar os índices de conversão.

Teclado nos dispositivos móveis

Está com pressa?

<input inputmode="numeric" type="text" />

Sabe quando você está preenchendo um formulário pelo celular e ao chegar a um campo cujo o valor será exclusivamente numérico (ex.: telefone, cpf, cep, cartão de crédito...) mas o teclado invocado é aquele tradicional alfanumérico?

Temos de convir que a experiência é horrível. Nós, como desenvolvedores certamente devemos evitar essa situação. Mas como?

A primeira coisa que normalmente pensamos, é no atributo type da tag input, ele pode ser definido de forma a dar uma melhor experiência tanto de validação, quanto de usabilidade.
Quando definimos o atributo type como 'numeric', o teclado apresentado ao usuário será o numérico, o que já eleva muito a experiência de preenchimento.

Pronto! Agora tudo está perfeito né? Bem, nem tudo. O problema é que quando alteramos o type do input o teclado que surge muda, mas o tipo do dado colhido muda também. Existem validações específicas que o navegador faz para cada type, antão alterar de text para number não é apenas uma alteração de usabilidade, isso tem um efeito também na validação dos inputs.

E ai temos a questão semântica dos dados. Nem tudo que é composto por números, deve ser tratado como número. Se você não precisa realizar cálculos, não tem por que armazenar um dado como numérico. Na verdade, tratando como string, você evita problemas como zero-trailing, por exemplo.
O CEP é um caso de informação que sofre com esse problema, se você coloca um type=number para colher o cep, não vai conseguir preencher um zero à esquerda, 'proibindo' todos os ceps da cidade de São Paulo.
Outro exemplo, o número de um cartão de crédito é composto exclusivamente por números (🤯), mas você nunca vai precisar realizar alguma operação matemática com ele.

Por fim, o input numeric tem um visual específico, que pode mais atrapalhar do que ajudar. Ele traz botões que permitem incrementar ou decrementar seu valor, e isso não é o que esperamos em um campo de CEP ou do cartão de crédito, por exemplo.

Mas então como resolvemos isso? Deixamos a usabilidade de lado e mantemos a semântica dos tipos de dados? Ou ignoramos a semântica e preservamos a usabilidade?

Conheça o inputmode

Aqui está o pulo do gato. Com o atributo inputmode dos inputs, você consegue pedir para o navegador que abra um teclado específico, que atenda melhor sua necessidade. Ou até mesmo para não abrir nenhum teclado, caso sua aplicação implemente um customizado.

<input inputmode="numeric" type="text" />

Note que toda a problemática desenvolvida anteriormente, nasce da confusão entre o tipo dos dados e o formato deles. E essa confusão não é culpa minha nem sua, na verdade isso é um ótimo exemplo, de como precisamos conhecer tanto a linguagem, quanto as plataformas que a executam. Esse problema não existiria se não existissem navegadores em dispositivos móveis.
Se você usa um computador com um teclado físico para preencher um formulário, o inputmode não tem nenhum significado. Você não precisa dele! Mas o cenário muda quando olhamos para dispositivos móveis com seus teclados virtuais.

Os valores possíveis para o inputmode são:

none
Não abre o teclado padrão do sistema operacional.

text (padrão)
Abre o teclado padrão, baseado nas configurações do usuário.

decimal
Abre o teclado numérico com os sepradores de decimal do idioma do usuário (normalmente o ponto ou a vírgula). Alguns dispositivos podem exibir também o símbolo de negativo (-), mas isso não é um padrão.

numeric
Na maioria dos casos, vai abrir o mesmo teclado do decimal, mas pode ser que não traga a tecla de separador decimal. Alguns dispositivos podem exibir também o símbolo de negativo (-), mas isso não é um padrão.

tel
Abre um teclado numérico (0-9) e pelo menos mais dois botões, o asterisco (*) e a cerquilha (#).

search
Um teclado virtualmente otimizado para buscas. Em muitos casos, será identico ao teclaod text (padrão do sistema), mas podes ser que o navegador use essa informação para alterar o 'submit key' (falamos sobre isso em outro artigo). instead.

email
Abre um teclado textual, mas com teclas para @ e . mais acessíveis (sem que o usuário tenha que procurar nos símbolos).

url
Abre um teclado textual, com com teclas comuns em urls, como barra, ponto, dois pontos entre outras possibilidades.

Conclusão

Pensar nos detalhes durante a criação de uma aplicação pode ser o diferencial para o seu sucesso. Aqui estamos falando de um atributo que não tem efeitos colaterais, você adiciona ela ao seu input e ele não muda estilo nem validação, mas trás um benefício gigante para quem usa seu site.

REFERÊNCIAS:
inputmode - HTML: HyperText Markup Language | MDN (mozilla.org)
HTML Standard, Edition for Web Developers (whatwg.org)