Google sheets api android studio

Dalam codelab ini, Anda akan mempelajari cara menggunakan Google Spreadsheet sebagai alat pelaporan khusus untuk pengguna Anda. Anda akan mengubah contoh aplikasi pelacakan pesanan untuk mengekspor ke spreadsheet, lalu membuat visualisasi menggunakan Google Sheets API. Contoh aplikasi dibangun menggunakan Node. js dan framework aplikasi web Express, tetapi prinsip dasar yang sama berlaku untuk arsitektur apa pun

Apa yang akan Anda pelajari

• Menambahkan Masuk dengan Google ke aplikasi
• Menginstal dan mengonfigurasi Library Klien Google API untuk Node. js
• Membuat spreadsheet
• Mengekspor catatan database ke spreadsheet
• Membuat tabel dan grafik pivot

Apa yang Anda butuhkan

• Node. js diinstal (>=v8.js). 11. 1)
• Alat manajemen paket npm (dilengkapi dengan Node. js)
• Akses ke internet dan browser
• Akun Google

2. Dapatkan kode sampel

Anda dapat mengunduh semua kode sampel ke komputer Anda

file_download Unduh Zip

atau tiru repositori GitHub dari baris perintah

git clone https://github.com/googleworkspace/sheets-api-codelab.git

Repositori berisi satu set direktori yang mewakili setiap langkah di sepanjang proses, jika Anda perlu mereferensikan versi yang berfungsi

Anda akan mengerjakan salinan yang terletak di direktori

npm start

3. Jalankan aplikasi sampel

Pertama, aktifkan dan jalankan aplikasi pelacakan pesanan sampel. Dengan kode yang diunduh, ikuti petunjuk di bawah ini untuk menginstal dan memulai Node. Aplikasi web js/Express

1. Buka terminal command line di komputer Anda dan arahkan ke direktori

   npm start
   

   4 codelab
2. Untuk menginstal Node. dependensi js, masukkan perintah berikut

npm install

1. Untuk memulai server, masukkan perintah berikut

npm start

1. Buka browser dan arahkan ke

   npm start
   

   _6

Aplikasi ini menyediakan kemampuan untuk membuat, memperbarui, dan menghapus sekumpulan catatan pesanan sederhana. Kami telah menyertakan database SQLite dengan beberapa contoh data, tetapi jangan ragu untuk menambahkan, memperbarui, dan menghapus pesanan saat Anda melanjutkan codelab

Luangkan waktu sejenak untuk membiasakan diri dengan kode, dan lihat tabel di bawah ini untuk ikhtisar umum struktur aplikasi

npm start

Mengonfigurasi kerangka kerja aplikasi web Express

npm start

File konfigurasi, berisi informasi koneksi database

npm start

Database SQLite untuk menyimpan catatan pesanan

<meta name="google-signin-scope" 
      content="https://www.googleapis.com/auth/spreadsheets">
<meta name="google-signin-client_id" content="{YOUR CLIENT ID}">
<script src="https://apis.google.com/js/platform.js" async defer></script>

Berisi kode yang mendefinisikan dan memuat model database. Aplikasi ini menggunakan library Sequelize ORM untuk membaca dan menulis ke database

<meta name="google-signin-scope" 
      content="https://www.googleapis.com/auth/spreadsheets">
<meta name="google-signin-client_id" content="{YOUR CLIENT ID}">
<script src="https://apis.google.com/js/platform.js" async defer></script>

Berisi dependensi proyek, seperti yang diinstal oleh npm

<meta name="google-signin-scope" 
      content="https://www.googleapis.com/auth/spreadsheets">
<meta name="google-signin-client_id" content="{YOUR CLIENT ID}">
<script src="https://apis.google.com/js/platform.js" async defer></script>

Mendefinisikan Node. aplikasi js dan dependensinya

<meta name="google-signin-scope" 
      content="https://www.googleapis.com/auth/spreadsheets">
<meta name="google-signin-client_id" content="{YOUR CLIENT ID}">
<script src="https://apis.google.com/js/platform.js" async defer></script>

Berisi file JavaScript dan CSS sisi klien yang digunakan oleh aplikasi

<meta name="google-signin-scope" 
      content="https://www.googleapis.com/auth/spreadsheets">
<meta name="google-signin-client_id" content="{YOUR CLIENT ID}">
<script src="https://apis.google.com/js/platform.js" async defer></script>

Menentukan titik akhir URL yang didukung aplikasi dan cara menanganinya

<meta name="google-signin-scope" 
      content="https://www.googleapis.com/auth/spreadsheets">
<meta name="google-signin-client_id" content="{YOUR CLIENT ID}">
<script src="https://apis.google.com/js/platform.js" async defer></script>

Titik masuk ke dalam aplikasi, yang mengonfigurasi lingkungan dan memulai server

<meta name="google-signin-scope" 
      content="https://www.googleapis.com/auth/spreadsheets">
<meta name="google-signin-client_id" content="{YOUR CLIENT ID}">
<script src="https://apis.google.com/js/platform.js" async defer></script>

Berisi template HTML yang akan dirender, ditulis menggunakan format Handlebars. Pustaka Material Design Lite (MDL) telah digunakan untuk tata letak dan daya tarik visual

Codelab lainnya memandu Anda dalam memodifikasi aplikasi dasar di direktori

npm start

Restart otomatis

Aplikasi ini menggunakan nodemon untuk memuat ulang aplikasi secara otomatis setiap kali Anda mengubah file sumber. Ini berarti Anda tidak perlu menghentikan dan memulai ulang server setelah setiap langkah

4. Buat ID klien

Sebelum membuat ID klien, Anda harus mengaktifkan Google Sheets API

1. Gunakan wizard ini untuk membuka halaman Aktifkan akses ke API
2. Pastikan proyek yang benar dipilih dalam daftar proyek di bagian atas halaman, lalu klik Berikutnya
3. Klik Aktifkan

Selanjutnya, tambahkan ID klien OAuth ke proyek Anda

1. Klik Menu
   
   dan buka API & Layanan > Kredensial (tautan langsung).
2. Klik Buat Kredensial > ID klien OAuth
3. Untuk jenis Aplikasi, pilih Aplikasi web dan tambahkan nama "Google Sheets API Quickstart"
4. Untuk asal JavaScript Resmi, klik Tambahkan URI dan tambahkan nilai

   <meta name="google-signin-scope" 
         content="https://www.googleapis.com/auth/spreadsheets">
   <meta name="google-signin-client_id" content="{YOUR CLIENT ID}">
   <script src="https://apis.google.com/js/platform.js" async defer></script>
   

   8
5. Klik Buat
6. Catat ID klien yang ditampilkan di bidang ID Klien Anda karena Anda akan memerlukannya di langkah berikutnya. Anda tidak perlu mendownload file tersebut

Tip. Anda juga dapat mengakses ID klien dari API & Layanan > Kredensial

1. Klik Oke

5. Tambahkan Masuk dengan Google

Sebelum Anda dapat mulai mengekspor data ke Google Spreadsheet, Anda memerlukan pengguna untuk masuk ke aplikasi Anda dengan Akun Google mereka dan mengotorisasi akses ke spreadsheet mereka. Untuk melakukan ini, kami akan menggunakan Masuk dengan Google untuk Situs Web, perpustakaan JavaScript yang dapat Anda tambahkan ke aplikasi web yang sudah ada

File

<meta name="google-signin-scope" 
      content="https://www.googleapis.com/auth/spreadsheets">
<meta name="google-signin-client_id" content="{YOUR CLIENT ID}">
<script src="https://apis.google.com/js/platform.js" async defer></script>

<div id="profile" style="margin: 0 20px;">
  <b class="name"></b><br/>
  <i class="email"></i>
</div>
<div class="g-signin2" data-onsuccess="onSignIn"></div>

<meta name="google-signin-scope" 
      content="https://www.googleapis.com/auth/spreadsheets">
<meta name="google-signin-client_id" content="{YOUR CLIENT ID}">
<script src="https://apis.google.com/js/platform.js" async defer></script>

Timpa placeholder

<div id="profile" style="margin: 0 20px;">
  <b class="name"></b><br/>
  <i class="email"></i>
</div>
<div class="g-signin2" data-onsuccess="onSignIn"></div>

Kode ini menyetel client ID OAuth2, cakupan yang diminta, dan menyertakan library Google Sign-in. Dalam hal ini, kami meminta cakupan

<div id="profile" style="margin: 0 20px;">
  <b class="name"></b><br/>
  <i class="email"></i>
</div>
<div class="g-signin2" data-onsuccess="onSignIn"></div>

Selanjutnya tambahkan kode yang merender tombol masuk dan menampilkan informasi pengguna yang masuk. Tambahkan kode berikut ke

<meta name="google-signin-scope" 
      content="https://www.googleapis.com/auth/spreadsheets">
<meta name="google-signin-client_id" content="{YOUR CLIENT ID}">
<script src="https://apis.google.com/js/platform.js" async defer></script>

<div id="profile" style="margin: 0 20px;">
  <b class="name"></b><br/>
  <i class="email"></i>
</div>
<div class="g-signin2" data-onsuccess="onSignIn"></div>

<div id="profile" style="margin: 0 20px;">
  <b class="name"></b><br/>
  <i class="email"></i>
</div>
<div class="g-signin2" data-onsuccess="onSignIn"></div>

Terakhir, tambahkan beberapa JavaScript sisi klien untuk mengisi bagian profil setelah proses masuk selesai. Tambahkan yang berikut ini ke

<div id="profile" style="margin: 0 20px;">
  <b class="name"></b><br/>
  <i class="email"></i>
</div>
<div class="g-signin2" data-onsuccess="onSignIn"></div>

function onSignIn(user) {
  var profile = user.getBasicProfile();
  $('#profile .name').text(profile.getName());
  $('#profile .email').text(profile.getEmail());
}

Muat ulang aplikasi di browser Anda, klik Masuk, dan otorisasi akses ke Akun Google Anda. Nama dan alamat email Anda harus ditampilkan di header aplikasi

Menggunakan Masuk dengan Google

Untuk memudahkan, contoh aplikasi dalam codelab ini tidak memiliki pengguna atau sistem login. Masuk dengan Google hanya digunakan untuk mendapatkan otorisasi yang diperlukan untuk mengajukan permintaan ke Google Sheets API. Dalam aplikasi nyata, Anda juga harus menggunakan Google Sign-in untuk mengaktifkan dan memasukkan pengguna. Untuk informasi selengkapnya, buka Otentikasi dengan server backend

6. Tambahkan kontrol spreadsheet

Anda perlu melacak spreadsheet yang dibuat aplikasi Anda sehingga jika data dalam aplikasi berubah, spreadsheet dapat diperbarui. Untuk melakukannya, buat tabel di database untuk menyimpan informasi tentang spreadsheet. Anda juga akan menambahkan beberapa kontrol ke UI

Di dalam direktori

<meta name="google-signin-scope" 
      content="https://www.googleapis.com/auth/spreadsheets">
<meta name="google-signin-client_id" content="{YOUR CLIENT ID}">
<script src="https://apis.google.com/js/platform.js" async defer></script>

<div id="profile" style="margin: 0 20px;">
  <b class="name"></b><br/>
  <i class="email"></i>
</div>
<div class="g-signin2" data-onsuccess="onSignIn"></div>

model/spreadsheet. js

"use strict";

module.exports = function(sequelize, DataTypes) {
  var Spreadsheet = sequelize.define('Spreadsheet', {
    id: {type: DataTypes.STRING, allowNull: false, primaryKey: true},
    sheetId: {type: DataTypes.INTEGER, allowNull: false},
    name: {type: DataTypes.STRING, allowNull: false}
  });

  return Spreadsheet;
};

Kode ini menggunakan Sequelize ORM untuk menentukan tabel baru yang menyimpan ID, ID sheet, dan nama spreadsheet yang Anda buat

Selanjutnya, ambil spreadsheet yang telah Anda simpan saat halaman indeks dimuat, sehingga Anda dapat menampilkannya dalam daftar. Di

<meta name="google-signin-scope" 
      content="https://www.googleapis.com/auth/spreadsheets">
<meta name="google-signin-client_id" content="{YOUR CLIENT ID}">
<script src="https://apis.google.com/js/platform.js" async defer></script>

router.get('/', function(req, res, next) {
  var options = {
    order: [['createdAt', 'DESC']],
    raw: true
  };
  Sequelize.Promise.all([
    models.Order.findAll(options),
    models.Spreadsheet.findAll(options)
  ]).then(function(results) {
    res.render('index', {
      orders: results[0],
      spreadsheets: results[1]
    });
  });
});

Selanjutnya, tampilkan daftar spreadsheet di template. Tambahkan kode berikut di akhir

<div id="profile" style="margin: 0 20px;">
  <b class="name"></b><br/>
  <i class="email"></i>
</div>
<div class="g-signin2" data-onsuccess="onSignIn"></div>

function onSignIn(user) {
  var profile = user.getBasicProfile();
  $('#profile .name').text(profile.getName());
  $('#profile .email').text(profile.getEmail());
}

<section id="spreadsheets"
         class="mdl-cell mdl-cell--4-col relative">
  <div class="mdl-list">
    <div class="mdl-list__item">
      <span class="mdl-list__item-primary-content mdl-layout-title">
        Spreadsheets</span>
      <span class="mdl-list__item-secondary-action">
        <button class="mdl-button mdl-js-button mdl-button--raised
                       mdl-js-ripple-effect mdl-button--colored"
                rel="create" type="button">Create</button>
      </span>
    </div>
    {{#each spreadsheets}}
    <div class="mdl-list__item">
      <a class="mdl-list__item-primary-content"
         href="https://docs.google.com/spreadsheets/d/{{id}}/edit"
         target="_blank">{{name}}</a>
      <span class="mdl-list__item-secondary-action">
        <button class="mdl-button mdl-js-button mdl-button--raised
                       mdl-js-ripple-effect"
                rel="sync" data-spreadsheetid="{{id}}"
                type="button">Sync</button>
      </span>
    </div>
    {{/each}}
  </div>
</section>

Terakhir, pasang tombol buat spreadsheet dan sinkronkan spreadsheet. Tambahkan kode berikut ke

<div id="profile" style="margin: 0 20px;">
  <b class="name"></b><br/>
  <i class="email"></i>
</div>
<div class="g-signin2" data-onsuccess="onSignIn"></div>

$(function() {
  $('button[rel="create"]').click(function() {
    makeRequest('POST', '/spreadsheets', function(err, spreadsheet) {
      if (err) return showError(err);
      window.location.reload();
    });
  });
  $('button[rel="sync"]').click(function() {
    var spreadsheetId = $(this).data('spreadsheetid');
    var url = '/spreadsheets/' + spreadsheetId + '/sync';
    makeRequest('POST', url, function(err) {
      if (err) return showError(err);
      showMessage('Sync complete.');
    });
  });
});

function makeRequest(method, url, callback) {
  var auth = gapi.auth2.getAuthInstance();
  if (!auth.isSignedIn.get()) {
    return callback(new Error('Signin required.'));
  }
  var accessToken = auth.currentUser.get().getAuthResponse().access_token;
  setSpinnerActive(true);
  $.ajax(url, {
    method: method,
    headers: {
      'Authorization': 'Bearer ' + accessToken
    },
    success: function(response) {
      setSpinnerActive(false);
      return callback(null, response);
    },
    error: function(response) {
      setSpinnerActive(false);
      return callback(new Error(response.responseJSON.message));
    }
  });
}

Menyimpan kredensial

Dalam contoh aplikasi ini, kami meneruskan token akses OAuth2 ke backend dengan setiap klik tombol. Dalam aplikasi nyata, pertimbangkan untuk menyimpan kredensial dalam sesi pengguna yang diautentikasi untuk pengambilan yang lebih mudah di backend

Muat ulang aplikasi di browser Anda. Bagian spreadsheet baru sekarang seharusnya ada di layar

Karena database kosong, tidak ada spreadsheet yang ditampilkan. Selain itu, tombol buat belum akan melakukan apa pun

7. Buat spreadsheet

Google Sheets API menyediakan kemampuan untuk membuat dan memperbarui spreadsheet. Untuk mulai menggunakannya, instal Google APIs Node. pustaka klien js dan pustaka autentikasi pengiring

Jalankan perintah berikut di konsol Anda (Anda mungkin perlu menghentikan server terlebih dahulu)

npm install

Selanjutnya kita akan membuat kelas pembantu yang akan menggunakan perpustakaan untuk membuat dan memperbarui spreadsheet kita. Buat file bernama

function onSignIn(user) {
  var profile = user.getBasicProfile();
  $('#profile .name').text(profile.getName());
  $('#profile .email').text(profile.getEmail());
}

lembar. js

npm install

Diberikan token akses OAuth2, kelas ini membuat kredensial dan menginisialisasi klien Sheets API

Selanjutnya kita akan menambahkan metode untuk membuat spreadsheet. Tambahkan yang berikut ke akhir

function onSignIn(user) {
  var profile = user.getBasicProfile();
  $('#profile .name').text(profile.getName());
  $('#profile .email').text(profile.getEmail());
}

npm install

Metode ini mendefinisikan objek

function onSignIn(user) {
  var profile = user.getBasicProfile();
  $('#profile .name').text(profile.getName());
  $('#profile .email').text(profile.getEmail());
}

function onSignIn(user) {
  var profile = user.getBasicProfile();
  $('#profile .name').text(profile.getName());
  $('#profile .email').text(profile.getEmail());
}

Terakhir, tambahkan rute baru ke aplikasi kita yang menerima permintaan dari kontrol spreadsheet, panggil helper untuk membuat spreadsheet, lalu simpan catatan di database. Tambahkan kode berikut di akhir

<meta name="google-signin-scope" 
      content="https://www.googleapis.com/auth/spreadsheets">
<meta name="google-signin-client_id" content="{YOUR CLIENT ID}">
<script src="https://apis.google.com/js/platform.js" async defer></script>

npm install

Jika Anda menghentikan server Anda di atas, mulai ulang server menggunakan perintah berikut

npm start

Di browser Anda, navigasikan ke

npm start

Klik Buat

Spreadsheet baru dibuat dan ditampilkan dalam daftar. Klik nama spreadsheet untuk membukanya, dan Anda akan menemukannya memiliki satu lembar kosong bernama Data

8. Tambahkan baris tajuk

Sekarang kita membuat spreadsheet, mari memformatnya dimulai dengan baris header. Kami akan meminta aplikasi menambahkan baris tajuk ini setelah membuat spreadsheet. Di

function onSignIn(user) {
  var profile = user.getBasicProfile();
  $('#profile .name').text(profile.getName());
  $('#profile .email').text(profile.getEmail());
}

function onSignIn(user) {
  var profile = user.getBasicProfile();
  $('#profile .name').text(profile.getName());
  $('#profile .email').text(profile.getEmail());
}

"use strict";

module.exports = function(sequelize, DataTypes) {
  var Spreadsheet = sequelize.define('Spreadsheet', {
    id: {type: DataTypes.STRING, allowNull: false, primaryKey: true},
    sheetId: {type: DataTypes.INTEGER, allowNull: false},
    name: {type: DataTypes.STRING, allowNull: false}
  });

  return Spreadsheet;
};

npm install

Kode ini menggunakan metode

"use strict";

module.exports = function(sequelize, DataTypes) {
  var Spreadsheet = sequelize.define('Spreadsheet', {
    id: {type: DataTypes.STRING, allowNull: false, primaryKey: true},
    sheetId: {type: DataTypes.INTEGER, allowNull: false},
    name: {type: DataTypes.STRING, allowNull: false}
  });

  return Spreadsheet;
};

Selanjutnya kita perlu mendefinisikan tajuk kolom. Tambahkan kode berikut di akhir

function onSignIn(user) {
  var profile = user.getBasicProfile();
  $('#profile .name').text(profile.getName());
  $('#profile .email').text(profile.getEmail());
}

npm install

Kode di atas juga mendefinisikan field yang sesuai di objek Order (mirip dengan kolom database) yang akan kita gunakan nanti

Terakhir, tentukan metode

"use strict";

module.exports = function(sequelize, DataTypes) {
  var Spreadsheet = sequelize.define('Spreadsheet', {
    id: {type: DataTypes.STRING, allowNull: false, primaryKey: true},
    sheetId: {type: DataTypes.INTEGER, allowNull: false},
    name: {type: DataTypes.STRING, allowNull: false}
  });

  return Spreadsheet;
};

npm install

Kode ini mengulang setiap kolom dan membuat objek untuk masing-masing kolom, menyetel judul kolom sebagai nilai dan pemformatan menjadi tebal. Semua sel dirakit menjadi permintaan dan dikembalikan. Parameter

"use strict";

module.exports = function(sequelize, DataTypes) {
  var Spreadsheet = sequelize.define('Spreadsheet', {
    id: {type: DataTypes.STRING, allowNull: false, primaryKey: true},
    sheetId: {type: DataTypes.INTEGER, allowNull: false},
    name: {type: DataTypes.STRING, allowNull: false}
  });

  return Spreadsheet;
};

"use strict";

module.exports = function(sequelize, DataTypes) {
  var Spreadsheet = sequelize.define('Spreadsheet', {
    id: {type: DataTypes.STRING, allowNull: false, primaryKey: true},
    sheetId: {type: DataTypes.INTEGER, allowNull: false},
    name: {type: DataTypes.STRING, allowNull: false}
  });

  return Spreadsheet;
};

Muat ulang aplikasi di browser Anda dan klik Buat. Spreadsheet yang dihasilkan harus menyertakan baris tajuk dengan kolom untuk setiap bidang yang ditentukan

9. Sinkronkan data ke spreadsheet

Membuat dan memformat spreadsheet tidak ada gunanya jika Anda tidak menambahkan data aktual ke dalamnya

Pertama, mari tambahkan rute baru ke

<meta name="google-signin-scope" 
      content="https://www.googleapis.com/auth/spreadsheets">
<meta name="google-signin-client_id" content="{YOUR CLIENT ID}">
<script src="https://apis.google.com/js/platform.js" async defer></script>

npm install

Seperti rute sebelumnya untuk membuat spreadsheet, yang ini memeriksa otorisasi, memuat model dari database, lalu meneruskan informasi ke

router.get('/', function(req, res, next) {
  var options = {
    order: [['createdAt', 'DESC']],
    raw: true
  };
  Sequelize.Promise.all([
    models.Order.findAll(options),
    models.Spreadsheet.findAll(options)
  ]).then(function(results) {
    res.render('index', {
      orders: results[0],
      spreadsheets: results[1]
    });
  });
});

function onSignIn(user) {
  var profile = user.getBasicProfile();
  $('#profile .name').text(profile.getName());
  $('#profile .email').text(profile.getEmail());
}

npm install

Di sini sekali lagi kami menggunakan metode

router.get('/', function(req, res, next) {
  var options = {
    order: [['createdAt', 'DESC']],
    raw: true
  };
  Sequelize.Promise.all([
    models.Order.findAll(options),
    models.Spreadsheet.findAll(options)
  ]).then(function(results) {
    res.render('index', {
      orders: results[0],
      spreadsheets: results[1]
    });
  });
});

Fungsi

router.get('/', function(req, res, next) {
  var options = {
    order: [['createdAt', 'DESC']],
    raw: true
  };
  Sequelize.Promise.all([
    models.Order.findAll(options),
    models.Spreadsheet.findAll(options)
  ]).then(function(results) {
    res.render('index', {
      orders: results[0],
      spreadsheets: results[1]
    });
  });
});

npm start

Kolom

router.get('/', function(req, res, next) {
  var options = {
    order: [['createdAt', 'DESC']],
    raw: true
  };
  Sequelize.Promise.all([
    models.Order.findAll(options),
    models.Spreadsheet.findAll(options)
  ]).then(function(results) {
    res.render('index', {
      orders: results[0],
      spreadsheets: results[1]
    });
  });
});

router.get('/', function(req, res, next) {
  var options = {
    order: [['createdAt', 'DESC']],
    raw: true
  };
  Sequelize.Promise.all([
    models.Order.findAll(options),
    models.Spreadsheet.findAll(options)
  ]).then(function(results) {
    res.render('index', {
      orders: results[0],
      spreadsheets: results[1]
    });
  });
});

router.get('/', function(req, res, next) {
  var options = {
    order: [['createdAt', 'DESC']],
    raw: true
  };
  Sequelize.Promise.all([
    models.Order.findAll(options),
    models.Spreadsheet.findAll(options)
  ]).then(function(results) {
    res.render('index', {
      orders: results[0],
      spreadsheets: results[1]
    });
  });
});

Muat ulang aplikasi di browser Anda dan klik Sinkronkan di sebelah tautan spreadsheet. Spreadsheet sekarang harus berisi semua data pesanan Anda. Tambahkan pesanan baru dan klik Sinkronkan lagi untuk melihat perubahannya

10. Tambahkan tabel dan bagan pivot

Aplikasi Anda sekarang diekspor ke Google Sheets, tetapi hasil serupa dapat dicapai dengan mengekspor file CSV dan mengimpornya secara manual ke Google Sheets. Apa yang membedakan pendekatan berbasis API ini dari CSV adalah kemampuan untuk menambahkan fitur kompleks ke spreadsheet, seperti tabel pivot dan bagan. Ini memungkinkan Anda untuk memanfaatkan Google Sheets sebagai dasbor untuk data Anda yang dapat disesuaikan dan diperluas oleh pengguna

Untuk memulai, kita perlu menambahkan sheet baru ke spreadsheet kita untuk memuat tabel dan bagan pivot. Sebaiknya pisahkan lembar data mentah dari agregasi dan visualisasi apa pun sehingga kode sinkronisasi Anda dapat berfokus hanya pada data. Di

function onSignIn(user) {
  var profile = user.getBasicProfile();
  $('#profile .name').text(profile.getName());
  $('#profile .email').text(profile.getEmail());
}

router.get('/', function(req, res, next) {
  var options = {
    order: [['createdAt', 'DESC']],
    raw: true
  };
  Sequelize.Promise.all([
    models.Order.findAll(options),
    models.Spreadsheet.findAll(options)
  ]).then(function(results) {
    res.render('index', {
      orders: results[0],
      spreadsheets: results[1]
    });
  });
});

"use strict";

module.exports = function(sequelize, DataTypes) {
  var Spreadsheet = sequelize.define('Spreadsheet', {
    id: {type: DataTypes.STRING, allowNull: false, primaryKey: true},
    sheetId: {type: DataTypes.INTEGER, allowNull: false},
    name: {type: DataTypes.STRING, allowNull: false}
  });

  return Spreadsheet;
};

npm start

Nanti di metode

"use strict";

module.exports = function(sequelize, DataTypes) {
  var Spreadsheet = sequelize.define('Spreadsheet', {
    id: {type: DataTypes.STRING, allowNull: false, primaryKey: true},
    sheetId: {type: DataTypes.INTEGER, allowNull: false},
    name: {type: DataTypes.STRING, allowNull: false}
  });

  return Spreadsheet;
};

<section id="spreadsheets"
         class="mdl-cell mdl-cell--4-col relative">
  <div class="mdl-list">
    <div class="mdl-list__item">
      <span class="mdl-list__item-primary-content mdl-layout-title">
        Spreadsheets</span>
      <span class="mdl-list__item-secondary-action">
        <button class="mdl-button mdl-js-button mdl-button--raised
                       mdl-js-ripple-effect mdl-button--colored"
                rel="create" type="button">Create</button>
      </span>
    </div>
    {{#each spreadsheets}}
    <div class="mdl-list__item">
      <a class="mdl-list__item-primary-content"
         href="https://docs.google.com/spreadsheets/d/{{id}}/edit"
         target="_blank">{{name}}</a>
      <span class="mdl-list__item-secondary-action">
        <button class="mdl-button mdl-js-button mdl-button--raised
                       mdl-js-ripple-effect"
                rel="sync" data-spreadsheetid="{{id}}"
                type="button">Sync</button>
      </span>
    </div>
    {{/each}}
  </div>
</section>

npm start

Terakhir, tambahkan fungsi berikut ke file untuk membuat permintaan untuk membuat tabel pivot, memformat hasilnya, dan menambahkan bagan

npm start

Muat ulang aplikasi di browser Anda dan klik Buat. Spreadsheet yang dihasilkan harus memiliki lembar baru yang berisi tabel dan bagan pivot kosong

Klik Sinkronkan untuk menambahkan data ke spreadsheet. Tabel dan bagan pivot juga diisi dengan data

11. Selamat

Anda berhasil mengubah aplikasi untuk mengekspor data ke Google Spreadsheet. Pengguna sekarang dapat membuat laporan dan dasbor khusus di atas data Anda tanpa memerlukan kode tambahan apa pun, dan semuanya tetap disinkronkan saat data berubah

Bagaimana cara menghubungkan Google Sheets ke Android Studio?

Bisakah saya menggunakan Google Sheets sebagai API?

Bagaimana cara mengakses Google Sheets di Android?

Bagaimana cara menarik data dari Google Sheets ke API?