[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-gasgoogle-app-script上實作-vue3-的網頁部署":3},{"id":4,"slug":5,"title":6,"description":7,"content":8,"date":9,"image":10,"imageAlt":6,"author":11,"categories":14,"path":19,"minRead":20},3543,"gasgoogle-app-script上實作-vue3-的網頁部署","GAS(google app script)上實作 vue3 的網頁部署","GAS(google app script)上實作 vue3 的網頁部署 GAS(google app scr […]","\u003Ch1>GAS(google app script)上實作 vue3 的網頁部署\u003C\u002Fh1>\n\u003Cp>GAS(google app script) 是 google 服務提供的腳本平台，最廣為熟知的就是可以透過 script 將 google sheet 擴充許多自動化功能，甚至可以部署網頁等。若有興趣可以查查看，可以多查查看，如果你有大量的 google 相依服務，就能考慮使用 GAS 提供工作效率。\u003C\u002Fp>\n\u003Cp>這次的需求就是將 google sheet 當作是簡易資料表，然後輸出到 GAS 的網頁做檢視，考慮到未來可能的擴充性，決定導入 Vue3 的 CDN 版本來實作。\u003C\u002Fp>\n\u003Ch2>啟用 GAS(google app script)\u003C\u002Fh2>\n\u003Cp>首先就是啟用 GAS ，這邊就不特別教學，請參考原本的\u003Ca href=\"https:\u002F\u002Fwww.google.com\u002Fscript\u002Fstart\u002F\" title=\"教學\">教學\u003C\u002Fa>。\u003C\u002Fp>\n\u003Ch2>部署網頁\u003C\u002Fh2>\n\u003Cp>首先新增一個網頁，我取名為 output.html 。\u003Cbr \u002F>\n\u003Cimg decoding=\"async\" src=\"\u002Fapi\u002Fproxy-image?url=https%3A%2F%2Fpost.billxu.net%2Fwp-content%2Fuploads%2F2023%2F10%2F%E6%88%AA%E5%9C%96-2023-10-01-%E4%B8%8B%E5%8D%8810.02.10-300x204.png\" alt=\"\" \u002F>\u003Cbr \u002F>\n再來新增一個 code.gs 。*.gs 是 GAS中專用的 script 副檔名。\u003Cbr \u002F>\n\u003Cimg decoding=\"async\" src=\"\u002Fapi\u002Fproxy-image?url=https%3A%2F%2Fpost.billxu.net%2Fwp-content%2Fuploads%2F2023%2F10%2F%E6%88%AA%E5%9C%96-2023-10-01-%E4%B8%8B%E5%8D%8810.03.41-300x237.png\" alt=\"\" \u002F>\u003C\u002Fp>\n\u003Cp>在 code.gs 中加上以下程式碼。\u003C\u002Fp>\n\u003Cpre>\u003Ccode>function doGet(){\n    let template = HtmlService.createTemplateFromFile('output');\n    let dataObj = {};\n    template.data = dataObj;\n    return template.evaluate().setTitle("Vuejs Demo");\n}\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cem>HtmlService\u003C\u002Fem> 是 GAS 中建立網頁的函式，這樣就能將資料輸出至 output.html ，並且設定標題 \u003Cem>Vuejs Demo\u003C\u002Fem> 。一定要取名為doGet\u003Cbr \u002F>\n並且能把名為 dataObj 的物件丟到該文檔中。\u003C\u002Fp>\n\u003Cp>output.html 這隻檔案則就加入一般的 html 文件，例如\u003C\u002Fp>\n\u003Cpre>\u003Ccode>\u003C!DOCTYPE html>\n\u003Chtml>\n  \u003Chead>\n  ...\n  \u003C\u002Fhead>\n  \u003Cbody>\n  ...\n  \u003C\u002Fbody>\n\u003C\u002Fhtml>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch2>引入 Vue3\u003C\u002Fh2>\n\u003Cp>接下來就是建立 Vue3 的環境。我們使用 CDN 引入，可以直接像這樣\u003C\u002Fp>\n\u003Cpre>\u003Ccode><html>\n  <head>\n    <script src="https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fvue@3.2.1\u002Fdist\u002Fvue.global.js"><\u002Fscript>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>接著要宣告 Vue 實體，為了方便管理我另外開了一隻檔案 app-js.html\u003Cbr \u002F>\n\u003Cimg decoding=\"async\" src=\"\u002Fapi\u002Fproxy-image?url=https%3A%2F%2Fpost.billxu.net%2Fwp-content%2Fuploads%2F2023%2F10%2F%E6%88%AA%E5%9C%96-2023-10-01-%E4%B8%8B%E5%8D%8810.13.03-300x264.png\" alt=\"\" \u002F>\u003Cbr \u002F>\n裡面其實就是宣告建立 Vue\u003C\u002Fp>\n\u003Cpre>\u003Ccode><script>\n\n    const { createApp, ref } = Vue\n\n    const app = createApp({\n      components: {  },\n      data() {\n        return {\n\n        }\n      },\n      watch:{\n\n      },\n      methods: {\n\n      },\n      created: function(){\n\n    });\n    app.mount("#app");\n\n  <\u002Fscript>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>然後記得 output.html 需要預留一個可以建立 Vue 的位置，並且還要引入剛剛那隻 app-js.html\u003C\u002Fp>\n\u003Cpre>\u003Ccode><body>\n<div class="" id="app">\n....\n\n    <?!= include('app-js'); ?>\n<\u002Fbody>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>這樣就快完成了，只需要部署就可以使用囉～\u003C\u002Fp>\n\u003Ch2>取用資料\u003C\u002Fh2>\n\u003Cp>如果需要取用 google sheet 內的資料，則需要在 code.gs 中另外使用函式與資料表溝通。以下為範例。\u003C\u002Fp>\n\u003Cpre>\u003Ccode>function doGet(){\n    let template = HtmlService.createTemplateFromFile('output');\n    let dataObj = {};\n    dataObj.Data = getDB(); \u002F\u002F 這是取得資料的函式\n    template.data = dataObj;\n    return template.evaluate().setTitle("Vuejs and SpreadSheet Demo").setSandboxMode(HtmlService.SandboxMode.IFRAME);\n}\n\nfunction getDB(){\n    const activeSheet = SpreadsheetApp.getActiveSheet();\n    let dataItems = activeSheet.getDataRange().getValues().slice(1);\n    return dataItems;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>這是最簡單的寫法， SpreadsheetApp 就是使用 GAS 跟 google sheet 溝通，有興趣就詳見 GAS 的各種應用。\u003C\u002Fp>\n\u003Ch2>部署\u003C\u002Fh2>\n\u003Cp>在 GAS 的管理介面中，右上角可以看到部署的按鈕。如果開發時可以使用「測試部署作業」，如果是正式使用則要「新增部署作業」，兩者差異在於「測試部署作業」會給予一個....\u002Fdev結尾的位置，並且每次修改儲存後會立即生效，「新增部署作業」的話會以該次程式碼版本部署，會給予一個....\u002Fexec的位置，但記得程式碼修改後不會立即生效，要使用每次部署後取得的位置才有用。\u003Cimg decoding=\"async\" src=\"\u002Fapi\u002Fproxy-image?url=https%3A%2F%2Fpost.billxu.net%2Fwp-content%2Fuploads%2F2023%2F10%2F%E6%88%AA%E5%9C%96-2023-10-01-%E4%B8%8B%E5%8D%8810.19.34-297x300.png\" alt=\"\" \u002F>\u003C\u002Fp>\n","2023-10-02T10:26:52","\u002Fapi\u002Fproxy-image?url=https%3A%2F%2Fpost.billxu.net%2Fwp-content%2Fuploads%2F2022%2F11%2F256px-Vue.js_Logo_2.svg_.png",{"name":12,"link":13},"Chih Fan","http:\u002F\u002Fpost.billxu.net",[15,17],{"name":16,"slug":16},"frontend",{"name":18,"slug":18},"vue","\u002Fblog\u002Fgasgoogle-app-script上實作-vue3-的網頁部署",2]