PT
Phạm Thị Diệu Linh
Xuất bản 10/25/2024

Xin chào mọi người mình là Danh, hôm nay mình xin chia sẽ với mọi người một công nghệ khá là thú vị và tiện ích về lập trình.

Giới thiệu Google Sheets

Thông thường khi làm một trang web chúng ta có 2 việc chính:

  • xây dựng giao diện (Font-end),

  • xử lý dữ liệu và quản lý dữ liệu (Back-end).

Bài viết này sẽ nói nhiều về phần Back-end trọng tâm là nơi lưu trữ dữ liệu và gọi api.

Thông thường chúng ta có nhiều nơi lưu trữ dữ liệu: MongoDB, MySQL, SQL server …

Hôm nay mình xin giới thiệu các bạn một nơi lưu trữ dữ liệu cực kỳ đơn giản và miễn phí

giúp chúng ta có thể xây dựng phần back-end cho dự án riêng của mình chính là Google Sheet API.

Setup project

Để xây dựng back-end cho dự án bằng Google Sheet thì vô cùng đơn giản các bạn chỉ cần thực hiện các bước sau:

đầu tiên bạn truy cập vào trang web: https://console.cloud.google.com/ sau đó các bạn đăng nhập bằng tk gmail các bạn.

bây giờ các bạn hãy làm theo hướng dẫn hình ảnh bên dưới để tạo 1 database bằng Google Sheet.

các bạn chọn mục Select a project sẽ ra 1 mockup như hình và chọn new project như hình dưới.

image-11.png

Ở mục Project name thì các bạn đặt tên của project của mình ở trong ô input đấy và chọn Create

sau khi nhấn create a thì trên góc sẽ hiện 1 thông báo như hình và các bạn chọn select project

image-10.png

  • Các bạn chọn tiệp icon sidebar chọn APIs & Services

  • các bạn lại chọn ENABLE APIS AND SERVICES

image-11.png

Ở ô nhập các bạn nhập “sheet” và enter

Các bạn nhấn chọn Google sheets API

image-12.png

Các bạn chọn vào và Enable

Các bạn chọn Credentials

image-13.png

image-14.png

  • Các bạn nhập tên service account name của project của bạn và chọn create and continue

các bạn chọn continue và done

  • Các bạn sẽ thấy 1 đường dẫn như hình các copy nó và để qua 1 bên sẽ dùng tới nó đấy và nhấp chọn vào đường link đó

  • Sau đó các bạn chọn ADD KEY và Create new key chọn JSON và nhấn nút create

  • Sẽ có 1 file được tạo ra và tự động tải về máy các bạn file có đuôi là json và mở trên vscode sẽ như thế này

  • và bây giờ chúng ta đã xong phần setup về service account để gọi api và bây giờ chúng ta sẽ tạo 1 bảng csdl. Các bạn truy cập vào link: https://docs.google.com/spreadsheets đăng nhập bằng google và tạo 1 bảng ghi

image-16.png

  • chọn vào bảng trống ở phía bên trái

bây giờ các bạn hãy nhập dữ liệu vào

image-17.png

  • ở đây mình sẽ demo trước chỉ 2 cột : 1 là tên video, 2 là đường dẫn tới url đó

  • Tiếp tục bây giờ chúng ta cần chia sẽ dữ liệu của bảng ghi với dịch vụ google api để khi chúng ta gọi api thì api sẽ chạy vào đúng bảng ghi mà ta lưu dữ liệu để lấy dữ liệu và cũng như thao tác CRUD. Các bạn click vào nút chia sẽ ở phía trên bên phải

  • lúc này là lúc đường link lúc ban đầu mình bảo các bạn lưu copy vào đây và chọn lưu.

  • Nếu không may các bạn không còn lưu thì đừng lo lắng hãy quay lại và chọn mục trong hình bên dưới sẽ có link

image-18.png

  • Oke thế là xong phần setup google sheet bây giờ bắt tay vào code thôi

  • Đầu tiên các bạn tạo mới 1 folder và đặt file .json ban đầu đã tải về bỏ vào thư mục mới tạo

  • và đổi tên lại creadentials.json mục đích dễ nhớ truy xuất dễ hơn thôi

  • tiếp theo các bạn mở terminal và chạy 1 số lệnh sau:

  • – npm init,

  • – npm install express ejs googleapis

  • – npm install -d nodemon

  • và các bạn tạo các thư mục như sau

image-19.png

  • thư mục view để dẫn tới giao diện cái này thì tùy nếu bạn chỉ làm api thôi thì k cần chỉ cần 1 file duy nhất là index.js

  • lưu ý các bạn kiểm tra xem file package.json của các bạn đã install đúng và đủ chưa nhé

  • đầu tiên ở file index.js chúng ta cần khai báo 1 số thư viện mà chúng ta cần dùng để gọi api

  • Chúng ta cần lấy id của sheet mà đã tạo, như hình bên dưới ở đường link phía sau ký tự d/ là 1 chuỗi mã chạy dài cho tới /edit thì đoạn mã đó chính là id của bảng ghi (sheet) của bạn bạn hãy copy nó và để nó ở 1 chỗ khác sẽ cần dùng đến trong lúc code đấy !!!

image-20.png

  • Và đây là code để gọi api từ google sheet thế là xong ^-^

  • Đây là 1 công nghệ khá là hay để có thể xây dựng phần back end và data cho 1 dự án.

  • tuy nhiên cái gì cũng sẽ có điển yếu của nó và nó có điểm yếu là bảo mật kém hơn các phương thức lưu trữ data khác. Nếu các bạn muốn có 1 data ở dạng mở mọi người có thể thấy không cần bảo mật thì đây đích thị là thứ bạn cần và đó là tất cả những gì mình muốn chia sẻ đến các bạn và đây là thành quả của chúng ta.

//index.ejs
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>Video Request</h1>
    <form action="" method="POST">
      <div>
        <label for="request">Request</label>
        <textarea name="request" id="request" cols="30" rows="10"></textarea>
      </div>
      <div>
        <label for="name">Name</label>
        <input type="text" id="name" name="name" />
      </div>
      <button type="submit">Submit</button>
    </form>
  </body>
</html>
const express = require("express");
const { google } = require("googleapis");

const app = express();
app.set("view engine", "ejs");
app.use(express.urlencoded({ extended: true }));
app.get("/", (req, res) => {
  res.render("index");
});

app.get("/api", async (req, res) => {
  const auth = new google.auth.GoogleAuth({
    keyFile: "credentials.json",
    scopes: "https://www.googleapis.com/auth/spreadsheets",
  });

  // kiểm tra client
  const client = await auth.getClient();

  // khai báo phiên bản gg sheets
  const googleSheets = google.sheets({ version: "v4", auth: client });
  // id của bản tính
  const spreadsheetId = "166eWNgR7uSmGDQ47nB1tPU-mrEW0h21wBjSFLnsq0Cw";

  // lấy tất cả thông tin
  const metaData = await googleSheets.spreadsheets.get({
    auth,
    spreadsheetId,
  });

  // lấy tất cả thông tin bảng tên Trang tính 1
  const getRows = await googleSheets.spreadsheets.values.get({
    auth,
    spreadsheetId,
    range: "Trang tính1!A:B",
  });

  res.send(getRows.data);
});

app.listen(1337, (req, res) => console.log("running on 1337"));

response

  • Các bạn có thắc mắc có thể liên hệ với email: danh@allxone.vn. Cảm ơn các bạn đã đọc bài viết xin cảm ơn

(Cựu học viên Ironhack Việt Nam)

 

Bạn đã sẵn sàng đổi thay sự nghiệp chưa?

Onschool Bootcamp tự hào chỉ trong 120 ngày, đào tạo thế hệ lập trình viên kiến tạo thế giới số - bắt đầu từ con số 0

Đừng quên chia sẻ bài viết này!

facebook
linkedin
x
copy
Sao chép link

Đăng ký tư vấn

Các Chương trình Đào tạo tại Onschool Bootcamp

Fullstack java web developer
Fullstack javascript (Nodejs & reactjs web developer
Fullstack Python web developer
Fullstack PHP web developer
Cross-Platform Mobile App Development
phonezalomessenger