M'ndandanda wazopezekamo[Bisani][Show]
Kugwira ntchito yovuta, kaya ndinu katswiri wazopanga mapulogalamu kapena munthu watsopano, mutha kuthana ndi mavuto. Mukagawa pulojekiti yanu kukhala ma module ambiri, zovuta zimayamba, zomwe zimapangitsa kuti zikhale zovuta kutsatira zolakwika ndikupeza mayankho. Nthawi zina, kuthetsa vuto lililonse kungakhale kovuta chifukwa simunapeze njira yoyenera yothetsera vuto lomwe mwakhala mukulikonza.
Zimapezekanso ngati kachidutswa nthawi zina, zomwe zingawoneke zovuta panthawiyo. JavaScript ndi chimodzi mwa zilankhulo zopezeka pa intaneti zomwe ndi zosavuta kuphunzira. Ingoyambitsani msakatuli wanu wapakompyuta ndikuyenda kupita ku Zida Zopangira (nthawi zambiri F12), ndipo mwamaliza! Mutha kuyesa JS osafunikira kukhazikitsa kapena kuyendetsa pulogalamu iliyonse yovuta.
Kuti muyambe, chomwe mukufuna ndi msakatuli. Ndizosangalatsa kukhala ndi kuphweka konseku m'bokosi, koma pali nthawi zina pomwe mumafuna zambiri. Mwachitsanzo, tiyerekeze kuti mukufuna kuyesa Web API yatsopano yomwe mwaipeza posachedwa koma simukufuna kuyambitsa pulojekiti yatsopano.
Mu positi iyi, tifanizira ndikusiyanitsa mabwalo atatu otchuka a JS, CodePen, CodeSandbox, ndi StackBlitz. Tiyeni tiyambe!
CodePen
Zida zakutsogolo zapaintaneti zimasintha nthawi zonse, ndipo osintha mawu ndi gawo lalikulu laukadaulo waposachedwa kwambiri womwe umapangitsa moyo wa omanga kukhala wosavuta. Kupatula olemba oyimira okha monga Atom kapena Notepad ++, pakhala pali kuphulika kwa okonza osatsegula m'zaka zaposachedwa omwe safuna kukhazikitsa mapulogalamu ndikulimbikitsa mgwirizano waukulu.
CodePen ndi "gulu lapaintaneti loyesa ndikuwonetsa ma HTML, CSS, ndi JavaScript" zomwe zimapereka mwayi wophunzirira kulemba bwino masamba akutsogolo.
CodePen imakupatsani "mitundu" iwiri. Choyamba komanso chogwiritsidwa ntchito kwambiri ndi Cholembera. Ndi zophweka monga kuwonekera batani ndi kutumizidwa kwa mkonzi. Kuchokera pamenepo, mutha kupeza gulu lowoneratu komanso mazenera oyambira a HTML, CSS, ndi JS.
Palibe "mafayilo," "IntelliSense," kapena china chilichonse - kungowunikira mawu osavuta komanso kulamula mwachangu ngati prettify. Pazosankha tabu, mutha kusankha kuchokera pamitundu yocheperako ya zilankhulo zonse zitatu (monga TypeScript ya JS) kapena kuwonjezera zolumikizira kuzinthu zakunja.
Ngati mungofuna chilichonse kuti chichitike kwaulere, mkonzi aliyense adzakwanira. Ndingapangire CodePen pachilichonse chomwe sichifuna kukhazikitsidwa kapena malaibulale ambiri - HTML, CSS, ndi JS yokhala ndi mapurosesa osankha pamwamba. Ngati mukufuna kugwiritsa ntchito bwalo lamasewera kuti musinthe mawonekedwe anu ochezera kapena kupanga mbiri yanu, CodePen ndiye njira yabwinoko.
Choyambirira
Muli ndi zina zingapo zoti musankhe pa CodePen. Ngati mumalipira pachaka, mutha kupeza imodzi mwamapulani atatu apamwamba $12, $19, kapena $39 mwezi uliwonse. Mutha kupanga zolembera zachinsinsi, zolemba, ndi zosonkhanitsa pamitu itatu iliyonse.
Mudzalandiranso baji ya Pro (yolimbikitsa anthu), mwayi wolumikizana nawo, osatsatsa, ndi zina zambiri. Palinso njira zina zamagulu ndi zosiyana zina zamagulu. Onani bolodi lawo lovomerezeka kuti mudziwe zambiri.
Features Ofunika
Kupatula pakupanga HTML, CSS, ndi JavaScript mu CodePen, pali zinthu zina zingapo zomwe zimasiyanitsa.
- Kuwona nthawi yeniyeni ya code yanu ndikotheka. Sipafunika kusonkhanitsa.
- Kuyesera kumakuthandizani kuti muphunzire zinthu zatsopano.
- Pangani mazenera ang'onoang'ono kuti muwone ndikuwongolera zovuta.
- Onetsani ntchito zanu zodabwitsa.
- Pangani ndi kusunga Zolembera kuti mudzagwiritse ntchito mtsogolo.
- Yesani khodi ya okonza ena ndikuwona ikugwira ntchito.
ubwino
- Kuti tiyambe, palibe mtengo.
- Zothandizira zophunzirira.
- Gwirizanani ndi ena ndikuyerekeza mapulojekiti kuti muwone komwe angapite mtsogolo.
- UI ndiyosavuta kugwiritsa ntchito komanso yowongoka.
kuipa
- Laibulale yama code ndi yaying'ono, kumaliza-code-code sikukwanira. Ndizabwino pamapulojekiti atsamba limodzi ndipo sizitha kuchita chilichonse chachikulu.
- Pa CodePen, mutha kupanga zolembera zachinsinsi, koma muyenera kukweza kukhala umembala wa Pro ($ 9/mwezi).
KodiSandbox
CodeSandbox ndi mkonzi wamakhodi ozikidwa pa intaneti. Imasinthiratu, kukuyikani, ndikuwongolera kudalira kwanu, kukulolani kuti mupange projekiti yatsopano ndikudina kamodzi. Mukapanga china chake chosangalatsa, mutha kugawana ndi ena pongogawana tsambalo.
Mkonzi amagwirizana ndi mapulojekiti aliwonse a JavaScript, ngakhale akuphatikizapo zinthu zina za React, monga njira yosungira pulojekitiyo mu template ya create-react-app.
Ntchito iliyonse yomwe mungapange mu CodeSandbox imayamba ndi template. Itha kukhudzana ndi laibulale inayake, chimango, kapena nthawi yogwiritsira ntchito (kuphatikiza Node.js) kapena kugwiritsa ntchito umisiri wamba wamba. Mukasankha template, mumatumizidwa kwa mkonzi, komwe mudzapeza mafayilo onse ofunikira ndi zenera lowonekera kale.
Muli ndi mwayi wopeza "mafayilo" m'mabokosi onse a Sandbox, zomwe zikutanthauza kuti mutha kupanga mafayilo atsopano, kugwiritsa ntchito ma module (kuphatikiza ma phukusi a NPM), ndikulumikizana ndi zinthu zokhazikika. Palinso mwayi wosintha mafayilo okhazikika a template.
Mutha kupanganso ma tempuleti anu amtundu wanu wapadera wogwiritsa ntchito, wodzaza ndi mafayilo ndi zodalira, monga mu IDE. Chifukwa chidacho chimalumikizidwa ndi Github, mutha kupanga mwachangu ndikutsegula ma PR. Mutha kutumiza pulogalamu yanu ku ZEIT kapena Netlify nthawi yomweyo.
CodeSandbox Team Pro
CodeSandbox, bizinesi yaku Dutch yomwe imalola opanga kupanga sandbox yozikidwa pa msakatuli wopanga pulogalamu yapaintaneti, yatulutsa mwalamulo nsanja yamgwirizano yomwe imalola magulu kuti azigwira ntchito pama code mumtambo. Chogulitsa chatsopano, Team Pro, ndi yankho lopanda ma code lomwe limapangidwira magulu athunthu azinthu, kuyambira opanga ndi oyang'anira kudzera m'magulu otsimikizira (QA) ndi kupitilira apo.
Mapulojekiti amaperekedwa m'njira yosavuta kugwiritsa ntchito kwa aliyense amene akufuna kupanga kapena kuvomereza kusintha kwa pulogalamu yapaintaneti, kupewa njira zina monga kutumiza zolemba ndi malingaliro kwa opanga madivelopa kuti asinthe, kuwapereka kuti akambirane, ndi kubwereza ndondomekoyi.
Features Ofunika
- Chida chothandizira pa intaneti komanso chida cha prototype.
- Kuti mugwiritse ntchito kwanuko, bokosi la mchenga litha kutsitsidwa mosavuta mu zip file.
- mapulogalamu zimachitika m'mabokosi a mchenga, omwe amatha kugawidwa mosavuta ndi ogwira nawo ntchito.
ubwino
- Kuwongolera kwa ogwiritsa ntchito komanso kuwongolera kwakukulu pa mkonzi.
- Chowoneratu chamoyo chikhoza kusinthidwa ndikuwonedwa pawindo lapadera.
- Khodiyo imasinthidwa zokha ndipo imaphatikizapo CLI (codesandbox-cli)
- Kuthandizira kwa ma module apamwamba a npm.
- Mauthenga abwino olakwika okhala ndi malingaliro.
- Imawongolera zomwe zikuchitika pakuwongolera popereka terminal yabwinoko, chowonera choyesa, komanso wowonera.
kuipa
- Wogula womaliza amakumana ndi zokonda zambiri.
- Kokani ndikugwetsa mafayilo kuchokera pakompyuta yapafupi sikuyenda bwino.
- Mapangidwe ena a foda ayenera kutsatiridwa mu CodeSandbox.
- Ntchito ya sandbox yachinsinsi imapezeka kwa ogula okha.
Zithunzi za StackBlitz
StackBlitz ndi Visual Studio Code-yoyendetsedwa ndi IDE yapaintaneti yogwiritsa ntchito intaneti. Pulatifomu ndi yomvera komanso yosinthika ngati mawonekedwe apakompyuta. StackBlitz ndi IDE yapaintaneti yomwe imabwera itadzaza Angular ndi React zida zachitukuko.
Thinkster.io idapanga pulojekiti yabwinoyi kuti ikhale yosavuta momwe mungathere kuti muyambe ndi pulojekiti yanu ya Angular kapena React osadandaula za kukhazikitsa kudalira kapena zoikamo. StackBlitz imapereka zinthu zambiri zodabwitsa komanso zapadera zomwe palibe mkonzi wina wapaintaneti ali nazo pakali pano. Zotsatira zake, ndikofunikira kuti mufufuzenso za StackBlitz ndikupeza zomwe IDE iyi yapaintaneti ikupereka.
Stackblitz ndiyofanana kwambiri ndi IDE yathunthu, makamaka ngati simungathe kutsazikana ndi code ya VS chifukwa chidacho chidakhazikitsidwa. Phukusili lili ndi zinthu zosiyanasiyana zomwe zimakulolani kuti muyambe ndikupitiriza kupanga pulogalamu yodzaza.
Pulogalamuyi imayendetsedwa ndi Visual Studio, yomwe imadziwika bwino pakati pa opanga mapulogalamu. Kusintha kwapaintaneti ndi gawo lodziwika bwino la polojekitiyi. Kuti izi zitheke, gulu la Stackblitz lidapanga tsamba lawebusayiti. Pamene mukulemba, imangoyika zodalira, kupanga, mitolo, ndikuyikanso kutentha.
Choyambirira
Cadet, Astronaut, ndi Commander zilipo kwaulere, $8/mwezi, ndi $29/mwezi, motsatana. Astronaut ndi Commander amaphatikiza zinthu zingapo monga ma projekiti achinsinsi opanda malire, kukweza mafayilo opanda malire, kuyitanira kumayendedwe apakati a timu, ndi zina zotero. Kuti mudziwe zambiri, onani bolodi lovomerezeka.
Features Ofunika
- Kuwonjezera ma phukusi a NPM ku polojekiti yanu.
- Chifukwa cha seva yatsopano ya msakatuli, mutha kusintha mukakhala osagwiritsa ntchito intaneti.
- Ulalo wa pulogalamu yochititsidwa yomwe imatilola kupeza (ndi kugawana) pulogalamu yathu yamoyo nthawi iliyonse.
- Zina zodziwika bwino za Visual Studio Code ndi Intellisense, Kusaka kwa Project (Cmd/Ctrl+P), Pitani ku Tanthauzo, ndi ena.
ubwino
- Mphamvu za Firebase pakutumiza.
- Mkonzi ndiwosavuta kugwiritsa ntchito komanso mwachangu kwambiri.
- Ogwiritsa ali ndi mwayi wa package.json, index.html, ndi index.js.
- Nambala yogawana yomwe imatha kuphatikizidwanso.
- Kuwoneratu pagawo lalikulu latsamba, ndi mwayi wotsegula patsamba lina ngati kuli kofunikira.
- Ndilibe intaneti, Kusintha
- Kumaliza mwanzeru komanso Intellisense yabwino.
- Pakatikati pa Stackblitz ndi gwero lotseguka.
kuipa
- Mulibe mphamvu panyumbayo kapena seva yomanga chifukwa izi zimayendetsedwa ndi lamulo la create-react-app.
- Mu React, mawonekedwe afoda ayenera kuwonedwa.
- Sizingatheke kupanga code yokha, ngakhale ndizotheka kuchita pamanja.
Kutsiliza
Masiku ano, malo osewerera ma code ngati omwe tawawona pamwambapa atha kugwiritsidwa ntchito popanga projekiti iliyonse yapaintaneti. Palibe chifukwa choyika ma IDE ovutirapo pa PC yanu pomwe mutha kupanga, kukonza zolakwika, kuyesa, ndikuyika mwachindunji kuchokera pa msakatuli wanu.
M'malingaliro anga, StackBlitz ingakhale yabwino kwambiri pakati pawo chifukwa ndi IDE yochokera pa intaneti yomwe imalola JavaScript, Angular, ndi ntchito zina zachitukuko kunja kwa bokosi, popanda chifukwa chokhazikitsa madera otukuka ngati Node.js, npm, kapena Angular. Zimaperekanso zomwezo monga kugwiritsa ntchito Visual Studio Code kwanuko. Zoona zake, chifukwa StackBlitz imayendetsedwa ndi Visual Studio Code, imamva mwachangu komanso yosunthika ngati mawonekedwe apakompyuta.
Kodi CodePen, CodeSandbox, ndi StackBlitz ndi iti yomwe ili chida chanu chothandizira? Tiuzeni mu ndemanga.
Abbatya
Zikomo chifukwa cha nkhaniyi, nditangowona stackblitz.com, ndikudziwa kuti izi ndi zomwe ndikufuna.