In Bubble News API einbinden

In diesem Video lernt ihr wie man in Bubble die API newsapi.org einbindet, um neue Nachrichten in der eigenen Applikation anzuzeigen.

Als erstes registriert ihr euch kostenlos bei https://newsapi.org und erstellt dort einen API Key.

Anschließend gehen wir in Bubble auf Plugins und wählen das kostenlose News API Plugin von Airdev aus.

Bei der Konfiguration des Plugins brauchen wir einerseits den API Key, andererseits den Country Code. Hier könnt ihr zum Beispiel DE nehmen. Bei allen Fragen rund um die API selbst, ist die Dokumentation unter https://newsapi.org/docs sehr hilfreich.

Unter Endpoints Sources gibt es hier mehr Informationen zur API selbst.

Danach gehen wir in das Design Tab von Bubble und erstellen dort ein Dropdown, um die Publikation auszuwählen.

By Choices Source gehen wir auf Get Data from an external API und wählen News API - List of Sources. Sprache DE, Category General.

Darunter erstellen wir eine Repeating Group, welche wiederum Data source - Get data from an external API, nämlich dieses mal News API - Articles from a source. Bei Source nehmen wir die ID des Dropdowns. In der Repeating Group platzieren wir ein Image, ein Text und ein Link Element, welche wir mit den Inhalten füllen. Anschließend geht ihr auf Live Demo und könnt nun Nachrichten bei euch in der eigenen Bubble App darstellen.