{"id":423,"date":"2018-06-17T21:37:11","date_gmt":"2018-06-17T21:37:11","guid":{"rendered":"https:\/\/www.wpvs.de\/iot-2018\/?p=423"},"modified":"2021-05-14T10:07:04","modified_gmt":"2021-05-14T08:07:04","slug":"fahrtenbuch-4-web-oberflaeche","status":"publish","type":"post","link":"https:\/\/www.iot-embedded.de\/iot-2018\/projekt-fahrtenbuch\/fahrtenbuch-4-web-oberflaeche\/","title":{"rendered":"Fahrtenbuch (4): Web-Oberfl\u00e4che"},"content":{"rendered":"<p>F\u00fcr die Ansicht der Fahrten, der Administration der Fahrzeuge und Nutzer sowie der Erstellung der Fahrtenb\u00fccher wird eine Web-Oberfl\u00e4che auf einem externen Server genutzt.<\/p>\n<p>&nbsp;<\/p>\n<p>Per REST-Schnittstelle soll der RaspberryPi im Auto die aufgezeichneten Daten an eine Datenbank senden. Der Webserver greift auf diese in <a href=\"https:\/\/www.wpvs.de\/iot-2018\/projekt-fahrtenbuch\/fahrtenbuch-1-idee-und-architektur\/\">Statusbereicht 1<\/a> beschriebene zu.<\/p>\n<p>&nbsp;<\/p>\n<p>Die Web-Oberfl\u00e4che ist \u00fcber <a href=\"https:\/\/track.mrzo.de\">https:\/\/track.mrzo.de<\/a> erreichbar.<\/p>\n<p>&nbsp;<\/p>\n<p>Die Web-Oberfl\u00e4che bietet f\u00fcnf Navigationspunkte:<\/p>\n<ul>\n<li>Home<\/li>\n<li>Historie<\/li>\n<li>Fahrtenbuch<\/li>\n<li>Fahrzeuge<\/li>\n<li>Nutzer<\/li>\n<\/ul>\n<p>Die Seite nutzt das <a href=\"https:\/\/getbootstrap.com\/\">Bootstrap-Framework<\/a>. Damit ist es verh\u00e4ltnism\u00e4\u00dfig einfach, eine saubere und konsistente Oberfl\u00e4che zu gestalten. Die gespeicherten Fahrten werden mithilfe der <a href=\"https:\/\/developers.google.com\/maps\/web\/?hl=de\">Google-Maps-Api<\/a> dargestelt.<\/p>\n<p><a href=\"http:\/\/www.iot-embedded.de\/iot-2018\/wp-content\/uploads\/sites\/3\/2018\/06\/Unbenannt.jpg\"><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter wp-image-428 size-full\" src=\"http:\/\/www.iot-embedded.de\/iot-2018\/wp-content\/uploads\/sites\/3\/2018\/06\/Unbenannt.jpg\" alt=\"\" width=\"1216\" height=\"701\" srcset=\"https:\/\/www.iot-embedded.de\/iot-2018\/wp-content\/uploads\/sites\/3\/2018\/06\/Unbenannt.jpg 1216w, https:\/\/www.iot-embedded.de\/iot-2018\/wp-content\/uploads\/sites\/3\/2018\/06\/Unbenannt-300x173.jpg 300w, https:\/\/www.iot-embedded.de\/iot-2018\/wp-content\/uploads\/sites\/3\/2018\/06\/Unbenannt-1024x590.jpg 1024w, https:\/\/www.iot-embedded.de\/iot-2018\/wp-content\/uploads\/sites\/3\/2018\/06\/Unbenannt-768x443.jpg 768w\" sizes=\"(max-width: 1216px) 100vw, 1216px\" \/><\/a><\/p>\n<p>Die Wegpunkte werden so auf die Stra\u00dfen gelegt und die k\u00fcrzeste Route zwischen diesen ermittelt. Ebenso berechnet die Google-Maps-Api die gefahrene Strecke und die daf\u00fcr verwendete Zeit. In der Datenbank ist eine Fahrt in json-Format gespeichert. Diese kann die Google-Maps-Api direkt interpretieren und darstellen:<\/p>\n<blockquote><p>{<\/p>\n<p>&#8222;origin&#8220;:{&#8222;location&#8220;:{&#8222;lat&#8220;:49.0544412,&#8220;lng&#8220;:7.433808999999997}},<\/p>\n<p>&#8222;destination&#8220;:{&#8222;location&#8220;:{&#8222;lat&#8220;:49.115484,&#8220;lng&#8220;:7.550617999999986}},<\/p>\n<p>&#8222;avoidTolls&#8220;:false,<\/p>\n<p>&#8222;avoidHighways&#8220;:false,<\/p>\n<p>&#8222;waypoints&#8220;:[<\/p>\n<p style=\"padding-left: 30px\">{&#8222;location&#8220;:{&#8222;location&#8220;:{&#8222;lat&#8220;:49.0974009,&#8220;lng&#8220;:7.477826600000071}},<\/p>\n<p style=\"padding-left: 30px\">&#8222;stopover&#8220;:false}<\/p>\n<p style=\"padding-left: 30px\">],<\/p>\n<p>&#8222;travelMode&#8220;:&#8220;DRIVING&#8220;<\/p>\n<p>}<\/p><\/blockquote>\n<p>F\u00fcr das dynamische Laden der Daten wird AJAX verwendet. Mithilfe des JS-Frameworks jQuery ist dies einfach m\u00f6glich (<a href=\"https:\/\/api.jquery.com\/jquery.get\/\">https:\/\/api.jquery.com\/jquery.get\/<\/a>). Somit k\u00f6nnen Ladezeiten minimiert werden, da erst beim Aufklappen der Kartenansicht die Datenbankabfrage gestartet wird. Bei statischen Abfragen, z.B. die Anzeige der Fahrzeuge, wird die mySql-Verbindung direkt mittels PHP hergestellt.<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>F\u00fcr die Ansicht der Fahrten, der Administration der Fahrzeuge und Nutzer sowie der Erstellung der Fahrtenb\u00fccher wird eine Web-Oberfl\u00e4che auf einem externen Server genutzt. &nbsp; Per REST-Schnittstelle soll der RaspberryPi im Auto die aufgezeichneten Daten an eine Datenbank senden. Der<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[2],"tags":[],"_links":{"self":[{"href":"https:\/\/www.iot-embedded.de\/iot-2018\/wp-json\/wp\/v2\/posts\/423"}],"collection":[{"href":"https:\/\/www.iot-embedded.de\/iot-2018\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.iot-embedded.de\/iot-2018\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.iot-embedded.de\/iot-2018\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.iot-embedded.de\/iot-2018\/wp-json\/wp\/v2\/comments?post=423"}],"version-history":[{"count":1,"href":"https:\/\/www.iot-embedded.de\/iot-2018\/wp-json\/wp\/v2\/posts\/423\/revisions"}],"predecessor-version":[{"id":632,"href":"https:\/\/www.iot-embedded.de\/iot-2018\/wp-json\/wp\/v2\/posts\/423\/revisions\/632"}],"wp:attachment":[{"href":"https:\/\/www.iot-embedded.de\/iot-2018\/wp-json\/wp\/v2\/media?parent=423"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.iot-embedded.de\/iot-2018\/wp-json\/wp\/v2\/categories?post=423"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.iot-embedded.de\/iot-2018\/wp-json\/wp\/v2\/tags?post=423"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}