Table of Content [under construction]
Cited: Apps Script is a scripting platform developed by Google for light-weight application development in the Google Workspace platform. Google Apps Script was initially developed by Mike Harm as a side project whilst working as a developer on Google Sheets.
It's over the decade to be be open for everyone who is least one hand into Google Services such as Google Docs, Maps or Sheets. Particular to later i.e. Google Sheets (GS) that comes hand in hand with Google Apps Script (GAS) Integrated Development Environment (IDE) can be made use of as for back-end projects i.e. the database on the fly with a few lines of code as presented within boilerplate in Getting Started section down below.
As GAS IDE recently switched the engine to a globally known V8, the same engine Google Chrome browser uses behind the hood as well. That's why Google Chrome would be higly recommended to use as the prerequisite environment for this back-end oriented application.
When it comes about the hotspot widget (hotspot.js) itself, all it does, it lets you place the markers on the map image by mouse clicks (more advanced GUI is one the features currently upcoming), the markers are coordinates (coords) themselves that go to Google Sheets (thanks for GAS integration provided) within every click on image map made. When you reload the browser markers will disappear in the browser DOM, but will stay in memory of Google Sheets – a primitive database replica. Introducing such widget as a part of application example into frames of the same language (in this case JavaScript within browser environment), opens doors for basic application development without PHP nor Node.js or other languages / environments / frameworks as the prerequisite needed.
For a further do I am sharing a ready to go JavaScript boilerplate for Google Apps Script (GAS) integration. This back-end boilerplate comes hand in hand with FETCH API which content declared within the file of script.js provided as an integration example with Hotspot widget written totally in vanilla JavaScript flavour by me i.e. @projektorius96 . Instead of ready deployed application I am sharing a touch of integration on one's own account of Google which is the only prerequisite needed to meet for you to be fully set.
PLEASE READ STEPS MUST FOLLOW CAREFULLY
// STEPS MUST FOLLOW:
/*
* PUBLISH THE SPREADSHEET TO ANYONE ON WEB
** DEPLOY APPS-SCRIPT's CONTENT OF : doGet, doPost TO ANYONE ON WEB
*** USE /EXEC URL (ENDPOINT) OF THE CURRENT_DEPLOYMENT_ID
*/
// BACK-END (*GOOGLE APPS-SCRIPT IDE):
function doGet(e){
try {
const db = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet(); // get active **Google Sheets | this is similar to document.getElementsById
// const data = db.getRange("a1notation").getValues(); /* – this is an alternative accessor (reference) to range */
const data = db.getRange(db.getLastRow(),1).getValues(); // get range of the last field (row) on **GS
const jsonData = JSON.stringify(Object.assign({}, data.flat() )); // [[]] –> {} | /* otherwise do sth like that : JSON.stringify({accessHandler: e}); */
Logger.log(jsonData); // to debug on *GAS IDE side
return ContentService.createTextOutput(jsonData).setMimeType(ContentService.MimeType.JSON); // DO GET DATA to external app (localhost) if successful
}
catch(e){
const error = {"error": e}; // define error object for catch{} statement
const jsonError = JSON.stringify(error); // stringify error be ready to be passed via Network
return ContentService.createTextOutput(jsonError).setMimeType(ContentService.MimeType.JSON); // THROW ERROR if not successful
}
}
function doPost(e) {
const body = e.postData.contents; // IN CHARGE TO ACCEPT DATA TRANSMISSION AS JSON BODY via Network
const bodyJSON = JSON.parse(body); // Convert JSON to JavaScript object in order to understand "the content"
const db = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet(); // reference to the data on **GS
db.getRange("A1:A20").setNumberFormat("@"); // implicitly set type format to TEXT
db.appendRow([bodyJSON.coords]); // DO POST DATA to the **GS
// db.appendRow([bodyJSON._sameNameHandler]); /* _sameNameHandler as within external app FETCH API POST request */
}CAUTION : each way you follow, you will have to update request_url variable with up-to-date /CURRENT_DEPLOYMENT_ID/ of one's deployment (version) which can be found in GAS IDE Manage Deployments Dialog
For instructions on how to DEPLOY the app within GAS IDE and find DEPLOYMENT_ID for /CURRENT_DEPLOYMENT_ID/ updated onto request_url | [ read more about here ]
For GAS IDE itself, please open your container-based application file you wish (any Google Sheets file on Google Drive) and follow along the path :
Tools –> Script editor
If you want to observe all the projects of Apps Script you're on currently, you have a Dashboard for this as well [ GAS Dashboard ]
In terms of FETCH API request within script.js provided : if it appeared too advanced for one's eye, I am providing a more simplified bare minimum boilerplate . This is for Front-end particularly !
// FRONT-END:
// Push data in Google Sheets from external app :
const request_url = "https://script.google.com/macros/s/CURRENT_DEPLOYMENT_ID/exec";
fetch(request_url, {
method: 'POST',
mode: 'no-cors',
cache: 'no-cache',
credentials: 'same-origin',
headers: {
'Content-Type': 'application/json'
},
redirect: 'follow',
body: JSON.stringify(/* { _sameNameHandler: `${ Your external app dataVariable be processed via doPost(e) */)
});
// Pull data out (GET DATA) of Google Sheets to external app :
fetch(request_url).then(response => response.json()).then(response => console.log(response));