Ich habe mich bei einer Firma in Dresden, als React Entwickler, beworben. Um meine Flexibilität und Adaption von Neuem zu testen soll ich eine ToDo App in Vue.js entwickeln. In diesem Artikel beschreibe ich mein Vorgehen, wie ich die App plane.
Die Aufgabe
Die Aufgabe ist eine To-Do-App (Kurzbeschreibung, Fälligkeitsdatum, Unerledigt /Erledigt) mit ganz einfacher Funktionalität (Task hinzufügen / editieren / löschen). Die Umsetzung soll als Progressive Web App (PWA) mit dem JS-Framework Vue.Js und Material Design entwickelt werden. Die PWA soll sowohl auf einem Desktop als auch auf einem Smartphone bedienbar sein. (Responsive). Dabei soll so wenig wie möglich eigener CSS-Code geschrieben werden. Optische Vorgaben gibt es keine, da kannst du dich frei entfalten. Der Fokus liegt aber nicht auf dem Design, sondern auf der technischen Umsetzung. Bitte lege mind. einen Test an. Die Anwendung soll zusätzlich um 2 PWA-Features erweitert werden:
- Die Daten sollten im Local Storage des Browsers gespeichert werden.
- Wenn das Fälligkeitsdatum erreicht ist, sollte eine Push-Notification gesendet werden.
Frameworks und Beispiele finden
Da ich geringe bis keine Erfahrung in Vue.js habe, muss ich erstmal ein Tutorial bzw. Beispiel-Code finden. Auf der offiziellen Dokumentation bin ich fündig geworden, eine ToDo App mit local Storage. Code Beispiel
Als nächsten Schritt habe ich rausgesucht wie man eine PWA in Vue.js baut, dazu werde ich das CLI von NPM benutzen, mit der man eine Beispiel-PWA generieren kann. NPM CLI
Jetzt fehlt noch das Material Design, ich habe mich entschieden ein NPM Paket zu verwenden, sprich im Internet nach „NPM Material Design Vue.js" gesucht und auch sofort fündig geworden. Vue Material
Die Push Notifications werde ich nativ implementieren, ähnlich wie der local Storage im Beispiel Code.
