web_AI-5/presentation/presentation.html

401 lines
10 KiB
HTML

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8"/>
<title>Case-Study</title>
<meta name="author" content="(Ivan Hörler und Andreas Zweili)"/>
<style type="text/css">
.underline { text-decoration: underline; }
</style>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/reveal.js/3.0.0/css/reveal.css"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/reveal.js/3.0.0/css/theme/solarized.css" id="theme"/>
<!-- If the query includes 'print-pdf', include the PDF print sheet -->
<script>
if( window.location.search.match( /print-pdf/gi ) ) {
var link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'https://cdn.jsdelivr.net/reveal.js/3.0.0/css/print/pdf.css';
document.getElementsByTagName( 'head' )[0].appendChild( link );
}
</script>
</head>
<body>
<div class="reveal">
<div class="slides">
<section id="sec-title-slide"><h1 class="title">Case-Study</h1><h2 class="author">Ivan Hörler und Andreas Zweili</h2><p class="date">Created: 2018-03-15 Thu 08:11</p>
</section>
<section id="table-of-contents">
<div id="table-of-contents">
<h2>Inhaltsverzeichnis</h2>
<div id="text-table-of-contents">
<ul>
<li><a href="#/slide-orgc7bac3d">Ausgangslage</a></li>
<li><a href="#/slide-org4505ea0">Varianten</a></li>
<li><a href="#/slide-orgf23755d">Kosten</a></li>
<li><a href="#/slide-org0e33598">Vorgehen</a></li>
<li><a href="#/slide-org74efa28">Fazit</a></li>
<li><a href="#/slide-org53422e6">Besten Dank für die Aufmerksahmkeit.</a></li>
</ul>
</div>
</div>
</section>
<section>
<section id="slide-orgc7bac3d">
<h2 id="orgc7bac3d">Ausgangslage</h2>
<ul>
<li>Webshop erstellen</li>
<li>Währungsumrechnung CHF zu &#x2026;</li>
<li>Freie Software in Bezug auf Open-Source Code.</li>
</ul>
</section>
<section id="slide-orgffda324">
<h3 id="orgffda324">Vision</h3>
<p>
Die Vision wurde anhand eines Mindmaps erstmals grob umfasst:
</p>
<div class="figure">
<p><img src="pictures/webshop.png" alt="webshop.png" width="70%" />
</p>
</div>
</section>
<section id="slide-orgea85606">
<h3 id="orgea85606">Vision - Artikel</h3>
<div class="figure">
<p><img src="pictures/Vision-Artikel.png" alt="Vision-Artikel.png" width="80%" />
</p>
</div>
</section>
<section id="slide-org0f44f22">
<h3 id="org0f44f22">Vision - Warenkorb</h3>
<div class="figure">
<p><img src="pictures/Vision-Warenkorb.png" alt="Vision-Warenkorb.png" width="80%" />
</p>
</div>
</section>
</section>
<section>
<section id="slide-org4505ea0">
<h2 id="org4505ea0">Varianten</h2>
<div class="outline-text-2" id="text-org4505ea0">
</div>
</section>
<section id="slide-org197fb31">
<h3 id="org197fb31">C# und SQL Server</h3>
<div class="figure">
<p><img src="pictures/csharp.png" alt="csharp.png" />
</p>
</div>
</section>
<section id="slide-org54e84dd">
<h3 id="org54e84dd">Laravel und MySQL</h3>
<div class="figure">
<p><img src="pictures/laravel.png" alt="laravel.png" />
</p>
</div>
</section>
<section id="slide-org3a773d2">
<h3 id="org3a773d2">Django und MariaDB</h3>
<div class="figure">
<p><img src="pictures/django.png" alt="django.png" />
</p>
</div>
</section>
<section id="slide-org4ee31b4">
<h3 id="org4ee31b4">Kriterien</h3>
<ul>
<li>Freie Software</li>
<li>Cross Plattform nutzbar</li>
<li>Lesbarkeit des Codes</li>
<li>Einfachheit des Setups</li>
<li>Ohne spezielle Tools nutzbar</li>
<li>Vorkenntnisse und Lernfaktor</li>
</ul>
</section>
<section id="slide-org920eaec">
<h3 id="org920eaec">Vergleich</h3>
<table border="2" cellspacing="0" cellpadding="6" rules="groups" frame="hsides">
<colgroup>
<col class="org-left" />
<col class="org-right" />
</colgroup>
<thead>
<tr>
<th scope="col" class="org-left"><b>Variante</b></th>
<th scope="col" class="org-right"><b>Erreichte Punktzahl von 235</b></th>
</tr>
</thead>
<tbody>
<tr>
<td class="org-left">ASP.NET und SQL Server</td>
<td class="org-right">141</td>
</tr>
<tr>
<td class="org-left">PHP und MySQL</td>
<td class="org-right">161</td>
</tr>
<tr>
<td class="org-left">Django und MariaDB</td>
<td class="org-right">196</td>
</tr>
</tbody>
</table>
</section>
</section>
<section>
<section id="slide-orgf23755d">
<h2 id="orgf23755d">Kosten</h2>
<div class="outline-text-2" id="text-orgf23755d">
</div>
</section>
<section id="slide-org81402e8">
<h3 id="org81402e8">Laravel Webshop</h3>
<table border="2" cellspacing="0" cellpadding="6" rules="groups" frame="hsides">
<colgroup>
<col class="org-left" />
<col class="org-left" />
</colgroup>
<thead>
<tr>
<th scope="col" class="org-left">Sprache</th>
<th scope="col" class="org-left">Codezeilen</th>
</tr>
</thead>
<tbody>
<tr>
<td class="org-left">PHP</td>
<td class="org-left">8679</td>
</tr>
</tbody>
<tbody>
<tr>
<td class="org-left"><b>Total</b></td>
<td class="org-left"><b>8679</b></td>
</tr>
</tbody>
</table>
</section>
<section id="slide-org9461b82">
<h3 id="org9461b82">Django Webshop</h3>
<table border="2" cellspacing="0" cellpadding="6" rules="groups" frame="hsides">
<colgroup>
<col class="org-left" />
<col class="org-right" />
</colgroup>
<thead>
<tr>
<th scope="col" class="org-left">Sprache</th>
<th scope="col" class="org-right">Codezeilen</th>
</tr>
</thead>
<tbody>
<tr>
<td class="org-left">Python</td>
<td class="org-right">1460</td>
</tr>
<tr>
<td class="org-left">SQL</td>
<td class="org-right">4639</td>
</tr>
</tbody>
<tbody>
<tr>
<td class="org-left"><b>Total</b></td>
<td class="org-right"><b>6099</b></td>
</tr>
</tbody>
</table>
</section>
</section>
<section>
<section id="slide-org0e33598">
<h2 id="org0e33598">Vorgehen</h2>
<div class="outline-text-2" id="text-org0e33598">
</div>
</section>
<section id="slide-orga69f68a">
<h3 id="orga69f68a">Currencies - App</h3>
<ul>
<li>Wurde in Django als eigenen App entwickelt und sollte daher problemlos in andere Applikationen eingebunden werden können.</li>
<li>Die Quelle der Währungen ist die Schweizerische Nationalbank mit der URL:</li>
</ul>
<p>
<a href="https://www.snb.ch">https://www.snb.ch</a>
</p>
<p>
<a href="https://www.snb.ch/selector/de/mmr/exfeed/rss">https://www.snb.ch/selector/de/mmr/exfeed/rss</a>
</p>
<div class="figure">
<p><img src="pictures/currencies-rss-reader.png" alt="currencies-rss-reader.png" width="80%" />
</p>
</div>
</section>
<section id="slide-org0a0e4df">
<h3 id="org0a0e4df">Currencies - Quelle</h3>
<div class="figure">
<p><img src="pictures/currencies-rss-xml.png" alt="currencies-rss-xml.png" />
</p>
</div>
</section>
<section id="slide-org9780263">
<h3 id="org9780263">Currencies - Parsing</h3>
<ul>
<li>Das Konvertieren des XML&rsquo;s wurde mit Python eigener Module gemacht.</li>
<li>für das Herunterladen des XML&rsquo;s wurde das Modul &rsquo;urllib&rsquo; verwendet (1)</li>
<li>für das Parsen über die einzelnen items/nodes das Modul xml.etree.ElementTree. (2)</li>
<li><a href="https://docs.python.org/2/library/urllib.html">https://docs.python.org/2/library/urllib.html</a></li>
<li><a href="https://docs.python.org/2/library/xml.etree.elementtree.html">https://docs.python.org/2/library/xml.etree.elementtree.html</a></li>
</ul>
</section>
<section id="slide-orgff44fe9">
<h3 id="orgff44fe9">Currencies - Ablauf</h3>
<div class="figure">
<p><img src="pictures/currencies.png" alt="currencies.png" width="55%" />
</p>
</div>
</section>
<section id="slide-org3287a1a">
<h3 id="org3287a1a">Infrastruktur</h3>
<aside class="notes">
<p>
Andreas erzählt wie die infrastruktur aufgebaut ist.
</p>
</aside>
<div class="figure">
<p><img src="pictures/Server-Architecture.png" alt="Server-Architecture.png" width="90%" />
</p>
</div>
</section>
<section id="slide-orgc772f3a">
<h3 id="orgc772f3a">Programmierung</h3>
<div class="figure">
<p><img src="pictures/form.png" alt="form.png" width="60%" />
</p>
</div>
<div class="org-src-container">
<pre class="src src-python"><span style="color: #657b83; background-color: #fdf6e3;">amount_form</span> = CartForm<span style="color: #268bd2;">(</span>
<span style="color: #93a1a1; background-color: #eee8d5;"> </span> <span style="color: #657b83; background-color: #fdf6e3;">initial</span>=<span style="color: #2aa198;">{</span><span style="color: #2aa198;">'amount_form'</span>: cart_position.amount<span style="color: #2aa198;">}</span>
<span style="color: #268bd2;">)</span>
</pre>
</div>
</section>
</section>
<section>
<section id="slide-org74efa28">
<h2 id="org74efa28">Fazit</h2>
<ul>
<li>Trotz Model View Controll, SQL unerlässlich.</li>
<li>Vagrant (up, suspend, provision, destroy)</li>
<li>Git, Python/Django, JS brauchts trotzdem.</li>
</ul>
</section>
</section>
<section>
<section id="slide-org53422e6">
<h2 id="org53422e6">Besten Dank für die Aufmerksahmkeit.</h2>
<p>
Ivan &amp; Andreas
</p>
</section>
</section>
</div>
</div>
<script src="https://cdn.jsdelivr.net/reveal.js/3.0.0/lib/js/head.min.js"></script>
<script src="https://cdn.jsdelivr.net/reveal.js/3.0.0/js/reveal.js"></script>
<script>
// Full list of configuration options available here:
// https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
controls: true,
progress: true,
history: false,
center: true,
slideNumber: 'c',
rollingLinks: false,
keyboard: true,
overview: true,
theme: Reveal.getQueryHash().theme, // available themes are in /css/theme
transition: Reveal.getQueryHash().transition || 'linear', // default/cube/page/concave/zoom/linear/fade/none
transitionSpeed: 'default',
multiplex: {
secret: '', // null if client
id: '', // id, obtained from socket.io server
url: '' // Location of socket.io server
},
// Optional libraries used to extend on reveal.js
dependencies: [
{ src: 'https://cdn.jsdelivr.net/reveal.js/3.0.0/lib/js/classList.js', condition: function() { return !document.body.classList; } },
{ src: 'https://cdn.jsdelivr.net/reveal.js/3.0.0/plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'https://cdn.jsdelivr.net/reveal.js/3.0.0/plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'https://cdn.jsdelivr.net/reveal.js/3.0.0/plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } },
{ src: 'https://cdn.jsdelivr.net/reveal.js/3.0.0/plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } }]
});
</script>
</body>
</html>