Bubble.io Tutorial - Climatiq API in Bubble mit API Connector verwenden

Schritt-für-Schritt Videoanleitung, wie man die Climatiq API in der No-Code Plattform Bubble integriert.

Chris Strobl
Chris Strobl

In diesem Video zeige ich euch, wie man die Open Source Emission Factors API von Climatiq in Bubble's API Connector einfügen kann. Damit könnt ihr programmatisch CO2 Emissionen berechnen.


Weiterführende Links:
https://bubble.com
https://docs.climatiq.io/
https://github.com/climatiq/Open-Emission-Factors-DB

Bubble.io Tutorial - Climatiq API in Bubble integrieren

Video-Transkript:

Hallo, mein Name ist Chris Strobl und ich zeige euch heute, wie wir im Bubble mit dem API Connector die Climatiq API relativ einfach integrieren können. Gleichzeitig ist ein Start up aus Berlin, welches von ehemaligen Google Leuten gegründet wurde, mit dem Ziel, die Daten so aufzubereiten, dass jede Firma CO2-Emissionen einfach berechnen kann.

Und dafür gibt es quasi zwei Sachen Einerseits eine Open Source Datenbank mit den Emissions Faktoren und andererseits eine einfach zu verwendende Realtime API. Ich gehe einmal in GitHub. Wenn wir auf das Repository Open Emissions Factors Datenbank klicken, dann seht ihr hier, dass wir quasi eine kontinuierliche transparente Datenbank an Emissions Faktoren haben und wir sehen nun hier die verschiedenen quasi Kategorien der Tabelle. Unter anderem finde ich spannend den Search Index, um hier transparent zu sein.

Wie gut ist eigentlich die Datenqualität? Und dann sehen wir hier auch die Region, aber auch wie viel CO2 wird quasi pro Einheit emittiert? Auf der anderen Seite haben wir dann die API, mit der wir jetzt loslegen. Im Bubble, um diese zu integrieren. Das findet ihr unter Docs.climtaiq.io. Als erstes gehen wir nun im Bubble, in den Plugins und dort in den API Connector. Wir können diesen installieren über Add Plugin, API Connector und Install hier klicken jetzt auf Editor oder API. Wir nennen diese kleine Matic und als Authentifizierung Private Key in Header und wir nennen diesen Keys Namen Autorisation, weil wir das in der API Autorisation und dann bara API Keys. Der Keys ist Bara und dann geht ihr und loggt euch ein. Ihr könnt euch hier für die Public Beta registrieren. Geht auf API Keys und kopiert diesen API Keys. Anschließend fügte diesen mit einem Leerzeichen hinzu Macht at shared header content Typekit.

Findet ihr ebenfalls Applikation Jason? Und wir machen nun den ersten API Keys URL liegt hier auf Keys.  Und wenn wir uns die Dokumentation ansehen, sehen wir, dass es zwei Methoden gibt einmal die Emissions Faktoren, also nennen wir diese Emissions Faktoren. Und einmal den Staat, mit dem wir quasi berechnen können, wie viel CO2 erhalten wird. Wir fangen einmal an mit Emission Faktors. Das ist eine gute Methode. Das heißt, wir kopieren diesen Call. Geht haben wir bereits ausgewählt und fügen das hinzu und versuchen jetzt einmal den Call zu initialisieren. Und ihr seht, wie wir jetzt schon bereits die verschiedenen Sachen von der API Keys zurückbekommen.

Hier wird dem Bubble im API Connector erst mal nur der erste Eintrag gezeigt. Aber wenn ihr euch das RAW Format ansieht, seht ihr, dass wir alle Emissions Faktoren zurückbekommen. In der Climatiq API könnt ihr nun auch verschiedene Parameter noch hinzufügen. Und ich möchte euch einen zeigen, nämlich den Region. Das heißt, ich füge einen Parameter hinzu Region, mache idée und initialisieren noch mal und bekomme jetzt quasi nur Daten zurück aus der Region. Das ist unsere erste quasi grad API. Wir fügen jetzt einen neuen API Keys hinzu, nämlich die Post Methode, die systematisch API dafür kopiert, die wiederum den Call. Wir nennen das ganze smooth und machen Post.

Als nächstes geht es darum, diese API Keys nun zu konfigurieren. Dafür schauen wir uns in der Dokumentation einmal das Request Element an. Wir haben verschiedene Attribute wie Mission, Faktor um Parameter, die required sind und andere, die optional sind. Ihr seht hier unten den Request und diesen fügen wir nun hier einmal ein. In dem Boolean. Und ihr seht nun, wenn wir das initialisieren, dass wir tatsächlich ein CO2 als Ergebnis bekommen.

Ich möchte euch nun an einem Beispiel zeigen Nachdem wir die API Keys initialisiert haben, wie man quasi von einer Flugstrecke im Bubble die. CO2-Emissionen berechnen kann. Dafür gehen wir nochmal in die Climatiq API und schauen uns die Transport Kategorien an. Wir machen Air Travel und wir sagen wir fliegen einen internationalen Flug. Das heißt der Emissions Faktor ist international flight. Wir kopieren das. Und schauen uns gleichzeitig die Parameter an, die dieser Air Travel Faktor hat.

Das heißt, der Parameter ist vor allem die Distanz. Das heißt, wir müssen auch hier Distanz 300 einmal eingeben. Das heißt, statt Amount ist das hier Distance. Und initialisieren noch einmal. Wir sehen 55 kg CO2 bei 300 und wir können jetzt zum Beispiel diese Distanz variabel gestalten. Als erstes braucht ihr die Google Maps API Icon. Ich habe ein Video gemacht, das sie hier oben eingeblendet, wie man in Google Maps quasi die API Codes hinzufügt, um die Distanz zu berechnen. Als zweites fügen wir zwei Search Boxes hinzu. Einmal den Abflug dort und wir machten hier Geographic Places.

Und einmal den Ankunftsort und dieses ebenfalls Geographic Places. Anschließend fügt er einen Button hinzu. Berechne Distanz. Und hier ein Textfeld Was soll ich einmal die Distanz zeigt. Dafür gehen wir noch mal in die Startseite und machen Adam New State Distanz. Und das ist eine Zahl. Hier im Textfeld machen wir in Search Dynamic data kleine Matic, das ist die Seite Distanz und daneben machen wir einen zweiten Button Berechne CO2.

Und wir machen eine zweite Variable auf der Seite und nennen das CO2 und machen das als ebenfalls number. Das heißt auch das Textfeld kopieren wir. Und machen auch hier statt Distanz CO2. Nun brauchen wir nur noch die beiden Workflows Einmal klicken wir auf Berechne Distanz. Hierfür sagen wir, es setzt Date auf ein Element und das ist klimatisch Distanz.

Und das ist Search Ausflugsort Value Distance from origin address, Search Ankunftsort Value und die Unit machen wir in Kilometer.  Anschließend klicken wir auf den Button berechnet CO2. Und hier machen wir ebenfalls wieder Set State of an Element, diesmal Climatiq CO2. Und wir machen Get data from an external API. Wir nutzen die Climatiq Estimate API.

Wir sehen hier den internationalen Flug und die löscht hier statisch Ohnmacht dafür in Insert Dynamic data. Und sagt Climatiq's Distanz. Jetzt kriegen wir quasi von der API die unterschiedlichen Parameter und wir machen hier CO2-Emission. Wir gehen jetzt einmal auf Preview und schauen uns das Ganze einmal an.. Wir machen den Abflug Ort Berlin. Und den Ankunftsort San Francisco. Wir berechnen die Distanz, das sind 9000 100 km und berechnen jetzt den CO2-Ausstoß. Und das 1671 Kilogramm CO2.

Ihr könnt natürlich jetzt auch hier die Daten noch formatieren, zum Beispiel, dass ihr sagt Wir wollen nur zwei Dezimalstellen oder bei den Kilometern. Wollt ihr gar keine Dezimalstellen? Ich gehe noch einmal auf Preview. Berlin. San Francisco. Distanz neun tausend ein hundert fünf und CO2 1671,90. Und so konnten wir sehen, wie wir die Climatiq API in Bubble wunderbar integrieren können und so dynamisch CO2-Emissionen in Realtime berechnen können.

Wenn euch dieses Video gefallen habt, klickt gerne auf den Like-Button oder subscribed unseren Channel. Ich wünsche euch weiterhin viel Erfolg mit Bubble und auf bald.

APIs