This example demonstrates how to use an API key stored in the Secrets Manager.
The secret key is used to fetch the current weather in New York City, which is then displayed on screen.
Important note: The secret key used in this example will not be available under your account. In order to make the example work please go to https://darksky.net/dev in order to get your own secret key and place it in the secrets manager.
How We Built It
We added a secret API key to the Secrets Manager, which is accessed using the Settings section of the site dashboard.
On our site we added the following page elements:
Button: To fetch the current weather.
Labels: To display the weather on screen.
In getWeather.jsw, the getWeatherJson() function first gets a secret API key using the name given to it in the Secrets Manager. That key is then used in the getJson() function to fetch weather data and return it in JSON format.
In the $w.onReady() function, we set an onClick event handler for the getWeatherButton button, which calls the updateWeather() function when the button is clicked. Also in $w.onReady(), we call the updateWeather() function when the page loads to get and display the weather when the page is rendered.
The updateWeather() function calls the backend getWeatherJson() function to retrieve the weather data. When the weather is retrieved, we pass the JSON response to the displayWeather() function.
The displayWeather() function pulls the desired information out of the JSON and uses it to set the text property of the text elements that display the weather. We use hide() and show() with a fade effect to indicate that the display has been updated.