Kiindulás
A 888 Studios budapesti márka. Limitált streetwear-kollekciókat ad ki, beateket ad el kizárólagos licenccel, lemezeket jelentet meg, és van egy felvevőterme, „A Terem”. A 888wholesale testvérmárkája, és ugyanaz a cég üzemelteti, amely a 888designs-t is, a 888Studios Kft. A nagykereskedelmet a 888wholesale viszi, a 888 Studios a végfelhasználóhoz szól, magyarul, tegezve, forintban.
A márka a hiányra épít. A kollekciók nem jönnek vissza, az elfogyott méret áthúzva látszik, és egy tételből legfeljebb öt darab rendelhető. Egy beat egyetlen vevőé lesz, a WAV-fájllal és a teljes sávokkal együtt, és utána lekerül a kínálatból. Ezt a kódnak is be kell tartania: egy eladott beat nem kerülhet még egyszer kosárba, és egy kifogyott méretet nem lehet kifizetni.
Az oldal elkészült, és indulás előtt áll. Ebben az írásban a rendszert mutatjuk be, a termékek és a lemezek végleges adatai az induláskor kerülnek fel.
Az oldal felépítése
Négy rész él egy Next.js-alkalmazásban, mögöttük egy saját háttériroda, tagfiókok és Stripe-fizetés.
| Rész | Amit tud |
|---|---|
| Webshop | méretek, készlet, kollekciók, vendég- és tagvásárlás |
| Beatek | kizárólagos licenc, privát letöltés a fizetés után |
| Lemezek | diszkográfia és egy lejátszó, amely oldalváltáskor is szól |
| Stúdió | ajánlatkérés tárgy szerint előre kitöltött levéllel |
| Háttériroda | 22 oldal a termékekhez, a készlethez, a rendelésekhez, a vevőkhöz és az értesítésekhez |
Az adatok SQLite-ban vannak, a Node beépített moduljával, így telepítéskor nincs mit lefordítani. Az előre írt napló, az idegen kulcsok és az azonnal zároló tranzakciók együtt biztosítják, hogy a készlet párhuzamos rendeléseknél is helyesen számolódjon. Minden összeg egész forintban szerepel.
A nehezebbik fele
Fizetés, amely egyszer rögzít
A pénzről a böngésző semmit nem dönt el, minden kosarat a szerver épít újra és áraz be. A fizetési munkamenet az űrlap pillanatképéből nyílik, és amíg egy mező fókuszban van, nem változik, így a gépelés nem nyit új munkamenetet. Egy munkamenet 45 perc után lejár, és egy IP-címről tíz perc alatt legfeljebb 40 nyitható.
A rendelést az írja be, amelyik előbb ér oda: a vásárlás után visszatérő oldal vagy a Stripe értesítése. A készlet és a licenc ugyanabban a tranzakcióban mozdul, így egy beat akkor sem kel el kétszer, ha két vevő ugyanabban a másodpercben fizet. A késleltetett banki fizetések függőben rögzülnek, és később teljesülnek vagy elbuknak. A webhook kilenc eseményt kezel, és mindig abszolút értéket ír, ezért egy újra kézbesített esemény semmit nem változtat. A visszatérítések és a viták mindkét irányból szinkronban maradnak a Stripe-pal.
Az Apple Pay és a Google Pay domainjének regisztrálása és a webhook létrehozása az adminban egy-egy kattintás.
Beatlicenc privát letöltéssel
A beatek mesterfájljai privát tárhelyen vannak. A letöltés csak annak a fióknak indul el, amelynek a saját, kifizetett rendelése tartalmazza a licencet. Utánvétnél a rendelés lezárásakor nyílik meg. A feltöltött fájl típusát a rendszer a kiterjesztése mellett az első bájtjaiból is ellenőrzi. Egy fájl csak akkor törlődik, ha már semmi nem hivatkozik rá, a régi nyugták sem.
Levél, amely sötét módban is rendben van
A levelezők a sötét módot mind máshogy kezelik: az egyik megfordítja a színeket, a másik csak a hátteret, a harmadik semmit. Ezért minden levél blokkok listája, amelyből ugyanaz a kód sima szöveget és HTML-t is készít. Az Outlooknak saját szabályai vannak, a Gmail iOS-es alkalmazása miatt minden felület kétszer van festve, egy tömör színnel és egy egyszínű színátmenettel, a hajszálvonalak pedig kitöltött cellák, mert a CSS-keretet több levelező eltünteti.
A 11 sablon mindegyike előnézhető világos és sötét módban, két szélességben, és próbalevél is küldhető belőle. A leveleket a Resend küldi, SDK nélkül, egyszerű HTTP-hívással.
A háttériroda
A márka a termékeit, a méreteit, a készletét, a cikkszámait és a vonalkódjait, a beateket, a lemezeket, a rendeléseket és a vevőket egy 22 oldalas adminban kezeli. Az okos kollekciók szabálymotorja 8 mezőre legfeljebb 60 szabályt enged, „bármelyik” vagy „mindegyik” egyezéssel, és ugyanaz a kód rajzolja a szerkesztő élő előnézetét, mint a nyilvános oldalt. Van eladási grafikon, teendőlista, CSV-export és egy Ctrl+K-ra nyíló globális kereső, amely képernyőolvasóval is használható. A műveletek 31 szerveroldali függvényen futnak.
A króm 888-jel
A nyitóoldal 888-jele krómból van, és valós időben rajzolódik, saját WebGL-kóddal, könyvtár nélkül. A három nyolcast a shader távolságmezőként írja le, és sugárléptetéssel (ray marching) rajzolja ki. Mindegyik nyolcas két kalligrafikus gyűrű, simán összeolvasztva, és a cső széles tollhegyként vastagodik és vékonyodik. A felület tükör egy shaderben felépített stúdióvilágításban, felső softboxszal, két csíkfénnyel és horizonttal. A jel fényes padlón áll, és a nyolcasok egymást is tükrözik.
A költséget szigorúan fogjuk.
- A sugarakat egy befoglaló dobozzal vágjuk, és legfeljebb 60 lépést tesznek meg.
- A jel csak akkor rajzol, ha legalább 15 százaléka látszik, és a lap is látható.
- Másodpercenként legfeljebb 60 képkocka készül, ringás közben 30. Ezt egy 120 Hz-es kijelzőn, Intel UHD 630-as integrált grafikán hangoltuk.
- Ha a képkockák elhúzódnak, a felbontás lépcsőzetesen csökken.
- Csökkentett mozgásnál egyetlen álló kép készül, WebGL nélkül pedig CSS-felirat áll a helyén.
A jel minden jelenetváltáskor egy teljes fordulatot tesz, így a nyitókép jelenetei vágás nélkül váltják egymást.
Zene, amely nem áll meg oldalváltáskor
A lejátszó a gyökérkomponensben él, ezért a zene oldalváltáskor is szól. Két külön állapot tartja számon, mi szól és hol tart, így a lejátszás nem rajzolja újra az egész oldalt. A hangszintjelző oszlopai a dal tempójára mozognak. A lemezek egy rögzített, görgetéssel vezérelt körhintán állnak, ahol mindig a görgetés helye dönti el, melyik borító van elöl, és húzásra, pöccintésre és rugalmas ütközésre is válaszol.
Így talál rá a vevő
A strukturált adat egyetlen gráf. Az oldal egy összekötött JSON-LD-gráfot ad. Benne van az online áruház, a zenei együttes, a webhely keresőművelettel, a visszaküldési szabályzat, a szállítási módonkénti szállítási adat, a méretenként változó termékcsoport, a lemezek és a felvételek, és minden beat a saját ajánlatával. Értékelést nem gyártunk hozzá.
A sitemap az adatbázisból készül, képekkel és valódi módosítási dátumokkal. A pénztár és a fiók oldalai nem indexelhetők.
A hírlevél tisztességesen gyűjt. A feliratkozás kettős megerősítéssel megy, és a hozzájárulás forrása, ideje és IP-címe megmarad. A leiratkozó link HMAC-aláírású, és soha nem jár le, az egy kattintásos leiratkozás pedig a szabványos fejlécekkel működik.
A vendégvásárlás sem veszik el. Aki fiók nélkül vásárol, annak a nyugtája egy aláírt igénylő tokent visz, így egy később nyitott fiók átveszi a rendelést. Az Apple Pay és a Google Pay rövidíti a pénztárat. Egy kereső egyszerre keres a ruhák, a beatek, a stúdiószolgáltatások és a gyakori kérdések között.
Egy hiányra épülő márkánál a készletet és a licencet a kódnak kell őriznie, mert egy kétszer eladott beat a márka ígéretét szegi meg.
Amit ebből Önnek érdemes tudni
Ha egy márka ruhát, digitális terméket és szolgáltatást is árul, mindez egy rendszerben is kezelhető, közös kosárral, közös háttérirodával és közös vevőfiókkal. A webshop- és weboldalkészítésről külön oldalon írunk, a munka menetéről pedig az Így dolgozunk oldalon.