Vue.js ToDo PWA Tutorial – Intro

vue js todo pwa intro
Marc Borkowski
Datum
30.11.2019

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:

  1. Die Daten sollten im Local Storage des Browsers gespeichert werden.
  2. Wenn das Fälligkeitsdatum erreicht ist, sollte eine Push-Notification gesendet werden.

Ergebnis

Code: GitHub
Demo: Demo

Frameworks finden

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.

Tutorials

  1. Projekt erstellen
  2. Klickdummy erstellen

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.