Avtomobilda yo'lovchi o'rindan Spotify viktorina o'yinini qurish: AI yordamida kod yozish haqiqatan qanday ko'rinadi

Hitster degan mashhur musiqa o'yini bor. QR kod skanersan, Spotify qo'shiq ijro etadi, do'stlar yilni taxmin qiladi, kartalarni vaqt chizig'iga joylashtirasan. Oddiy, qaramas, 25 evroga kartalar to'plami.

Bir dasturchi o'yladi: nega sotib olaman, o'zim yasay? Muammo: Avstriyadan Germaniyaga avtomobil yo'lida yo'lovchi o'rinda. Qo'lida telefon, uy serveri va Claude AI kod yozuvchi yordamchi.

Natija: Zamonaviy AI bilan dasturlash haqiqiy imkoniyatlari va cheklovlari haqida qiziqarli misol.

Cheklovlar asosiy maqsad edi

Bu sun'iy tajriba emas. Haqiqiy muammoni cheklangan sharoitda hal qilish. Laptop yo'q. Klaviatura yo'q. Telefon ekranida API hujjatlarini qidirib topolmaysan. Faqat Telegram orqali Claude'ga ovozli xabarlar, serverda kod ishga tushirish va mobil ekranda natijani ko'rish.

Stack sodda: vanilla HTML, CSS, JS. Spotify PKCE avtorizatsiyasi (backend kerak emas). QRCode.js kod yaratish uchun. Html5-QRCode skanerlash uchun. Ortiqcha narsa yo'q.

Bu cheklovlar dizaynni yaxshilaydi. Kutubxona va hujjatlarga osongina murojaat qilib bo'lmasa, sinovdan o'tgan vositalarni tanlaysan. G'alati dependency'lardan qochasan. Murakkablikni nazoratdashtirasan.

Uch soatda birinchi g'alaba

Avto Burger King'ga to'xtaganida, asosiy funksiya ishlay boshladi. Telefon bilan QR kod skanersan, Spotify pleylistdan musiqa yangraydi.

Vaqt jadvaliga e'tibor: Fikrdan ishlaydigan prototipgacha 3 soat. Faqat ovozli buyruqlar va masofadan fayl ishga tushirish. Spotify avtorizatsiyasi – developer konsolida ro'yxatdan o'tish, OAuth oqimini tushunish, tokenlarni debug qilish – birinchi sinovda ishladi.

Sir sehr emas. Aniq muloqot. Dasturchi nima qilmoqchi ekanini aytadi. Claude savollar beradi, vositalarni tanlaydi, bajaradi. To'siqda (Spotify test foydalanuvchisi sifatida ro'yxatdan o'tish) odam savolini beradi, odam javobini oladi. AI taxmin qilishga hojat qoldirmaydi.

Ish jarayoni qayerda yorqindi

Masofadan xato hisobotlari debug'ni o'zgartirdi. Android Chrome'da test – DevTools yo'q. Odatda: taxmin qilasan, kod o'zgartirasan, qayta yuklaysan, ishlaydimi ko'rasan, takrorlaysan. Claude taklif qildi: klient tomondan xato hisobotini qo'sh, barcha JS xatolarini serverga yubor. Endi "tugma ishlamaydi" desang, Claude haqiqiy xato xabarlarini o'qiydi. Debug DevTools ochiqdek tez bo'ldi – stack trace o'qish shart emas.

Avtorizatsiya muammosiz ishladi. Spotify PKCE backend'siz ishlaydi, infratuzilma oddiy. Dasturchi Client ID olib Claude'ga berdi, login qilish tayyor. Bir necha iteratsiyada test foydalanuvchi qo'shildi. Masofaviy ish uchun ideal texnologiya.

Tailscale Serve mobil testni darhol yoqdi. Port forwarding yoki firewall bilan ovora bo'lmaysan. Claude tailscale serve --bg --https=8443 http://127.0.0.1:8080 bajardi, app telefon orqali tailnet'da ochildi. Hujjat qidirmasdan ishladi. AI dasturlashni mumkin qiluvchi infratuzilma.

UI dizayn dizayner talab qilmasdi. Claude dizayn tizimlari va naqshlarni biladi, qo'pol interfeys chiroyli bo'ldi. Figma o'rganish yoki ranglar haqida bahslashish shart emas.

Keyin haqiqat paydo bo'ldi

Spotify API jim buzildi. Pleylist endpoint 403 Forbidden qaytardi, avtorizatsiya va scopelar to'g'ri bo'lsa ham. Claude brauzer loglarini o'qib, 2026 fevralda o'zgarishni topdi: /v1/playlists/{id}/tracks o'rniga /v1/playlists/{id}/items. Ikki qator kod bilan tuzatdi. Diagnostika uchun bir necha iteratsiya ketdi, chunki xato yuzaki emas. AI loglar bilan tizimli debug qiladi, lekin bosqichma-bosqich fikrlaydi.

Huquqiy to'siq chiqdi. O'yin deyarli tayyor, dasturchi so'radi: "Nega Hitster kloni ochiq yo'q?" Javob: Spotify Developer Policy III-bo'lim: "O'yin yasama, shu jumladan viktorina." Bu yumqartirib bo'lmaydi. Hitster'ning alohida shartnomasi bor. Texnik jihatdan qiyin emas, shartnoma taqiqlaydi.

AI dasturlashda muammo: ToS buzuvchi narsalarni oson yasash mumkin. Texnika osonlashdi, endi huquqiy va biznes cheklovlari asosiy to'siq.

Ishga tushgan jarayon

Telegram orqali Claude Code'ga ovozli xabarlar. Tailscale tarmoq uchun. --dangerously-skip-permissions flag bilan Claude fayl yozish va shell buyruqlarini tasdiqlovsiz bajaradi – yo'lovchi o'rinda kutib bo'lmaydi. Ishonch modeli o'zgardi.

Ovoz kiradi, kod chiqadi, telefon qayta yuklanadi. Uch vosita masofadan feedback halqasini yaratdi.

Nimalar etishmaydi (va muhim)

Klient xato hisoboti ishlaydi, lekin ideal emas. Chrome DevTools Protocol Claude'ga brauzer konsolini, network so'rovlarini va DOM'ni to'g'ridan beradi. Haqiqiy dev muhitga yaqinroq.

Umuman, uy serveri, public IP va Tailscale tunnel cheklaydi. Cloud kerak bo'lsa, CLI, env o'zgaruvchilari va murakkab deploy bilan kurashasan.

ToS tufayli o'yin shaxsiy – do'stlar uchun proof of concept, mahsulot emas.

Asl xulosalar

Bu AI dasturchilarni almashtirishi haqida emas. Fikrni aniq ifoda etish va to'g'ri kutubxona topish o'rniga iteratsiya tezligi haqida.

Dasturchi hali ham loyihani tushunishi, Spotify huquqiy muammosini sezishi, Tailscale, PKCE, vanilla JS kabi vositalarni bilishi kerak.

O'zgargan: "Fikr bor"dan "ishlaydigan prototip"gacha vaqt. Kunlardan soatlarga. Soatlardan avto sayohatga.

Bu sehr emas. Yaxshi vositalar, aniq muloqot va mantiqiy cheklovlar natijasi.

Loyihalarni tezroq qurmoqchimisiz? NameOcean Vibe Hosting va AI vositalari shu tez iteratsiya uchun. Prototyp yasashdan production infratuzilmagacha – domain, tarmoq va toollar bilan tez harakat qiling.