Jump-Start API frontend and backend use & coding skills

Create the UI that will move us through the coming lectures

Style it

Target its elements using DOM

A punch of HTML and css tricks

Create an API call

Receive and parse response

Track the function and async-await execution

Use the Browser developer Tools

How does fetch(URL) works?

4 ways to navigate and extract data from a JSON response including postman

A step-by-step procedure to select the piece of data you need from the response

Links and steps are in the lecture resource

Apply what we had learned in the previous lecture about how JSON response is constructed

Learn how to select a chain of objects and arrays till you reach the data you want

Function Declaration

Function Expression

Arrow function

Single line arrow functions

Understand how promise is passed from the fetch to each of the following chain of then and catch

When .then() is directly executed and when it waits for the previous step

What is the use of .catch()

Make an API call using Fetch(URL)

handle the Fetch promise returned using .then

Use .catch chaining to prevent error

Learn promise passing scopes and global scopes

Sign up to a simple easy API that has a free tier for testing but request and API-Key and a project_id to allow users to access the available data and make API requests

Navigate the documentation and tools available and grasp as much as possible of the code samples and objects structure and credentials to use it in the application part next

How to add your API credentials to the fetch?

The limitations of running the index.html or website directly from your PC hardisk

What is a localhost?

How to run your website from a local host?

Does running your website from a web host solve CORS problem caused by the browser? let's test it.

What is Node?

What is its function?

What is npm?

Node.js installation?

Adapt the script.js code to work on Node.js

Where will be the console.log displayed in case of serverside script?

Why fetch() is not available by default in Node.js?

Will the server side script manage to get data from the API with a key without CORS problem?

Practical example on 2 API requests running asynchronously in parallel and response time varies the sequence of display in console

The limitation of screen printing for arrays of objects

What does it mean that a local host listens to service requests?

Is that special to testing or development environment only?

A punch of jargons as port, service, IP, DNS, etc.

Create server and server header

Fetch the data and add it to the response after receiving the request

Start listening to the request

Report the response to the browser at the specified port when it calls the server that is listening

Create a local backend server call within your frontend script

A couple of ways to overcome the "Access-control Allow origin error"

Can we use  "no-CORS"?

How to make valid for the request from any origin?

How to read the request origin?

Create your own CORS

Structure the backend request and add a query to it

Parse the URL part of the request header to extract the query

Request the data from the 3rd party API using the query tag

Create a communication channel between a frontend server and a backend server with different ports on your local host

Refresh your skills of how to loop through the objects and arrays of the response of an API with a key

How to use Postman with APIs that needs credentials

Start Using Google Sheets and understand how it works as a Web App

Start using Apps Script and understand its menus

See how Classes and methods of Apps Script work to manipulate Sheets

Prepare an Apps Script that searches through your data

Set the URL query parameter that the script will use to select data

Assemble the found data in an object

Return the result in the form of JSON

Test it on a test deployment before versioned deployment

Call the endpoint URL together with the query from an Apps Script of another user

How to use the fetch method of the Apps Script?

How to pass credentials? And, where to store them?

Skipping the async/await, .then() and CORS

Dynamically access the sheet

Store resolved data in the sheet

Create an HTML default template from within Apps Script

In Apps Script HTML files are called by scripts not the other way round as in browsers

Convert The Definitions UI to Apps Script HTML

Where do css and script files go?

Create the frontend script with DOM

Deployments vs test deployment

Link the frontend script generated in the html file to the functions .gs file using Google special methods for this

As both script are running from within the same Google project, Google Apps Script offers the support to make it possible through methods built specially to exchange data between frontend and backend in this condition

Types of Deployment and their usage

Deploy a library and access it from a different account

Precautions to run the API from the other account as a library

Run the API call and receive the data in the other sheet

Return a JSON as a response to the request send to the Web App

Simulate a real API by fetching the base URL and adding Query to it

What are Google APIs used for?

What APIs are available?

What are API libraries?

After these many lectures, what are scripts and modules?

Start where to find the endpoints or the base URL of the Google APIs

The first one  is the Discovery API that include all the Google APIs and their discoveryRestUrl

How to make a filter to an array?

Get the Discovery API discoveryRestUrl from the Discovery API

Use it in Postman to open the discovery document

Use organized steps to assemble the endpoint

Navigate the document to assemble the API endpoint

Add a filter query

Get the translation discoveryRestUrl

Assemble the endpoint by navigating though the document using Postman

Build the translate endpoint

How to add a repeated query and a phrase

Steps to register for a GCP Google cloud platform

Enable Sheets and Translation APIs

Start Creating API Keys and, other credentials

Authorized JavaScript Origins and redirects

Load Google APIs script file for JavaScript methods

Initialize it with the Discovery document of the Discovery API

How to use the GitHub Google documentation

Where to find the methods we shall use with translation and sheets

Use the Translation Discovery Document and Postman to get the parameters and the methods or the ID needed for the languages and the translation

Practice translating in different languages

Navigate the Sheets Discovery Document on Postman

Find the required parametrization and how to write it correctly

Go further step to batchGet also

What are the parameters of the update method?

How to set those parameters correctly?

Where you can look when there is an information that you can't get from the Discovery Document?

Can we change sheet values with only API Key?

What scripts are needed for authorization?

What are the differences between authorization and authentication?

How to match with Google authorization requirements that will be mandatory by Aug 2023?

Link the script successful loading to the authorization functions

Parametrize the Google identity service step-by-step

How the user will call the authorization? and when to use the token callback function?

what will create the authorization pop-up?

Different scenarios for available authorization or not

Proper placement of accessing DOM element based on functions flow

Authorization from other users during development

Sign out compliance with correct visible/invisible sequence

Add the Google id for the pop up

Create the authentication callback

Decode the JWT token to extract the user info using unpkg.com

We shall move the trigger of the authentication popup  to the script and activate it when html body is loaded

Credentials will be passed to Google accounts instead of the <dev>

Difference between Browser JavaScript and Node.js

Adjust the JavaScript file to return to Node.js library calls

What is inside the node-fetch library

How to import or require a class not a function from the library? Different ways of writing it

Why some libraries has @ before their name?

Install the translate library

Translate an Array of words

Import and export the translate function

Pass it arguments and create a return

Step-by-Step conversion

Create a new module for extracting definitions

Step-by-step convert a function from frontend script to a node module

Convert from arrow function to a standard function definition

Pass the definitions to your translation module

Adjust the Backend to receive the selected language

Add a selector to the UI

Add the user selection to the query passed to the API endpoint

Translate the definitions at the backend

Multiple ideas to treat this issue

Whether you improve try catch, use if conditional or ignore the error

Your preferred method must be correlated to the output you generate

Just remember to use this correction in all related parts of same function

Let the backend return an object instead of text

The object carry the responses of 2 distinct APIs

How to handle the object and array during building the UI?

Newer versions of Google APIs needs different credentials

Different Google APIs uses Different authorization libraries or at least use them differently

This applies also for third party libraries for Google APIs

Create a service account for translation with a role

Then create a key for this service account

Use the new class and credentials for translation V3

Set the needed windows environmental variables that will carry the credentials

Navigate the new response from V3

How to see all windows environmental variables?

A glimpse of how it works on a host not a local host

Create the Sheets Authorization/Authentication

Initialize Sheets Services

How to get Sheets values/Multiple Values? Setting up the parameters correctly

Understanding the append parameters

The special setting of Values

Using Catch(err) for troubleshooting

Explore the response returned from appending to use it later

Know the path, join and process key words for files

Download your Oauth2 JSON from GCP

Create the new authentication Token

What happens if you try to sign in by a user which is not registered in the GCP project during development?

Without saving and checking your Token, Google will ask you to sign in at every request

Build the saving and checking logic in a step-by-step logically manner

Reading and writing the Token to/from a file on your storage using Node.js. Same applies if you work on a remote host.

Explore the Oauth2 file that you downloaded and the one you created

Use a wrapper library for Google Sheets API and Auth and check if it is more handy

How sheets calling and authorization works?

Load more of sheets data

Explore the new library and its documentation

How to load and build .env file?

Using Service Account authentication with .env file

Using the new Sheets Library

• Collect Sheet Rows and Navigate them

• Access Cells through Header Row Titles

• Load the sheet cells

• Get the last row of the sheet

Convert Sheets manipulation script into a module with return and arguments

Explore a variety of ideas to struct your code

Try to test your code along building it to make sure that you are on the right track

Now you have an app running with 3 APIs integrated together