Short.dog — skracarka linków z dekodowaniem i panelem admina

Case study Short.dog — mojej skracarki linków z funkcją podglądu oryginalnego adresu i panelem administratora do zarządzania linkami oraz statystykami.

JAJarosław Armatys 5 min czytania
Wersja wideo tego wpisu — obejrzyj na YouTube

W tym wpisie opowiem o Short.dog — mojej autorskiej skracarce linków. Projekt powstał jako ćwiczenie, ale szybko urósł do w miarę kompletnej aplikacji: oprócz samego skracania adresów dorzuciłem funkcję dekodowania zawartości pod skróconym linkiem oraz panel administratora do zarządzania wpisami i podglądu statystyk odtworzeń. Chcę pokazać, z jakiego powodu w ogóle zabrałem się za kolejną skracarkę, jakie decyzje zapadły po drodze i co z tego wyszło.

Problem — po co kolejna skracarka

Skracarek linków są setki — bit.ly, tinyurl, t.co i cała masa pochodnych. Na pierwszy rzut oka temat wydaje się wałkowany do znudzenia. Ja jednak spojrzałem na to z dwóch stron. Po pierwsze — chciałem mieć własne narzędzie, w którym pełną kontrolę nad domeną, danymi i statystykami trzymam u siebie. Krótkie linki, które publikuję w social mediach czy w dokumentach, nie powinny zależeć od zewnętrznego dostawcy, który może z dnia na dzień zmienić zasady albo wyciąć część ruchu.

Po drugie — brakowało mi jednej funkcji, która dla mnie jako użytkownika skracarek była zawsze najbardziej irytująca: możliwości podejrzenia, co kryje się pod skróconym linkiem, zanim w niego kliknę. Skrócony URL to z definicji czarna skrzynka. Nie widzisz domeny docelowej, nie widzisz ścieżki, nie wiesz, czy trafisz na artykuł, czy na próbę phishingu. Z tego pomysłu narodziło się Short.dog.

Własna skracarka to nie kwestia "jeszcze jednego narzędzia na rynku". To kwestia kontroli nad tym, gdzie kieruję swoich odbiorców i co o tym wiem.

Aplikację postawiłem pod domeną short.dog, żeby sama nazwa była już częścią marki. Krótka, łatwa do zapamiętania, brzmi przyjaźnie.

Jak działa skracanie i dekodowanie

Sam flow skracania jest maksymalnie prosty — tak miał być od początku, bo użytkownik nie chce w tym miejscu żadnej gimnastyki. Wklejam długi link, na przykład do onet.pl, klikam przycisk skracania i dostaję dwa informacje zwrotne: oryginalny adres, który wrzuciłem, oraz nowy, skrócony link wygenerowany przez aplikację. Stamtąd mogę albo od razu skopiować skrócony URL do schowka, albo wrócić do formularza i wygenerować kolejny.

Gdy ktoś wejdzie w skrócony link, aplikacja po stronie serwera odczytuje unikalny identyfikator z końcówki ścieżki, wyszukuje odpowiadający mu wpis w bazie i odpowiada przekierowaniem HTTP na oryginalny adres. Przy okazji tego samego requestu inkrementowany jest licznik odtworzeń — dzięki temu panel admina później pokaże, ile razy dany link był używany.

Najciekawsza z punktu widzenia użytkownika jest jednak druga zakładka — dekodowanie. Działa to tak: wklejam skrócony link, który dostałem od kogoś albo znalazłem gdzieś w sieci, klikam przycisk "sprawdź" i aplikacja pokazuje mi, jaki adres kryje się pod spodem. Bez przekierowania, bez ładowania docelowej strony, bez ryzyka. To prosty mechanizm: zamiast robić redirect, serwer zwraca dane zapisane w bazie dla tego identyfikatora.

Dla mnie to była najważniejsza funkcja w całej aplikacji. Skracarka z podglądem to skracarka, której nie boję się kliknąć.

Takie rozwiązanie jest zabezpieczeniem dla osób, które nie chcą wchodzić w ciemno na nieznane adresy — na przykład gdy ktoś przysłał im link w wiadomości i mają wątpliwości, czy to nie jest próba phishingu.

Panel admina i statystyki

Druga warstwa aplikacji to panel administratora. Logowanie jest zabezpieczone, więc tylko ja mam dostęp do zarządzania wpisami. Po zalogowaniu widzę listę wszystkich skróceń, które zostały wykonane w systemie — wraz z trzema najważniejszymi informacjami: jak wygląda oryginalny, długi link, jaki kod skrócony został mu przypisany oraz ile razy ten skrócony link został użyty.

Lista obsługuje prostą wyszukiwarkę. Mogę wpisać fragment nazwy domeny — na przykład "wykop" — i od razu wyfiltrować wszystkie linki prowadzące do tego serwisu. To szczególnie przydatne, gdy skróceń zaczyna się zbierać kilkadziesiąt, a chcę szybko sprawdzić, który link ma ile kliknięć albo odnaleźć konkretny wpis do edycji.

Statystyki nie są rozbudowane do poziomu Google Analytics — to z założenia miała być lekka aplikacja. Licznik wyświetleń pokazuje jednak, co ludzie faktycznie klikają, a co trafia do kosza. Dla moich potrzeb — dystrybucji linków w social mediach i dokumentacji — to w zupełności wystarczy.

Z panelu mogę też zarządzać wpisami: usuwać martwe linki, poprawiać te, które trafiły do bazy z literówką, i utrzymywać porządek. Ręczne CRUD po skracaniach to nic spektakularnego, ale bez tego narzędzie szybko zamieniłoby się w worek bez dna.

Stos i architektura

Aplikację napisałem w ekosystemie .NET, bo to mój główny stos i chciałem, żeby projekt przy okazji pełnił rolę portfolio pokazującego, jak podchodzę do małych, ale kompletnych produktów webowych. Wybór frameworka pozwolił mi zbudować zarówno frontową część użytkownika, jak i zabezpieczony panel admina w jednym spójnym projekcie, bez sztucznego dzielenia na dwie aplikacje.

Z punktu widzenia architektury rozdzieliłem aplikację na trzy logiczne obszary: publiczny moduł skracania i dekodowania, silnik przekierowań obsługujący ruch na skróconych URL-ach oraz chroniony panel administratora. Każdy z tych obszarów operuje na tej samej warstwie dostępu do danych, ale ma własne reguły dostępu — publiczna część jest otwarta, redirect działa anonimowo, a panel wymaga zalogowania.

Baza danych trzyma kilka prostych encji: wpis ze skróconym linkiem (identyfikator, oryginalny URL, kod skrócony, data utworzenia, licznik wyświetleń) oraz dane uwierzytelniające administratora. Przy takiej skali żadne skomplikowane schematy nie były potrzebne — klucz to dobrze dobrany indeks po kodzie skróconym, żeby przekierowanie działało szybko nawet przy rosnącej liczbie rekordów.

Świadomie nie rozbudowywałem aplikacji o funkcje, które nie są mi potrzebne — brak tu statystyk geolokalizacyjnych, brak integracji z zewnętrznymi dostawcami, brak publicznego API dla innych użytkowników. Short.dog jest moim narzędziem i portfolio jednocześnie, a nie kolejną platformą SaaS. Dzięki temu kod jest zwięzły, łatwy w utrzymaniu i mogę do niego wracać bez wielogodzinnego przypominania sobie, co się gdzie dzieje.

Zobacz więcej

Jeśli chcesz zobaczyć Short.dog w działaniu, wpadnij pod short.dog. A jeżeli interesują Cię inne moje realizacje, zajrzyj na armatys.me/wpisy — tam znajdziesz case studies kolejnych aplikacji, które zbudowałem na .NET, oraz materiały o mojej drodze jako developera.

Tagi:#portfolio#dotnet#url-shortener#case-study

Masz pytanie do tego wpisu?

Napisz do mnie — chętnie porozmawiam o szczegółach technicznych, albo o tym jak zastosować to u Ciebie w projekcie.