diff --git a/public/media/tutorial/WiFi-Bee.jpeg b/public/media/tutorial/WiFi-Bee.jpeg new file mode 100644 index 0000000..dd77f2f Binary files /dev/null and b/public/media/tutorial/WiFi-Bee.jpeg differ diff --git a/public/media/tutorial/tutorial_01.png b/public/media/tutorial/tutorial_01.png new file mode 100644 index 0000000..31c6a29 Binary files /dev/null and b/public/media/tutorial/tutorial_01.png differ diff --git a/src/components/Tutorial/Instruction.js b/src/components/Tutorial/Instruction.js index 38b960f..e077657 100644 --- a/src/components/Tutorial/Instruction.js +++ b/src/components/Tutorial/Instruction.js @@ -20,7 +20,7 @@ class Instruction extends Component { return (
{step.headline} - {step.text} + {step.text} {isHardware ? : null} {areRequirements > 0 ? @@ -28,7 +28,7 @@ class Instruction extends Component { {step.media ? step.media.picture ?
- +
: step.media.youtube ? /*16:9; width: 800px; height: width/16*9=450px*/ diff --git a/src/data/tutorial/ErsteSchritte.json b/src/data/tutorial/ErsteSchritte.json index b844746..5e3ac9f 100644 --- a/src/data/tutorial/ErsteSchritte.json +++ b/src/data/tutorial/ErsteSchritte.json @@ -1 +1,59 @@ -{"id":1602160534286,"title":"Erste Schritte","steps":[{"id":1,"type":"instruction","headline":"Erste Schritte","text":"In diesem Tutorial lernst du die ersten Schritte mit der senseBox kennen. Du erstellst ein erstes Programm, baust einen ersten Schaltkreis auf und lernst, wie du das Programm auf die senseBox MCU überträgst.","hardware":["senseboxmcu","led","breadboard","jst-adapter","resistor-470ohm"],"requirements":[]},{"id":2,"type":"instruction","headline":"Aufbau der Schaltung","text":"Stecke die LED auf das Breadboard und verbinde diese mithile des Widerstandes und dem JST Kabel mit dem Port Digital/Analog 1."},{"id":3,"type":"instruction","headline":"Programmierung","text":"Jedes Programm für die senseBox besteht aus zwei Funktionen. Die Setup () Funktion wird zu Begin einmalig ausgeführt und der Programmcode Schrittweise ausgeführt. Nachdem die Setup () Funktion durchlaufen worden ist wird der Programmcode aus der zweiten Funktion, der Endlosschleife, fortlaufend wiederholt.","xml":"\n \n"},{"id":4,"type":"instruction","headline":"Leuchten der LED","text":"Um nun die LED zum leuchten zu bringen wird folgender Block in die Endlosschleife eingefügt. Der Block bietet dir auszuwählen an welchen Pin die LED angeschlossen wurd und ob diese ein oder ausgeschaltet werden soll.","xml":"\n \n 1\n HIGH\n \n"},{"id":5,"type":"task","headline":"Aufgabe 1","text":"Verwende den zuvor kennengelernten Block, um die LED zum leuchten zu bringen.","xml":"\n \n \n \n 1\n HIGH\n \n \n \n"},{"id":6,"type":"instruction","headline":"Programmcode übertragen","text":"Super! Du hast dein erstes Programm erstellt und kompiliert. In nächsten Schritt muss das Programm auf deine senseBox MCU übertragen werden. Schließe diese mithilfe des USB Kabel an deinem Computer an und drücke 2 mal schnell hintereinander auf den roten Reset Button, um die senseBox MCU in den Lernmodus zu versetzten. Die senseBox MCU erscheint nun als USB-Gerät in deinem Dateiexplorer. Kopiere anschließend das Programm auf die senseBox MCU.","media":{"youtube":"jzlOJ7Zuqqw"}}]} \ No newline at end of file +{ + "id": 1602160534286, + "title": "Erste Schritte", + "steps": [ + { + "id": 1, + "type": "instruction", + "headline": "Erste Schritte", + "text": "In diesem Tutorial lernst du die ersten Schritte mit der senseBox kennen. Du erstellst ein erstes Programm, baust einen ersten Schaltkreis auf und lernst, wie du das Programm auf die senseBox MCU überträgst.", + "hardware": [ + "senseboxmcu", + "led", + "breadboard", + "jst-adapter", + "resistor-470ohm" + ], + "requirements": [] + }, + { + "id": 2, + "type": "instruction", + "headline": "Aufbau der Schaltung", + "text": "Stecke die LED auf das Breadboard und verbinde diese mithilfe des Widerstandes und dem JST Kabel mit dem Port Digital/Analog 1.\n", + "media": { + "picture": "tutorial_01.png" + } + }, + { + "id": 3, + "type": "instruction", + "headline": "Programmierung", + "text": "Jedes Programm für die senseBox besteht aus zwei Funktionen. Die Setup () Funktion wird zu Begin einmalig ausgeführt und der Programmcode Schrittweise ausgeführt. Nachdem die Setup () Funktion durchlaufen worden ist wird der Programmcode aus der zweiten Funktion, der Endlosschleife, fortlaufend wiederholt.", + "xml": "\n \n" + }, + { + "id": 4, + "type": "instruction", + "headline": "Leuchten der LED", + "text": "Um nun die LED zum leuchten zu bringen wird folgender Block in die Endlosschleife eingefügt. Der Block bietet dir auszuwählen an welchen Pin die LED angeschlossen wurd und ob diese ein oder ausgeschaltet werden soll.", + "xml": "\n \n 1\n HIGH\n \n" + }, + { + "id": 5, + "type": "task", + "headline": "Aufgabe 1", + "text": "Verwende den zuvor kennengelernten Block, um die LED zum leuchten zu bringen.", + "xml": "\n \n \n \n 1\n HIGH\n \n \n \n" + }, + { + "id": 6, + "type": "instruction", + "headline": "Programmcode übertragen", + "text": "Super! Du hast dein erstes Programm erstellt und kompiliert. In nächsten Schritt muss das Programm auf deine senseBox MCU übertragen werden. Schließe diese mithilfe des USB Kabel an deinem Computer an und drücke 2 mal schnell hintereinander auf den roten Reset Button, um die senseBox MCU in den Lernmodus zu versetzten. Die senseBox MCU erscheint nun als USB-Gerät in deinem Dateiexplorer. Kopiere anschließend das Programm auf die senseBox MCU.", + "media": { + "youtube": "jzlOJ7Zuqqw" + } + } + ] +} \ No newline at end of file diff --git a/src/data/tutorial/MesswerteAnDieOpenSenseMapSenden.json b/src/data/tutorial/MesswerteAnDieOpenSenseMapSenden.json new file mode 100644 index 0000000..fdb2ddc --- /dev/null +++ b/src/data/tutorial/MesswerteAnDieOpenSenseMapSenden.json @@ -0,0 +1,82 @@ +{ + "id": 1605191033983, + "title": "Messwerte an die openSenseMap senden", + "steps": [ + { + "id": 1, + "type": "instruction", + "headline": "Messwerte an die openSenseMap senden", + "text": "In diesem kurzen Tutorial lernt ihr wie Messwerte der senseBox an die [openSenseMap](https://opensensemap.org) gesendet werden können. Die openSenseMap ist das Datenportal für die senseBox und ermöglicht es euch, schnell und einfach eigene Messwerte zu speichern, zu analysieren und auszuwerten.", + "hardware": [ + "hdc1080", + "senseboxmcu", + "wifi-bee", + "jst-jst" + ], + "requirements": [ + 1602160534286 + ] + }, + { + "id": 2, + "type": "instruction", + "headline": "Aufbau der Hardware", + "text": "Steckt das WiFi-Bee auf den Steckplatz XBEE1 und schließt den Temperatur- und Luftfeuchtigkeitssensor mit dem JST-JST Kabel an einen der fünf I2C Ports an. ", + "media": { + "picture": "WiFi-Bee.jpeg" + } + }, + { + "id": 3, + "type": "instruction", + "headline": "Verbindung mit dem Wlan herstellen", + "text": "Im ersten Schritt muss eine Verbindung mit dem Wlan hergestellt werden. Verwende dazu folgenden Block im Setup und trage dein Netzwerkname und das Passwort ein.", + "xml": "\n \n \n \n SSID\n Password\n \n \n \n" + }, + { + "id": 4, + "type": "instruction", + "headline": "Registrieren auf der openSenseMap", + "text": "Gehe auf [opensensemap.org](https://opensensemap.org) und registriere eine neue senseBox mit dem Temperatur- und Luftfeuchtigkeitssensor. \n\nWie genau du deine senseBox registriert wird dir in folgendem Video ab Sekunde 38 erläutert.", + "media": { + "youtube": "Gz9RzoVp_NI" + } + }, + { + "id": 5, + "type": "instruction", + "headline": "Registrieren auf der openSenseMap", + "text": "" + }, + { + "id": 6, + "type": "instruction", + "headline": "Verbinden mit der openSenseMap", + "text": "Nach der Registrierung deiner senseBox auf der openSenseMap erhälst du eine senseBox ID und jeweils eine ID für jeden Sensorwert, den du übertragen möchtest. Im nächsten Schritt stellst du eine Verbindung mit der openSenseMap her und sendest die Messwerte. \n\nVerwende den Block \"Messintervall\" aus der Kategorie Zeit um in regelmäßigen Abständen einen Messwert zu übertragen. Der Block \"Verbinde mit openSenseMap\" stellt eine Verbindung mit der openSenseMap her. Trage dort deine senseBox ID und den API Schlüssel ein, den du nach der Registrierung erhalten hast.", + "xml": "\n \n \n \n SSID\n Password\n \n \n \n \n 10000\n \n \n \n \"ingress.opensensemap.org\"\n TRUE\n Stationary\n senseBox ID\n access_token\n \n \n \n \n \n" + }, + { + "id": 7, + "type": "instruction", + "headline": "Senden von Messwerten", + "text": "Verwende nun für jeden Messwert einen Block \"Sende Messwert an die openSenseMap\". Wenn du eine richtige senseBox ID eingetragen hast kannst du im Dropdown Menü das jeweilige Phänomen auswählen, welches du übertragen möchtest. Verbinde anschließend noch den entsprechenden Block für den Sensor oder die Variable, die du übertragen möchtest, um dein Programm zu vervollständigen. ", + "xml": "\n \n \n \n SSID\n Password\n \n \n \n \n 10000\n \n \n \n \"ingress.opensensemap.org\"\n TRUE\n Stationary\n \n access_token\n \n \n 5f31034ea4a11c001bad7d45\n \n \n Temperature\n \n \n \n \n \n \n \n \n \n" + }, + { + "id": 8, + "type": "task", + "headline": "Messwerte an die openSenseMap senden", + "text": "Erstelle nun ein Programm, um die Messwerte für Temperatur- und Luftfeuchtigkeit an die openSenseMap zu übertragen. ", + "xml": "\n \n \n \n SSID\n Password\n \n \n \n \n 10000\n \n \n \n \"ingress.opensensemap.org\"\n TRUE\n Stationary\n 5f31034ea4a11c001bad7d43\n access_token\n \n \n 5f31034ea4a11c001bad7d45\n \n \n Temperature\n \n \n \n \n 5f31034ea4a11c001bad7d44\n \n \n Humidity\n \n \n \n \n \n \n \n \n \n \n \n" + }, + { + "id": 9, + "type": "instruction", + "headline": "Programmcode übertragen", + "text": "In nächsten Schritt muss das Programm auf deine senseBox MCU übertragen werden. Schließe diese mithilfe des USB Kabel an deinem Computer an und drücke 2 mal schnell hintereinander auf den roten Reset Button, um die senseBox MCU in den Lernmodus zu versetzten. Die senseBox MCU erscheint nun als USB-Gerät in deinem Dateiexplorer. Kopiere anschließend das Programm auf die senseBox MCU.", + "media": { + "youtube": "jzlOJ7Zuqqw" + } + } + ] +} \ No newline at end of file diff --git a/src/data/tutorials.js b/src/data/tutorials.js index fb1fe39..e3ab05e 100644 --- a/src/data/tutorials.js +++ b/src/data/tutorials.js @@ -3,7 +3,8 @@ let tutorials = [ require('./tutorial/Schleifen.json'), require('./tutorial/Wenn-DannBedingungen.json'), require('./tutorial/VerwendungVonVariablen.json'), - require('./tutorial/AnzeigeVonMesswertenAufDemDisplay.json') + require('./tutorial/AnzeigeVonMesswertenAufDemDisplay.json'), + require('./tutorial/MesswerteAnDieOpenSenseMapSenden.json') ] module.exports = tutorials;