8 učinjeničkih projekata

„Majstor čini više grešaka nego početnik - pokušaja“

Nudimo 8 varijanti projekata koje možete realizirati „iz zabave“ kako biste stekli stvarno iskustvo razvoja.

Projekt 1. Klon Trello

Klon Trello od Indreka Lasna.

Što ćete ovladati:

• Organizacija ruta obrade zahtjeva (Routing).
• Povuci i ispusti.
• Kako stvarati nove objekte (table, liste, kartice).
• Obrada i provjera ulaznih podataka.
• S strane klijenta: kako koristiti lokalnu pohranu, kako spremati podatke u lokalnu pohranu, kako čitati podatke iz lokalne pohrane.
• S strane poslužitelja: kako koristiti baze podataka, kako spremati podatke u bazi, kako čitati podatke iz baze.

Evo primjer repozitorija, napravljenog na React+Redux.

Projekt 2. Admin panel

Github Repozitorij.

Jednostavna CRUD aplikacija, savršena za učenje osnova. Naučit ćemo:

• Kako kreirati korisnike, upravljati korisnicima.
• Interakcija s bazom podataka – stvaranje, čitanje, uređivanje, brisanje korisnika.
• Provjera unosa i rad s obrascima.

Projekt 3. Kriptovaluta tracker (nativna mobilna aplikacija)

Github repozitorij.

Na bilo kojem: Swift, Objective-C, React Native, Java, Kotlin.

Naučit ćemo:

• Kako rade nativne aplikacije.
• Kako izvući podatke iz API-a.
• Kako funkcioniraju nativni dizajni stranica.
• Kako raditi s mobilnim simulatorima.

Isprobajte ovo API. Ako pronađete bolje – javite u komentarima.

Ako vas zanima, evo ovog vodiča.

Projekt 4. Postavite vlastitu webpack konfiguraciju od nule

Tehnički, ovo nije aplikacija, ali je vrlo korisna zadaća za razumijevanje kako webpack radi iznutra. Sada to više neće biti „crna kutija“, već razumljiv alat.

Zahtjevi:

• Prevesti es7 u es5 (osnove).
• Prevesti jsx u js – ili – .vue u .js (morat ćete naučiti drajvere)
• Postaviti webpack dev server i hot module reloading. (vue-cli i create-react-app koriste oboje)
• Koristiti Heroku, now.sh ili Github, naučiti kako postaviti webpack projekte.
• Postaviti svoj omiljeni preprocessor za kompajliranje css – scss, less, stylus.
• Naučiti kako koristiti slike i svgs s webpack.

Ovo je sjajan resurs za potpune početnike.

Projekt 5. Klon Hackernews

Svaki Jedi treba stvoriti svoj vlastiti Hackernews.

Što ćete naučiti usput:

• Kako komunicirati s hackernews API-jem.
• Kako stvoriti jedinstvenu aplikaciju.
• Kako implementirati značajke poput pregleda komentara, pojedinačnih komentara, profila.
• Organizacija ruta obrade zahtjeva (Routing).

Projekt 6. Todočka

TodoMVC.

Ozbiljno? To-do lista? Ima ih na tisuće. No vjerujte, postoji razlog za takvu popularnost.
To-do aplikacija je odličan način da se uvjerite da razumijete osnove. Pokušajte napraviti jednu aplikaciju u čistom Javascriptu i jednu u svom omiljenom okviru.

Naučite:

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

Projekt 7. Sortirana drag and drop lista

Github repozitorij.

Vrlo korisno za razumijevanje drag and drop API.

Naučit ćemo:

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

Projekt 8. Klon messenger aplikacije (nativna aplikacija)

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

Što ćemo učiti:

• Web soketi (trenutačne poruke)
• Kako rade nativne aplikacije.
• Kako rade predlošci u nativnim aplikacijama.
• Organizacija ruta obrade zahtjeva u nativnim aplikacijama.

To će vam biti dovoljno za mjesec-dva.

Prijevod je rađen uz podršku tvrtke EDISON Software, koji se profesionalno bavi razvojem aplikacija i web stranica u PHP-u za velike naručitelje, kao i razvojem cloud servisa i mobilnih aplikacija u Javi.

Izvor: habr.com