ውስብስብ በሆነ ፕሮጀክት ላይ በመስራት ልምድ ያለው ፕሮግራመርም ሆንክ አዲስ ተማሪ ከሞላ ጎደል ችግሮች ሊያጋጥሙህ ይችላሉ። ፕሮጄክትዎን ወደ ብዙ ሞጁሎች ሲከፍሉ ችግሮች ይነሳሉ ፣ ይህም ስህተቶችን ለመከታተል እና መፍትሄዎችን ለማግኘት የበለጠ ከባድ ያደርገዋል። በሌሎች ሁኔታዎች፣ ሲሰሩበት ለነበረው ችግር ተገቢውን መፍትሄ ስላላገኙ የግለሰብ ጉዳዮችን ማረም ከባድ ሊሆን ይችላል።
በተጨማሪም በአጋጣሚዎች እንደ ኮድ ቁራጭ ይከሰታል, ይህም በወቅቱ ውስብስብ ሊመስል ይችላል. ጃቫ ስክሪፕት ለመማር እጅግ በጣም ቀላል ከሆኑ ድር-ተኮር ቋንቋዎች አንዱ ነው። በቀላሉ የዴስክቶፕ ማሰሻዎን ያስጀምሩ እና ወደ ገንቢ መሳሪያዎች (ብዙውን ጊዜ F12) ይሂዱ እና ጨርሰዋል! ከዚያ ማንኛውንም የተወሳሰበ ሶፍትዌር መጫን ወይም ማስኬድ ሳያስፈልግዎት ከJS ጋር መሞከር ይችላሉ።
ለመጀመር፣ የሚያስፈልግህ አሳሽ ብቻ ነው። ይህን ሁሉ ቀላልነት ከሳጥኑ ውስጥ ማግኘት በጣም ጥሩ ነው፣ ነገር ግን ተጨማሪ የሚያስፈልግዎ አጋጣሚዎች አሉ። ለምሳሌ፣ በቅርቡ ባገኙት አዲስ የድር ኤፒአይ መሞከር ይፈልጋሉ ነገር ግን አዲስ ፕሮጀክት መጀመር ካልፈለጉ።
በዚህ ልጥፍ ውስጥ፣ ሶስቱን በጣም ተወዳጅ የJS መጫወቻ ሜዳዎችን፣ CodePen፣ CodeSandbox እና StackBlitz እናነፃፅራለን። እንጀምር!
ኮዴን
የFrontend የድር ልማት መሳሪያዎች ሁል ጊዜ በዝግመተ ለውጥ ላይ ናቸው፣ እና የጽሁፍ አርታኢዎች የገንቢውን ህይወት ቀላል የሚያደርጉት የቅርብ ጊዜዎቹ ቴክኖሎጂዎች ትልቅ አካል ናቸው። እንደ Atom ወይም Notepad ++ ካሉ ብቻቸውን የጽሑፍ አርታዒዎች በተጨማሪ በቅርብ ዓመታት ውስጥ የፕሮግራም ጭነት የማይፈልጉ እና የበለጠ ትብብርን የሚያበረታቱ በአሳሽ ላይ የተመሰረቱ አርታኢዎች ፍንዳታ ተፈጥሯል።
CodePen በተጠቃሚ የተፈጠሩ HTML፣ CSS እና JavaScript ኮድ ቅንጥቦችን ለመፈተሽ እና ለማቅረብ የመስመር ላይ ማህበረሰብ ነው የፊት ለፊት ድረ-ገጾችን እንዴት በተሻለ መልኩ መፃፍ እንደሚችሉ ለመማር አስደናቂ እድሎችን ይሰጣል።
CodePen ሁለት "ሞዶች" ይሰጥዎታል. የመጀመሪያው እና በብዛት ጥቅም ላይ የዋለው ብዕር ነው. አንድ አዝራርን ጠቅ በማድረግ ወደ አርታዒው እንደመጓጓዝ ቀላል ነው። ከዚያ ሆነው የቅድመ እይታ ፓነልን እንዲሁም መሰረታዊ HTML፣ CSS እና JS የአርትዖት መስኮቶችን ማግኘት ይችላሉ።
ምንም “ፋይል ሲስተም”፣ “IntelliSense” ወይም ሌላ ነገር የለም – ቀላል አገባብ ማድመቅ እና እንደ ማስመሰል ያሉ ፈጣን ትዕዛዞች። በአማራጮች ትር ውስጥ ለሦስቱም ቋንቋዎች (እንደ ‹TypeScript for JS› ያሉ) ከተከለከለው የቅድሚያ ፕሮሰሰር መምረጥ ወይም ከውጭ ምንጮች ጋር ግንኙነቶችን ማከል ትችላለህ።
በነጻ የሚደረግ ነገር ብቻ ከፈለጉ፣ ከአርታዒዎቹ ውስጥ የትኛውም በቂ ይሆናል። ብዙ ማዋቀር ወይም ቤተ-መጻሕፍት ለማይፈልገው ለማንኛውም ነገር CodePenን እጠቁማለሁ - በቀላሉ HTML፣ CSS እና JS ከአማራጭ ቅድመ-ፕሮሰሰር ጋር። የመጫወቻ ቦታውን የማህበራዊ ሚዲያ መኖርን ለማሻሻል ወይም የግል ፖርትፎሊዮ ለማዳበር ከፈለጉ CodePen የተሻለ አማራጭ ነው።
ፕሪሚየም ስሪት
በ CodePen ላይ ለመምረጥ ጥቂት ተጨማሪ አማራጮች አሉዎት። በዓመት የሚከፍሉ ከሆነ፣ በየወሩ በ$12፣ በ$19 ወይም በ$39 ከሶስቱ ፕሪሚየም ዕቅዶች አንዱን ማግኘት ይችላሉ። በማንኛቸውም የሶስቱ እርከኖች ማለቂያ የሌላቸው የግል እስክሪብቶዎች፣ ልጥፎች እና ስብስቦች መፍጠር ይችላሉ።
እንዲሁም የፕሮ ባጅ (ማህበራዊ ማበልጸጊያ)፣ የቀጥታ የትብብር ሁነታ መዳረሻ፣ ማስታወቂያ የለም እና ሌሎችንም ይደርስዎታል። የተወሰኑ ቡድን-ተኮር ስልቶች እና ሌሎች የደረጃ አቋራጭ ልዩነቶችም አሉ። ለበለጠ መረጃ ይፋዊ የሂሳብ ቦርዳቸውን ይመልከቱ።
ቁልፍ ባህሪያት
በኮድፔን ውስጥ HTML፣ CSS እና JavaScriptን ከመፍጠር በተጨማሪ የሚለዩት ጥቂት ተጨማሪ ነገሮች አሉ።
- ኮድዎን በቅጽበት መመልከት ይቻላል። ማጠናቀርን አይጠይቅም።
- ሙከራ አዳዲስ ነገሮችን ለመማር ያስችልዎታል.
- ችግሮችን ለመፈለግ እና ለመፍታት ትናንሽ የሙከራ ጉዳዮችን ይፍጠሩ።
- ድንቅ ስራዎችህን አሳይ።
- ለበኋላ ጥቅም ላይ የሚውሉ ብዕሮችን ይፍጠሩ እና ያከማቹ።
- የሌላ ገንቢዎች ኮድ ይሞክሩ እና በተግባር ላይ ይመልከቱት።
ጥቅሞች
- ለመጀመር, ምንም ወጪ የለም.
- አብሮገነብ የመማሪያ ሀብቶች።
- ከሌሎች ጋር ይተባበሩ እና ወደፊት የት መሄድ እንደሚችሉ ለማየት ፕሮጀክቶችን ያወዳድሩ።
- UI ለመጠቀም ቀላል እና ቀጥተኛ ነው።
ጥቅምና
- የኮድ ቤተ-መጽሐፍት ትንሽ ነው, ራስ-ኮድ ማጠናቀቅ በቂ አይደለም. ለአንድ ገጽ ፕሮጀክቶች ብቻ ጥሩ ነው እና ምንም ትልቅ ነገር ማስተናገድ አይችልም።
- በ CodePen ላይ የግል እስክሪብቶችን መፍጠር ይችላሉ፣ነገር ግን ወደ ፕሮ አባልነት ($9/በወር) ማሻሻል ያስፈልግዎታል።
ኮድ ሳንድቦክስ
CodeSandbox በድር ላይ የተመሰረተ ኮድ አርታዒ ነው። ለእርስዎ የሚሰራጭ፣ የማሸግ እና የጥገኝነት አስተዳደርን በራስ ሰር ይሰራል፣ ይህም በአንድ ጠቅታ አዲስ ፕሮጀክት እንዲገነቡ ያስችልዎታል። አንድ አስደናቂ ነገር ከፈጠሩ በኋላ በቀላሉ ድህረ ገጹን በማጋራት ለሌሎች ማካፈል ይችላሉ።
አርታዒው ከማንኛውም የጃቫ ስክሪፕት ፕሮጄክቶች ጋር ተኳሃኝ ነው፣ ምንም እንኳን የተወሰኑ ምላሽ-ተኮር ባህሪያትን ቢያካትትም፣ ለምሳሌ ፕሮጀክቱን በፍጠር-react-app አብነት ውስጥ ለማስቀመጥ አማራጭ።
በ CodeSandbox ውስጥ የሚገነቡት ማንኛውም ፕሮጀክት በአብነት ይጀምራል። እሱ ከአንድ የተወሰነ ቤተ-መጽሐፍት፣ ማዕቀፍ ወይም የሩጫ ጊዜ (Node.jsን ጨምሮ) ጋር ሊዛመድ ይችላል ወይም በቀላሉ መደበኛ የድር ቴክኖሎጂዎችን መጠቀም ይችላል። አብነት ከመረጡ በኋላ ወደ አርታዒው ይላካሉ, ሁሉንም አስፈላጊ ፋይሎች ያገኛሉ እና የቅድመ እይታ መስኮቱ ቀድሞውኑ ተከፍቷል.
በሁሉም ማጠሪያ ሳጥኖች ውስጥ የ"ፋይል ስርዓት" መዳረሻ አለህ፣ ይህ ማለት አዲስ ፋይሎችን መፍጠር፣ ሞጁሎችን (የኤንፒኤም ፓኬጆችን ጨምሮ) መጠቀም እና ከስታቲስቲክ ንብረቶች ጋር መገናኘት ትችላለህ። እንዲሁም አብነት-ተኮር ውቅር ፋይሎችን የማሻሻል እድል አለ.
እንደ IDE ውስጥ ባለው የፋይል መዋቅር እና ጥገኞች ለተሟላ የአጠቃቀም ጉዳይዎ የራስዎን አብነቶች እንኳን ሊገነቡ ይችላሉ። መሣሪያው ከ Github ጋር የተገናኘ ስለሆነ በፍጥነት ቁርጠኝነትን መፍጠር እና PRs መክፈት ይችላሉ። ማመልከቻዎን ወደ ZEIT ወይም Netfy ወዲያውኑ ማሰማራት ይችላሉ።
CodeSandbox ቡድን Pro
CodeSandbox፣ ገንቢዎች በአሳሽ ላይ የተመሰረተ የድር መተግበሪያ ልማት ማጠሪያ እንዲገነቡ የሚያስችል የደች ንግድ፣ ቡድኖች በደመና ውስጥ በኮድ ላይ እንዲሰሩ የሚያስችል የትብብር መድረክን በይፋ ለቋል። አዲሱ ምርት፣ ቡድን ፕሮ፣ ከዲዛይነሮች እና አስተዳዳሪዎች በጥራት ማረጋገጫ (QA) ቡድኖች እና ከዚያም በላይ ለተሟላ የምርት ቡድኖች የተገነባ ምንም ኮድ መፍትሄ ነው።
በድር መተግበሪያ ላይ ለውጦችን ለማድረግ ወይም ለመቀበል ለሚፈልግ ለማንኛውም ሰው ለተጠቃሚ ምቹ በሆነ በይነገጽ ፕሮጄክቶች ተሰጥተዋል፣ተለዋጭ ዘዴዎችን ለምሳሌ ማስታወሻዎችን እና ምክሮችን ለገንቢዎች በመላክ ለውጦቹን ለማስፈጸም መልሰው ለውይይት ማስተላለፍ እና ሂደቱን መድገም።
ቁልፍ ባህሪያት
- በድር ላይ የተመሰረተ ኮድ አርታዒ እና ፕሮቶታይፕ መሳሪያ።
- ለአካባቢ ጥቅም፣ ማጠሪያ በቀላሉ በዚፕ ፋይል ውስጥ ሊወርድ ይችላል።
- ፕሮግራሚንግ የሚከናወነው በአሸዋ ሳጥኖች ውስጥ ነው ፣ እሱም ከሥራ ባልደረቦች ጋር በቀላሉ ሊጋራ ይችላል።
ጥቅሞች
- የተሻሻለ የተጠቃሚ ተሞክሮ እና በአርታዒው ላይ የበለጠ ቁጥጥር።
- የቀጥታ ቅድመ እይታ ባህሪው በተለየ መስኮት ውስጥ ሊሻሻል እና ሊታይ ይችላል።
- ኮዱ በራስ ሰር ይቀረፃል እና CLI (codesandbox-cli) ያካትታል።
- ለላቁ npm ሞጁሎች ድጋፍ።
- ጥሩ የስህተት መልዕክቶች ከጥቆማዎች ጋር።
- የተሻለ ተርሚናል፣ የሙከራ ተመልካች እና የችግር ተመልካች በማቅረብ የማረም ልምድን ያሻሽላል።
ጥቅምና
- የመጨረሻው ሸማች ለብዙ ግላዊነት ማላበስ ተጋልጧል።
- ከአካባቢያዊ ኮምፒውተር ፋይሎችን መጎተት እና መጣል በትክክል አይሰራም።
- የተወሰነ የአቃፊ መዋቅር በ CodeSandbox ውስጥ መከተል አለበት.
- የግል ማጠሪያ ተግባራዊነት ለደንበኞች ብቻ ይገኛል።
ስታክቦልዝዝ
StackBlitz ለድር አፕሊኬሽኖች ቪዥዋል ስቱዲዮ ኮድ የሚሰራ የመስመር ላይ አይዲኢ ነው። የመሳሪያ ስርዓቱ እንደ ዴስክቶፕ ስሪት ምላሽ ሰጭ እና ተስማሚ ነው። StackBlitz ቀድሞ የተጫነ የመስመር ላይ አይዲኢ ነው። አንግል እና ምላሽ የልማት መሳሪያዎች.
Thinkster.io ስለ ጥገኝነት መጫን ወይም ቅንጅቶችን መገንባት ሳያስፈልግ ከእርስዎ Angular ወይም React ፕሮጀክት ጋር ለመጀመር በተቻለ መጠን ቀላል ለማድረግ ያንን ድንቅ ፕሮጀክት ገንብቷል። StackBlitz ሌላ ምንም የመስመር ላይ ኮድ አርታዒ አሁን የሌለው ብዙ አስደናቂ እና ልዩ ባህሪያትን ያቀርባል። በውጤቱም፣ StackBlitzን በበለጠ መመርመር እና ይህ የመስመር ላይ IDE ምን እንደሚያቀርብ ማወቁ ጠቃሚ ነው።
Stackblitz ከተሟላው IDE ጋር እጅግ በጣም የሚወዳደር ነው፡ በተለይ በቪኤስ ኮድ መሰናበት ካልቻላችሁ መሳሪያው በእሱ ላይ የተመሰረተ ስለሆነ። ጥቅሉ የተጠናቀቀ አፕሊኬሽን ለመጀመር እና ለመፍጠር የሚያስችሉዎ የተለያዩ ባህሪያት አሉት.
ፕሮግራሙ በገንቢዎች ዘንድ በሰፊው በሚታወቀው ቪዥዋል ስቱዲዮ የተጎላበተ ነው። ከመስመር ውጭ አርትዖት የፕሮጀክቱ ልዩ ባህሪ ነው። ይህንን ተግባራዊ ለማድረግ የStackblitz ቡድን በአሳሽ ውስጥ የድር አገልጋይ ፈጠረ። በሚተይቡበት ጊዜ ጥገኞችን በራስ-ሰር ይጭናል፣ ያጠናቅራል፣ ጥቅሎችን ይጭናል እና ትኩስ ጭነትን ይሰራል።
ፕሪሚየም ስሪት
Cadet፣ Astronaut እና Commander በነጻ፣ በወር 8 ዶላር እና በወር 29 ዶላር ይገኛሉ። የጠፈር ተመራማሪ እና አዛዥ እንደ ያልተገደቡ የግል ፕሮጀክቶች፣ ያልተገደበ የፋይል ሰቀላዎች፣ ወደ core team slack channel መጋበዝ እና የመሳሰሉትን የመሳሰሉ ባህሪያትን ያካትታል። ለበለጠ መረጃ፡ ኦፊሴላዊውን የሂሳብ አከፋፈል ሰሌዳ ይመልከቱ።
ቁልፍ ባህሪያት
- የNPM ጥቅሎችን ወደ ፕሮጀክትዎ በማከል ላይ።
- ለአዲሱ የአሳሽ ዴቭ አገልጋይ ምስጋና ይግባውና ከመስመር ውጭ ሆነው ማርትዕ ይችላሉ።
- የቀጥታ መተግበሪያችንን በማንኛውም ጊዜ እንድንደርስ (እና እንድናጋራ) የሚፈቅድልን የተስተናገደ መተግበሪያ ዩአርኤል።
- ሌሎች ታዋቂ የ Visual Studio Code ባህሪያት Intellisense፣ Project Search (Cmd/Ctrl+P)፣ Go to Definition እና ሌሎችን ያካትታሉ።
ጥቅሞች
- የማሰማራት የFirebase ችሎታዎች።
- አርታዒው በእውነት ለመጠቀም ቀላል እና በጣም ፈጣን ነው።
- ተጠቃሚዎች pack.json፣ index.html እና index.js መዳረሻ አላቸው።
- ሊካተት የሚችል ምንጭ ኮድ።
- በገጹ ትልቅ ክፍል ላይ የቀጥታ ቅድመ-ዕይታ፣ አስፈላጊ ከሆነ በሌላ ገጽ ላይ የመክፈት ምርጫ አለው።
- ከመስመር ውጭ እያለ፣ በማርትዕ ላይ
- ብልጥ ማጠናቀቂያዎች እና የተሻሻለ Intellisense።
- የ Stackblitz ዋና አካል ነው። ክፍት ምንጭ.
ጥቅምና
- በህንፃው ወይም በገንቢው አገልጋይ ላይ ተጽእኖ የለህም ምክንያቱም እነዚያ የሚተዳደሩት በcreat-react-app ትእዛዝ ነው።
- በ React ውስጥ, መሠረታዊ የአቃፊ መዋቅር መታየት አለበት.
- ኮድን በራስ ሰር መቅረጽ አይቻልም፣ ምንም እንኳን በእጅ ማድረግ ቢቻልም።
መደምደሚያ
በአሁኑ ጊዜ፣ ከላይ እንዳየናቸው ዓይነት የመጫወቻ ስፍራዎች ማንኛውንም የድር ፕሮጀክት ሙሉ በሙሉ ለመገንባት ሊያገለግል ይችላል። ከድር አሳሽህ መገንባት፣ ማረም፣ መሞከር እና ማሰማራት ስትችል በፒሲህ ላይ አስቸጋሪ የሆኑ IDEዎችን መጫን አያስፈልግም።
በእኔ አስተያየት StackBlitz ከነሱ መካከል በጣም ጥሩ ይሆናል ምክንያቱም ጃቫ ስክሪፕት ፣ አንግል እና ሌሎች የልማት ፕሮጄክቶችን ከሳጥኑ ውጭ የሚፈቅድ በድር ላይ የተመሠረተ አይዲኢ ነው ፣ እንደ Node.js ፣ npm ፣ ምንም አይነት የአካባቢ ልማት አካባቢዎችን መጫን አያስፈልግም ። ወይም Angular. ቪዥዋል ስቱዲዮ ኮድን በአገር ውስጥ ከመጠቀም ጋር ተመሳሳይ ተሞክሮ ይሰጣል። እንደ እውነቱ ከሆነ፣ StackBlitz የሚንቀሳቀሰው በ Visual Studio Code ስለሆነ፣ ልክ እንደ ዴስክቶፕ ስሪት ፈጣን እና ሁለገብነት ይሰማዋል።
ከ CodePen፣ CodeSandbox እና StackBlitz የትኛው ነው ወደሚመራው መሳሪያዎ? በአስተያየቶቹ ውስጥ ያሳውቁን.
አብቲያ
ለዚህ ታላቅ መጣጥፍ እናመሰግናለን፣ አንዴ stackblitz.com አይቼ፣ የምፈልገው ይህ እንደሆነ አውቃለሁ።