>_ DevTrendspt

Idioma

Início

Linguagens

Seções

Frontend Backend Mobile DevOps AI / ML GameDev Blockchain Embarcados Segurança
JavaScript

Cartões Wi-Fi para Conexões sem Complicações

Toda vez que convidados vêm visitar ou colegas se reúnem para um meetup, a mesma conversa começa. "Qual é a senha do Wi-Fi?" — e você começa a ditar uma sequência estranha de dezesseis caracteres, misturando "O" maiúsculo com zero e "l" minúsculo com um. Você pode, é claro, tirar uma foto da etiqueta no roteador, mas fica bem feio, e o roteador geralmente está escondido em algum armário sob uma pilha de cabos.

WiFi Card logo

O projeto wifi-card resolve esse pequeno incômodo do dia a dia de uma maneira notavelmente elegante. É um gerador leve de cartões elegantes com um código QR e detalhes de login da rede sem fio.

WiFi Card Demo

Como o Projeto Funciona

Essencialmente, esta é uma aplicação frontend em React que gera o cartão diretamente no navegador. Você insere o nome da rede (SSID), seleciona o tipo de criptografia (WPA/WPA2/WPA3, WEP ou rede aberta), digita a senha e clica no botão de imprimir.

A câmera do smartphone no iOS ou Android lê o código QR resultante com o scanner padrão e imediatamente oferece conexão à rede. Os convidados não precisam mais digitar a senha manualmente.

Pontos extras de karma para o autor pela abordagem focada em privacidade. Seus dados não são enviados para lugar nenhum: o serviço funciona inteiramente no lado do cliente, sem backend de servidor e sem coleta de telemetria.

This website does not track you

O que o Gerador Pode Fazer

O cartão tem vários detalhes interessantes que o autor pensou com antecedência:

  • Ocultação de senha. Se o cartão for exibido em um lugar semi-público, você pode ocultar o campo de texto da senha, deixando apenas o código QR.
  • Suporte a rede oculta (SSID oculto). O telefone saberá como configurar a conexão mesmo se a rede não transmitir seu nome.
  • Layout pronto para impressão. Os cartões são centralizados, têm uma borda elegante e ficam ótimos tanto em papel A4 comum quanto em papelão mais grosso.
  • Suporte multilíngue. O projeto foi traduzido para quase 40 idiomas, incluindo russo, então convidados de qualquer país entenderão o cartão.

Como Executar por Conta Própria

Se você não quiser usar o site público wificard.io ou planejar implementar o utilitário na rede local interna do seu escritório, o projeto é fácil de executar localmente.

A forma mais rápida é usar a imagem Docker oficial:

make run

O container será iniciado em http://localhost:8080.

Para desenvolvimento local ou ajustes de layout, você precisará de Node.js e Yarn:

# Установка зависимостей и запуск dev-сервера
make dev

O servidor com live-reload será aberto em http://localhost:3000. O projeto tem Prettier configurado, e a formatação do código é verificada automaticamente antes dos commits via pre-commit hooks.

Se quiser adicionar uma nova tradução, basta estender o arquivo src/translations.js:

{
   id: 'de-DE',              // код локали
   name: 'German - Deutsch', // отображаемое имя
   rtl: false,               // true для языков с письмом справа налево
   translation: {
      ...
   }
}

Onde Isso É Útil

Imprimi um desses cartões e prendi na geladeira com um ímã em casa. Economizei muito tempo durante as festas.

Além do uso doméstico, o formato é perfeito para:

  • Espaços de coworking e salas de reunião de escritórios, para que os visitantes não incomodem os sysadmins.
  • Pequenos cafés ou barbearias onde o Wi-Fi para convidados é protegido por senha.
  • Apartamentos para alugar e hotéis, quando as credenciais de login são expostas logo na entrada.

wifi-card é um ótimo exemplo de um pequeno projeto open source que executa uma tarefa específica sem uma interface sobrecarregada e rastreadores intrusivos. O código-fonte é limpo, executa com um único comando e economiza nervos ao receber convidados. Se você precisa ditar sua senha de rede regularmente, imprima um desses cartões uma vez.

Projetos relacionados