راهنمای ادغام Google Sheets API v4

سرویس‌های وب Google به بخش مهمی از زیرساخت‌های بسیاری از پروژه‌ها تبدیل شده‌اند، یک عنصر حیاتی یکپارچه‌سازی. ما دیگر نمی توانیم خدمات آنلاین را بدون آنها تصور کنیم. در همین حال، توسعه دهندگان Google در حال کار بر روی گسترش قابلیت های سرویس های خود، توسعه API های جدید و افزایش امنیت داده های ما هستند. معمولاً به‌روزرسانی‌ها به آرامی برای کاربران منتشر می‌شوند و نیازی به هیچ تغییری از جانب شما ندارند. اما نه این بار با API جدید Google Sheets. وب سایت های استاتیک در مقابل پویا چه تفاوتی دارند؟

پیشگفتار: پیشرفت یک درد است

در سال 2021، Google نسخه 4 Sheets API خود را معرفی کرد که با نسخه قبلی ناسازگار است. این بر امنیت داده ها و حریم خصوصی تأثیر گذاشت. پشتیبانی Sheets API نسخه 3 تا اوت 2021 تمدید شد برای ارائه زمان بیشتری به توسعه دهندگان برای مهاجرت به نسخه جدید API. از زمان پایان پشتیبانی از API v3، بسیاری از توسعه دهندگان جاوا اسکریپت با مشکلات مهاجرت مواجه شده اند. و اگرچه Google راهنمای مهاجرت مفصل را ارائه کرده است، همانطور که معمولاً اتفاق می‌افتد، چندین جزئیات مهم در آن وجود ندارد.

من به‌عنوان یک مهندس پشتیبانی در AnyChart، درخواست‌های کمکی متعددی را از JS خود دریافت کرده‌ام و به آن‌ها ادامه می‌دهم. ترسیم کتابخانه کاربرانی که به طور ناگهانی با مشکلاتی در تغذیه تصاویر تجسمی با داده های صفحات گسترده Google خود مواجه شدند. این نشان می دهد که مشکل واقعاً موضوعی بوده و باقی می ماند. بنابراین تصمیم گرفتم یک راهنمای ادغام سریع Google Sheets API v4 برای هر کس دیگری تهیه کنم.

این مقاله یک رویکرد اساسی برای دسترسی به سند صفحه‌گسترده در Google Sheets و بارگیری داده‌ها از آن را به‌عنوان ظاهراً رایج‌ترین مورد استفاده نشان می‌دهد.

دسترسی به صفحات گسترده Google از جاوا اسکریپت

برای دسترسی به صفحه‌گسترده Google Sheets از کد جاوا اسکریپت، به نیاز دارید google-api-javascript-client و API Sheets، و همچنین یک پروژه Google پیکربندی شده و خود سند

اجازه دهید همه اینها را گام به گام با شما همراهی کنم.

دسترسی به داده های صفحه گسترده Google از برنامه های جاوا اسکریپت

اکنون، نحوه ایجاد یک برنامه جاوا اسکریپت ساده را توضیح خواهم داد که داده ها را از صفحه گسترده واکشی می کند و به کاربران نشان می دهد. برای اتصال برنامه به Sheets API، از Google API Client Library برای جاوا اسکریپت (معروف به gapi) استفاده خواهم کرد، که به خوبی در مخزن GitHub.

1) ایجاد یک برنامه پایه جاوا اسکریپت

اول از همه، کتابخانه gapi را با استفاده از پیوند مستقیم در صفحه خود قرار دهید.

برچسب

را به کد HTML اضافه کنید و کد CSS مورد نظر خود را برای جدول و محتوای آینده آن اعمال کنید.در کد جاوا اسکریپت، تابعی ایجاد کنید که برای واکشی داده ها استفاده می شود.const شروع = () => {};در داخل آن تابع، سرویس گیرنده gapi را با کلید Google API خود که قبلاً ایجاد شده است، مقداردهی اولیه کنید. gapi.مشتری.init({
'apiKey': '{GOOGLE_API_KEY}'،
'discoveryDocs': ["https://sheets.googleapis.com/$discovery/rest?version=v4"] ،
})
سپس یک درخواست برای دریافت مقادیر از طریق کلاینت gapi اجرا کنید. در درخواست، باید شناسه صفحه گسترده و محدوده سلول‌هایی که داده‌هایی که می‌خواهید به آنها دسترسی داشته باشید در آن قرار دارند را ارائه کنید..سپس(() => {
بازگشت gapi.مشتری.برگ.صفحه گسترده.مقادیر.get({
spreadsheetId: '{SPREADSHEET_ID}'،
محدوده: '{SHEET_NAME}!{DATA_RANGE}'،
})
})
اگر همه تنظیمات صحیح باشند، وعده حل شده پاسخی را با داده های واکشی شده برمی گرداند. اکنون می توانید داده ها را از پاسخ دریافت کنید و جدول HTML را با استفاده از یک اسکریپت ساده JS پر کنید..سپس((پاسخ) => {

const loadedData = پاسخ.نتیجه.مقادیر;

جدول const = سند.getElementsByTagName(' table')[];

const columnHeaders = سند.createElement(' tr');
columnHeaders.innerHTML = `ام>${loadedData[][]} ام>
ام>${loadedData[][1]}ام>`;
جدول.appendChild(columnHeaders);

برای (اجازه دهید i = 1; i loadedData.طول; i++) {
const tableRow = سند.createElement(' tr');
tableRow.innerHTML = `td>${loadedData[i][]}td>
td>${loadedData[i][1] }td>;
جدول.appendChild(tableRow);
}
}).catch((خطا) => {
کنسول.ورود(خطا.خطا.پیام);
});
برای اجرای کد، تابع load() را از کتابخانه gapi فراخوانی کنید و تابع ایجاد شده در بالا را به عنوان آرگومان ارسال کنید.gapi.بار('client'، start);برنامه به دست آمده مانند زیر است. می‌توانید الگوی کد کامل این جدول HTML را با داده‌های Google Sheets در JSFiddle بررسی کنید. برای اینکه کار خودتان را انجام دهید، کافی است {GOOGLE_API_KEY}، {SPREADSHEET_ID}، {SHEET_NAME} و {DATA_RANGE را جایگزین کنید. } با اطلاعات خودتان (و بریس ها را نگه ندارید).

2) خروجی سرهم بندی — نمایش داده ها به صورت نموداردر برنامه های کاربردی دنیای واقعی، جداول ساده HTML معمولا کافی نیستند. ما می خواهیم داده ها را تجسم و تجزیه و تحلیل کنیم. اجازه دهید نحوه ایجاد داشبوردی را به شما نشان دهم که خوانایی داده ها را افزایش می دهد و ما را به مورد استفاده در دنیای واقعی نزدیک می کند. وقتی در حال انجام وظیفه هستم و برای یکپارچه‌سازی API برگه‌های Google درخواست کمک می‌کنم، در واقع اولین نمونه‌ای است که به اشتراک می‌گذارم، و اساساً، تقریباً همیشه آخرین نمونه است، زیرا بسیار گویا است و نیازی به کمک بیشتری نیست.بنابراین، بیایید از کتابخانه AnyChart JS برای تجسم داده‌ها استفاده کنیم. این شامل نمودارهای ستونی و نمودار دایره ای، که برای این داشبورد ساده کافی است.قبل از هر چیز دیگری، پایه ماژول JS AnyChart را به HTML اضافه کنید:اسکریپت src="https://cdn.anychart.com/releases/8.11.0/js/anychart-base.min.js"> اسکریپت>همچنین، برچسب‌های را برای محفظه‌های داشبورد اضافه کنید و یک شناسه مناسب برای هر کدام اعمال کنید:

div id="container1">div>
div id="container2">div>

Most of the JavaScript code remains absolutely the same. I will just rework the code that handles the Sheets API response.

So, keep the first part of the JS code unchanged:

const start = () => {
  
  gapi.client.init({
    'apiKey': '{GOOGLE_API_KEY}',
    'discoveryDocs': ["https://sheets.googleapis.com/$discovery/rest?version=v4"],
  }).سپس(() => {
    return gapi.client.sheets.spreadsheets.values.get({
      spreadsheetId: '{SPREADSHEET_ID}',
      range: '{SHEET_NAME}!{DATA_RANGE}', 
    })
  }).then((response) => {

In the response handler, parse the data to compose a structure compatible with the AnyChart API:

    const loadedData = response.result.values;
    const parsedData = {
      'header': loadedData.shift(),
      'rows': loadedData,
    };

Now we’ve got everything we need to create and configure charts for the dashboard: 

    
    const columnChart = anychart.column();

    
    columnChart.data(parsedData);

    
    columnChart.title('Sales volume by manager');
    columnChart.xAxis().title('Manager');
    columnChart.yAxis().title('Sales volume, $');

    
    columnChart.container('container1').draw();

    
    const pieChart = anychart.pie(parsedData);
    pieChart.title('Sales volume distribution in the department');
    pieChart.legend().itemsLayout('vertical').position('right');
    pieChart.container('container2').draw();

Then goes the same ending part as with the HTML table — let’s recall it just in case:

  }).catch((err) => {
  	console.log(err.error.message);
  });
};


gapi.load('client', start);

Below is what the resulting dashboard looks like. You can check out the full template code of this dashboard visualizing data from Google Sheets using the v4 API on JSFiddle. To get your own project like this, simply put your own information in place of {GOOGLE_API_KEY}, {SPREADSHEET_ID}, {SHEET_NAME}, and {DATA_RANGE} (and don’t keep the braces).

Epilogue and Links

I hope this article will be helpful to anyone who decides to build an app that uses data from Google Sheets and access it from JavaScript applications. If you have any further questions, please feel free to get in touch with me and I will be happy to do my best to help you out.

For your convenience, here is a list of all useful links from this article, in one place:

Prerequisites

Integration examples

منبع :

https://rohabmusic.ir/وب-سایت-های-استاتیک-در-مقابل-پویا-چه-تفا/