Update 3 Softwareentwurf & Implementierung Prototyp MVP authored by Cem Akdag's avatar Cem Akdag
 
## Softwarearchitektur ## Softwarearchitektur
Die übergreifende Softwarearchitektur besteht aus einem React (JavaScript) Frontend und einem Flask (Python) Backend. Die React App besteht aus mehreren Ansichten. In der _Session_ View können eigene, sogenannte ZRoom-Sessions erstellt werden, die wiederum automatisch eine verknüpfte Zoom-Session sowie eine darunterliegende _Reactions_ View für diese Session anlegt (beide eingebettet in eine Fenster-Ansicht). Die _Reactions_ View besteht aus Buttons, die entsprechende Reaktionen widerspiegeln (vergleichbar mit den Zoom Reaktionen, für die Zoom allerdings selber keine externe APIs zur Verfügung stellt). Über diese Buttons können die Remote-Studenten ihre Reaktionen auslösen und darüber die REST APIs im Backend zur Manipulation der Leuchten/Lautsprecher in Vorlesungsräumen ansprechen. Die übergreifende Softwarearchitektur besteht aus einem React (JavaScript) Frontend und einem Flask (Python) Backend. Die React App besteht aus mehreren Ansichten. In der _Session_ View können eigene, sogenannte ZRoom-Sessions erstellt werden, die wiederum automatisch eine verknüpfte Zoom-Session sowie eine darunterliegende _Reactions_ View für diese Session anlegt (beide eingebettet in eine Fenster-Ansicht). Die _Reactions_ View besteht aus Buttons, die entsprechende Reaktionen widerspiegeln (vergleichbar mit den Zoom Reaktionen, für die Zoom allerdings selber keine externe APIs zur Verfügung stellt). Über diese Buttons können die Remote-Studenten ihre Reaktionen auslösen und darüber die REST APIs im Backend zur Manipulation der Leuchten/Lautsprecher in Vorlesungsräumen ansprechen.
...@@ -16,7 +15,6 @@ Beim Senden einer Reaktion in einer ZRoom-Sesson in der _Reactions_ View des Fro ...@@ -16,7 +15,6 @@ Beim Senden einer Reaktion in einer ZRoom-Sesson in der _Reactions_ View des Fro
Unsere prototypische Implementierung als MVP besteht aus einer React App mit einer vereinfachten Darstellung der _Reactions_ View mit drei Buttons für je eine Reaktion (Daumen hoch, Frage, Problem). Der Flask Web Server stellt eine REST API zum Manipulieren von drei Leuchten (Grün, Blau, Rot; jeweils eine Leuchte für eine Reaktion) zur Verfügung. Die Anwendungen werden auf einem Raspberry PI gehostet. Die drei Leuchten sind über die GPIO-Pins mit dem Raspberry Pi verbunden und werden über die Flask App angesteuert. Unsere prototypische Implementierung als MVP besteht aus einer React App mit einer vereinfachten Darstellung der _Reactions_ View mit drei Buttons für je eine Reaktion (Daumen hoch, Frage, Problem). Der Flask Web Server stellt eine REST API zum Manipulieren von drei Leuchten (Grün, Blau, Rot; jeweils eine Leuchte für eine Reaktion) zur Verfügung. Die Anwendungen werden auf einem Raspberry PI gehostet. Die drei Leuchten sind über die GPIO-Pins mit dem Raspberry Pi verbunden und werden über die Flask App angesteuert.
 
## Video zur Live-Demonstration des MVPs: ## Video zur Live-Demonstration des MVPs:
[![image](uploads/8c5a9494447ca50fbcabc79c3c03676a/image.png)](https://reutlingenuniversityde.sharepoint.com/sites/SCCDistributesSystems/Freigegebene%20Dokumente/Forms/AllItems.aspx?id=%2Fsites%2FSCCDistributesSystems%2FFreigegebene%20Dokumente%2FInternet%20of%20Things%2FIoT%5FHackathon%5FMVP%5FDemo%2Emp4&parent=%2Fsites%2FSCCDistributesSystems%2FFreigegebene%20Dokumente%2FInternet%20of%20Things&p=true&originalPath=aHR0cHM6Ly9yZXV0bGluZ2VudW5pdmVyc2l0eWRlLnNoYXJlcG9pbnQuY29tLzp2Oi9zL1NDQ0Rpc3RyaWJ1dGVzU3lzdGVtcy9FVk1LVlVLVjVTTkVzanZyYWQ1LUZaRUJDTnMtcENHMThVdDZxdy1oeFRBZW5RP3J0aW1lPXNyd1NEZDQ3MlVn) [![image](uploads/8c5a9494447ca50fbcabc79c3c03676a/image.png)](https://reutlingenuniversityde.sharepoint.com/sites/SCCDistributesSystems/Freigegebene%20Dokumente/Forms/AllItems.aspx?id=%2Fsites%2FSCCDistributesSystems%2FFreigegebene%20Dokumente%2FInternet%20of%20Things%2FIoT%5FHackathon%5FMVP%5FDemo%2Emp4&parent=%2Fsites%2FSCCDistributesSystems%2FFreigegebene%20Dokumente%2FInternet%20of%20Things&p=true&originalPath=aHR0cHM6Ly9yZXV0bGluZ2VudW5pdmVyc2l0eWRlLnNoYXJlcG9pbnQuY29tLzp2Oi9zL1NDQ0Rpc3RyaWJ1dGVzU3lzdGVtcy9FVk1LVlVLVjVTTkVzanZyYWQ1LUZaRUJDTnMtcENHMThVdDZxdy1oeFRBZW5RP3J0aW1lPXNyd1NEZDQ3MlVn)
... ...
......