Blink Transfers

01Խնդիրը

Blink Transfers-ը ուղևորներ է տեղափոխում օդանավակայանից, նավահանգստից և դեպի միջոցառումներ Բարսելոնայում և Կատալոնիայում։ Ընկերությանը պետք էր կայք, որտեղ հաճախորդն ինքը, առանց մենեջերին գրելու, նշում է երթուղին, անմիջապես տեսնում գինը, ընտրում մեքենան և վճարում։

02Ինչպես է աշխատում կայքը

Կայքը գրված է Next.js-ով, API-ն՝ Laravel-ով MySQL տվյալների բազայով, իսկ ադմին վահանակը React հավելված է Laravel-ի ներսում։ Ամրագրումը սկսվում է ուղևորության ձևից՝ որտեղից և ուր, ամսաթիվ և ժամ, ցանկության դեպքում՝ հետադարձ ուղևորություն իր հասցեներով։ Ժամավճարային ռեժիմում նպատակակետի փոխարեն ընտրվում է տևողությունը։ Հետո գալիս են չորս քայլ՝ մեքենայի ընտրություն, ուղևորներ և ուղեբեռ (մեծահասակներ, երկու տարիքային խմբի երեխաներ՝ մանկական նստատեղերով, ուղեբեռի երեք չափ), ուղևորի տվյալներ և վճարում։ Երթուղու, մեքենաների և ընդհանուր գումարի ամփոփումը միշտ երևում է կողքին, քայլերի տակ Leaflet-ով երթուղու քարտեզն է՝ OSRM-ից ճանապարհներով անցնող գծով, իսկ ուղևորությունը կարելի է փոխել՝ առանց ամրագրումը սկզբից սկսելու։

Մեքենաները ներկայացված են քարտերով՝ լուսանկարով, տարողությամբ և տվյալ երթուղու գնով․ կարելի է միանգամից մի քանիսը վերցնել։ Վճարումը՝ քարտով հենց կայքում կամ PayPal-ով, երկու եղանակն էլ անցնում են PayPal-ի API-ով սերվերում։ Հյուրանոցները, ապարտամենտները և տուրիստական գործակալությունները հայտ են ներկայացնում առանձին սցենարով՝ երեք քայլով և առանց վճարման, իսկ իրենց անձնական էջում տեսնում են վիճակագրությունը և ներբեռնում վաուչերները։ Հաճախորդը իր ամրագրումները գտնում է էլ. հասցեով և մեկանգամյա կոդով և այնտեղ ներբեռնում հաշիվն ու վաուչերը։ Ինտերֆեյսը և ամրագրման տեքստերը թարգմանված են հինգ լեզվով, տեքստի անիմացիան՝ GSAP-ով, իսկ կայքը հեռախոսում տեղադրվում է որպես հավելված (PWA)։

03Տեխնիկական լուծումներ

Ամրագրման մեջ մի քանի փոխկապակցված ձև կա, իսկ քայլի կոճակը ձևից դուրս է, ուստի Zustand-ի վրա գրեցի ձևերի սեփական շերտ․ դաշտերը գրանցվում են ընդհանուր պահոցում, ամեն տեսակի դաշտ ունի իր վալիդատորը, իսկ սխալը պահվում է որպես թարգմանության բանալի և անմիջապես ցուցադրվում ճիշտ լեզվով։ Բոլոր քայլերի տվյալները մեկ պահոցում են․ նախորդ քայլին վերադառնալիս ոչինչ չի ջնջվում, իսկ ձևակերպման ընթացքում լեզուն փոխելիս մուտքագրվածը մնում է։ Քայլերը որոշվում են անունով, ոչ թե համարով, և դրա շնորհիվ գործընկերների սցենարը հավաքված է նույն քայլերից՝ առանց վերջինի։

Հասցեները որոնվում են Next.js-ի սերվերային երթուղու միջոցով, որը սահմանափակում է հարցումների հաճախականությունը․ Google-ի բանալին դիտարկիչ չի հասնում, Places Autocomplete-ի և Text Search-ի արդյունքները միավորվում են, մաքրվում կրկնություններից և զտվում ըստ տարածաշրջանի, օդանավակայանները նշվում են առանձին։ Գինը դիտարկիչում չի հաշվարկվում․ ֆրոնտենդը Distance Matrix-ից ստանում է երթուղու երկարությունը և կոորդինատների հետ ուղարկում API-ին, իսկ սերվերն ընտրում է սակագինը՝ օդանավակայանից և դեպի օդանավակայան ուղևորությունների համար՝ ըստ գոտիների, որոնք ադմինում գծվում են քարտեզի վրա, մնացածի համար՝ ըստ կիլոմետրերի սանդղակի, ժամավճարային վարձակալության համար՝ ըստ ժամերի։ Էկրանին երևում է միայն սերվերի վերադարձրած գինը։ Սերվերը PayPal-ի վեբհուկներն ընդունում է միայն այն բանից հետո, երբ PayPal-ն ինքը հաստատում է ստորագրությունը, վճարումից հետո դուրս է գրում ԱԱՀ-ով հաշիվ՝ առանց բացթողումների համարակալմամբ, իսկ նոր ամրագրումների մասին ծանուցումները գալիս են Telegram։

04Արդյունքը

Կայքն աշխատում է անգլերեն, իսպաներեն, կատալոներեն, գերմաներեն և ռուսերեն՝ blinktransfers.com։ Ամրագրումը՝ երթուղու ընտրությունից մինչև վճարում, կատարվում է կայքում՝ առանց մենեջերի մասնակցության։