Cursor ndoto yako, Sehemu ya 1: Jinsi ya kuhamia kutoka wazo la bidhaa kwa prompt ya kwanza

Makala hii ni kwa ajili ya nani? Waanzilishi ambao hutumiwa kutegemea timu za maendeleo, lakini rasilimali zao za sasa au bajeti zimewafanya miradi fulani kukaa katika sanduku kwa miaka. Mwanzoni ambao hawana uhakika wa kuandika toleo la kwanza la bidhaa zao na hawana bajeti ya kuajiri watengenezaji. Startups ambazo zimefungwa kujaribu kuongeza mzunguko tu ili kujenga prototype au MVP. Nini kinachofanya bidhaa hii kuwa tofauti? Mimi si programu, na mimi kuandika hii kwa wasomaji ambao hawana ujuzi wa kiufundi (lakini mawazo ya kiufundi itasaidia kwa uhakika). Katika miezi sita iliyopita, nilikwenda njia yote kutoka kutokuwa na kuandika msimbo hata kidogo hadi kujenga bidhaa mbili kamili. Kila moja ya huduma hizi ni pamoja na meza 30-40 ya database, karibu viungo 50, na karibu mstari wa msimbo wa 100,000. Huduma ya kwanza inashirikiana na OpenAI ili "kufanya maana" ya maudhui yaliyotengenezwa na mtumiaji. Inatumia database ya vektor, embeddings, na shughuli zilizoundwa karibu nao. Huduma ya pili inajumuisha mfumo wa ndani wa hesabu na hesabu ya kuingia mbili, shughuli za idempotent, na mfumo wa malipo ya pamoja kwa usindikaji wa malipo ya mtandaoni. Mimi si kuelezea baadhi ya njia ya kichawi ya kujenga programu bila kugusa msimbo kabisa. lakini bidhaa hii inaonyesha kwamba inawezekana kujenga bidhaa halisi bila kutumia miaka ya kwanza ya kujifunza lugha ya programu. Utakuwa bado unahitaji kuangalia msimbo, wakati mwingine kuhariri kwa mkono, na kuweka mambo chini ya udhibiti - lakini utakuwa na uwezo wa kufanya hivyo. Introduction Maelezo ya Wazo la maendeleo ya moja kwa moja ni maarufu sana sasa: maelezo ya bidhaa katika maandishi na kupata programu ya kazi. Lakini wakati tunapojenga bidhaa ili kujaribu hypotheses halisi, matarajio ni tofauti.Tunataka UI sahihi / UX, utendaji mzuri, caching, uwezekano wa kupanua, na uwezo wa watengenezaji halisi kufanya kazi na msimbo huu baadaye. Kutokana na uzoefu wangu, hata mifano yenye nguvu kama Opus inashughulikia mantiki ya backend na muundo wa database vizuri, lakini wanapigana zaidi na usanifu wa frontend. Hiyo ni kwa nini mimi si kutumia generators moja kwa moja. Hakuna uchawi hapa: ikiwa hata Opus ndani ya Cursor yangu inaweza kuchanganyikiwa frontend, kitu kimoja kutokea katika bidhaa nyingine iliyoundwa juu ya LLMs. Katika mfululizo huu, ninatumia mbinu tofauti: IDE na wafanyabiashara wa AI wa ndani. AI husaidia kuandika msimbo na mipango ya kazi, lakini usanifu na maamuzi muhimu yanaendelea chini ya udhibiti wa binadamu. Kwa nini nilichagua Cursor? Kwa sababu tu niliandika kwamba imejengwa juu ya mhariri maarufu wa VS Code. Ilikuwa kama chaguo la busara. itakuwa mbaya zaidi; katika mazoezi, matokeo itakuwa karibu sawa, kwa sababu ubora wa ufumbuzi inategemea sana mfano unaotumiwa. Antigravity ya Hadithi hii ilianza wakati wa majira ya Wakati nilikuwa nikiwasiliana na mawazo ambayo yalikuwa katika kichwa changu kwa muda mrefu ya a , ambapo watumiaji wanapokea mapendekezo kulingana na sawa katika ratings zao za kibinafsi (maduka, hoteli, nchi, hobby, kimsingi chochote). 2025 DeepSeek 10 years social network of preferences Hebu tufanye hivyo kwa kutumia Next.js. Hebu tufanye hivyo kwa kutumia Next.js. Hebu tufanye hivyo kwa kutumia Next.js. Miezi mitatu baadaye, nilipata kuwasilisha bidhaa kwa uongozi wa juu wa kampuni kubwa, na walikuwa wale ambao waliomba kufanya hivyo. Jambo la ajabu ni kwamba, licha ya miaka 20 katika IT kama mwanzilishi, hayajawahi kutokea kwangu kabla. Hivi karibuni, pia nilileta mradi mwingine uliodumu kwa muda mrefu kuanza, mmoja ambaye alikuwa ameketi katika folda kwa miaka. Daima nilidhani itakuwa ngumu sana na gharama kubwa ya kujenga, na mada yenyewe ilihisi hatari ya kutosha kwamba sikutaka kuwekeza fedha ndani yake. Katika mfululizo huu, nitashiriki uzoefu wote: maagizo halisi, mipangilio, na mashaka. Lakini kabla ya kwenda zaidi, tunahitaji kujibu swali muhimu zaidi: Unapaswa hata kujaribu hii? Unapaswa hata kujaribu hii? Jibu la muda mfupi - Ikiwa unajua kikamilifu maneno haya: yes Mwisho wa Nyuma ya Database ya Muundo wa HTML CSS ya Styling Utaratibu wa JavaScript Maoni ya msingi ya React Ikiwa mawazo haya tayari yana maana kwako, tafadhali kumbuka chini kwa sehemu ya "Chagua Mfumo". Ikiwa mawazo haya tayari yana maana kwako, tafadhali kumbuka chini kwa sehemu ya "Chagua Mfumo". Ikiwa maneno haya yanaonekana ya ajabu, ni bora kuchukua muda Jambo lafuatayo hakutakuwa na hisia kama kuvinjari vyombo vya habari vya kijamii, lakini fikiria hili: safari hii ilimwokoa karibu , kuajiri wafanyabiashara, na kujenga timu. understand them now $300,000 and a couple of years of development Frontend dhidi ya Backend Kwa maneno rahisi, kwa Hii ni nini mtumiaji anaweza kuona: frontend Tovuti kwenye kivinjari Maombi ya simu Utoaji wa Browser interface yoyote ambapo watumiaji wanapiga kifungo au kusoma habari ya ni sehemu ya mfumo unaofanya kazi kwenye seva mahali fulani kwenye mtandao. backend Hii inafanya kazi: Usindikaji wa data Uhalali wa Logic ya Biashara Mawasiliano na Databases Wakati mtumiaji anapiga kifungo, frontend inatuma ombi kwa backend. Mchanganyiko unaonekana karibu kama hii: User → Frontend → Backend → Database → Backend → Frontend → User Katika utendaji, frontend inashirikiana na backend kupitia URL maalum ambayo frontend inatuma maombi kwa: API routes /api/articles /api/login /api/create-article Wakati frontend huita moja ya anwani hizi, seva hufanya msimbo unaohitajika: Kuangalia kwa mtumiaji Unahitaji database ya Utaratibu wa data na kurejesha matokeo yake. Kwa mfano, frontend inaweza kutuma ombi kama hii: GET /api/articles?author_id=535 Backend inapokea ombi hili, hutafuta makala kutoka kwenye database, na kurudi kwenye frontend. Database ni nini? Database inahifadhi taarifa zinazotumiwa na programu. Ikiwa umewahi kutumia Excel au Karatasi za Google, dhana ni sawa sana. Kila meza ni kama karatasi. tables Users Table id name email 1 Alice alice@example.com 2 Jack jack@example.com 1 Alice ya kwa ajili ya maombi@example.com 2 Jack wa kwa mfano.com Articles Table id name email 1 1 First article 2 1 Another article 3 2 Jack's article 1 1 Makala ya kwanza 2 1 Makala nyingine 3 2 Makala ya Jack Katika mfano huu, mtumiaji mmoja anaweza kuunda makala nyingi. Mfumo huu rahisi wa ni msingi wa mifumo ya programu nyingi. katika huduma yako mwenyewe kunaweza kuwa na hata kama kwa sasa inaonekana kuwa watakuwa watatu tu. related tables 30–50 tables HTML: Muundo wa ukurasa Ufafanuzi wa HTML . what exists on the page kichwa Sehemu ya Button ya Picha ya Uwezo wa Container Mfano wa: Hello This is a paragraph

vipengele vya HTML huunda muundo unaojulikana kama . DOM div ├── h1 └── p Kila ukurasa wa wavuti katika kivinjari chako kimsingi ni mti mkubwa wa vipengele. CSS: jinsi mambo yanaonekana Ikiwa HTML inaonyesha muundo, . CSS defines appearance rangi ya vyanzo vya Ulimwengu Layout ya Msimamo wa Mfano wa: /* CSS class that defines how the title looks */

.title { color: blue; font-size: 32px; } Inatumika kwa namna hii:

Hello Kuunganisha darasa nyingi Jambo muhimu katika CSS ni kwamba vipengele vinaweza kuwa na . multiple classes Mfano wa:

Submit Kila darasa inaweza kudhibiti vipengele tofauti vya styling. /* base button style */ .button { border-radius: 6px; }

/* button color style */ .button-primary { background: blue; color: white; }

/* button size */ .button-large { padding: 16px 24px; } Uwezekano huu ni mkubwa, lakini unaweza pia kuwa na wasiwasi katika maombi makubwa wakati mtindo huanza kuingiliana na kila mmoja. Kwa nini upepo unasaidia Hii ni moja ya sababu wengi wa miradi ya kisasa kutumia Badala ya kuandika faili kubwa za CSS, Tailwind hutumia darasa la utility zilizoelezwa. Tailwind CSS Mfano wa: Submit

Kila darasa inawakilisha sheria moja ndogo ya styling. mbinu hii ina faida ya kushangaza wakati wa kufanya kazi na zana za AI kama Cursor. . Tailwind layouts much more reliably than traditional CSS Ikiwa huwezi kuagiza wazi Cursor kutumia Tailwind, inaweza kuanza kuingiza mtindo moja kwa moja katika kila kipengele. Ikiwa huwezi kuagiza wazi Cursor kutumia Tailwind, inaweza kuanza kuingiza mtindo moja kwa moja katika kila kipengele. Mfano wa:

Hii inafanya kazi kwa mara ya kwanza. Lakini baadaye inakuwa maumivu, kwa sababu kubadilisha muundo unahitaji kuhariri kila kipengele peke yake. madarasa ya kutumika kuruhusu kubadilisha muundo wa programu yote kwa kubadilisha aina chache tu zilizoshirikiwa. Maelezo ya JavaScript na TypeScript HTML hufafanua muundo, CSS hufafanua muonekano. JavaScript defines behavior. Bonyeza au bonyeza kutazama picha kwa ukubwa kamili JavaScript inaruhusu interface ya kujibu hatua za mtumiaji. Mfano wa: // when the user clicks the button, show a message

button.addEventListener("click", () => { alert("Hello!"); }); TypeScript ni kimsingi JavaScript na usalama wa aina ya ziada. Maelezo ya JavaScript: // a simple function that adds two numbers

function add(a, b) { return a + b; } Maelezo ya TypeScript: // the same function, but with explicit types // a and b must be numbers // the function returns a number

function add(a: number, b: number): number { return a + b; } Programu nyingi za kisasa hutumia TypeScript kwa sababu inakadiriwa makosa mengi katika mifumo kubwa. Kwa nini unahitaji kutumia Next.js Katika sehemu nyingine ya mfululizo huu, tutatoa mfano wa matumizi ya Next.js ni mfumo uliojengwa juu ya React. React inazingatia kujenga interface ya mtumiaji. Next.js Next.js inaongeza mambo kama vile: Maelekezo ya Huduma ya rendering Mwisho wa moto Mfumo wa Mradi Ujenzi wa zana Hakuna haja ya kuelewa kwa kina mambo ya ndani ya Next.js, lakini husaidia kuelewa jinsi maombi ya React yanajengwa. Hakuna haja ya kuelewa kwa kina mambo ya ndani ya Next.js, lakini husaidia kuelewa jinsi maombi ya React yanajengwa. Kwa bahati nzuri, mawazo ya msingi ni rahisi sana. Unahitaji tu kuelewa mambo matatu: Sehemu ya kwa ajili ya Hook ya Sehemu ya React Maombi ya React yanatengenezwa kutoka . components Sehemu ni sehemu ya interface inayofaa. Baadhi ya mifano ni: Button ya Bar ya Navigation Jinsi ya Blocks Mfumo wa Windows Mfano wa sehemu: // A simple React component. // It renders a button.

function Button() { return Click me } Sasa inaweza kutumika tena mahali popote. Maombi makubwa yatakuwa . trees of components kwa ajili ya Props ni inputs iliyotolewa kwenye vipengele. Mfano wa: // A simple React component. // It renders a button and shows the text passed in props.label.

function Button(props) { return {props.label} } Matumizi ya: // The same component can be reused with different labels

Hooks ya Hooks kuruhusu vipengele kuhifadhi hali na kujibu maingiliano ya mtumiaji. Mfano wa: // useState creates a piece of state inside the component. // "count" stores the current value. // "setCount" is the function used to update it.

const [count, setCount] = useState(0) Sasa sehemu inaweza update hali yake ya ndani. // When the button is clicked, the count increases by 1. // The text updates automatically.

setCount(count + 1)}> Clicked {count} times Hooks kufanya viungo interactive. Muhtasari wa If you have never encountered these concepts before, I understand how this might feel. But you don’t need to master all of this at a professional level. You only need to understand the basic idea. If you have a technical mindset and can grasp these concepts, the journey becomes much easier. Badala ya kuomba AI kwa random kuzalisha kitu, utaweza kuongoza kwa usahihi. Muhtasari wa Ikiwa haujawahi kukutana na dhana hizi kabla, naelewa jinsi hii inaweza kujisikia. Lakini huna haja ya kutawala yote haya katika ngazi ya kitaaluma. Unahitaji tu kuelewa wazo la msingi. Ikiwa una mawazo ya kiufundi na unaweza kuelewa dhana hizi, safari inakuwa rahisi sana. Badala ya kuomba AI kwa random kuzalisha kitu, utaweza kuongoza kwa usahihi. Kabla ya kwenda mbele Tafadhali hakikisha unajua kwa makini: Frontend dhidi ya Backend Databases kama Meza Muundo wa HTML Mafunzo ya CSS na Styling Utaratibu wa JavaScript Vifaa vya React, Props na Hooks Nini ni ya baadaye? Kabla ya kuingia katika maelezo ya kiufundi ya bidhaa yako, jibu hili: Je, unatumia stack gani? Kwa mtazamo wa kwanza, hii inaweza kuonekana kama uamuzi wa kiufundi. , mkusanyiko kwa ufanisi huwa sehemu ya maelekezo unayotupa AI. Ikiwa huwezi kufafanua mapema, AI itaanza kuiga, na ningependa hata kufikiri juu ya wapi inaweza kusababisha. Cursor Hapa nitaelezea mkusanyiko niliyotumia mwenyewe. Setup hii ilifanya kazi vizuri sana kwangu na inaweza kukusaidia kuepuka baadhi ya matatizo niliyokuwa nikitumia mwanzoni. Kuchagua Mfumo wa Ikiwa bidhaa yako ina interface ya wavuti (ambayo inamaanisha watumiaji kuingiliana nao kupitia kivinjari), utahitaji mfumo ambao unashughulikia frontend na backend. Kwa huduma zote mbili niliyopata, nilichagua Hata hivyo, sikuwahi kuwa na huzuni kuhusu uamuzi huo. Next.js Nilikuwa na ujuzi wa mambo kama PHP, Laravel, JavaScript, na teknolojia sawa, lakini katika kesi hii nilikuwa tu kufuata mapendekezo ya ChatGPT. Jambo ni: hata kama tayari unajua stack nyingine, hii inaweza kuwa fursa nzuri ya kujaribu kitu kipya. Jambo ni: hata kama tayari unajua stack nyingine, hii inaweza kuwa fursa nzuri ya kujaribu kitu kipya. Ikiwa umekuwa mbali na maendeleo kabisa, unaweza kukabiliana na changamoto na caching upande wa mteja na usimamizi wa hali ya programu (hizi ni muhimu ikiwa unataka kuepuka mambo kama kurudi ukurasa wakati mtumiaji huingiliana na huduma yako). Hiyo ni mahali ambapo uzoefu kweli husaidia. Ikiwa umekuwa mbali na maendeleo kabisa, unaweza kukabiliana na changamoto na caching upande wa mteja na usimamizi wa hali ya programu (hizi ni muhimu ikiwa unataka kuepuka mambo kama kurudi ukurasa wakati mtumiaji huingiliana na huduma yako). Hiyo ni mahali ambapo uzoefu kweli husaidia. Hatimaye, aina hii ya polishing haipaswi kuleta bidhaa kwenye soko. Mara baada ya kuwa na watumiaji na mapato, unaweza daima kuajiri mtayarishaji wa frontend kuimarisha mambo zaidi. Server yako itakuwa wapi? Mara baada ya ramani imechaguliwa, swali la pili ni wapi programu hiyo itakua kwa kweli. . hosting Vercel Kwa mradi wangu wa kwanza, nilitumia . Vercel Hii ni chaguo la kawaida wakati wa kufanya kazi na Usambazaji (kuwashawishi programu yako kwenye seva) hutokea moja kwa moja nje ya sanduku wakati wowote unapotumia . Next.js git push Hata hivyo, kwa muda, nilipata tatizo la kutokuwa na matarajio: katika baadhi ya mikoa, maombi hayawezi kupatikana.Kwa sababu hii, mradi wa kwanza ulikuwa kwenye Vercel, lakini kwa mradi wa pili, niliamua kujaribu kitu tofauti. Fly.io Kwa ajili ya mradi wa pili, nilijiunga na Fly.io. Utengenezaji ni kidogo ngumu zaidi kuliko , lakini inaweza kuwa automated. Mwisho, kwa kweli nilipenda Fly.io hata zaidi. Inaonekana zaidi kwa kupanua ikiwa mradi unaanza kukua. Vercel Kwa kuvutia, Fly.io haina kikamilifu kiwango cha bure, lakini ikiwa matumizi yako ya kila mwezi ni chini ya $ 5, hawataki malipo yoyote. Choosing a Database Kuchagua msingi wa data Kuna mbinu mbili kuu hapa: Chaguo la kwanza ni kuendesha database yako mwenyewe kwenye seva yako mwenyewe. Hii inakupa udhibiti kamili na inaweza kuwa bure kabisa. Chaguo la pili ni kutumia Database kama huduma. Kwa miradi yangu yote mawili, nilichagua mbinu ya pili kwa sababu nilitaka kuhamia haraka iwezekanavyo. . Supabase Suluhisho linatoa usimamizi wa database pamoja na zana kadhaa muhimu sana. PostgreSQL Kwa nini Supabase ilikuwa rahisi Supabase inasaidia kuhifadhi vektor. Hii imekuwa muhimu kwa moja ya miradi yangu ambapo data ilihifadhiwa kama embeddings zinazozalishwa na OpenAI embedding-3-small mfano. Kama AI inakuwa zaidi kuunganishwa katika bidhaa za programu, kuwa na msaada wa asili kwa data ya vektor inakuwa ya thamani ya kushangaza. Supabase ina utambulisho wa ndani. Watumiaji wanaweza kuingia kwa kutumia wauzaji kama Google, GitHub, barua pepe na wauzaji wengine. Supabase pia hutoa hifadhi ya faili, ambayo inaruhusu watumiaji kupakia picha na rasilimali nyingine bila kujenga miundombinu tofauti. Kipengele kingine muhimu sana ni msaada kwa kazi za RPC. Katika mradi wangu wa pili, niliacha kabisa kuruhusu backend kutafuta meza za database moja kwa moja. Badala yake, kila kitu huenda kupitia kazi za RPC. Katika mazoezi, hii ilipunguza makosa ya kuzalisha msimbo. Supabase pia ina zana za usalama zenye nguvu kama vile sera za Usalama wa Kiwango cha Reli (RLS). Supabase Drawbacks Hatua ya kwanza niliyokutana ilikuwa na mfumo wa uhakikisho wa ndani. Hasa, login ya Google inafanya kazi kwa usahihi kwa watumiaji wanaopata upatikanaji wa programu kupitia Safari kwenye iPhone. Nilijifunza hii tu baada ya miezi miwili ya maendeleo, na katika mazoezi ilionekana kuwa karibu haiwezekani kurekebisha. Upungufu wa pili ni bei. Supabase kimsingi hutoa kiwango cha bure, lakini katika vitendo, unaweza hata kuishia kulipa karibu $ 25-40 kwa mwezi, hata kama programu bado ni katika maendeleo na haina watumiaji. Cursor + ChatGPT: Majukumu mawili tofauti Kwa ajili yangu, Kuna chaguzi nyingine za IDE, lakini Cursor ilifanya kazi vizuri sana katika kesi yangu. Kubadilisha kwa kitu kama VS Code na kuingiliana na msaidizi wa AI kupitia kifaa ni kitu ambacho mimi binafsi sitaki kujaribu. Cursor is the primary development environment Madhara ya juu ya Cursor ni na ya . cost frequent updates Katika baadhi ya mambo, gharama zangu zilifikia Baada ya muda, nilijifunza jinsi ya kudhibiti gharama hizo. Leo, makadirio halisi ni kuhusu ikiwa unatumia mifano yenye nguvu. $100 per day $300 per month Cursor pia inatoa usajili wa msingi kwa karibu , lakini kutegemea mfano wa bei nafuu ni karibu haiwezekani, na mipaka ya mifano ya kulipwa ni ndogo sana. $20 Kwa nini ChatGPT bado ni muhimu Hata kama unatumia Cursor, ninapendekeza kuwa na ya usajili. ChatGPT Plus Mzunguko wangu wa kazi kwa kawaida inaonekana kama hii: Cursor → kuandika na kubadilisha msimbo ChatGPT → kujadili mawazo na usanifu Kwenye Cursor, mfano huu umejengwa kwa Mbali na Cursor, ChatGPT hufanya zaidi kama mpenzi wa mawazo ya ubunifu. code generation and stability Kanuni moja rahisi: Usiruhusu ChatGPT kuandika msimbo wako wa uzalishaji Don’t ask ChatGPT to write your production code Mfano huo ndani ya Cursor, au hasa mifano kama Opus, itaunda msimbo bora zaidi. Kutumia ChatGPT kwa mali za Visual Matumizi mengine ya ajabu ya ChatGPT ilikuwa . image generation Mradi wangu wa pili unawakilisha mazingira ya visual: parks digital na monuments, njia, na vitu vya mapambo. Hiyo ilihitaji idadi kubwa ya mali za graphics. Badala ya kununua mali au kuajiri wabunifu kwa kila iteration, niliunda picha nyingi moja kwa moja na ChatGPT. Kwa kuwa kuzalisha picha ni pamoja na usajili wa ChatGPT Plus, hii iliokoa kiasi cha kushangaza cha fedha wakati wa maendeleo na ilikuwa rahisi sana. Zana ya kubuni Watengenezaji wengi wanaotumia kuunda interface kabla ya kuandika msimbo. Figma Cursor inaweza kuzalisha mipangilio ya UI yenyewe, na mimi tu kurekebisha kwa manually baadaye. Hata hivyo, ikiwa unataka kubuni interface kwanza, Figma bado inaweza kuwa muhimu sana. Google pia inafanya majaribio na zana ambazo zinabadilisha mipangilio ya kubuni moja kwa moja katika nambari. , ambayo inaweza kuzalisha utekelezaji wa awali kutoka kwa miradi ya interface. Google Stitch Kwa nadharia unaweza: Muundo wa interface katika Figma Jinsi ya kuunda templates na Stitch kisha kubadilisha templates hizo katika sehemu za React Email na sehemu ndogo za miundombinu Wengi wa maombi hatimaye haja ya kutuma barua pepe. Kwa hili, nilitumia huduma rahisi inayoitwa . Resend Baadaye, unaweza pia kutaka kuanzisha caching kwa kutumia kitu kama lakini katika miradi yangu yote mawili, nililazimisha hatua hiyo. ya Redis ya Redis Ikiwa usanifu umeundwa vizuri, caching daima inaweza kuongezwa baadaye. Ikiwa usanifu umeundwa vizuri, caching daima inaweza kuongezwa baadaye. Unahitaji Docker? Katika miradi yote mawili, niliweza kufanya kazi bila . Docker ya Docker ya Vercel huunda mradi wa moja kwa moja (kama ninaelewa, huduma iliyoundwa na timu hiyo ambayo ilijenga Next.js). Na Fly.io, unaweza kutumia Docker kujenga mradi wa ndani kwenye mashine yako, lakini unaweza pia kupakia faili kama vile na kuruhusu kujenga kuendesha kwenye seva zao. Wakati fulani, kitu kilibadilika, na Fly.io kuacha kuchukua faili na kuanza kujenga. Ushauri wa kawaida mtandaoni ni kubadilisha eneo la seva katika mipangilio ya Fly au kubadilisha kwa majengo ya ndani (ambayo ni ambapo Docker inakuwa muhimu). Lakini nilijibu kwa njia tofauti, kwa kutumia bendera maalum katika amri ya uanzishaji wa Fly, hivyo sikuhitaji kufanya kitu chochote. Unaweza pia kuuliza Opus jinsi ya kurekebisha kwa jitihada ndogo (bila kubadilisha seva au kufunga Docker). Hardware ni muhimu zaidi kuliko unavyofikiri Kozi moja isiyotarajiwa haikuwa na uhusiano na programu. Kazi yako ya hardware ni muhimu Your hardware setup matters Cursor inafanya kazi vizuri zaidi wakati una nafasi ya kutosha ya skrini kuona paneli nyingi kwa wakati mmoja. Teknolojia ilifanya kazi, lakini ilikuwa vigumu sana. 13-inch tablet Mabadiliko ya A Kuboresha kwa kiasi kikubwa mchakato wa kazi. 27-inch monitor Cursor pia inaweza kuwa na rasilimali nyingi, hivyo kuwa na kompyuta yenye nguvu kabisa inasaidia. Cursor pia inaweza kuwa na rasilimali nyingi, hivyo kuwa na kompyuta yenye nguvu kabisa inasaidia. Mfumo wa uendeshaji Kwa ajili ya mazingira, niliendesha majaribio haya yote juu ya . Windows Hata hivyo, hakuna kitu katika seti hii kwa kweli inategemea Windows, isipokuwa jaribio la daima la AI la kuzalisha amri za shell kwa kutumia (Inaweza kurekebishwa na sheria kadhaa nitakazoelezea baadaye). && Mfumo huo unafanya kazi vizuri kwa . macOS or Linux Ufafanuzi wa kiwango cha chini Ikiwa tufanye kila kitu rahisi, bodi yangu inaonekana kama hii: Maelezo ya Next.js Sehemu ya database: Supabase Mtandao wa ndege.io Maoni ya Cursor Mtandao wa ChatGPT Barua pepe: kurejesha Na hii ilionekana kuwa zaidi ya kutosha kwa kujenga . real working products Nini kinatokea baadaye Kabla ya kuandika msimbo wowote, unahitaji kuelezea bidhaa kwa uwazi. Watu wengi wanaotumia zana za AI hupiga moja kwa moja kwenye coding. Kwa uzoefu wangu, hii ni njia ya haraka zaidi ya kujenga mfumo wa chaotic. Kama huna kujenga bidhaa na AI bado, kwa uaminifu, ninawafariji.Ninaendelea kukumbuka hisia niliyokuwa katika majira ya joto ya 2025, wakati nilianza kujaribu kwa mara ya kwanza. Kama huna kujenga bidhaa na AI bado, kwa uaminifu, ninawafariji.Ninaendelea kukumbuka hisia niliyokuwa katika majira ya joto ya 2025, wakati nilianza kujaribu kwa mara ya kwanza. Sasa ushauri wangu inaweza kuonekana kidogo ya ajabu: Kuacha kwa siku chache. Kuacha kwa siku chache. Kuacha kwa siku chache. Tumia siku 3 - 5 na kupinga majaribu ya kufunga Cursor, Antigravity, au jukwaa lolote la maendeleo ya AI mara moja. Kwa sababu ubora wa kufikiri wako katika hatua hii utaamua jinsi maumivu (au jinsi rahisi) wiki ijayo au hata miezi ya maendeleo itakuwa. kila mmoja Unaweza kuokoa . 10 minutes of thinking now hours of refactoring later Kuanza kwa mazungumzo Katika hatua hii, lengo lako kuu ni kufafanua wazo lako. Njia rahisi zaidi ya kufanya hivyo ni kufungua ChatGPT na kuanza kujadili kwa kutumia kuingia kwa sauti (si mode kamili ya mazungumzo ya sauti, lakini kifungo cha sauti kwa maandishi). Lugha yako ya asili inafanya kazi vizuri. Just start talking. For example, explain: Nini bidhaa yako inafanya Watumiaji ni nani Ni tatizo gani linaweza kutatua Vitu ambavyo watumiaji watafanya Lengo la mazungumzo haya si kuzalisha msimbo. Lengo ni kupatikana hatua kwa hatua muundo wa mfumo wa baadaye. Wakati wa majadiliano haya, unapaswa pia kumwambia ChatGPT kiwango cha teknolojia unachohitaji kutumia. For example: kwa ajili ya.js Mfano wa Sehemu ya upepo wa Na swali wazi kwa ChatGPT Kufafanua kwamba utaandika msimbo baadaye katika Cursor, lakini unataka ChatGPT kuelezea jinsi itakavyotengeneza mfumo. not to generate code Mimi binafsi nimeona watu kadhaa kutumia miezi kukimbia juu ya wazo bila kamwe kuuliza AI swali hili rahisi. Fikiria kuhusu data, sio tu skrini Moja ya sehemu muhimu zaidi ya hatua hii ni kubuni mfano wa data. Ikiwa haujawahi kufanya kazi na database kabla, kufikiria mfumo kama seti ya karatasi za Excel. Ask yourself questions like: Je, mtumiaji mmoja anaweza kuunda vitu vingi? Je, vitu vinahusiana na makundi? Je, makundi yanaweza kuwa na vitu vingi? Je, kuna uhusiano kati ya vitu? For example: Mtumiaji mmoja, makala nyingi Mstari wa chini: Roho inawezekana. makala moja → makala kadhaa na tags Makala zilizoandikwa na baadhi ya maoni yanayotumika kwenye scroll Maoni ya majibu Swali jingine muhimu ni Wote watakuwa sawa? au watumiaji wengine watakuwa na ruhusa za ziada? user roles wa moderator Maafisa wa Unaweza kuongeza majukumu baadaye, lakini ni rahisi sana kupanga kwao mapema. Kwa njia bora, maelezo yako ya kiufundi yanapaswa kuhusisha: majina ya meza (maandiko, maoni, majibu) Majina ya koloni (jina la mtumiaji, avatar, bio) relationships between tables Hata kama una mpango wa kuendeleza bidhaa hatua kwa hatua, muundo wazi kutoka mwanzo unaweza kuokoa kiasi kikubwa cha refactoring baadaye. Katika miradi yangu yote mawili, database hatimaye ilifanyika kuhusu Hapa ni muundo wa mradi wangu wa pili: 30–40 tables Mradi wako utaishia na idadi sawa. lakini kwa maelezo ya awali ya kiufundi, hata ya kutosha. 10 core tables Maombi ya kazi Mchezo rahisi zaidi kwa mwanzilishi ni mara nyingi Mzunguko ni meza ambayo inahifadhi kazi badala ya vitu kama watumiaji au makala. Unahitaji mzunguko wakati mfumo wako unashirikiana na huduma za nje. job queues Kwa mfano, fikiria kwamba baada ya mtumiaji kuchapisha makala, unatuma kwa huduma ya nje kwa tafsiri au uchambuzi. Huwezi kufanya kazi hiyo kwa uaminifu mara moja wakati wa kuunda makala, huduma za nje zinaweza kushindwa au kujibu kwa polepole. Huwezi kufanya kazi hiyo kwa uaminifu mara moja wakati wa kuunda makala, huduma za nje zinaweza kushindwa au kujibu kwa polepole. Makala yenyewe inapaswa kuundwa mara moja (kwa sababu hiyo inategemea tu maombi yako). lakini data ya ziada inaweza kuongezwa baadaye kupitia mchakato wa nyuma. Kwa mfano, meza yako ya makala inaweza kuonekana kama hii: id author_id picture title_en text_en title_es text_es 32 535 one.jpg Article 1 Hello 33 535 two.jpg Article 2 Next part 32 535 ya jpg Article 1 Salamu ya 33 535 2 kwa jpg Ibara ya 2 Sehemu inayofuata Baada ya kuunda kila makala, inakuja katika nafasi ya kupokea tafsiri kutoka kwa huduma ya nje: id entity_type entity_id status attempts es_text_generated 1 article_text 32 processed 1 Hola 2 article_text 33 pending 0 1 Makala ya makala 32 Utaratibu wa 1 Hola Salamu ya 2 Makala ya makala 33 Kuondoka 0 Kama tu kazi katika mstari unafanywa, trigger moja kwa moja kuongeza taarifa juu ya makala katika makala ya msingi id author_id picture title_en text_en title_es text_es 32 535 one.jpg Article 1 Hello Hola 33 535 two.jpg Article 2 Next part 32 535 ya jpg Ibara ya 1 Salamu ya Hola Salamu ya 33 535 2 kwa jpg Ibara ya 2 Sehemu inayofuata Matangazo ya huduma za nje katika Supabase kwa kawaida huchukuliwa kupitia . Edge Functions Katika Supabase kuna aina mbili tofauti za kazi: na ya . RPC Edge Utaratibu wa simu ya mbali Mifumo hii inaweza kutumika kwa ajili ya kurekebisha data yako ya kibinafsi, kama vile kurekebisha data ya kibinafsi ( (Kila mtumiaji anapaswa kuingia kwenye ukurasa maalum) ) kwa ajili ya RPC Uchaguzi 535 Uchaguzi 535 SELECT * FROM articles WHERE author_id = 535; Napendekeza sana kuuliza msaidizi wako wa AI kuunda kazi kama hii badala yake: CREATE OR REPLACE FUNCTION get_user_articles(p_author_id bigint) RETURNS TABLE ( id bigint, author_id bigint, picture text, title_en text, text_en text, title_es text, text_es text ) LANGUAGE sql SET search_path = '' AS $$ SELECT id, author_id, picture, title_en, text_en, title_es, text_es FROM public.articles WHERE author_id = p_author_id ORDER BY id DESC; $$; Kisha, ndani ya msimbo wako wa mradi, unaweza tu kuita kazi hii kama hii: SELECT * FROM get_user_articles(535); Ili kuhakikisha mbinu hii daima inafanya kazi vizuri na kwa utaratibu, kuongeza sheria za wazi kwa maelezo yako ya kiufundi (tutajadiliwa baadaye): kamwe kutafuta database moja kwa moja kutoka kwa mteja; daima kwenda kupitia njia za server API kuzuia maswali ya meza moja kwa moja ndani ya API; ikiwa operesheni mpya ya data inahitajika na hakuna RPC bado, kuunda uhamiaji na kazi mpya ya RPC daima kutumia SET search_path = '' ndani ya kazi za RPC na kutaja wazi mfumo wakati wa kufikia meza Mimi si kwenda zaidi katika mada hii sasa, lakini kufuata sheria hizi itakuokoa mengi ya maumivu ya kichwa baadaye. Mimi si kwenda zaidi katika mada hii sasa, lakini kufuata sheria hizi itakuokoa mengi ya maumivu ya kichwa baadaye. Edge functions An Edge function runs na hutumiwa kwa kawaida kuingiliana na huduma za nje. outside the database Wanaendelea kuendesha na inaweza kuita kazi za RPC ndani ya database yako wakati inahitajika. JavaScript or TypeScript (Deno runtime) Hii ilikuwa sehemu ngumu zaidi kuhusu database. Labda huwezi kuelewa kabisa na hiyo ni nzuri kabisa: First, at this stage these are secondary details. Pili, wakati wa majadiliano yako, unaweza tu kuuliza ChatGPT kupata makala hii, "Cursor Your Dream," na kufafanua chochote unachokijua. Tatu, kama nilivyosema katika Sehemu ya 1, Cursor ni mzuri sana katika kujenga database na usanifu wa backend. Fikiria juu ya vipengele Ikiwa tayari una wazo fulani kuhusu interface, unaweza kuelezea kwa kiwango cha vipengele. Kwa mfano: Sehemu ya makala Sehemu ya Profili ya Mtumiaji Mfumo wa Windows Sehemu ya Navigation Sehemu ya makala inaweza kuwa na modes kadhaa: View Mode kwa wasomaji Edit mode kwa ajili ya waandishi Modes kwa ajili ya admins Ikiwa unafikiri juu ya vipengele mapema, zana za AI zitaunda nambari safi zaidi baadaye. Kanuni muhimu kwa Styling Waambie ChatGPT kuingiza maagizo katika maelezo ambayo , lakini badala yake kutumia masomo sahihi ya CSS, kwa mfano kupitia Tailwind. Cursor should not use inline CSS styles Katika moja ya miradi yangu nililowasahau kutaja hili. Matokeo yake, mantiki ya styling ilifutwa kwenye viungo kumi, na kusafisha baadaye ilikuwa mbaya. Maoni muhimu juu ya uhakiki: If you plan to use Supabase, specify that , not by the default Supabase authentication system. JWT tokens should be generated by your application If you’re new to authentication systems, this may sound strange. But this small detail can prevent serious problems later, especially when users sign in through . Safari on iPhone Maoni muhimu juu ya uhakiki: Ikiwa una mpango wa kutumia Supabase, ufafanuzi kwamba tokens JWT zinapaswa kuundwa na programu yako, sio kwa mfumo wa uhakiki wa Supabase default. Ikiwa wewe ni mpya kwa mifumo ya utambulisho, hii inaweza kuonekana ya ajabu. Lakini maelezo haya kidogo yanaweza kuzuia matatizo makubwa baadaye, hasa wakati watumiaji kuingia kupitia Safari kwenye iPhone. Utafiti wa kesi ya sampuli (kutoka mradi wangu wa pili) Ili kufanya hili laini zaidi, nitawaonyesha jinsi mchakato huu kweli ulivyofanya kazi kwa mradi wangu wa pili, " ya Heshima ya Heshima ya Utaratibu wa kwanza Hapa ni mwongozo wa kwanza ambao ulianza majadiliano. Kwa miaka mingi nilikuwa na wazo la kujenga kumbukumbu ya digital. Inaweza kuwa jukwaa ambapo kikundi kimoja cha watumiaji huunda ramani za nchi, mwingine huweka monuments, na wengine huacha mapendekezo - kama vile maua au maoni. Nadhani inaweza kuwa wazo la mapambano kwa sababu hakuna kitu kama hiki inaonekana kuwepo. Lakini nina wasiwasi kuhusu masuala ya kisheria. Kwa mfano, nini ikiwa mtu anafanya kumbukumbu kwa mtu aliye hai? Au anafanya kumbukumbu kwa mtu kama Michael Jackson - inaweza kuwa na matatizo ya kisheria kuhusiana na matumizi ya jina? Kiufundi, ninafikiri ni kama tovuti na ramani isometric ambapo monuments ni kuwekwa. Kwa njia bora, tunapaswa kupata injini nzuri badala ya kujenga kila kitu kutoka mwanzo. Kwa miaka mingi nilikuwa na wazo la kujenga kumbukumbu ya digital. Inaweza kuwa jukwaa ambapo kikundi kimoja cha watumiaji huunda ramani za nchi, mwingine huweka monuments, na wengine huacha mapendekezo - kama vile maua au maoni. Nadhani inaweza kuwa wazo la mapambano kwa sababu hakuna kitu kama hiki inaonekana kuwepo. Lakini nina wasiwasi kuhusu masuala ya kisheria. Kwa mfano, nini ikiwa mtu anafanya kumbukumbu kwa mtu aliye hai? Au anafanya kumbukumbu kwa mtu kama Michael Jackson - inaweza kuwa na matatizo ya kisheria kuhusiana na matumizi ya jina? Kiufundi, ninafikiri ni kama tovuti na ramani isometric ambapo monuments ni kuwekwa. Ramani ya Isometric Kwa njia bora, tunapaswa kupata injini nzuri badala ya kujenga kila kitu kutoka mwanzo. Wakati huo huo, uongofu haukuwa wa kiufundi kabisa. Ilikuwa tu mwanzo wa majadiliano. ChatGPT Response (shortened) Wazo la kumbukumbu ya digital ni ya kuvutia kwa sababu sio tu mtandao mwingine wa kijamii. dhana yako ni karibu zaidi na nafasi ya digital ya kumbukumbu, ambapo watu huingiliana kupitia vitendo vya ishara: ziara, maoni, kutoa. Swali la kisheria ulilozungumzia - kuunda kumbukumbu kwa mtu aliye hai - linawezekana. katika baadhi ya kesi inaweza kutafsiriwa kama uadui au uharibifu wa sifa. Hata hivyo, majukwaa ya kawaida huendesha hatari hii kwa njia ya kubuni bidhaa, sio kwa njia ya marufuku kamili. - mifumo ya malalamiko na takedown - sheria wazi kwa maudhui yaliyotengenezwa na mtumiaji - kuingiza kumbukumbu nafasi asymbolic, sio madai halisi kuhusu kifo Kiufundi, kwa ramani isometric kwenye wavuti ni kawaida bora kutumia mfumo wa rendering uliopo. Kwa prototypes ya haraka, chaguzi nzuri ni pamoja na: — Phaser kwa matukio ya interactively-tile-based—PixiJS kwa rendering ya mtandao na ushirikiano wa UI Ikiwa unataka kumbukumbu halisi za 3D baadaye, unaweza kubadilisha kwa Three.js, lakini kwa MVP mbinu ya msingi ya 2D kwa kawaida ni haraka sana. Wazo la kumbukumbu ya digital ni ya kuvutia kwa sababu sio tu mtandao mwingine wa kijamii. dhana yako ni karibu zaidi na nafasi ya digital ya kumbukumbu, ambapo watu huingiliana kupitia vitendo vya ishara: ziara, maoni, kutoa. Maeneo ya Digital ya kumbukumbu Swali la kisheria ulilozungumzia - kuunda kumbukumbu kwa mtu aliye hai - linawezekana. katika baadhi ya kesi inaweza kutafsiriwa kama uadui au uharibifu wa sifa. Hata hivyo, majukwaa ya kawaida huendesha hatari hii kwa njia ya kubuni bidhaa, sio kwa njia ya marufuku kamili. Mipango ya bidhaa - mifumo ya malalamiko na takedown - sheria wazi kwa maudhui yaliyotengenezwa na mtumiaji - kuingiza kumbukumbu nafasi asymbolic, sio madai halisi kuhusu kifo Miundombinu ya nafasi Kiufundi, kwa ramani isometric kwenye wavuti ni kawaida bora kutumia mfumo wa rendering uliopo. Kwa prototypes ya haraka, chaguzi nzuri ni pamoja na: — Phaser kwa matukio ya interactively-tile-based—PixiJS kwa rendering ya mtandao na ushirikiano wa UI kwa Phaser Pichani Ikiwa unataka kumbukumbu halisi za 3D baadaye, unaweza kubadilisha kwa Three.js, lakini kwa MVP mbinu ya msingi ya 2D kwa kawaida ni haraka sana. Maoni ya J Baada ya hapo mjadala uliendelea. Ujumbe wangu wa kufuatilia Mimi kabisa ni pamoja na yako kuchukua Jerry. Katika ngazi moja, watumiaji huunda ramani: wao kuchagua ukubwa wake kama grid na kujaza na mboga, njia, na vipengele vingine kupitia mhariri wa visual. Katika ngazi nyingine, watumiaji kuweka monuments ambayo inaweza kuchukua idadi tofauti ya tile, kama vile 1, 2, au 4. Pia kuna aina ya tatu ya mtumiaji: hawakuunda ramani au kumbukumbu, wanaacha tu mapendekezo kama maua. Kila ramani inapaswa kuwa na URL yake mwenyewe ya kipekee. Mimi kabisa ni pamoja na yako kuchukua Jerry. Maelezo ya 3D Katika ngazi moja, watumiaji huunda ramani: wao kuchagua ukubwa wake kama grid na kujaza na mboga, njia, na vipengele vingine kupitia mhariri wa visual. Katika ngazi nyingine, watumiaji kuweka monuments ambayo inaweza kuchukua idadi tofauti ya tile, kama vile 1, 2, au 4. Pia kuna aina ya tatu ya mtumiaji: hawakuunda ramani au kumbukumbu, wanaacha tu mapendekezo kama maua. Kila ramani inapaswa kuwa na URL yake mwenyewe ya kipekee. Pia nataka mmiliki wa ramani kupokea asilimia ya ununuzi ndani ya ramani yao. Kwa mfano, ikiwa mtu anapata kumbukumbu huko, ningeweza kushiriki 20% ya mapato na mmiliki wa ramani. Ikiwa mtu anatoa maua kwenye kumbukumbu, karibu 20% huenda kwa mmiliki wa kumbukumbu na nyingine 20% kwa mmiliki wa ramani. Pia nataka mmiliki wa ramani kupokea asilimia ya ununuzi ndani ya ramani yao. Kwa mfano, ikiwa mtu anapata kumbukumbu huko, ningeweza kushiriki 20% ya mapato na mmiliki wa ramani. Ikiwa mtu anatoa maua kwenye kumbukumbu, karibu 20% huenda kwa mmiliki wa kumbukumbu na nyingine 20% kwa mmiliki wa ramani. Ninataka kujua jinsi gani inaweza kuomba kwa scholarship M.Sc katika Korea.Katika shahada yangu, nataka kuomba kwa scholarship M.Sc katika Korea. Ninataka kujua jinsi gani inaweza kuomba kwa scholarship M.Sc katika Korea.Katika shahada yangu, nataka kuomba kwa scholarship M.Sc katika Korea. Next.js kwa ajili ya upatikanaji Sasa kupanua maelezo ya kiufundi, kukusanya kila kitu katika hati moja, na kuongeza kuanzisha kuelezea tatizo na bidhaa. Sasa kupanua maelezo ya kiufundi, kukusanya kila kitu katika hati moja, na kuongeza kuanzisha kuelezea tatizo na bidhaa. Markdown (.md) File with the Spec Baada ya majadiliano kadhaa, maelezo ya kiufundi yalikuwa tayari. Hivyo ndivyo itakavyokuwa kwako. Hakikisha kuuliza maelezo ya mwisho ya kuundwa katika muundo wa Markdown na nakala yake katika faili ya maandishi. Utahitaji faili hii kwa hatua za baadaye. .md Lakini badala ya kutuma moja kwa moja kwa Cursor, swali hili: Ni sehemu gani ya bidhaa ambayo ni muhimu zaidi kwako, au inawakilisha zaidi? Hii ni muhimu kwa sababu mwongozo wako wa kwanza kwa Cursor unaweza kutofautiana na maelezo ya kiufundi. Kwa upande wangu, sehemu hiyo ilikuwa Hivyo niliamua kujenga tu kwamba kwanza (bila utambulisho, database, au backend). map editor mechanics Hatua yangu ya mwisho kwa ChatGPT Kuandika mwongozo kwa Cursor ambapo lengo kuu ni kuunda mhariri wa ramani. Kwa sasa inapaswa kufanya kazi bila utambulisho na bila Supabase. Hata kama ramani haiwezi kuhifadhiwa bado, hiyo ni nzuri. Lengo kuu ni kujisikia mechanics ya ramani kabla ya kujenga bidhaa nzima. Kimsingi hii inapaswa kuwa sehemu ambayo baadaye inaweza kuunganishwa katika mfumo kamili. Wakati wa kujenga ramani tunapaswa kufafanua slots ambapo watumiaji baadaye kuweka monuments. Kuandika mwongozo kwa Cursor ambapo lengo kuu ni kuunda mhariri wa ramani. Kwa sasa inapaswa kufanya kazi bila utambulisho na bila Supabase. Hata kama ramani haiwezi kuhifadhiwa bado, hiyo ni nzuri. Mwandishi wa ramani Lengo kuu ni kujisikia mechanics ya ramani kabla ya kujenga bidhaa nzima. Kimsingi hii inapaswa kuwa sehemu ambayo baadaye inaweza kuunganishwa katika mfumo kamili. Wakati wa kujenga ramani tunapaswa kufafanua slots ambapo watumiaji baadaye kuweka monuments. Majibu ya ChatGPT Chini ni sehemu ya ambayo hatimaye ilizalisha prototype ya kazi katika Cursor. final instruction Wewe ni mhandisi wa juu wa frontend / mchezo. Sisi ni kujenga tu prototype ya mhariri ramani (isometric pseudo-3D) kama sehemu ya kujitenga ili kuchunguza mechanics ya msingi ya mwingiliano. vikwazo vya kutisha Hakuna uhakiki. Hakuna Supabase, database, Stripe, au vipengele vingine vya backend. Hakuna viwambo vya bidhaa vya ziada. Lengo ni tu mbinu ya maingiliano ya kuhariri ramani, slots, na nafasi ya kumbukumbu. Muundo wa output Tumia hii kama sehemu ya React yenyewe (React + TypeScript) ambayo inaweza baadaye kuunganishwa katika programu ya Next.js. Sehemu hii inapaswa: *— kudumisha hali ya ndani*— kufichua API ya umma (props / callbacks) teknolojia ya — React + TypeScript— PixiJS + pixi-viewport Mfano wa bidhaa ya msingi (Muhimu) Wakati ramani ni kuundwa, mmiliki hufafanua SLOTS - maeneo ya rectangular kwenye grid ambapo watumiaji wengine baadaye wataweza kuweka monuments. Katika prototype hii tunatumia wote wawili: — mhariri wa mstari — uhamisho wa kumbukumbu Takwimu zote zinahifadhiwa mahali fulani. Mfumo wa kumbukumbu (In Memory) Grid - miche ya NxM (chakula, njia) Slot — Rectangle iliyoelezwa kama x, y, w, hkind: monumentid Monument inachukua moja kwa moja slotUtajiri: ukubwa(1x1x1x2x2x2)slotIdrotation(optional)id Utengenezaji wa Prototype (MVP) Kutengeneza ramani ya NxM (mfano: 20 × 20). utabiri wa Isometric. Ufuatiliaji wa kamera: - Pan (Drag) - zoom (3 viwango vya zoom vya kudumu) Zana ya — Rangi ya rangi— Njia ya rangi— Chombo cha mstari (kuunda / kufuta mstari, ukubwa wa rectangle: 1×1, 1×2, 2×2)— Mstari wa kumbukumbu (kumbukumbu zinaweza kuwekwa tu kwenye mstari wa sasa wa ukubwa wa kulinganisha)— Eraser (kuondoa kumbukumbu au mstari kulingana na kile kinacho chini ya cursor) Kanuni ya - Barabara haiwezi kufunikwa na slots. - Slots haiwezi kuingilia kati. - Kumbukumbu inaweza tu kuwekwa katika slots afree ya ukubwa wa kulinganisha. - Slots na kumbukumbu haipaswi kamwe kuingilia kati. Uchaguzi wa Bonyeza juu ya mstari au kumbukumbu huchagua (maonyesho na frame). Paneli ndogo ya habari (React div) inaonekana upande wa kulia kuonyesha: Kiwango cha utambulisho - id Hali ya Usambazaji / Usambazaji (JSON, katika kumbukumbu) Piga kifungo JSON → inatoa hali ya sasa katika eneo la maandishi. Piga kifungo cha Import JSON → loads state kutoka textarea. Maelezo ya UX Bar ya chombo juu au kushoto ambayo ina: — chaguo la chombo— chaguo la ukubwa wa mstari (1×1 / 1×2 / 2×2)— Kichwa cha Usafirishaji / Usafirishaji Njia ya cursor inapaswa kuonekana kwa uwazi (label inaonyesha chombo cha sasa) Mahitaji ya usanifu (Muhimu kwa ajili ya kupanua baadaye) Mfano tofauti (grid / slots / monuments) kutoka renderer (pixi ngazi). Kuunda Maombi ya Pixi na Viewport mara moja tu. Usifanye upya kwa kila mabadiliko ya hali. Tumia matumizi ya uchafuzi wa kutosha: — kuharibu programu — kuondoa wasikilizaji — kufuta miundo ya animation Usihifadhi vitu vya Pixi katika hali ya React. Kuhifadhi katika refs. Kuendesha ubora wa Container kwa usahihi kwa kutumia ResizeObserver. Kuunganisha matukio ya pointer kwenye viewport / hatua mara moja, na kuondoa wakati unmount. Tumia usindikaji wa kina kwa rendering isometric (kwa mfano x + y au y) ili vitu vinashughulikia kwa usahihi. Kazi ya Kwanza, tunapendekeza muundo wa faili ndogo: Mifano ya Mifano ya Mifano ya Mifano ya Mifano ya Mifano Kisha kutekeleza prototype ya kazi ndogo (TypeScript) ili ninaweza kuingiza sehemu kwenye mradi wa React / Next.js tupu na mara moja kuona mhariri anafanya kazi. Mwisho ni pamoja na orodha fupi ya "kila kitu cha kuboresha baadaye" (maximum 8 vitu). Usifanye kitu chochote zaidi ya kilichotajwa hapo juu. Wewe ni mhandisi wa juu wa frontend / mchezo. Meneja wa Frontend / Mhandisi wa Michezo Sisi ni kujenga tu prototype ya mhariri ramani (isometric pseudo-3D) kama sehemu ya kujitenga ili kuchunguza mechanics ya msingi ya mwingiliano. tu prototype ya mhariri wa ramani vikwazo vya kutisha vikwazo vya kutisha Hakuna uhakiki. Hakuna Supabase, database, Stripe, au vipengele vingine vya backend. Hakuna viwambo vya bidhaa vya ziada. Lengo ni tu mbinu ya maingiliano ya kuhariri ramani, slots, na nafasi ya kumbukumbu. Muundo wa output Muundo wa output Tumia hii kama sehemu ya React yenyewe (React + TypeScript) ambayo inaweza baadaye kuunganishwa katika programu ya Next.js. Sehemu ya kujibu mwenyewe Sehemu hii inapaswa: *— kudumisha hali ya ndani*— kufichua API ya umma (props / callbacks) Moto wa umma teknolojia ya teknolojia ya — React + TypeScript— PixiJS + pixi-viewport Mfano wa bidhaa ya msingi (Muhimu) Mfano wa bidhaa ya msingi (Muhimu) Wakati ramani ni kuundwa, mmiliki hufafanua SLOTS - maeneo ya rectangular kwenye grid ambapo watumiaji wengine baadaye wataweza kuweka monuments. Slots ya Katika prototype hii tunatumia wote wawili: Katika prototype hii tunatumia wote wawili: — mhariri wa mstari — uhamisho wa kumbukumbu Takwimu zote zinahifadhiwa mahali fulani. Mfumo wa kumbukumbu (In Memory) Mfumo wa kumbukumbu (In Memory) Grid - miche ya NxM (chakula, njia) Slot — Rectangle iliyoelezwa kama x, y, w, h kind: monument id Monument inachukua moja kwa moja slotUtajiri: (1 x 1 x 2 x 2) (Kwa chaguo) size slotId rotation id Utengenezaji wa Prototype (MVP) Utengenezaji wa Prototype (MVP) Kutengeneza ramani ya NxM (mfano: 20 × 20). utabiri wa Isometric. 20 kwa 20 Ufuatiliaji wa kamera: Ufuatiliaji wa kamera: - Pan (Drag) - zoom (3 viwango vya zoom vya kudumu) Zana ya Zana ya — Rangi ya rangi— Njia ya rangi— Chombo cha mstari (kuunda / kufuta mstari, ukubwa wa rectangle: 1×1, 1×2, 2×2)— Mstari wa kumbukumbu (kumbukumbu zinaweza kuwekwa tu kwenye mstari wa sasa wa ukubwa wa kulinganisha)— Eraser (kuondoa kumbukumbu au mstari kulingana na kile kinacho chini ya cursor) Kanuni ya Kanuni ya - Barabara haiwezi kufunikwa na slots. - Slots haiwezi kuingilia kati. - Kumbukumbu inaweza tu kuwekwa katika slots afree ya ukubwa wa kulinganisha. - Slots na kumbukumbu haipaswi kamwe kuingilia kati. Slots ya bure ya ukubwa wa matching Uchaguzi wa Uchaguzi wa Bonyeza juu ya mstari au kumbukumbu huchagua (maonyesho na frame). Paneli ndogo ya habari (React div) inaonekana upande wa kulia kuonyesha: Kiwango cha utambulisho - id Hali ya Usambazaji / Usambazaji (JSON, katika kumbukumbu) Hali ya Usambazaji / Usambazaji (JSON, katika kumbukumbu) Piga kifungo JSON → inatoa hali ya sasa katika eneo la maandishi. Usambazaji wa JSON Piga kifungo cha Import JSON → loads state kutoka textarea. Usambazaji wa JSON Maelezo ya UX Maelezo ya UX Bar ya chombo juu au kushoto ambayo ina: — chaguo la chombo— chaguo la ukubwa wa mstari (1×1 / 1×2 / 2×2)— Kichwa cha Usafirishaji / Usafirishaji Njia ya cursor inapaswa kuonekana kwa uwazi (label inaonyesha chombo cha sasa) Mahitaji ya usanifu (Muhimu kwa ajili ya kupanua baadaye) Mahitaji ya usanifu (Muhimu kwa ajili ya kupanua baadaye) Mfano tofauti (grid / slots / monuments) kutoka renderer (pixi ngazi). Mfano wa Muundo wa Kuunda Maombi ya Pixi na Viewport mara moja tu. Usifanye upya kwa kila mabadiliko ya hali. Maombi ya Pixi na Viewport mara moja tu Kwa ajili ya kusafisha vizuri: matumizi ya useEffect — kuharibu programu — kuondoa wasikilizaji — kufuta miundo ya animation Usihifadhi vitu vya Pixi katika hali ya React. Kuhifadhi katika refs. ya refs Kuendesha ubora wa Container kwa usahihi kwa kutumia ResizeObserver. Ufuatiliaji wa Kuunganisha matukio ya pointer kwenye viewport / hatua mara moja, na kuondoa wakati unmount. Mara moja au (Kwa mfano, vitu vyote vinapatikana kwa usahihi. Tumia usindikaji wa kina kwa rendering isometric (kwa mfano x + y y Maelezo ya kina Kazi ya Kazi ya Kwanza, tunapendekeza muundo wa faili ndogo: mapEditor.tsx model.ts isoMath.ts render.ts Kisha kutekeleza prototype ya kazi ndogo (TypeScript) ili ninaweza kuingiza sehemu kwenye mradi wa React / Next.js tupu na mara moja kuona mhariri anafanya kazi. Prototype ya chini ya kazi (TypeScript) Mwisho ni pamoja na orodha fupi ya "kila kitu cha kuboresha baadaye" (maximum 8 vitu). Mambo ya kuboresha baadaye » Usifanye kitu chochote zaidi ya kilichotajwa hapo juu. Usisahau zaidi ya yale yaliyotajwa hapo juu. Usijiandaa kwa hatua inayofuata Kazi yako sasa ni kufikiri juu ya wazo lako. Majadiliano yake. Kwa uzoefu wangu, pia ni muhimu kuzingatia — toleo la chini la bidhaa ambayo bado ni ya kutosha kwa mtumiaji kuelewa nini bidhaa ni na nini tatizo la msingi linaweza kutatua. MVP Startups mbili za mafanikio katika maisha yangu kwa kweli zilianza kama kitu chochote zaidi ya demo, hata maonyesho rahisi. Leo, zana za AI zinawezesha tu kujenga , na kujaribu kwenye trafiki halisi kwa kasi zaidi. real products instead of demos Pia unapaswa kufikiri sio tu kuhusu bidhaa yenyewe, lakini kuhusu . path to market Baadhi ya miradi yangu imekoma mahali ambapo sikuwa na majibu mazuri ya msingi Maswali ya go-to-market Hivyo kabla ya kuandika msimbo, jaribu kufafanua mambo mawili: Bidhaa hii ni nini Jinsi ya kufikia watumiaji wake wa kwanza. Hatimaye, unapaswa kuwa na Maelezo ya mbili ya mbili ya Moja ya kwanza ni ya katika fomu ya Markdown (.md) faili. hati hii itaishi katika mizizi ya mradi wako na itasomwa na upya mara kwa mara na AI wakati wa maendeleo. full technical specification Moja ya pili ni ya — mwongozo utatuma kwa Cursor kama kazi yako ya kwanza sana. Na hii itakuwa tu mwanzo. Kama maendeleo yanaendelea, utaishia kuandika . first working prompt hundreds of prompts like this ya baadaye Katika makala inayofuata (kuja hivi karibuni), sisi hatimaye kwenda sehemu ya kiufundi: kufunga Cursor na kuzalisha msimbo wa kwanza wa kazi halisi. Na hii ndiyo mahali ambapo kila kitu kinakuwa . very exciting and a little chaotic