Dojo Front-end: ໂຄງການທີ່ຈະຝຶກອົບຮົມທັກສະນັກພັດທະນາ (5 ໃຫມ່ + 43 ເກົ່າ)

1. ແນວຄວາມຄິດ clone

ຄໍາຮ້ອງສະຫມັກ Notion ໄດ້ຖືກຮັກແພງໂດຍຈໍານວນຫຼາຍ; ມັນອະນຸຍາດໃຫ້ທ່ານເພື່ອເພີ່ມປະສິດທິພາບການເຮັດວຽກຂອງທ່ານ, ເຮັດວຽກກັບເອກະສານ, ກໍານົດເວລາວຽກງານ, ແລະ synchronize ຂໍ້ມູນລະຫວ່າງອຸປະກອນ.

www.notion.so

ສິ່ງ​ທີ່​ທ່ານ​ຈະ​ໄດ້​ຮຽນ​ຮູ້​ໂດຍ​ການ​ສ້າງ​ໂຄ​ນ​ສັນ​ຍາ​ລັກ​:

• HTML ລາກແລະວາງ API. ຜູ້ໃຊ້ສາມາດ "ຈັບດ້ວຍຫນູ" ສາມາດລາກໄດ້ ອົງປະກອບແລະວາງມັນຢູ່ໃນ ເລື່ອນໄດ້ ເຂດ.
• ວິທີການ synchronize ຂໍ້ມູນໃນເວລາທີ່ແທ້ຈິງລະຫວ່າງຄອມພິວເຕີແລະໂທລະສັບສະຫຼາດຂອງທ່ານ.
• ພວກເຮົາອະນຸຍາດໃຫ້ຜູ້ໃຊ້ສ້າງ, ອ່ານ, ປັບປຸງແລະລຶບບັນທຶກ, ດັ່ງນັ້ນການຝຶກອົບຮົມທັກສະ CRUD.

ບົດຄວາມໄດ້ຖືກແປດ້ວຍການສະຫນັບສະຫນູນຂອງຊອບແວ EDISON, ເຊິ່ງ ພັດທະນາແອັບພລິເຄຊັນ ແລະເວັບໄຊທ໌ແລະ ລົງທຶນໃນການເລີ່ມຕົ້ນ.

2. Repl.it clone

Repl.it ເປັນເຄື່ອງມືສໍາລັບການດັດແກ້ລະຫັດຮ່ວມມືໃນເວລາຈິງ. ທ່ານສາມາດເລືອກຫຼາຍພາສາ: JavaScript, Python, ໄປແລະແລ່ນລະຫັດໂດຍກົງໃນຕົວທ່ອງເວັບ. ເປັນປະໂຫຍດຫຼາຍສໍາລັບການສາທິດໄວແລະການສໍາພາດລະຫັດ.

repl.it

ສິ່ງ​ທີ່​ທ່ານ​ຈະ​ໄດ້​ຮຽນ​ຮູ້​ໂດຍ​ການ​ສ້າງ clone Repl.it​:

• ວິທີການດໍາເນີນການແລະປະຕິບັດລະຫັດ (ຂ້າງເຊີຟເວີ) ໃນຕົວທ່ອງເວັບ (ຝ່າຍລູກຄ້າ).
• ອ່ານຂໍ້ມູນປ້ອນຂໍ້ມູນ (ລະຫັດແຫຼ່ງ) ແລະສະແດງຜົນການປະຕິບັດ.
• ວິທີການສ້າງໄຟລ໌ແລະໂຟນເດີໃນເວັບແລະບັນທຶກຜົນໄດ້ຮັບ.
• ວິທີການເນັ້ນໃສ່ syntax ລະຫັດ.

3. Google Photos Clone

Google Photos ເປັນບໍລິການເກັບຮັກສາ ແລະແບ່ງປັນຮູບພາບ.
ທຸກຄໍາຮ້ອງສະຫມັກຮູບພາບທີ່ທັນສະໄຫມສາມາດປະຕິບັດຫນ້າທີ່ພື້ນຖານ: ອັບໂຫຼດ, ການປູກພືດ, ແລະອື່ນໆ. ປະຊາຊົນຕ້ອງການທີ່ຈະສ້າງ avatars ຂອງຕົນເອງແລະແບ່ງປັນຮູບພາບຂອງແມວ, ດັ່ງນັ້ນທ່ານຈໍາເປັນຕ້ອງສາມາດເຮັດວຽກກັບຮູບພາບຕ່າງໆ.

www.google.com/photos/about

ສິ່ງທີ່ທ່ານຈະຮຽນຮູ້ໂດຍການສ້າງໂຄນ Google ຮູບພາບ:

• ວິທີການສ້າງຮູບພາບທີ່ຕອບສະຫນອງໃນໂທລະສັບ, ແທັບເລັດ, ແລັບທັອບແລະແມ້ກະທັ້ງຫນ້າຈໍໂທລະພາບຍັກໃຫຍ່.
• ວິທີການຈັດການກັບການອັບໂຫລດຮູບພາບ, ໂດຍສະເພາະຮູບພາບຂະຫນາດໃຫຍ່ (> 1MB) ແລະການອັບໂຫລດຈໍານວນຫລາຍ.
• ປະມວນຜົນໄຟລ໌ຮູບພາບ, ຕັດ ແລະປັບຂະໜາດຮູບສຳລັບຮູບຫຍໍ້ ຫຼືເມື່ອເປີດຄັງຮູບ.
• ໂບນັດ: ວິທີການເກັບຮັກສາຮູບພາບໃນ cloud ຫຼືຖານຂໍ້ມູນທ້ອງຖິ່ນ.

4. Gifsky clone

gifski ປ່ຽນວິດີໂອເປັນ GIF ໂດຍໃຊ້ຟັງຊັນpngquant ສໍາລັບ palettes ຂ້າມກອບທີ່ມີປະສິດທິພາບແລະການຕ້ານການນາມແຝງຊົ່ວຄາວ. ຜົນໄດ້ຮັບແມ່ນ GIF ທີ່ມີຫລາຍພັນດອກຕໍ່ກອບ.

gif.ski

ສິ່ງ​ທີ່​ທ່ານ​ຈະ​ໄດ້​ຮຽນ​ຮູ້​ໂດຍ​ການ​ສ້າງ clone Gifski​:

• ວິທີການແປງໄຟລ໌ວິດີໂອ (.mp4 ເປັນ .gif).
• ວິທີການໃຊ້ Drag and Drop HTML API.
• ວິທີການເພີ່ມປະສິດທິພາບຮູບພາບແລະການປຸງແຕ່ງເຮັດວຽກ.

ຫມາຍເຫດ: Gifsky ເປັນໂຄງການແຫຼ່ງເປີດ ແລະຢູ່ໃນ GitHub!

5. ຕິດຕາມອັດຕາ cryptocurrency

React ຕົວຕິດຕາມ cryptocurrency ພື້ນເມືອງ

ສິ່ງທີ່ທ່ານຈະຮຽນຮູ້ໂດຍການສ້າງຕົວຕິດຕາມອັດຕາເງິນຕາ:

• ວິທີການເຮັດວຽກກັບ API ແລະຮັບຂໍ້ມູນຈາກໄລຍະໄກຈາກ API.
• ວິທີການສະແດງຂໍ້ມູນເປັນບັນຊີລາຍຊື່.
• ໂບນັດ: ຖ້າເຈົ້າສົນໃຈ, ຂ້ອຍຂຽນເມື່ອໄວໆນີ້ ການສອນກ່ຽວກັບການສ້າງຕົວຕິດຕາມລາຄາ ສໍາລັບ cryptocurrency ກັບ React Native.

ຫມາຍເຫດ: ທີ່ນີ້ GitHub ຕົວຢ່າງ repository.

ການຄັດເລືອກໂຄງການຈາກສິ່ງພິມທີ່ຜ່ານມາ.

layer

www.reddit.com/r/layer

ຊັ້ນແມ່ນຊຸມຊົນທີ່ທຸກຄົນສາມາດແຕ້ມ pixels ໃນ "ກະດານ" ທີ່ແບ່ງປັນ. ແນວຄວາມຄິດຕົ້ນສະບັບເກີດຢູ່ໃນ Reddit. ຊຸມຊົນ r/Layer ແມ່ນຄໍາປຽບທຽບສໍາລັບຄວາມຄິດສ້າງສັນຮ່ວມກັນ, ທີ່ທຸກຄົນສາມາດເປັນຜູ້ສ້າງແລະປະກອບສ່ວນເຂົ້າໃນສາເຫດທົ່ວໄປ.

ສິ່ງທີ່ທ່ານຈະຮຽນຮູ້ໃນເວລາສ້າງໂຄງການ Layer ຂອງທ່ານເອງ:

• ວິທີການເຮັດວຽກຂອງ JavaScript canvas ການຮູ້ວິທີການເຮັດວຽກ canvas ເປັນທັກສະທີ່ສໍາຄັນໃນຫຼາຍໆຄໍາຮ້ອງສະຫມັກ.
• ວິທີການປະສານງານການອະນຸຍາດຂອງຜູ້ໃຊ້. ຜູ້ໃຊ້ແຕ່ລະຄົນສາມາດແຕ້ມຫນຶ່ງ pixels ທຸກໆ 15 ນາທີໂດຍບໍ່ຈໍາເປັນຕ້ອງເຂົ້າສູ່ລະບົບ.
• ສ້າງເຊດຊັນຄຸກກີ.

Squoosh

squoosh.app

Squoosh ເປັນຄໍາຮ້ອງສະຫມັກການບີບອັດຮູບພາບທີ່ມີທາງເລືອກຂັ້ນສູງຫຼາຍ.

GIF 20 MB

ໂດຍການສ້າງສະບັບຂອງທ່ານເອງຂອງ Squoosh ທ່ານຈະໄດ້ຮຽນຮູ້:

• ວິທີການເຮັດວຽກກັບຂະຫນາດຮູບພາບ
• ຮຽນຮູ້ພື້ນຖານຂອງ Drag'n'Drop API
• ເຂົ້າໃຈວ່າ API ແລະຜູ້ຟັງເຫດການເຮັດວຽກແນວໃດ
• ວິທີການອັບໂຫລດແລະສົ່ງອອກໄຟລ໌

ຫມາຍເຫດ: ເຄື່ອງບີບອັດຮູບພາບແມ່ນທ້ອງຖິ່ນ. ມັນບໍ່ຈໍາເປັນຕ້ອງສົ່ງຂໍ້ມູນເພີ່ມເຕີມໄປຫາເຄື່ອງແມ່ຂ່າຍ. ທ່ານສາມາດມີເຄື່ອງອັດຢູ່ໃນເຮືອນ, ຫຼືທ່ານສາມາດນໍາໃຊ້ມັນຢູ່ໃນເຄື່ອງແມ່ຂ່າຍ, ທາງເລືອກຂອງທ່ານ.

ເຄື່ອງຄິດເລກ

ມາບໍ່? ຢ່າງຮຸນແຮງ? ຈັກຄິດໄລ່? ແມ່ນແລ້ວ, ແນ່ນອນ, ເຄື່ອງຄິດເລກ. ຄວາມເຂົ້າໃຈພື້ນຖານຂອງການດໍາເນີນງານທາງຄະນິດສາດແລະວິທີການເຮັດວຽກຮ່ວມກັນແມ່ນທັກສະທີ່ສໍາຄັນສໍາລັບການເຮັດໃຫ້ຄໍາຮ້ອງສະຫມັກຂອງທ່ານງ່າຍຂຶ້ນ. ບໍ່ໄວຫຼືຫຼັງຈາກນັ້ນທ່ານຈະຕ້ອງຈັດການກັບຕົວເລກແລະໄວກວ່ານັ້ນດີກວ່າ.

jarodburchill.github.io/CalculatorReactApp

ໂດຍການສ້າງເຄື່ອງຄິດເລກຂອງທ່ານເອງ, ທ່ານຈະໄດ້ຮຽນຮູ້:

• ເຮັດ​ວຽກ​ກັບ​ຕົວ​ເລກ​ແລະ​ການ​ດໍາ​ເນີນ​ງານ​ຄະ​ນິດ​ສາດ​
• ປະຕິບັດກັບ API ຜູ້ຟັງເຫດການ
• ວິທີການຈັດອົງປະກອບ, ເຂົ້າໃຈຮູບແບບ

ຕົວກວາດເວັບ (ເຄື່ອງຈັກຊອກຫາ)

ທຸກຄົນໄດ້ໃຊ້ເຄື່ອງຈັກຊອກຫາ, ດັ່ງນັ້ນເປັນຫຍັງຈຶ່ງບໍ່ສ້າງຂອງທ່ານເອງ? ຕົວກວາດເວັບແມ່ນຈໍາເປັນເພື່ອຄົ້ນຫາຂໍ້ມູນ. ທຸກຄົນໃຊ້ພວກມັນທຸກໆມື້ແລະຄວາມຕ້ອງການຂອງເຕັກໂນໂລຢີນີ້ແລະຜູ້ຊ່ຽວຊານຈະເຕີບໂຕພຽງແຕ່ໃນໄລຍະເວລາ.

ເຄື່ອງຈັກຊອກຫາ Google

ສິ່ງທີ່ທ່ານຈະຮຽນຮູ້ໂດຍການສ້າງເຄື່ອງຈັກຊອກຫາຂອງທ່ານເອງ:

• ວິທີການຕົວກວາດເວັບເຮັດວຽກ
• ວິທີການດັດສະນີສະຖານທີ່ແລະວິທີການຈັດອັນດັບໃຫ້ພວກເຂົາໂດຍການຈັດອັນດັບແລະຊື່ສຽງ
• ວິທີການເກັບຮັກສາເວັບໄຊທ໌ທີ່ຖືກດັດສະນີໃນຖານຂໍ້ມູນແລະວິທີການເຮັດວຽກກັບຖານຂໍ້ມູນ

ເຄື່ອງຫຼິ້ນເພງ (Spotify, Apple Music)

ທຸກຄົນຟັງເພງ - ມັນເປັນພຽງແຕ່ສ່ວນຫນຶ່ງຂອງຊີວິດຂອງພວກເຮົາ. ໃຫ້ພວກເຮົາສ້າງເຄື່ອງຫຼິ້ນເພງເພື່ອໃຫ້ເຂົ້າໃຈດີກວ່າວ່າກົນໄກພື້ນຖານຂອງເວທີການຖ່າຍທອດດົນຕີທີ່ທັນສະໄຫມເຮັດວຽກແນວໃດ.

Spotify

ສິ່ງ​ທີ່​ທ່ານ​ຈະ​ໄດ້​ຮຽນ​ຮູ້​ໂດຍ​ການ​ສ້າງ​ເວ​ທີ​ນ​້​ໍ​າ​ດົນ​ຕີ​ຂອງ​ທ່ານ​ເອງ​:

• ວິທີການເຮັດວຽກກັບ API. ໃຊ້ API ຈາກ Spotify ຫຼື Apple Music
• ວິ​ທີ​ການ​ຫຼິ້ນ​, ພັກ​ໄວ້​ຫຼື rewind ກັບ​ເພງ​ຕໍ່​ໄປ / ກ່ອນ​ຫນ້າ​ນີ້​
• ວິທີການປ່ຽນປະລິມານ
• ວິທີການຈັດການເສັ້ນທາງຜູ້ໃຊ້ແລະປະຫວັດຂອງຕົວທ່ອງເວັບ

ແອັບຊອກຫາຮູບເງົາໂດຍໃຊ້ React (ມີ hooks)

ສິ່ງທໍາອິດທີ່ທ່ານສາມາດເລີ່ມຕົ້ນດ້ວຍແມ່ນການສ້າງແອັບຯຄົ້ນຫາຮູບເງົາໂດຍໃຊ້ React. ຂ້າງລຸ່ມນີ້ແມ່ນຮູບພາບຂອງສິ່ງທີ່ຄໍາຮ້ອງສະຫມັກສຸດທ້າຍຈະຄື:

ເຈົ້າຈະຮຽນຫຍັງ
ໂດຍການສ້າງແອັບຯນີ້, ທ່ານຈະປັບປຸງທັກສະ React ຂອງທ່ານໂດຍໃຊ້ Hooks API ທີ່ຂ້ອນຂ້າງໃຫມ່. ໂຄງການຕົວຢ່າງໃຊ້ອົງປະກອບ React, hooks ຫຼາຍ, API ພາຍນອກ, ແລະແນ່ນອນບາງຄໍເຕົ້າໄຂ່ທີ່ CSS.

ເທກໂນໂລຍີ stack ແລະລັກສະນະ

• ປະຕິກິລິຍາດ້ວຍ hooks
• ສ້າງ, react-app
• JSX
• CSS

ໂດຍບໍ່ຕ້ອງໃຊ້ຫ້ອງຮຽນໃດໆ, ໂຄງການເຫຼົ່ານີ້ຈະໃຫ້ທ່ານເປັນຈຸດເຂົ້າສູ່ React ທີ່ສົມບູນແບບ ແລະຈະຊ່ວຍເຈົ້າໄດ້ໃນປີ 2020. ທ່ານສາມາດຊອກຫາ ໂຄງການຕົວຢ່າງທີ່ນີ້. ປະຕິບັດຕາມຄໍາແນະນໍາຫຼືເຮັດໃຫ້ມັນເປັນຂອງຕົນເອງ.

ແອັບສົນທະນາກັບ Vue

ໂຄງການທີ່ດີອີກອັນໜຶ່ງທີ່ເຈົ້າຕ້ອງເຮັດຄືການສ້າງແອັບສົນທະນາໂດຍໃຊ້ຫ້ອງສະໝຸດ JavaScript ທີ່ຂ້ອຍມັກ: VueJS. ຄໍາຮ້ອງສະຫມັກຈະມີລັກສະນະຄ້າຍຄືນີ້:

ເຈົ້າຈະຮຽນຫຍັງ
ໃນບົດສອນນີ້, ທ່ານຈະໄດ້ຮຽນຮູ້ວິທີການສ້າງແອັບຯ Vue ຕັ້ງແຕ່ເລີ່ມຕົ້ນ - ການສ້າງອົງປະກອບ, ການຈັດການສະຖານະ, ການສ້າງເສັ້ນທາງ, ການເຊື່ອມຕໍ່ກັບບໍລິການພາກສ່ວນທີສາມ, ແລະແມ້ກະທັ້ງການຈັດການການພິສູດຢືນຢັນ.

ເທກໂນໂລຍີ stack ແລະລັກສະນະ

• Vue
• vuex
• ວອດເຕີ
• Vue CLI
• ຄົນຂັບລົດ
• CSS

ນີ້​ແມ່ນ​ໂຄງ​ການ​ທີ່​ດີ​ຫຼາຍ​ທີ່​ຈະ​ເລີ່ມ​ຕົ້ນ​ກັບ Vue ຫຼື​ປັບ​ປຸງ​ຄວາມ​ສາ​ມາດ​ທີ່​ມີ​ຢູ່​ແລ້ວ​ຂອງ​ທ່ານ​ເພື່ອ​ເຂົ້າ​ໄປ​ໃນ​ການ​ພັດ​ທະ​ນາ​ໃນ​ປີ 2020. ທ່ານສາມາດຊອກຫາ tutorial ທີ່ນີ້.

ແອັບສະພາບອາກາດທີ່ສວຍງາມກັບ Angular 8

ຕົວຢ່າງນີ້ຈະຊ່ວຍໃຫ້ທ່ານສ້າງແອັບຯສະພາບອາກາດທີ່ສວຍງາມໂດຍໃຊ້ Angular 8:

ເຈົ້າຈະຮຽນຫຍັງ
ໂຄງ​ການ​ນີ້​ຈະ​ສອນ​ໃຫ້​ທ່ານ​ມີ​ຄວາມ​ສາ​ມາດ​ທີ່​ມີ​ຄຸນ​ຄ່າ​ໃນ​ການ​ກໍ່​ສ້າງ​ຄໍາ​ຮ້ອງ​ສະ​ຫມັກ​ຈາກ​ການ​ເລີ່ມ​ຕົ້ນ - ຈາກ​ການ​ອອກ​ແບບ​ໂດຍ​ຜ່ານ​ການ​ພັດ​ທະ​ນາ​, ທຸກ​ວິ​ທີ​ການ​ເພື່ອ​ເປັນ​ຄໍາ​ຮ້ອງ​ສະ​ຫມັກ​ທີ່​ມີ​ການ​ປັບ​ໃຊ້​.

ເທກໂນໂລຍີ stack ແລະລັກສະນະ

• ມຸມ 8
• Firebase
• ການສະແດງຜົນຂ້າງເຊີບເວີ
• CSS ກັບ Grid ແລະ Flexbox
• ມືຖືທີ່ເປັນມິດ ແລະສາມາດປັບຕົວໄດ້
• ຮູບແບບມືດ
• ການໂຕ້ຕອບທີ່ສວຍງາມ

ສິ່ງທີ່ຂ້ອຍຮັກແທ້ໆກ່ຽວກັບໂຄງການທີ່ສົມບູນແບບນີ້ແມ່ນວ່າທ່ານບໍ່ໄດ້ສຶກສາສິ່ງທີ່ຢູ່ໂດດດ່ຽວ. ແທນທີ່ຈະ, ທ່ານໄດ້ຮຽນຮູ້ຂະບວນການພັດທະນາທັງຫມົດ, ຈາກການອອກແບບຈົນເຖິງການນໍາໃຊ້ສຸດທ້າຍ.

ຄໍາຮ້ອງສະຫມັກທີ່ຕ້ອງເຮັດໂດຍໃຊ້ Svelte

Svelte ແມ່ນຄ້າຍຄືເດັກນ້ອຍໃຫມ່ໃນວິທີການທີ່ອີງໃສ່ອົງປະກອບ - ຢ່າງຫນ້ອຍຄ້າຍຄືກັນກັບ React, Vue ແລະ Angular. ແລະນີ້ແມ່ນຫນຶ່ງໃນຜະລິດຕະພັນໃຫມ່ທີ່ຮ້ອນທີ່ສຸດສໍາລັບປີ 2020.

ແອັບ To-Do ບໍ່ຈໍາເປັນຕ້ອງເປັນຫົວຂໍ້ທີ່ຮ້ອນແຮງທີ່ສຸດ, ແຕ່ມັນຈະຊ່ວຍໃຫ້ທ່ານສ້າງທັກສະ Svelte ຂອງທ່ານຢ່າງແທ້ຈິງ. ມັນຈະມີລັກສະນະນີ້:

ເຈົ້າຈະຮຽນຫຍັງ
tutorial ນີ້​ຈະ​ສະ​ແດງ​ໃຫ້​ທ່ານ​ວິ​ທີ​ການ​ສ້າງ​ຄໍາ​ຮ້ອງ​ສະ​ຫມັກ​ໂດຍ​ການ​ນໍາ​ໃຊ້ Svelte 3​, ຈາກ​ເລີ່ມ​ຕົ້ນ​ຈົນ​ສໍາ​ເລັດ​ຮູບ​. ເຈົ້າຈະໃຊ້ອົງປະກອບ, ຮູບແບບສີສັນ ແລະຕົວຈັດການເຫດການ

ເທກໂນໂລຍີ stack ແລະລັກສະນະ

• ສະເວດ 3
• Components
• ການຈັດຮູບແບບດ້ວຍ CSS
• ES 6 syntax

ບໍ່ມີໂຄງການເລີ່ມຕົ້ນ Svelte ທີ່ດີຫຼາຍ, ສະນັ້ນຂ້າພະເຈົ້າພົບເຫັນ ນີ້ແມ່ນທາງເລືອກທີ່ດີທີ່ຈະເລີ່ມຕົ້ນດ້ວຍ.

ແອັບຯອີຄອມເມີຊໂດຍໃຊ້ Next.js

Next.js ແມ່ນກອບທີ່ນິຍົມທີ່ສຸດສໍາລັບການກໍ່ສ້າງຄໍາຮ້ອງສະຫມັກ React ທີ່ສະຫນັບສະຫນູນການສະແດງຜົນຂ້າງເຊີບເວີອອກຈາກກ່ອງ.

ໂຄງການນີ້ຈະສະແດງໃຫ້ທ່ານເຫັນວິທີການສ້າງຄໍາຮ້ອງສະຫມັກ e-commerce ທີ່ມີລັກສະນະນີ້:

ເຈົ້າຈະຮຽນຫຍັງ
ໃນໂຄງການນີ້, ທ່ານຈະໄດ້ຮຽນຮູ້ວິທີການພັດທະນາດ້ວຍ Next.js—ສ້າງໜ້າ ແລະອົງປະກອບໃໝ່, ແຍກຂໍ້ມູນ, ແລະຮູບແບບ ແລະນຳໃຊ້ແອັບພລິເຄຊັນ Next.

ເທກໂນໂລຍີ stack ແລະລັກສະນະ

• ຕໍ່ໄປ
• ອົງປະກອບແລະຫນ້າ
• ການເກັບຕົວຢ່າງຂໍ້ມູນ
• ການເປັນ ໝັນ
• ການນຳໃຊ້ໂຄງການ
• SSR ແລະ SPA

ມັນເປັນການດີສະເຫມີທີ່ຈະມີຕົວຢ່າງທີ່ແທ້ຈິງເຊັ່ນ app e-commerce ເພື່ອຮຽນຮູ້ສິ່ງໃຫມ່. ເຈົ້າ​ສາ​ມາດ ຊອກຫາ tutorial ທີ່ນີ້.

ບລັອກຫຼາຍພາສາເຕັມຮູບແບບດ້ວຍ Nuxt.js

Nuxt.js ແມ່ນສໍາລັບ Vue, ສິ່ງທີ່ Next.js ແມ່ນສໍາລັບ React: ກອບທີ່ດີສໍາລັບການລວມເອົາອໍານາດຂອງການສະແດງຜົນຂ້າງເຊີບເວີແລະຄໍາຮ້ອງສະຫມັກຫນ້າດຽວ.
ຄໍາຮ້ອງສະຫມັກສຸດທ້າຍທີ່ທ່ານສາມາດສ້າງຈະມີລັກສະນະນີ້:

ເຈົ້າຈະຮຽນຫຍັງ

ໃນໂຄງການຕົວຢ່າງນີ້, ທ່ານຈະໄດ້ຮຽນຮູ້ວິທີການສ້າງເວັບໄຊທ໌ທີ່ສົມບູນໂດຍໃຊ້ Nuxt.js, ຈາກການຕິດຕັ້ງເບື້ອງຕົ້ນຈົນເຖິງການນໍາໃຊ້ສຸດທ້າຍ.

ມັນໃຊ້ປະໂຍດຈາກຫຼາຍລັກສະນະເຢັນທີ່ Nuxt ມີໃຫ້, ເຊັ່ນ: ຫນ້າແລະອົງປະກອບ, ແລະຄໍເຕົ້າໄຂ່ທີ່ SCSS.

ເທກໂນໂລຍີ stack ແລະລັກສະນະ

• Nuxt.js
• ອົງປະກອບແລະຫນ້າ
• ໂມດູນ Storyblock
• ປາແດກ
• Vuex ສໍາລັບການຄຸ້ມຄອງລັດ
• SCSS ສໍາລັບຄໍເຕົ້າໄຂ່ທີ່
• Nuxt middlewares

ນີ້ແມ່ນໂຄງການທີ່ເຢັນແທ້ໆ, ເຊິ່ງລວມມີຄຸນສົມບັດ Nuxt.js ທີ່ຍິ່ງໃຫຍ່ຫຼາຍອັນ. ສ່ວນຕົວຂ້ອຍມັກເຮັດວຽກກັບ Nuxt ສະນັ້ນເຈົ້າຄວນລອງມັນເບິ່ງ ເພາະມັນຈະເຮັດໃຫ້ເຈົ້າເປັນນັກພັດທະນາ Vue ທີ່ດີເລີດ.

ບລັອກກັບ Gatsby

Gatsby ເປັນເຄື່ອງສ້າງເວັບໄຊສະຖິດທີ່ດີເລີດໂດຍໃຊ້ React ແລະ GraphQL. ນີ້ແມ່ນຜົນໄດ້ຮັບຂອງໂຄງການ:

ເຈົ້າຈະຮຽນຫຍັງ

ໃນບົດສອນນີ້, ທ່ານຈະຮຽນຮູ້ວິທີການໃຊ້ Gatsby ເພື່ອສ້າງ blog ທີ່ທ່ານຈະໃຊ້ເພື່ອຂຽນບົດຄວາມຂອງທ່ານເອງໂດຍໃຊ້ React ແລະ GraphQL.

ເທກໂນໂລຍີ stack ແລະລັກສະນະ

• ແກສບີ
• React
• ກຣາຟQL
• ປລັກອິນ ແລະຮູບແບບສີສັນ
• MDX/Markdown
• Bootstrap CSS
• ຮູບແບບ

ຖ້າທ່ານເຄີຍຕ້ອງການເລີ່ມຕົ້ນ blog, ນີ້ແມ່ນຕົວຢ່າງທີ່ຍິ່ງໃຫຍ່ ກ່ຽວກັບວິທີການເຮັດໃຫ້ມັນໂດຍໃຊ້ React ແລະ GraphQL.

ຂ້າພະເຈົ້າບໍ່ໄດ້ເວົ້າວ່າ WordPress ເປັນທາງເລືອກທີ່ບໍ່ດີ, ແຕ່ກັບ Gatsby ທ່ານສາມາດສ້າງເວັບໄຊທ໌ທີ່ມີປະສິດທິພາບສູງໂດຍໃຊ້ React - ເຊິ່ງເປັນການປະສົມປະສານທີ່ຫນ້າປະຫລາດໃຈ.

ບລັອກກັບ Gridsome

Gridsome ສໍາລັບ Vue... ຕົກລົງ, ພວກເຮົາມີອັນນີ້ກັບ Next/Nuxt ແລ້ວ.
ແຕ່ຄືກັນສໍາລັບ Gridsome ແລະ Gatsby. ທັງສອງໃຊ້ GraphQL ເປັນຊັ້ນຂໍ້ມູນຂອງພວກເຂົາ, ແຕ່ Gridsome ໃຊ້ VueJS. ນີ້ຍັງເປັນຕົວສ້າງເວັບໄຊທ໌ຄົງທີ່ທີ່ຫນ້າປະຫລາດໃຈທີ່ຈະຊ່ວຍໃຫ້ທ່ານສ້າງ blogs ທີ່ຍິ່ງໃຫຍ່:

ເຈົ້າຈະຮຽນຫຍັງ

ໂຄງການນີ້ຈະສອນທ່ານກ່ຽວກັບວິທີການສ້າງ blog ງ່າຍໆເພື່ອເລີ່ມຕົ້ນດ້ວຍ Gridsome, GraphQL ແລະ Markdown. ມັນຍັງກວມເອົາວິທີການຕິດຕັ້ງແອັບພລິເຄຊັນຜ່ານ Netlify.

ເທກໂນໂລຍີ stack ແລະລັກສະນະ

• ຕາໜ່າງ
• Vue
• ກຣາຟQL
• markdown
• Netlify

ນີ້ແມ່ນແນ່ນອນບໍ່ແມ່ນການສອນທີ່ສົມບູນແບບທີ່ສຸດ, ແຕ່ມັນກວມເອົາແນວຄວາມຄິດພື້ນຖານຂອງ Gridsome ແລະ Markdown ອາດຈະເປັນຈຸດເລີ່ມຕົ້ນທີ່ດີ.

ເຄື່ອງຫຼິ້ນສຽງຄ້າຍຄື SoundCloud ໂດຍໃຊ້ Quasar

Quasar ເປັນກອບ Vue ອື່ນທີ່ສາມາດຖືກນໍາໃຊ້ເພື່ອສ້າງຄໍາຮ້ອງສະຫມັກມືຖື. ໃນໂຄງການນີ້ທ່ານຈະສ້າງຄໍາຮ້ອງສະຫມັກຜູ້ນສຽງ, ສໍາລັບການຍົກຕົວຢ່າງ:

ເຈົ້າຈະຮຽນຫຍັງ

ໃນຂະນະທີ່ໂຄງການອື່ນໆສຸມໃສ່ຄໍາຮ້ອງສະຫມັກເວັບໄຊຕ໌ເປັນສ່ວນໃຫຍ່, ອັນນີ້ຈະສະແດງໃຫ້ທ່ານເຫັນວິທີການສ້າງແອັບພລິເຄຊັນມືຖືໂດຍໃຊ້ Vue ແລະ Quasar framework.
ທ່ານຄວນມີ Cordova ແລ່ນກັບ Android Studio/Xcode ທີ່ຖືກຕັ້ງຄ່າແລ້ວ. ຖ້າບໍ່ແມ່ນ, ຄູ່ມືມີການເຊື່ອມຕໍ່ກັບເວັບໄຊທ໌ Quasar ທີ່ພວກເຂົາສະແດງໃຫ້ທ່ານເຫັນວິທີການຕັ້ງຄ່າທຸກຢ່າງ.

ເທກໂນໂລຍີ stack ແລະລັກສະນະ

• quasar
• Vue
• Cordova
• WaveSurfer
• ອົງປະກອບ UI

ໂຄງການຂະຫນາດນ້ອຍ, ສະແດງໃຫ້ເຫັນຄວາມສາມາດຂອງ Quasar ສໍາລັບການສ້າງຄໍາຮ້ອງສະຫມັກມືຖື.

ແບບຟອມບັດເຄຣດິດ

ຮູບຮ່າງບັດເຄຣດິດທີ່ເຢັນດ້ວຍການໂຕ້ຕອບກັບຈຸນລະພາກທີ່ລຽບງ່າຍ ແລະມ່ວນຊື່ນ. ລວມມີການຈັດຮູບແບບຕົວເລກ, ການຢັ້ງຢືນ ແລະການກວດຫາປະເພດບັດອັດຕະໂນມັດ. ມັນຖືກສ້າງຂຶ້ນໃນ Vue.js ແລະຍັງຕອບສະຫນອງຢ່າງເຕັມສ່ວນ. (ທ່ານສາມາດເບິ່ງ ທີ່ນີ້.)

ບັດເຄຣດິດ-ແບບຟອມ

ສິ່ງ​ທີ່​ທ່ານ​ຈະ​ຮຽນ​ຮູ້​:

• ຂະບວນການແລະການກວດສອບແບບຟອມ
• ຈັດການເຫດການ (ຕົວຢ່າງ, ເມື່ອຊ່ອງຂໍ້ມູນມີການປ່ຽນແປງ)
• ເຂົ້າໃຈວິທີການສະແດງແລະວາງອົງປະກອບໃນຫນ້າ, ໂດຍສະເພາະຂໍ້ມູນບັດເຄຣດິດທີ່ປາກົດຢູ່ເທິງສຸດຂອງແບບຟອມ

ເສັ້ນສະແດງບາ

ຮິສໂຕແກຣມແມ່ນຕາຕະລາງ ຫຼືກຣາຟທີ່ສະແດງເຖິງຂໍ້ມູນປະເພດທີ່ມີແຖບສີ່ຫຼ່ຽມມຸມສາກທີ່ມີຄວາມສູງ ຫຼືຄວາມຍາວເປັນສັດສ່ວນກັບຄ່າທີ່ເຂົາເຈົ້າເປັນຕົວແທນ.

ພວກເຂົາສາມາດຖືກນໍາໃຊ້ໃນແນວຕັ້ງຫຼືແນວນອນ. ແຜນວາດແຖບແນວຕັ້ງແມ່ນບາງຄັ້ງເອີ້ນວ່າຕາຕະລາງເສັ້ນ.

ສິ່ງ​ທີ່​ທ່ານ​ຈະ​ຮຽນ​ຮູ້​:

• ສະແດງຂໍ້ມູນໃນຮູບແບບທີ່ມີໂຄງສ້າງແລະເຂົ້າໃຈໄດ້
• ນອກຈາກນັ້ນ: ຮຽນຮູ້ວິທີການນໍາໃຊ້ອົງປະກອບ canvas ແລະວິທີການແຕ້ມອົງປະກອບກັບມັນ

ມັນເປັນ ທ່ານສາມາດຊອກຫາຂໍ້ມູນປະຊາກອນໂລກ. ພວກມັນຖືກຈັດຮຽງຕາມປີ.

Twitter Heart Animation

ກັບຄືນໄປບ່ອນໃນປີ 2016, Twitter ໄດ້ນໍາສະເຫນີພາບເຄື່ອນໄຫວທີ່ຫນ້າປະຫລາດໃຈນີ້ສໍາລັບ tweets ຂອງມັນ. ໃນປີ 2019, ມັນຍັງຄົງເປັນສ່ວນຫນຶ່ງ, ດັ່ງນັ້ນເປັນຫຍັງຈຶ່ງບໍ່ສ້າງຕົວເອງ?

ສິ່ງ​ທີ່​ທ່ານ​ຈະ​ຮຽນ​ຮູ້​:

• ເຮັດວຽກກັບຄຸນລັກສະນະ CSS keyframes
• ຈັດການ ແລະເຄື່ອນໄຫວອົງປະກອບ HTML
• ສົມທົບ JavaScript, HTML ແລະ CSS

ສາມາດຊອກຫາບ່ອນເກັບມ້ຽນ GitHub ໄດ້

ບໍ່ມີຫຍັງທີ່ແປກປະຫຼາດຢູ່ທີ່ນີ້—ບ່ອນເກັບມ້ຽນ GitHub ແມ່ນພຽງແຕ່ບັນຊີລາຍຊື່ທີ່ສະຫງ່າລາສີເທົ່ານັ້ນ.
ເປົ້າຫມາຍແມ່ນເພື່ອສະແດງ repositories ແລະອະນຸຍາດໃຫ້ຜູ້ໃຊ້ສາມາດກັ່ນຕອງໃຫ້ເຂົາເຈົ້າ. ໃຊ້ GitHub API ຢ່າງເປັນທາງການ ເພື່ອໃຫ້ໄດ້ຮັບ repositories ສໍາລັບຜູ້ໃຊ້ແຕ່ລະຄົນ.

ຫນ້າໂປຣໄຟລ໌ GitHub - github.com/indreklasn

ສິ່ງ​ທີ່​ທ່ານ​ຈະ​ຮຽນ​ຮູ້​:

• ຮັບຂໍ້ມູນຈາກ API
• ສະແດງຂໍ້ມູນຈາກ API
• ກັ່ນຕອງແລະສະແດງຂໍ້ມູນທີ່ກ່ຽວຂ້ອງສໍາລັບແຕ່ລະການຄົ້ນຫາ
• ທາງ​ເລືອກ​: ຖ້າ​ຫາກ​ວ່າ​ທ່ານ​ສໍາ​ລັບ​ການ​ທ້າ​ທາຍ​, ໃຊ້​ API v4, ສ້າງຂຶ້ນໂດຍໃຊ້ GraphQL. ຖ້າທ່ານຕ້ອງການຮຽນຮູ້ GraphQL, ໄປຫາຫນຶ່ງໃນບົດຄວາມທີ່ຜ່ານມາຂອງຂ້ອຍ.

ການສົນທະນາແບບ Reddit

ການສົນທະນາແມ່ນເປັນວິທີທີ່ນິຍົມຂອງການສື່ສານອັນເນື່ອງມາຈາກຄວາມງ່າຍດາຍແລະຄວາມງ່າຍຂອງການນໍາໃຊ້ຂອງເຂົາເຈົ້າ. ແຕ່ສິ່ງທີ່ເຮັດໃຫ້ຫ້ອງສົນທະນາທີ່ທັນສະໄຫມແມ່ນຫຍັງ? WebSockets!

ສິ່ງ​ທີ່​ທ່ານ​ຈະ​ຮຽນ​ຮູ້​:

• ໃຊ້ WebSockets, ການສື່ສານແບບສົດໆ ແລະອັບເດດຂໍ້ມູນ
• ເຮັດວຽກກັບລະດັບການເຂົ້າເຖິງຂອງຜູ້ໃຊ້ (ຕົວຢ່າງ, ເຈົ້າຂອງຊ່ອງສົນທະນາມີບົດບາດ admin, ແລະອື່ນໆຢູ່ໃນຫ້ອງ - user)
• ຂະບວນການແລະການກວດສອບແບບຟອມ - ຈື່, ປ່ອງຢ້ຽມສົນທະນາສໍາລັບການສົ່ງຂໍ້ຄວາມແມ່ນ input
• ສ້າງແລະເຂົ້າຮ່ວມການສົນທະນາທີ່ແຕກຕ່າງກັນ
• ເຮັດວຽກກັບຂໍ້ຄວາມສ່ວນຕົວ. ຜູ້ໃຊ້ສາມາດສົນທະນາກັບຜູ້ໃຊ້ອື່ນເປັນສ່ວນຕົວ. ໂດຍພື້ນຖານແລ້ວ, ທ່ານຈະສ້າງການເຊື່ອມຕໍ່ WebSocket ລະຫວ່າງສອງຜູ້ໃຊ້.

ການນໍາທາງແບບເສັ້ນດ່າງ

ສິ່ງທີ່ເຮັດໃຫ້ການນໍາທາງນີ້ເປັນເອກະລັກແມ່ນວ່າຖັງ popover ຫັນປ່ຽນໃຫ້ເຫມາະສົມກັບເນື້ອຫາ. ມີຄວາມສະຫງ່າງາມຕໍ່ການຫັນປ່ຽນນີ້ເມື່ອປຽບທຽບກັບພຶດຕິກໍາແບບດັ້ງເດີມຂອງການເປີດແລະປິດ popover ໃຫມ່.

ສິ່ງ​ທີ່​ທ່ານ​ຈະ​ຮຽນ​ຮູ້​:

• ລວມພາບເຄື່ອນໄຫວ CSS ກັບການຫັນປ່ຽນ
• ຈືດເນື້ອໃນ ແລະນຳໃຊ້ຊັ້ນຮຽນທີ່ເຄື່ອນໄຫວຢູ່ກັບອົງປະກອບທີ່ເລື່ອນໄດ້

Pacman

ສ້າງ Pacman ສະບັບຂອງທ່ານເອງ. ນີ້ແມ່ນວິທີທີ່ດີທີ່ຈະໄດ້ຮັບຄວາມຄິດກ່ຽວກັບວິທີການພັດທະນາເກມແລະເຂົ້າໃຈພື້ນຖານ. ໃຊ້ກອບ JavaScript, React ຫຼື Vue.

ເຈົ້າຈະຮຽນຮູ້:

• ວິທີການຍ້າຍອົງປະກອບ
• ວິທີການກໍານົດທີ່ຈະກົດປຸ່ມໃດ
• ວິທີການກໍານົດເວລາຂອງການປະທະກັນ
• ທ່ານສາມາດໄປຕື່ມອີກແລະເພີ່ມການຄວບຄຸມການເຄື່ອນໄຫວ ghost

ເຈົ້າຈະພົບເຫັນຕົວຢ່າງຂອງໂຄງການນີ້ ຢູ່ໃນບ່ອນເກັບມ້ຽນ GitHub

ການຄຸ້ມຄອງຜູ້ໃຊ້

ໂຄງການ ຢູ່ໃນບ່ອນເກັບມ້ຽນ GitHub

ການສ້າງຄໍາຮ້ອງສະຫມັກປະເພດ CRUD ສໍາລັບການບໍລິຫານຜູ້ໃຊ້ຈະສອນທ່ານພື້ນຖານຂອງການພັດທະນາ. ນີ້ແມ່ນເປັນປະໂຫຍດໂດຍສະເພາະສໍາລັບນັກພັດທະນາໃຫມ່.

ເຈົ້າຈະຮຽນຮູ້:

• ເສັ້ນທາງແມ່ນຫຍັງ
• ວິທີການຈັດການກັບແບບຟອມການປ້ອນຂໍ້ມູນແລະກວດເບິ່ງສິ່ງທີ່ຜູ້ໃຊ້ໄດ້ເຂົ້າ
• ວິທີການເຮັດວຽກກັບຖານຂໍ້ມູນ - ສ້າງ, ອ່ານ, ປັບປຸງແລະລຶບການກະທໍາ

ການ​ກວດ​ສອບ​ສະ​ພາບ​ອາ​ກາດ​ໃນ​ສະ​ຖານ​ທີ່​ຂອງ​ທ່ານ​

ໂຄງການ ຢູ່ໃນບ່ອນເກັບມ້ຽນ GitHub

ຖ້າທ່ານຕ້ອງການສ້າງແອັບຯ, ເລີ່ມຕົ້ນດ້ວຍແອັບຯສະພາບອາກາດ. ໂຄງການນີ້ສາມາດສໍາເລັດໄດ້ໂດຍໃຊ້ Swift.

ນອກ​ເຫນືອ​ໄປ​ຈາກ​ການ​ໄດ້​ຮັບ​ປະ​ສົບ​ການ​ການ​ສ້າງ​ຄໍາ​ຮ້ອງ​ສະ​ຫມັກ​, ທ່ານ​ຈະ​ໄດ້​ຮຽນ​ຮູ້​:

• ວິທີການເຮັດວຽກກັບ API
• ວິທີການນໍາໃຊ້ສະຖານທີ່ຕັ້ງພູມສາດ
• ເຮັດໃຫ້ແອັບພລິເຄຊັນຂອງທ່ານມີການເຄື່ອນໄຫວຫຼາຍຂຶ້ນໂດຍການເພີ່ມການປ້ອນຂໍ້ຄວາມ. ໃນມັນ, ຜູ້ໃຊ້ຈະສາມາດເຂົ້າໄປໃນສະຖານທີ່ຂອງພວກເຂົາເພື່ອກວດເບິ່ງສະພາບອາກາດໃນສະຖານທີ່ສະເພາະ.

ທ່ານຈະຕ້ອງການ API. ເພື່ອຮັບເອົາຂໍ້ມູນສະພາບອາກາດ, ໃຫ້ໃຊ້ OpenWeather API. ຂໍ້ມູນເພີ່ມເຕີມກ່ຽວກັບ OpenWeather API ທີ່ນີ້.

ປ່ອງຢ້ຽມສົນທະນາ

ປ່ອງຢ້ຽມສົນທະນາຂອງຂ້ອຍຢູ່ໃນການປະຕິບັດ, ເປີດຢູ່ໃນສອງແຖບຂອງຕົວທ່ອງເວັບ

ການສ້າງປ່ອງຢ້ຽມສົນທະນາເປັນວິທີທີ່ສົມບູນແບບເພື່ອເລີ່ມຕົ້ນດ້ວຍຊັອກເກັດ. ທາງເລືອກຂອງ stack ເຕັກໂນໂລຊີແມ່ນຂະຫນາດໃຫຍ່. ສໍາລັບຕົວຢ່າງ, Node.js ແມ່ນສົມບູນແບບ.

ທ່ານຈະຮຽນຮູ້ວິທີການຊັອກເກັດເຮັດວຽກແລະວິທີການປະຕິບັດພວກມັນ. ນີ້ແມ່ນປະໂຫຍດຕົ້ນຕໍຂອງໂຄງການນີ້.

ຖ້າທ່ານເປັນນັກພັດທະນາ Laravel ທີ່ຕ້ອງການເຮັດວຽກກັບຊັອກເກັດ, ອ່ານຂອງຂ້ອຍ ບົດຄວາມ

GitLab CI

ແຫຼ່ງຂໍ້ມູນ

ຖ້າທ່ານໃຫມ່ໃນການເຊື່ອມໂຍງຢ່າງຕໍ່ເນື່ອງ (CI), ຫຼີ້ນກັບ GitLab CI. ຕັ້ງຄ່າສະພາບແວດລ້ອມສອງສາມອັນ ແລະລອງເຮັດການທົດສອບສອງສາມອັນ. ມັນບໍ່ແມ່ນໂຄງການທີ່ຍາກຫຼາຍ, ແຕ່ຂ້ອຍແນ່ໃຈວ່າເຈົ້າຈະຮຽນຮູ້ຫຼາຍຢ່າງຈາກມັນ. ທີມງານພັດທະນາຈໍານວນຫຼາຍກໍາລັງໃຊ້ CI. ການຮູ້ວິທີການນໍາໃຊ້ມັນເປັນປະໂຫຍດ.

ເຈົ້າຈະຮຽນຮູ້:

• GitLab CI ແມ່ນຫຍັງ
• ວິທີການຕັ້ງຄ່າ .gitlab-ci.ymlເຊິ່ງບອກຜູ້ໃຊ້ GitLab ວ່າຈະເຮັດແນວໃດ
• ວິທີການນໍາໃຊ້ກັບສະພາບແວດລ້ອມອື່ນໆ

ການວິເຄາະເວັບໄຊທ໌

ເຮັດເຄື່ອງຂູດທີ່ວິເຄາະ semantics ຂອງເວັບໄຊທ໌ແລະສ້າງການຈັດອັນດັບຂອງພວກເຂົາ. ຕົວຢ່າງ, ທ່ານສາມາດກວດເບິ່ງວ່າບໍ່ມີ tags alt ໃນຮູບພາບ. ຫຼືກວດເບິ່ງວ່າຫນ້າເວັບມີແທັກ meta SEO. ເຄື່ອງຂູດສາມາດຖືກສ້າງຂື້ນໂດຍບໍ່ມີການໂຕ້ຕອບຜູ້ໃຊ້.

ເຈົ້າຈະຮຽນຮູ້:

• ເຄື່ອງຂູດເຮັດວຽກແນວໃດ?
• ວິທີການສ້າງຕົວເລືອກ DOM
• ວິທີການຂຽນ algorithm
• ຖ້າທ່ານບໍ່ຕ້ອງການຢຸດຢູ່ທີ່ນັ້ນ, ສ້າງສ່ວນຕິດຕໍ່ຜູ້ໃຊ້. ນອກນັ້ນທ່ານຍັງສາມາດສ້າງບົດລາຍງານໃນແຕ່ລະເວັບໄຊທ໌ທີ່ທ່ານກວດສອບ.

ການກວດສອບຄວາມຮູ້ສຶກໃນເຄືອຂ່າຍສັງຄົມ

ແຫຼ່ງຂໍ້ມູນ

ການກວດຫາຄວາມຮູ້ສຶກໃນສື່ມວນຊົນສັງຄົມແມ່ນເປັນວິທີທີ່ດີທີ່ຈະແນະນໍາການຮຽນຮູ້ຂອງເຄື່ອງຈັກ.

ທ່ານສາມາດເລີ່ມຕົ້ນໂດຍການວິເຄາະພຽງແຕ່ຫນຶ່ງເຄືອຂ່າຍສັງຄົມ. ທຸກຄົນມັກຈະເລີ່ມຕົ້ນດ້ວຍ Twitter.

ຖ້າທ່ານມີປະສົບການກັບການຮຽນຮູ້ຂອງເຄື່ອງຈັກແລ້ວ, ໃຫ້ລອງເກັບກຳຂໍ້ມູນຈາກເຄືອຂ່າຍສັງຄົມຕ່າງໆ ແລະລວມພວກມັນເຂົ້າກັນ.

ເຈົ້າຈະຮຽນຮູ້:

• ການຮຽນຮູ້ເຄື່ອງຈັກແມ່ນຫຍັງ

Trello clone

Trello clone ຈາກ Indrek Lasn.

ສິ່ງ​ທີ່​ທ່ານ​ຈະ​ໄດ້​ຮຽນ​ຮູ້​:

• ການຈັດຕັ້ງການຮ້ອງຂໍການປຸງແຕ່ງເສັ້ນທາງ (Routing).
• ລາກແລະວາງ.
• ວິທີການສ້າງວັດຖຸໃຫມ່ (ກະດານ, ລາຍການ, ບັດ).
• ກຳລັງປະມວນຜົນ ແລະກວດສອບຂໍ້ມູນການປ້ອນຂໍ້ມູນ.
• ຈາກຝ່າຍລູກຄ້າ: ວິທີການໃຊ້ການເກັບຮັກສາທ້ອງຖິ່ນ, ວິທີການບັນທຶກຂໍ້ມູນໃສ່ບ່ອນເກັບຂໍ້ມູນທ້ອງຖິ່ນ, ວິທີການອ່ານຂໍ້ມູນຈາກການເກັບຮັກສາທ້ອງຖິ່ນ.
• ຈາກຝ່າຍເຊີຟເວີ: ວິທີການໃຊ້ຖານຂໍ້ມູນ, ວິທີການບັນທຶກຂໍ້ມູນໃນຖານຂໍ້ມູນ, ວິທີການອ່ານຂໍ້ມູນຈາກຖານຂໍ້ມູນ.

ນີ້ແມ່ນຕົວຢ່າງຂອງ repository, ເຮັດໃນ React+Redux.

ແຜງຄວບຄຸມ

Github Repository.

ຄໍາຮ້ອງສະຫມັກ CRUD ງ່າຍດາຍ, ເຫມາະສົມສໍາລັບການຮຽນຮູ້ພື້ນຖານ. ມາຮຽນຮູ້:

• ສ້າງຜູ້ໃຊ້, ຈັດການຜູ້ໃຊ້.
• ພົວພັນກັບຖານຂໍ້ມູນ - ສ້າງ, ອ່ານ, ແກ້ໄຂ, ລຶບຜູ້ໃຊ້.
• ກວດສອບການປ້ອນຂໍ້ມູນ ແລະເຮັດວຽກກັບແບບຟອມ.

ຕົວຕິດຕາມ Cryptocurrency (ແອັບຯມືຖືພື້ນເມືອງ)

ຄັງເກັບຂໍ້ມູນ Github.

ທຸກຢ່າງ: Swift, Objective-C, React Native, Java, Kotlin.

ມາສຶກສາ:

• ຄໍາຮ້ອງສະຫມັກພື້ນເມືອງເຮັດວຽກແນວໃດ.
• ວິທີການດຶງຂໍ້ມູນຈາກ API.
• ການຈັດວາງໜ້າເດີມເຮັດວຽກແນວໃດ.
• ວິທີການເຮັດວຽກກັບ simulators ໂທລະສັບມືຖື.

ລອງ API ນີ້. ຖ້າທ່ານພົບສິ່ງທີ່ດີກວ່າ, ຂຽນໃນຄໍາເຫັນ.

ຖ້າທ່ານສົນໃຈ, ນີ້ແມ່ນ ນີ້ແມ່ນການສອນ.

ຕັ້ງຄ່າ webpack config ຂອງທ່ານເອງຕັ້ງແຕ່ເລີ່ມຕົ້ນ

ທາງດ້ານເທກນິກ, ນີ້ບໍ່ແມ່ນແອັບພລິເຄຊັນ, ແຕ່ມັນເປັນວຽກທີ່ມີປະໂຫຍດຫຼາຍທີ່ຈະເຂົ້າໃຈວິທີການເຮັດວຽກຂອງ webpack ຈາກພາຍໃນ. ໃນປັດຈຸບັນມັນຈະບໍ່ເປັນ "ກ່ອງດໍາ", ແຕ່ເປັນເຄື່ອງມືທີ່ເຂົ້າໃຈໄດ້.

ຄວາມຕ້ອງການ:

• ລວບລວມ es7 ຫາ es5 (ພື້ນຖານ).
• ລວບລວມ jsx ເປັນ js - ຫຼື - .vue ກັບ .js (ທ່ານຈະຕ້ອງຮຽນຮູ້ຕົວໂຫລດ)
• ຕັ້ງຄ່າ webpack dev server ແລະ hot module reloading. (vue-cli ແລະ create-react-app ໃຊ້ທັງສອງຢ່າງ)
• ໃຊ້ Heroku, now.sh ຫຼື Github, ຮຽນຮູ້ວິທີນຳໃຊ້ໂຄງການ webpack.
• ຕັ້ງຄ່າ preprocessor ທີ່ທ່ານມັກເພື່ອລວບລວມ css - scss, ຫນ້ອຍ, stylus.
• ຮຽນຮູ້ວິທີການນໍາໃຊ້ຮູບພາບແລະ svgs ກັບ webpack.

ນີ້ແມ່ນຊັບພະຍາກອນທີ່ຫນ້າປະຫລາດໃຈສໍາລັບຜູ້ເລີ່ມຕົ້ນທີ່ສົມບູນ.

ໂຄນ Hackernews

ທຸກໆ Jedi ແມ່ນຕ້ອງການເພື່ອເຮັດໃຫ້ Hackernews ຂອງຕົນເອງ.

ສິ່ງ​ທີ່​ທ່ານ​ຈະ​ໄດ້​ຮຽນ​ຮູ້​ໃນ​ທາງ​:

• ວິທີການພົວພັນກັບ hackernews API.
• ວິທີການສ້າງຄໍາຮ້ອງສະຫມັກຫນ້າດຽວ.
• ວິທີການປະຕິບັດລັກສະນະເຊັ່ນ: ການເບິ່ງຄໍາເຫັນ, ຄວາມຄິດເຫັນສ່ວນບຸກຄົນ, ໂປຼໄຟລ໌.
• ການຈັດຕັ້ງການຮ້ອງຂໍການປຸງແຕ່ງເສັ້ນທາງ (Routing).

Tudushechka

TodoMVC.

ຢ່າງຮຸນແຮງ? Tudushka? ມີຫລາຍພັນຄົນຂອງພວກເຂົາ. ແຕ່ເຊື່ອຂ້ອຍ, ມີເຫດຜົນສໍາລັບຄວາມນິຍົມນີ້.
ແອັບ Tudu ເປັນວິທີທີ່ດີທີ່ຈະເຮັດໃຫ້ແນ່ໃຈວ່າເຈົ້າເຂົ້າໃຈພື້ນຖານ. ພະຍາຍາມຂຽນຄໍາຮ້ອງສະຫມັກຫນຶ່ງໃນ vanilla Javascript ແລະຫນຶ່ງໃນກອບທີ່ທ່ານມັກ.

ຮຽນຮູ້:

• ສ້າງໜ້າວຽກໃໝ່.
• ກວດເບິ່ງວ່າຊ່ອງຂໍ້ມູນຖືກຕື່ມໃສ່.
• ການກັ່ນຕອງວຽກງານ (ສໍາເລັດ, ການເຄື່ອນໄຫວ, ທັງຫມົດ). ໃຊ້ filter и reduce.
• ເຂົ້າໃຈພື້ນຖານຂອງ Javascript.

ບັນຊີລາຍຊື່ລາກແລະວາງຈັດລຽງໄດ້

ຄັງເກັບຂໍ້ມູນ Github.

ເປັນປະໂຫຍດຫຼາຍທີ່ຈະເຂົ້າໃຈ ລາກແລະວາງ api.

ມາຮຽນຮູ້:

• ລາກແລະວາງ API
• ສ້າງ UI ທີ່ອຸດົມສົມບູນ

ໂຄລນ Messenger (ແອັບຕົ້ນສະບັບ)

ທ່ານຈະເຂົ້າໃຈວິທີການທັງຄໍາຮ້ອງສະຫມັກເວັບໄຊຕ໌ແລະຄໍາຮ້ອງສະຫມັກພື້ນເມືອງເຮັດວຽກ, ເຊິ່ງຈະກໍານົດທ່ານອອກຈາກມະຫາຊົນສີຂີ້ເຖົ່າ.

ສິ່ງທີ່ພວກເຮົາຈະສຶກສາ:

• ເຕົ້າຮັບເວັບ (ຂໍ້ຄວາມທັນທີ)
• ຄໍາຮ້ອງສະຫມັກພື້ນເມືອງເຮັດວຽກແນວໃດ.
• ແມ່ແບບເຮັດວຽກແນວໃດໃນແອັບພລິເຄຊັນພື້ນເມືອງ.
• ການ​ຈັດ​ຕັ້ງ​ເສັ້ນ​ທາງ​ການ​ປຸງ​ແຕ່ງ​ຄໍາ​ຮ້ອງ​ສະ​ຫມັກ​ໃນ​ຄໍາ​ຮ້ອງ​ສະ​ຫມັກ​ພື້ນ​ເມືອງ​.

ບັນນາທິການຕົວ ໜັງ ສື

ຈຸດປະສົງຂອງຕົວແກ້ໄຂຂໍ້ຄວາມແມ່ນເພື່ອຫຼຸດຜ່ອນຄວາມພະຍາຍາມຂອງຜູ້ໃຊ້ທີ່ພະຍາຍາມປ່ຽນຮູບແບບຂອງເຂົາເຈົ້າເຂົ້າໄປໃນເຄື່ອງຫມາຍ HTML ທີ່ຖືກຕ້ອງ. ຕົວແກ້ໄຂຂໍ້ຄວາມທີ່ດີຊ່ວຍໃຫ້ຜູ້ໃຊ້ສາມາດຈັດຮູບແບບຂໍ້ຄວາມໃນຮູບແບບຕ່າງໆ.

ໃນບາງຈຸດ, ທຸກຄົນໄດ້ໃຊ້ຕົວແກ້ໄຂຂໍ້ຄວາມ. ສະນັ້ນເປັນຫຍັງຈຶ່ງບໍ່ ສ້າງມັນຕົວທ່ານເອງ?

ໂຄນ Reddit

ເຫດ ແມ່ນການລວບລວມຂ່າວສັງຄົມ, ການຈັດອັນດັບເນື້ອຫາເວັບແລະສະຖານທີ່ສົນທະນາ.

Reddit ໃຊ້ເວລາສ່ວນໃຫຍ່ຂອງຂ້ອຍ, ແຕ່ຂ້ອຍຍັງສືບຕໍ່ hang out ກ່ຽວກັບມັນ. ການສ້າງໂຄນ Reddit ເປັນວິທີທີ່ມີປະສິດທິພາບໃນການຮຽນຮູ້ການຂຽນໂປຼແກຼມ (ໃນຂະນະທີ່ຊອກຫາ Reddit ໃນເວລາດຽວກັນ).

Reddit ໃຫ້ທ່ານມີຄວາມອຸດົມສົມບູນຫຼາຍ API. ຢ່າປະຖິ້ມລັກສະນະຕ່າງໆ ຫຼືເຮັດສິ່ງທີ່ເຮັດຜິດຫວັງ. ໃນໂລກທີ່ແທ້ຈິງກັບລູກຄ້າແລະລູກຄ້າ, ທ່ານບໍ່ສາມາດເຮັດວຽກທີ່ຫນ້າພໍໃຈ, ຫຼືທ່ານຈະສູນເສຍວຽກຂອງທ່ານຢ່າງໄວວາ.

ລູກຄ້າທີ່ສະຫຼາດຈະຮັບຮູ້ທັນທີວ່າວຽກເຮັດບໍ່ດີແລະຈະຊອກຫາຄົນອື່ນ.

Reddit API

ກຳລັງເຜີຍແຜ່ແພັກເກດ NPM ແຫຼ່ງເປີດ

ຖ້າທ່ານຂຽນລະຫັດ Javascript, ໂອກາດທີ່ທ່ານໃຊ້ຕົວຈັດການຊຸດ. ຜູ້ຈັດການຊຸດອະນຸຍາດໃຫ້ທ່ານໃຊ້ລະຫັດທີ່ມີຢູ່ແລ້ວທີ່ຄົນອື່ນຂຽນແລະເຜີຍແຜ່.

ການເຂົ້າໃຈຮອບວຽນການພັດທະນາອັນເຕັມທີ່ຂອງຊຸດຈະໃຫ້ປະສົບການທີ່ດີຫຼາຍ. ມີຫຼາຍສິ່ງທີ່ທ່ານຈໍາເປັນຕ້ອງຮູ້ໃນເວລາເຜີຍແຜ່ລະຫັດ. ທ່ານ​ຈໍາ​ເປັນ​ຕ້ອງ​ໄດ້​ຄິດ​ກ່ຽວ​ກັບ​ຄວາມ​ປອດ​ໄພ​, ການ​ສະ​ບັບ​ຄໍາ​ສັບ​ຕ່າງໆ​, ການ​ຂະ​ຫຍາຍ​ຕົວ​, ການ​ຕັ້ງ​ຊື່​ສົນ​ທິ​ສັນ​ຍາ​ແລະ​ການ​ບໍາ​ລຸງ​ຮັກ​ສາ​.

ຊຸດສາມາດເປັນອັນໃດກໍໄດ້. ຖ້າທ່ານບໍ່ມີຄວາມຄິດ, ສ້າງ Lodash ຂອງທ່ານເອງແລະເຜີຍແຜ່ມັນ.

Lodash: lodash.com

ການມີບາງສິ່ງບາງຢ່າງທີ່ທ່ານໄດ້ເຮັດອອນໄລນ໌ເຮັດໃຫ້ທ່ານ 10% ເຫນືອຄົນອື່ນ. ນີ້ແມ່ນບາງຊັບພະຍາກອນທີ່ເປັນປະໂຫຍດ ກ່ຽວກັບແຫຼ່ງເປີດ ແລະແພັກເກດ.

FreeCodeCamp ຫຼັກສູດ

ຫຼັກສູດ FCC

freeCodecamp ໄດ້ເກັບກໍາຫຼາຍ ຫຼັກສູດການຂຽນໂປຼແກຼມທີ່ສົມບູນແບບ.

freeCodeCamp ເປັນອົງການຈັດຕັ້ງທີ່ບໍ່ຫວັງຜົນກໍາໄລ. ມັນປະກອບດ້ວຍເວທີການຮຽນຮູ້ເວັບໄຊຕ໌ແບບໂຕ້ຕອບ, ເວທີຊຸມຊົນອອນໄລນ໌, ຫ້ອງສົນທະນາ, ສິ່ງພິມຂະຫນາດກາງ, ແລະອົງການຈັດຕັ້ງທ້ອງຖິ່ນທີ່ມີຈຸດປະສົງເພື່ອເຮັດໃຫ້ການຮຽນຮູ້ການພັດທະນາເວັບສາມາດເຂົ້າເຖິງໄດ້ສໍາລັບທຸກຄົນ.

ເຈົ້າຈະມີຄຸນສົມບັດຫຼາຍກວ່າສຳລັບວຽກທຳອິດຂອງເຈົ້າ ຖ້າເຈົ້າຈັດການໃຫ້ຈົບຫຼັກສູດທັງໝົດ.

ສ້າງເຄື່ອງແມ່ຂ່າຍ HTTP ຕັ້ງແຕ່ເລີ່ມຕົ້ນ

ໂປໂຕຄອນ HTTP ແມ່ນໜຶ່ງໃນໂປຣໂຕຄໍຫຼັກທີ່ເນື້ອຫາຜ່ານທາງອິນເຕີເນັດ. ເຊີບເວີ HTTP ຖືກນໍາໃຊ້ເພື່ອຮັບໃຊ້ເນື້ອຫາຄົງທີ່ເຊັ່ນ HTML, CSS, ແລະ JS.

ການສາມາດປະຕິບັດໂປໂຕຄອນ HTTP ຕັ້ງແຕ່ເລີ່ມຕົ້ນຈະຂະຫຍາຍຄວາມຮູ້ຂອງທ່ານກ່ຽວກັບວິທີການພົວພັນກັນ.

ຕົວຢ່າງ, ຖ້າທ່ານໃຊ້ NodeJs, ຫຼັງຈາກນັ້ນທ່ານຮູ້ວ່າ Express ສະຫນອງເຄື່ອງແມ່ຂ່າຍ HTTP.

ສໍາລັບການອ້າງອິງ, ເບິ່ງວ່າເຈົ້າສາມາດ:

• ຕັ້ງຄ່າເຄື່ອງແມ່ຂ່າຍໂດຍບໍ່ຕ້ອງໃຊ້ຫ້ອງສະຫມຸດໃດໆ
• ເຊີບເວີຕ້ອງຮັບໃຊ້ເນື້ອຫາ HTML, CSS ແລະ JS.
• ການປະຕິບັດ router ຈາກ scratch
• ຕິດຕາມການປ່ຽນແປງ ແລະອັບເດດເຊີບເວີ

ຖ້າທ່ານບໍ່ຮູ້ວ່າເປັນຫຍັງ, ໃຊ້ ໄປເລີຍ ແລະພະຍາຍາມສ້າງເຄື່ອງແມ່ຂ່າຍ HTTP Caddy ຈາກ scratch.

ແອັບເດັສທັອບສຳລັບບັນທຶກ

ພວກເຮົາທຸກຄົນຈົດບັນທຶກ, ບໍ່ແມ່ນບໍ?

ມາສ້າງແອັບຯບັນທຶກ. ແອັບພລິເຄຊັນຕ້ອງການບັນທຶກບັນທຶກແລະ synchronize ໃຫ້ເຂົາເຈົ້າກັບຖານຂໍ້ມູນ. ສ້າງແອັບຯພື້ນເມືອງໂດຍໃຊ້ Electron, Swift, ຫຼືສິ່ງໃດກໍ່ຕາມທີ່ທ່ານຕ້ອງການແລະສິ່ງທີ່ເຮັດວຽກສໍາລັບລະບົບຂອງທ່ານ.

ຮູ້ສຶກວ່າບໍ່ເສຍຄ່າເພື່ອສົມທົບການນີ້ກັບສິ່ງທ້າທາຍທໍາອິດ (ຕົວແກ້ໄຂຂໍ້ຄວາມ).

ເປັນໂບນັດ, ລອງຊິ້ງເວີຊັນເດັສທັອບຂອງທ່ານກັບເວີຊັນເວັບ.

ພອດແຄສ (ໂຄນນ່ານຟ້າ)

ໃຜບໍ່ຟັງພອດແຄສ?

ສ້າງຄໍາຮ້ອງສະຫມັກເວັບໄຊຕ໌ທີ່ມີຫນ້າທີ່ດັ່ງຕໍ່ໄປນີ້:

• ສ້າງ​ບັນ​ຊີ
• ຊອກຫາ Podcasts
• ໃຫ້ຄະແນນ ແລະສະໝັກໃຊ້ພອດແຄສ
• ຢຸດ ແລະຫຼິ້ນ, ປ່ຽນຄວາມໄວ, ຟັງຊັນໄປໜ້າ ແລະ ຖອຍຫຼັງເປັນເວລາ 30 ວິນາທີ.

ລອງໃຊ້ iTunes API ເປັນຈຸດເລີ່ມຕົ້ນ. ຖ້າທ່ານຮູ້ຊັບພະຍາກອນອື່ນໆ, ກະລຸນາຂຽນໃນຄໍາເຫັນ.

affiliate.itunes.apple.com/resources/documentation/itunes-store-web-service-search-api

ຈັບ​ພາບ​ຫນ້າ​ຈໍ

ສະບາຍດີ! ຂ້ອຍກຳລັງຖ່າຍໜ້າຈໍຂອງຂ້ອຍດຽວນີ້!

ສ້າງ desktop ຫຼື app ເວັບ​ໄຊ​ຕ​໌​ທີ່​ອະ​ນຸ​ຍາດ​ໃຫ້​ທ່ານ​ເພື່ອ​ເກັບ​ກໍາ​ຫນ້າ​ຈໍ​ຂອງ​ທ່ານ​ແລະ​ບັນ​ທຶກ clip ເປັນ​ .gif

ທີ່ນີ້ ບາງຄໍາແນະນໍາວິທີການບັນລຸນີ້.

ແຫຼ່ງຂໍ້ມູນ

• 5 ໂຄງ​ການ​ຝຶກ​ອົບ​ຮົມ​ທີ່​ກ້າ​ຫານ​ສໍາ​ລັບ​ການ​ພັດ​ທະ​ນາ (Layer​, Squoosh​, ການ​ຄິດ​ໄລ່​, ຕົວ​ກວາດ​ເວັບ​ໄຊ​ທ​໌​, ເຄື່ອງ​ຫຼິ້ນ​ດົນ​ຕີ​)
• 9 ໂຄງການເພື່ອຍົກລະດັບທັກສະ Front-End ຂອງທ່ານ
• ຫົກໜ້າວຽກສຳລັບນັກພັດທະນາ Front-End
• ການປະຕິບັດທີ່ມ່ວນສໍາລັບນັກພັດທະນາ
• 8 ໂຄງການການສຶກສາ
• ບັນຊີລາຍຊື່ອີກໂຄງການທີ່ຈະປະຕິບັດ

ແຫຼ່ງຂໍ້ມູນ: www.habr.com