Struggling w/ OpenWeatherAPI

My Goal: The user enters a city name within an input field and the app returns the weather and a relevant icon for the query.

What I’ve Done So Far:

By altering the URL, I have confirmed that I have the correct endpoint and that my APPID creates a functional call. It does return a JSON object.

It is possible to initialize the call with a pre-selected city to get a response on the weather i.e. if q=Berlin, I can get the weather in Berlin to appear as a Dynamic text field in the app but has no bearing on what the user types in the input.

The key value pair added under Parameters was appid and the appid that I have cutoff in the image above.

All other combos I have tried, have failed. The ‘&’ was what got this key value pair to work. I tried adding where it says berlin and making the parameter ‘q’ and ‘name’ which according to the documentation is how you would call the city name: Current weather data - OpenWeatherMap

This was really simple to do for a basic front end app (html/css/js) but I am finding it surprisingly difficult in Bubble so without question I believe it is 100% user error and that it is likely an obvious error I’m making, but it’s not jumping out at me.

Where is the gap in my understanding on how to implement this in Bubble?

1 Like

PROGRESS UPDATE:

I now have the API making the right call to the URL with https://api.openweathermap.org/data/2.5/weather?[]&[] including appid and setting q to optional.

The next hurdle appears to be getting the city in a text box that only appears after the API call has been made and q has been set to the user input.

I plan on taking a tip from another topic on this forum: Search box and external API, but if anyone wants to step in and provide info regarding the dynamic q so that the call will return the data, that’d be great.

@cthrnbrnd
Don’t know if you resolved this? Anyway here is my example solution for a basic app that displays the temperature for a location in London when the page loads and has input boxes which allow the user to change the location. It is for an api call by Geographic Coordinates as opposed to a City Name):

I’ve also made this example public (just need to insert your own api key): Openweathertest-noapikey | Bubble Editor

1. API plugin configuration:

  • Ensure to unselect the private checkbox for the lat and long parameters. This will allow you get values from text boxes to put into your api call.

2. Design of the app layout
As shown, the text boxes values are updated from “custom states” that we will create in the workflow






3. Workflow
a. When page loads display the location. Create states for the initial Location (text) and Temperature (number) as below:


Here you can see where the lat and long keys in the api url can be dynamically updated. For now, I have not changed them.

Finishing our custom state value:

Final custom state:

b. Similarly to above, create custom states for Location and Temperature but this time dynamically link the keys to the input boxes as show:

4. Result
On page load


Updating lat/long co-ordinates:

3 Likes