Գլխավոր Մոդուլներ Մոդուլ 3
🔍 Մոդուլ 03

Կայքերի գաղտնիքները

Ամեն օր օգտագործում ես կայքեր, բայց հիմա կսովորես՝ ինչ է իրականում կատարվում էկրանի հետևում․ responsive design, կոճակների logic, database և API։

Ընթացք
0%
📚 3 դաս
🧠 8 հարց
⏱️ մոտ 25 րոպե
🏅 Badge «Web Detective»
📱

Ինչու է կայքը տարբեր երևում հեռախոսով

Նույն կայքը կարող է համակարգչում, tablet-ում և հեռախոսում տարբեր տեսք ունենալ։ Սա կոչվում է responsive design։

Responsive Design

Կայքը հարմարվում է էկրանի չափին

Responsive design-ը կայքի ունակությունն է փոխել layout-ը՝ ըստ էկրանի չափի։ Այսինքն՝ կայքը պետք է հարմար լինի թե՛ մեծ monitor-ի, թե՛ փոքր mobile screen-ի վրա։

💧
Պատկերացրու ջուր․ այն ընդունում է այն տարայի ձևը, որի մեջ լցնում ես։ Responsive կայքն էլ հարմարվում է այն էկրանին, որի վրա բացվում է։
Desktop vs Mobile

Նույն բովանդակությունը, բայց տարբեր դասավորություն

Desktop-ում menu-ն կարող է երևալ ամբողջությամբ, իսկ mobile-ում այն դառնում է hamburger menu։ Desktop-ում բաժինները կարող են լինել 3 սյունակով, իսկ mobile-ում՝ մեկ սյունակով։

Նպատակը պարզ է․ օգտատերը պետք է կարողանա հեշտ կարդալ, սեղմել և շարժվել կայքում՝ առանց zoom անելու։

Media Query

Responsive-ի գաղտնի գործիքը

CSS-ում responsive design-ի համար հաճախ օգտագործվում է Media Query։ Այն ասում է բրաուզերին․ «Եթե էկրանը փոքր է 768px-ից, օգտագործիր այս դիզայնը»։

📱MobileMobile design-ը շատ կարևոր է
💻DesktopՄեծ էկրանին layout-ը ավելի լայն է
UXԼավ responsive-ը հեշտացնում է օգտագործումը
💡
Գիտեի՞ր
Եթե կայքը mobile-ում վատ է երևում, օգտատերը շատ արագ կարող է դուրս գալ էջից։ Դրա համար ժամանակակից կայքերը սկզբից մտածում են mobile-ի մասին։
🛒

«Գնել» կոճակի ներքին աշխարհը

Երբ սեղմում ես «Գնել» կամ «Add to cart», էկրանի հետևում մի քանի գործողություն է կատարվում շատ կարճ ժամանակում։

Քայլ առ քայլ

Ինչ է կատարվում մեկ click-ից հետո

1
Օգտատերը սեղմում է կոճակը
JavaScript-ը նկատում է click-ը և սկսում գործողությունը։
2
Browser-ը request է ուղարկում
Կայքը server-ին ասում է․ «Այս ապրանքը ավելացրու cart-ի մեջ»։
3
Server-ը ստուգում է տվյալները
Ստուգվում է ապրանքի ID-ն, գինը, քանակը և stock-ը։
4
Cart-ը թարմացվում է
Ապրանքը ավելանում է cart-ում, total-ը նորից հաշվարկվում է։
5
Server-ը response է ուղարկում
Server-ը հաստատում է, որ ապրանքը հաջողությամբ ավելացվել է։
6
UI-ը փոխվում է
Cart icon-ը թարմանում է, կարող է բացվել cart drawer կամ երևալ “Added to cart” հաղորդագրություն։
Database

Կայքի տվյալների պահեստը

Database-ը պահում է կայքի կարևոր տվյալները՝ ապրանքներ, գներ, stock, orders, users և cart information։

Երբ սեղմում ես «Գնել», database-ը օգնում է հասկանալ՝ ապրանքը կա՞ պահեստում, ինչքա՞ն արժե և ինչ պետք է ավելանա cart-ում։

📚
Database-ը նման է մեծ գրադարանի․ ամեն product, user և order ունի իր «գրառումը», իսկ server-ը գտնում է ճիշտ տեղեկությունը։
🔌

API — ինչ է և ինչու է պետք

API-ն օգնում է տարբեր ծրագրերին խոսել իրար հետ և փոխանակել տվյալներ։

API

Application Programming Interface

API-ն կանոնների համակարգ է, որի միջոցով մեկ ծրագիր կարող է request ուղարկել մեկ այլ ծրագրի և ստանալ response։

Օրինակ՝ Uber-ը կարող է օգտագործել Google Maps API, որպեսզի քարտեզ ցույց տա իր app-ի մեջ։

🍽️
API-ն նման է մատուցողի։ Դու պատվիրում ես, մատուցողը գնում է խոհանոց և բերում պատասխանը։ Դու խոհանոց չես մտնում, պարզապես օգտագործում ես միջնորդին։
Օրինակներ

API-ներ, որոնք օգտագործում ենք ամեն օր

🗺️
Google Maps API
Օգտագործվում է քարտեզներ, route-եր և location ցույց տալու համար։
🌤️
Weather API
Օգնում է app-երին ցույց տալ եղանակի տվյալներ։
💳
Payment API
Stripe կամ PayPal API-ները օգնում են կայքերին անվտանգ վճարումներ ընդունել։
🤖
AI API
AI tools-ը կարող են API-ի միջոցով ուղարկել հարց և ստանալ AI պատասխան։
Ինչպես է աշխատում API-ն
📱
Քո app-ը
🔌
API request
🖥️
Server
📦
Response
Ցուցադրում
🧠

Brain Test — Մոդուլ 3

Պատասխանիր 8 հարցի և ստացիր «Web Detective» badge-ը։

🎉
Շնորհավոր
🔍
Web Detective
Մոդուլ 3 — ավարտված
Մոդուլ 4 ➜