AI көмегімен жасалған қолданбаны қалай түзету керек: практикалық әдіс

AI көмегімен жасалған қолданбаны түзету үшін алдымен қатені әдейі қайта шақырыңыз, содан кейін дәлел жинаңыз — нақты қадамдарды, қате хабарын, браузер консолі мен желі қойындысы не көрсетіп тұрғанын — және оны AI-ға "мен X істедім, Y күттім, Z алдым" деп беріңіз. Түзету жағдайды нашарлатса, үстіне түзету қоспай, соңғы жұмыс істеген нұсқаға қайтыңыз. Мұның бәрін жақсы істеу үшін кодты оқудың қажеті жоқ.

Бұл нұсқаулық толық циклді қамтиды, соның ішінде әзірлеуші емес адамдарға арналған браузер құралдарының қысқа турын.

Түзету циклі

Әр қатені түзету, адам жасасын немесе AI, бір циклмен жүреді:

1. Қайталау — қатені сенімді түрде шақырыңыз.
2. Бақылау — қате хабарын және қолданба не істеп жатқанын жинаңыз.
3. Сипаттау — AI-ға нақты қадамдарды, күтілетін нәтижені және нақты нәтижені беріңіз.
4. Түзету — AI-ға бір нәрсені ғана өзгертуге рұқсат етіңіз.
5. Тексеру — дәл сол қадамдарды қайталап, түзетілгенін және жақын жердегі ештеңе бұзылмағанын растаңыз.
6. Қажет болса кері қайтару — нәтиже нашарласа, болдырмаңыз және жақсырақ ақпаратпен қайта көріңіз.

AI көмегімен жасалған қолданбаларда уақыт көп кетудің себебі — 1, 2 және 5-қадамдарды өткізіп жіберу: "сынған" деп айту, өзгерісті тексермей қабылдау, содан кейін бұзылған нәрсенің үстіне тағы түзету сұрау.

1-қадам: Қатені қайталаңыз

Қаланған кезде шақыра алатын қате — жарты түзетілген қате. Оны тудыратын ең қысқа қадамдар тізбегін табуға тырысыңыз.

Өзіңізге сұрақтар қойыңыз:

• Әр жолы болады ма? Тек кейде болса, ол болғанда не өзгеше — нақты жазба, баяу байланыс, жүйеден шығу?
• Барлық пайдаланушыда болады ма? Басқа аккаунтпен кіріңіз. Көп қате тек деректері жоқ жаңа пайдаланушыларда немесе басқа рөлдегі пайдаланушыда көрінеді.
• Барлық құрылғыда болады ма? Телефон ені экранын және басқа браузерді сынаңыз.
• Нақты бір өзгерістен кейін басталды ма? Кеше жұмыс істеген болса, соңғы бірнеше өзгеріс — негізгі күдіктілер.

Қадамдарды қысқа нөмірленген тізім ретінде жазыңыз. Кейін оны сұраныска қоясыз.

2-қадам: Қате хабарламасын оқыңыз

Қате хабарламалары қорқытатындай көрінеді, бірақ сізге олардың бірнеше бөлігі ғана керек.

Оны түсінудің қажеті жоқ; оны дәл көшіру керек. "Cannot read properties of undefined (reading 'name')" деген хабар AI-ға кодтың кейбір деректерді (мысалы, брондауды немесе пайдаланушыны) күтіп тұрғанын, бірақ олардың жоқ екенін айтады. "Бір белгісіз қате" сияқты перифраз сол мағынаны жоғалтады.

Кейбір жиі кездесетін қателер, шамамен аударылған:

• undefined / null қателері — код күткен деректер келмеді. Жиі жүктеу күйі немесе код өңдемеген бос тізім.
• 404 Not Found — бет немесе API мекенжайы жоқ. Жиі маршруттағы емле қатесі немесе атауы өзгертілген бетке сілтеме.
• 401 Unauthorized / 403 Forbidden — сұрау кірмеген, немесе пайдаланушыға мұны істеуге рұқсат жоқ.
• 500 Internal Server Error — сервер жағындағы код құлады. Нақты себеп браузерде емес, сервер журналдарында.
• CORS қателері — браузер басқа доменге сұрауды бұғаттады. Әдетте сервердегі баптау мәселесі.

3-қадам: Браузер devtools құралдарын пайдаланыңыз

Әр жұмыс үстелі браузерінде кірістірілген әзірлеуші құралдары ("devtools") бар. Олар бет перде артында не істеп жатқанын көрсетеді. Chrome, Edge және Firefox-та беттің кез келген жерін оң жақ батырмамен басып, Inspect таңдаңыз, немесе F12 басыңыз (Mac-те Cmd+Option+I). Safari-да алдымен Safari баптауларынан Develop мәзірін қосыңыз.

Сізге тек үш қойынды керек.

Console

Console қойындысы беттің кодынан шыққан қателер мен хабарларды тізеді. Қателер қызыл түспен көрсетіледі. Батырма басқанда ештеңе істемесе, басқан сәтте консолде қызыл қате жиі шығады. Қатенің толық мәтінін көшіріңіз (көп браузерде оны оң жақ батырмамен басып көшіруге болады).

Network

Network қойындысы бет жасайтын әр сұрауды тізеді — деректерді жүктеу, форманы сақтау, кіру. Оны ашыңыз, содан кейін қатені тудыратын қадамдарды қайталаңыз.

• Қызыл жолдарды немесе 400 және одан жоғары күйі бар жолдарды іздеңіз.
• Сәтсіз жолды басып, оның Response бөлімін көріңіз. Сервер қатесі көбіне экрандағы кез келген нәрседен пайдалырақ хабарламаны сонда береді.
• Сұраудың URL-ін және күй кодын жазып алыңыз — "/api/bookings-ке POST 500 қайтарды" деген сөйлем AI-ға беруге өте пайдалы.

Қате бетті қайта жүктеуге немесе бағыттауға байланысты болса, сұраулар жоғалмауы үшін Preserve log белгісін қойыңыз.

Elements

Elements (немесе Inspector) қойындысы беттің құрылымы мен стильдерін көрсетеді. Макет қателері үшін ең пайдалысы: элементтің үстіне апарсаңыз, оның өлшемі мен аралығы бөлектеледі. Мұнда ешнәрсені өңдеудің қажеті жоқ; "мобильде футер 2000 пиксель енді және бетті бүйірге итереді" деу жеткілікті.

4-қадам: Сервер журналдарын тексеріңіз

Кейбір қателер серверде болады, браузер оларды көре алмайды. Желі қойындысындағы 500 қатесі — классикалық белгі. Сервер журналдары — бэкендіңіз жұмыс істеп тұрғандағы мәтіндік шығыс — әдетте нақты қатені стек трейсімен (сәтсіз болған кезде іске қосылып тұрған функциялар тізімі) қамтиды.

Оларды қайдан табу құралыңызға байланысты. Көп AI қолданба жасағышта жоба үшін терминал немесе журнал көрінісін ашуға болады, немесе жай ғана AI-дан сұраңыз: "Соңғы сұраудан қателерді журналдардан тексеріп, не сәтсіз болғанын айтыңыз."

5-қадам: Қатені AI-ға сипаттаңыз

Жинаған мәліметтеріңізді осындай түрге келтіріңіз:

Брондаулар бетінде, мүше ретінде кіріп: ертеңгі 9:00 сабағында Cancel басқанмын. Күтілді: брондау жоғалады және сабақта бір бос орын көбейеді. Нақты: экранда ештеңе өзгермейді. Консолде BookingCard.tsx:31 жолында TypeError: Cannot read properties of undefined (reading 'id') көрінеді, ал желі қойындысында DELETE /api/bookings/123 500 қайтарады. Себебін табыңыз, түзетіңіз және бір брондауы бар мүше мен бірнеше брондауы бар мүше үшін болдырмау жұмыс істейтінін тексеріңіз.

Әр бөліктің маңызы:

• Қай жерде және кім ретінде бір экранға және бір рөлге тарылтады.
• Нақты қадамдар AI-ға қайталауға мүмкіндік береді.
• Күтілген және нақты "түзетілді" дегеннің нені білдіретінін анықтайды.
• Қате мәтіні және сәтсіз сұрау бірден себебіне бағыттайды.
• "Тексеріңіз…" AI-дан тек өңдеуді емес, растауды сұрайды.

AI екі рет түзетуге әрекеттеніп, сәтсіз болса, ештеңе өзгертпес бұрын түсіндіруді сұраңыз:

Әзірге кодты өзгертпеңіз. Сіздің ойыңызша бұл нені тудырады және бұған қандай дәлел бар?

Дұрыс емес теорияны жазылғанда оңай байқауға болады, ал оны дұрыстау дұрыс емес түзетуге қарағанда әлдеқайда арзан.

6-қадам: Тексеріңіз, содан кейін маңайын тексеріңіз

AI түзетілгенін айтқанда, 1-қадамдағы дәл қадамдарды қайталаңыз. Содан кейін соның маңайындағыларды тексеріңіз:

• Басқа пайдаланушы рөлі үшін сол әрекет
• Деректері жоқ және деректері көп болғандағы сол әрекет
• Түзеткен бетпен компоненттерді бөлісетін беттер
• Түзету макетке тигенде телефон ені экраны

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

7-қадам: Үстіне қоспай, кері қайтарыңыз

Түзету жағдайды нашарлатса немесе үш раунд ілгерілемей кетсе, артқа қайтыңыз. Соңғы жұмыс істеген нұсқаға қайту және жақсырақ дәлелмен қайта сипаттау, үш қате түзетудің үстіне төртінші түзетуді сұрағаннан әрдайым жақсырақ. Әр сәтсіз әрекет артында код қалдырады, ал ол код келесі әрекетті шатастырады.

Кері қайтаруды жеңіл ететін жақсы әдеттер:

• Әр өзгерістен кейін тексеріңіз, сонда қай өзгеріс бұзғанын білесіз.
• Өзгерістерді шағын ұстаңыз — бір хабарламада бір мүмкіндік немесе бір түзету.
• Тәуекелді бастамас бұрын соңғы жұмыс істеген нұсқаны белгілеңіз.
• Код Git-те болса, жұмыс істейтін нұсқаларды коммит етіңіз, сонда оларға қайта оралуға болады.

AI көмегімен жасалған қолданбалардағы жиі кездесетін қателер

Проблема қате болмаған кезде

Кейбір "қателер" — AI дәл айтылғанды жасағаны, ал сипаттама екіұшты болғаны. Сұрап жатқан түзетуіңіз шын мәнінде мінез-құлықтың өзгеруі болса, оны ашық айтыңыз: "Оны мынадай етіп өзгертіңіз…". Дұрыс мінез-құлық қандай екенін өзіңіз нақты білмесеңіз, алдымен соны шешіңіз. Ережелерді айқын көрсету жолын AI қолданба жасағыштарға арналған сұраныстарды жазу нұсқаулығы түсіндіреді. Ал қолданбаны нақты пайдаланушыларға дайындасаңыз, іске қосар алдындағы тексерулер үшін AI прототипін өндіріске шығару бөлімін қараңыз.

Mythex-те түзету

Mythex-те циклдің әр қадамына арналған құралдар бар:

• Preview қатені қайталау үшін, соның ішінде телефон өлшеміндегі кадрмен.
• /test агентке тірі превьюде пайдаланушы сияқты басып өтіп, бұзылған ағындарды хабарлауын тапсырады.
• /fix агентті нақты бұзылуға бағыттайды.
• Plan режимі агентке өңдеудің алдында зерттеп, түсіндіруге мүмкіндік береді.
• Code → terminal қолданбаңыздың сервер журналдарын көрсетеді.
• Кез келген жауаптағы Revert to this point жобаны сол checkpoint-ке қайтарады.

Егер жариялау сәтсіз болса, жариялау диалогы әдетте Fix with AI ұсынады, ол құрастыру шығысын немесе қолданба журналдарын оқиды. Құжаттардағы қолданбаңызды түзету және жариялау ақауларын түзету бөлімдерін қараңыз.

Сұрақтар