Full-stack қолданба дегеніміз не? Қарапайым түсіндірме

Full-stack қолданба — жұмыс істеуі үшін қажет барлық деңгейді қамтитын қолданба: адамдар көріп, басатын фронтенд, серверде жұмыс істейтін және ережелерді қолданатын бэкенд, және бәрін есте сақтайтын дерекқор. Тапсырмаларыңызды сақтайтын, кез келген құрылғыдан кіруге мүмкіндік беретін және тізіміңізді ешкімге көрсетпейтін тапсырмалар тізімі — full-stack. Тек жұмыс уақытыңызды көрсететін бір бет — емес.

«Stack» сөзі технологияның бір-бірінің үстіне қаланған деңгейлерін білдіреді. «Full» дегені — олардың барлығы бар дегені.

AI көмегімен құрастырғанда неліктен маңызды

AI құрастырушысына қолданбаны сипаттағанда, қолданған сөздеріңіз қай деңгейлердің салынатынын анықтайды. «Біздің мәзірді көрсететін бет жаса» фронтенд береді. «Тапсырыс беруге клиенттерге рұқсат бер, ал аспазшылар жаңа тапсырыстарды көрсін» үшеуі де керек, себебі тапсырыстар сақталуы, екі түрлі пайдаланушыға ортақ болуы және құпия қалуы тиіс.

Айырмашылықты білу үш жағдайда көмектеседі:

• Дұрыс нәрсені сұрайсыз. Деректерді сақтау керек болса, соны анық айтыңыз. Тек фронтенд жасайтын құрастырушы аяқталған сияқты көрінеді, бірақ беттерді жаңартқанда бәрін ұмытады.
• Жалған аяқталуды байқайсыз. Үлгі деректері бар демо жұмыс істейтін қолданба сияқты көрінуі мүмкін. Деңгейлерді білу деректердің шынымен бір жерге барғанын тексеруге мүмкіндік береді.
• Жұмыс шығындарын түсінесіз. Тек фронтенд статикалық файлдар түрінде қызмет ете алады. Бэкенд пен дерекқор серверлерде жұмыс істейтін бағдарламалар, хостингтің шығындарының көбі сол жерден шығады.

Күнделікті ұқсастық: мейрамхана

Мейрамханаға назар аударыңыз.

• Асхана залы — фронтенд. Мәзірлер, үстелдер және официанттың блокноты. Қонақтар не көретіні сол, ол ұнамды және оңай пайдаланылуы керек.
• Ас үй — бэкенд. Қонақтар ол жаққа кірмейді. Ол тапсырыстарды қабылдайды, тағамның бар-жоғын тексереді, оны пісіреді және дұрыс емес сұраныстарды қабылдамайды. Ережелер осында тұрады.
• Қойма және тапсырыс кітабы — дерекқор. Олар не бар және не тапсырылғанын сақтайды, сондықтан ауысым ауысқанда ештеңе ұмытылмайды.

Тек асхана залы бар мейрамхана сізге әдемі мәзір көрсете алады, бірақ тамақ бере алмайды. Бұл full-stack болып көрінгісі келетін тек фронтенд қолданба.

Үш деңгей туралы толығырақ

Деңгейлер бір-бірімен бекітілген ретпен сөйлеседі. Фронтенд бэкендтен API арқылы бірдеңе сұрайды — бэкендтің қабылдайтын анықталған сұраулар жиыны. Бэкенд сұрауды тексереді, дерекқордан оқиды немесе жазады және жауап қайтарады. Фронтенд дерекқормен ешқашан тікелей сөйлеспейді.

Бұл реттілік бүкіл стектегі ең маңызды қауіпсіздік идеясы. Фронтенд жағындағы кез келген нәрсені келуші оқи және өзгерте алады, өйткені ол оның құрылғысында жұмыс істейді. Сондықтан ережелер — «бұл шотты тек иесі көре алады», «купон бір рет қана пайдаланылады» — бэкендте орындалуы тиіс. Бөлінуі туралы толығырақ: фронтенд пен бэкенд.

Жұмыс мысалы: сабақтарға жазылу қолданбасы

Сізде йога студиясы бар делік және адамдар сабақтарға онлайн жазылғысы келеді.

Келуші не істейді: сайтқа кіреді, осы аптаның сабақтарын көреді, бірін басады, кіреді және орынға жазылады.

Астарында не болады:

1. Фронтенд кестені көрсетеді. Оны толтыру үшін бэкендтен сұрайды: «Осы аптада қандай сабақтар бар және қанша орын қалды?»
2. Бэкенд дерекқордан сабақтарды сұрайды, әр сабаққа брондауларды санайды және жауап береді.
3. Келуші Жазылу батырмасын басады. Фронтенд «42-сабаққа осы кірген адам үшін жазыл» деп жібереді.
4. Бэкенд тексереді: бұл адам шынымен кірген бе? Сабақ толы ма? Ол бұрын жазылған ба? Тек бәрі дұрыс болғанда ғана дерекқорға жаңа брондау жолын жазады.
5. Бэкенд «жазылды» деп жауап береді, ал фронтенд растау көрсетеді.
6. Кейінірек студия иесі кіріп, сабақтар тізімін көреді. Бэкенд оның әкімші екенін тексереді, содан кейін барлық адамдардың аттарын көрсетеді.

Енді оны тек фронтенд ретінде салынған деп елестетіңіз. Кесте көрсетіледі, Жазылу батырмасы әдемі белгі көрсетуі мүмкін, бірақ беттерді жаңартқанда жазылу жоғалады, «қалған орындар» саны басқалар үшін дұрыс болмайды, ал иесі оны ешқашан көрмейді. 4-қадам — тексерулер — мүлдем жоқ болар еді. Тәжірибедегі айырмашылық осында.

Негізгі терминдер

• Фронтенд (клиент жағы): браузерде жұмыс істейтін бөлік.
• Бэкенд (сервер жағы): серверде жұмыс істейтін бөлік. API сервері деп те аталады.
• Дерекқор: деректердің ретке келтірілген түрде сақталатын жері. Қараңыз: дерекқор дегеніміз не.
• API: бэкенд фронтендтен немесе басқа бағдарламалардан қабылдайтын сұраулар тізімі.
• Аутентификация: кім екенін тексеру (кіру). Авторизация: не істеуге рұқсаты бар екенін тексеру.
• Деплой: қоғам пайдалана алуы үшін барлық деңгейді серверлерге орналастыру.
• Монолит және сервистер: бәрін істейтін бір бағдарлама немесе бірнеше кішірек (мысалы, веб-сайт пен бөлек API). Екеуі де full-stack.

Жиі кездесетін қателер мен түсініспеушіліктер

• «Аяқталғандай көрінеді, демек аяқталған.» Үлгі деректері мен жұмыс істейтін сияқты батырма сақталған деректермен бірдей емес. Бетті жаңартыңыз, жекелік терезеде ашыңыз және деректердің әлі бар екенін тексеріңіз.
• Ережелерді фронтендке салу. Батырманы жасыру қауіпсіздік емес. Егер бэкенд тексермесе, сұрауды білетін кез келген адам оны жасай алады.
• Құпия кілттерді фронтендке салу. Браузер кодындағы төлем немесе AI провайдерінің кілті әрбір келуші үшін оқылатын. Кілттер бэкендте, орта айнымалыларында тұруы керек — қараңыз: орта айнымалылары мен құпиялар.
• Full-stack күрделі дегенді білдіреді деп ойлау. Шағын full-stack қолданба бірнеше экран, бірнеше бэкенд маршруты және үш дерекқор кестесі болуы мүмкін. Бұл деңгейлердің сипаттамасы, өлшемінің емес.
• Әр технологияны өзіңіз таңдауыңыз керек деп ойлау. Кез келген ақылға қонымды, кеңінен қолданылатын стек бірінші нұсқа үшін жеткілікті. Деректер мен ережелердің анық сипаттамасы әлдеқайда маңызды.

AI құрастырушыңыздан не сұрау керек

Атамасаңыз да, қолданбаны үш деңгей тұрғысынан сипаттаңыз:

• Деректер: «Сабақтарды (атауы, уақыты, сыйымдылығы) және брондауларды (сабақ, адам, брондау уақыты) дерекқорда сақта.»
• Ережелер: «Сабақ сыйымдылықтан асып жазылмасын. Адам бір сабаққа тек бір рет жазыла алсын. Брондауларды тек әкімшілер көрсін.»
• Экрандар: «Апталық кесте, брондауды растау, әр сабаққа брондауларды көрсететін әкімші беті.»
• Тексерулер: «Бұл ережелерді тек бетте емес, серверде орындат. Барлық API кілттерін серверде сақта.»

Содан кейін күдікшіл сияқты тексеріңіз: жаңартыңыз, екі түрлі адам ретінде кіріңіз, көрмеуіңіз керек деректерді көруге тырысыңыз. AI көмегімен қолданба құрастыру нұсқаулығы осы циклды толық баяндайды.

Mythex-та full-stack қолданбалар

Mythex full-stack веб-қолданбаларды чаттағы сипаттамадан құрастырады. Әдепкіде жаңа қолданба React және TypeScript фронтендін алады; қолданбаға деректерді сақтау керек болғанда, Mythex жобаға арнайы Postgres дерекқорын қосады, ал веб-сайтпен қатар бөлек API сервері (мысалы Python, Node, C# немесе Java) сұрауға болады. Барлығы тірі алдын ала қарауда бірге іске қосылады және ашық URL-ға жарияланады. Көп сервисті қолданбалар туралы құжат веб-сайт пен API қалай бірге алдын ала қаралып, жарияланатынын көрсетеді, ал full-stack қолданба құрастырушы беті бастапқы нұсқаларды ұсынады.

Сұрақтар