Ծաղրուկ

01Խնդիրը

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

02Ինչ ստացվեց

Նախագիծը բաղկացած է երեք հավելվածից՝ Next.js-ով կայք, NestJS-ով և PostgreSQL-ով API և React-ով ադմին վահանակ։ Ֆրոնտենդի և բեքենդի ճարտարապետությունը, REST API-ն, բիզնես տրամաբանությունը և սերվերում տեղակայումն ինքս եմ արել։

Գնորդը կատալոգից ընտրում է ապրանքները, ավելացնում զամբյուղ և պատվերը ձևակերպում առանց գրանցման․ ապրանքը կարող է ունենալ «նվեր» տարբերակ՝ իր գնով։ Նվիրատվությունները ձևակերպվում են առանձին էջում։ Վճարումը կատարվում է քարտով՝ Ameriabank-ի պաշտպանված էջում, իսկ պատվերի հաստատումը, նվիրատվության անդորրագիրը և գումարի վերադարձի ծանուցումը գալիս են էլ. փոստով՝ Resend-ի միջոցով։ Գումարի վերադարձն ու չեղարկումը թիմը կատարում է ադմին վահանակից, որտեղ նաև փոխում է ապրանքները, պատմությունները, ՀՏՀ-ն, էջերի տեքստերը, բլոկների հերթականությունը, SEO դաշտերը և մեդիադարանը․ երկար տեքստերը խմբագրվում են Tiptap-ով վիզուալ խմբագրիչում։ Կոնտակտների էջում Leaflet-ով քարտեզ է։ Կայքը հեռախոսում տեղադրվում է որպես PWA և առանց ցանցի ցույց է տալիս առանձին էջ։

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

Վճարային տվյալները կայքով չեն անցնում․ բանկի էջը բացվում է առանձին պատուհանում և վճարումից հետո արդյունքը հաղորդում է խանութի ներդիրին `postMessage`-ով՝ ստուգելով աղբյուրը։ Գնորդի վերադարձն ինքնին ոչինչ չի ապացուցում․ API-ն բանկից հարցնում է վճարման մանրամասները և միայն դրանից հետո պատվերը նշում վճարված։ Եթե գնորդը պատուհանը ժամանակից շուտ է փակել, ֆոնային առաջադրանքը հինգ րոպեն մեկ բանկի հետ համադրում է չավարտված վճարումները և միաժամանակ նկատում բանկում անմիջապես արված վերադարձերը։ Գումարը նույնպես հաշվում է սերվերը․ գները, «նվեր» տարբերակը և արժույթը վերցվում են բազայից, մնացորդը ստուգվում է պատվերը ստեղծելիս և պակասեցվում մեկ անգամ՝ պատվերը վճարվելիս։ Բանկի հետ փոխանակման յուրաքանչյուր քայլ գրանցվում է մատյանում, որը երևում է ադմին վահանակում։

Ադմին վահանակի փոփոխությունները կայքում երևում են անմիջապես՝ առանց վերահավաքման․ կայքը API-ի պատասխանները քեշավորում է թեգերով, իսկ պահպանելուց հետո API-ն պաշտպանված հասցեի միջոցով զրոյացնում է համապատասխան թեգերը։ Հայերենը առանց նախածանցի հասցեներում է, անգլերենը՝ `/en`-ի տակ․ եթե խմբագիրը լրացրել է միայն մեկ լեզուն, տեքստը պատճենվում է մյուսի մեջ, իսկ canonical-ը, hreflang-ը և sitemap-ը կառուցվում են երկուսի համար։ Service worker-ը գրված է ձեռքով՝ առանց Workbox-ի։

Ամեն ինչ աշխատում է մեկ Linux սերվերում՝ առանց կոնտեյներների․ PostgreSQL, Nginx և PM2՝ API-ի ու Next.js-ի համար, իսկ ադմին վահանակը ստատիկ հավաքածու է։ Թարմացումը կատարվում է գրավոր հրահանգով՝ հավաքում սերվերում և վերագործարկում PM2-ով, իսկ բազայի սխեմայի փոփոխություններն անցնում են միայն միգրացիաներով, որոնք API-ն կիրառում է գործարկվելիս։ Գաղտնի տվյալները պահվում են միայն սերվերում։

04Արդյունքը

Նախագիծն ավարտված է․ կայքը, API-ն և ադմին վահանակը աշխատում են միասին, կենտրոնի թիմն ինքն է վարում բովանդակությունը երկու լեզվով, իսկ վճարումները, գումարի վերադարձերը և նվիրատվություններն անցնում են Ameriabank vPOS-ի միջոցով։