>_ DevTrendspl

Język

Strona główna

Języki

Sekcje

Frontend Backend Mobilne DevOps AI / ML GameDev Blockchain Systemy wbudowane Bezpieczeństwo
JavaScript

Karty Wi-Fi umożliwiające bezproblemowe połączenia

Ilekroć przychodzą goście lub koledzy zbierają się na spotkanie, zawsze zaczyna się ta sama rozmowa. "Jaki jest hasło do Wi-Fi?" — i zaczynasz dyktować dziwny szesnastoznakowy ciąg, mieszając wielkie "O" z zerem oraz małe "l" z jedynką. Oczywiście możesz zrobić zdjęcie naklejki na routerze, ale wygląda to fatalnie, a router często jest schowany gdzieś w szafie pod stosem kabli.

WiFi Card logo

Projekt wifi-card rozwiązuje tę codzienną, drobną niedogodność w zaskakująco elegancki sposób. To lekkie narzędzie do generowania estetycznych kart z kodem QR i danymi logowania do sieci bezprzewodowej.

WiFi Card Demo

Jak działa projekt

W istocie jest to aplikacja frontendowa w React, która generuje kartę bezpośrednio w przeglądarce. Wprowadzasz nazwę sieci (SSID), wybierasz typ szyfrowania (WPA/WPA2/WPA3, WEP lub sieć otwarta), wpisujesz hasło i naciskasz przycisk drukowania.

aparat smartfona z systemem iOS lub Android odczytuje wynikowy kod QR za pomocą standardowego skanera i natychmiast proponuje połączenie z siecią. Goście nie muszą już ręcznie wpisywać hasła.

Dodatkowe punkty za podejście skoncentrowane na prywatności. Twoje dane nie są nigdzie wysyłane: usługa działa całkowicie po stronie klienta, bez backendu serwerowego i bez zbierania telemetrii.

This website does not track you

Co potrafi generator

Karta ma kilka przemyślanych szczegółów:

  • Ukrywanie hasła. Jeśli karta będzie wyświetlana w miejscu częściowo publicznym, możesz ukryć pole tekstowe hasła, pozostawiając tylko kod QR.
  • Obsługa ukrytych sieci (Ukryty SSID). Telefon wie, jak skonfigurować połączenie, nawet jeśli sieć nie rozgłasza swojej nazwy.
  • Układ gotowy do druku. Karty są wycentrowane, mają estetyczną ramkę i świetnie wyglądają zarówno na zwykłym papierze A4, jak i na grubszym kartonie.
  • Obsługa wielu języków. Projekt został przetłumaczony na prawie 40 języków, w tym rosyjski, więc goście z każdego kraju zrozumieją kartę.

Jak uruchomić samodzielnie

Jeśli nie chcesz korzystać z publicznej strony wificard.io lub planujesz wdrożyć narzędzie w wewnętrznej sieci lokalnej biura, projekt można łatwo uruchomić lokalnie.

Najszybsza metoda to oficjalny obraz Docker:

make run

Kontener uruchomi się na porcie 8080.

Do lokalnego programowania lub modyfikacji układu potrzebujesz Node.js i Yarn:

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

Serwer z live-reload otworzy się na porcie 8080. Projekt ma skonfigurowany Prettier, a formatowanie kodu jest automatycznie sprawdzane przed commitami za pomocą pre-commit hooks.

Jeśli chcesz dodać nowe tłumaczenie, po prostu rozszerz plik src/translations.js:

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

Gdzie to się przyda

Wydrukowałem jedną z takich kart i przyczepiłem magnesem do lodówki w domu. Zaoszczędziło to mnóstwo czasu podczas świąt.

Oprócz użytku domowego format idealnie sprawdza się w:

  • Coworkingach i salach konferencyjnych biur, aby goście nie przeszkadzali administratorom systemu.
  • Małych kawiarniach lub zakładach fryzjerskich, gdzie sieć Wi-Fi dla gości jest chroniona hasłem.
  • Wynajmowanych mieszkaniach i hotelach, gdy dane logowania są wywieszone tuż przy wejściu.

wifi-card to świetny przykład małego projektu open source, który realizuje jedno wąskie zadanie bez rozbudowanego interfejsu i natrętnych trackerów. Kod źródłowy jest czysty, uruchamia się jednym poleceniem i oszczędza nerwy podczas przyjmowania gości. Jeśli regularnie musisz dyktować hasło do sieci, wydrukuj sobie raz jedną z takich kart.

Powiązane projekty