vque.github.io/index.html at master · vque/vque.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>vque</title>
    <link href="style/bootstrap.min.css" rel="stylesheet">
    <link href="style/devices.min.css" rel="stylesheet">
    <link href="style/style.css" rel="stylesheet">
  </head>

  <body>
    <div class="container-fluid">
      <div class="row flex-wrap-reverse py-3 px-sm-5 my-sm-5 align-items-center">
        <div class="col-12 col-sm-auto">
          <div class="device-container">
            <div class="device device-iphone-8 d-inline-block">
              <div class="device-frame">
                <img class="device-content" src="image/student.svg">
              </div>
              <div class="device-stripe"></div>
              <div class="device-header"></div>
              <div class="device-sensors"></div>
              <div class="device-btns"></div>
              <div class="device-power"></div>
            </div>
          </div>
        </div>
        <div class="col" style="margin-bottom: 60px;">
          <h1 class="display-4 font-weight-normal text-muted"><span class="text-dark">v</span>irtual <span class="text-dark">que</span>uing system</h1>
          <p class="lead font-weight-normal">Virtuelle Warteschlange für praktische Kurse.</p>
          <a class="btn btn-outline-secondary" href="#">Coming soon</a>
        </div>
      </div>

      <div class="row bg-light py-3 px-sm-5 align-items-center">
        <div class="col">
          <h1 class="font-weight-normal text-muted">Funktionsweise</h1>
          <p>
            In verschiedenen Kursen stehen verschiedene Assistenten zur Verfügung,
            um die Arbeiten der Studenten zu testieren.
            Studenten stellen sich in einem Kurs an, indem sie einen oder mehrere
            der verfügbaren Assistenten auswählen. Der jeweils erste Student kann
            von den von ihm ausgewählten Assistenten aufgerufen werden.
          </p>
          <p>
            Während der Wartezeit kann jederzeit die eigene Position innerhalb
            der Warteschlange, sowie die Anzahl Studenten die ebenfalls für die
            gewählten Assistenten anstehen überprüft werden. Die Kombination der
            gewählten Assistenten kann jederzeit geändert werden.
          </p>
          <p class="text-center"><img class="shadow" src="image/display.svg" style="width: 100%; max-width: 700px;" /></p>
          <p>
            Stehen im Labor bzw. Phantomsaal Bildschirme zur Verfügung, kann dort
            eine Liste der aktuell anstehenden Studenten angezeigt werden.
          </p>
        </div>
      </div>

      <div class="row py-3 px-sm-5 align-items-center">
        <div class="col">
          <h1 class="font-weight-normal text-muted">Vorteile</h1>
          <p>
            Die Verwendung einer elektronischen Warteschlange bietet grundsätzlich
            die Möglichkeit, die Wartezeit sinnvoll zu nutzen. So kann während
            des Anstehens, um eine Arbeit vorzuzeigen, bereits an einer anderen
            weitergearbeitet werden.
          </p>
          <p>
            Im Gegensatz zu klassischen Lösungen wie Nummernziehautomaten kann
            die vque ohne Beschaffung teurer Hard- und Software genutzt werden.
            <br>
            Die Software ist Open Source und kostenfrei verfügbar. Von Studenten
            können private Smartphones genutzt werden. Für die Assistenten bietet
            sich die Nutzung von Tablets an.
            <br>
            Die serverseitige Software stellt keine hohen Anforderungen
            und kann meist auf bestehenden Serversystemen installiert werden.
          </p>
          <p>
            Mit der vque ist es wie beim klassischen Anstehen in einer Warteschlange
            möglich, sich zu entscheiden, anderen Studenten automatisch den Vortritt zu lassen,
            um beispielsweise eine kleine Korrektur wieder bei dem gleichen Assistenten
            vorzuzeigen. Dies ist mit vielen anderen Systemen nicht möglich.
          </p>
        </div>
        <div class="col-12 col-sm-auto text-center">
          <img class="shadow" src="image/admin.svg" style="width: 100%; max-width: 320px;" />
        </div>
      </div>

      <div class="row bg-light py-3 px-sm-5 align-items-center">
        <div class="col-12 col-sm-auto">
          <img class="shadow" src="image/source.png" style="width: 100%; max-width: 320px;" />
        </div>
        <div class="col">
          <h1 class="font-weight-normal text-muted">Technische Details</h1>
          <p>
            Die App ist mit <a href="https://facebook.github.io/react-native/">React Native</a>
            in Javascript geschrieben und somit für Android und iOS als
            vollwertige App und für alle weiteren Geräte als Webseite verfügbar.
            Die Apps bieten im Gegensatz zur Webseite native Funktionen wie
            Notifications und Vibrationsalarm.
          </p>
          <p>
            Der Server gliedert sich in mehrere Komponenten, die allesamt in
            Python geschrieben sind. Sie können über das
            <a href="https://www.python.org/dev/peps/pep-3333/">Web Server Gateway Interface (wsgi)</a>
            in einen bestehenden Webserver (z.B. via
            <a href="https://modwsgi.readthedocs.io/en/develop/">mod_wsgi</a>
            für Apache) eingebunden werden.
            <br>
            Zum Login können einer oder mehrere Authentication Server eingerichtet werden.
            Diese greifen auf eine eigene Datenbank zu oder fragen im Hintergrund
            bestehende Authentifikationssysteme der Universität ab.
            <br>
            Das eigentliche Backend der App wird als GraphQL Schnittstelle zur
            Verfügung gestellt und speichert den aktuellen Zustand der Warteschlangen
            in einer Datenbank, sodass dieser nach einem Neustart erhalten bleibt.
            <br>
            Wenn unter iOS und Android Push Notifications genutzt werden sollen,
            wird hierfür ein weiterer Server gestartet.
          </p>
        </div>
      </div>

      <div class="row py-3 px-sm-5">
        <div class="col-12">
          <h1 class="font-weight-normal text-muted">Entwickler</h1>
        </div>
        <div class="col my-2">
          <div class="row align-items-center flex-nowrap">
            <div class="col-auto author">
              <img src="image/moritz.png" />
            </div>
            <div class="col">
              Moritz Kanemeier<br>
              <a class="icon github" href="https://github.com/moritzmhmk">moritzmhmk</a><br>
              <a class="icon mail" href="mailto:moritzmhmk@gmail.com">moritzmhmk@gmail.com</a>
            </div>
          </div>
        </div>
        <div class="col my-2">
          <div class="row align-items-center flex-nowrap">
            <div class="col-auto author">
              <img src="image/lars.png" />
            </div>
            <div class="col">
              Lars Matzer<br>
              <a class="icon github" href="https://github.com/harmonica141">harmonica141</a><br>
              <a class="icon mail" href="mailto:l.matzer@web.de">l.matzer@web.de</a>
            </div>
          </div>
        </div>
      </div>

      <div class="row bg-light py-3 px-sm-5">
        <div class="col">
          <h1 class="font-weight-normal text-muted">Quellcode</h1>
          <p>
            Der Quellcode wird voraussichtlich im Herbst 2018 auf
            <a href="https://github.com/vque">GitHub</a> als Open Source veröffentlicht werden.
          </p>
        </div>
      </div>
      <div class="row text-muted py-3 px-sm-5">
        <div class="col">
          &copy; 2018 Moritz Kanemeier & Lars Matzer
        </div>
        <div class="col text-right">
          <a href="impressum.html">Impressum</a>
        </div>
      </div>
    </div>
  </body>
</html>