8 mga proyektong pang-edukasyon

"Mas maraming pagkakamali ang isang master kaysa sa pagtatangka ng isang baguhan"

Nag-aalok kami ng 8 mga pagpipilian sa proyekto na maaari mong gawin "para sa kasiyahan" upang makakuha ng tunay na karanasan sa pag-unlad.

Project 1. Trello clone

8 mga proyektong pang-edukasyon

Trello clone mula sa Indrek Lasn.

Ano ang matututuhan mo:

  • Organisasyon ng mga ruta sa pagpoproseso ng kahilingan (Routing).
  • I-drag at i-drop.
  • Paano lumikha ng mga bagong bagay (mga board, listahan, card).
  • Pagproseso at pagsuri ng data ng input.
  • Mula sa panig ng kliyente: kung paano gamitin ang lokal na imbakan, kung paano i-save ang data sa lokal na imbakan, kung paano magbasa ng data mula sa lokal na imbakan.
  • Mula sa gilid ng server: kung paano gamitin ang mga database, kung paano i-save ang data sa database, kung paano basahin ang data mula sa database.

Narito ang isang halimbawa ng isang repositoryo, ginawa sa React+Redux.

Proyekto 2. Admin panel

8 mga proyektong pang-edukasyon
Github Repository.

Isang simpleng CRUD application, perpekto para sa pag-aaral ng mga pangunahing kaalaman. Matuto tayo:

  • Lumikha ng mga gumagamit, pamahalaan ang mga gumagamit.
  • Makipag-ugnayan sa database - lumikha, magbasa, mag-edit, magtanggal ng mga user.
  • Pagpapatunay ng input at pagtatrabaho sa mga form.

Project 3. Cryptocurrency tracker (katutubong mobile application)

8 mga proyektong pang-edukasyon
Github repository.

Kahit ano: Swift, Objective-C, React Native, Java, Kotlin.

Pag-aralan natin:

  • Paano gumagana ang mga native na application.
  • Paano kunin ang data mula sa API.
  • Paano gumagana ang mga layout ng native page.
  • Paano magtrabaho sa mga mobile simulator.

Subukan ang API na ito. Kung nakakita ka ng mas mahusay, sumulat sa mga komento.

Kung interesado ka, eto na narito ang isang tutorial.

Proyekto 4. I-set up ang iyong sariling webpack config mula sa simula

8 mga proyektong pang-edukasyon
Sa teknikal, hindi ito isang application, ngunit ito ay isang napaka-kapaki-pakinabang na gawain upang maunawaan kung paano gumagana ang webpack mula sa loob. Ngayon hindi ito magiging isang "itim na kahon", ngunit isang naiintindihan na tool.

Mga Kinakailangan:

  • I-compile ang es7 hanggang es5 (mga pangunahing kaalaman).
  • I-compile ang jsx sa js - o - .vue sa .js (kailangan mong matutunan ang mga loader)
  • I-set up ang webpack dev server at mainit na pag-reload ng module. (parehong ginagamit ng vue-cli at create-react-app)
  • Gamitin ang Heroku, now.sh o Github, alamin kung paano mag-deploy ng mga proyekto sa webpack.
  • I-set up ang iyong paboritong preprocessor para mag-compile ng css - scss, less, stylus.
  • Matutunan kung paano gumamit ng mga larawan at svg gamit ang webpack.

Ito ay isang kamangha-manghang mapagkukunan para sa kumpletong mga nagsisimula.

Project 5. Hackernews clone

8 mga proyektong pang-edukasyon
Ang bawat Jedi ay kinakailangang gumawa ng kanyang sariling Hackernews.

Ano ang matututunan mo sa daan:

  • Paano makipag-ugnayan sa hackernews API.
  • Paano lumikha ng isang solong pahina ng application.
  • Paano ipatupad ang mga tampok tulad ng pagtingin sa mga komento, mga indibidwal na komento, mga profile.
  • Organisasyon ng mga ruta sa pagpoproseso ng kahilingan (Routing).

Proyekto 6. Tudushechka

8 mga proyektong pang-edukasyon
TodoMVC.

Seryoso? Tudushka? Mayroong libu-libo sa kanila. Ngunit maniwala ka sa akin, may dahilan para sa kasikatan na ito.
Ang Tudu app ay isang mahusay na paraan upang matiyak na nauunawaan mo ang mga pangunahing kaalaman. Subukang magsulat ng isang application sa vanilla Javascript at isa sa iyong paboritong framework.

Matuto:

  • Lumikha ng mga bagong gawain.
  • Suriin na ang mga patlang ay napunan.
  • I-filter ang mga gawain (nakumpleto, aktibo, lahat). Gamitin filter ΠΈ reduce.
  • Unawain ang mga pangunahing kaalaman ng Javascript.

Project 7. Sortable drag and drop list

8 mga proyektong pang-edukasyon
Github repository.

Malaking tulong para maintindihan i-drag at i-drop ang api.

Matuto tayo:

  • I-drag at i-drop ang API
  • Gumawa ng mga rich UI

Project 8. Messenger clone (native application)

8 mga proyektong pang-edukasyon
Mauunawaan mo kung paano gumagana ang parehong mga web application at native na application, na maghihiwalay sa iyo mula sa gray na masa.

Ang pag-aaralan natin:

  • Mga web socket (mga instant na mensahe)
  • Paano gumagana ang mga native na application.
  • Paano gumagana ang mga template sa mga native na application.
  • Pag-aayos ng mga ruta sa pagpoproseso ng kahilingan sa mga native na application.

Ito ay magiging sapat para sa iyo para sa isang buwan o dalawa.

Isinagawa ang pagsasalin sa suporta ng kumpanya EDISON Softwarena propesyonal na nakatuon pagbuo ng mga application at website sa PHP para sa malalaking customer, pati na rin pagbuo ng mga serbisyo sa cloud at mga mobile application sa Java.

Pinagmulan: www.habr.com

Magdagdag ng komento