Beispielanwendung für die Entwicklung einer Browser App
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
scripts
src
.babelrc
.gitignore
LICENSE
README.md
mockup1.png
mockup2.png
mockup3.png
package-lock.json
package.json

README.md

Beispielanwendung "My Songbook"

Kurzbeschreibung

Dies ist ein Beispiel für eine Browser App, die ohne einen Server im Hintergrund komplett im Browser läuft. Es handelt sich dabei um eine so genannte Single Page App, da die App nur einmal durch Aufrufen der HTML-Datei gestartet und dann bis zum Verlassen der App nicht wieder neugeladen wird.

Die Anwendung kann an folgender Stelle online betrachtet werden: https://www.wpvs.de/my-songbook/

Verwendete Technologien

Die App nutzt den Node Package Manager npm als Paketverwaltung. Auf diese Weise werden der Application Bundler ParcelJS sowie eine Hand voll externe Bibliotheken für die Anwendung installiert. Jedoch wird kein übergreifendes Framework wie Angular oder React verwendet, da diese für eine allgemeine Einführung zu speziell sind und viele wesentliche Details verbergen.

Folgende Entwicklungswerkzeuge kommen stattdessen zum Einsatz:

  • Atom: Spezieller Texteditor für Webentwickler und Programmierer
  • git: Versionsverwaltung zur gemeinsamen Arbeit am Quellcode
  • npm: Paketverwaltung zum automatischen Download abhängiger Bibliotheken
  • Parcel: Web Application Bundler und Entwicklungsserver

Zusätzlich werden folgende Bibliotheken genutzt:

  • Navigo: Single Page Router zur Vereinfachung der Navigation innerhalb der App
  • PouchDB: Clientseitige NoSQL-Datenbank zum Speichern der Songtexte
  • lyric-get: Kleine Bibliothek zur Suche von Songtexten im Internet
  • Quill: WYSIWYG-Editor zum Nachbearbeiten der Songtexte

UI-Skizzen und Screenshots

Die App richtet sich an Musiker, die anhand eines Lead Sheets neue Lieder üben oder diese auf der Bühne vortragen wollen. Hierfür bietet sie eine einfache Verwaltung von Songtexten mit der Möglichkeit, neue Texte online zu suchen und der eigenen Sammlung hinzuzufügen.

Mobile Darstellung Übersicht der Songtexte Anzeige eines Songtexts

Copyright

Dieses Projekt ist lizenziert unter Creative Commons Namensnennung 4.0 International

© 2018 Dennis Schulmeister-Zimolong

E-Mail: dhbw@windows3.de
Webseite: https://www.wpvs.de