የፊት-ፍጻሜ ችሎታዎችዎን ለማጎልበት 9 ተጨማሪ ፕሮጀክቶች

መግቢያ

ለፕሮግራም አዲስም ሆኑ ልምድ ያለው ገንቢ፣ በዚህ ኢንዱስትሪ ውስጥ፣ አዳዲስ ፅንሰ-ሀሳቦችን እና ቋንቋዎችን/መዋቅሮችን መማር ከአዝማሚያዎች ጋር ለመጓዝ የግድ ነው።

ለምሳሌ ከአራት አመት በፊት በፌስቡክ ክፍት የሆነው እና በአለም ዙሪያ ላሉ የጃቫ ስክሪፕት ገንቢዎች ቁጥር አንድ ምርጫ የሆነውን Reactን እንውሰድ።

Vue እና Angular በእርግጥ የእነርሱ ህጋዊ የደጋፊ መሰረት አላቸው። እና ከዚያ ስቬልት እና ሌሎች እንደ Next.js ወይም Nuxt.js ያሉ አጠቃላይ ዓላማ ማዕቀፎች አሉ። እና Gatsby፣ እና Gridsome፣ እና Quasar ... እና ሌሎችም።

እራስዎን እንደ ልምድ ያካበቱ ጃቫ ስክሪፕት ገንቢ መሆናቸውን ማረጋገጥ ከፈለጉ በተለያዩ ማዕቀፎች እና ቤተ-መጻሕፍት ላይ ቢያንስ የተወሰነ ልምድ ሊኖርዎት ይገባል - ጥሩ የድሮ የጄኤስ ስራ ከመስራት በተጨማሪ።

እ.ኤ.አ. በ 2020 የፊት-መጨረሻ ማስተር እንድትሆኑ ለማገዝ ዘጠኝ የተለያዩ ፕሮጀክቶችን ሰብስቤአለሁ፣ እያንዳንዳቸው በተለያዩ የጃቫ ስክሪፕት ማዕቀፎች እና ቤተ-መጻሕፍት ላይ እንደ የቴክኖሎጂ ቁልል መገንባት እና ወደ ፖርትፎሊዮዎ ማከል ይችላሉ። ነገሮችን ወደ ተግባር ከማውጣት በላይ የሚረዳህ ነገር እንደሌለ አስታውስ፣ ስለዚህ ወደፊት ሂድ፣ አእምሮህን አስብ እና እንዲቻል አድርግ።

ጽሑፉ የተተረጎመው በ EDISON ሶፍትዌር ድጋፍ ነው, እሱም ለብዙ-ብራንድ መደብሮች ምናባዊ ተስማሚ ክፍሎችን ይሠራል, እንዲሁም ሶፍትዌርን ይፈትሻል.

የፊልም መፈለጊያ መተግበሪያ በReact (ከመንጠቆዎች ጋር)

ሊጀምሩት የሚችሉት የመጀመሪያው ነገር በReact የፊልም ፍለጋ መተግበሪያን መገንባት ነው። የመጨረሻው መተግበሪያ ምን እንደሚመስል የሚያሳይ ምስል ከዚህ በታች አለ።

ምን ትማራለህ
ይህን መተግበሪያ በመገንባት፣ በአንጻራዊ ሁኔታ አዲሱን Hooks API በመጠቀም የእርስዎን React ችሎታ ያሻሽላሉ። የናሙና ፕሮጄክቱ React ክፍሎች፣ ብዙ መንጠቆዎች፣ ውጫዊ ኤፒአይ እና በእርግጥ አንዳንድ የሲኤስኤስ አጻጻፍ ይጠቀማል።

የቴክኖሎጂ ቁልል እና ባህሪያት

• በመንጠቆዎች ምላሽ ይስጡ
• ፍጠር-ምላሽ-መተግበሪያ
• JSX
• የሲ ኤስ ኤስ

ምንም አይነት ክፍሎችን ሳይጠቀሙ እነዚህ ፕሮጀክቶች ወደ ተግባራዊ ምላሽ ትክክለኛ የመግቢያ ነጥብ ይሰጡዎታል እና በእርግጠኝነት በ 2020 ይረዱዎታል። ማግኘት ትችላለህ ናሙና ፕሮጀክት እዚህ. መመሪያዎቹን ይከተሉ ወይም የእራስዎ ያድርጉት።

መተግበሪያን ከVue ጋር ይወያዩ

ሌላው ለእርስዎ በጣም ጥሩ ፕሮጀክት የእኔን ተወዳጅ የጃቫ ስክሪፕት ቤተ-መጽሐፍትን በመጠቀም የቻት መተግበሪያ መገንባት ነው-VueJS። አፕሊኬሽኑ እንደዚህ ያለ ነገር ይመስላል።

ምን ትማራለህ
በዚህ ማጠናከሪያ ትምህርት ውስጥ የVue መተግበሪያን ከባዶ እንዴት እንደሚሠሩ ይማራሉ - አካላትን ይፍጠሩ ፣ ግዛቶችን ይቆጣጠሩ ፣ መንገዶችን ይፍጠሩ ፣ ከሶስተኛ ወገን አገልግሎቶች ጋር ይገናኙ እና ማረጋገጫን እንኳን ይይዛሉ ።

የቴክኖሎጂ ቁልል እና ባህሪያት

• እይታ
• vuex
• Vue ራውተር
• Vue CLI
• Usሺር
• የሲ ኤስ ኤስ

በ2020 ወደ ልማት ለመግባት ይህ በVue ለመጀመር ወይም ያሉትን ክህሎቶች ለማሻሻል በጣም ጥሩ ፕሮጀክት ነው። ማግኘት ትችላለህ መማሪያ እዚህ.

ቆንጆ የአየር ሁኔታ መተግበሪያ ከ Angular 8 ጋር

ይህ ምሳሌ አንግል 8ን በመጠቀም የሚያምር የአየር ሁኔታ መተግበሪያ እንዲገነቡ ያግዝዎታል፡-

ምን ትማራለህ
ይህ ፕሮጀክት ከባዶ ጀምሮ አፕሊኬሽኖችን በመገንባት ጠቃሚ ክህሎቶችን ያስተምረዎታል - ከንድፍ እስከ ልማት ፣ እስከ ዝግጁ-ወደ-ተዘጋጀ መተግበሪያ ድረስ።

የቴክኖሎጂ ቁልል እና ባህሪያት

• አንጓ 8።
• Firebase
• የአገልጋይ ጎን አቀራረብ
• CSS ከግሪድ እና ፍሌክስቦክስ ጋር
• የሞባይል ተስማሚ እና መላመድ
• ጨለማ ሁነታ
• ቆንጆ በይነገጽ

በዚህ ሁሉን አቀፍ ፕሮጀክት በጣም የምወደው ነገር ነገሮችን ለብቻህ አለማጥናት ነው። ይልቁንስ አጠቃላይ የእድገት ሂደቱን ከዲዛይን እስከ መጨረሻው ማሰማራት ይማራሉ.

የሚሰራ መተግበሪያ ከSvelte ጋር

ስቬልት ልክ እንደ አዲሱ ልጅ በክፍለ-ነገር አቀራረብ - ቢያንስ ከ React, Vue እና Angular ጋር ተመሳሳይ ነው. እና ይህ ለ 2020 በጣም ተወዳጅ ከሆኑት አዲስ ምርቶች ውስጥ አንዱ ነው።

የሚደረጉ መተግበሪያዎች የግድ በጣም ሞቃታማ ርዕሰ ጉዳይ አይደሉም፣ ነገር ግን የSvelte ችሎታዎትን እንዲያሳድጉ ይረዱዎታል። ይህን ይመስላል።

ምን ትማራለህ
ይህ መማሪያ Svelte 3 ን በመጠቀም አፕሊኬሽን እንዴት መፍጠር እንደሚችሉ ከመጀመሪያ እስከ መጨረሻ ያሳየዎታል። አካላትን፣ የቅጥ አሰራርን እና የክስተት ተቆጣጣሪዎችን ትጠቀማለህ

የቴክኖሎጂ ቁልል እና ባህሪያት

• ስቬልቴ 3
• ክፍለ አካላት
• ከሲኤስኤስ ጋር ማስጌጥ
• አገባብ ES6

ብዙ ጥሩ የስቬልቴ ጀማሪ ፕሮጀክቶች የሉም፣ ስለዚህ አገኘሁ ይህ ለመጀመር ጥሩ ቦታ ነው.

የኢኮሜርስ መተግበሪያ ከ Next.js

Next.js የአገልጋይ ጎን ከሳጥን ውጭ ማድረግን የሚደግፉ React መተግበሪያዎችን ለመገንባት በጣም ታዋቂው ማዕቀፍ ነው።

ይህ ፕሮጀክት ይህን የሚመስል የኢ-ኮሜርስ መተግበሪያን እንዴት መፍጠር እንደሚችሉ ያሳየዎታል፡-

ምን ትማራለህ
በዚህ ፕሮጀክት በ Next.js እንዴት ማዳበር እንደሚችሉ ይማራሉ—አዲስ ገጾችን እና አካላትን ይፍጠሩ፣ ውሂብ ሰርስረው ያግኙ እና የቀጣይ መተግበሪያን ያሰማሩ።

የቴክኖሎጂ ቁልል እና ባህሪያት

• ቀጣይ
• አካላት እና ገጾች
• የውሂብ ናሙና
• የቅጥ አሰራር
• የፕሮጀክት ዝርጋታ
• SSR እና SPA

አዲስ ነገር ለመማር እንደ ኢ-ኮሜርስ መተግበሪያ የእውነተኛ ህይወት ምሳሌ መኖሩ ሁልጊዜ ጥሩ ነው። ትችላለህ አጋዥ ስልጠና እዚህ ያግኙ.

ሙሉ ባለብዙ ቋንቋ ብሎግ ከNuxt.js ጋር

Nuxt.js ለ Vue ነው፣ ልክ እንደ Next.js ለ React ነው፡ ከአገልጋይ ጎን ማሳየት እና ባለአንድ ገጽ መተግበሪያዎችን ለማጣመር ጥሩ ማዕቀፍ ነው።
መፍጠር የሚችሉት የመጨረሻው መተግበሪያ ይህን ይመስላል።

ምን ትማራለህ

በዚህ የናሙና ፕሮጀክት Nuxt.jsን በመጠቀም እንዴት የተሟላ ድህረ ገጽ መገንባት እንደሚቻል ከመጀመሪያው ማዋቀር ጀምሮ እስከ መጨረሻው ማሰማራት ድረስ ይማራሉ።

ኑክስት የሚያቀርባቸውን እንደ ገፆች እና አካላት እና በ SCSS ማስዋብ ያሉ ብዙ ጥሩ ባህሪያትን ይጠቀማል።

የቴክኖሎጂ ቁልል እና ባህሪያት

• Nuxt.js
• አካላት እና ገጾች
• የታሪክ እገዳ ሞዱል
• ቅልቅል
• Vuex ለግዛት አስተዳደር
• ኤስ.ሲ.ኤስ.ኤስ
• Nuxt middlewares

ይህ በጣም አሪፍ ፕሮጀክት ነው።ብዙ የNuxt.js ምርጥ ባህሪያትን ያካተተ። እኔ በግሌ ከNuxt ጋር መስራት እወዳለሁ ስለዚህ እሱን ይሞክሩት ምክንያቱም እርስዎንም ጥሩ የ Vue ገንቢ ያደርግዎታል።

ብሎግ ከጌትስቢ ጋር

Gatsby React እና GraphQLን በመጠቀም ጥሩ የማይንቀሳቀስ ጣቢያ ጀነሬተር ነው። ይህ የፕሮጀክቱ ውጤት ነው.

ምን ትማራለህ

በዚህ ማጠናከሪያ ትምህርት ውስጥ React እና GraphQLን በመጠቀም የራስዎን ጽሑፎች ለመጻፍ የሚጠቀሙበት ብሎግ ለመፍጠር ጋትቢን እንዴት እንደሚጠቀሙ ይማራሉ ።

የቴክኖሎጂ ቁልል እና ባህሪያት

• ጋትስቢ።
• ምላሽ
• ግራፍQL
• ተሰኪዎች እና ገጽታዎች
• MDX/Markdown
• ማስነሻ CSS
• አብነቶች

ብሎግ ለመጀመር ከፈለክ፣ ይህ ትልቅ ምሳሌ ነው። React እና GraphQLን በመጠቀም እንዴት እንደሚሰራ።

ዎርድፕረስ መጥፎ ምርጫ ነው እያልኩ አይደለም፣ ነገር ግን በ Gatsby አማካኝነት React ን በመጠቀም ከፍተኛ አፈፃፀም ያላቸውን ድረ-ገጾች መገንባት ይችላሉ - ይህ አስደናቂ ጥምረት ነው።

ብሎግ በ Gridsome

ግሪድሶም ለVue… እሺ፣ ከቀጣይ/Nuxt ጋር አስቀድመን አግኝተናል።
ግን ለግሪድሶም እና ለጋትስቢ ተመሳሳይ ነው። ሁለቱም GraphQLን እንደ የውሂብ ንብርብር ይጠቀማሉ፣ ነገር ግን Gridsome VueJSን ይጠቀማል። እንዲሁም ምርጥ ብሎጎችን እንዲፈጥሩ የሚያግዝዎ ድንቅ የማይንቀሳቀስ ጣቢያ ጀነሬተር ነው።

ምን ትማራለህ

ይህ ፕሮጀክት በ Gridsome፣ GraphQL እና Markdown ለመጀመር እንዴት ቀላል ብሎግ መፍጠር እንደሚችሉ ያስተምርዎታል። በNetlify በኩል ማመልከቻን እንዴት ማሰማራት እንደሚቻልም ያብራራል።

የቴክኖሎጂ ቁልል እና ባህሪያት

• ግሪድሶም
• እይታ
• ግራፍQL
• ስትቀንስ
• እንደገና አረጋግጥ

ይህ በእርግጥ በጣም የተሟላ አጋዥ ስልጠና አይደለም፣ ነገር ግን የ Gridsome እና መሰረታዊ ፅንሰ ሀሳቦችን ይሸፍናል። ምልክት ማድረጊያ እና ጥሩ መነሻ ሊሆን ይችላል።.

Quasar ን በመጠቀም ከSoundCloud ጋር ተመሳሳይ የሆነ የድምጽ ማጫወቻ

Quasar ሌላው የሞባይል አፕሊኬሽኖችን ለመገንባት የሚያገለግል የVue ማእቀፍ ነው። በዚህ ፕሮጀክት ውስጥ የድምጽ ማጫወቻ መተግበሪያን እንደ፡-

ምን ትማራለህ

ሌሎች ፕሮጄክቶች በአብዛኛው የሚያተኩሩት በድር መተግበሪያዎች ላይ ቢሆንም፣ ይህ Vue እና Quasar frameworkን በመጠቀም የሞባይል መተግበሪያን እንዴት እንደሚገነቡ ያሳየዎታል።
ቀድሞውኑ አንድሮይድ ስቱዲዮ/Xcode በማቀናበር የሚሰራ Cordova ሊኖርዎት ይገባል። ካልሆነ፣ መመሪያው ሁሉንም ነገር እንዴት ማዋቀር እንደሚችሉ ወደሚያሳዩበት የኳሳር ድህረ ገጽ አገናኝ አለው።

የቴክኖሎጂ ቁልል እና ባህሪያት

• ኳሳር
• እይታ
• Cordova
• ሞገድ ሰርፈር
• የዩአይ ክፍሎች

አነስተኛ ፕሮጀክትየሞባይል አፕሊኬሽኖችን ለመገንባት የኳሳርን አቅም በማሳየት ላይ።

ምንጭ: hab.com