ARSnova.click

Aus THM-Wiki
Wechseln zu: Navigation, Suche
Kurs
Kursname Web Programming Weeks 1+2
Kurstyp Projektkurs
Dozent Dr. Klaus Quibeldey-Cirkel
Semester WiSe 2015/16
Studiengang Master + Bachelor


Projektvision


Fehler beim Erstellen des Vorschaubildes: Datei fehlt
Landing Page von arsnova.click

Siehe den Beitrag im ARSnova-Projektblog: https://arsnova.thm.de/blog/work-in-progress-arsnova-click/

Allgemein

Das Repository wird von dem hauseigenen THM-Git (GitLab) verwaltet: [1] Dabei werden die Branches wie folgt verwaltet:

  • Master-Branch: Inhalte des Master-Branches werden durch einen Build-Dienst direkt auf dem Produktiv-System deployt: http://arsnova.click/. Schreibberechtigungen obliegen der Teamführung.
  • Staging-Branch: Inhalte des Staging-Branches werden durch einen Build-Dienst direkt auf dem Staging-System deployt: http://staging.arsnova.click/. Schreibberechtigungen obliegen der Teamführung.
  • Für jedes Feature sowie jeden Bug existiert ein eigener Branch. Diese sind für alle eingetragenen Developers zugängig. Nach dem Abschluss einer Featureentwicklung / eines Bugfixes wird ein Merge-Request an den Staging-Server gestellt.

Die Version 1.0 wird innerhalb eines zwei-wöchigen Zeitraumes mit der Projektmanagement-Methode "Scrum" entwickelt. Nach einer zweitätigen Einführungs- und Planungsphase soll die im Zustandübergangsdiagramm definierte Anwendung nach 3 Sprints, verteilt über 7 Tage, fertiggestellt werden.

Feature-Requests

Die Feature-Request-Liste wird mit der Zeit aktualisiert. Neben der Bezeichnung hält jeder Eintrag fest, in welchem Release das entsprechende Feature umgesetzt wurde. Wenn keine entsprechende Annotation vorhanden, steht das Feature noch aus. Des Weiteren sind diese zur besseren Übersicht fett markiert.

  • Hashtag-Validierung - Release 1.0
  • Skalierbares Seitenlayout - Release 1.0
  • Fußleiste - Release 1.0 (Dummy-Inhalte)
  • Splashscreen Start - Release 1.0
  • Frage in Splashscreen - Release 1.0
  • Dozenten Dashboard - Release 1.0
  • Markdown Textfeld
  • Frageformat "Zahl + Toleranzintervall"
  • Dozent: Start / Ende - Release 1.0
  • Dozent: Countdown-Timer - Release 1.0
  • Dozent: Edit-Funktion für Fragen - Release 1.0
  • Design und Farben Kahoot!-Like - Release 1.0
  • Frageformat: 1-26 Optionen, Single-Choice & Multiple-Choice - Release 1.0
  • Frageformat: ARSnova live Feedback - Release 1.0 (Abstimmung)
  • Dozent: Funktion für Wettabstimmung - Release 1.0
  • Antwortstatistik - Release 1.0
  • Internationalisierung
  • Node.js-Server mit Domain arsnova.click - Release 1.0
  • Funktion zur Anzeige und Verwaltung der Frage - Release 1.0
  • Export / Import - Release 1.1
  • Alle Icons und Bilder als Webfont - Release 1.0
  • DOS-Schutz

Rollenverteilung

Product Owner: Quibeldey-Cirkel, K.
Teamleiter: Hoeck, T. W.
Scrum-Master: Gerlach, M.(29.02.-02.03.2016); Hoeck, T. W. (03.03.-13.03.2016)
Infrastruktur-Manager: Wallbott, M.

Team:
Fullarton, C.
Henkel, D.
Henrichs, D. D.
Käsler, T.
Linne, K.
Sann, M.
Schäfer, M.
Schwarz, A.
Strietzel, T.
Viehmann, T.
Weigand, K.

Innerhalb des Teams wurde jeweils ein Experte für die Verwaltung eines speziellen Softwarebereichs ernannt:
Design/CSS: Henkel, D.
Datenstrukturen/Datenbank-Management: Käsler, T.

Design-Style

Allgemeiner Aufbau

Es gibt vier Default CSS Dateien, welche alle durch Sass compiliert werden. Dies hat den Vorteil, dass wir die Möglichkeit haben Farb-Templates erstellen zu können.

Wichtig!! Bitte Committed nichts in den drei Dateien, außer ihr habt es mit Daniel Henkel abgesprochen!

Im folgen beschreibe ich kurz was in den einzelnen Dateien definiert wurde:

color.scss

Hier ist das Farb-Template definiert. Ihr könnt mit den Farben ein wenig rumspielen und im Frontend beobachten was sich wie verändert.

appearance.scss

Hier sind Sachen wir Schriftart und border-radius definiert.

default.scss

Diese Datei enthält allgemeine Definitionen, die für alle HTML Elemente gültig sind.
Zum Beispiel ist hier definiert, dass die Placeholder in allen Input fields mit "..." abgekürzt werden, sobald nicht genügend Platz für den Text vorhanden ist.

default_classes.scss

In der default_classes.scss wurden alle benötigten Klassen für die Anwendung definiert.
Wenn Ihr nicht wisst welche klasse Ihr wo verwenden könnt, guckt entweder in die Datei oder hier in das Wiki.

Definierte Klassen

Buttons

Jeder Button muss die Klasse button verwenden. Dadurch werden direkt die Runden Ecken, der Schatten, der Hover Effekt, Höhe und Breite festgelegt.
Für die Farbe gibt es daraufhin weitere Klassen:

Hauptklasse: button

Grün: button-next oder button-success
Rot: button-warning oder button-back
Lila: button-purple
Grau: button-default

Input fields und Textareas

Für Input fields gibt es die Klasse input-field und für Textareas die Klasse textarea, welche automatisch Schriftgröße, Hintergrundfarbe, breite und Höhe setzt.
Sollen außerdem noch Runde Ecken vorhanden sein, müssen diese mit einer extra Klasse, welche weiter unten beschrieben wird, hinzugefügt werden.

Hauptklasse: input-field bzw. textarea

Um einen Border einem Text- oder Eingabefeld hinzuzufügen, muss man eine der beiden Klassen setzen:
success : erstellt einen grünen Rand
error : erstellt einen roten Rand

Andere Klassen

Hier sind einige Standard Klassen aufgeführt, welche auf alle HTML Elemente angewandt werden können.

button-shadow fügt einen Schatten an das Element
center-vertical zentriert das Element vertikal
color-changing ändert die Farbe des Elementes in einem Bestimmten Rhythmus sodass, alle auf der Seite vorhandenen Farben angeziegt werden. distance-top fügt einen Abstand von 20px nach oben hinzu
hover-underline setzt einen Hover Effekt wodurch der text unterstrichen wird
input-group-letter setzt die Schriftgröße des Buchstaben in einer Input Group
placeholder-align-center zentriert den Placeholder
round-corners setzt die runden Ecken auf das Element

Spezielle Templates

footer_nav_buttons

Dieses Template enthält zwei buttons (Zurück und Weiter), welche am unteren Ende der Seite mittig fixiert sind.
Eingebunden wird es durch {{> footer_nav_buttons backId="backButton" forwardId="forwardButton"}}.
Dabei kann die ID der beiden Buttons durch Übergabeparameter gesetzt werden.


Titel einfügen

Für den Titel gibt es ein eigenes Template.
Zum einfügen:
{{> titel titelText = " Titel Text "}}

Splash Screen

Eingebunden wird der splash screen durch die folgende Zeile:

{{> splashscreen }}

dabei gibt es verschiedene Übergabeparameter wodurch der screen angepasst werden kann:

Attribut: templateName
Wert: (String) Name des einzufügenden Templates
Required: true
Beispiel: modalShowMyHashtags

Attribut: type
Wert: (String) Setzt die Hintergrundfarbe anhand der Klasse
Beispiel: splash-screen-session
Required: true
Möglichkeiten: 
* splash-screen-session
* splash-screen-request-read-confirm
* splash-screen-countdown
* splash-screen-only-view-seconds-left
* splash-screen-show-question

Attribut: headername
Wert: (String) Überschrift
Default Wert: leer
Required: false
Beispiel: Hinweis:

Attribut: lazyClose
Default Wert: false
Required: false
Möglichkeiten: true oder false
Beschreibung: Wenn dies True ist, kann das Fenster nur durch druck auf einen "Close" Button geschlossen werden. Dieser muss aber explizit im Template eingebaut werden.

Attribut: timerClose
Wert: (Number) Zeit die vergehen muss bis das Fenster sich automatisch schließt in ms
Default Wert: 5000
Required: false
Beschreibung: Wenn timerClose beispielsweise auf 5000 gesetzt ist, schließt sich der Splash screen nach 5s automatisch.

Attribut: noAutorun
Default Wert: false
Required: false
Beschreibung: Wenn der Wert True ist, wird der Splashscreen nicht automatisch beim Laden des Templates geöffnet. Er muss dann manuell über einen Helper mit showSplashscreen() geöffnet werden.

LocalStorage

Alle Funktionen zur Kommunikation mit dem LocalStorage stehen in der Datei client/js/localStorage.js. Sie sind global definiert und können von überall verwendet werden. Sie werden immer aufgerufen, wenn ein Dozent oder Teilnehmer Operationen auf der Datenbank vornimmt. Die Hashtags "privateKey" und "hashtags" sind torreserviert und dürfen nicht genutzt werden. Dieser Fall wird auch abgefangen. Folgende Methoden können zur Interaktion mit dem LocalStorage auf dem localData-Objekt verwendet werden:

  localData.getPrivateKey()
localData.getAllHashtags()
localData.containsHashtag(hashtag)
localData.addHashtag(hashtag)
localData.addQuestion(hashtag, question)
localData.addTimer(hashtag, timer)
localData.addAnswers(answer)
localData.reenterSession(hashtag)
localData.deleteAnswerOption(hashtag, answerOptionsNumber)
localData.updateAnswerText(hashtag, answerOptionNumber,answerText, isCorrect)
localData.updateIsReadingConfirmationRequired(hashtag, isReadingConfirmationRequired)
localData.initializePrivateKey()
localData.createTestData()

Session-Status

Jeder Hashtag hat einen sessionStatus, der anzeigt, in welchem Zustand sich diese Session befindet. Folgende Stati gibt es:

0 : Der Hashtag ist inaktiv/keine Daten liegen auf dem Server
1 : Der Hashtag liegt auf dem Server und der Dozent bearbeitet diesen
2 : Der Hashtag ist für die Nutzer geöffnet und diese können beitreten
3 : Dem Hashtag kann nicht mehr beigetreten werden / die Abstimmung läuft
4 : Dem Hashtag kann nicht mehr beigetreten werden / die Abstimmung ist fertig

Projektstruktur

/client 
/css //CSS-Dateien
/js //Eine JS-Datei/Template
/templates //Eine .HTML-Datei/Template
home.html
layout.html
routes.js


/lib 
collections.js


/public 
/images


/server
startup.js


/shared
db.js

Anforderungsanalyse

Zum besseren Verständnis der Aufgaben und den Anforderungen an die Anwendung wurden zu Beginn des Projektes entsprechende Diagramme angelegt:

Entwicklungsdokumentation:

Release-Planning

Die Inhalte des aktuellen Releases sind in der Anforderungsanalyse beschrieben. Informationen über ältere Versionen sind nicht mehr verfügbar.

  • Version 1.0: 11.03.2016
  • Version 2.0: 18.03.2016
  • Version 2.1: Sommer 2016

Release 1.0

Der Release 1.0 soll innerhalb eines zweiwöchigen Scrums-Projektes erreicht werden. Das Projekt wird im Rahmen von drei Sprints durchgeführt. Im folgenden sind die einzelnen User-Stories, deren einzelnen Tasks & Ziele sowie die Abnahmekriterien der einzelnen Sprints definiert.

Sprint 1

Übergeordnetes Ziel
Im Rahmen des ersten Sprintes sollen erste Ansichten der Anwendung ersichtlich werden. Dabei soll auf das vom Kunden geforderte Design und die Resppnisibilität Wert gelegt werden. Nach dem ersten Sprint werden die bestehenden Ansichten repräsentativ für die weiteren Möglichkeiten gelten. Neben den ersten Darstellungen soll auch ein gewisses Maß an Hintergrund-Funktionalität immplementiert werden. Hier liegt der Hauptaspekt in der reaktiven Datenhaltung. Diese soll in dem ersten Sprint-Review bereits ersichtlich sein.

User-Story: Als Dozent möchte ich eine Session erstellen / als User möchte ich einer Session beitreten, um eine Umfrage zu erstellen / einer Umfrage beizutreten.
Ziel: Eine Login-Seite mit einem Eingabe-Feld für einen Hashtag und zwei Buttons (Session beitreten / Session erstellen)
Abnahmekriterium: Hashtags sind eindeutig. Einer vorhandenen und aktiven Session kann ich beitreten. Einer vorhandenen und inaktiven Session kann ich zum verwalten beitreten, wenn ich der Ersteller bin. Wenn ich einen nicht verwendeten Hashtag verwende, kann ich zu diesem eine neue Session erstellen.
Tasks:

  • Hashtag validieren und entsprechende Buttons als (nicht) verfügbar darstellen.
  • Datenbank-Validierungen.
  • Publish-Subscriber Zugriffe für die entsprechenden Datenbank-Zugriffe.
  • HTML-Struktur anlegen


User-Story: Als Anwender möchte ich einen Footer und einen Header für eine bessere Übersichtlichkeit und Einheitlichkeit.
Ziel: Ein einheitlicher Header mit "arsnova.click"-Logo, welches auf die Landing-Page referenziert. Der Footer enthält die getrennten Buttons "Home/About", "AGB", "Datenschutz" und "Impresseum". Diese sollen bereits mit Dummy-Daten verlinkt sein.
Abnahmekriterium: Verlinkung mit Dummy-Inhalten / Home-Seite funktionioert. Der Header & Footer wird immer & gleich dargestellt. "About" wird in der Home-view angezeigt, ansonsten wird Home an dessen stelle verlinkt.
Tasks:

  • Footer-Leiste
  • Dummy-Inhalte
  • Icon-Design
  • HTML-Layout / Struktur
  • wechselnde Inhalte (Home/About-wechsel)


User-Story: Als Anwender möchte ich zusätzliche Informationen in einem Splash-Screen-Popup dargestellt bekommen, welches je nach Inhalt bestätigt oder nur weggeklickt werden kann.
Ziel: Ein modulares Splash-Screen-Template
Abnahmekriterium: Der Splashscreen ist für verschiedene Inhalte wiederverwendbar. Der Splashscreen kann je nach Konfiguration bestätigt oder einfach "weg geklickt" werden.
Tasks:

  • HTML-Template
  • Modulares Verhalten
  • Einbinden


User-Story: Als Benutzer möchte ich keine Daten auf dem Server gespeichert haben, um den Datenschutzbestimmungen zu entsprechen.
Ziel: Beim schließen einer Session / verlassen des Browsers werden alle zugehörigen Daten aus der MongoDB entfernt, sodass lediglich ein Geheimmnis und der Hashtag gespeichert bleiben.
Abnahmekriterium: Nach dem Verlassen eines Benutzers befinden sich keine weiteren Daten in der Datenbank.
Tasks:

  • Import beim erneuten betreten der Landing-Page
  • Synchronisation von local storage und Mongo DB / Export


User-Story: Als Kunde möchte ich die Anwendung online sehen, um den aktuellen Entwicklungsstatus nachvollziehen zu können.
Ziel: Ein Staging-Server, der immer aus dem aktuellen Stand des Staging-Branches gebaut wird.
Abnahmekriterium: Die aktuelle Version ist immer online und wird automatisiert gebaut.

User-Story: Als Dozent möchte ich Fragen erstellen & anpassen um diese später für die Studenten freigeben zu können.
Ziel: Zwei Ansichten: Eine zum erstellen einer Frage, die andere zum festlegen der Anzahl & Inhalte der Antwortoptionen. Auch soll eingestellt werden können, welche der Antwortmöglichkeiten die richtige(n) ist/sind.
Abnahmekriterium: Die im Ziel beschriebenen Funktionalitäten sollen umgesetzt und voll einsatzfähig sein.

Sprint-Retrospektive

Fullarton, C.
Was möchte ich beibehalten / Was ist gut gelaufen?
Das pair-programming war überraschend erfolgreich. Wenn man sich einmal in eine Sackgasse verrannt hatte, hat man zu zweit wesentlich schneller wieder auf die Spur gefunden. Außerdem war die Stimmung allgemein sehr gut, alle haben auf ein Ziel hin gearbeitet.
Was möchte ich ändern / Was ist schlecht gelaufen?
Die Tasks waren teilweise sehr generisch und langfristig formuliert, z.B.: "Design und Farben". Hier könnte man gegebenenfalls etwas genauer werden.

Gerlach, M.
Was möchte ich beibehalten / Was ist gut gelaufen?
Was möchte ich ändern / Was ist schlecht gelaufen?

Henkel, D.
Was möchte ich beibehalten / Was ist gut gelaufen?
Gut fand ich die interne Kommunikation, bzw. dass die Master Studenten meistens durch die Reihen gegangen sind und gefragt haben ob Sie helfen können. Was möchte ich ändern / Was ist schlecht gelaufen?

Ich persönlich empfand das Pair-Programming mehr als Hindernis, da teilweise Leute mit unterschiedlichem Wissenstand zusammenarbeiten und dadurch entweder einer von beiden nicht mitkommt oder der andere eher als Lehrer fungiert und sich ggf. langweilt.

Henrichs, D. D.
Was möchte ich beibehalten / Was ist gut gelaufen?
Die allgemeine (und meine) Motivation ist sehr positiv und optimistisch und es gibt, für so gut wie alle Kompetenzen, Bereiche in denen man sich einbringen kann. Außerdem halte ich die Zusammenarbeit für sehr kollegial und freundschaftlich. Insgesamt eine sehr gute und (beängstigend) praxisnahe Erfahrung.

Was möchte ich ändern / Was ist schlecht gelaufen?
Ich möchte meine eigene Expertise (auch in Meteor) auf einen, der Gruppe und Aufgabe angemessenen, Stand bringen. Auch um mich in den Bereichen, in denen das Gefühl aufkommt weniger effektiv eingesetzt zu sein, Schritt zu halten und verlässliche Inhalte beizutragen. Allgemein hätte ich mir bei dem Projekt eine vorlaufende Planungsphase die Zeit bietet für die Iterationen der Programmarchitektur und des Layouts gut vorstellen können und hätte das Festlegen und Ausdefinieren der Tickets erleichtert.

Hoeck, T. W.
Was möchte ich beibehalten / Was ist gut gelaufen?
Die Kommunikation untereinander sowie die Motivation aller war ausgesprochen gut - weiter so!

Was möchte ich ändern / Was ist schlecht gelaufen?
Mehr Zeit für eine bessere Task-Ausarbeitung und Planning-Poker anhand der Tasks, nicht anhand der User-Stories.

Käsler, T.
Was möchte ich beibehalten / Was ist gut gelaufen?
Die Kommunikation verlief sehr gut, es wurde gut mit Issues gearbeitet. Es endstand Begeisterung für das eigene Produkt, das sich Schritt für Schritt zusammengebaut hat. Was möchte ich ändern / Was ist schlecht gelaufen?
Es war zu wenig Zeit, um die Tasks ordentlich aufzuspalten (was zudem im Ausschluss der Nicht-Teamleitung geschah/geschehen musste). Es fehlte zu Beginn der Programmierung mit Meteor ein Rohbau, sodass dieser am Abend des ersten Entwicklungstages zusätzlich noch aufgebaut werden musste. Die einzige Lösung, die ich hier sehe, ist, das ebenfalls in der Vorbereitung von einem Entwickler (wahlweise zweien), umzusetzen.
Linne, K.
Was möchte ich beibehalten / Was ist gut gelaufen?
Mir hat besonders die Motivation super gefallen! Man hat gemerkt, dass jeder an dem Projekt arbeiten wollte und ambitioniert versucht hat, seine Ideen im Sinne aller umzusetzen.

Was möchte ich ändern / Was ist schlecht gelaufen?
Die Tasks auf dem Scrum-Board waren nicht eindeutig genug und hingen teilweise zu sehr voneinander ab, sodass man manchmal mehrere Tasks gleichzeitig bearbeitet hat. Die Anfangs fehlenden Style-Defaults haben auch zu Missverständissen und unschönem Copy-Paste geführt.

Sann, M.
Was möchte ich beibehalten / Was ist gut gelaufen?
Die im Allgemeinen gute Strukturierung & schnelle und motivierte Teammitglieder
Was möchte ich ändern / Was ist schlecht gelaufen?
Am Ende des Sprints haben zu viele an einer Hand voll Tasks gearbeitet.
Schäfer, M.
Was möchte ich beibehalten / Was ist gut gelaufen?
Was möchte ich ändern / Was ist schlecht gelaufen?

Schwarz, A.
Was möchte ich beibehalten / Was ist gut gelaufen?
Was möchte ich ändern / Was ist schlecht gelaufen?

Strietzel, T.
Was möchte ich beibehalten / Was ist gut gelaufen?
Das Pair-Programming war effizienter und spaßiger als ich es vermutet hatte! Der Austausch untereinander und das Vier-Augen-Prinzip verhindern "Dirty Hacks" und erzeugen ein gemeinsames Verständnis vom Code. Was möchte ich ändern / Was ist schlecht gelaufen?
Ich habe z.T. ohne konkreten Scrum-Task gearbeitet, da die verfügbaren Tasks nicht kleinteilig genug für eine Arbeitsteilung waren. Daher wurde viel "auf Zuruf" gemacht. Das Scrum-Board war im Entwickleralltag eher unwichtig, auch wenn das wahrscheinlich nicht so beabsichtigt war.
Viehmann, T.
Was möchte ich beibehalten / Was ist gut gelaufen?
Mir selbst hat das Pair-Programming sehr gut gefallen, so hat man selbst gute Anregungen bekommen wie man seinen Code etwas besser gestalten kann. Ich denke auch dadurch wurde insgesamt die ständige Arbeit am PC deutlich entspannter.
Was möchte ich ändern / Was ist schlecht gelaufen?
Die bereits von mehreren angesprochene Aufteilung der Tasks hat häufiger zu Verwirrungen geführt. Einige wichtige Punkte wurden dabei dann auch erst später hinzugefügt. Aber ich denke durch das Wissen aus dem ersten Sprint und wenn die Teamleitung mehr Zeit zur Aufteilung hat, wird dies auch problemlos funktionieren.

Wallbott, M.
Was möchte ich beibehalten / Was ist gut gelaufen?
Die Kommunikation und die Motivation von vielen habe ich besonders positiv empfunden.
Was möchte ich ändern / Was ist schlecht gelaufen?
Wir sollten viel mehr mit Issues in GitLab arbeiten und die Tasks für das Board genauer beschreiben.
Weigand, K.
Was möchte ich beibehalten / Was ist gut gelaufen?
Mir hat das Teamwork und die Kommunikation untereinander sehr gut gefallen
Was möchte ich ändern / Was ist schlecht gelaufen?

Sprint 2

Übergordnetes Ziel
Es soll möglich sein, eine zeitbegrenzte Abstimmung freizugeben. Die Studenten sollen abstimmen können und ein direktes Feedback der Eingabe erhalten.

Ich als Nutzer möchte die drei verschiedenen Fragetypen Umfrage, SC und MC erstellen können.
time planned on this story: 9h

View erstellt ein Respsonse-Document, welches zum Abgleich an das Backend (DB) geschickt werden kann. Rückgabe mit zwei Attributen: Weiterleitung auf andere View und Anzeige Submit-Button. Dieser Task beinhaltet die Front-und Backend Entwicklung

  • team: Tjark Wilhelm Hoeck / Tom Käsler
  • estimated time to complete: 2h
  • time spent on this task: 3h

CSS-Styling (Hover-Effekte für gedrückte Buttons) der Fragen / Buttons / etc... + HTML-Template

  • team:
  • estimated time to complete: 1h
  • time spent on this task:

JS-File für diese View (Helper, etc..), also die Verknüpfung zwischen Front- und Backend.

  • team: Tjark Wilhelm Hoeck / Tom Käsler
  • estimated time to complete: 1h
  • time spent on this task: 1h

Publish-Subscribe Pattern für diese View implementieren (DB-Zugriffe)

  • team:
  • estimated time to complete: 0h
  • time spent on this task: 1

Ich als Dozent möchte einen Timer einstellen können um die Abfrage zeitlich begrenzen zu können.
time planned on this story: 14h

Timer-Styling (CSS & HTML-Template)

  • team:KW,MS
  • estimated time to complete: 0h
  • time spent on this task: 1h

Timer-anzeige Student + Backend-Funktionen

  • team:KW,MS,KL
  • estimated time to complete: 0h
  • time spent on this task: 4h

Zeit-Anzeige Dozent + Backend-Funktionen

  • team:KW,MS,TK
  • estimated time to complete: 0h
  • time spent on this task: 5h

Prüf-Methoden der Abstimmungsansicht um die Timer-Validierung erweitern (Response-Documents)

  • team:
  • estimated time to complete: 2h
  • time spent on this task:

Als Student möchte ich eine direkte Rückmeldung über meine Abstimmung erhalten, um zu wissen, wie ich stehe.
time planned on this story: 3h

Splashscreen-Feedback über meine Abstimmung (richtig/falsch?)

  • team:
  • estimated time to complete: 3h
  • time spent on this task:

Nach meiner Abstimmung möchte ich eine Übersicht über die aktuellen Live-Abstimmungsergebnisse erhalten (Dozent & Student)
time planned on this story: 6h

Ich möchte die Ergebnisse (mit den Response-Objekten) angezeigt bekommen (Helpers & Events)

  • team: TV, KW, MS
  • estimated time to complete: 0h
  • time spent on this task: 4h

Publisher&Subscribe-Funktionen für diese Ansicht

  • team: TV, KW, MS
  • estimated time to complete: 0h
  • time spent on this task: 3h

Styling & Darstellung (CSS & HTML) für diese Ansicht

  • team: KW, MS
  • estimated time to complete: 0h
  • time spent on this task: 2h

Ich als Nutzer möchte keine meiner Daten Server-seitig gespeichert haben
time planned on this story: 14h

Sichern der Mongo in localStorage bei jeder Änderung des Datenbestandes (für jede DB eine Methode)

  • team: TK & TWH, TV & KL
  • estimated time to complete: 1h
  • time spent on this task: 5h

Alte Sessions aus local storage wieder in Mongo übernehmmen (Auswahl aus Splashscreen + redirect)

  • team: TK & TWH, TV & KL
  • estimated time to complete: 1h
  • time spent on this task: 2h

Daten aus der MongoDB nach einer bestimmten Zeit entfernen

  • team: MW
  • estimated time to complete: 0h
  • time spend on this task: 3,5h

Overhead - Als Nutzer möchte ich eine qualitativ hohe Anwendung.
time planned on this story: 19h

Issues

  • team: TWH, TV & KL, CF & TS
  • estimated time to complete: 5h
  • time spent on this task: 5,5h

Refactoring

  • team: TWH, TV & KL, CF & TS
  • estimated time to complete: 3h
  • time spent on this task: 4,5h

Tests

  • team: TWH
  • estimated time to complete: 2,5h
  • time spent on this task: 1,5h

Wiki

  • team: TWH
  • estimated time to complete: 1h
  • time spent on this task: 2h

Branch Management / Merge Requests

  • team: MW, TWH & TK
  • estimated time to complete: 1h
  • time spent on this task: 1h

Sprint 3

User-Story: Ich als Dozent möchte über einen stets verfügbaren Button im Header-Bereich jederzeit in der Lage sein, all Studenten aus der Session zu entfernen (Not-Aus).

User-Story: Ich als Dozent möchte eine Infomeldung für jeden Studenten, damit dieser weiß, dass ich ihn (auch gezielt einen) aus der Session entfernen kann.
(+ Umsetzung)

User-Story: Verwalten (Import/Export)

Release 1.1

Der Release 1.1 soll bis zum 11.04.16 erreicht werden. Das Projekt wird in Gruppenarbeit mit je zwei Personen durchgeführt. Im Folgenden sind die einzelnen umzusetzenden Features definiert.

Feature Verwaltungs-View für Export und Import von Sessions

Dieses Feature realisiert das Exportieren, Importieren und Löschen von Quizzen. Eine separate View, welche vom Splash Screen der Landing-Page zugänglich ist, zeigt alle persönlichen Quizzes an. Bereits erstellte Quizzes können gelöscht oder exportiert werden. Durch den Export wird eine Datei zum Download bereitgestellt, welche alle benötigten Daten des Quizzes beinhaltet. Soll ein bereits exportiertes Quiz aus einer Datei wiederhergestellt werden, ist sie durch einen entsprechen Auswahldialog möglich.

GitHub-flavored-Markdown- und LaTeX-Integration

Dieser Release beinhaltet unter anderem die Integration von GitHub-flavored-Markdown und LaTeX in arsnova.click. Alle unterstützen Markdown-Auszeichnungen können hier nachgelesen werden: Markdown Cheatsheet.

Um die Verwendung für den Endanwender zu vereinfachen, wurde der Eingabe der Frage eine Markdown-Leiste hinzugefügt, welche die entsprechenden Auszeichnungen für bestehenden Text oder noch einzufügenden Text übernimmt: Markdown-bar.PNG

Über diese Leiste kann auch die LaTeX-Integration gesteuert werden. Hier wird zwischen der Inline-Formatierung (\(LaTeX-Code hier...\)) und der Absatz-Formatierung ($$LaTeX-Code hier...$$) unterschieden.

Alle Auszeichnungen sind ebenfalls in den Antwortoptionen anwendbar, allerdings wird hier keine unterstützende Markdown-Bar zur Verfügung gestellt.

APP Store Integration

iOS App Store

Sobald man von neu auf Anfängt sollte man diese Anleitung von oben nach unten durcharbeiten. Für updates reicht es die den Abschnitt "App hochladen" zu befolgen.

Entwicklungsumgebung

XCode

1. Laden Sie XCode aus dem App Store Ihres Mac's herunter
2. Öffnen Sie XCode
3. Gehen Sie in der Taskleiste auf "XCode > Preferences..."
4. Navigieren Sie zu "Account"
5. Klicken Sie auf das "+" unten Links und dann "Add Apple ID..."
6. Geben Sie Ihre Datene in und bestätigen Sie Ihre Eingabe mit "Sign in"

App Zertifikate erstellen

Signing Zertifikat erstellen

1. öffnen Sie das Member Center unter folgendem Link:

https://idmsa.apple.com/IDMSWebAuth/login?&appIdKey=891bd3417a7776362562d2197f89480a8547b108fd934911bcbea0110d07f757&path=%2F%2Fmembercenter%2Findex.action

2. Geben Sie Ihre Apple ID und Ihr Passwort ein

Fehler beim Erstellen des Vorschaubildes: Datei fehlt


3. Klicken Sie auf "Certificates, Identifiers & Profiles"

Fehler beim Erstellen des Vorschaubildes: Datei fehlt


4. Erstellen Sie ein neues Zertifikat mit dem Plus oben rechts

Fehler beim Erstellen des Vorschaubildes: Datei fehlt


5. Selectieren Sie den Typ des Zertifikates. Da wir sie in dem App Store veröffentlichen wollen wählen wir "App Store and Ad Hoc". Dann drücken Sie "continue".

Fehler beim Erstellen des Vorschaubildes: Datei fehlt


6. Machen Sie bitte mit der Anleitung Request a certificat

Fehler beim Erstellen des Vorschaubildes: Datei fehlt


7. Wählen Sie Ihr erstelltes Zertifikat aus und klicken Sie dann auf "continue"

Fehler beim Erstellen des Vorschaubildes: Datei fehlt


8.Downloaden Sie Ihr erstelltes Zertifikat und klicken Sie auf "done"

Fehler beim Erstellen des Vorschaubildes: Datei fehlt


9. Führen Sie das Zertifikat mit einem Doppelklick aus. 10. Klicken Sie in dem aufgehenden Menü auf Importieren.

Fehler beim Erstellen des Vorschaubildes: Datei fehlt


Request a certificate

1. Öffnen Sie die Schlüsselbundverwaltung Ihres Mac's.
2. Klicken Sie in der Taskleiste auf Schlüsselbundverwaltung > Zertifikatsassistent > Zertifikat einer Zertifizierungsinstanz anfordern
3. Füllen Sie die Daten aus und selektieren Sie "Auf der Festplatte sichern". Dann auf fortfahren woraufhin Sie aufgefordert werden den Speicherort zu wählen.

RequestCertificate.png


4. Nun können Sie mit Schritt 7 von Signing Zertifikat erstellen weiter machen.

APP Zertifikat erstellen

1. Auf Identifiers > App ID's klicken und dann mit dem dem "+" in der oberen rechten Ecke ein neues Zertifikat anlegen.

Fehler beim Erstellen des Vorschaubildes: Datei fehlt


2. Geben Sie die folgen Datenwie auf den Bildern gezeigt ein und drücken Sie danach auf "continue".

Fehler beim Erstellen des Vorschaubildes: Datei fehlt


Fehler beim Erstellen des Vorschaubildes: Datei fehlt


3. Im letzten Schritt überprüfen Sie nochmals die getätigten Einstellungen und klicken daraufhin auf "Register"

Fehler beim Erstellen des Vorschaubildes: Datei fehlt


App Beschreibung erstellen

1. Loggen Sie sich im Apple Member Center unter folgendem link ein:

https://idmsa.apple.com/IDMSWebAuth/login?&appIdKey=891bd3417a7776362562d2197f89480a8547b108fd934911bcbea0110d07f757&path=%2F%2Fmembercenter%2Flogin.action

2. Klicken Sie auf iTunes Connect

Fehler beim Erstellen des Vorschaubildes: Datei fehlt


3. Öffnen Sie "Meine Apps"

Fehler beim Erstellen des Vorschaubildes: Datei fehlt


4. Legen Sie durch das "+" oben links eine neue App an.

Fehler beim Erstellen des Vorschaubildes: Datei fehlt


5. Füllen Sie alles wie auf dem Bild zu sehen aus. Sie müssen lediglich Ihre erstellte Bundle ID zusätzlich auswählen. Daraufhin klicken Sie auf "Erstellen".

Fehler beim Erstellen des Vorschaubildes: Datei fehlt


6. Füllen Sie alle markierten Felder aus.

Fehler beim Erstellen des Vorschaubildes: Datei fehlt


7. Öffnen Sie in der linken Navigationsleiste "Preise und Verfügbarkeit"
8. Wählen Sie die Kosten für Ihre App aus und senden Sie dann das Formular mit "sichern" ab.

Fehler beim Erstellen des Vorschaubildes: Datei fehlt


9. Öffnen Sie in der linken Navigationsleiste "1.0 In Vorbereitung..."
10. Im letzten Schritt füllen Sie alle Felder auf dieser Seite aus und bestätigen Sie sie mit "sichern" in der oberen Leiste.
Die Bilder befinden sich im folgenden verzeichnis:

<arsnova.click dir>/docs/AppStoreScreenshots/iOS/
Fehler beim Erstellen des Vorschaubildes: Datei fehlt


Fehler beim Erstellen des Vorschaubildes: Datei fehlt


Fehler beim Erstellen des Vorschaubildes: Datei fehlt


Fehler beim Erstellen des Vorschaubildes: Datei fehlt


App kompilieren und hochladen

1. Öffnen Sie Ihr Terminal. 2. Navigiere zu

<arsnova.click home>/arsnova.click/ -> "cd <arsnova.click home>/arsnova.click/"

3. Führen Sie den folgen Befehl zum kompilieren der App aus:

sh build.sh

Dies wird einen Ordner "arsnova.click-build" erstellen worin alle kompilierten Dateien liegen.
4. Öffnen Sie die folgende Datei mit XCode:

<arsnova.click home>/arsnova.click/arsnova.click-build/ios/project/ARSnova.click.xcodeproj

5. Klicken Sie in der Taskleiste auf Product > clean.
6. Klicken Sie in der Taskleiste auf Product > archive
7. Drücken Sie auf "validate"

Fehler beim Erstellen des Vorschaubildes: Datei fehlt


8. Wählen Sie Ihr Profil aus.

Fehler beim Erstellen des Vorschaubildes: Datei fehlt


9. Klicken Sie auf "validate..."

Fehler beim Erstellen des Vorschaubildes: Datei fehlt


10. Klicken Sie auf "Upload to Appstore"

Fehler beim Erstellen des Vorschaubildes: Datei fehlt


11. Wählen Sie Ihr Profil aus und klicken Sie auf "choose"

Fehler beim Erstellen des Vorschaubildes: Datei fehlt


12. Im letzten Schritt drücken Sie lediglich auf "upload". Jetzt wird die App in iTunes Connect hochgeladen.

Google Play Store

Entwicklungsumgebung

Android SDK

1. Downloaden Sie "Android Studio" von folgender Webseite

https://developer.android.com/sdk/index.html

2. Installieren Sie Android Studio 3. Setzen Sie eine PATH Variable die folgendes beinhaltet

ANDROID_HOME=<<Android SDk installation Directory>>/sdk

Android App erstellen

1. Loggen Sie sich unter der folgenden Adresse ein:

https://play.google.com/apps/publish

2. Erstellen Sie eine neue App

Fehler beim Erstellen des Vorschaubildes: Datei fehlt


3. Wählen Sie eine Sprache, geben einen Namen ein und klicken dann auf "APK hochladen"

Fehler beim Erstellen des Vorschaubildes: Datei fehlt


4. Gehen Sie in der linken leiste auf "Stroe Eintrag"

Fehler beim Erstellen des Vorschaubildes: Datei fehlt


5. Füllen Sie auf dieser Seite alle markierten Punkte aus und klicken dann in der rechten oberen Ecke auf "Entwurf sichern"

Fehler beim Erstellen des Vorschaubildes: Datei fehlt


Die Bilder befinden sich im folgenden Verzeichnis:

<arsnova.click>/docs/AppStoreScreenshots/android
Fehler beim Erstellen des Vorschaubildes: Datei fehlt


Fehler beim Erstellen des Vorschaubildes: Datei fehlt


6. Gehen Sie in der linken Leiste auf "Preisgestaltung & Vertrieb"

Fehler beim Erstellen des Vorschaubildes: Datei fehlt


7. Füllen Sie auf dieser Seite alle markierten Punkte aus und klicken dann in der rechten oberen Ecke auf "Entwurf sichern"

Fehler beim Erstellen des Vorschaubildes: Datei fehlt


Fehler beim Erstellen des Vorschaubildes: Datei fehlt


Fehler beim Erstellen des Vorschaubildes: Datei fehlt


8. Gehen Sie in der linken Leiste auf "APK"

Fehler beim Erstellen des Vorschaubildes: Datei fehlt


9. Gehen Sie in dem Tab "Veröffentlicht" auf den Eintrag "eine APK in Produktionsphase hochladen"

Fehler beim Erstellen des Vorschaubildes: Datei fehlt


10. Laden Sie die erstellte APK Datei aus dem unten genannten Order hoch

<arsnova.click home>/arsnova.click/arsnova.click-build/arsnova.click-production.apk
Fehler beim Erstellen des Vorschaubildes: Datei fehlt


11. Gehen Sie in der linken Leiste auf "Einstufung des Inhalts" und Füllen Sie das Formular aus

Fehler beim Erstellen des Vorschaubildes: Datei fehlt


12. Veröffentlichen Sie die App

Fehler beim Erstellen des Vorschaubildes: Datei fehlt


Updates

1. Im Meteor Project muss in der Datei mobile-config.js im root Verzeichnis die Versionsnummer erhöht werden. Sonst kann die App im Apple Appstore nicht hochgeladen werden, da sich die Versionen unterscheiden müssen.
2. Öffnen Sie Ihr Terminal.
3. Navigiere zu

cd <arsnova.click home>/arsnova.click/

4. Führen Sie den folgen Befehl zum kompilieren der App aus:

sh build.sh
Android Keyphrase: arsnova.click

Dies wird einen Ordner "arsnova.click-build" erstellen worin alle kompilierten Dateien liegen.


Android

5. Online einloggen und die neue Version der App freigeben.

https://play.google.com/apps/publish

iOS

5. Machen Sie im Abschnitt [App kompilieren und Hochladen] ab Schritt 4 weiter.