Ukusebenza kuphrojekthi eyinkimbinkimbi, noma ngabe ungumfundi onolwazi noma ungumfundi omusha, cishe uzohlangabezana nezinkinga. Uma uhlukanisa iphrojekthi yakho ibe amamojula amaningi, kuvela izinkinga, okwenza kube nzima ukulandelela amaphutha nokuthola izixazululo. Kwezinye izimo, ukulungisa iphutha ezimweni ngazinye kungase kube nzima ngoba awukasitholi isisombululo esifanele senkinga obusebenza kuyo.
Kuyenzeka futhi njengocezu lwekhodi ngezikhathi ezithile, okungase kubukeke kuyinkimbinkimbi ngaleso sikhathi. I-JavaScript ingolunye lwezilimi ezisekelwe kuwebhu okulula ukuzifunda. Vele uvule isiphequluli sakho sedeskithophu bese uzulazulela kokuthi Amathuluzi Onjiniyela (ngokuvamile i-F12), futhi usuqedile! Ungabe usuzama i-JS ngaphandle kokudinga ukufaka noma ukusebenzisa noma iyiphi isofthiwe eyinkimbinkimbi.
Ukuze uqalise, okudingayo nje isiphequluli. Kuhle ukuba nakho konke lokhu kulula ngaphandle kwebhokisi, kodwa kunezikhathi lapho udinga okwengeziwe. Isibonelo, ake sithi ufuna ukuzama i-Web API entsha osanda kuyithola kodwa ungafuni ukuqala iphrojekthi entsha.
Kulokhu okuthunyelwe, sizoqhathanisa futhi siqhathanise izinkundla zokudlala ze-JS ezintathu ezaziwa kakhulu, i-CodePen, i-CodeSandbox, ne-StackBlitz. Ake siqale!
I-CodePen
Amathuluzi okuthuthukisa iwebhu engaphambili ahlala eshintsha, futhi abahleli bombhalo bayingxenye enkulu yobuchwepheshe bakamuva okwenza impilo yonjiniyela ibe lula. Ngaphandle kwabahleli bombhalo abazimele abafana no-Atom noma i-Notepad ++, kube nokuqhuma kwabahleli abasekelwe kusiphequluli eminyakeni yamuva nje abangadingi ukufakwa kohlelo nokukhuthaza ukubambisana okukhulu.
I-CodePen “iwumphakathi waku-inthanethi wokuhlola nokwethula amazwibela ekhodi enziwe ngabasebenzisi e-HTML, CSS, ne-JavaScript” enikeza amathuba amahle okufunda ukubhala amakhasi ewebhu angaphambili kangcono.
I-CodePen ikunikeza “izindlela” ezimbili. Eyokuqala futhi evame ukusetshenziswa kakhulu yiPeni. Kulula njengokuchofoza inkinobho bese uhanjiswa uyiswa kumhleli. Ukusuka lapho, ungafinyelela iphaneli yokubuka kuqala kanye ne-HTML eyisisekelo, i-CSS, ne-JS yokuhlela windows.
Alukho “uhlelo lwefayela,” “I-IntelliSense,” nanoma yini enye – ukugqamisa okulula kwe-syntax nemiyalo esheshayo njenge-prettify. Kuthebhu yezinketho, ungakhetha ohlwini olukhawulelwe lwabaphrosesa bazo zontathu izilimi (ezifana ne-TypeScript ye-JS) noma wengeze ukuxhumana nemithombo yangaphandle.
Uma udinga ukwenza noma yini mahhala, omunye wabahleli uzokwanela. Ngingaphakamisa i-CodePen nganoma yini engadingi ukusethwa okuningi noma imitapo yolwazi - kalula nje i-HTML, i-CSS, ne-JS enamaphrosesa angaphambili ongawakhetha phezulu. Uma ufuna ukusebenzisa inkundla yokudlala ukuthuthukisa ubukhona bakho benkundla yezokuxhumana noma ukwakha iphothifoliyo yomuntu siqu, i-CodePen iyindlela engcono kakhulu.
Inguqulo ye-Premium
Unezinye izindlela ezimbalwa ongakhetha kuzo ku-CodePen. Uma ukhokha minyaka yonke, ungathola eyodwa kwezintathu zezinhlelo zeprimiyamu ngo-$12, $19, noma $39 njalo ngenyanga. Ungakha inombolo engapheli yamapeni ayimfihlo, okuthunyelwe, namaqoqo kunoma yiziphi izigaba ezintathu.
Uzothola nebheji le-Pro (ukuthuthuka komphakathi), ukufinyelela kwemodi yokuhlanganyela bukhoma, akukho ukukhangisa, nokuningi. Kukhona futhi amasu athile aqondene neqembu kanye nokunye ukuhlukaniswa kwezigaba ezihlukene. Hlola ibhodi labo lokukhokha elisemthethweni ukuze uthole ulwazi olwengeziwe.
Izici Key
Ngaphandle kokwenza i-HTML, i-CSS, ne-JavaScript ku-CodePen, kunezinto ezimbalwa ezengeziwe eziyibeka ihluke.
- Ukubuka ngesikhathi sangempela ikhodi yakho kungenzeka. Akudingi ukuhlanganiswa.
- Ukuhlola kukuvumela ukuthi ufunde izinto ezintsha.
- Dala izimo zokuhlola ezincane ukuze ubheke futhi uxazulule izinkinga.
- Bonisa imisebenzi yakho emangalisayo.
- Dala futhi ugcine Amapeni ukuze uwasebenzise kamuva.
- Zama ikhodi yonjiniyela futhi uyibone isebenza.
Izinzuzo
- Ukuqala, azikho izindleko.
- Izinsiza zokufunda ezakhelwe ngaphakathi.
- Hlanganyela nabanye futhi uqhathanise amaphrojekthi ukuze ubone ukuthi bangaya kuphi ngokuzayo.
- I-UI ilula ukuyisebenzisa futhi iqondile.
Okumbi
- Umtapo wezincwadi wekhodi mncane, ukuqedwa kwekhodi okuzenzakalelayo akwanele. Ilungele amaphrojekthi wekhasi elilodwa futhi ayikwazi ukuphatha noma yini enkulu.
- Ku-CodePen, ungakha amapeni ayimfihlo, kodwa uzodinga ukuthuthukela ebulungwini be-Pro ($9/ngenyanga).
I-CodeSandbox
I-CodeSandbox ingumhleli wekhodi esekwe kuwebhu. Ikwenzela ngokuzenzakalela ukudlulisa, ukupakisha, nokuphathwa kokuncika kwakho, okukuvumela ukuthi wakhe iphrojekthi entsha ngokuchofoza okukodwa. Ngemva kokudala okuthile okuthakazelisayo, ungakwazi ukwabelana ngakho nabanye ngokumane wabelane ngewebhusayithi.
Umhleli uhambisana nanoma imaphi amaphrojekthi e-JavaScript, nakuba ahlanganisa izici ezithile eziqondene ne-React, njengenketho yokulondoloza iphrojekthi kusifanekiso sohlelo lokusebenza lwe-create-react-app.
Noma iyiphi iphrojekthi oyakha ku-CodeSandbox iqala ngesifanekiso. Ingase ihlobane nelabhulali ethile, uhlaka, noma isikhathi sokusebenza (okuhlanganisa i-Node.js) noma isebenzise ubuchwepheshe bewebhu obujwayelekile. Ngemva kokukhetha isifanekiso, uthunyelwa kumhleli, lapho uzothola khona wonke amafayela adingekayo kanye newindi lokubuka kuqala selivuliwe kakade.
Unokufinyelela “kusistimu yefayela” kuwo wonke ama-Sandbox, okusho ukuthi ungakha amafayela amasha, usebenzise amamojula (okuhlanganisa namaphakheji e-NPM), futhi usebenzisane nezimpahla ezimile. Kuphinde kube nethuba lokushintsha amafayela okumisa isifanekiso esithile.
Ungase futhi uzakhele izifanekiso zakho zekesi lakho lokusebenzisa eliyingqayizivele, eliphelele ngesakhiwo sefayela nokuncika, njengaku-IDE. Ngoba ithuluzi lixhunywe ku-Github, ungakwazi ukukhiqiza ngokushesha ukuzibophezela futhi uvule ama-PR. Ungathumela isicelo sakho ku-ZEIT noma ku-Netlify ngokushesha.
I-CodeSandbox Team Pro
I-CodeSandbox, ibhizinisi lesiDashi elivumela abathuthukisi ukuthi bakhe i-sandbox yokuthuthukisa uhlelo lokusebenza lwewebhu olusekelwe kusiphequluli, ikhiphe ngokusemthethweni inkundla yokubambisana evumela amaqembu ukuthi asebenze ngekhodi efwini. Umkhiqizo omusha, iTeam Pro, uyisixazululo esingenayo ikhodi eyakhelwe amaqembu omkhiqizo aphelele, kusukela kubaklami nabaphathi ngamaqembu aqinisekisa ikhwalithi (QA) nangale kwalokho.
Amaphrojekthi anikezwa ngendlela esebenziseka kalula yanoma ubani ofisa ukwenza noma ukwamukela izinguquko kuhlelo lokusebenza lewebhu, ukugwema ezinye izindlela ezifana nokuthumela amanothi nezincomo kubathuthukisi ukuze benze izinguquko, bazidlulisele ukuze kuxoxwe ngazo, kanye nokuphinda inqubo.
Izici Key
- Isihleli sekhodi esekwe kuwebhu kanye nethuluzi lesibonelo.
- Ngokusetshenziswa kwendawo, i-sandbox ingalandwa kalula ngefayela le-zip.
- Programming kwenziwa kuma-sandbox, okungenzeka kwabelwane ngawo nozakwabo.
Izinzuzo
- Umuzwa othuthukisiwe womsebenzisi nokulawula okukhulu phezu komhleli.
- Isici sokubuka kuqala bukhoma singashintshwa futhi sibukwe efasiteleni elihlukile.
- Ikhodi ifomethwa ngokuzenzakalelayo futhi ifaka i-CLI (codesandbox-cli)
- Usekelo lwamamojula we-npm athuthukile.
- Imilayezo yephutha emihle enezincomo.
- Ithuthukisa okuhlangenwe nakho kokususa iphutha ngokunikeza itheminali engcono, isibukeli sokuhlola, kanye nesibukeli sokukhishwa.
Okumbi
- Umthengi wokugcina uvezwa ukwenza kube ngokwakho okuningi.
- Ukuhudula bese udedela amafayela kukhompuyutha yasendaweni ayisebenzi kahle.
- Isakhiwo sefolda ethile kufanele silandelwe ku-CodeSandbox.
- Ukusebenza kwebhokisi lesihlabathi eliyimfihlo kutholakala kuphela kubaxhasi.
I-StackBlitz
I-StackBlitz iyi-IDE ye-inthanethi ye-Visual Studio esebenza ngekhodi yezinhlelo zokusebenza zewebhu. Inkundla iyaphendula futhi iyavumelana nezimo njengenguqulo yedeskithophu. I-StackBlitz iyi-IDE eku-inthanethi efika ilayishwe ngaphambilini I-Angular ne-React amathuluzi okuthuthukisa.
I-Thinkster.io yakhe leyo phrojekthi enhle ukuze ikwenze kube lula ngangokunokwenzeka ukuqalisa ngephrojekthi yakho ye-Angular noma ye-React ngaphandle kokukhathazeka ngokufaka ukuncika noma izilungiselelo zokwakha. I-StackBlitz inikeza izici eziningi ezimangalisayo nezihlukile okungekho omunye umhleli wekhodi we-inthanethi onazo njengamanje. Ngenxa yalokho, kuyafaneleka ukuphenya i-StackBlitz ngokuqhubekayo futhi uthole ukuthi le-IDE eku-inthanethi inikeza ini.
I-Stackblitz iqhathaniswa kakhulu ne-IDE ephelele, ikakhulukazi uma ungakwazi ukuvalelisa kukhodi ye-VS ngoba ithuluzi lisekelwe kuyo. Iphakheji inezici ezihlukahlukene ezikuvumela ukuthi uqale futhi uqhubeke nokudala uhlelo lokusebenza olugcwele isitaki.
Uhlelo lunikwa amandla yi-Visual Studio, eyaziwa kakhulu phakathi konjiniyela. Ukuhlela ungaxhunyiwe ku-inthanethi isici esivelele sephrojekthi. Ukwenza lokhu kwenzeke, ithimba le-Stackblitz lidale iseva yewebhu engaphakathi kwesiphequluli. Njengoba uthayipha, ifaka ngokuzenzakalelayo okuncikile, ihlanganise, iqoqe, futhi yenza ukulayisha kabusha okushisayo.
Inguqulo ye-Premium
I-Cadet, i-Astronaut, ne-Commander zitholakala mahhala, u-$8/ngenyanga, no-$29/ngenyanga, ngokulandelana. I-Astronaut kanye ne-Commander ifaka phakathi izici eziningi ezifana namaphrojekthi ayimfihlo angenamkhawulo, ukulayishwa kwamafayela angenamkhawulo, ukumemela esiteshini esiyinhloko seqembu, nokunye. Ukuze uthole ulwazi olwengeziwe, bheka ibhodi lokukhokha elisemthethweni.
Izici Key
- Ukwengeza amaphakheji e-NPM kuphrojekthi yakho.
- Ngenxa yenoveli yeseva ye-dev yesiphequluli, ungakwazi ukuhlela ungaxhunyiwe ku-inthanethi.
- I-URL yohlelo lokusebenza olusingethwe esivumela ukuthi sifinyelele (futhi sabelane) ngohlelo lwethu lokusebenza olubukhoma noma kunini.
- Ezinye izici eziphawulekayo ze-Visual Studio Code zifaka i-Intellisense, Usesho lwephrojekthi (Cmd/Ctrl+P), Iya kokuthi Incazelo, nezinye.
Izinzuzo
- Amandla e-Firebase okusetshenziswa.
- Isihleli sisebenziseka kalula futhi sishesha kakhulu.
- Abasebenzisi banokufinyelela ku-package.json, index.html, kanye ne-index.js.
- Ikhodi yomthombo eyabiwayo nayo engashumeka.
- Ukubuka kuqala okubukhoma engxenyeni enkulu yekhasi, ngenketho yokuvula ekhasini elehlukile uma kunesidingo.
- Ngenkathi ungaxhunyiwe ku-inthanethi, uyahlela
- Ukuqedwa okuhlakaniphile kanye ne-Intellinsense ethuthukisiwe.
- Umnyombo we-Stackblitz uwukuthi umthombo ovulekile.
Okumbi
- Awunawo amandla esakhiweni noma kuseva kanjiniyela ngoba lawo aphethwe umyalo we-create-react-app.
- Ku-React, ukwakheka kwefolda okuyisisekelo kufanele kubhekwe.
- Akwenzeki ukufometha ikhodi ngokuzenzakalela, nakuba kungenzeka ukukwenza ngokwakho.
Isiphetho
Kulezi zinsuku, inkundla yokudlala yekhodi efana nalezi esizibone ngenhla ingase isetshenziselwe ukwakha ngokuphelele noma iyiphi iphrojekthi yewebhu. Asikho isidingo sokufaka ama-IDE anzima ku-PC yakho lapho ungakha, ulungise iphutha, uhlole, futhi usebenzise ngokuqondile usuka kusiphequluli sakho sewebhu.
Ngokubona kwami, i-StackBlitz izoba ngcono kakhulu phakathi kwazo ngoba i-IDE esekelwe kuwebhu evumela i-JavaScript, i-Angular, namanye amaphrojekthi okuthuthukiswa ngaphandle kwebhokisi, ngaphandle kwesidingo sokufaka noma yiziphi izindawo zokuthuthukiswa kwendawo njenge-Node.js, npm, noma Engular. Inikeza ulwazi olufanayo nokusebenzisa Ikhodi ye-Visual Studio endaweni. Eqinisweni, ngenxa yokuthi i-StackBlitz iqhutshwa yi-Visual Studio Code, izwakala ishesha futhi iguquguquka njengenguqulo yedeskithophu.
Iyiphi ku-CodePen, CodeSandbox, ne-StackBlitz eyithuluzi lakho lokuya kulo? Sazise kumazwana.
Abbatyya
Ngiyabonga ngalesi sihloko esihle, lapho ngibona i-stackblitz.com, ngiyazi ukuthi yilokhu engikufunayo.