Tutorial Spreadsheet Google Spreadsheet JavaScript API

Programming

Oleh Vinci terakhir diubah pada 11 Oktober 2022.

Google Sheets API menyediakan layanan untuk membaca dan menulis dokumen Google Spreadsheet.

Tutorial ini untuk membaca data dari Google Spreadsheet dan menampilkannya di antarmuka pengguna dengan JavaScript. Hanya JavaScript yang digunakan tanpa plugin atau dependensi.

Langkah-langkah untuk mengakses Google Spreadsheet

Untuk mencapai ini, diperlukan langkah-langkah berikut.

  1. Dapatkan kredensial OAuth dan kunci API dan konfigurasikan dalam aplikasi.
  2. Otentikasi dan otorisasi aplikasi untuk mengizinkan akses ke Google Spreadsheet.
  3. Baca data spreadsheet dan simpan dalam array.
  4. Parsing data respons dan tampilkan di antarmuka pengguna.

Langkah 1 dan 2 umum untuk semua layanan Google JavaScript API. Kami telah melihatnya saat mengunggah file ke Google Drive melalui JavaScript API.

Kami juga telah melihat cara mengunggah ke Google Drive menggunakan PHP. Tidak memerlukan kunci API. Sebagai gantinya, ia melakukan otentikasi berbasis token untuk mengakses API.

Langkah 1: Dapatkan kredensial OAuth dan kunci API dan konfigurasikan di aplikasi

Pada titik ini, pengembang perlu membuat aplikasi klien web untuk mendapatkan ID klien dan kunci API. Untuk melakukan ini, Anda harus mengaktifkan pengaturan berikut dengan dasbor pengembang.

  1. Masuk ke konsol Google Developers dan buat klien web.
  2. Aktifkan Google Sheets API dari galeri Google APIs.
  3. Konfigurasikan halaman konten OAuth untuk mengatur detail aplikasi
  4. Klik kredensial OAuth dan dapatkan ID klien dan kunci rahasia aplikasi.
  5. Tetapkan rentang di mana aplikasi akan mengakses spreadsheet.
  6. Dapatkan kunci API untuk mengautentikasi dan mengizinkan akses ke layanan Google Spreadsheet API.

Aktifkan google sheets api

Catatan: Kunci rahasia akan digunakan untuk eksekusi sisi server, tetapi bukan JavaScript dalam contoh ini.

Cakupan yang diperlukan untuk mengakses data spreadsheet

Untuk membaca Google Spreadsheets melalui aplikasi, bidang berikut harus dipilih.

  • … Pengakuan / spreadsheet – Untuk membaca, mengedit, membuat dan menghapus spreadsheet.
  • …auth/spreadsheets.readonly – Untuk membaca spreadsheet.
  • …aut/drive – Untuk membaca, mengedit, membuat, dan menghapus file Drive.
  • …auth/drive.readonly – Untuk membaca file Drive
  • …auth/drive.file – Memungkinkan untuk membaca, mengedit, membuat, dan menghapus file Drive tertentu milik aplikasi.

Langkah 2: Otentikasi aplikasi dan berikan akses ke Google Spreadsheet

Otorisasi adalah proses memasukkan klien ke Google API untuk mengakses layanannya.

Mengklik tombol “Otorisasi” akan memanggil fungsi authorizeGoogleAccess() yang dibuat untuk contoh ini.

Fungsi ini menampilkan halaman konten bagi pengguna akhir untuk memberikan akses. Kemudian, ia menerima kode akses dalam penangan panggilan balik yang ditentukan dalam fungsi ini.

Langkah 3: Baca data spreadsheet dan simpan dalam array

Setelah akses diberikan, callback akan memanggil skrip untuk mengakses Google Spreadsheet yang ada.

ini daftarJurusan() Fungsi menentukan ID spreadsheet tertentu untuk diakses. Fungsi ini menggunakan JavaScript cerewet Contoh untuk mendapatkan data spreadsheet

Langkah 4: Parsing data respons dan tampilkan di antarmuka pengguna

Setelah menerima data respons dari titik akhir API, skrip ini mem-parsing larik objek yang dihasilkan.

HTML menyiapkan output dengan data spreadsheet dan merendernya ke elemen target.

Jika ada sesuatu yang aneh dalam responnya, maka akan muncul pesan “No record found” di browser.

Kode Lengkap: Mengakses Google Spreadsheets melalui JavaScript

Skrip berikut berisi HTML untuk menampilkan tombol “Lisensi” atau dua tombol “Refresh” dan “Signout”. Mode tampilan tombol ini didasarkan pada status izin akses API Google Spreadsheet.

Kode contoh menyertakan pustaka JavaScript untuk menggunakan layanan yang diperlukan oleh Google API.

JavaScript memiliki konfigurasi untuk menyematkan kunci API dan ID klien OAuth di satu tempat yang nyaman. Konfigurasi ini digunakan untuk melanjutkan langkah 2, 3 dan 4 yang kita lihat di atas.

<!DOCTYPE html>
<html>
<head>
<title>Google Sheets JavaScript API Spreadsheet Tutorial</title>
<link rel="stylesheet" href="https://phppot.com/javascript/google-sheets-javascript/style.css" type="text/css" />
<link rel="stylesheet" href="form.css" type="text/css" />
</head>
<body>
    <div class="phppot-container">
        <h1>Google Sheets JavaScript API Spreadsheet Tutorial</h1>
        <p>This tutorial is to help you learn on how to read Google
            Sheets (spreadsheet) using JavaScript Google API.</p>
        <button id="authorize_btn" onclick="authorizeGoogleAccess()">Authorize
            Google Sheets Access</button>

        <button id="signout_btn" onclick="signoutGoogle()">Sign
            Out</button>

        <pre id="content"></pre>
    </div>
    <script async defer src="https://apis.google.com/js/api.js"
        onload="gapiLoaded()"></script>
    <script async defer src="https://accounts.google.com/gsi/client"
        onload="gisLoaded()"></script>
</body>
</html>
// You should set your Google client ID and Google API key
const GOOGLE_CLIENT_ID = '';
const GOOGLE_API_KEY = '';
//

const DISCOVERY_DOC = 'https://sheets.googleapis.com/$discovery/rest?version=v4';

// Authorization scope should be declared for spreadsheet handing
// multiple scope can he included separated by space
const SCOPES = 'https://www.googleapis.com/auth/spreadsheets.readonly';

let tokenClient;
let gapiInited = false;
let gisInited = false;
document.getElementById('authorize_btn').style.visibility = 'hidden';
document.getElementById('signout_btn').style.visibility = 'hidden';

/**
 * Callback after api.js is loaded.
 */
function gapiLoaded() {
	gapi.load('client', intializeGapiClient);
}

/**
 * Callback after the Google API client is loaded. Loads the
 * discovery doc to initialize the API.
 */
async function intializeGapiClient() {
	await gapi.client.init({
		apiKey: GOOGLE_API_KEY,
		discoveryDocs: [DISCOVERY_DOC],
	});
	gapiInited = true;
	maybeEnableButtons();
}

/**
 * Callback after Google Identity Services are loaded.
 */
function gisLoaded() {
	tokenClient = google.accounts.oauth2.initTokenClient({
		client_id: GOOGLE_CLIENT_ID,
		scope: SCOPES,
		callback: '', // defined later
	});
	gisInited = true;
	maybeEnableButtons();
}

/**
 * Enables user interaction after all libraries are loaded.
 */
function maybeEnableButtons() {
	if (gapiInited && gisInited) {
		document.getElementById('authorize_btn').style.visibility = 'visible';
	}
}

/**
 *  Sign in the user upon button click.
 */
function authorizeGoogleAccess() {
	tokenClient.callback = async (resp) => {
		if (resp.error !== undefined) {
			throw (resp);
		}
		document.getElementById('signout_btn').style.visibility = 'visible';
		document.getElementById('authorize_btn').innerText="Refresh";
		await listMajors();
	};

	if (gapi.client.getToken() === null) {
		// Prompt the user to select a Google Account and ask for consent to share their data
		// when establishing a new session.
		tokenClient.requestAccessToken({ prompt: 'consent' });
	} else {
		// Skip display of account chooser and consent dialog for an existing session.
		tokenClient.requestAccessToken({ prompt: '' });
	}
}

/**
 *  Sign out the user upon button click.
 */
function signoutGoogle() {
	const token = gapi.client.getToken();
	if (token !== null) {
		google.accounts.oauth2.revoke(token.access_token);
		gapi.client.setToken('');
		document.getElementById('content').innerText="";
		document.getElementById('authorize_btn').innerText="Authorize";
		document.getElementById('signout_btn').style.visibility = 'hidden';
	}
}

/**
 * Print the names and majors of students in a sample spreadsheet:
 * https://docs.google.com/spreadsheets/d/1aSSi9jk2gBEHXOZNg7AV7bJj0muFNyPLYwh2GXThvas/edit
 */
async function listMajors() {
	let response;
	try {
		// Fetch first 10 files
		response = await gapi.client.sheets.spreadsheets.values.get({
			spreadsheetId: '',
			range: 'Sheet1!A2:D',
		});
	} catch (err) {
		document.getElementById('content').innerText = err.message;
		return;
	}
	const range = response.result;
	if (!range || !range.values || range.values.length == 0) {
		document.getElementById('content').innerText="No values found.";
		return;
	}
	const output = range.values.reduce(
		(str, row) => `${str}${row[0]}, ${row[2]}\n`,
		'Birds, Insects:\n');
	document.getElementById('content').innerText = output;
}

Sumber dan keluaran dari contoh ini

Spreadsheet yang ditampilkan dalam tangkapan layar ini adalah sumber program untuk mengakses datanya.

Sumber Spreadsheet Halaman Google

Contoh JavaScript membaca spreadsheet dan menampilkan data dari kolom Burung dan Serangga di UI.

Hasil pembacaan api javascript Google Sheets
Unduh

Kembali ke atas


Source link

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *