---
title: Google Sheet 串接前端資料視覺化
type: slide
---

## 試算表串接前端資料視覺化
透過 Google Sheet

---

## 環境介紹

----

### Glitch.com
- 一個線上的全端網頁開發平臺
- 不用麻煩地在自己電腦安裝環境

---

## 進入開發

----

### 目標
製作一個以 Google 試算表為資料庫的前端網頁
- 總覽圓餅圖
- 個別說明卡片

----

### 成果預覽
[Code](https://glitch.com/edit/#!/project-dashboard)
[Demo](https://project-dashboard.glitch.me/)

---

### 前置準備
- Glitch Remix

---

### 資料庫（？）
#### Google 試算表

----

### 資料表格建立
- 新增一個試算表
- 第一列為標題
- 接下來各列輸入對應值
- 公開試算表唯讀權限

----

#### 小提示
記得試算表網址的參數，等等會用到

---

### 前端

---

### 主要架構
- Vue.js
- SFC
- Tailwind CSS
- 檔案
- `index.html`：主頁面
- `Card.vue`：Vue SFC 卡片元件

----

### Vue.js
- 一個前端的 Javascript 開發框架
- 特色是 `{{}}` 跟 HTML 標籤屬性綁定

----

- `createApp()`：初始化 Vue
- `data()`：變數資料與初始值
- `methods:{}`：可用來給 Vue 執行的函數們
- `index.html` 的 `{{ 變數名 }}`
- 對應到 `data()` 裡的名稱

----

### Vue SFC
- 單一元件檔
- 用來創造可重複使用的元件
- 檔案內容類似於網頁，但無法獨立瀏覽

---

### Tailwind CSS
功能優先（utility-first）導向的 CSS 框架

----

標籤中的 `class` 即對應特定 CSS 屬性
`font-<weight>`： 文字粗細
`font-<size>`： 文字大小
`text-<color>`：文字顏色
`bg-<color>`：背景顏色

----

卡片樣式

<template>
    <div class="container p-px mx-auto h-full">
        <div :class="statusObj" class="border-t-8 w-4/5 bg-white mx-auto mt-4 border-gray-100 shadow p-5 rounded-md">
            <h2 class="font-medium text-2xl mb-2">{{name}}</h2>
            <div v-if="pDescription">
                <div v-for="description in descriptions">
                    <p>{{description}}</p>
                </div>
            </div>
            <div v-else>
                <p>{{status}}</p>
            </div>
        </div>
    </div>
</template>

----

### 小練習
製作屬於自己的卡片樣式

---

### 資料串接

----

### 思路
如何從試算表轉換成前端容易讀取的格式

----

### 擷取資料的關鍵
#### Google 資料查詢語句
- ~~神奇魔法~~
- Google Visualization API

----

### `fetchData()`
- `id`：試算表編號
- `gid`：分頁（Tab）編號

----

### 小練習
修改對應變數至試算表

---

### 小提醒
- 匿名的 Glitch 專案會在五天後清除
- 登入可以永久存檔

---

## END

<style>
:root {
--r-background-color: #0a2f0f;
--r-main-color: #8892b0;
--r-heading-color: #ccd6f6;
--r-link-color: #63ffb4;
--r-link-color-hover: rgb(150,255,200);
}
</style>