Example Description
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
Secrets Manager
We added a secret API key to the Secrets Manager, which is accessed using the Settings section of the site dashboard.
Page Elements
On our site we added the following page elements:
-
Button: To fetch the current weather.
-
Labels: To display the weather on screen.
Backend Code
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.
Page Code
-
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.
Related Examples
Did this help?
|
Thanks for your feedback!
Exposing APIs
Expose APIs to your site using HTTP-functions.
Advanced
Detect Image Labels
Use Google’s vision NPM module to detect an image’s labels.
Advanced
Expose and Access Site APIs
Use wix-http-functions to expose an API, and wix-fetch to access an external API.
Intermediate