Econize

Ein kleines Uni-Projekt. Econize soll eine Website sein, auf der Informationen rund um den Klimawandel und Umweltbewusstsein vermittelt werden soll. Der Nutzer kann sich das Wetter für einen Ort angeben lassen. Außerdem gibt es ein kleines Spiel, wo der Spieler die Termperaturen an einem Ort erraten muss. Auf der Luftqualität-Seite kann der Nutzer sich über die Luftqualität an gegebenen Orten informieren und welche Auswirkungen diese hat.

Auf der Seite Erdulator wird das Projekt "Erdulator" vorgestellt. Dabei handelt es sich um ein Online-Spiel, wo der Spieler die Erde steuert und sie vor dem Untergang retten muss. Dabei lernt der Nutzer interessante Fakten rund um das Thema Klimawandel und muss Wissen anwenden, um den fortschreitenden Klimawandle aufzuhalten.

Die Kontakt-Seite kann genutzt werden um mit den Betreibern der Website Kontakt aufzunehmen. Man erhält danach eine Bestätigungsemail mit der Ticketnummer. (Es wurde keine Ticketsystem implementiert, wäre aber eine sinnvolle Implementierung, sollte die Applikation an die Öffentlichkeit gehen. Anbindung einer Datenbank und Speicherung der Tickets)

Nutzung

Es wird die JavaScript-Laufzeitumgebung Node.js verwendet. Installieren über packet-Manager oder Download-Link. Clone das Repository in ein Verzeichnis. Wechsel in das Verzeichnis. Führe dort npm install aus. Das installiert alle Abhängigkeiten, die in der 'package.json' enthalten sind. Sollte das nicht funktionieren, wechsele in die einzelnen Verzeichnisse unter 'client' und 'server', wo die jeweiligen 'package.json' liegen und führe dort den Befehl aus.

Danach können Sie jeweils mit npm start gestarten werden. Die React-App ist unter 'localhost:3000' und der Server unter 'localhost:8080' verfügbar

---

Für die Nutzung der Kontakt Funktion muss unter dem Ordner 'server' eine Datei 'email.js' mit folgendem Inhalt erstellt werden.

const email_adress= <IHRE EMAIL-ADRESSE>;
const password= <PASSWORD>;

module.exports = {email_adress, password};

Dabei ist zu beachten, dass in der index.js gestzt ist, dass es sich dabei um eine E-Mail Adresse von Gmail handelt. Danach muss ein App-Passwort erstellt werden.

REST-API

GET /weather/:lat/:lon

RESPONSE in JSON:

city: "Kilmia" // name of the city temp: 27.7 // temperature in °C temp_max: 27.7 // maximum temperature in °C weather: "Bedeckt" // description of the weather icon: "https://openweathermap.org/img/wn/[email protected]" // link to icon of weather humidity: 74 // humidity in % wind: 4.18 // wind speed in km/h

GET /randomcity

RESPONSE in JSON:

city: "Carora" //name of city country: "Venezuela" //name of country lat: 10.169166666 // latitude lon: -70.078333333 // longitude

GET /airquality/:lat/:lon

RESPONSE in JSON:

aq_index: 2 // air quality index components: co: 223.64 // carbon monoxide in µg/m³ no: 0 // nitrogen monoxide in µg/m³ no2: 0.4 // nitrogen dioxide in µg/m³ o3: 57.22 // ozone in µg/m³ so2: 0.28 // sulfur dioxide in µg/m³ pm2_5: 17.63 // particulate matter 2.5 in µg/m³ pm10: 24.88 // particulate matter 10 in µg/m³ nh3: 0 // ammonia in µg/m³ kurz: "Ungesund für empfindliche Personengruppen (101-150)" // Kurzbeschreibung der Luftqualität lang: "Personen mit Lungenerkrankungen, ältere Menschen und Kinder sind bei längerer Exposition und körperlicher Anstrengung einem größeren Risiko ausgesetzt." // Langbeschreibung der Luftqualität

POST /contact

REQUEST in JSON: method: 'POST', headers: { 'Content-Type': 'application/json', }, body: category: '', email: '', description: '', }

RESPONSE in JSON:

message: 'Wir haben ihr Ticket angenommen. Sie erhalten eine Bestätigung per E-Mail.' // confirmatin message ticketNumber: 10002300 // ticket number

Fazit

Das Styling hat leider viel mehr Zeit gebraucht als gedacht. Außerdem hätte ich direkt AsyncPaginate für das darstellen der Optionen nutzen sollen (zuvor selbst programmiert) Generell wäre eine Nutzung von existierenden React Komponenten Sinnvoll gewesen.