8 læringsprojekter

«En mester laver flere fejl end en nybegynder - forsøg»

Vi tilbyder 8 projektmuligheder, som kan laves «for sjov», for at få reelt udviklingserfaring.

Projekt 1. Klon af Trello

Trello-klon af Indrek Lasn.

Hvad du vil lære:

• Organisering af forespørgselshåndteringsruter (Routing).
• Drag and drop.
• Hvordan man opretter nye objekter (tavler, lister, kort).
• Håndtering og validering af inddata.
• På klientsiden: hvordan man bruger lokal opbevaring, hvordan man gemmer data i lokal opbevaring, hvordan man læser data fra lokal opbevaring.
• På serversiden: hvordan man bruger databaser, hvordan man gemmer data i en database, hvordan man læser data fra en database.

Her er et eksempel på et repository, lavet med React+Redux.

Projekt 2. Admin Panel

Github Repository.

Et simpelt CRUD-program, perfekt til at lære det grundlæggende. Vi vil lære:

• Oprette brugere, administrere brugere.
• Interagere med databasen - oprette, læse, redigere, slette brugere.
• Validering af inddata og arbejde med formularer.

Projekt 3. Kryptovaluta Tracker (nativ mobilapplikation)

Github repository.

I hvilket som helst sprog: Swift, Objective-C, React Native, Java, Kotlin.

Vi studerer:

• Hvordan native apps fungerer.
• Hvordan man henter data fra API.
• Hvordan native layouts fungerer.
• Hvordan man arbejder med mobil simulatorer.

Prøv dette API. Finder du et bedre - skriv i kommentarerne.

Hvis du er interesseret, her er en tutorial.

Projekt 4. Sætte din egen webpack konfiguration fra bunden

Teknisk set er dette ikke en applikation, men en meget nyttig opgave for at forstå, hvordan webpack fungerer indeni. Nu vil det ikke længere være en «sort boks», men et forståeligt værktøj.

Krav:

• Kompilere es7 til es5 (grundlæggende).
• Kompilere jsx til js  — eller  -  .vue til .js (du bliver nødt til at lære om loaders)
• Konfigurere webpack dev server og hot module reloading. (vue-cli og create-react-app bruger begge)
• Brug Heroku, now.sh eller Github, lær at implementere webpack projekter.
• Konfigurere din favorit preprocessor til at kompilere css  —  scss, less, stylus.
• Lær at bruge billeder og svgs med webpack.

Her er en fantastisk ressource for totale nybegyndere.

Projekt 5. Klon af Hackernews

Hver Jedi skal lave sin egen Hackernews.

Hvad du vil lære undervejs:

• Hvordan man interagerer med hackernews API.
• Hvordan man laver en enkeltstående applikation.
• Hvordan man implementerer funktioner som at se kommentarer, enkelte kommentarer, profiler.
• Organisering af forespørgselshåndteringsruter (Routing).

Projekt 6. To-do-liste

TodoMVC.

Seriøst? To-do? Der findes tusindvis af dem. Men tro mig, der er en grund til deres popularitet.
En to-do-applikation er en fantastisk måde at sikre, at du forstår det grundlæggende. Prøv at skrive én applikation i ren Javascript og én i dit foretrukne framework.

Lær at:

• Oprette nye opgaver.
• Tjekke udfyldningen af felterne.
• Filtrere opgaver (komplet, aktiv, alle). Brug filter og reduce.
• Forstå det grundlæggende i Javascript.

Projekt 7. Sorterbar drag and drop liste

Github repository.

Meget nyttigt for at forstå drag and drop API.

Lad os lære:

• Drag and drop API
• Oprette rige brugergrænseflader

Projekt 8. Klon af messenger (native applikation)

Du vil forstå, hvordan både webapplikationer og native applikationer fungerer, hvilket vil skille dig ud fra mængden.

Hvad vil vi lære:

• Web sockets (øjeblikkelige beskeder)
• Hvordan native apps fungerer.
• Hvordan skabeloner fungerer i native applikationer.
• Organisering af ruter til behandling af anmodninger i native applikationer.

Det skal være nok til en måned eller to.

Oversættelsen er udført med støtte fra EDISON Software, som professionelt beskæftiger sig med udvikling af applikationer og websteder i PHP for store kunder, såvel som udvikling af cloud-tjenester og mobile applikationer i Java..

Kilde: habr.com