Sat, Oct 30, 21, google offical doc and setup instruction
This is a draft, the content is not complete and of poor quality!

Thi

Google’s documentation is like an ocean. It’s not easy to find a right one to start. This note contains only basic things that I’ve already worked with. Trying your own hand at Google’s APIs will help you understand more.

👉 Note: Google OAuth 2.0 with NodeJS. 👉 Repo: dinhanhthi/google-api-playground (private).

Official documentation

click to open

  1. APIs & references -- the root of all things.

    1. Node.js client library -- wanna use in a backend?
      1. Dialogflow SDK Client Reference
      2. googleapis/nodejs-dialogflow -- Github repo.
        1. Samples -- wanna run these? Step to this section.
    2. REST APIs -- wanna use GET, POST,...?
  2. Service endpoint.

    💡 Tip: us-dialogflow.googleapis.com and dialogflow.googleapis.com are the same, so you can use <location>-dialogflow.googleapis.com in your codes.

  3. Available regions (used in locations).

    💡 Tip: <region>-dialogflow.googleapis.com = endpoint.

  4. google/google-api-javascript-client -- aka gapi. Github repo.

  5. Google APIs Explorer.

  6. OAuth 2.0 Playground.

  7. Understand roles -- If you decide to create a service account, you will need to assign a role to some users/emails. Each role has different rights to use your data.

Wanna run the Node.js samples?{:#run-samples}

👉 Link of all samples on github.

steps

  1. Create a folder, eg. /home/thi/df-samples/

  2. If you come from Dialogflow Console > choose an agent > click on the gear next to the its name > Click on "Project ID" to open Google Cloud Platform Console.

  3. If you come from GCP Console, it's the same.

  4. Follow these steps to generate a JSON key (you'll download a JSON file). Store your JSON file in df-samples/credential.json. Note down the project_id, we will use it later, eg. project_abc.

  5. Run each time you wanna test export GOOGLE_APPLICATION_CREDENTIALS="/home/thi/df-samples/credential.json" OR save this line to /home/thi/.bashrc or /home/thi/.zshrc (if you use ZSH) and then refresh the current terminal (with this method, you don't need to run again previous line).

    Alternative: You don't have to use system variable GOOGLE_APPLICATION_CREDENTIALS if you don't want. In credential.json, copy private_key and client_email and then use them as,

    const client = new AgentsClient({
    credentials: { private_key, client_email }
    });
  6. Go to /df-samples/ and run npm i @google-cloud/dialogflow.

  7. Try this quickstart.js.

  8. On terminal, run

    node quickstart.js project_abc
  9. Read carefully the content of each file in samples, you have to put the corresponding inputs for the sample to work!


try something outside 'samples'

In case you wanna try something outside the files given in samples. Check this SDK. Suppose we wanna try this one -- AgentsClient.searchAgents()

  1. Make the same things in "Step by step". At step 7, create search-agents.js with the same content as samples/set-agent.js. We are going to change this file.
  2. Read the reference, change the input. Here is an example,

    "use strict";
    async function main() {
    const location = "global";
    const { AgentsClient } = require("@google-cloud/dialogflow");
    const parent = (location) => "projects/-" + "/locations/" + location;
    const client = new AgentsClient({
        credentials: { private_key, client_email },
        apiEndpoint: location + "-dialogflow.googleapis.com",
    });
    async function searchAgents() {
        const request = { parent: parent(location) };
        const [response] = await client.searchAgents(request);
        console.log(`response: ${JSON.stringify(response, null, 2)}`);
    }
    await searchAgents();
    }
    process.on("unhandledRejection", (err) => {
    console.error(err.message);
    process.exitCode = 1;
    });
    main();
Then run `node search-agents.js`.


Different locations?

The example in "Try something outside..." gives us an example of using different regions. Below are some remarks:

  1. On DF console, you can create some agents in a different regions, default is global (or us).

  2. On the Google's documentations, they don't mention about the usage of location. If they say parent = "projects/-", we shoud use parent = "projects/-" + "/locations/" + location where location can be one of "Region ID".

  3. Change also the endpoint, option apiEndpoint in AgentsClient's constructor, for example.

    const client = new AgentsClient({
    apiEndpoint: location + "-dialogflow.googleapis.com",
    });


Wanna try gapi (JS client)?

Google has announced that they will be discontinuing the Google Sign-In JavaScript Platform Library for web. You will have to switch to using Google Identity Services (or Sign In With Google or gsi). The old service will be completely discontinued on March 31, 2023.


<!-- OLD -->
<script src="https://apis.google.com/js/platform.js" async defer></script>

<!-- NEW -->
<script src="https://accounts.google.com/gsi/client" async defer></script>

What’s this gapi? You can use it completely inside an HTML file without using any backend.

👉 List of samples. 👉 You have to use REST API in this case.

Steps

  1. For setting up, follow these steps.
  2. After that, you should obtain an API_KEY and an CLIENT_ID.
  3. First, try this sample.
  4. Using something like Live Server and open authSample.html.
  5. Make a test.
  • Make sure you create the "OAuth consent screen" before you create "OAuth 2.0 Client IDs". The "consent screen" is the popup window that contains all the information about the scopes your app will ask users for permission.
  • Make sure you add http://localhost:5500 (which is created in step 4) to "Authorized JavaScript origins" and "Authorized redirect URIs". You may have to wait a few "ten minutes" for everything to work. Without this step, you may encounter the error mismatch_uri.

  • Make sure you create the “OAuth consent screen” before you create “OAuth 2.0 Client IDs”. The “consent screen” is the popup window that contains all the information about the scopes your app will ask users for permission.
  • Make sure you add http://localhost:5500 (which is created in step 4) to “Authorized JavaScript origins” and “Authorized redirect URIs”. You may have to wait a few “ten minutes” for everything to work. Without this step, you may encounter the error mismatch_uri.
Examples

projects.agent.search

projects.agent.sessions.detectIntent

Dialogflow REST APIs with Postman

👉 Check this official guide.

Additional configurations

  • Create a collection and add the Authorization for this collection. All of its request will use the same auth method.
  • Create variables (on tab "Variables") to store "CLIENT ID" (client_id) and "CLIENT SECRET" (as client_secret), then use them in the form by and .


The following wiki, pages and posts are tagged with

TitleTypeExcerpt
2021-09-26-googlesheet.md post Google Sheets API with github Pages and API
Google's Dialogflow APIs post Sat, Oct 30, 21, google offical doc and setup instruction
Pilot's preflight checklist FAA post Tue, Nov 09, 21, preflight checklist with data mining, d3 visualization and google sheet implementation
D3js trial and errors post Thursday, trying to integrate with jekyll and data mining
D3 square.github.io data binding post Thu, Nov 11, 21, data binding
D3.js square.github.io tutorial post Thu, Nov 11, 21, data binding
idrather api course post Tue, Nov 16, 21, preparation setup and tools necessary for this api course
hosted search engine post Thu, Nov 18, 21, API to let you seamlessly implement search within the site, mobile and voice applications
Weather app from firebase post Sunday-weather-app, open weather api
GoogleAppsScript-Category.md post 카테고리 2단계 (끝)
OpenApi-usage.md post 실제 사용법 정리