Ծաղրուկ

01Խնդիրը

Մշակութային կենտրոնին, որը երաժշտությամբ է զբաղվում հատուկ կարիքներ ունեցող երեխաների հետ, պետք էր կայք, որտեղ կարելի է գնել կենտրոնի ապրանքները և նվիրատվությամբ աջակցել ծրագրերին։ Երկու պայման կար․ քարտով վճարում հայկական բանկի միջոցով և թիմ առանց ծրագրավորողի, որն ինքն է վարում ամբողջ բովանդակությունը երկու լեզվով։

02Լուծումը

Երեք հավելված՝ կայքը (Next.js), API-ն (NestJS + PostgreSQL) և ադմին վահանակը (React + Vite)։

• Խանութ՝ կատալոգ, ապրանքի էջ, զամբյուղ և պատվերի ձևակերպում առանց գրանցման։ Ապրանքը կարող է ունենալ «նվեր» տարբերակ՝ առանձին գնով․ զամբյուղում դա առանձին տող է։
• Նվիրատվություններ՝ առանձին էջ՝ իր վճարումով և էլ. փոստով ուղարկվող անդորրագրով։
• Վճարում՝ քարտով, Ameriabank-ի վճարային էջում․ գումարի վերադարձը (ամբողջական կամ մասնակի) և չեղարկումը կատարվում են ադմին վահանակից։
• Նամակներ՝ երեք ձևանմուշ՝ պատվերը վճարված է, նվիրատվության անդորրագիր, գումարի վերադարձ։
• Ադմին վահանակ՝ ապրանքներ, պատվերներ, նվիրատվություններ, պատմություններ, ՀՏՀ, էջերի տեքստեր, բլոկների հերթականություն յուրաքանչյուր էջում, SEO դաշտեր, մեդիադարան՝ թղթապանակներով, և բանկին ուղղված հարցումների մատյան։
• Երկու լեզու (hy / en) և տեղադրվող PWA՝ «կապ չկա» էջով։

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

• Քարտի տվյալները կայքով չեն անցնում։ Բանկի վճարային էջը բացվում է առանձին պատուհանում։ Վճարումից հետո բանկը գնորդին վերադարձնում է API-ի հասցեին, և այդ էջը արդյունքը հաղորդում է խանութի ներդիրին `postMessage`-ով՝ ստուգելով աղբյուրը։ Եթե բրաուզերն արգելափակել է պատուհանը, գնորդը սովորական անցումով տեղափոխվում է բանկի էջ։
• Վճարման կարգավիճակը հաստատում է միայն բանկը։ Գնորդի վերադարձն ինքնին ոչինչ չի ապացուցում․ ստանալով վճարման նույնացուցիչը՝ API-ն բանկից հարցնում է վճարման մանրամասները և միայն դրանից հետո պատվերը նշում վճարված։
• Գումարը հաշվում է սերվերը։ Գները, «նվեր» տարբերակը և արժույթը վերցվում են բազայից ու կարգավորումներից, ոչ թե հարցումից․ մնացորդը ստուգվում է պատվերը ստեղծելիս և պակասեցվում մեկ անգամ՝ առաջին վճարման ժամանակ։ Ձևակերպումից առաջ բրաուզերի զամբյուղը համեմատվում է կատալոգի հետ՝ վաճառված ապրանքները հանվում են, քանակը սահմանափակվում է մնացորդով։
• Բանկի թեստային միջավայրի կանոնները կոդում են։ Թեստային vPOS-ն ընդունում է միայն ֆիքսված գումար և պատվերի համարներ հատկացված միջակայքից։ Սերվերն ինքն է դրանք տեղադրում env կարգավորումներով, ուստի ամբողջ ուղին՝ զամբյուղից մինչև գումարի վերադարձ, ստուգվում է իրական ապրանքներով։
• vPOS-ի մատյան։ Յուրաքանչյուր քայլ՝ վճարման ստեղծում, գնորդի վերադարձ, ստուգում, գումարի վերադարձ, սխալ, գրանցվում է աղյուսակում և երևում ադմին վահանակում։ Նույն տեղից պատվերը կարելի է նորից համեմատել բանկի տվյալների հետ։
• Փոփոխությունները երևում են անմիջապես՝ առանց վերահավաքման։ Կայքը API-ի պատասխանները քեշավորում է թեգերով։ Ադմինում պահպանելուց հետո API-ն կանչում է կայքի՝ գաղտնի բանալիով պաշտպանված հասցեն, որը զրոյացնում է համապատասխան թեգերը։ Կանչը չի դանդաղեցնում պահպանումը։
• Երկու լեզու՝ առանց դատարկ տեղերի։ Հայերենը առանց նախածանցի հասցեներում է, անգլերենը՝ `/en`-ի տակ, հին `/hy/…` հղումները վերահասցեավորվում են։ Եթե խմբագիրը լրացրել է միայն մեկ լեզուն, API-ն տեքստը պատճենում է մյուսի մեջ։ Canonical-ը, hreflang-ը և sitemap-ը՝ ապրանքներով ու պատմություններով, կառուցվում են երկու լեզվի համար։
• Ֆայլի ջնջումը չի փչացնում էջերը։ Մեդիադարանից ֆայլ ջնջելիս API-ն հեռացնում է դրա հղումները կարգավորումներից, ապրանքներից, պատմություններից և էջերից։
• Service worker-ը գրված է ձեռքով՝ առանց Workbox-ի։ Էջերի անցումների համար նախ դիմում է ցանցին, սխալի դեպքում՝ քեշին կամ օֆլայն էջին․ ստատիկ ֆայլերը տրվում են քեշից և թարմացվում ֆոնում։
• Տեղակայում առանց կոնտեյներների։ Մեկ Ubuntu սերվեր՝ PostgreSQL, Nginx և PM2՝ API-ի ու Next.js-ի համար․ ադմին վահանակը ստատիկ հավաքածու է, որը տալիս է Nginx-ը։ Գաղտնի տվյալները միայն սերվերի env ֆայլերում են, ռեպոզիտորիայում՝ միայն ձևանմուշները։

04Արդյունքը

Կայքը, API-ն և ադմին վահանակը աշխատում են միասին և տեղակայվում են մեկ սերվերում՝ ռեպոզիտորիայի հրահանգով։ Վճարումները, գումարի վերադարձերը և նվիրատվությունները կառուցված են բանկի թեստային միջավայրի համար։ Նախագիծը մշակման փուլում է, հրապարակային գործարկում դեռ չի եղել։