Trumpos nuorodos ir dizainerio QR

Vue 3 + webedge-db: trumpų nuorodų servisas su statistika ir QR dizaineris.

Vue 3webedge-dbTracking

Dev-story

Iššūkis

Pasidalinti kampanija reiškia trumpą URL, kurį gali sekti, ir QR kodą, kuris neatrodo kaip beveidis juodas kvadratas — dažniausiai du atskiri mokami įrankiai.

Ką darėme

Trumpų nuorodų programa (Vue 3 + webedge-db, Better Auth) su asmeninėmis nuorodų kolekcijomis, viešais trumpais URL ir paspaudimų sekimu, kartu su dizainerio QR generatoriumi, kuris stilizuoja kodą; abu veikia ant mūsų webedge-db backendo.

Rezultatas

Pats pasidarai sekamą trumpą nuorodą ir firminį QR bei matai paspaudimus — be trečios šalies nuorodų trumpintuvo.

Dev-story straipsnis

Kaip buvo kuriamas projektas: Trumpos nuorodos ir dizainerio QR

URL trumpinimas – išspręsta problema, tad įdomiausias klausimas buvo iš kur atsiranda paspaudimų skaičius. Vietoj serverinio 301, peradresacija ties /s/:slug yra Vue maršrutas, kuris iškviečia reaktyvaus backend'o mutaciją, užfiksuoja apsilankymą ir tik tada perduoda naršyklę į paskirties adresą. Taip visa sistema lieka statiniu frontend'u prieš reaktyvią duomenų bazę, o analitika yra tos pačios transakcijos dalis kaip ir šuolis, o ne atskiras 'siųsk ir pamiršk' žurnalas.

Skyriai

Moduliai

Stackas

Vue 3 + webedge-db

Kodėl projektas atsirado

Pasidalinti kampanija reiškia trumpą URL, kurį gali sekti, ir QR kodą, kuris neatrodo kaip beveidis juodas kvadratas — dažniausiai du atskiri mokami įrankiai.

Ką sukūrėme

Autentifikuotas trumpų nuorodų servisas: prisijungę naudotojai kuria nuorodas su nebūtinais savais slug'ais, pavadinimais ir pastabomis, o atgal gauna trumpą URL ir jį atitinkantį QR kodą. Kiekviena nuoroda seka paspaudimų skaičių ir paskutinio paspaudimo laiką, remdamasi atskira clicks lentele, saugančia referrer ir user-agent kiekvienam apsilankymui. Sąsaja – vieno puslapio Vue aplikacija su trikalbe (EN/LT/RU) sąsaja ir kiekvienam naudotojui skirtomis, ieškotinomis nuorodų kolekcijomis.

Pagrindiniai moduliai ir vartotojo kelias

M01

recordVisit mutacija atomiškai padidina clickCount ir lastClickedAt bei prideda clicks įrašą (referrer, user-agent) prieš grąžindama paskirties adresą – sekimas transakcinis, o ne atsietas analitikos signalas

M02

Peradresacija ties /s/:slug yra kliento maršrutas, kuris paleidžia mutaciją ir tada window.location.replace, tad peradresacija ir jos analitika yra vienas reaktyvus iškvietimas be atskiro sekimo serverio

M03

Slug variklis su rezervuotų žodžių sąrašu, 3–48 simbolių validacija ir atsitiktinių slug'ų generatoriumi iš nepainaus abėcėlyno (be 0/1/l/o), kuris kartoja bandymą įvykus kolizijai ir pailgina nuo 6 iki 8 simbolių

M04

Paskirties adreso apsauga: pliki domenai paverčiami į https, ne http(s) protokolai atmetami, o URL ribojami iki 2048 simbolių prieš išsaugant

M05

Kliento pusėje generuojamas QR su prekės ženklą atitinkančia ink/parchment spalvų palete, reaktyviai pergeneruojamas vos sukūrus nuorodą

Architektūra ir technologiniai sprendimai

Sukurta su Vue 3, webedge-db, Tracking.

Vue 3 + Tailwind vieno puslapio aplikacija prieš savą (self-hosted) reaktyvų backend'ą, su Better Auth sesijoms, qrcode biblioteka QR generavimui kliente ir links/clicks/users lentelėmis, indeksuotomis pagal slug ir pagal naudotoją sąrašų atrankai.

Rezultatas ir pamokos

Pats pasidarai sekamą trumpą nuorodą ir firminį QR bei matai paspaudimus — be trečios šalies nuorodų trumpintuvo.

Kompaktiškas, veikiantis servisas, kuris teisingai atlieka esmę – transakcinį paspaudimų sekimą, saugų slug'ų paskyrimą ir QR kodus pritaikytus produkto paletei; QR čia 'dizainerinis' prekės ženklo spalvų prasme, o ne su įterptu paveikslėliu.