8 pædagogiske projekter

"En mester laver flere fejl end en nybegynder gør forsøg"

Vi tilbyder 8 projektmuligheder, som du kan lave "for sjov" for at få reel udviklingserfaring.

Projekt 1. Trello klon

Trello klon fra Indrek Lasn.

Hvad vil du lære:

• Organisering af anmodningsbehandlingsruter (Routing).
• Træk og slip.
• Sådan opretter du nye objekter (tavler, lister, kort).
• Behandling og kontrol af inputdata.
• Fra klientsiden: hvordan man bruger lokal lagring, hvordan man gemmer data til lokal lagring, hvordan man læser data fra lokal lagring.
• Fra serversiden: hvordan man bruger databaser, hvordan man gemmer data i databasen, hvordan man læser data fra databasen.

Her er et eksempel på et depot, lavet i React+Redux.

Projekt 2. Admin panel

Github Repository.

En simpel CRUD-applikation, ideel til at lære det grundlæggende. Lad os lære:

• Opret brugere, administrer brugere.
• Interager med databasen - opret, læs, rediger, slet brugere.
• Validering af input og arbejde med formularer.

Projekt 3. Cryptocurrency tracker (native mobilapplikation)

Github-depot.

Alt: Swift, Objective-C, React Native, Java, Kotlin.

Lad os studere:

• Sådan fungerer native applikationer.
• Sådan henter du data fra API'et.
• Sådan fungerer native sidelayouts.
• Sådan arbejder du med mobile simulatorer.

Prøv denne API. Hvis du finder noget bedre, så skriv i kommentarerne.

Hvis du er interesseret, så er den her her er en tutorial.

Projekt 4. Opsæt din egen webpack-konfiguration fra bunden

Teknisk set er dette ikke en applikation, men det er en meget nyttig opgave at forstå, hvordan webpack fungerer indefra. Nu bliver det ikke en "sort boks", men et forståeligt værktøj.

Krav:

• Kompiler es7 til es5 (grundlæggende).
• Kompiler jsx til js - eller - .vue til .js (du bliver nødt til at lære indlæsere)
• Konfigurer webpack-udviklerserver og genindlæsning af hotmodul. (vue-cli og create-react-app bruger begge)
• Brug Heroku, now.sh eller Github, lær hvordan du implementerer webpack-projekter.
• Konfigurer din foretrukne præprocessor til at kompilere css - scss, less, stylus.
• Lær, hvordan du bruger billeder og svgs med webpack.

Dette er en fantastisk ressource for helt nybegyndere.

Projekt 5. Hackernews klon

Hver Jedi er forpligtet til at lave sine egne Hackernews.

Hvad du lærer undervejs:

• Sådan interagerer du med hackernews API.
• Sådan opretter du en enkeltsideapplikation.
• Sådan implementeres funktioner såsom visning af kommentarer, individuelle kommentarer, profiler.
• Organisering af anmodningsbehandlingsruter (Routing).

Projekt 6. Tudushechka

TodoMVC.

Helt seriøst? Tudushka? Der er tusindvis af dem. Men tro mig, der er en grund til denne popularitet.
Tudu-appen er en fantastisk måde at sikre dig, at du forstår det grundlæggende. Prøv at skrive en applikation i vanilla Javascript og en i din yndlingsramme.

Lære:

• Opret nye opgaver.
• Tjek at felterne er udfyldt.
• Filtrer opgaver (afsluttede, aktive, alle). Brug filter и reduce.
• Forstå det grundlæggende i Javascript.

Projekt 7. Sorterbar træk og slip liste

Github-depot.

Meget nyttigt at forstå træk og slip api.

Lad os lære:

• Træk og slip API
• Opret omfattende brugergrænseflader

Projekt 8. Messenger-klon (native applikation)

Du vil forstå, hvordan både webapplikationer og native applikationer fungerer, hvilket vil adskille dig fra den grå masse.

Hvad vi vil studere:

• Web-sockets (instant messages)
• Sådan fungerer native applikationer.
• Sådan fungerer skabeloner i native applikationer.
• Organisering af anmodningsbehandlingsruter i native applikationer.

Dette vil være nok for dig i en måned eller to.

Oversættelsen blev udført med støtte fra virksomheden EDISON softwaresom er fagligt engageret udvikling af applikationer og hjemmesider i PHP for store kunder, samt udvikling af cloud-tjenester og mobilapplikationer i Java.

Kilde: www.habr.com