simonthormeyer / terry Goto Github PK

Als BenutzerIn möchte ich meine Projekte in einer Datenbank speichern, sowie in zuvor erstellten Projekten stöbern.

Beschreibung

Das Projekt soll mit einem User-Kürzel sowie einem Projektnamen in die Datenbank abgespeichert werden.
Man soll schon vorhanden Projekten sehen und in ihnen mit Filtern Suchen können.
Filter: user_ID, project_name, user_ID && project_name

Voraussetzungen / blocked by

• ein speicherbarer Zustand der Projekte ist vorhanden (#4)

Akzeptanzkriterien

• man kann mittels HTTP-Requests auf die Datenbank zugreifen

Tasks

• Backend HTTP Routen erstellen (#30 )
• Dantenbank aufbauen
• Projekte als JSON-Objekt

Story Points
/estimate 13

As a user I want to be able to loop the melodies and settings that I put in, so that I can hear my input repeated as a loop and so that I can save my input and therefor stack layers of inputs over one another.

Description:

• A looper can save the input melodies and settings and can give them back repeatedly.
• The loops can be muted, paused and deleted.
• The loops are part of the saveable state of all the inputs of the user.
• The looper should run smoothly and without any disturbing artefacts visually as well as auditive.

Acceptance criteria:

• A looper button is placed at a appropriate spot on the screen (#79 )
• A concept of how the looper is set up and programmed is made (#50 )
• A melody input can be saved by the looper (#55 )
• The melody input is repeated and looped (#55 )
• Running loops are shown as buttons on the screens that represent the state of the loop (#79 )
• Running loops can be muted (#80 )
• Runing loops can be paused (#80 )
• The loops are part of the saveable state of the user inputs (#4 )
• There should be no glitches or unwanted artefacts visually and auditively and the loops should run smoothly

Als BenutzerIn möchte auf eine Eingabeflaeche klicken koennen, damit ein Ton erzeugt wird.

Beschreibung

Eine klickbare Fläche soll es dem/der BenutzerIn ermöglichen, durch Klicken Töne zu erzeugen, die je nach Position eine andere Frequenz haben.
Dazu sollen erstmal Sinus-Töne einer bestimmten Frequenz ausgegeben werden und dann (wenn möglich) mithilfe von Tone.js Klaviertöne.

Akzeptanzkriterien

Tasks

• React-Komponente erstellen (#14 )
• Eingaben auf dem Viewport einfangen (#14 )
• Komponente eines Synthesizers erstellen (#17)

Story Points
/estimate 13

Als Entwickler wollen wir Docker-Container verwenden, damit wir Betriebssystem-unabhängig und ohne manuelles Installieren von Packages programmieren und arbeiten können.

description of the story

Wir wollen Docker-Container benutzen, damit wir unabhängig von Betriebssystemen programmieren können und nicht die zu verwendenden Packages manuell installieren müssen.

blocked by

acceptance criteria

• das Frontend kann mit Docker gestartet werden
• das Backend kann mit Docker gestartet werden
• die App kann mithilfe von Docker-Compose gestartet werden

tickets or tasks

• Docker-Container und -Files anlegen
  • Backend Docker (#13)
  • Frontend Docker (#41)
  • Docker-Compose (#42 )
• Jede(r) einzelne Entwickler(in) installiert Docker auf dem eigenen Computer

story points
13

Als Entwickler möchte ich ein Entwurf fuer den Looper haben um eine Uebersicht ueber Schnittstellen und speicherbaren Parametern erhalten.

Beschreibung
Ein Diagramm was die einzelnen komponenten beschreibt und nachvollziehbar

Akzeptanzkriterien

• Es ist ersichtlich wie der Looper die komponenten anordnet und mischt
• Die Einzelnen Komponenten koennen gespeichert werden

Tasks

• Diagramm des Loopers erstellen #55
• Looperkomponente erstellen #55
  (- [ ] Diagramm des Synthesizers erstellen ) in einer neue Userstory verschieben
  (- [ ] Einzelne Komponente haben Parameter) in einer neue Userstory verschieben

Story Points
/estimate 13

Wir als Entwicklerteam möchten die Abgabe der Aufgabe 1 abgeben, sodass die Dozenten einen Einblick in unsere Arbeit und unsere Ideen bekommen.

Beschreibung:

Die Aufgabe 1 muss schriftlich abgegeben werden und bei Moodle hochgeladen werden.
Außerdem findet am Donnerstag um 14:30 Uhr ein Abnahmegespräch mit den Dozenten statt.

Akzeptanzkriterien:

• Dokument erstellen
• Links zusammentragen
• Auf einen Gruppennamen einigen
• Gruppenbeschreibung verfassen
• Layouten

Als EntwicklerIn möchte ich im Frontend eine klare, komponentenbasierte Struktur haben, damit ich beim Programmieren den Überblick behalten kann.

description of the story

Zu Beginn der Programmierung müssen wir die Vorraussetzungen, Ordnerstrukturen und erforderlichen Tools anlegen und vorbereiten.

blocked by

acceptance criteria

tickets or tasks

• Auf die zu verwendeten Tools einigen
  Tools: three.js, tone.js, react, Yarn
• Ein systematisches Dokument mit der Architektur der Tools anlegen ( #11 )
• Frontend-Projekt anlegen (yarn create-react-app?)
• Ordnerstruktur anlegen (#12 )
• Globale Zustandsverwaltung anlegen (#58)

story points
/estimate 13

As a User, I want to see the loops on the screen, to interact with them.

description of the story

when I loop my sound I want to see the result on the screen. every loop should show as a new Element. The loops can be muted and stopped.

https://codepen.io/jeremenichelli/pen/gGWPme
https://css-tricks.com/building-progress-ring-quickly/

blocked by

acceptance criteria

• looping creates a new element
• I can recognise every single loop
• looping can be stopped looper.stop()
• looping can be paused or mute

tickets or tasks

• create a new component for the visiuall loops

• recognise every loop creation

• make the loop look like the prototype

• implement looper pause and mute functions

story points
13 (1 Week)

Als Entwickler möchte ich die Eingabe auf ein Isomorphes model mappen, um ein nicht lineare Eingabe zu erhalten.

description of the story
Die Eingabe aus dem View bzw. React wird auf isomorphes Modell gemappt und ein Notennname ausgegeben.

blocked by
#1
acceptance criteria

• Je nach Position des Klicks wird ein anderer Notenname ausgegeben, der in das Tonmaterial einer Tonart passt.
• Links unten tiefe Töne
• Rechts oben hohe Töne

Tickets or Tasks

• Model für das mappen von Koordinaten auf Frequenzen (Isomorphic Note Layout) (#15 )
• Eingabekoordinaten werden als relative Werte zwischen 0-1 vom Canvas ausgegeben (#35)
• Notennamen in Abhängigkeit von der Position ausgeben (#31)

Story Points

• Bedarf für Experimente ermitteln und auf dem Wiki festhalten (was müssen wir ausprobieren / herausfinden?)
• Experimente durchführen und die Ergebnisse ebenfalls im Wiki festhalten

Als Benutzer möchte ich Harmonie-Parameter verändern können, um die verwendeten Töne und die Stimmung einstellen zu können.

is blocked by: #1

Beschreibung:

Ein Punkt auf der Eingabefläche kann verschoben werden, um die Tonauswahl und damit die Stimmung der ausgegebenen Musik einstellen zu können.

Akzeptanzkriterien:

• Auf dem Eingabefeld wird ein Punkt erstellt (#69 )
• Dieser Punkt ist vom Benutzer mit der Maus und durch Touch verschiebbar (#69 )
• Die Position des Punktes wird beim Verändern gespeichert (#69 )
• Ein Modell zum Umwandeln der Position in ein Tonmaterial-Modell muss entwickelt werden (#81 )
• Durch Verschieben des Punktes verändert sich die Tonauswahl aus denen eingegebene Töne abgespielt werden (#81 )
• Sowohl für horizontales Verschieben (#81 )
• alsauch für vertikales Verschieben (#81 )
• die ausgegebenen Skalen sind sinnvoll (#81 )

Geschätzter Aufwand:

Story-Points: 13

Erstellung von Container-, Komponenten- und Modulstruktur.

Zugehoerige Storys:

#2

Akzeptanzkriterien:

As an User, i want to export my project as a wave or mp3 file, to save my project on my computer.

description of the story
It should render my hole Project into a file.

blocked by

acceptance criteria

• [ ]

tickets or tasks

• [x]

story points

when the menu is pressed the canvas reacts to it but shouldn't

fixes bug from ticket #16

Arbeitsschritte

• [ ]

klickbare menuleiste mit icons erstellen

Beschreibung:
klickbare menuleiste mit icons erstellen und den Click weiterleiten an tone.js, damit dort die Musiklogik passiert

To Do:

• Function schreiben um das Aussehen der Icons beim Klicken zu ändern
• Function schreiben um den Click an Tone.js Musikfunktionalität weiterzugeben
• Icons als Buttons einfügen und stylen

Zugehoerige Storys:
#28

part of: #18

• Änderung der Koordinaten von Canvas in relative Koordinaten
• parent.js in App.js integrieren

oben links: x, y: 0, 0
unten rechts: x, y: 1, 1

duplicate of #74

Als Benutzer will ich die Loops muten und löschen können, um mit der Überlagerung von musikalischen Layern experimentieren zu können

Beschreibung:

Ein Looper soll gemutet und wieder end-mutet sowie gelöscht werden können.

Akzeptanzkriterien:

• Ein Looper-Button soll beim klicken gemutet werden.
• Beim wieder auf den Button klicken, soll der Looper wieder in Lautstärke abgespielt werden.
• Der Looper soll durch einen kleinen Button (x) gelöscht werden können.

Part of
#9

Als Benutzer will ich das der Systemzustand visuell abgebildet ist, damit ich visuelles wie Feedback für meine Eingaben bekomme.

description of the story

Beim Klicken auf das Canvas soll es sowohl ein Audio-Feedback, also die Ausgabe eines Klavier-Tones in einer durch die Klickposition bestimmten Frequenz, als auch ein visuelles Feedback, durch einen auf dem Canvas erscheinenden Punkt, geben.

blocked by: #1

acceptance criteria

• Auf der Position des Klickens erscheint ein Punkt
• Der punkt verschwindet mit der Zeit
• Für beide Ausgaben soll die Latenz nicht merklich sein (< 100 ms)

tickets or tasks

• ein einfacher Punkt erscheint fuer ein paar Sekunden #44
• der Punkt soll estaetisch aussehen #47

story points
1 Woche

As a teacher I want to have a final delivery, so that I can evaluate the final product.

Description

Due to the complexity of this very user story, it might be useful to mark it as an epic. The final delivery shall be provided via moodle and consists of the following:

Acceptance Criteria

• document (https://docs.google.com/document/d/1gNbDWnfG2XYfQ0mv_7O8C_f_1vBEPz7e6KR4NqSd_Is/edit?usp=sharing):
• presetation (https://docs.google.com/presentation/d/14LLXxamcnlYgP_9Jf1PfwWkRpEX-_euOPCaudFMBc24/edit)

• cover sheet with group name
• group members
• description of your project
• screen shot of the running application
• links to all sources
• links to the task board
• link to deployed running application
• usage instructions for a typical use case with expected results (e.g. a prepared user login for the teachers)
• Presentation as a PDF (#123 )

• option 1: software as archive
• final product as archive
• installation script for final product
• option 2: software as source
• links to release or master branches
• installation scripts for your sources
• optional, but recommended:
• provide deployment scripts

blocked by
#116 , #9 , #132

Story Points
/estimate 26

As a Developer, I want create my own synth engine to tailor the sound to my specific needs

description of the story

To enable a bigger variety in sound and unique sound profile to our product we would like to implement our own synth engine, based on Harmonic Synthesis.

acceptance criteria

• ADSR
• Accepts notes like "D6"
• parameters are editable

tickets or tasks

• implementation

Frontend Struktur wird verschriftlicht und/oder verbildlicht und in ein WIki eingefügt.

Termin-Planung in WIKI einbinden!

Beschreibung:

Wir wollen Docker-Container benutzen, damit wir unabhängig von Betriebssystemen programmieren können und nicht die zu verwendenden Packages manuell installieren müssen.

Akzeptanzkriterien:

• Erstellung von einer Wiki-Homepage / Inhaltsverzeichnis
• Modellierung & Verschriftlichung der Frontend-Struktur
• geeignete Darstellung in der WIKI

Zugehoerige Storys:
#2

Beschreibung:

Akzeptanzkriterien:

Zugehoerige Storys:
#1

Docker-Compose fuer Frontend und Backend erstellen

Arbeitsschritte:

• Frontend compiliert mit yarn
• Ein volume wurde gemountet, das Kontinuierliches arbeiten am Code ermoeglicht, ohne einen neuen Container starten zu muessen

Ist Teil der User Story #10

As a developer i want a storeable state of my project, so that i have an overview of the Data and Logic of the App.

description of the story:

Due to keep an overview of the data and settings that we create and edit, we need rational and efficient logic.
In addition, users should be able to save their settings and inputs in a future version.
In preparation, we always need an efficiently storable state of the entries made with our app.

acceptance criteria

• all relevant parts of the global state are exported to the database
• a JSON with those parts is sent to the API
• a project can be selected and loaded from database

tasks

• initiate a global State #97
• the possibility to store the state #97
• a JSON is sent to API #97
• there is a nice button and overlay #97
• there is an input field for projectname and user name / ID #97
• add dot positions to exported JSON #109
• implement rehydration #127

story points:
13

Abgabe des Prototypen
Beschreibung:

Akzeptanzkriterien:

• Einigung auf ein Layout des Prototyps

• prototype as mock-up e.g:

• sketches / clickable prototype

• first design / rough architecture

• technical preconditions

Zugehoerige Storys:
#3

Kommentierterter Prototype
https://drive.google.com/file/d/1gm64TbXG5aPSyDNHDO_jUL-H9dWNx2wp/view?usp=sharing
Unkommentierter Prototype
https://drive.google.com/file/d/1oO8idFTPRXZNc1QxvRWskopoi5zPI_lV/view?usp=sharing

Konzept für das Mappen der Frequenzen für verschiedene Modi auf das Canvas erstellen.

Beschreibung:

Verschiedene Modelle für unterschiedliche Tonleitet-Typen und Bildschirmgrößen

Akzeptanzkriterien:

• Pentatonische Tonleitern
• Heptatonische Tonleitern
• Landscape-View
• Portrait-View
• Für die Tastatur

Zugehoerige Storys:
#1

Eine REST-Api Schnittstelle mit Flask-Framework programmiert.

ist Teil der User-Story #40

Arbeitsschritte

• Routen fuer die Api festlegen

Beschreibung des Tickets

ist Teil der User-Story #7

Arbeitsschritte

• Klasse erstellen
• Basic Sound implementieren
• Finetuning

As a developer, I want to see looper-component to interact with the canvas, so that I can capture events.

duplicate of #9

description of the story

The Looper can take events and/or collect the triggerd Events.

blocked by

acceptance criteria

• [ ]

tickets or tasks

story points

Als Benutzer möchte ich ein Menü mit Buttons für die Interaktion in der WebApp haben, weil ich play, record, loop und random musik spielen möchte.

description of the story
blocked by
acceptance criteria

• vier Buttons zu sehen (Loop, Record, Play, Random)
• beim Klicken veränderung des Buttons
• pro Button Methode aufrug um tone.js anzusprechen

Tickets or Tasks

• Icons als Buttons einfügen
• Function schreiben um Icons beim Klicken zu ändern
• Function schreiben um den Klicken auf Icons an Tone.js weiterzuleiten

klickbare Menuleiste mit Icons anlegen #27

Story Points
1 Woche

clicking sound. This is because a rerender is triggered every time the state of App component changes (which includes the click coordinates). Every time a new MusicCtrl Object is created, which causes the artifacts when done often in a short period of time.
This also occurs when Components render while a sound is played. So unnecessary renders should be avoided whenever possible

Beschreibung des Tickets
Wenn ich auf dem Canvas clicke soll ein punkt erscheinen
ist Teil der User-Story #6

Arbeitsschritte

• erstelle ein Element für ein Click
• platzieren und anzeigen des Element für x Sekunden

Beschreibung:

Die vom Canvas erhaltenen relativen Koordinaten in Noten-Namen umwandeln.

ist Teil der User-Story #18

Akzeptenzkriterien:

• JS-Dokument erstellen
• JS-Dokument einbinden
• relativen Koordinaten-Input bekommen

Als Benutzer will ich ein Soundbett ein- und ausschlaten können, um bestimmen zu können, ob ich einen musikalischen Hintergrund haben möchte oder nicht.

description of the story

Als musikalische Grundlage und Bass-Layer soll es eine Drone, ein Soundbett geben, was den Grundton der Musik vorgibt.
Diese Drone soll ein- und ausschaltbar sein.

blocked by

acceptance criteria

• Eine weitere Audio-Tonspur erstellen
• Diese Tonspur gibt einen Audiofile als Loop wieder
• Die Tonspur ist ein- und ausschaltbar
• Das ein- und ausschalten führt zu einem ein- bzw. ausfaden der tiefen Frequenz

tickets or tasks

Soundbett mit Button verbinden #46

story points

As a user, I want to use dots to change the parameters of the sound because it gives me creative freedom.

Description of the story
On the canvas there are dots that can be moved around.

blocked by

acceptance criteria

• there are movable points on the screen
• the movements coordinates are passed on

tickets or tasks

• create 3 movable spheres #75
• make them nice #76
• make the change of movement accessible #77

story points
20

MongoDB als Datenbank aufbauen

ist Teil der User-Story #48

Arbeitsschritte

• HTTP Routing aufbauen (#30)
• DB Strukturieren und initialisieren
• Testen

Die Komponente des Loopers wird als Klasse implementiert.

ist Teil der User-Story #50

Arbeitsschritte

• vorraussetzung Erfuellen die, in wie ein Loop aufgenommen wird, beschrieben werden
• erstellen der Looperklasse

https://docs.google.com/document/d/1t5F3iXlOfkLrJ-d09OTA2bPz7eDFXjoogB9E4JbV9X4/edit?usp=sharing

Clean up messy code in App.js by making state and some functions available globally from an extra file

ist Teil der User-Story #2

Arbeitsschritte

• understand global state management
• transfer state variables used in App.js to a GlobalState file

As a teacher I want to have a prototype delivery, so that I get an impression of the final product.

Description

The prototype delivery shall consists of various artifacts - provisioning via link is preferred. One idea could be to have one document in a git repository. This document acts as a single source of truth and provides the locations to all the other artifacts.

Acceptance Criteria

• prototype as mock-up e.g: (#19 )
• sketches / clickable prototype
• first design / rough architecture
• technical preconditions
• document that provides: (#20 )
• name of the group
• team members including their competencies and planned scrum roles
• expected challenges
• project description: ~200 word or bullet points
• what is the gain of your product for a potential customer
• list of development tools and frameworks used
• rough project schedule
• link to the scrum board / task list etc.
• links to git repositories
• user stories and epics for the two subsequent sprints are written down
• document, that describes the prototype and current working status

Story Points
/estimate 13

Due date
Sonntag, 17. Mai 2020, 23:59
Assignment on moodle

Das Abgebedokument beinhaltet alle fuer die Abgabe notwendigen Dokumente und inhalte.

Beschreibung:
Das bereits für Aufgabe 1 verwendete Dokument (https://docs.google.com/document/d/1rFpuK0hUWbMjHuNeOqzXvZoD6TFPlypB6jHsowrnEGQ/edit?usp=sharing) updaten und für die Abgabe des Prototypen herrichten:

Akzeptanzkriterien:

• Dokument erstellen

• name of the group
• team members including their competencies and planned scrum roles
• expected challenges
• project description: ~200 word or bullet points
• what is the gain of your product for a potential customer
• list of development tools and frameworks used
• rough project schedule

• link to the scrum board / task list etc.
• links to git repositories
• user stories and epics for the two subsequent sprints are written down
• document, that describes the prototype and current working status

• Layouten und schön gestalten
• Review
• In Moodle hochladen

Zugehoerige Storys:
#3

der "Punkt" soll wie ein schoenes aufblinken aussehen

ist Teil der User-Story #6

Arbeitsschritte

• Prototyp analisieren
• in Three.js eine passenden Loesung finden

die Eingabe Coordinaten sorgen dafür das Tone.js ein Ton abspielt.

Beschreibung:

Akzeptanzkriterien:

Zugehoerige Storys:
#1

Is blocked by
#17

Beschreibung des Ticket
I would like the click to look different depending on the sound to recognize visually what is changing.

Arbeitsschritte

• Information von app zur Canvas uebergeben
• die Erscheinungslaenge anpassbar machen
• Vorschlag (siehe unten) anschauen und evaluieren
• auf dem Branch vom Vorschlag weiter arbeiten (?)

Vorschlag, wie es funktionieren könnte ist auf diesem Branch:
- Klick -

Erklärung: CanvasClick übergibt sich selbst an einen Looper, sobald dieser erstellt wird. Der Looper nutzt dann die Funktion mit dem Parameter 'playback = true', um einen Klick an dieser Stelle zu simulieren.

ein Canvas das klickbar ist auf dem Bildschirm.

Beschreibung:

Akzeptanzkriterien:

Zugehoerige Storys:
#1

Docker-Files für das Frontend erstellen

• package.json bereitstellen
• base Image festlegen
  z.B. node:latest
• Start-CMD mitteilen
  z.B. CMD ["yarn", "start"]

Part of User Story #10

Beschreibung des Tickets

ist Teil der User-Story #7

Arbeitsschritte

• mit Button verbinden
• fadein fadeout für Soundbett

Description of the Ticket:
there are 3 dots on the canvas that can move

Is part of story #69

ToDo's:

• short Bulletpoints of what you've done or want to do

As an User, I want to have an overlay or a dialog for saving and downloading my project.

overlapping with #4

description of the story
The app contains an option that shows the ways to persistent the project.
The buttons are clickable and they are in the same style like the other app-elements.

blocked by

acceptance criteria

tickets or tasks

story points

Dockerfiles und -struktur erstellen für das Backend
Zugehoerige Storys:
#10 #40

Als EntwicklerIn will ich eine Verbindung vom Frontend zum Backend über eine Rest-Schnittstelle haben, um Musikprojekte in einer Datenbank speichern zu können.

description of the story
Eine grundlegende Restschnittstelle besteht und koennte theoretisch angesprochen werden.

blocked by

acceptance criteria

• eine Flask App mit passenden Routen ist vorhanden

Tickets or Tasks

• Dockerfiles für das Backend #13
• Flask-App #29

Story Points