GCP101 Chapter 26 JavaScript calling Google Cloud Functions

Previous chapter | TOC | GCP | Next chapter

© Copyright 2018 Nickantony Quach. All rights reserved.


Volunteer Programmers & Programming Trainees Wanted
No Prior Experiences Required!


1 Introduction

For those who did not read from the start, welcome to our online book, GCP 101 by Ri4C. Its home page is at Ri4C.com/GCP101. It is the beginner’s guide to computer programming using Google Cloud Platform (GCP). Specifically, this book teaches cloud computing for beginners, including seasoned coders who are not familiar with programming for the cloud.

The instruction provided in this chapter assumes that you’re using a Windows computer. If you’re using a Mac, click here to search for Windows keyboard equivalents for the Mac’s special keys.

For this book, you should use Firefox Developer Edition and know how to bring up its Web Console while its Debugger is docked to the side of your browser window. For further explanation, see Appendix A, below.

For those who did not sign up with Google Cloud Platform, you need to do so now. Aim your browser at Cloud.google.com, sign up, then sign in using GCP. After you sign in with GCP, go to Ri4C.com/GCP to use the GCP Shortcuts at Ri4C for direct access to key modules on GCP.

2 About the source code

The purpose of this chapter is to explain in details all the logic found, and syntax used, in the source code, gcp101c25demo18A1.htm, as presented in, Chapter 25 HTML App on Local Machine, of the online book located at Ri4C.com/GCP101.

To view the source code, aim your browser at Github.com/Ri4C/GCP101 then click on the file name, gcp101c25demo18A1.htm.

The purpose of the source code, gcp101c25demo18A1.htm, is to give the user a way to update data placed on Google Cloud Datastore using datastore23setvalue, which is a cloud service using Google Cloud Functions as explained in, Chapter 23 datastore23setvalue Cloud Service.

3 Getting Started

To get started, do the following:

  1. If not already done, create the root folder, C:\Temp, on your local machine.
  2. If not already done, create the file, C:\Temp\gcp101c25demo18A1.htm, on your local machine, using the source code found in Chapter 25 or at this web location.
  3. If you’re a true beginner, close all applications and close all windows.
  4. Open the folder, C:\Temp, then open the file, C:\Temp\gcp101c25demo18A1.htm, using Firefox Developer Edition; see Appendix A, below.
  5. Press the key [Ctrl + Shift + S] to open the Firefox Debugger.
  6. If not already done, dock the debugger to the side of your browser window.
  7. Press the key [Ctrl + Shift + K] to switch on the Firefox Web Console.
  8. Press the button [Submit] on the left.

The result of the above steps should be as shown in the following image. Click on the image to enlarge it.

4 Testing the cloud service

If you are getting the HTML standard response code of 404, the cloud service identified by the URL as specified by the variable, cloudServiceUrl, is not there. Do the following to resolve the problem.

  1. Go to Ri4C.com/GCP
  2. Click on GCF and go to the Cloud Functions.
  3. If the function datastore23setvalue is not on the list, set it up as instructed in, Chapter 23 datastore23setvalue Cloud Service.
  4. Click on the function name, datastore23setvalue.
  5. Click on the tab Trigger
  6. Copy the URL that identifies the location of your web service, datastore23setvalue.
  7. Open the file, C:\Temp\gcp101c25demo18A1.htm.
  8. Update the code and set the constant cloudServiceUrl to the URL of the cloud service. The code line should be as shown below where xxx is the web address of the cloud service, datastore23setvalue.
    const cloudServiceUrl = 'xxx';
  9. Repeat the procedure in the above section, 3 Getting Started, to verify that 404 does not appear again.

Instead of the last step, alternatively, do the following:

  1. On the same browser window, click on the thrash-can icon to clear the web console output.
  2. On the keyboard, press the F5 key to refresh the browser.
  3. Press the Cancel button if asked to resend data.
  4. Press the Submit button again to send data to the cloud, datastore23setvalue.

5 Viewing the cloud service result

The correct result coming from the cloud service, datastore23setvalue, should be as shown below:

{"Result of Cloud Service":"Entity mytable1/myrow18A1 saved.", "Time of Cloud Service":"Sun Feb 11 2018 12:59:37 GMT+0000 (UTC)", "Origin of Cloud Service":"https://seekonkjourney.wordpress.com/gcp101-chapter-23-datastore23setvalue-cloud-service/"}

The above result is a message expressed in JSON structure, as shown below:

{
  "Result of Cloud Service" : "Entity mytable1/myrow18A1 saved.", 
  "Time of Cloud Service" : "Sun Feb 11 2018 12:59:37 GMT+0000 (UTC)", 
  "Origin of Cloud Service" : "https://seekonkjourney.wordpress.com/gcp101-chapter-23-datastore23setvalue-cloud-service/"
}

Press the Submit button and try again, if you see any of the following messages, instead of the above result.

  • Endpoint read failed
  • Error: could not handle the request
  • Error: Server Error

When you see any of the above messages, the connection between your local machine and the cloud service was temporarily broken.

6 Understanding the logic in the source code

The logic in the source code, gcp101c25demo18A1.htm, as well as the logic in the cloud service, datastore23setvalue, is explained by the third chapter sequence that begins with, Chapter 31 Programming Languages for Cloud Computing.

Appendix A Firefox Developer Edition

Before reading this chapter, you should download and use the Firefox Quantum: Developer Edition. If you did not know, click here to review all keyboard shortcuts. While using Firefox, you can press the key [Ctrl + Shift + S] to bring up the Firefox Debugger. Its user interface is as shown in the following image. For this chapter, click on the third button from the right to dock the Firefox Debugger to the side of your browser window. Press the key [Ctrl + Shift + K] to bring up the Firefox Web Console.

*** End of Chapter ***

Next chapter: Chapter 31 Comparing the Cloud Service and the Local App

Next chapter


Volunteer Programmers & Programming Trainees Wanted
No Prior Experiences Required!


© Copyright 2018 Nickantony Quach. All rights reserved. | Other books | Edit