TypeScript Projekte mit/ohne Anleitung?
Hallo,
habe jetzt 3 Wochen Urlaub und leider nicht all zu viel vor, daher dachte, dass ich meine TypeScript Kenntnisse auch etwas aufbessern könnte. Kennt jemand eine Seite für oder gleich ein konkretes Projekt, welche man angehen könnte?
Gerne auch mit Anleitung, da ich in TypeScript noch nicht allzu belaufen bin.
Thematisch wäre eine (native) App sehr interessant für mich. Nur als Beispiel :)
Google hat mir bisher nur mäßig geholfen
1 Antwort
Ideen, die mir gerade (ungeordnet) einfallen:
- Spiele oder Simulationen mit Atomic / Babylon / Egret / Excalibur / o.ä., Spielideen wären: Breakout, Doodle Jump, Flappy Bird, Pong, ein Quiz, Snake, Space Invaders, Super Mario, Tetris
- einzelne Module, wie Slider, Image Carousels, ein filterbarer Notizzettel, ein Warenkorb
- ein Nutzerverwaltungssystem (überlege dir selbst sinnvolle Funktionen, erweitern kann man in ziemlich viele Richtungen - ob man nun eine Karte in Nutzerprofile mit einbaut, die die Nutzeradresse markieren oder zusätzliche Statistiken mit einer Bibliothek wie d3 generiert)
- ein kleiner Webshop mit Angular und React, das Nutzerverwaltungssystem könntest du zu einem Produktverwaltungssystem umgestalten, zusätzliche Features wie eine Anzeige ähnlicher Produkte wäre denkbar oder Rating & Review-Möglichkeiten
- eine Webseite für ein fiktives Hotel, bei dem Kunden Zimmer buchen können
- ein Reservierungssystem (für ein Restaurant / ein Kino / ein Theater / ...)
- ein Webchat, der möglicherweise auch eine Videoübertragung via Webcam ermöglicht
- ein einfacher Experience Editor (Drag & Drop-Ansicht) für ein einfaches CMS (d.h. du überlegst dir typische Komponenten, mit denen ein Nutzer eine einfache Webseite zusammenbauen könnte und entwickelst dazu einen Builder)
- ein Wochenplaner, bei dem der Nutzer Termine via Drag & Drop hin- und herschieben kann
- ein primitves Analytics Board: Nutzereignisse werden auf einer Webseite getrackt und in Form von Diagrammen im Board angezeigt
- eine visuelle Darstellung einer AVL-Baumstruktur, bei der in Einzelschritten Werte hinzugefügt und daraufhin Rotationen vorgenommen werden (durch die Schritte kann man via horizontalen Pfeiltasten navigieren)
In vielen Fällen kannst du direkt Frameworks wie Angular, Vue, React, u.ä. mit hineinnehmen. Für einen Einstieg solltest du in die Getting Started-Sektionen der offiziellen Dokumentationen schauen, denn dort finden sich meist schon kleine praktische Beispiele. Ansonsten kannst du via Google unter Suchbegriffen wie angular start tutorial einige Blogartikel finden, die z.T. anhand kleiner Projekte in das jeweilige Framework einführen.
Beispiele:
- MDN: To-Do-Liste mit React
- MDN: To-Do-Liste mit Angular
- DevProjects: Angular
- Dave Ceddia: React Getting Started Tutorial zu Minianwendungen à la Hello World, Turn Lights on/off
Auf YouTube wirst du, was Anleitungen geht, ganz sicher ebenfalls fündig. Zwei Kanäle in diese Richtung wären freeCodeCamp oder der von Wes Bos.
Ich würde allerdings empfehlen, eher nur solche Anleitungen mit Minitutorial zu durchlaufen und anschließend zu versuchen, mehr selbstständig zu entwickeln. Schritt-für-Schritt-Tutorials gehen zu oft in die Richtung: Frag nicht, tipp ab.
Bezüglich mobiler Apps wäre React Native ein passendes Werkzeug. Die obigen Vorschläge lassen sich auch im Kontext mobiler Apps abbilden. Das Setup für TypeScript wird hier erklärt und ansonsten schon wie oben erwähnt: Die offizielle Dokumentation sollte die erste Anlaufstelle sein. In diesem Fall gibt es in dieser immer wieder interaktive Beispiele und auf GitHub eine Sammlung an Demoprojekten.
Bezüglich TypeScript generell: Sofern du mit den Grundlagen noch nicht vertraut bist, starte damit, statt dich in Projekte zu stürzen, die dich womöglich dann auch überfordern. Grundlagenkenntnisse in HTML, CSS und JavaScript würde ich an dieser Stelle ebenfalls schon voraussetzen.