From 17121e62c200f818a7a7835c55133fd47cd8439c Mon Sep 17 00:00:00 2001
From: Sergey Ryabov <colriot@gmail.com>
Date: Wed, 30 Oct 2024 16:24:46 +0000
Subject: [PATCH] Add Getting Started YT script

---
 .../collect_youtube_comments/README.md        | 17 ++++
 .../collect_youtube_comments.js               | 94 +++++++++++++++++++
 javascript-sdk/examples/first-steps/README.md |  2 +-
 javascript-sdk/package-lock.json              |  1 +
 4 files changed, 113 insertions(+), 1 deletion(-)

diff --git a/javascript-sdk/application-examples/collect_youtube_comments/README.md b/javascript-sdk/application-examples/collect_youtube_comments/README.md
index e69de29..f655856 100644
--- a/javascript-sdk/application-examples/collect_youtube_comments/README.md
+++ b/javascript-sdk/application-examples/collect_youtube_comments/README.md
@@ -0,0 +1,17 @@
+# Example script: interacting with YouTube website and extracting video information using AgentQL
+
+This is an example of interacting with YouTube website and extracting video information using AgentQL.
+
+## Run the script
+
+- [Install AgentQL SDK](https://docs.agentql.com/javascript-sdk/installation)
+- Save this JavaScript file locally as **collect_youtube_comments.js**
+- Run the following command from the project's folder:
+
+```bash
+node collect_youtube_comments.js
+```
+
+## Play with the query
+
+Install the [AgentQL Debugger Chrome extension](https://docs.agentql.com/installation/chrome-extension-installation) to play with the AgentQL query. [Learn more about the AgentQL query language](https://docs.agentql.com/agentql-query/query-intro)
diff --git a/javascript-sdk/application-examples/collect_youtube_comments/collect_youtube_comments.js b/javascript-sdk/application-examples/collect_youtube_comments/collect_youtube_comments.js
index e69de29..64a23a3 100644
--- a/javascript-sdk/application-examples/collect_youtube_comments/collect_youtube_comments.js
+++ b/javascript-sdk/application-examples/collect_youtube_comments/collect_youtube_comments.js
@@ -0,0 +1,94 @@
+const { chromium } = require('playwright');
+const { configure, wrap } = require('agentql');
+
+const URL = 'https://www.youtube.com/';
+
+async function main() {
+  // Configure the AgentQL API key
+  configure({
+    apiKey: process.env.AGENTQL_API_KEY, // This is the default and can be omitted.
+  });
+
+  const browser = await chromium.launch({ headless: false });
+  const page = wrap(await browser.newPage());
+  await page.goto(URL);
+
+  const SEARCH_QUERY = `
+  {
+    search_input
+    search_btn
+  }
+  `;
+
+  const VIDEO_QUERY = `
+  {
+    videos[] {
+      video_link
+      video_title
+      channel_name
+    }
+  }
+  `;
+
+  const VIDEO_CONTROL_QUERY = `
+  {
+    play_or_pause_btn
+    expand_description_btn
+  }
+  `;
+
+  const DESCRIPTION_QUERY = `
+  {
+    description_text
+  }
+  `;
+
+  const COMMENT_QUERY = `
+  {
+    comments[] {
+      channel_name
+      comment_text
+    }
+  }
+  `;
+
+  try {
+    // search query
+    const searchResponse = await page.queryElements(SEARCH_QUERY);
+    await searchResponse.search_input.type('machine learning', { delay: 75 });
+    await searchResponse.search_btn.click();
+
+    // video query
+    const videoResponse = await page.queryElements(VIDEO_QUERY);
+    console.log(
+      `Clicking Youtube Video: ${await videoResponse.videos[0].video_title.textContent()}`,
+    );
+    await videoResponse.videos[0].video_link.click(); // click the first youtube video
+
+    // video control query
+    const controlResponse = await page.queryElements(VIDEO_CONTROL_QUERY);
+    await controlResponse.expand_description_btn.click();
+
+    // description query
+    const descriptionData = await page.queryData(DESCRIPTION_QUERY);
+    console.log(`Captured the following description:\n${descriptionData.description_text}`);
+
+    // Scroll down the page to load more comments
+    for (let i = 0; i < 3; i++) {
+      await page.keyboard.press('PageDown');
+      await page.waitForLoadState();
+    }
+
+    // comment query
+    const commentResponse = await page.queryData(COMMENT_QUERY);
+    console.log(`Captured ${commentResponse.comments?.length || 0} comments!`);
+  } catch (error) {
+    console.error(`Found Error: ${error}`);
+    throw error;
+  }
+
+  // Used only for demo purposes. It allows you to see the effect of the script.
+  await page.waitForTimeout(10000);
+}
+
+main();
diff --git a/javascript-sdk/examples/first-steps/README.md b/javascript-sdk/examples/first-steps/README.md
index ed02e4e..94dadaa 100644
--- a/javascript-sdk/examples/first-steps/README.md
+++ b/javascript-sdk/examples/first-steps/README.md
@@ -5,7 +5,7 @@ This is an example of collecting pricing data from e-commerce website using Agen
 ## Run the script
 
 - [Install AgentQL SDK](https://docs.agentql.com/javascript-sdk/installation)
-- Save this python file locally as **first_steps.js**
+- Save this JavaScript file locally as **first_steps.js**
 - Run the following command from the project's folder:
 
 ```bash
diff --git a/javascript-sdk/package-lock.json b/javascript-sdk/package-lock.json
index 2c7bde3..7059dad 100644
--- a/javascript-sdk/package-lock.json
+++ b/javascript-sdk/package-lock.json
@@ -570,6 +570,7 @@
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/agentql/-/agentql-0.0.1.tgz",
       "integrity": "sha512-bPdFhIx1z+fz7aKp8HurQrMrPcF5UKAeS6TIERLGuN3b2bU+EmJYbMlFgo9snV1cPsRiPGXmV8xiljUGv5zY+Q==",
+      "license": "MIT",
       "dependencies": {
         "axios": "^1.7.7",
         "dotenv": "^16.4.5",