Google trang tính API góc

Trong phòng thí nghiệm lập trình này, bạn sẽ tìm hiểu cách sử dụng Google Trang tính làm công cụ báo cáo tùy chỉnh cho người dùng của mình. Bạn sẽ sửa đổi ứng dụng theo dõi đơn đặt hàng mẫu để xuất sang bảng tính, sau đó xây dựng trực quan hóa bằng API Google Trang tính. Ứng dụng mẫu được xây dựng bằng Node. js và khung ứng dụng web Express, nhưng các nguyên tắc cơ bản giống nhau có thể áp dụng cho mọi kiến ​​trúc

Bạn sẽ học được gì

• Thêm Đăng nhập bằng Google vào ứng dụng
• Cài đặt và định cấu hình Thư viện ứng dụng Google API cho Nút. js
• Tạo bảng tính
• Xuất bản ghi cơ sở dữ liệu sang bảng tính
• Tạo bảng tổng hợp và biểu đồ

Những gì bạn cần

• Nút. js đã được cài đặt (>=v8. 11. 1)
• Công cụ quản lý gói npm (đi kèm với Node. js)
• Truy cập internet và trình duyệt
• Tài khoản Google

2. Lấy mã mẫu

Bạn có thể tải tất cả mã mẫu về máy tính của mình

file_download Tải xuống Zip

hoặc sao chép kho lưu trữ GitHub từ dòng lệnh

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

Kho lưu trữ chứa một tập hợp các thư mục đại diện cho từng bước trong quy trình, trong trường hợp bạn cần tham khảo phiên bản đang hoạt động

Bạn sẽ làm việc với bản sao nằm trong thư mục

npm start

4, nhưng bạn có thể tham khảo hoặc sao chép tệp từ những thư mục khác nếu cần

3. Chạy ứng dụng mẫu

Trước tiên, hãy thiết lập và chạy ứng dụng theo dõi đơn hàng mẫu. Với mã đã tải xuống, hãy làm theo hướng dẫn bên dưới để cài đặt và khởi động Node. js/ứng dụng web nhanh

1. Mở một thiết bị đầu cuối dòng lệnh trên máy tính của bạn và điều hướng đến thư mục

   npm start
   

   4 của codelab
2. Để cài đặt nút. js, hãy nhập lệnh sau

npm install

1. Để khởi động máy chủ, hãy nhập lệnh sau

npm start

1. Mở trình duyệt và điều hướng đến

   npm start
   

   6

Ứng dụng này cung cấp khả năng tạo, cập nhật và xóa một tập hợp các bản ghi đơn hàng đơn giản. Chúng tôi đã bao gồm một cơ sở dữ liệu SQLite với một số dữ liệu mẫu, nhưng vui lòng thêm, cập nhật và xóa các đơn đặt hàng khi bạn tiến hành qua lớp học lập trình

Hãy dành một chút thời gian để làm quen với mã và tham khảo bảng bên dưới để biết tổng quan về cấu trúc của ứng dụng

npm start

7

Định cấu hình khung ứng dụng web Express

npm start

8

Một tệp cấu hình, chứa thông tin kết nối cơ sở dữ liệu

npm start

9

Cơ sở dữ liệu SQLite để lưu trữ các bản ghi đơn hàng

0

Chứa mã xác định và tải các mô hình cơ sở dữ liệu. Ứng dụng này sử dụng thư viện ORM Sequelize để đọc và ghi vào cơ sở dữ liệu

1

Chứa các phụ thuộc của dự án, được cài đặt bởi npm

2

Xác định nút. ứng dụng js và các phụ thuộc của nó

3

Chứa các tệp JavaScript và CSS phía máy khách được ứng dụng sử dụng

4

Xác định các điểm cuối URL mà ứng dụng hỗ trợ và cách xử lý chúng

5

Điểm vào ứng dụng, cấu hình môi trường và khởi động máy chủ

6

Chứa các mẫu HTML sẽ được hiển thị, được viết bằng định dạng Tay lái. Thư viện Material Design Lite (MDL) đã được sử dụng để bố trí và thu hút thị giác

Phần còn lại của phòng thí nghiệm lập trình sẽ hướng dẫn bạn cách sửa đổi ứng dụng cơ bản trong thư mục

npm start

4, nhưng nếu bạn gặp sự cố với một bước nhất định, bạn có thể chuyển sang thư mục của bước đó để xem kết quả cuối cùng

Tự động khởi động lại

Ứng dụng này sử dụng gật đầu để tự động tải lại ứng dụng bất cứ khi nào bạn thay đổi tệp nguồn. Điều này có nghĩa là bạn không cần phải dừng và khởi động lại máy chủ sau mỗi bước

4. Tạo ID khách hàng

Trước khi tạo ID ứng dụng khách, bạn phải bật Google Sheets API

1. Sử dụng trình hướng dẫn này để đi đến trang Bật quyền truy cập vào API
2. Đảm bảo chọn đúng dự án trong danh sách dự án ở đầu trang, sau đó nhấp vào Tiếp theo
3. Nhấp vào Bật

Tiếp theo, thêm ID ứng dụng khách OAuth vào dự án của bạn

1. Nhấp vào Trình đơn
   và chuyển đến API & Dịch vụ > Thông tin xác thực (liên kết trực tiếp).
2. Nhấp vào Tạo thông tin xác thực > ID ứng dụng khách OAuth
3. Đối với Loại ứng dụng, chọn Ứng dụng web và thêm tên "Khởi động nhanh API Google Trang tính"
4. Đối với nguồn gốc JavaScript được ủy quyền, hãy nhấp vào Thêm URI và thêm giá trị
   8
5. Nhấp vào Tạo
6. Ghi lại ID khách hàng được hiển thị trong trường ID khách hàng của bạn vì bạn sẽ cần nó trong bước tiếp theo. Bạn không cần phải tải tập tin

Mẹo. Bạn cũng có thể truy cập ID ứng dụng khách từ API & Dịch vụ > Thông tin xác thực

1. Nhấp vào OK

5. Thêm đăng nhập bằng Google

Trước khi có thể bắt đầu xuất dữ liệu sang Google Trang tính, bạn cần người dùng đăng nhập vào ứng dụng của bạn bằng Tài khoản Google của họ và cấp quyền truy cập vào bảng tính của họ. Để thực hiện việc này, chúng tôi sẽ sử dụng Đăng nhập bằng Google dành cho trang web, thư viện JavaScript mà bạn có thể thêm vào ứng dụng web hiện có

Tệp

9 xác định bố cục cho từng trang. Mở nó trong trình soạn thảo văn bản và thêm đoạn mã sau vào cuối thẻ

0

Ghi đè trình giữ chỗ

1 bằng ID ứng dụng khách OAuth2 mà bạn đã tạo ở bước trước

Mã này đặt ID ứng dụng khách OAuth2, phạm vi được yêu cầu và bao gồm thư viện Đăng nhập Google. Trong trường hợp này, chúng tôi đang yêu cầu phạm vi

2 vì ứng dụng cần cả quyền truy cập đọc và ghi vào bảng tính của người dùng

Tiếp theo, thêm mã hiển thị nút đăng nhập và hiển thị thông tin của người dùng đã đăng nhập. Thêm đoạn mã sau vào

9, ngay dưới

4

Cuối cùng, thêm một số JavaScript phía máy khách để điền vào phần hồ sơ sau khi đăng nhập hoàn tất. Thêm phần sau vào

5

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

Tải lại ứng dụng trong trình duyệt của bạn, nhấp vào Đăng nhập và cấp quyền truy cập vào Tài khoản Google của bạn. Tên và địa chỉ email của bạn sẽ được hiển thị trong tiêu đề của ứng dụng

Sử dụng Đăng nhập bằng Google

Để đơn giản, ứng dụng mẫu trong phòng học mã này không có người dùng hoặc hệ thống đăng nhập. Đăng nhập Google chỉ được sử dụng để có được sự cho phép cần thiết để thực hiện các yêu cầu đối với API Google Trang tính. Trong một ứng dụng thực tế, bạn nên sử dụng Google Sign-in để tích hợp và đăng nhập người dùng. Để biết thêm thông tin, hãy đi tới Xác thực bằng máy chủ phụ trợ

6. Thêm điều khiển bảng tính

Bạn cần theo dõi các bảng tính mà ứng dụng của bạn tạo ra để nếu dữ liệu trong ứng dụng thay đổi, các bảng tính đó có thể được cập nhật. Để làm điều đó, hãy tạo một bảng trong cơ sở dữ liệu để lưu trữ thông tin về bảng tính. Bạn cũng sẽ thêm một số điều khiển vào giao diện người dùng

Trong thư mục

0, tạo một tệp có tên

7 với mã sau

mô hình/bảng tính. 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;
};

Mã này sử dụng ORM tuần tự hóa để xác định một bảng mới lưu trữ ID, ID trang tính và tên của bảng tính bạn tạo

Tiếp theo, tìm nạp các bảng tính bạn đã lưu trữ khi tải trang chỉ mục để bạn có thể hiển thị chúng trong danh sách. Trong

4, thay thế mã cho tuyến đường "/" bằng mã sau

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]
    });
  });
});

Tiếp theo, hiển thị danh sách các bảng tính trong mẫu. Thêm đoạn mã sau vào cuối

9, trong khoảng

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

0 hiện có

  

    

      
        Spreadsheets
      
        Create
      
    
    {{#each spreadsheets}}
    

      {{name}}
      
        Sync
      
    
    {{/each}}
  

Cuối cùng, kết nối các nút tạo bảng tính và đồng bộ hóa bảng tính. Thêm đoạn mã sau vào

5

$(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));
    }
  });
}

Lưu trữ thông tin xác thực

Trong ứng dụng mẫu này, chúng tôi sẽ chuyển mã thông báo truy cập OAuth2 đến chương trình phụ trợ với mỗi lần nhấp vào nút. Trong một ứng dụng thực tế, hãy xem xét lưu trữ thông tin đăng nhập trong phiên của người dùng được xác thực để truy xuất dễ dàng hơn trong phần phụ trợ

Tải lại ứng dụng trong trình duyệt của bạn. Phần bảng tính mới bây giờ sẽ xuất hiện trên màn hình

Vì cơ sở dữ liệu trống nên không có bảng tính nào để hiển thị. Đồng thời, nút tạo sẽ chưa làm bất cứ điều gì

7. Tạo bảng tính

Google Sheets API cung cấp khả năng tạo và cập nhật bảng tính. Để bắt đầu sử dụng, hãy cài đặt Google APIs Node. thư viện máy khách js và thư viện xác thực đồng hành

Chạy các lệnh sau trong bảng điều khiển của bạn (bạn có thể cần phải dừng máy chủ trước)

npm install

0

Tiếp theo, chúng tôi sẽ tạo một lớp trình trợ giúp sẽ sử dụng các thư viện để tạo và cập nhật bảng tính của chúng tôi. Tạo một tệp có tên

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

2 trong thư mục gốc của ứng dụng với đoạn mã sau

tấm. js

npm install

1

Được cung cấp mã thông báo truy cập OAuth2, lớp này sẽ tạo thông tin đăng nhập và khởi chạy ứng dụng khách Sheets API

Tiếp theo, chúng ta sẽ thêm một phương thức để tạo bảng tính. Thêm phần sau vào cuối

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

2

npm install

2

Phương thức này định nghĩa một đối tượng

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

4 đơn giản và gọi phương thức

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

5 để tạo nó trên máy chủ

Cuối cùng, thêm một tuyến mới vào ứng dụng của chúng tôi để nhận yêu cầu từ các điều khiển bảng tính, gọi trình trợ giúp để tạo bảng tính, sau đó lưu một bản ghi trong cơ sở dữ liệu. Thêm đoạn mã sau vào cuối

4

npm install

3

Nếu bạn đã dừng máy chủ của mình ở trên, hãy khởi động lại máy chủ bằng lệnh sau

npm start

Trong trình duyệt của bạn, điều hướng đến

npm start

6 để tải ứng dụng

Nhấp vào Tạo

Một bảng tính mới được tạo và hiển thị trong danh sách. Nhấp vào tên của bảng tính để mở nó và bạn sẽ thấy nó có một trang tính trống tên là Dữ liệu

8. Thêm hàng tiêu đề

Bây giờ chúng ta đang tạo bảng tính, hãy định dạng chúng bắt đầu bằng hàng tiêu đề. Chúng tôi sẽ yêu cầu ứng dụng thêm hàng tiêu đề này sau khi tạo bảng tính. Trong

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

2, thay thế

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

9 trong phương thức

"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;
};

0 bằng cách sau

npm install

5

Mã này sử dụng phương thức

"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;
};

1 của API Trang tính, được sử dụng cho hầu hết mọi loại thao tác đối với bảng tính. Phương thức lấy một mảng các đối tượng làm đầu vào, mỗi đối tượng chứa loại yêu cầu (thao tác) cụ thể để thực hiện trên bảng tính. Trong trường hợp này, chúng tôi chỉ chuyển một yêu cầu duy nhất để định dạng hàng tiêu đề

Tiếp theo, chúng ta sẽ cần xác định các tiêu đề cột. Thêm đoạn mã sau vào cuối

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

2

npm install

6

Đoạn mã trên cũng xác định các trường tương ứng trong đối tượng Order (tương tự như các cột cơ sở dữ liệu) mà chúng ta sẽ sử dụng sau này

Cuối cùng, xác định phương thức

"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;
};

4 được tham chiếu trước đó. Trong cùng một tệp, thêm vào như sau

npm install

7

Mã này lặp qua từng cột và tạo một đối tượng cho từng cột, đặt tiêu đề của cột làm giá trị và định dạng thành in đậm. Tất cả các ô được tập hợp thành một yêu cầu và trả về. Tham số

"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;
};

7 là bắt buộc và chỉ định chính xác trường nào của đối tượng

"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;
};

5 cần tìm khi áp dụng các thay đổi

Tải lại ứng dụng trong trình duyệt của bạn và nhấp vào Tạo. Bảng tính kết quả phải bao gồm một hàng tiêu đề với một cột cho từng trường được xác định

9. Đồng bộ hóa dữ liệu vào bảng tính

Tạo và định dạng bảng tính là vô nghĩa nếu bạn không thêm bất kỳ dữ liệu thực tế nào vào đó

Trước tiên, hãy thêm một tuyến đường mới vào

4 sẽ bắt đầu đồng bộ hóa

npm install

8

Giống như lộ trình trước để tạo bảng tính, lộ trình này kiểm tra quyền, tải các mô hình từ cơ sở dữ liệu, sau đó chuyển thông tin đến

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]
    });
  });
});

0. Sau đó, nó sẽ chuyển đổi các bản ghi thành các ô và thực hiện các yêu cầu API. Thêm đoạn mã sau vào

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

2

npm install

9

Ở đây một lần nữa, chúng tôi đang sử dụng phương pháp

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]
    });
  });
});

2, lần này chuyển qua 2 yêu cầu. Đầu tiên là thay đổi kích thước trang tính để đảm bảo có đủ hàng và cột để khớp với dữ liệu sắp ghi. Thứ hai là một thiết lập các giá trị và định dạng ô

Hàm

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]
    });
  });
});

5 là nơi bạn chuyển đổi các đối tượng Order thành các ô. Thêm đoạn mã sau vào cùng một tệp

npm start

0

Các trường

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]
    });
  });
});

6 và

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]
    });
  });
});

7 đặt cả giá trị số và định dạng số để đảm bảo các giá trị được hiển thị chính xác. Ngoài ra, xác thực dữ liệu được đặt trên trường

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]
    });
  });
});

8 để hiển thị danh sách các giá trị trạng thái được phép. Mặc dù không hữu ích trong phòng thí nghiệm lập trình này, nhưng việc thêm xác thực dữ liệu vào bảng tính có thể hiệu quả nếu bạn định cho phép người dùng chỉnh sửa các hàng và gửi bản cập nhật trở lại ứng dụng của mình

Tải lại ứng dụng trong trình duyệt của bạn và nhấp vào Đồng bộ hóa bên cạnh liên kết bảng tính. Bảng tính bây giờ sẽ chứa tất cả dữ liệu đặt hàng của bạn. Thêm đơn đặt hàng mới và nhấp vào Đồng bộ hóa lần nữa để xem các thay đổi

10. Thêm bảng tổng hợp và biểu đồ

Ứng dụng của bạn hiện xuất sang Google Trang tính nhưng có thể đạt được kết quả tương tự bằng cách xuất tệp CSV và nhập tệp đó vào Google Trang tính theo cách thủ công. Điều khác biệt giữa cách tiếp cận dựa trên API này với CSV là khả năng thêm các tính năng phức tạp vào bảng tính, chẳng hạn như bảng tổng hợp và biểu đồ. Điều này cho phép bạn tận dụng Google Trang tính làm trang tổng quan cho dữ liệu của mình mà người dùng có thể tùy chỉnh và mở rộng

Để bắt đầu, chúng tôi cần thêm một trang tính mới vào bảng tính của mình để chứa bảng tổng hợp và biểu đồ. Tốt nhất là giữ cho bảng dữ liệu thô tách biệt khỏi mọi tập hợp và trực quan hóa để mã đồng bộ hóa của bạn có thể chỉ tập trung vào dữ liệu. Trong

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

2, hãy thêm đoạn mã sau vào mảng các trang tính được tạo trong phương thức

"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;
};

0 của

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]
    });
  });
});

0

npm start

1

Sau này trong phương pháp

"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;
};

0, chúng ta sẽ cần lấy ID của trang tính "Pivot" và sử dụng nó để tạo các yêu cầu mới. Thêm đoạn mã sau vào sau

  

    

      
        Spreadsheets
      
        Create
      
    
    {{#each spreadsheets}}
    

      {{name}}
      
        Sync
      
    
    {{/each}}
  

3

npm start

2

Cuối cùng, thêm các chức năng sau vào tệp để tạo yêu cầu xây dựng bảng tổng hợp, định dạng kết quả và thêm biểu đồ

npm start

3

Tải lại ứng dụng trong trình duyệt của bạn và nhấp vào Tạo. Bảng tính kết quả phải có một trang tính mới chứa bảng tổng hợp và biểu đồ trống

Nhấn Sync để thêm dữ liệu vào bảng tính. Bảng tổng hợp và biểu đồ cũng được điền dữ liệu

11. Chúc mừng

Bạn đã sửa đổi thành công một ứng dụng để xuất dữ liệu sang Google Trang tính. Giờ đây, người dùng có thể tạo báo cáo và trang tổng quan tùy chỉnh trên dữ liệu của bạn mà không cần bất kỳ mã bổ sung nào và tất cả vẫn được đồng bộ hóa khi dữ liệu thay đổi

Làm cách nào để thêm Google API vào Angular?

Tôi có thể sử dụng Google Trang tính làm API không?

Làm cách nào để tích hợp góc cạnh với Google Trang tính?

Việc sử dụng Google Sheets API có miễn phí không?