Blink Transfers

01Համատեքստ

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

Նախագիծն արել է երեք ծրագրավորողից կազմված թիմը․ կայքը՝ Next.js-ով, սերվերային մասը և ադմին վահանակը՝ Laravel-ով։ Ես աշխատել եմ ֆրոնտենդի վրա 2025 թվականի հուլիսից նոյեմբեր։ Գնի հաշվարկը և վճարումների իրականացումը սերվերում են և իմ մասը չեն․ ստորև միայն այն է, ինչ արել եմ ես։

02Իմ մասը

• Ուղևորության ձև՝ որտեղից և ուր, ամսաթիվ և ժամ, հետադարձ ուղևորություն՝ իր հասցեներով և ժամով։ Ժամավճարային ռեժիմում նպատակակետի փոխարեն ընտրվում է տևողությունը։ Ձևը կարելի է նորից բացել և փոխել ուղևորությունը՝ առանց ամրագրումը սկզբից սկսելու։
• Ամրագրման չորս քայլ՝ ուղևորներ և ուղեբեռ (մեծահասակներ, երկու տարիքային խմբի երեխաներ, մանկական նստատեղեր, ուղեբեռի երեք չափ), մեքենայի ընտրություն, ուղևորի տվյալներ, վճարում։ Կողքին միշտ երևում է ամփոփումը՝ երթուղին, ընտրված մեքենաները և ընդհանուր գումարը։
• Մեքենայի ընտրություն՝ քարտեր լուսանկարով, տարողությամբ և այն գնով, որը սերվերը վերադարձրել է տվյալ երթուղու համար։ Կարելի է վերցնել մի քանի մեքենա․ ընտրված քանակը պահպանվում է, երբ գները նորից են հարցվում։
• Վճարման քայլ՝ քարտ (Visa, Mastercard) կամ PayPal։ Քարտի համարը, ժամկետը և CVC-ն ձևաչափվում են մուտքագրելիս։ Վճարման կոճակն ակտիվ չէ, քանի դեռ պայմանները չեն ընդունվել, և արգելափակվում է հարցման ընթացքում․ սերվերի սխալը ցուցադրվում է ձևի վերևում։
• Գործընկերների սցենար՝ հյուրանոցները, ապարտամենտները և տուրիստական գործակալությունները հայտ են ներկայացնում երեք քայլով և առանց վճարման։
• Ինտերֆեյս՝ վերնագիր և բջջային մենյու, թռուցիկ պատուհաններ, ՀՏՀ, պայմանների էջ, ադապտիվ դասավորություն, տեքստի անիմացիա GSAP-ով։ Ամրագրման տեքստերը՝ կայքի հինգ լեզուներով։

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

• Ձևերի սեփական շերտ Zustand-ի վրա։ Ամրագրման մեջ կան մի քանի փոխկապակցված ձևեր, և դրանց դաշտերի վիճակը պետք է տեսանելի լինի դրսից․ քայլի կոճակը ձևից դուրս է։ Դաշտերն իրենք են գրանցվում ընդհանուր պահոցում, յուրաքանչյուր տեսակի դաշտ ունի իր վալիդատորը, իսկ ձևը՝ ուղարկման կարգավիճակ։ Սխալը պահվում է որպես թարգմանության բանալի, ուստի հաղորդագրությունները միանգամից աշխատում են բոլոր լեզուներով։ Անհաջող ուղարկման դեպքում ֆոկուսն անցնում է սխալ ունեցող առաջին դաշտին։
• Ամրագրումը՝ առանձին պահոցում։ Բոլոր քայլերի տվյալները մեկ Zustand պահոցում են, ուստի նախորդ քայլին վերադառնալիս ոչինչ չի ջնջվում։ Պահոցը մաքրվում է միայն ամրագրման էջից դուրս գալիս․ ամրագրման ընթացքում լեզուն փոխելիս մուտքագրվածը մնում է։
• Քայլերը որոշվում են անունով, ոչ թե համարով։ Քայլի պատրաստ լինելը հաշվվում է պահոցի բաժանորդագրություններով, իսկ «Շարունակել» կոճակը նայում է ընթացիկ քայլի անվանը։ Դա հնարավորություն տվեց գործընկերների սցենարը հավաքել նույն քայլերից՝ այլ հերթականությամբ և առանց վճարման։
• Հասցեների որոնում սերվերային երթուղու միջոցով։ Դիտարկիչը դիմում է Next.js-ի երթուղուն, ոչ թե ուղղակիորեն Google-ին, ուստի API բանալին չի հայտնվում կլիենտի կոդում։ Երթուղին զուգահեռ հարցում է անում Places Autocomplete-ին և Text Search-ին, միավորում է արդյունքները, հեռացնում կրկնությունները ըստ վայրի նույնացուցիչի և ըստ հասցեի, զտում դրանք ըստ դաշտի տարածաշրջանի (Կատալոնիա կամ Եվրոպայի երկրներ) և նշում օդանավակայանները։
• Գինը դիտարկիչում չի հաշվարկվում։ Նույնպիսի սերվերային երթուղու միջոցով (Distance Matrix) ֆրոնտենդը ստանում է երթուղու երկարությունը և կոորդինատների հետ ուղարկում API-ին․ ցուցադրվում է միայն սերվերի վերադարձրած գինը։
• Ամսաթիվ՝ առանց անցած օրերի։ Ամսաթվի և ժամի դաշտերը նատիվ են՝ `min` սահմանափակմամբ։ Բջջային ստեղնաշարերը թույլ են տալիս այն շրջանցել, ուստի արժեքը լրացուցիչ ստուգվում է փոփոխության պահին, և անցած ամսաթիվը զրոյացվում է։

04Արդյունքը

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