Calling Server-Side Code from the Front-End with Web Modules

Ask the community
,
1

Recently, I have been working on trying to get the background strip to change automatically based on the user’s current weather conditions. I am also a beginner, so I am not very well-versed with programming, especially JS. I managed to put together some server-side and client-side code. I’m not getting any parsing errors when I try to preview, so I do not know what is wrong, but the background strip always remains white when I preview with the current code.

Here it is:

  1. Server-side code

import {fetch} from ‘wix-fetch’;

export function getCurrentWeather(city) {
const url = ‘https://api.openweathermap.org/data/2.5/weather?q=’;
const key = <API_Key placeholder>;

let fullUrl = url + city + ‘&appid=’ + key + ‘&units=imperial’;

return fetch(fullUrl, {method: ‘get’})
.then(response => response.json())
.then(json => json.weather.description);
}

  1. Front-end code

import {getCurrentWeather} from ‘backend/Weather_background.jsw’;

export function onReady(initFunction) {
getCurrentWeather($w(“columnStrip1”).background)
let backgroundOpts = getCurrentWeather($w(“columnStrip1”).background);
let currentWeather = backgroundOpts.src
if (currentWeather === ‘overcast clouds’)
{getCurrentWeather($w(“columnStrip1”).background).src=“https://i.gifer.com/9v6z.gif”;}
else if (currentWeather === ‘broken clouds’)
{getCurrentWeather($w(“columnStrip1”).background).src=“https://i.gifer.com/9v6z.gif”;}
else if (currentWeather === ‘scattered clouds’)
{getCurrentWeather($w(“columnStrip1”).background).src=“https://i.gifer.com/9v6z.gif”;}
else if (currentWeather === ‘few clouds’)
{getCurrentWeather($w(“columnStrip1”).background).src=“https://i.gifer.com/9v6z.gif”;}
else if (currentWeather === ‘moderate rain’)
{getCurrentWeather($w(“columnStrip1”).background).src=“https://media.giphy.com/media/tkMeNtj9FQYx2/giphy.gif”;}
else if (currentWeather === ‘light rain’)
{getCurrentWeather($w(“columnStrip1”).background).src=“https://media.giphy.com/media/tkMeNtj9FQYx2/giphy.gif”;}
else if (currentWeather === ‘heavy intensity rain’)
{getCurrentWeather($w(“columnStrip1”).background).src=“https://media.giphy.com/media/tkMeNtj9FQYx2/giphy.gif”;}
else if (currentWeather === ‘very heavy rain’) {getCurrentWeather($w(“columnStrip1”).background).src=“https://media.giphy.com/media/tkMeNtj9FQYx2/giphy.gif”;}
else if (currentWeather === ‘extreme rain’) {getCurrentWeather($w(“columnStrip1”).background).src=“https://media.giphy.com/media/tkMeNtj9FQYx2/giphy.gif”;}
else if (currentWeather === ‘freezing rain’) {getCurrentWeather($w(“columnStrip1”).background).src=“https://media.giphy.com/media/tkMeNtj9FQYx2/giphy.gif”;}
else if (currentWeather === ‘light intensity shower rain’)
{getCurrentWeather($w(“columnStrip1”).background).src=“https://media.giphy.com/media/tkMeNtj9FQYx2/giphy.gif”;}
else if (currentWeather === ‘shower rain’) {getCurrentWeather($w(“columnStrip1”).background).src=“https://media.giphy.com/media/tkMeNtj9FQYx2/giphy.gif”;}
else if (currentWeather === ‘heavy intensity shower rain’) {getCurrentWeather($w(“columnStrip1”).background).src=“https://media.giphy.com/media/tkMeNtj9FQYx2/giphy.gif”;}
else if (currentWeather === ‘ragged shower rain’) {getCurrentWeather($w(“columnStrip1”).background).src=“https://media.giphy.com/media/tkMeNtj9FQYx2/giphy.gif”;}
else if (currentWeather === ‘clear sky’) {getCurrentWeather($w(“columnStrip1”).background).src=“https://media.giphy.com/media/SotJCbDWOnnWM/giphy.gif”;}
else if (currentWeather === ‘snow’)
{getCurrentWeather($w(“columnStrip1”).background).src=“https://media.giphy.com/media/BDucPOizdZ5AI/giphy.gif”;}
else if (currentWeather === ‘light snow’)
{getCurrentWeather($w(“columnStrip1”).background).src=“https://media.giphy.com/media/BDucPOizdZ5AI/giphy.gif”;}
else if (currentWeather === ‘heavy snow’)
{getCurrentWeather($w(“columnStrip1”).background).src=“https://media.giphy.com/media/BDucPOizdZ5AI/giphy.gif”;}
else if (currentWeather === ‘sleet’)
{getCurrentWeather($w(“columnStrip1”).background).src=“https://media.giphy.com/media/BDucPOizdZ5AI/giphy.gif”;}
else if (currentWeather === ‘shower sleet’)
{getCurrentWeather($w(“columnStrip1”).background).src=“https://media.giphy.com/media/BDucPOizdZ5AI/giphy.gif”;}
else if (currentWeather === ‘light rain and snow’)
{getCurrentWeather($w(“columnStrip1”).background).src=“https://media.giphy.com/media/BDucPOizdZ5AI/giphy.gif”;}
else if (currentWeather === ‘rain and snow’) {getCurrentWeather($w(“columnStrip1”).background).src=“https://media.giphy.com/media/BDucPOizdZ5AI/giphy.gif”;}
else if (currentWeather === ‘light shower and snow’)
{getCurrentWeather($w(“columnStrip1”).background).src=“https://media.giphy.com/media/BDucPOizdZ5AI/giphy.gif”;}
else if (currentWeather === ‘shower snow’) {getCurrentWeather($w(“columnStrip1”).background).src=“https://media.giphy.com/media/BDucPOizdZ5AI/giphy.gif”;}
else if (currentWeather === ‘heavy shower snow’) {getCurrentWeather($w(“columnStrip1”).background).src=“https://media.giphy.com/media/BDucPOizdZ5AI/giphy.gif”;}
else (currentWeather === ‘’) {getCurrentWeather($w(“columnStrip1”).background).src=“https://media.giphy.com/media/SotJCbDWOnnWM/giphy.gif”;}

}

I am not sure if the server-side code automatically adds the user’s city (location) to the url when fetched or if additional code is needed for that. I am also not sure if I first need to create a placeholder for the value when fetched or not in order for it to be valid on the client-side code.

It would be great if someone can take a look and point me in the right direction. Thank you in advance!

#serversidecode #fetch api #ThirdpartyAPIcalls

2

Did you supply your own API Key in the appropriate place in the code?

const key = <API_Key placeholder>;
3

Here’s the How to Start information.

4

Hello Yisrael, thank you for commenting. I used an API key for OpenWeatherMap that I got from RapidAPI which is sort of a marketplace of APIs. But I didn’t sign up directly from OpenWeather Map’s site, nor did I get a confirmation email about its activation - so I will try signing up directly from their website instead. Thank You!!

Update:
Confirming - the API was wrong to begin with - I believe I was using a test one from RapidAPI thinking it was a real API key. Thank you for the insight, hopefully the activated one will work.

5

@yisrael-wix I am having a similar issue. I am not exactly sure when I am going wrong with this code and would appreciate any feedback:

Here is my Backend code:

import {fetch} from 'wix-fetch';   import {wixData} from 'wix-data';   export function postLoyalty() {  let options ={  "headers": {          "X-Public": "pk_live_ba43e74df464cbf521dd07ee20443ff754c3afc11adc16df2594facb2147cd76"         }   }  const url = 'https://whisqr.com/api/v1.2/user/customer/';  const key = '<pk_live_ba43e74df464cbf521dd07ee20443ff754c3afc11adc16df2594facb2147cd76>';      console.log("Url: ");   return fetch(url, {method: 'post'})     .then(response => {  return response.json();     })     .then((data) => {       console.log(data);  return data;     }); }

Here is my Page Code:

import {postLoyalty} from 'backend/Loyalty.jsw'; import {wixData} from 'wix-data'; import wixLocation from "wix-location"; import {myFunction} from 'public/core.js'; import wixUsers from 'wix-users';   $w.onReady(function () {  let publickey = 'pk_live_ba43e74df464cbf521dd07ee20443ff754c3afc11adc16df2594facb2147cd76';     myFunction(publickey)     .then( (response) => {         console.log(response); //your base64 encoded string     })});  export function page1_viewportEnter(event) {  //Add your code for this event here:  let email = wixUsers.currentUser.getEmail(); postLoyalty(email)         .then(LoyaltyInfo => {             console.log(LoyaltyInfo)             $w("#text1").text = LoyaltyInfo.Results.Value;         }) }