So far we have created an HTTP Connector and a function that will get weather data from openweathermap.org.
In the third and final part of this series we will use our new function in a Tulip App. Refer to Tulip App Design 101 for more details on building apps in Tulip.
Create a New App with a Form Step
To start, create a Form Step with a "Dropdown" form widget. Then create a variable called city and assign it to the "Dropdown" widget.
Create a step for showing the weather data
This will be a basic step where we show two variables using Variable text:
- msg_temp_city - for displaying a header such as 'Current Temp in Boston'
- current_temp_f - for displaying the temperature with units such as Fahrenheit
NOTE: Feel free to experiment with the design of your app!
Here's what this step might look like with two example of Variable text:
Call the function we created in Part 2.
Create a new Step Trigger for When Step is Opened and add a new action.
- Choose Run Connector Function and choose the Weather Connector that we created in Part 1 then select the Get Weather Data By City function that we created in Part 2.
- Use the city variable for the input of the function
- Save the result as a new variable, the name is your choice. In this example we are using weather_data.
- Save the trigger
Convert the temperature to Fahrenheit using the Expression Editor
The temperature value that is returned from the API is in Kelvin. We would like to display this in a more common unit such as Fahrenheit. To do this we will us the Expression Editor.
Create another trigger that runs when step is opened
Add an action and use an expression to concatenate the city variable with text. Store the result in the variable we created earlier, msg_temp_city.
- "Data Manipulation" "Store" data: "Static Value" "text" "Current temp in @Variable.city"
Add another action and use an expression to convert the temperature from Kelvin to Fahrenheit and concatenate with ' F' for the units. Store this in current_temp_f.
- "Data Manipulation" "Store" data: "Expression" "ROUND(1.8*PARSEFLOAT(@variable.weather_data.current_temp) - 273)) + 32, 0) + 'F'
Then save the trigger.
That's it! Run your app in the Tulip Player to see the results
Your app should now allow you to change the city and see the temperature.