8 Lernprojekte

„Ein Meister macht mehr Fehler als ein Anfänger – Versuche“

Wir bieten 8 Projektideen an, die man „zum Spaß“ umsetzen kann, um echte Entwicklungserfahrung zu sammeln.

Projekt 1. Klon von Trello

Trello-Klon von Indrek Lasn.

Was Sie lernen werden:

• Organisation der Anfrageverarbeitung (Routing).
• Drag and Drop.
• Wie man neue Objekte (Boards, Listen, Karten) erstellt.
• Verarbeitung und Validierung von Eingabedaten.
• Auf der Client-Seite: Wie man den lokalen Speicher verwendet, wie man Daten im lokalen Speicher speichert, wie man Daten aus dem lokalen Speicher liest.
• Auf der Server-Seite: Wie man Datenbanken verwendet, wie man Daten in der Datenbank speichert, wie man Daten aus der Datenbank liest.

Hier ist ein Beispiel-Repository, erstellt mit React+Redux.

Projekt 2. Admin-Panel

Github Repository.

Ein einfaches CRUD-App, perfekt für das Erlernen der Grundlagen. Wir werden lernen:

• Benutzer zu erstellen, Benutzer zu verwalten.
• Interaktion mit der Datenbank — Benutzer erstellen, lesen, bearbeiten, löschen.
• Eingabevalidierung und Arbeiten mit Formularen.

Projekt 3. Kryptowährungs-Tracker (nativ mobile Anwendung)

Github-Repository.

In beliebigen Sprachen: Swift, Objective-C, React Native, Java, Kotlin.

Lernen wir:

• Wie native Anwendungen funktionieren.
• Wie man Daten aus einer API abruft.
• Wie native Seitenlayouts funktionieren.
• Wie man mit mobilen Emulatoren arbeitet.

Probieren Sie diese API. Finden Sie eine bessere — schreiben Sie in die Kommentare.

Falls es Sie interessiert, hier ist ein Tutorial.

Projekt 4. Eigene Webpack-Konfiguration von Grund auf einrichten

Technisch gesehen ist dies keine Anwendung, sondern eine sehr nützliche Aufgabe, um zu verstehen, wie Webpack im Inneren funktioniert. Jetzt wird es kein „schwarzer Kasten“ mehr sein, sondern ein verständliches Werkzeug.

Anforderungen:

• ES7 in ES5 kompilieren (Grundlagen).
• JSX in JS kompilieren — oder - .vue in .js (Sie müssen Loader lernen)
• Webpack Dev Server und Hot Module Reloading einrichten. (vue-cli und create-react-app verwenden beide)
• Heroku, now.sh oder Github verwenden, lernen, wie man Webpack-Projekte bereitstellt.
• Ihren bevorzugten Preprocessor einrichten, um CSS zu kompilieren — SCSS, Less, Stylus.
• Lernen, wie man Bilder und SVGs mit Webpack verwendet.

Hier ist eine großartige Plattform für absolute Anfänger.

Projekt 5. Klon von Hackernews

Jeder Jedi sollte seinen eigenen Hackernews machen.

Was Sie auf dem Weg lernen werden:

• Wie man mit der Hackernews-API interagiert.
• Wie man eine Single-Page-Anwendung erstellt.
• Wie man Funktionen wie das Ansehen von Kommentaren, einzelnen Kommentaren, Profilen umsetzt.
• Organisation der Anfrageverarbeitung (Routing).

Projekt 6. Todo-App

TodoMVC.

Wirklich? Eine To-Do-Anwendung? Davon gibt es Tausende. Aber glauben Sie mir, es gibt einen Grund für diese Popularität.
Eine To-Do-App ist eine hervorragende Möglichkeit, um sicherzustellen, dass Sie die Grundlagen verstehen. Versuchen Sie, eine Anwendung in reinem Javascript und eine in Ihrem bevorzugten Framework zu schreiben.

Lernen Sie:

• Neue Aufgaben zu erstellen.
• Die Ausfüllung der Felder zu überprüfen.
• Aufgaben zu filtern (abgeschlossen, aktiv, alle). Verwenden Sie filter und reduce.
• Die Grundlagen von Javascript zu verstehen.

Projekt 7. Sortierbare Drag-and-Drop-Liste

Github-Repository.

Sehr hilfreich, um zu verstehen Drag-and-Drop-API.

Lernen wir:

• Drag-and-Drop-API
• Rich UIs zu erstellen

Projekt 8. Klon eines Messengers (native Anwendung)

Sie werden verstehen, wie sowohl Webanwendungen als auch native Anwendungen funktionieren, was Sie von der Masse abhebt.

Was wir lernen werden:

• Websockets (Echtzeit-Nachrichten)
• Wie native Anwendungen funktionieren.
• Wie Vorlagen in nativen Anwendungen funktionieren.
• Die Organisation von Routen zur Verarbeitung von Anfragen in nativen Anwendungen.

Das sollte für ein bis zwei Monate ausreichen.

Die Übersetzung wurde mit Unterstützung von EDISON Software, die professionell Anwendungen und Websites in PHP für große Auftraggeber sowie Cloud-Services und mobile Anwendungen in Java entwickelt.

Quelle: habr.com