8 progetti didattici

«Un maestro commette più errori di un principiante — tentativi»

Ti proponiamo 8 varianti di progetti che puoi realizzare «per divertirti», per acquisire esperienza pratica nello sviluppo.

Progetto 1. Clone di Trello

Clone di Trello di Indrek Lasn.

Cosa imparerai:

• Organizzazione dei percorsi di gestione delle richieste (Routing).
• Drag and drop.
• Come creare nuovi oggetti (bacheche, liste, schede).
• Gestione e verifica dei dati in ingresso.
• Dal lato client: come utilizzare lo storage locale, come salvare dati nello storage locale, come leggere dati dallo storage locale.
• Dal lato server: come utilizzare i database, come salvare dati nel database, come leggere dati dal database.

Ecco un esempio di repository, realizzato con React+Redux.

Progetto 2. Pannello di amministrazione

Github Repository.

Una semplice applicazione CRUD, perfetta per studiare le basi. Impareremo:

• Creare utenti, gestire gli utenti.
• Interagire con il database — creare, leggere, modificare, eliminare utenti.
• Verifica dell'input e gestione dei moduli.

Progetto 3. Tracker di criptovalute (app mobile nativa)

Github repository.

In qualsiasi linguaggio: Swift, Objective-C, React Native, Java, Kotlin.

Esploriamo:

• Come funzionano le applicazioni native.
• Come estrarre dati da un'API.
• Come funzionano i layout nativi delle pagine.
• Come lavorare con simulatori mobili.

Prova questa API. Se trovi qualcosa di meglio, scrivilo nei commenti.

Se ti interessa, ecco un tutorial qui.

Progetto 4. Configurare un proprio config webpack da zero

Tecnicamente, non è un'app, ma è un compito molto utile per capire come funziona webpack internamente. Non sarà più una 'scatola nera', ma uno strumento chiaro.

Requisiti:

• Compilare es7 in es5 (fondamentali).
• Compilare jsx in js - oppure - .vue in .js (dovrai imparare i loader)
• Configurare webpack dev server e hot module reloading. (vue-cli e create-react-app utilizzano entrambi)
• Utilizzare Heroku, now.sh o Github, imparare a distribuire progetti webpack.
• Configurare il tuo preprocessore preferito per compilare css - scss, less, stylus.
• Studiare come utilizzare immagini e svg con webpack.

Qui c'è una risorsa straordinaria per i principianti.

Progetto 5. Clone di Hackernews

Ogni jedi deve creare il proprio Hackernews.

Cosa apprenderai lungo il cammino:

• Come interagire con l'API di hackernews.
• Come creare un'applicazione a pagina singola.
• Come implementare funzionalità come la visualizzazione di commenti, commenti singoli e profili.
• Organizzazione dei percorsi di gestione delle richieste (Routing).

Progetto 6. Todo.

TodoMVC.

Davvero? Un altro Todo? Ce ne sono a migliaia. Ma credetemi, c'è una ragione per questa popolarità.
Un'app Todo è un ottimo modo per assicurarti di capire le basi. Prova a scrivere un'applicazione in JavaScript puro e una nel tuo framework preferito.

Imparerai a:

• Creare nuove attività.
• Controllare la compilazione dei campi.
• Filtrare le attività (completate, attive, tutte). Usa filter e reduce.
• Comprendere le basi di JavaScript.

Progetto 7. Lista ordinabile drag and drop

Github repository.

Molto utile per comprendere drag and drop API.

Impareremo a:

• Drag and drop API
• Creare interfacce utente ricche

Progetto 8. Clone di un messanger (app nativa)

Capirete come funzionano le applicazioni web e quelle native, distinguendovi dalla massa.

Cosa impareremo:

• Web sockets (messaggi istantanei)
• Come funzionano le applicazioni native.
• Come funzionano i template nelle applicazioni native.
• Organizzazione delle rotte per la gestione delle richieste nelle applicazioni native.

Questo dovrebbe bastare per un mese o due.

La traduzione è stata effettuata con il supporto della società EDISON Software, che si occupa professionalmente di sviluppo di applicazioni e siti web in PHP. per grandi clienti, nonché sviluppo di servizi cloud e applicazioni mobili in Java.

Fonte: habr.com