>_ DevTrendspl

Język

Strona główna

Języki

Sekcje

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

Jak przestać płacić za internetowe usługi generowania podstawowych kodów QR

Za każdym razem, gdy projektant lub grafik potrzebuje schludnego kodu QR na stronę docelową lub materiały drukowane, zaczyna się ta sama kwerenda. Otwierasz pierwszy generator znaleziony w wyszukiwarce, poświęcasz pięć minut na dostosowywanie kolorów, wgrywasz logo, naciskasz przycisk pobierania — i nagle strona wymaga rejestracji, płatnej subskrypcji lub generuje dynamiczny kod, który przekierowuje przez ich wolne serwery. Brzmi znajomo?

Niedawno odkryłem projekt open source o nazwie mini-qr autorstwa developera posługującego się nickiem lyqht. To lekka aplikacja webowa, która robi dokładnie to, czego byś oczekiwał: szybko generuje piękne kody wektorowe bez znaków wodnych, trackerów czy subskrypcji.

Dlaczego ten projekt jest praktycznie użyteczny

Większość generatorów open source generuje nudne czarno-białe kwadraty w podstawowym formacie. Mini QR idzie dalej i oferuje edytor stylów wizualnych z pełną kontrolą nad wynikiem.

Oto, co potrafi to narzędzie:

  • Stylowanie modułów i ramek. Możesz zmieniać kształt kropek, wzorców lokalizacyjnych (znaczników narożnych), zaokrąglać rogi oraz konfigurować zewnętrzną ramkę z własnym tekstem.
  • Wstawianie logo na środku. Aplikacja automatycznie zarządza poziomem korekcji błędów, dzięki czemu skanery nadal niezawodnie odczytują kod nawet przy zakrytym środku.
  • Szablony danych dla różnych zadań. Nie musisz ręcznie składać surowych ciągów jak WIFI:S:MyNet;T:WPA;P:secret;;. Interfejs zawiera gotowe formularze dla danych Wi-Fi, kontaktów vCard, wydarzeń kalendarzowych, lokalizacji geograficznych, linków, a nawet płatności QR EPC (SEPA).
  • Eksport do dowolnego formatu. Wynik jest dostarczany jako czysty SVG do druku, rastrowy PNG/JPG lub jako znaki ASCII/Unicode bezpośrednio w terminalu.

Szczególnej wzmianki заслуговуе batch export. Możesz wprowadzić do aplikacji tabelę CSV z listą linków lub kontaktów, a wygeneruje ona całą partię konsekwentnie stylizowanych obrazów w archiwum. Dla identyfikatorów konferencyjnych czy naklejek magazynowych oszczędza to parę godzin żmudnej pracy.

Wbudowany skaner i przetwarzanie lokalne

Oprócz generatora aplikacja zawiera skaner. Działa bezpośrednio przez strumień WebRTC z kamery internetowej lub analizuje wgrany obraz.

Jeśli kod zawiera dane strukturalne (na przykład hasło Wi-Fi lub kontakt), skaner rozpoznaje typ i wyświetla przycisk szybkiej akcji. Tutaj nie ma żądń do zewnętrznych backendów: całe parsowanie i renderowanie odbywa się ściśle po stronie klienta w przeglądarce. Twoje dane nigdzie nie trafiają.

Aplikacja obsługuje również PWA, więc możesz zainstalować ją jako osobną ikonę na pulpicie lub telefonie i używać bez stałego połączenia sieciowego.

Pod maską

Stos technologiczny projektu wygląda nowocześnie i czysto:

  • Vue 3 z TypeScript
  • Zbudowane z Vite
  • Komponenty oparte na shadcn-vue i Tailwind CSS
  • Lokalizacja w ponad 30 językach przez Crowdin
  • Testowanie komponentów przez Storybook

Autorzy potraktowali dostępność poważnie: interfejs spełnia podstawowe wymagania WCAG A, obsługuje jasny, ciemny i systemowy motyw kolorów oraz poprawnie obsługuje złożone znaki UTF-8 (pismo arabskie, znaki CJK, emoji).

Wewnętrzną bibliotekę renderującą można testować osobno w publicznym Storybooku projektu, co ułatwia integrację podobnych komponentów z własnymi usługami frontendowymi.

Uruchomienie lokalne

Jeśli nie chcesz korzystać z publicznego demo na Vercel lub chcesz wdrożyć generator w wewnętrznej sieci firmy z własnymi presetami marki, projekt łatwo uruchomić lokalnie.

Sklonuj repozytorium i zainstaluj zależności:

git clone https://github.com/lyqht/mini-qr.git
cd mini-qr
pnpm install
pnpm dev

Do produkcji projekt jest pakowany w kontener Docker lub budowany do folderu statycznego za pomocą polecenia pnpm build, po czym może być serwowany przez dowolny serwer WWW jak Nginx czy Caddy.

Projekt jest licencjonowany na GPL-3.0. Oznacza to, że kod jest otwarty do forków i samodzielnego hostingu, ale nie będziesz mógł zamknąć źródeł przy jego modyfikacji.

Dla kogo to będzie przydatne

Mini QR zaspokaja jednocześnie dwie potrzeby.

Po pierwsze, to wygodne narzędzie pracy do codziennych zadań: drukowanie hasła do Wi-Fi dla gości do kuchni biurowej, przygotowywanie kodów SVG do prezentacji czy formatowanie linków na identyfikatorach uczestników konferencji.

Po drugie, to dobry przykład jakościowej aplikacji Vue 3 i Tailwind. Tutaj możesz zobaczyć, jak organizować workflow Storybook dla wyspecjalizowanych komponentów graficznych, jak skonfigurować wygodny eksport plików i jak zautomatyzować podglądy dla pull requestów.

Jeśli regularnie zajmujesz się kodami QR, sprawdź demo lub dodaj projekt do zakładek. Rozwiązuje zadanie czysto i bez zbędnego szumu.

Powiązane projekty