How to track user clicks on Phaser web-game? - javascript

So I've made a web game with the Phaser.js framework. Without a database, I want to track events/actions in the game. The data consist of at least two strings: time_stamp & event (i.e. "click the 'Play' button").
My current attempt is to write the data to my google sheets. How to do that?
I want something like:
Function for 'Play' button
playGame() {
// Go to gameplay scene
scene.start(Gameplay)
// Script to insert data to google sheet
submitEvent(timestamp, "click the 'Play' button"){
}
}
Or maybe there's an easier way to do the tracking? Need to be a free service and capable to store data online with javascript.
I tried the Google Sheet API but was confused with the doc, it seems like I need the player to log in and authorize, is it possible to avoid that? Most tutorials use HTML Form to send data, which I didn't use.

I believe your goal is as follows.
You want to put the values of timestamp and "click the 'Play' button" to your Google Spreadsheet using Javascript without authorization process.
In the current stage, in order to put a value to Spreadsheet using Sheets API, it is required to use the access token retrieved from OAuth2 and the service account. I'm worried that in this case, the script might be a bit complicated, and it might not your expected direction.
If you want to put a value to your Spreadsheet with a simple script without the authorization process, how about using Web Apps created by Google Apps Script? When Web Apps is used, your goal might be able to be achieved. When the method for putting a value to Spread sheet with Web Apps is implemented in Javascript, please do the following flow.
Usage:
1. Create Spreadsheet.
Please create Spreadsheet. You can create a new Spreadsheet by accessing https://docs.google.com/spreadsheets/create. In this case, the Spreadsheet is created in the root folder of your Google Drive. And please open the script editor on Spreadsheet.
2. Prepare Google Apps Script.
Please copy and paste the following script to the script editor and save the script.
function doGet(e) {
const { value1, value2 } = e.parameter;
SpreadsheetApp.getActiveSpreadsheet().getSheets()[0].appendRow([value1, value2]);
return ContentService.createTextOutput("Done.");
}
3. Deploy Web Apps.
The detailed information can be seen in the official document.
Please set this using the new IDE of the script editor.
On the script editor, at the top right of the script editor, please click "click Deploy" -> "New deployment".
Please click "Select type" -> "Web App".
Please input the information about the Web App in the fields under "Deployment configuration".
Please select "Me" for "Execute as".
Please select "Anyone" for "Who has access".
Please click "Deploy" button.
When "The Web App requires you to authorize access to your data." is shown, please click "Authorize access" button. And, please authorize the scopes.
This authorization process is only one time. When you access Web Apps using Javascript, no authorization is required, because it has already been done here. I thought that this might be an important point to your expected direction.
Copy the URL of the Web App. It's like https://script.google.com/macros/s/###/exec. This URL is used for your HTML.
4. Testing.
When the values of value1 and value2 are timestamp and "click the 'Play' button", the sample script of Javascript is as follows. And, please set your Web Apps URL. And, please use this script in your script.
function sample(value1, value2) {
const webAppsURL = "https://script.google.com/macros/s/###/exec"; // Please set your Web Apps URL.
fetch(`${webAppsURL}?value1=${value1}&value2=${value2}`).then(async (res) => console.log(await res.text()));
}
When you run sample(value1, value2) by giving the values, the values are put to the 1st sheet of the Spreadsheet.
Note:
When you modified the Google Apps Script of Web Apps, please modify the deployment as a new version. By this, the modified script is reflected in Web Apps. Please be careful about this.
You can see the detail of this in my report "Redeploying Web Apps without Changing URL of Web Apps for new IDE (Author: me)".
References:
Web Apps
Taking advantage of Web Apps with Google Apps Script (Author: me)

Related

How to auto-generate pages from an API with JavaScript on a WordPress site?

I'm using an API in JSON format to display the standings of sports teams in a league. Here's an example of the JSON data I'm working with:
{ "data":[
{
"position":1,
"team_id":53,
"team_name":"Celtic",
"group_id":null,
"group_name":null,
"overall":{
"games_played":25,
"won":18,
"draw":6,
"lost":1,
"goals_scored":54,
"goals_against":17
},
"home":{
"games_played":13,
"won":9,
"draw":4,
"lost":0,
"goals_scored":30,
"goals_against":8
},
"away":{
"games_played":12,
"won":9,
"draw":2,
"lost":1,
"goals_scored":24,
"goals_against":9
},
"total":{
"goal_difference":"+37",
"points":60
},
"result":"Promotion - Premiership (Championship Group)",
"points":60,
"recent_form":"WWWDW",
"status":"same"
}
]}
I have a way to associate the team_ID with specific team data from the API. What I'm trying to do is to make the teams in my Standings tables clickable, so when the user clicks on a team, they can go to a page where I display data for that specific team (the info would, of course, be extracted from the API). Now, I'm developing the website on top of WordPress, and I'm wondering how I can auto-generate pages for every team, so that site users can go to specific team pages directly from the Standings tables.
It's not convenient for me to manually create pages with a piece of code and upload them to the FTP server for each team, because there'll be so many teams (eventually thousands of teams), and it's definitely not feasible.
Can anyone please guide me on the way to auto-create pages for the teams so my team links don't return 404 Not Found pages? An important point is that I'm using JavaScript to manipulate the data.
I'm using the team_id property in the API to create my team links, but I don' know how to use my team_id to automatically create team pages on my WordPress site.
Please help if you can. :)
You can use ajax method on click team-id, in ajax call function, check, is this team-id exists or not, if exists redirect to respective page or not create a new page and display require information.
I have worked same type project, I am using CPT method for the game and used the custom taxonomy for team and player.

How to allow my google script to be run by anyone off of a webpage

I am currently attempting to write a google script that will run once a submit button is clicked on a form in a webpage. When the button is pressed it takes the form data, logs it into googles Logger and then emails a JSON report from the google account the script was made on. I have just gotten this script to run and print how I want it to thanks to another user on this site and I have now run into the issue that the only reason it was running and working is because I was signed into google on the account I made to send the emails. I have turned my script to public access by anyone on the web and still all I am getting is that google is "unable to open the page at this time." Is there some other way to get around this without having the user use their own email client?
var TO_ADDRESS = "test#email.com";
var output = HtmlService.createHtmlOutputFromFile('Confirmation');
function doPost(e) {
try{
Logger.log(e);
MailApp.sendEmail(T0_ADDRESS, "RFQ: The following person has requested a quote", JSON.stringify(e.parameters, null, 4));
return output;
This is the code which as I said earlier does work as long as I'm logged in but I would like this to be able to be used by anyone that accesses the website
I have done something similar using "Deploy as web app" option you will get an url , you can give that to anyone and they too can execute this without any need of authorization.Below is a walkthrough
You can use this url in whatever way you like, as a curl request,ajax or just a browser url request
But note that you must have a doGet() otherwise it would give an error like in the final screenshot.But since i had put doGet() it ran perfectly (forgot to take its screen :P) .

Determine if current user has write access for google sheet

I am using Google Sheets API from a Javascript application.
Users log in to my app and grant it permission read/write permission to google sheets.
I have hardcoded a document ID for a google sheet into my application.
I want to be able to make a rest query to determine the current users access rights to that particular document. The user may have:
no access
read only access
read write access
(I manually share the relevant access to the document to each user)
I am looking for a way of doing this. I have searched the sheets API and the drive API but I can't find any call.
At the moment I plan to create a function which will:
try and read the document - if I get an error return "NO ACCESS"
try and write the document - if I get an error return "READ ONLY"
return "READ WRITE"
It seems like a bad idea to determine write access by actually making a write to the document.
Does anyone have any better ideas?
I have tried listing the permissions using this API:
https://developers.google.com/drive/v3/reference/permissions/list
but I just get a list of permissions and this has to be parsed. Also my test read only user got forbidden.

Share a Drive document without notifying user with Google Apps Script

I am creating a workflow process in Apps Script where a Doc is generated from a template and shared with various users for approval. The Script sends a customised email notifying a user that the document requires their approval but they also receive a second email at each stage in the process from the user whose Drive the document is stored in saying "User has shared a document with you". Is there any way of disabling these alerts? When you share a document manually from your Drive, there is a checkbox option that allows you to choose whether or not the user receives a notification. However, I cannot find a way to disable this notification with Apps Script.
I am using doc.addEditors(users) to share the document.
Many Thanks
Another option would be to use the Drive advanced service (which you should enable in the Resources menu in the Script Editor).
The code used should be
Drive.Permissions.insert(
{
'role': 'writer',
'type': 'user',
'value': 'bob#example.com'
},
fileId,
{
'sendNotificationEmails': 'false'
});
There is a simple solution if you are working with Google Docs or Google SpreadSheets. You can use DocumentApp or SpreadSheetApp to share your Docs or SpreadSheets without email notification:
DocumentApp
var doc = DocumentApp.openById('124144')
doc.addEditor('example#mail.com').addViewer('example2#mail.com')
SpreadSheetApp
var spreadSheet = SpreadsheetApp.openById('124144')
spreadSheet.addEditor('example#mail.com').addViewer('example2#mail.com')
However, if you are working with documents that aren't Docs or SpreadSheets, you must share then using DriveApp and email notification will be send.
This isn't possible at the moment. More information about this topic can be found here: https://code.google.com/p/google-apps-script-issues/issues/detail?id=2829
A workaround suggested in the comments of the above issue is to use DocsList instead:
DocsList, SpreadsheetApp and DocumentApp have addEditor and addViewer methods that do not result in notification emails.

How can I access Google Sheet spreadsheets only with Javascript?

I want to access Google Spreadsheets using JavaScript only (no .NET, C#, Java, etc.)
I came here and was shocked to know that there is NO API for JavaScript to access Google Sheets.
Please tell me how to access (CREATE/EDIT/DELETE) Google Sheets using JavaScript or any of its frameworks like jQuery.
I have created a simple javascript library that retrieves google spreadsheet data (if they are published) via the JSON api:
https://github.com/mikeymckay/google-spreadsheet-javascript
You can see it in action here:
http://mikeymckay.github.com/google-spreadsheet-javascript/sample.html
Jan 2018 UPDATE: When I answered this question last year, I neglected to mention a third way to access Google APIs with JavaScript, and that would be from Node.js apps using its client library, so I added it below.
It's Mar 2017, and most of the answers here are outdated -- the accepted answer now refers to a library that uses an older API version. A more current answer: you can access most Google APIs with JavaScript only. Google provides 2 (correction, 3) ways to do this today:
As mentioned in the answer by Dan Dascalescu, you can use Google Apps Script, the JavaScript-in-Google's-cloud solution. That is, non-Node server-side JS apps outside the browser that run on Google servers.
You code your apps in the Apps Script code editor, and they can access Google Sheets in two different ways:
The Spreadsheet Service (native object support; usage guide); native is easier but is generally older than...
The Google Sheets Advanced Service (directly access the latest Google Sheets REST API [see below]; usage guide)
Apps Script also powers add-ons, and you can extend Sheets UI functionality with Sheets add-ons (like these)
You can even write mobile add-ons which extend the Sheets app on Android
To learn more about using Apps Script, check out these videos I've created (most involve the use of Sheets)
You can also use the Google APIs Client Library for JavaScript to access the latest Google Sheets REST API on the client side.
Here are some generic samples of using the client library
The latest Sheets API (v4) was released at Google I/O 2016; it's much more powerful than all previous versions, giving developers programmatic access to most features found in the Sheets UI
Here is the JavaScript quickstart for the API to help you get started
Here are sample "recipes" (JSON payloads) for core API requests
If you're not "allergic" to Python (if you are, just pretend it's pseudocode ;) ), I made several videos with more "real-world" samples of using the API you can learn from and migrate to JS if desired (NOTE: even though it's Python code, most API requests have JSON & easily portable to JS):
Migrating SQL data to a Sheet (code deep dive post)
Formatting text using the Sheets API (code deep dive post)
Generating slides from spreadsheet data (code deep dive post)
Those and others in the Sheets API video library
The 3rd way to access Google APIs with JavaScript is from the Node.js client library on the server-side. It works similarly to using the JavaScript (client) client library described just above, only you'll be accessing the same API from the server-side. Here's the Node.js Quickstart example for Sheets. You may find the Python-based videos above to be even more useful as they too access the API from the server-side.
When using the REST API, you need to manage & store your source code as well as perform authorization by rolling your own auth code (see samples above). Apps Script handles this on your behalf, managing the data (reducing the "pain" as mentioned by Ape-inago in their answer), and your code is stored on Google's servers. But your functionality is restricted to what services App Script provides whereas the REST API gives developers much broader access to the API. But hey, it's good to have choices, right? In summary, to answer the OP original question, instead of zero, developers have three ways of accessing Google Sheets using JavaScript.
Here's the Gist.
You can create a spreadsheet using the Google Sheets API. There is currently no way to delete a spreadsheet using the API (read the documentation). Think of Google Docs API as the route to create and look-up documents.
You can add/remove worksheets within the spreadsheet using the worksheet based feeds.
Updating a spreadsheet is done through either list based feeds or cell based feeds.
Reading the spreadsheet can be done through either the Google Spreadsheets APIs mentioned above or, for published sheets only, by using the Google Visualization API Query Language to query the data (which can return results in CSV, JSON, or HTML table format).
Forget jQuery. jQuery is only really valuable if you're traversing the DOM. Since GAS (Google Apps Scripting) doesn't use the DOM jQuery will add no value to your code. Stick to vanilla.
I'm really surprised that nobody has provided this information in an answer yet. Not only can it be done, but it's relatively easy to do using vanilla JS. The only exception being the Google Visualization API which is relatively new (as of 2011). The Visualization API also works exclusively through a HTTP query string URI.
There's a solution that does not require one to publish the spreadsheet. However, the sheet does need to be 'Shared'. More specifically, one needs to share the sheet in a manner where anyone with the link can access the spreadsheet. Once this is done, one can use the Google Sheets HTTP API.
First up, you need an Google API key. Head here:
https://developers.google.com/places/web-service/get-api-key
NB. Please be aware of the security ramifications of having an API key made available to the public: https://support.google.com/googleapi/answer/6310037
Get all data for a spreadsheet - warning, this can be a lot of data.
https://sheets.googleapis.com/v4/spreadsheets/{spreadsheetId}/?key={yourAPIKey}&includeGridData=true
Get sheet metadata
https://sheets.googleapis.com/v4/spreadsheets/{spreadsheetId}/?key={yourAPIKey}
Get a range of cells
https://sheets.googleapis.com/v4/spreadsheets/{spreadsheetId}/values/{sheetName}!{cellRange}?key={yourAPIKey}
Now armed with this information, one can use AJAX to retrieve data and then manipulate it in JavaScript. I would recommend using axios.
var url = "https://sheets.googleapis.com/v4/spreadsheets/{spreadsheetId}/?key={yourAPIKey}&includeGridData=true";
axios.get(url)
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
2016 update: The easiest way is to use the Google Apps Script API, in particular the SpreadSheet Service. This works for private sheets, unlike the other answers that require the spreadsheet to be published.
This will let you bind JavaScript code to a Google Sheet, and execute it when the sheet is opened, or when a menu item (that you can define) is selected.
Here's a Quickstart/Demo. The code looks like this:
// Let's say you have a sheet of First, Last, email and you want to return the email of the
// row the user has placed the cursor on.
function getActiveEmail() {
var activeSheet = SpreadsheetApp.getActiveSheet();
var activeRow = activeSheet.getActiveCell().getRow();
var email = activeSheet.getRange(activeRow, 3).getValue();
return email;
}
You can also publish such scripts as web apps.
edit: This was answered before the google doc's api was released. See Evan Plaice's answer and Dan Dascalescu's answer for more up-to-date
information.
It looks lke you can, but it's a pain to use. It involves using the Google data API.
http://gdatatips.blogspot.com/2008/12/using-javascript-client-library-w-non.html
"The JavaScript client library has helper methods for Calendar, Contacts, Blogger, and Google Finance. However, you can use it with just about any Google Data API to access authenticated/private feeds. This example uses the DocList API."
and an example of writing a gadget that interfaces with spreadsheets: http://code.google.com/apis/spreadsheets/gadgets/
'JavaScript accessing Google Docs' would be tedious to implement and moreover Google documentation is also not that simple to get it. I have some good links to share by which you can achieve js access to gdoc:
http://code.google.com/apis/documents/docs/3.0/developers_guide_protocol.html#UploadingDocs
http://code.google.com/apis/spreadsheets/gadgets/
http://code.google.com/apis/gdata/docs/js.html
http://www.mail-archive.com/google-help-dataapi#googlegroups.com/msg01924.html
May be these would help you out..
Sorry, this is a lousy answer. Apparently this has been an issue for almost two years so don't hold your breath.
Here is the official request that you can "star"
Probably the closest you can come is rolling your own service with Google App Engine/Python and exposing whatever subset you need with your own JS library. Though I'd love to have a better solution myself.
In this fast changing world most of these link are obsolet.
Now you can use Google Drive Web APIs:
Java
PHP
Javacript
.NET
Python
Ruby
and others...
you can do it by using Sheetsee.js and tabletop.js
example from git
another Example
You can read Google Sheets spreadsheets data in JavaScript by using the RGraph sheets connector:
https://www.rgraph.net/canvas/docs/import-data-from-google-sheets.html
Initially (a few years ago) this relied on some RGraph functions to work its magic - but now it can work standalone (ie not requiring the RGraph common library).
Some example code (this example makes an RGraph chart):
<!-- Include the sheets library -->
<script src="RGraph.common.sheets.js"></script>
<!-- Include these two RGraph libraries to make the chart -->
<script src="RGraph.common.key.js"></script>
<script src="RGraph.bar.js"></script>
<script>
// Create a new RGraph Sheets object using the spreadsheet's key and
// the callback function that creates the chart. The RGraph.Sheets object is
// passed to the callback function as an argument so it doesn't need to be
// assigned to a variable when it's created
new RGraph.Sheets('1ncvARBgXaDjzuca9i7Jyep6JTv9kms-bbIzyAxbaT0E', function (sheet)
{
// Get the labels from the spreadsheet by retrieving part of the first row
var labels = sheet.get('A2:A7');
// Use the column headers (ie the names) as the key
var key = sheet.get('B1:E1');
// Get the data from the sheet as the data for the chart
var data = [
sheet.get('B2:E2'), // January
sheet.get('B3:E3'), // February
sheet.get('B4:E4'), // March
sheet.get('B5:E5'), // April
sheet.get('B6:E6'), // May
sheet.get('B7:E7') // June
];
// Create and configure the chart; using the information retrieved above
// from the spreadsheet
var bar = new RGraph.Bar({
id: 'cvs',
data: data,
options: {
backgroundGridVlines: false,
backgroundGridBorder: false,
xaxisLabels: labels,
xaxisLabelsOffsety: 5,
colors: ['#A8E6CF','#DCEDC1','#FFD3B6','#FFAAA5'],
shadow: false,
colorsStroke: 'rgba(0,0,0,0)',
yaxis: false,
marginLeft: 40,
marginBottom: 35,
marginRight: 40,
key: key,
keyBoxed: false,
keyPosition: 'margin',
keyTextSize: 12,
textSize: 12,
textAccessible: false,
axesColor: '#aaa'
}
}).wave();
});
</script>
For this type of thing you should use Google Fusion Tables. The API is designed for that purpose.

Categories

Resources