8 učnih projektov

«Mojster naredi več napak kot novinec — poizkusov»

Ponujamo 8 različic projektov, ki jih lahko naredite »zabavno«, da pridobite resnične izkušnje pri razvoju.

Projekt 1. Klon Trello

Klon Trello z Indrekom Lasnom.

Kaj se boste naučili:

• Organizacija poti za obdelavo zahtev (Routing).
• Povleci in spusti.
• Kako ustvarjati nove objekte (deske, seznami, kartice).
• Obdelava in preverjanje vhodnih podatkov.
• S strani odjemalca: kako uporabljati lokalno shranjevanje, kako shranjevati podatke v lokalnem shranjevanju, kako brati podatke iz lokalnega shranjevanja.
• S strani strežnika: kako uporabljati baze podatkov, kako shranjevati podatke v bazi, kako brati podatke iz baze.

Tukaj je primer repozitorija, narejenega z React+Redux.

Projekt 2. Upravniški panel

Github Repozitorij.

Preprosta CRUD aplikacija, ki je popolna za učenje osnov. Naučili se bomo:

• Ustvariti uporabnike, upravljati uporabnike.
• Interakcija z bazo podatkov — ustvarjanje, branje, urejanje, brisanje uporabnikov.
• Preverjanje vnosa in delo s formularji.

Projekt 3. Sledilnik kriptovalut (nativna mobilna aplikacija)

Github repozitorij.

Na čem koli: Swift, Objective-C, React Native, Java, Kotlin.

Naučili se bomo:

• Kako delujejo nativne aplikacije.
• Kako pridobiti podatke iz API-ja.
• Kako delujejo nativne postavitve strani.
• Kako delati z mobilnimi simulatorji.

Poskusite ta API. Če najdete boljši — pišite v komentarjih.

Če vas zanima, tukaj je tukaj je vodič.

Projekt 4. Nastaviti lastno webpack konfiguracijo od nič

Tehnično, to ni aplikacija, a je zelo koristna naloga, da razumete, kako webpack deluje od znotraj. Zdaj to ne bo več 'črna škatla', ampak razumljivo orodje.

Zahteve:

• Kompilirati es7 v es5 (osnove).
• Kompilirati jsx v js — ali — .vue v .js (bodo morali naučiti nalagače)
• Nastaviti webpack dev server in hot module reloading. (vue-cli in create-react-app uporabljata oba)
• Uporabiti Heroku, now.sh ali Github, naučiti se deployati webpack projekte.
• Nastaviti svoj najljubši predprocesor, da kompilira css — scss, less, stylus.
• Naučiti se, kako uporabljati slike in svgs z webpack.

Tukaj je odličen vir za popolne novince.

Projekt 5. Klon Hackernews

Vsak Jedi mora narediti svoj lastni Hackernews.

Kaj se boste naučili na poti:

• Kako komunicirati z hackernews API.
• Kako ustvariti enostransko aplikacijo.
• Kako implementirati funkcionalnosti kao što su pregled komentara, pojedinačnih komentara, profila.
• Organizacija poti za obdelavo zahtev (Routing).

Projekt 6. To-Dočka

TodoMVC.

Stvarno? To-dočka? Ima ih na tisuće. No, povjerujte, postoji razlog za tu popularnost.
To-do aplikacija je odličan način da se osigurate da razumijete osnove. Pokušajte napisati jednu aplikaciju na čistom Javascriptu i jednu na svom omiljenom frameworku.

Naučite:

• Kreirati nove zadatke.
• Provjeravati popunjenost polja.
• Filtrirati zadatke (završeni, aktivni, svi). Koristite filter in reduce.
• Razumjeti osnove Javascripta.

Projekt 7. Sortabilna drag and drop lista

Github repozitorij.

Vrlo korisno za razumijevanje drag and drop api.

Naučimo:

• Drag and drop API
• Kreirati bogate korisničke sučelja

Projekt 8. Klon messengera (nativna aplikacija)

Razumjet ćete kako rade web aplikacije i nativne aplikacije, što će vas istaknuti iz sive mase.

Što ćemo proučiti:

• Web sockets (trenutne poruke)
• Kako delujejo nativne aplikacije.
• Kako rade predlošci u nativnim aplikacijama.
• Organizacija ruta za obradu zahtjeva u nativnim aplikacijama.

Ovo će vam biti dovoljno za mjesec ili dva.

Prevod je izvršen uz podršku kompanije EDISON Software, koja se profesionalno bavi razvojem aplikacija i web stranica na PHP-u za velike klijente, kao i razvojem cloud servisa i mobilnih aplikacija na Javi..

Izvor: habr.com