Пост

OSM картасын ашар ыкмасы менен кыргызчалайбыз. 1-бөлүм.

Жарыяланды Жаңыртылды
Автору Murat Jumashev
7 мүн. окуу

OpenStreetMap картасындагы көчөлөрдү ашарлап кыргызчалоого арналган сайтты вайб коддоп жасаган сапарым

Вайбыңдын коду

Vibe coding деген термин Андрей Карпаты (Andrej Karpathy) аттуу белгилүү инсан тарабынан 2025-жылдын 3-февралында сунушталган. Анын аныктамасы Gemini менен которгондо мындай болот экен:

Мен “vibe coding” (вайб кодиң же сезим менен коддоо) деп атап койгон код жазуунун жаңы түрү бар, анда сиз толугу менен сезимдерге берилип, экспоненциалдуу өсүштү кабыл алып, коддун бар экенин да унутасыз. Бул мүмкүн, анткени LLM’дер (мисалы, Cursor Composer менен Sonnet) өтө эле мыкты болуп баратышат. Ошондой эле, мен Composer менен SuperWhisper аркылуу сүйлөшкөндүктөн, клавиатурага дээрлик тийбейм. “Каптал тилкедеги боштукту эки эсеге азайт” деген сыяктуу эң жөнөкөй нерселерди сурайм, анткени аны өзүм жасагандан эринем. Мен дайыма “Баарын кабыл алуу” баскычын басам, өзгөртүүлөрдүн айырмасын (diffs) окубайм. Ката жөнүндө билдирүүлөр келгенде, аларды эч кандай комментарийсиз эле көчүрүп чаптайм, адатта аны оңдой салат. Код менин кадимки түшүнүгүмдөн ашып өсөт, аны жакшылап окуп чыгышым керек болуп калат. Кээде LLM’дер катаны оңдой албайт, ошондуктан мен аны айланып өтөм же ал жоюлганча чейин туш келди өзгөртүүлөрдү сунуш кылганды сурайм. Бул бир жолку дем алыш күндөрүндөгү долбоорлор үчүн анчалык деле жаман эмес, бирок баары бир кызыктуу. Мен долбоор же веб-тиркеме куруп жатам, бирок бул чындыгында код жазуу эмес – мен жөн гана нерселерди көрөм, айтам, иштетем жана көчүрүп чаптайм, жана ал көбүнчө иштейт.

Бул нерсе тууралуу учурда (2025-жылдын жазында) түрлүү сөздөр айтылууда. Тамаша катары Эдсгер В. Дейкстра аттуу компьютер илимдеринин алпынын “табигый тил” тууралуу жазганын цитата кылышат:

Табигый тил деп аталган нерсе ал жаралган максаттар үчүн эң сонун, мисалы, орой сүйлөө, тамаша айтуу, алдоо же сүйүү билдирүү үчүн (ал эми Адабий Сындын Теоретиктери анда мазмунсуз деле боло алышат), бирок биз өтө татаал, мыйзам чыгаруу, арбитраж, математика же программалоо сыяктуу ишмердүүлүктөрдө сөзсүз пайда болгон кырдаалдарды бир маанилүү түрдө чечүүгө аргасыз болгондо, ал таптакыр жараксыз.

… анан могу мемди көрсөтүп, жыргап калышат:

“Вайб кодиң бул программалоонун панк-рок музыкасы” деп дагы чыгышты. Эмнеге? Анткени панк-рок чыга электе адамдар жылдап жүрүп музыка аспабын черткенди үйрөнүп, анан симфонияга кошулушчу. Анан панк-рок чыкканда элдин балдары 1 күндө 3 аккорд үйрөнө калып, ырдап бечү сөздөрүн ырдап чыгышты. (Эркин баяндап айтканда) вайб кодиң дагы адамдарга ошондой эркиндик берди дейт, “THE WAY OF CODE. The Timeless Art of Vibe Coding” аттуу китептин автору Рик Рубин.

Ошол эле маалда, компьютер илимдеринин корифейи болгон Боб байкем, ЖИлерди шумкардай байкап туруш керек, анткени алар көрүнүшү жакшы, бирок тап-такыр туура эмес нерселерди жасашы мүмкүн экенин айтууда:

Мактагандардын дагы, этияттыкка үндөгөндөрдүн дагы сөздөрү жүйөөлүү. Өзүм канча нерсени Cursor’го (мындан ары Курсор) жаздырып, аягында окуганга өтө ыңгайсыз (мисалы, могу) код менен отуруп калган учурларым болду!

Вайб кодиң көндүмүмдү жакшыртуу планым

Бирокчу, туугандар, Боб байкемдин X’ин (твиттерин) жакшылап изилдеп көрсөмчү, өзү бул вайб кодиңдин вайбын жакшылап сезе электей болду.

Өзүм деле кыйратпайм, ошондуктан бул темада дагы эле изденип жатам. Бүгүн могу подкастты көрүп, ал жактагы адамдын репозиторийин таап, өткөндө жасаган долбоорумду негиз кылып, Django, htmx, жана TailwindCSS негизинде жасалган калып менен сайт жасамакчы болдум.

Долбоор тууралуу

Жасамакчы сайтым ашар жолу менен көчөлөрдүн ЖИ тарабынан алдын ала кыргызчаланган варианттарын текшерип, керек болсо түзөп, аларды OpenStreetMap’ке жөнөтүп жиберүүгө арналат. Анда мен Google аркылуу кирүүнү, ар бир көчө аты жок дегенде 3 адам тарабынан текшерилүүсүн талап кылган логиканы ЖИге, тагыраак айтканда, Курсорго жогорудагы видеодо берилген Курсор эрежелерин колдонуп жасатам.

Django Cookiecutter

Python долбоорлорунун калыптарын оңой жол менен көчүрүп алуу үчүн cookiecutter атуу сонун долбоор бар.

img-description “Cookie cutter” – бул печенье калыбы. Сүрөт бул жактан алынды

Долбоорубуз жогоруда берилген калыптын негизинде курулат, ошондуктан ~/projects аттуу долбоорлорум сакталган папкага өтүп туруп, venv аталган Python виртуалдык чөйрөсүн даярдап:

1

python3 -m venv venv

…аны иштетип:

1

source venv/bin/activate

…керектүү китепкананы орнотуп:

1

pip install cookiecutter

…жогоруда айтылган калыпты негиз кылабыз. Бул буйрук иштегенде суроолор берилет, аларга долбоорубузга ылайык жооп беребиз:

1

cookiecutter https://github.com/Alurith/django-cookiecutter.git

Натыйжада мындай долбоор даяр болушу керек:

img-description Калып даяр болду

Байкаганыңыздай, долбоорду osm-ashar деп атадым.

Калыпта берилген кадамдарды аткарып, алгачкы жолу долбоорду от алдырабыз.

img-description От алды!

Эрежелерди кошобуз

.cursor аттуу папка түзүп, анын ичинде rules деген папка түзүп, анын ичине жогоруда айтылган подкастта көрсөтүлгөн эрежелерди салабыз:

img-description Эрежелердин редактордо жайгашуусу

Эреже колдонуп көрөбүз

create-prd.mdc эрежесин окусак, анда tasks папкасы колдоулары айтылган. Демек ошол папканы түзүп коёбуз.

Бул макаланын башында Google аркылуу катталууну ишке ашырыш керек дегенбиз. Ушул маселеден баштайлы. Ал үчүн Курсорго төмөнкү сурам жаздым:

@create-prd.mdc эрежесин колдон Могу нерсе керек болуп жатат: Django долбоорунун колдонуучулары Google аркылуу каттала алышы керек. Django, htmx, tailwindcss колдонулаарын эске ал. Төмөнкү файлдарды жардамчы катары колдонсоң болот: @requirements.txt @homepage.html @urls.py @settings.py

img-description Жазылган сурам

Бул сурамга жооп катары могуларды жазып, жооп берүүнү талап кылды:

img-description Ушинтип анан эзет, ойлорумду өзү окуп эле, жасап таштаса кана?!

Баарын айтып бериш керек экен, эхх.

  1. Негизги максаты - колдонуучуларга (ыктыярчыларга) сайтка оңой катталып, кирип, андан кийин атайын, катталгандарга гана жеткиликтүү болгон функцияларды колдонууга мүмкүнчүлүк берүү. Долбоор Django, htmx жана Tailwind CSS колдонот.
  2. Кыргыз тилдүү ыктыярчылар
  3. Жаңы колдонуучуларга Google аккаунту аркылуу тез жана оңой катталууга мүмкүнчүлүк берүү. Катталган колдонуучуларга Google аккаунту аркылуу ыңгайлуу кирүүсүн камсыз кылуу. Кирген колдонуучуларга системадан коопсуз чыгуу мүмкүнчүлүгүн берүү. Колдонуучунун Google электрондук почта дарегин системада колдонуучу аты катары сактоо.
  4. Каттала элек колдонуучу катары: Мен Google аккаунтум аркылуу сайтка катталгым келет, ошентип мен тез арада аккаунт түзүп, ыктыярчылар үчүн функцияларга кире алам. Катталган колдонуучу катары: Мен Google аккаунтум аркылуу сайтка киргим келет, ошентип мен өз аккаунтума жана ыктыярчылар үчүн функцияларга оңой жете алам. Кирип турган колдонуучу катары: Мен аккаунтумдан чыккым келет, ошентип сессиямдын коопсуздугун камсыздай алам.
  5. Колдонуучулар Google аккаунттары аркылуу ийгиликтүү каттала алышат. Колдонуучулар Google аккаунттары аркылуу ийгиликтүү кире алышат. Колдонуучулар системадан ийгиликтүү чыга алышат. Сайтка катталган жана активдүү ыктыярчы-салымчылардын санынын өсүшү.
  6. Максатка Кирбегендер (Non-Goals / Out of Scope)
    • Салттуу сырсөз аркылуу каттоо же кирүү функциялары.
    • Google аркылуу түзүлгөн аккаунттарга сырсөз кошуу же өзгөртүү мүмкүнчүлүгү.
    • Колдонуучунун аккаунтун өчүрүү функциясы.
    • Google профилинен электрондук почтадан башка берилиштерди (мисалы, профиль сүрөтү, аты-жөнү) алуу же сактоо, эгер кийинчерээк атайын талап кылынбаса.
  7. Бир гана почтасы керек
  8. “Google менен кирүү” баскычы навигация тилкесинин оң тарабында жайгашышы керек. “Чыгуу” баскычы/шилтемеси кирген колдонуучулар үчүн көрүнүктүү болушу керек, ошол эле навигация тилкесинде, “Google менен кирүү” баскычынын ордуна же колдонуучу менюсунда.
  9. башкы бетке
  10. жок. Бул cookiecutter долбоордо алар ишке ашырылган эмес экен. django-allauth керек болот окшойт
  11. “Азырынча ката кетти, кайра аракет кылыңыз” деген текстти көрсөтөбүз.

Жакшы натыйжа берди.

img-description Эми кийинки кадамдарда ушул нерсе канчалык пайдалуу болоор экен?

Тапшырмалар тизмегин даярдатабыз

Эми жаңы чат сессиясын ачып, кийинки кадам катары тапшырмаларды (тасктарды) жаз деп буйрук беребиз:

@prd-google-authentication.md файлын алып, @generate-tasks.mdc колдонуу менен тапшырмалар тизмегин түз

Натыйжада чоң-чоң арыштап, тапшырмаларды жазып алып, суб-тапшырмаларды түзүүнү сунуштайт:

img-description Жогорку деңгээлде тасктарды түздү, кийинки кадамды сунуш кылды

Түзгөн тапшырмалар тизмегин улам текшерип турбасак, туш келди нерселерди камтып коюшу ыктымал. Болушунча текшеребиз.

img-description Django менен тааныш болгондуктан, каталарды байкадым. Өзүңдү жакшылап текшер деп дагы буйрук берсе болчудай

Өзү түзгөн тапшырмалар тизмегин өзүнө беребиз

Эми ЖИге тапшырмаларды бир-бирден беребиз. Ал үчүн жаңы чат-сессия ачып, төмөнкү буйрукту беребиз:

Эми сен @tasks-prd-google-authentication.md ичиндеги 0.0 тапшырмасын башта. @process-task-list.mdc эрежелерин колдон

Ошондо төмөнкүдөй кылып кете беребиз:

img-description Баштадык!

Улам бир тапшырманы аткарып, белгилеп, кийинкисине өтө беребиз.

img-description Иш алга жылууда

Ары-бери басып, досум менен кезигип келип, тамактанып, үй жыйноого катышып жатып, “Google аркылуу кирүү” функционалын жасап бүтүрдүк.

img-description Google аркылуу кирүү тапшырмалары аткарылды!

Натыйжа мындай болуп калды:

img-description Колдонуучу кире электеги абал

img-description Колдонуучу кирип турган абал

Кийинки функционалды пландоо

Көчө аттарын жана LLM которгон варианттарын сактап, колдонуучуларга көрсөтүп, алардын түзөтүүлөрүн кабыл алуу функционалын жасайбыз. Демек, биринчи PRD түзөбүз, анын жардамы менен тасктардын тизмегин түзөбүз. Анан аларды ишке ашырабыз.

PRD түздүрүп, могундай натыйжа алдым. Кызыктуу болчудай.

Ушуну менен бул постту аяктайын. Уландысы кийинки дем алышта болот.

Репозиторий бул жерде: https://github.com/devkurultay/osm-ashar

tutorial, cursor, vibe-coding, Python, Django, htmx
Бул пост автор тарабынан CC BY 4.0 лицензиясы менен корголгон.