Hướng dẫn API cho người mới bắt đầu với Google Sheets & Apps Script

Video google sheet call api

Trong hướng dẫn API này dành cho người mới bắt đầu, bạn sẽ tìm hiểu cách kết nối với các API bằng cách sử dụng Google Apps Script để lấy dữ liệu từ bên thứ ba và hiển thị nó trong bảng tính Google Sheets của bạn.

Ví dụ 1: Kết nối Google Sheets với API Numbers

Chúng ta sẽ bắt đầu bằng một ví dụ rất đơn giản trong hướng dẫn API này dành cho người mới bắt đầu, để bạn có thể tập trung vào dữ liệu mà không bị lạc trong hàng và hàng mã.

Bắt đầu bằng cách viết một chương trình ngắn gọi API Numbers và yêu cầu một sự thật toán học cơ bản.

Bước 1: Mở một bảng tính mới

Mở một bảng tính Google Sheets trống và đặt tên cho nó là “Ví dụ API Numbers”.

Bước 2: Truy cập vào trình biên soạn mã

Truy cập vào Công cụ > Trình biên soạn mã…

Bước 3: Đặt tên cho dự án của bạn

Một cửa sổ mới sẽ mở ra và đó là nơi chúng ta sẽ viết mã của chúng ta. Đặt tên cho dự án của bạn là “Ví dụ API Numbers”.

Bước 4: Thêm mã ví dụ API

Xóa toàn bộ mã hiện có trong tệp Code.gs và thay thế nó bằng đoạn mã sau:

function callNumbers() {
  // Gọi API Numbers để lấy một sự thật toán học ngẫu nhiên
  var response = UrlFetchApp.fetch("http://numbersapi.com/random/math");
  Logger.log(response.getContentText());
}

Chúng ta sử dụng lớp UrlFetchApp để giao tiếp với các ứng dụng khác trên Internet để truy cập tài nguyên, để lấy một URL.

Bây giờ cửa sổ mã của bạn nên trông như sau:

Numbers API Google Apps Script Code

Bước 5: Chạy chức năng của bạn

Chạy chức năng bằng cách nhấp vào nút phát trong thanh công cụ.

Bước 6: Cho phép kịch bản của bạn

Điều này sẽ yêu cầu bạn cho phép kịch bản của mình kết nối đến một dịch vụ bên ngoài. Nhấp vào “Xem xét quyền truy cập” sau đó nhấp vào “Cho phép” để tiếp tục.

Bước 7: Xem nhật ký

Xin chúc mừng, chương trình của bạn đã chạy thành công. Nó đã gửi một yêu cầu đến bên thứ ba để lấy dữ liệu (trong trường hợp này, một sự thật toán học ngẫu nhiên) và dịch vụ này đã phản hồi với dữ liệu này.

Nhưng đợi một chút, nó ở đâu? Làm thế nào chúng ta có thể xem dữ liệu này?

Ôi, bạn sẽ nhận thấy rằng dòng 5 của mã chúng ta ở trên là Logger.log(…), điều này có nghĩa là chúng ta đã lưu lại văn bản của phản hồi trong nhật ký của chúng ta.

Vì vậy, hãy kiểm tra điều đó.

Đi vào menu “Chạy” sau đó “Lịch sử chạy”

Bạn sẽ thấy phản hồi của mình (tất nhiên bạn có thể có một sự thật khác):

[17-02-03 08:52:41:236 PST] 1158 est le nombre maximum de morceaux dans un tore qui peut être coupé en 18 morceaux.

nó trông như thế này trong cửa sổ pop-up:

Apps script logger output

Tuyệt vời! Hãy thử chạy nó nhiều lần, kiểm tra nhật ký và bạn sẽ thấy những sự thật khác nhau.

Tiếp theo, hãy thử thay đổi URL với những ví dụ sau để xem dữ liệu khác trong phản hồi:

Bạn cũng có thể nhập chúng trực tiếp vào trình duyệt của bạn nếu bạn muốn chơi với nó. Thêm thông tin xem trang API của Numbers.

Vậy làm sao nếu chúng ta muốn hiển thị kết quả trên bảng tính của chúng ta?

Ồ, đó khá dễ dàng.

Bước 8: Thêm dữ liệu vào bảng tính

Thêm một vài dòng mã này (dòng 7, 8 và 9) dưới mã hiện có của bạn:

function callNumbers() {
  // Gọi API Numbers để lấy một sự thật toán học ngẫu nhiên
  var response = UrlFetchApp.fetch("http://numbersapi.com/random/math");
  Logger.log(response.getContentText());

  var fact = response.getContentText();

  var sheet = SpreadsheetApp.getActiveSheet();
  sheet.getRange(1,1).setValue([fact]);
}

Dòng 7 chỉ đơn giản gán văn bản của phản hồi (dữ liệu của chúng ta) vào một biến gọi là “fact”, để chúng ta có thể tham chiếu đến nó bằng cách sử dụng tên này.

Dòng 8 lấy bảng tính hoạt động hiện tại của chúng ta (Sheet1 của ví dụ API Numbers) và gán nó cho một biến gọi là “sheet”, để chúng ta có thể truy cập nó bằng cách sử dụng tên này.

Cuối cùng, ở dòng 9, chúng ta lấy ô A1 (phạm vi lấy dữ liệu 1,1) và đặt giá trị của ô này bằng giá trị của biến “fact”, chứa văn bản của phản hồi.

Bước 9: Chạy và cấp phép lại

Chạy lại chương trình của bạn. Bạn sẽ được yêu cầu cấp quyền cho script của bạn để xem và quản lý bảng tính của bạn trong Google Drive, vì vậy hãy nhấp vào “Cho phép”.

Bước 10: Xem dữ liệu từ bên ngoài trong bảng tính của bạn

Bây giờ bạn nên thấy sự thật ngẫu nhiên hiển thị trong bảng tính Google của bạn:

Random math fact from Numbers API in Google Sheet

Tuyệt vời!

Để tóm tắt tiến độ của chúng ta cho đến nay trong hướng dẫn API này dành cho người mới bắt đầu: Chúng ta đã yêu cầu dữ liệu từ một dịch vụ bên thứ ba trên Internet. Dịch vụ này đã trả lời với dữ liệu chúng ta muốn và bây giờ chúng ta đã hiển thị chúng trong bảng tính Google của chúng ta!

Bước 11: Sao chép dữ liệu vào ô mới

Kịch bản như được viết trong hướng dẫn API này dành cho người mới bắt đầu sẽ ghi đè lên ô A1 với sự thật mới của bạn mỗi khi bạn chạy chương trình. Nếu bạn muốn tạo danh sách và tiếp tục thêm sự thật mới dưới các sự thật cũ, hãy thực hiện một sửa đổi nhỏ cho dòng 9 mã của bạn (được chỉ ra dưới đây), để viết phản hồi vào hàng trống đầu tiên:

function callNumbers() {
  // Gọi API Numbers để lấy một sự thật toán học ngẫu nhiên
  var response = UrlFetchApp.fetch("http://numbersapi.com/random/math");
  Logger.log(response.getContentText());

  var fact = response.getContentText();

  var sheet = SpreadsheetApp.getActiveSheet();
  sheet.getRange(sheet.getLastRow() + 1,1).setValue([fact]);
}

Kết quả của bạn sẽ như sau:

Random math facts from Numbers API in Google Sheet

Một điều cuối cùng chúng ta có thể muốn làm với ứng dụng này là thêm một menu vào bảng tính Google của chúng ta, để chúng ta có thể chạy kịch bản từ đó thay vì từ trình biên soạn mã. Điều này đơn giản và thú vị!

Bước 12: Thêm mã cho một menu tùy chỉnh

Thêm mã sau đây vào trình biên soạn mã của bạn:

function onOpen() {
  var ui = SpreadsheetApp.getUi();
  ui.createMenu('Menu tùy chỉnh API Numbers')
      .addItem('Hiển thị một sự thật ngẫu nhiên', 'callNumbers')
      .addToUi();
}

Đoạn mã cuối cùng của bạn cho kịch bản API Numbers nên trông giống như mã này trên GitHub.

Bước 13: Thêm menu tùy chỉnh

Chạy chức năng “onOpen”, điều này sẽ thêm menu vào bảng tính. Chúng ta chỉ cần làm bước này một lần duy nhất.

Ajouter le menu d'applications script personnalisées

Bước 14: Chạy kịch bản của bạn từ menu tùy chỉnh

Sử dụng menu mới để chạy kịch bản từ bảng tính Google của bạn và xem các sự thật ngẫu nhiên xuất hiện trong bảng tính Google của bạn!

Utilisez le menu d'applications script personnalisées

Tuyệt vời! Bạn đã sẵn sàng thử một cái gì đó khó khăn hơn?

Hãy tạo một ứng dụng khám phá âm nhạc trong Google Sheets.

Ví dụ 2: Ứng dụng khám phá âm nhạc sử dụng API iTunes

Ứng dụng này lấy tên nghệ sĩ từ bảng tính Google Sheets, gửi yêu cầu đến API iTunes để lấy thông tin về nghệ sĩ đó và hiển thị các album, tiêu đề bài hát, hình ảnh và thậm chí thêm liên kết đến đoạn nhạc.

Thực tế thì nó không khó như nó trông.

Bắt đầu với trình duyệt API iTunes

Bắt đầu bằng một bảng tính trống, đặt tên cho nó là “Trình duyệt API iTunes” và mở Google Apps Script Editor.

Xóa mã Google Apps Script hiện có và dán mã này để bắt đầu:

function calliTunes() {
  // Gọi API iTunes
  var response = UrlFetchApp.fetch("https://itunes.apple.com/search?term=coldplay");
  Logger.log(response.getContentText());
}

Chạy chương trình và chấp nhận các quyền cần thiết. Bạn sẽ nhận được kết quả như sau:

iTunes API output

Wow, có rất nhiều dữ liệu trả về lần này, vì vậy chúng ta cần lọc chúng để lấy ra những phần chúng ta quan tâm.

Phân tích dữ liệu của iTunes

Vậy hãy thử điều này. Cập nhật mã của bạn để phân tích dữ liệu và lấy ra một số thông tin:

function calliTunes() {
  // Gọi API iTunes
  var response = UrlFetchApp.fetch("https://itunes.apple.com/search?term=coldplay");

  // Phân tích dữ liệu JSON phản hồi
  var json = response.getContentText();
  var data = JSON.parse(json);

  Logger.log(data);
  Logger.log(data["results"]);
  Logger.log(data["results"][0]);
  Logger.log(data["results"][0]["artistName"]);
  Logger.log(data["results"][0]["collectionName"]);
  Logger.log(data["results"][0]["artworkUrl60"]);
  Logger.log(data["results"][0]["previewUrl"]);
}
  • Dòng 4: Chúng ta gửi một yêu cầu đến API iTunes để tìm kiếm dữ liệu về Coldplay. API trả về các dữ liệu đó và chúng ta gán chúng vào một biến gọi là “response”, để chúng ta có thể sử dụng tên này để tham chiếu đến chúng.

  • Dòng 7 và 8: Chúng ta lấy văn bản context của phản hồi và sau đó phân tích phản hồi JSON để có được biểu diễn đối tượng native. Điều này cho phép chúng ta trích xuất các phần khác nhau của dữ liệu.

Vậy, nhìn vào đối tượng dữ liệu (dòng 10):

iTunes api data packet

Bạn có thể thấy đây là một đối tượng với một dấu ngoặc nhọn ở đầu {.

Cấu trúc trông như này:

{ resultCount = 50, results = [ ….các dữ liệu chúng ta quan tâm…. ] }

iTunes api data packet

  • Dòng 11: Chúng ta trích xuất “results”, đó là phần của dữ liệu chứa thông tin về nghệ sĩ và bài hát, bằng cách sử dụng:
data["results"]
  • Dòng 12: Có nhiều album được trả về cho nghệ sĩ này, vì vậy chúng ta lấy album đầu tiên bằng cách sử dụng chỉ mục [0] vì chỉ mục bắt đầu từ 0:
data["results"][0]

Điều này hiển thị tất cả các thông tin có sẵn từ API iTunes cho nghệ sĩ và album cụ thể này:

  • Dòng 13-16: Trong phần dữ liệu này, chúng ta có thể trích xuất các chi tiết cụ thể mà chúng ta muốn bằng cách sử dụng tên của chúng:
data["results"][0]["artistName"], data["results"][0]["collectionName"], data["results"][0]["artworkUrl60"], data["results"][0]["previewUrl"]

Đưa ra đầu ra sau:

iTunes api details

Nếu bạn muốn, bạn có thể sử dụng các chú thích (“//”) ở đầu một dòng để ngăn Logger ghi lại đối tượng dữ liệu hoàn chỉnh. Điều này có nghĩa là bạn sửa đổi các dòng 10, 11 và 12 như sau:

// Logger.log(data);
// Logger.log(data[“results”]);
// Logger.log(data[“results”][0]);

Điều này sẽ giúp bạn dễ dàng nhìn thấy các chi tiết bạn đang trích xuất.

Đặt tất cả thành một ứng dụng

Nếu chúng ta muốn xây dựng ứng dụng được hiển thị trong GIF ở đầu bài viết này, chúng ta cần làm qua một số bước:

  • Cấu hình bảng tính Google
  • Lấy tên nghệ sĩ từ bảng tính Google bằng Google Apps Script
  • Yêu cầu dữ liệu từ iTunes cho nghệ sĩ đó bằng Google Apps Script
  • Phân tích phản hồi để trích xuất đối tượng dữ liệu liên quan bằng Google Apps Script
  • Trích xuất các chi tiết cụ thể chúng ta muốn (tên album, tiêu đề bài hát, hình ảnh album, URL xem trước)
  • Xóa tất cả kết quả trước đó trong bảng tính trước khi hiển thị kết quả mới
  • Hiển thị kết quả mới trong bảng tính Google của chúng ta
  • Thêm menu tùy chỉnh để chạy chương trình từ bảng tính Google, không phải từ trình biên soạn mã

Điều này luôn tốt khi viết một kế hoạch như vậy trước khi bạn bắt đầu viết các hàng mã. Điều này giúp bạn suy nghĩ về toàn bộ ứng dụng và những gì nó sẽ làm, giúp bạn đưa ra các lựa chọn hiệu quả cho cấu hình mã của bạn.

Bây giờ, bạn có thể chạy chương trình để tìm kiếm nghệ sĩ yêu thích của bạn!

Hãy thử và vui chơi với những API khác nhau này!

Related posts