ibz
/
web_AI-5
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

compiled

This commit is contained in:
Ivan Hörler 2018-03-15 08:13:07 +01:00
parent a22d0fb7bd
commit 788ae79753
1 changed files with 87 additions and 124 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

211
presentation/presentation.html
View File

@ -26,39 +26,37 @@
<body> <body>
<div class="reveal"> <div class="reveal">
<div class="slides"> <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-14 Wed 15:41</p> <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>
<section id="table-of-contents"> <section id="table-of-contents">
<div id="table-of-contents"> <div id="table-of-contents">
<h2>Inhaltsverzeichnis</h2> <h2>Inhaltsverzeichnis</h2>
<div id="text-table-of-contents"> <div id="text-table-of-contents">
<ul> <ul>
<li><a href="#/slide-orgc489b83">Ausgangslage</a></li> <li><a href="#/slide-orgc7bac3d">Ausgangslage</a></li>
<li><a href="#/slide-orgb5dc558">Varianten</a></li> <li><a href="#/slide-org4505ea0">Varianten</a></li>
<li><a href="#/slide-org150a574">Kosten</a></li> <li><a href="#/slide-orgf23755d">Kosten</a></li>
<li><a href="#/slide-org5370538">Vorgehen</a></li> <li><a href="#/slide-org0e33598">Vorgehen</a></li>
<li><a href="#/slide-org62d970d">Fazit</a></li> <li><a href="#/slide-org74efa28">Fazit</a></li>
<li><a href="#/slide-org53422e6">Besten Dank für die Aufmerksahmkeit.</a></li>
</ul> </ul>
</div> </div>
</div> </div>
</section> </section>
<section> <section>
<section id="slide-orgc489b83"> <section id="slide-orgc7bac3d">
<h2 id="orgc489b83">Ausgangslage</h2> <h2 id="orgc7bac3d">Ausgangslage</h2>
<ul> <ul>
<li>Webshop erstellen</li>
<li>Währungsumrechnung CHF zu &#x2026;</li>
<li>Freie Software in Bezug auf Open-Source Code.</li> <li>Freie Software in Bezug auf Open-Source Code.</li>
</ul> </ul>
<p>
Um einen ersten Anhaltspunkt zu haben, haben wir ein Mindmap gezeichnet in
welchem wir unsere ersten Ideen erfassten.
</p>
</section> </section>
<section id="slide-orgff3d075"> <section id="slide-orgffda324">
<h3 id="orgff3d075">Vision</h3> <h3 id="orgffda324">Vision</h3>
<p> <p>
Die Vision wurde anhand eines Mindmaps erstmals grob umfasst: Die Vision wurde anhand eines Mindmaps erstmals grob umfasst:
</p> </p>
@ -70,8 +68,8 @@ Die Vision wurde anhand eines Mindmaps erstmals grob umfasst:
</div> </div>
</section> </section>
<section id="slide-orgb5960bc"> <section id="slide-orgea85606">
<h3 id="orgb5960bc">Vision - Artikel</h3> <h3 id="orgea85606">Vision - Artikel</h3>
<div class="figure"> <div class="figure">
<p><img src="pictures/Vision-Artikel.png" alt="Vision-Artikel.png" width="80%" /> <p><img src="pictures/Vision-Artikel.png" alt="Vision-Artikel.png" width="80%" />
@ -79,33 +77,24 @@ Die Vision wurde anhand eines Mindmaps erstmals grob umfasst:
</div> </div>
</section> </section>
<section id="slide-org723bfed"> <section id="slide-org0f44f22">
<h3 id="org723bfed">Vision - Warenkorb</h3> <h3 id="org0f44f22">Vision - Warenkorb</h3>
<div class="figure"> <div class="figure">
<p><img src="pictures/Vision-Warenkorb.png" alt="Vision-Warenkorb.png" width="80%" /> <p><img src="pictures/Vision-Warenkorb.png" alt="Vision-Warenkorb.png" width="80%" />
</p> </p>
</div> </div>
</section>
<section id="slide-orgafe16fc">
<h3 id="orgafe16fc">Vision - Abgaben</h3>
<div class="figure">
<p><img src="pictures/Vision-Abgaben.png" alt="Vision-Abgaben.png" width="80%" />
</p>
</div>
</section> </section>
</section> </section>
<section> <section>
<section id="slide-orgb5dc558"> <section id="slide-org4505ea0">
<h2 id="orgb5dc558">Varianten</h2> <h2 id="org4505ea0">Varianten</h2>
<div class="outline-text-2" id="text-orgb5dc558"> <div class="outline-text-2" id="text-org4505ea0">
</div> </div>
</section> </section>
<section id="slide-orgcc02b2b"> <section id="slide-org197fb31">
<h3 id="orgcc02b2b">C# und SQL Server</h3> <h3 id="org197fb31">C# und SQL Server</h3>
<div class="figure"> <div class="figure">
<p><img src="pictures/csharp.png" alt="csharp.png" /> <p><img src="pictures/csharp.png" alt="csharp.png" />
@ -113,8 +102,8 @@ Die Vision wurde anhand eines Mindmaps erstmals grob umfasst:
</div> </div>
</section> </section>
<section id="slide-org5e9536b"> <section id="slide-org54e84dd">
<h3 id="org5e9536b">Laravel und MySQL</h3> <h3 id="org54e84dd">Laravel und MySQL</h3>
<div class="figure"> <div class="figure">
<p><img src="pictures/laravel.png" alt="laravel.png" /> <p><img src="pictures/laravel.png" alt="laravel.png" />
@ -122,8 +111,8 @@ Die Vision wurde anhand eines Mindmaps erstmals grob umfasst:
</div> </div>
</section> </section>
<section id="slide-org6a465f6"> <section id="slide-org3a773d2">
<h3 id="org6a465f6">Django und MariaDB</h3> <h3 id="org3a773d2">Django und MariaDB</h3>
<div class="figure"> <div class="figure">
<p><img src="pictures/django.png" alt="django.png" /> <p><img src="pictures/django.png" alt="django.png" />
@ -131,21 +120,21 @@ Die Vision wurde anhand eines Mindmaps erstmals grob umfasst:
</div> </div>
</section> </section>
<section id="slide-org828caad"> <section id="slide-org4ee31b4">
<h3 id="org828caad">Kriterien</h3> <h3 id="org4ee31b4">Kriterien</h3>
<ul> <ul>
<li>Freie Software</li> <li>Freie Software</li>
<li>Cross Plattform nutzbar</li> <li>Cross Plattform nutzbar</li>
<li>Lesbarkeit des Codes</li> <li>Lesbarkeit des Codes</li>
<li>Einfachheit des Setups</li> <li>Einfachheit des Setups</li>
<li>Ohne spezielle Tools nutzbar</li> <li>Ohne spezielle Tools nutzbar</li>
<li>Vorkenntnisse Lernfaktor</li> <li>Vorkenntnisse und Lernfaktor</li>
</ul> </ul>
</section> </section>
<section id="slide-orgc207dd7"> <section id="slide-org920eaec">
<h3 id="orgc207dd7">Vergleich</h3> <h3 id="org920eaec">Vergleich</h3>
<table border="2" cellspacing="0" cellpadding="6" rules="groups" frame="hsides"> <table border="2" cellspacing="0" cellpadding="6" rules="groups" frame="hsides">
@ -157,7 +146,7 @@ Die Vision wurde anhand eines Mindmaps erstmals grob umfasst:
<thead> <thead>
<tr> <tr>
<th scope="col" class="org-left"><b>Variante</b></th> <th scope="col" class="org-left"><b>Variante</b></th>
<th scope="col" class="org-right"><b>Erreichte Punktzahl</b></th> <th scope="col" class="org-right"><b>Erreichte Punktzahl von 235</b></th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@ -178,20 +167,16 @@ Die Vision wurde anhand eines Mindmaps erstmals grob umfasst:
</tbody> </tbody>
</table> </table>
</section>
<section id="slide-orgd5e840b">
<h3 id="orgd5e840b">Auswahl</h3>
</section> </section>
</section> </section>
<section> <section>
<section id="slide-org150a574"> <section id="slide-orgf23755d">
<h2 id="org150a574">Kosten</h2> <h2 id="orgf23755d">Kosten</h2>
<div class="outline-text-2" id="text-org150a574"> <div class="outline-text-2" id="text-orgf23755d">
</div> </div>
</section> </section>
<section id="slide-org9461dcd"> <section id="slide-org81402e8">
<h3 id="org9461dcd">Laravel Webshop</h3> <h3 id="org81402e8">Laravel Webshop</h3>
<table border="2" cellspacing="0" cellpadding="6" rules="groups" frame="hsides"> <table border="2" cellspacing="0" cellpadding="6" rules="groups" frame="hsides">
@ -221,8 +206,8 @@ Die Vision wurde anhand eines Mindmaps erstmals grob umfasst:
</table> </table>
</section> </section>
<section id="slide-org18e9a41"> <section id="slide-org9461b82">
<h3 id="org18e9a41">Django Webshop</h3> <h3 id="org9461b82">Django Webshop</h3>
<table border="2" cellspacing="0" cellpadding="6" rules="groups" frame="hsides"> <table border="2" cellspacing="0" cellpadding="6" rules="groups" frame="hsides">
@ -259,28 +244,25 @@ Die Vision wurde anhand eines Mindmaps erstmals grob umfasst:
</section> </section>
</section> </section>
<section> <section>
<section id="slide-org5370538"> <section id="slide-org0e33598">
<h2 id="org5370538">Vorgehen</h2> <h2 id="org0e33598">Vorgehen</h2>
<div class="outline-text-2" id="text-org5370538"> <div class="outline-text-2" id="text-org0e33598">
</div> </div>
</section> </section>
<section id="slide-orge7824f4"> <section id="slide-orga69f68a">
<h3 id="orge7824f4">Currencies - App</h3> <h3 id="orga69f68a">Currencies - App</h3>
<ul> <ul>
<li>Wurde in Django als eigenen App entwickelt und sollte daher problemloos in</li> <li>Wurde in Django als eigenen App entwickelt und sollte daher problemlos in andere Applikationen eingebunden werden können.</li>
</ul>
<p>
andere Applikationen eingebunden werden können.
</p>
<ul>
<li>Die Quelle der Währungen ist die Schweizerische Nationalbank mit der URL:</li> <li>Die Quelle der Währungen ist die Schweizerische Nationalbank mit der URL:</li>
</ul> </ul>
<p> <p>
<a href="https://www.snb.ch">https://www.snb.ch</a> | resp: <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> <a href="https://www.snb.ch/selector/de/mmr/exfeed/rss">https://www.snb.ch/selector/de/mmr/exfeed/rss</a>
</p> </p>
@ -291,32 +273,30 @@ andere Applikationen eingebunden werden können.
</div> </div>
</section> </section>
<section id="slide-orgde14a58"> <section id="slide-org0a0e4df">
<h3 id="orgde14a58">Currencies - Quelle</h3> <h3 id="org0a0e4df">Currencies - Quelle</h3>
<div class="figure"> <div class="figure">
<p><img src="pictures/currencies-rss-xml.png" alt="currencies-rss-xml.png" width="80%" /> <p><img src="pictures/currencies-rss-xml.png" alt="currencies-rss-xml.png" />
</p> </p>
</div> </div>
</section> </section>
<section id="slide-org6d79140"> <section id="slide-org9780263">
<h3 id="org6d79140">Currencies - Parsing</h3> <h3 id="org9780263">Currencies - Parsing</h3>
<ul> <ul>
<li>Das Konvertieren des XML&rsquo;s wurde mit Python eigener Module gemacht.</li> <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 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>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> </ul>
<p>
(1) <a href="https://docs.python.org/2/library/urllib.html">https://docs.python.org/2/library/urllib.html</a>
(2) <a href="https://docs.python.org/2/library/xml.etree.elementtree.html">https://docs.python.org/2/library/xml.etree.elementtree.html</a>
</p>
</section> </section>
<section id="slide-org22561e4"> <section id="slide-orgff44fe9">
<h3 id="org22561e4">Currencies - Ablauf</h3> <h3 id="orgff44fe9">Currencies - Ablauf</h3>
<div class="figure"> <div class="figure">
<p><img src="pictures/currencies.png" alt="currencies.png" width="55%" /> <p><img src="pictures/currencies.png" alt="currencies.png" width="55%" />
@ -324,8 +304,8 @@ andere Applikationen eingebunden werden können.
</div> </div>
</section> </section>
<section id="slide-orgeb66642"> <section id="slide-org3287a1a">
<h3 id="orgeb66642">Infrastruktur</h3> <h3 id="org3287a1a">Infrastruktur</h3>
<aside class="notes"> <aside class="notes">
<p> <p>
Andreas erzählt wie die infrastruktur aufgebaut ist. Andreas erzählt wie die infrastruktur aufgebaut ist.
@ -335,65 +315,48 @@ Andreas erzählt wie die infrastruktur aufgebaut ist.
<div class="figure"> <div class="figure">
<p><img src="pictures/Server-Architecture.png" alt="Server-Architecture.png" width="60%" /> <p><img src="pictures/Server-Architecture.png" alt="Server-Architecture.png" width="90%" />
</p> </p>
</div> </div>
</section> </section>
<section id="slide-org50acd06"> <section id="slide-orgc772f3a">
<h3 id="org50acd06">Programmierung</h3> <h3 id="orgc772f3a">Programmierung</h3>
<p>
vieleicht zwei Schwierigkeiten
</p>
</section> <div class="figure">
<section id="slide-org4225190"> <p><img src="pictures/form.png" alt="form.png" width="60%" />
<h3 id="org4225190">Programmierung - Hürde #1</h3>
<ul>
<li>Django hat ein modul das die Forms speziell handelt so dass man mit wehnig Code</li>
</ul>
<p>
Einen HTML Button oder ein Feld erzeugen kann.
</p> </p>
<ul> </div>
<li>Die schwierigkeit war nun heraus zu finden wie man dem Feld ein von der DB stammenden</li>
</ul> <div class="org-src-container">
<p>
default wert mitgeben konnte.
</p>
<ul>
<li>Es stellte sich heraus dass das Feld ein Key: Value paar benötigte um zu wissen wohin es</li>
</ul> <pre class="src src-python"><span style="color: #657b83; background-color: #fdf6e3;">amount_form</span> = CartForm<span style="color: #268bd2;">(</span>
<p> <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>
den wert schreiben soll&#x2026;. <span style="color: #268bd2;">)</span>
</p> </pre>
</div>
<p>
Note: hier den code higlighter einfügen:
amount_form = CartForm(
initial={&rsquo;amount_form&rsquo;: cart_position.amount}
)
</p>
</section> </section>
</section> </section>
<section> <section>
<section id="slide-org62d970d"> <section id="slide-org74efa28">
<h2 id="org62d970d">Fazit</h2> <h2 id="org74efa28">Fazit</h2>
<p>
special thanks to:
</p>
<ul> <ul>
<li>draw.io,</li> <li>Trotz Model View Controll, SQL unerlässlich.</li>
<li>Python,</li> <li>Vagrant (up, suspend, provision, destroy)</li>
<li>Django,</li> <li>Git, Python/Django, JS brauchts trotzdem.</li>
<li>stackexchange and</li>
<li>Beer.</li>
</ul> </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>
</section> </section>
</div> </div>