This repository has been archived by the owner on May 22, 2018. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 2
/
devs.html
331 lines (290 loc) · 15.6 KB
/
devs.html
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
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="Developer site of the HTWK-App" />
<meta name="author" content="Roy Meissner" />
<link rel="shortcut icon" href="assets/images/Icons/news.png" />
<title>HTWK-App - Entwickler</title>
<!-- Bootstrap + FontAwesome -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="assets/css/main.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous" defer>
<!-- Fonts from Google Fonts -->
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Lato:300,400,900" defer>
</head>
<style>
a.btn {
font-size: 130%;
margin: 7px;
}
a.btn i {
color: white;
}
@media (min-width: 1200px) {
#btn-2 {
margin-top: 51px;
}
}
</style>
<body>
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"><b>HTWK-APP</b></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>
<a class="page-scroll" href="#cs">Client-Server</a>
</li>
<li>
<a class="page-scroll" href="#app">Die App</a>
</li>
<li>
<a class="page-scroll" href="#server">Die Microservices</a>
</li>
<li>
<a class="page-scroll" href="#opensource">Mitmachen</a>
</li>
<li>
<a class="page-scroll" href="#team">Ansprechpartner</a>
</li>
</ul>
</div>
</div>
</div>
<div id="headerwrap">
<div class="container">
<div class="row">
<div class="col-lg-6">
<h1>Informationen zum Aufbau der HTWK-App</h1>
<br>
<ul class="listing">
<li>Was steckt eigentlich hinter der HTWK-App?</li>
<li>Welche Frameworks haben wir benutzt und warum?</li>
<li>Kann ich mich einbringen?</li>
</ul>
<br>
<h4 style="color:white">Das und vieles mehr werde ich dir auf dieser Seite erklären!</h4>
<br>
<br>
</div>
<!-- /col-lg-6 -->
<div class="col-lg-6">
<iframe frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" width="100%" height="430" src="https://prezi.com/embed/xq7xvvbtiikq/?bgcolor=ffffff&lock_to_path=0&autoplay=0&autohide_ctrls=0#"></iframe>
</div>
</div>
<!-- /row -->
</div>
<!-- /container -->
</div>
<!-- /headerwrap -->
<div id="cs" class="container">
<div class="row mt centered">
<div class="col-lg-6 col-lg-offset-3">
<h1>Client-Server Architektur</h1>
<h3>Die HTWK-App setzt auf die altbekannte Client-Server Architektur. Die App ist der Server und der Server der Client....äh, natürlich andersherum ;)</h3>
</div>
</div>
<!-- /row -->
<div class="row mt centered">
<div class="col-lg-4">
<img src="assets/images/Icons/website.png" width="128" height="128" alt="">
<h4>Webseite</h4>
<hr>
<p>Die App wurde als Webseite entworfen und setzt damit auf HTML, CSS und Javascript. Damit können wir den Studenten und Mitarbeitern der HTWK eine moderne Oberfläche präsentieren, die leicht umgebaut werden kann.</p>
<p> Wir benutzten <a href="//jquery.com/" target="_blank">jQuery</a> in Verbindung mit Javascript für die Logik, <a href="//jquerymobile.com/" target="_blank">jQueryMobile</a> für die UI und <a href="//fortawesome.github.io/Font-Awesome/" target="_blank">FontAwesome</a> für Icons. Die in der App angezeigten Daten werden brandaktuell und unter Nutzung neuster Technologien von mehreren Web-Diensten bezogen.</p>
</div>
<!--/col-lg-4 -->
<div class="col-lg-4">
<img src="assets/images/Icons/server.png" width="128" height="128" alt="">
<h4>Server</h4>
<hr>
<p>Auf unserem Server laufen mehrere <a href="//en.wikipedia.org/wiki/Microservices" target="_blank">Microservices</a>, die vornehmlich in Java und Scala geschrieben sind. Unter Java wird das <a href="//projects.spring.io/spring-framework/" target="_blank">Spring Framework</a>, unter Scala das <a href="//www.playframework.com" target="_blank">Play Framework</a> benutzt. Die Dienste bieten eine HTTP-Rest Schnittstelle an, von der JSON und teils RDF formatierte Daten bezogen werden können.</p>
<p>Der Server wird uns freundlicherweise vom Rechenzentrum der HTWK als virtuelle Maschine zur Verfügung gestellt.</p>
</div>
<!--/col-lg-4 -->
<div class="col-lg-4">
<img src="assets/images/Icons/app.png" width="128" height="128" alt="">
<h4>App</h4>
<hr>
<p>Das Framework <a href="//cordova.apache.org" target="_blank">Apache Cordova</a> transformiert die Webseite in eine App, die in alle gängigen App-Stores gestellt werden kann. Für den Google Play-Store haben wir das schon gemacht, für alle anderen suchen wir noch Möglichkeiten...(ganz ehrlich Apple...100$ pro Jahr für ein Non-Profit Projekt?!).</p>
<p>Under the Hood wird ein Browser auf deinem Smartphone gestartet, der die Webseite lädt, wobei die Bedienelemente ausgeblendet werden.</p>
</div>
<!--/col-lg-4 -->
</div>
<hr>
</div>
<!-- /container -->
<div id="app" class="container">
<div class="row mt centered">
<div class="col-lg-6 col-lg-offset-3">
<h1>Die App</h1>
<h3>Eine Web-Anwendung mit State of the Art Technologie und für jedes Gerät!</h3>
</div>
</div>
<!-- /row -->
<div class="row mt centered">
<div class="col-lg-4">
<p>Wie schon erwähnt ist die App eigentlich eine Webseite, die in jedem Browser aufgerufen werden kann (bspw. <a href="https://htwk-app.imn.htwk-leipzig.de/app" target="_blank">hier</a>). Je Menüpunkt innerhalb der App existiert eine HTML-Datei,
die das DOM und das dazugehörige Script kapselt. Allgemeine Funktionen und Libraries wurden in einzelne Javascript-Dateien ausgelagert.</p>
<p>Die gesamte Webseite wurde anhand der Vorschläge des Google Pagespeed Plugins optimiert. Trotzdem besteht hier noch einiger Bedarf. Gerade beim Starten der App geht alles recht zäh zu.</p>
</div>
<div class="col-lg-4">
<img src="assets/images/app/App.png" style="margin-left: -170px;">
</div>
<div class="col-lg-4">
<p>Alle persönlichen Daten werden innerhalb der App im <a href="http://www.w3schools.com/Html/html5_webstorage.asp" target="_blank">localstorage</a> des Browsers gespeichert. Sobald Daten über das Netzwerk übertragen werden, werden diese mit modernen
Verschlüsselungsverfahren abgesichert (TLS-Verschlüsselung (HTTPS)). Die Verschlüsslung wurde dabei durch den <a href="//www.ssllabs.com/ssltest/" target="_blank">SSL-Test von SSL Labs</a> geprüft und mit A+ bewertet.</p>
<p>Die App wird komplett öffentlich auf <a href="//github.com/HTWK-App/Smartphone-App" target="_blank">Github</a> entwickelt und steht unter einer Open-Source Lizenz (GPLv3). Wir freuen uns über jede Ünterstützung und helfen gern weiter =)</p>
</div>
</div>
<!-- /row -->
<hr>
</div>
<!--/container -->
<div id="server" class="container">
<div class="row mt centered">
<div class="col-lg-6 col-lg-offset-3">
<h1>Die Microservices</h1>
<h3>Neuste Technologie, coole Programmiersprachen, Frameworks die einen Blick lohnen und jede Menge Funktionen</h3>
</div>
</div>
<!-- /row -->
<div class="row mt centered">
<div class="col-lg-4">
<p>Anfang 2014 wurde ein Java-Dienst (<a href="//projects.spring.io/spring-framework/" target="_blank">Spring</a>) entwickelt, der aktuell den Großteil der Informationsbereitstellung übernimmt. Anfang 2015 wurde dieser um einige Microservices (<a href="//www.playframework.com" target="_blank">Scala-Play</a>) ergänzt, die Teile der bisherigen Anwendung überschatten (zwecks Fehlerbehebung) und neue Funktionalität hinzufügen. Die gesamte Struktur ist hinter einem <a href="//de.wikipedia.org/wiki/Reverse_Proxy" target="_blank">Reverse-Proxy</a> (Nginx) verschalten, um einen zentralen <a href="//github.com/HTWK-App/htwk-app.github.io/wiki/Server-API" target="_blank">Zugriffspunkt</a> zu schaffen</p>
<p>Wir benutzten <a href="//www.docker.com/" target="_blank">Docker</a> als Virtualisierungsumgebung, <a href="//newrelic.com/" target="_blank">NewRelic</a> für das Monitoring und <a href="//snap-ci.com/" target="_blank">Snap-CI</a> für <a href="https://de.wikipedia.org/wiki/Kontinuierliche_Integration" target="_blank">Continouos Integration</a>. Alles läuft auf einer virtuellen Maschine (<a href="http://www.ubuntu.com/server" target="_blank">Ubuntu 14.04</a>), mit freundlicher Unterstützung des Rechenzentrums der HTWK.</p>
<p>Alle Dienste stehen unter einer Open-Source Lizenz und können bei <a href="//github.com/HTWK-App" target="_blank">Github</a> eingesehen werden.</p>
</div>
<div class="col-lg-8">
<img src="assets/images/Microservices.svg" width="100%">
</div>
</div>
<!-- /row -->
<hr>
</div>
<!--/container -->
<div id="opensource" class="container">
<div class="row mt centered">
<div class="col-lg-8 col-lg-offset-2">
<h1>Bei uns mitwirken</h1>
<h4>Du bist engagiert, willst dich austoben oder einfach was zum experimentieren? Perfekt!</h4>
</div>
</div>
<!-- /row -->
<div class="row mt centered">
<div class="col-lg-4">
<h4>All unsere Entwicklungen sind bei <i>Github</i> gehostet. Wenn du einfach mal reingucken willst, wissen willst wie wir verschiedene Sachen gelöst haben oder ein paar Auswertungen laufen lassen möchtest, schau einfach mal vorbei!</h4><i>Auch wenn du kein Programmierer bist kannst du auf Github viel finden. Da gibt es Diagramme, ein Commit-Log, ein Wiki und auch einen Issue-Tracker</i>
<br>
<a href="//github.com/HTWK-App" target="_blank" class="btn btn-warning" role="button"><i class="fa fa-fw fa-lg fa-github"></i>Auf zu Github</a>
</div>
<!--/col-lg-4 -->
<div class="col-lg-4">
<h4>Bei uns kannst du dich mit <i>Web-Diensten</i> und einer <i>Web-Anwendung</i> beschäftigen. Willst du unsere Software erweitern, neue Konzepte einarbeiten oder Fehler beheben? Wir helfen gern und keine Angst: wir beißen nicht ;)</h4><i>Hast du schonmal von <a href="http://www.getmdl.io/index.html" target="_blank">Material Design Lite</a> gehört? Damit einen neuen Client zu schreiben wäre echt cool! Auch gern im Rahmen eines Studienprojekts!</i>
<br>
<a href="javascript:linkTo_UnCryptMailto('rfnqyt?wt~2rjnxxsjwElr}3sjy', 5);" target="_blank" class="btn btn-warning" id="btn-1" role="button"><i class="fa fa-fw fa-lg fa-envelope"></i>E-Mail an uns</a>
</div>
<!--/col-lg-4 -->
<div class="col-lg-4">
<h4>Du hast Ideen zum <i>Design</i> oder willst <i>Werbung</i> machen? Klasse! Wir freuen uns über Vorschläge, Poster, Visitenkarten, Icons und mehr =)</h4><i>Bis jetzt haben wir leider keinen Grafik-Designer. Ein neues Icon oder ein cooles Poster könnte dem Projekt auf keinen Fall schaden ;)</i>
<br>
<a href="//plus.google.com/101308405577100871741/about" target="_blank" class="btn btn-warning" id="btn-2" role="button"><i class="fa fa-fw fa-lg fa-google-plus"></i>Google Plus</a>
</div>
<!--/col-lg-4 -->
</div>
<!-- /row -->
<hr>
</div>
<!--/container -->
<div id="team" class="container">
<div class="row mt centered">
<div class="col-lg-6 col-lg-offset-3">
<h1>Ansprechpartner</h1>
</div>
</div>
<!-- /row -->
<div class="row mt centered" id="members">
<div class="col-lg-6">
<img class="img-circle" src="//avatars.githubusercontent.com/u/1965431?" width="140" alt="">
<h4>Henri Knochenhauer</h4>
<p>Java Server-Applikation
<br> Server-Betrieb
</p>
<p><i><a href="javascript:linkTo_UnCryptMailto('rfnqyt?mpsthmnElrfnq3htr', 5);"><i class="fa fa-lg fa-envelope"></i></a>
</i> <i><a href="http://www.hknochi.de/about" target="_blank"><i class="fa fa-lg fa-globe"></i></a>
</i>
</p>
</div>
<!--/col-lg-4 -->
<div class="col-lg-6">
<img class="img-circle" src="//avatars.githubusercontent.com/u/855967?" width="140" alt="">
<h4>Roy Meissner</h4>
<p>Projektleitung
<br> Web-Anwendung
<br> Scala-Microservices
<br> Server-Betrieb
</p>
<p><i><a href="javascript:linkTo_UnCryptMailto('rfnqyt?wt~2rjnxxsjwElr}3sjy', 5);"><i class="fa fa-lg fa-envelope"></i></a>
</i> <i><a href="//rmeissn.github.io" target="_blank"><i class="fa fa-lg fa-globe"></i></a>
</i>
</p>
</div>
<!--/col-lg-4 -->
</div>
<!-- /row -->
<hr>
</div>
<!-- /container -->
<footer class="footer">
<div class="container">
<p class="centered">Design by BlackTie.co - Attribution License 3.0 - 2014 , edited by us
<br/> Icons by <a href="http://www.pixelkit.com/" target="_blank">PixelKit</a> - Creative Commons Attribution 3.0 Unported (CC BY 3.0)</p>
</div>
</footer>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="application/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous" defer></script>
<script type="application/javascript" src="assets/javascript/docs.min.js"></script>
<script type="application/javascript" src="assets/javascript/prettify.js"></script>
<script type="application/javascript">
function UnCryptMailto(s, shift) {
var n = 0;
var r = "";
for (var i = 0; i < s.length; i++) {
n = s.charCodeAt(i);
if (n >= 8364) n = 128;
r += String.fromCharCode(n - (shift));
}
return r;
}
function linkTo_UnCryptMailto(s, shift) {
location.href = UnCryptMailto(s, shift);
}
// jQuery for page scrolling feature - requires jQuery Easing plugin
$('a.page-scroll').bind('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
// Closes the Responsive Menu on Menu Item Click
$('.navbar-collapse ul li a').click(function() {
$('.navbar-toggle:visible').click();
});
</script>
</body>
</html>