Combining Google app endpoints with a phonegap app: Step-by-step guide

I've been working on a Phonegap client application and have developed all the necessary web services using Google Endpoints.

However, I am facing an issue with using the API. In my index.html file, there is this script:

<head><script>
    var myapi;
    function initGoogleApis() {
        var ROOT = "https://myapitest.appspot.com/_ah/api";
        gapi.client.load("myapitest", "v1", function() {
            myapi = gapi.client.ratemyday;
        }, ROOT); 
    }
</script></head>
<script src="https://apis.google.com/js/client.js?onload=initGoogleApis"></script>

The goal is to declare the variable myapi as global.

In another JavaScript file, I intend to utilize myapi within the Phonegap ondeviceready function, which looks like this:

 document.addEventListener("deviceready", onDeviceReady, false);

    function onDeviceReady() {
        myapi.items.insert({
            'id' : 4,
            'name' : 'item',
        }).execute(function(resp) {
            console.log(resp);
        });
    }

The issue is that it doesn't seem to be functioning correctly, as myapi is not recognized. What could I be doing wrong? How can I effectively use my endpoints API with Phonegap?

Answer №1

Success! I've resolved the issue.

The root cause turned out to be a scope variable problem. Additionally, it was necessary to ensure that the phonegap onDeviceReady function was called within the init function.

Here is the solution that worked for me:

     <head><script>
        function initializeGoogleAPIs() {
            var ROOT = "https://myapitest.appspot.com/_ah/api";
            gapi.client.load("myapitest", "v1", function() {

            document.addEventListener("deviceready", onDeviceReady, false);

            }, ROOT); 
        }
    </script></head>

<script src="https://apis.google.com/js/client.js?onload=initializeGoogleAPIs"></script>

Answer №2

It seems like the issue may be related to a scope variable problem, but I can't say for certain. I'll look into it further and get back to you.

Instead of using

myapi.items.insert()

try using

gapi.client.ratemyday.items.insert()

I have a strong feeling that this change will resolve the issue. We've successfully implemented over 50 endpoint API calls in our application using a similar approach.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Display more/hide less form using div elements in a NextJS project

Looking to create a hidden block of amenities on my hotel website that can be expanded and collapsed with buttons in NextJS using tailwind-css. How can I achieve this functionality? Example 1: https://i.stack.imgur.com/BbrUj.png Example-2: https://i.stac ...

The function .click() fails to execute upon page load, yet it functions successfully when utilized in the console

This is the code I am using: <script> document.getElementById("test").click(); </script> When I try to trigger the click(); function on page load, it doesn't work. However, when I execute it in the console on Firefox, it works ...

Operate on Nested JSON Arrays

I have the following JSON array: var salesData = [ { "products": "Cars", "solddate" : "2022-01-01", "noofitems" : " ...

The state is well-defined within the "ComponentDidMount" function, however, it appears to be undefined in the

After extracting data from my "ComponentDidMount" function and loading it into my state, I verified the presence of the data by console logging the value successfully. However, when trying to access the state in the same manner within the return statement ...

Is there a solution for passing multiseries data in JSON that works with AnyChart in ReactJS since the standard method is not functioning correctly?

I need help implementing a column chart using AnyChart in react with multi-series data. Below is a sample JSON structure that I am having trouble passing to the chart. const multiSeriesSettings = { width: 800, height: 600, type: "column", ...

Troubleshooting Next.js Mobile Freeze Issue: Unresponsive Scroll After Page Transition

Encountered a strange bug while testing my Next.js + Bootstrap demo project on mobile view. When using the burger menu to navigate to a new page on a mobile phone, attempting to scroll down causes it to stick/freeze/hang inexplicably. Despite my efforts to ...

Ways to handle the res.locals object in a request manipulation

I am currently utilizing node-restful in my project and I am looking to replace my date properties with the help of moment. However, when I attempt the following approach; var QuestionResource = app.user = restful.model('Question', questionSche ...

The Vue.js Vuetify.js error message is saying "A mystery custom element: <v-list-item>, <v-list-item-title> - Have you properly registered the component?"

I followed the instructions from Vuetify Data Iterator Filter section I am able to use various Vuetify components like v-btn, v-card, v-data-table, v-data-iterator, and more. However, I encountered errors only with <v-list-item> and <v-list-item ...

Angular Unit testing error: Unable to find a matching route for URL segment 'home/advisor'

Currently, I am working on unit testing within my Angular 4.0.0 application. In one of the methods in my component, I am manually routing using the following code: method(){ .... this.navigateTo('/home/advisor'); .... } The navigateTo funct ...

Tips on creating a subsequent post for a file that has been uploaded to a Node Express server and then forwarded to a different API

We are currently working with an Express server in Node, where we upload a file on one route and then need to send this file to another endpoint for processing. However, the file is not stored locally on the server; it exists as an uploaded object. I&apos ...

The function toDataURL() in Canvas is storing images in low resolution

I created a unique polygonal background generator using HTML5 canvas which can be found at the following link: http://codepen.io/rfalor/pen/LhinJ Here is the important part of the code: var canvas = document.getElementById("canvas"); var ctx = c ...

Difficulty encountered when assigning object properties as callback results in node-tesseract package

I'm attempting to utilize the outcomes of a callback function as properties of an object. Here is an example of how I am implementing the module I am constructing: var Capture = require("./Capture.js") const example = async function() { let scr ...

The Right-Click Functionality in SlickGrid

Incorporating SlickGrid into my web application, I am currently contemplating whether to display the context menu based on the specific data row that is right-clicked. However, I am experiencing difficulty in triggering a right-click event as opposed to ...

React code displaying misalignment between label and input

Can you help me align my URL and https:// on the same margin? https://i.sstatic.net/hxkkC.png <div className="card"> <div className="card-body"> <div className="form-group col-12"> <label cla ...

Verify whether an HTML element lies within another HTML element

Consider this example: <div id="President"> <div id="Congressman"> <div id="Senator"> <div id="Major"></div> </div> </div> </div> Is there a simple way in JavaScript or jQuery to determine ...

How can the value attribute be obtained from the click class?

$(document).on('click','.edit', function(){ var appid = $(this).getAttribute('value'); I am trying to figure out how to save the value of the "value" attribute for an image with the edit class. Can anyone help me with thi ...

When using Material UI TextField with input type "date", the event.target.value does not seem to be accessible

I am currently working with Material UI and React Grid from DevExtreme to build a table that includes an input field of type date. However, when I attempt to enter the date, it does not register the change in value until I reach the year field, at which po ...

I possess an array of objects that includes both images and documents. My goal is to examine the mime_type of each object and select the first element in React to be displayed within an <img> tag

I have an array of objects that contain images and documents. My goal is to display the first image only if the mime_type is 'image/jpeg' or 'image/png'. I am working with React. Despite my attempts, I keep encountering undefined resul ...

Switch between light and dark mode on a webpage using HTML

I am looking to create a script using JavaScript, HTML, and CSS that can toggle between dark mode and night mode. Unfortunately, I am unsure of how to proceed with this task. https://i.sstatic.net/xA3Gq.png https://i.sstatic.net/v5vq5.png My goal is to ...

What is the best way to prevent the table from being added again once it has been displayed?

I'm faced with the task of displaying an HTML table in a popup window when a button is clicked, using Bootstrap modal functionality. This scenario is similar to a preview function where user input is displayed in a table when a preview button is click ...