Used fetch()
in the past.
Previous backend version:
/************
.web.js file
************
Backend '.web.js' files contain functions that run on the server side and can be called from page code.
Learn more at https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/backend-code/web-modules/calling-backend-code-from-the-frontend
****/
/**** Call the sample multiply function below by pasting the following into your page code:
import { multiply } from 'backend/new-module.web';
$w.onReady(async function () {
console.log(await multiply(4,5));
});
****/
import { Permissions, webMethod } from "wix-web-module";
import { fetch } from "wix-fetch";
import { getSecret } from "wix-secrets-backend";
//...
const transit_api_link = "https://external.transitapp.com/v3/public/";
export const multiply = webMethod(
Permissions.Anyone,
(factor1, factor2) => {
return factor1 * factor2
}
);
// GET call using fetch because nearby Stops is a get request - though has a POST body example just in case that helps for future stuff.
export const getNearbyRoutes = webMethod(
Permissions.Anyone,
async (latitude, longitude, radius = 1500, isRealTime = false) => {
const transitAppApiKey = await getSecret("transit_app");
// Used for POST requests, not for Gets - see below for the GET linking.
const jsonBody = {
lat: latitude,
lon: longitude,
max_distance: radius, // Presumably the zoom level of the Google Maps that's on the page, though don't recall exaclty how to get information from it.
should_update_realtime: isRealTime // The default value for the API, it seems like, for getting the stops
};
const fetchOptions = {
method: "get",
headers: { "Content-Type": "application/json", "apiKey": transitAppApiKey },
//body: JSON.stringify(jsonBody),
};
console.log("Sending data: " + JSON.stringify(jsonBody));
const response = await fetch(
transit_api_link + "nearby_routes?lat=" + latitude + "'&lon=" + longitude + "&maxDistance=" + radius + "&should_update_realtime=" + isRealTime,
fetchOptions,
);
return response.json();
},
);
// GET call using fetch because nearby Stops is a get request - though has a POST body example just in case that helps for future stuff.
export const getNearbyStops = webMethod(
Permissions.Anyone,
async (latitude, longitude, radius = 1500, stopType = "All", riderFilter = "Everything") => {
const transitAppApiKey = await getSecret("transit_app");
// Used for POST requests, not for Gets - see below for the GET linking.
const jsonBody = {
lat: latitude,
lon: longitude,
max_distance: radius, // Presumably the zoom level of the Google Maps that's on the page, though don't recall exaclty how to get information from it.
stop_filter: stopType, // The default value for the API, it seems like, for getting the stops
pickup_dropoff_filter: riderFilter
};
const fetchOptions = {
method: "get",
headers: { "Content-Type": "application/json", "apiKey": transitAppApiKey },
//body: JSON.stringify(jsonBody),
};
console.log("Sending data: " + JSON.stringify(jsonBody));
const response = await fetch(
transit_api_link + "nearby_stops?lat=" + latitude + "'&lon=" + longitude + "&maxDistance=" + radius + "&stop_filter=" + riderFilter + "&pickup_dropoff_filter" + riderFilter,
fetchOptions,
);
return response.json();
},
);
Frontend with previous methods used:
// Velo API Reference: https://www.wix.com/velo/reference/api-overview/introduction
$w.onReady(function () {
// Write your Javascript code here using the Velo framework API
// Print hello world:
// console.log("Hello world!");
// Call functions on page elements, e.g.:
// $w("#button1").label = "Click me!";
// Click "Run", or Preview your site, to execute your code
});
/**** Call the sample multiply function below by pasting the following into your page code:
*****/
import wixData from 'wix-data';
import { getNearbyStops, getNearbyRoutes } from 'backend/transit-module.web.js';
import { getStopsNearLocation } from 'backend/transit-data.web.js'
$w.onReady(async function () {
wixData.truncate("Transit");
let retrievedStops = await /*getStopsNearLocation(49.2526028832592, -123.00380973189016, 1500)*/ getNearbyStops(49.2526028832592, -123.00380973189016);
//let retrievedRoutes = await //getNearbyRoutes(49.2526028832592, -123.00380973189016);
console.log(retrievedStops);
//console.log(retrievedRoutes);
wixData.bulkInsert("Transit", retrievedStops);
if($w('#dataset1').getTotalCount() > 0){
$w('#Section3Regular').show();
}
});
/*
****/
This is what I get in the console:
Sending data: {"lat":49.2526028832592,"lon":-123.00380973189016,"max_distance":1500,"stop_filter":"All","pickup_dropoff_filter":"Everything"}
{...}
stops: Array(0)
With Verbose enabled:
[datasetReady event] triggered on wix-dataset
Sending data: {"lat":49.2526028832592,"lon":-123.00380973189016,"max_distance":1500,"stop_filter":"All","pickup_dropoff_filter":"Everything"}
{...}
stops: Array(0)
[wix-dataset.getTotalCount] called
[wix-dataset.getTotalCount] returned with ( 0 )
Using the coordinates on Google Maps, there are supposed to be bus stops within 1500 m. As you see what I got in the console, I got no results. I thought about simplifying the backend with using getJSON()
in my revision since I am only getting data from the Transit app via HTTPS.
Just tried out an idea I currently have in mind which is emulating the example in the Wix dev doc article about getJSON()
:
import { getJSON } from "wix-fetch";
// ...
getJSON("https://someapi.com/api/someendpoint")
.then((json) => console.log(json.someKey))
.catch((err) => console.log(err));
Idea variant 1:
/************
.web.js file
************
Backend '.web.js' files contain functions that run on the server side and can be called from page code.
Learn more at https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/backend-code/web-modules/calling-backend-code-from-the-frontend
****/
/**** Call the sample multiply function below by pasting the following into your page code:
import { multiply } from 'backend/new-module.web';
$w.onReady(async function () {
console.log(await multiply(4,5));
});
****/
import { Permissions, webMethod } from "wix-web-module";
import { getJSON } from 'wix-fetch';
import { getSecret } from 'wix-secrets-backend'
export const multiply = webMethod(
Permissions.Anyone,
(factor1, factor2) => {
return factor1 * factor2
}
);
export const getStopsNearLocation = webMethod(Permissions.Anyone, async (lat, lon, max_distance = 150, stop_filter = "All", pickup_dropoff_filter = "Everything") => {
const apiKey = await getSecret('transit_app');
const parameters = {
lat: lat,
lon: lon,
max_distance: max_distance,
stop_filter: stop_filter,
pickup_dropoff_filter: pickup_dropoff_filter,
}
const query = new URLSearchParams(parameters).toString();
const url = "https://external.transitapp.com/v3/public/nearby_stops";
const fullURL = `${url}?${query}`;
const options = {
headers: { apiKey: apiKey }
}
getJSON(fullURL, options).then(/*async*/(json/*response*/) => {
/*if (response.ok) {
return await response.json();
} else {
throw new Error(`Error with "${fullURL}": ${response.status} (${response.url}) - ${response.statusText}`);
}*/
return json.json();
}).catch((error) => { console.log(error) });
})
Variant 1 console result:
[datasetReady event] triggered on wix-dataset
undefined
[wix-dataset.getTotalCount] called
[wix-dataset.getTotalCount] returned with ( 0 )
json.json is not a function
Idea variant 2:
/************
.web.js file
************
Backend '.web.js' files contain functions that run on the server side and can be called from page code.
Learn more at https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/backend-code/web-modules/calling-backend-code-from-the-frontend
****/
/**** Call the sample multiply function below by pasting the following into your page code:
import { multiply } from 'backend/new-module.web';
$w.onReady(async function () {
console.log(await multiply(4,5));
});
****/
import { Permissions, webMethod } from "wix-web-module";
import { getJSON } from 'wix-fetch';
import { getSecret } from 'wix-secrets-backend'
export const multiply = webMethod(
Permissions.Anyone,
(factor1, factor2) => {
return factor1 * factor2
}
);
export const getStopsNearLocation = webMethod(Permissions.Anyone, async (lat, lon, max_distance = 150, stop_filter = "All", pickup_dropoff_filter = "Everything") => {
const apiKey = await getSecret('transit_app');
const parameters = {
lat: lat,
lon: lon,
max_distance: max_distance,
stop_filter: stop_filter,
pickup_dropoff_filter: pickup_dropoff_filter,
}
const query = new URLSearchParams(parameters).toString();
const url = "https://external.transitapp.com/v3/public/nearby_stops";
const fullURL = `${url}?${query}`;
const options = {
headers: { apiKey: apiKey }
}
getJSON(fullURL, options).then(/*async*/(json/*response*/) => {
/*if (response.ok) {
return await response.json();
} else {
throw new Error(`Error with "${fullURL}": ${response.status} (${response.url}) - ${response.statusText}`);
}*/
return json;
}).catch((error) => { console.log(error) });
})
Variant 2 console result:
[datasetReady event] triggered on wix-dataset
undefined
[wix-dataset.getTotalCount] called
[wix-dataset.getTotalCount] returned with ( 0 )