{"id":1099,"date":"2019-07-06T19:35:26","date_gmt":"2019-07-06T19:35:26","guid":{"rendered":"https:\/\/2019.iot-embedded.de\/?p=1099"},"modified":"2021-05-14T10:08:11","modified_gmt":"2021-05-14T08:08:11","slug":"frontend-smart-transport","status":"publish","type":"post","link":"http:\/\/www.iot-embedded.de\/iot-2019\/smart-transport\/frontend-smart-transport\/","title":{"rendered":"Frontend Smart Transport"},"content":{"rendered":"\n

Nach dem erfolgreichen Testen des Web-Frontends mit der Anbindung zum Backend und damit auch mit live Daten des Raspberry Pi, m\u00f6chten wir die finale Version des Frontends hier vorstellen.

Das Web-Frontend wurde mit React entwickelt und nutzt neben REST f\u00fcr initiale Anfragen ans Backend, SignalR um Echtzeit-Daten vom Backend zu empfangen.

Des weiteren nutzt es die Google Maps API zum Anzeigen von der Position von Ger\u00e4ten, canvas.js welches Daten als Graphen darstellen kann, sowie Font Awesome, welches s\u00e4mtliche Icons zur Verf\u00fcgung stellt.

Aufbau und Ablauf im Frontend:

1. Login
Zun\u00e4chst loggt man sich \u00fcber ein Login-Maske ein:<\/p>\n\n\n\n

\"\"
Login<\/figcaption><\/figure>\n\n\n\n

2. Dashboard
Danach wird dem Benutzer ein Dashboard mit allen Ger\u00e4ten des Benutzers angezeigt. Jedes Ger\u00e4t enth\u00e4lt verschiedene Status um schnell \u00fcberpr\u00fcfen zu k\u00f6nnen, ob Probleme vorliegen.<\/p>\n\n\n\n

\"\"
Dashboard<\/figcaption><\/figure>\n\n\n\n

3. Ger\u00e4te-Detailansicht
Durch einen Klick auf eines der Ger\u00e4te auf dem Dashboard wird eine Detailansicht angezeigt. In dieser werden alle Daten des Ger\u00e4ts mithilfe von Graphen dargestellt. Die Position des Ger\u00e4ts wird \u00fcber die Google Maps API angezeigt.<\/p>\n\n\n\n

  • \"\"
    Detailansicht 1<\/figcaption><\/figure><\/li>
  • \"\"
    Detailansicht 2<\/figcaption><\/figure><\/li><\/ul>\n\n\n\n

    4. Ger\u00e4te Manager
    Mit den Buttons rechts unten in der Detailansicht k\u00f6nnen verschiedene Aktionen durchgef\u00fchrt werden. Mit dem ersten Button k\u00f6nnen die Daten des Ger\u00e4ts zur\u00fcckgesetzt werden, mit dem zweiten Button wird der Ger\u00e4te Manager ge\u00f6ffnet und mit dem dritten Button kann das Ger\u00e4t gel\u00f6scht werden.<\/p>\n\n\n\n

    Im Ger\u00e4te Manager kann der Name des Ger\u00e4ts ver\u00e4ndert werden und es k\u00f6nnen die verwendeten Sensoren ausgew\u00e4hlt werden. Beim Neuanlegen eines Ger\u00e4ts wird ebenfalls der Ger\u00e4te Manager angezeigt, dies kann \u00fcber das Plus im Dashboard in Gang gesetzt werden. Dabei wird schon beim Klick auf das Plus ein Ger\u00e4t angelegt und anschlie\u00dfend werden die gesetzten Attribute darauf aktualisiert.<\/p>\n\n\n\n

    \"\"
    Ger\u00e4te Manager<\/figcaption><\/figure>\n\n\n\n

    5. Map
    \u00dcber die Sidebar auf der linken Seite kann jederzeit \u00fcber den ersten Button zum Dashboard navigiert werden. \u00dcber den zweiten Button wird eine Karte mit den Positionen aller Ger\u00e4te angezeigt.<\/p>\n\n\n\n

    \"\"
    Karte<\/figcaption><\/figure>\n\n\n\n

    <\/p>\n","protected":false},"excerpt":{"rendered":"

    Nach dem erfolgreichen Testen des Web-Frontends mit der Anbindung zum Backend und damit auch mit live Daten des Raspberry Pi, m\u00f6chten wir die finale Version des Frontends hier vorstellen. Das Web-Frontend wurde mit React entwickelt und nutzt neben REST f\u00fcr<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[9],"tags":[],"_links":{"self":[{"href":"http:\/\/www.iot-embedded.de\/iot-2019\/wp-json\/wp\/v2\/posts\/1099"}],"collection":[{"href":"http:\/\/www.iot-embedded.de\/iot-2019\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.iot-embedded.de\/iot-2019\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.iot-embedded.de\/iot-2019\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"http:\/\/www.iot-embedded.de\/iot-2019\/wp-json\/wp\/v2\/comments?post=1099"}],"version-history":[{"count":1,"href":"http:\/\/www.iot-embedded.de\/iot-2019\/wp-json\/wp\/v2\/posts\/1099\/revisions"}],"predecessor-version":[{"id":1181,"href":"http:\/\/www.iot-embedded.de\/iot-2019\/wp-json\/wp\/v2\/posts\/1099\/revisions\/1181"}],"wp:attachment":[{"href":"http:\/\/www.iot-embedded.de\/iot-2019\/wp-json\/wp\/v2\/media?parent=1099"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.iot-embedded.de\/iot-2019\/wp-json\/wp\/v2\/categories?post=1099"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.iot-embedded.de\/iot-2019\/wp-json\/wp\/v2\/tags?post=1099"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}