Board logo

標題: [教學] 用 ChromeOS/Linux 開發 Google Apps Script WebApp 不用起 server 續篇 [打印本頁]
作者: javacomhk    時間: 2022-5-16 19:53     標題: 用 ChromeOS/Linux 開發 Google Apps Script WebApp 不用起 server 續篇

本帖最後由 javacomhk 於 2022-5-19 17:48 編輯

請首先參考這篇怎樣設定 React.js + Bootstrap 開發 Cloud 嘅 WebApp 教學，而現在呢一續篇是延續上一篇去講解 Google Apps Script WebApp 最精彩及重要的 backend 功能，就係可儲存及讀取在 Google Spreadsheet 嘅 data。與及在儲存 Spreadsheet data 後立即用 Gmail 服務去觸發 sendMail 功能。

(D) 第四部份，使用 React.js + Bootstrap 增加 Input Form 及 Validation Rules 另外修改網頁去顯示 Google Spreadsheet data。

(D1) 修改以下文件 ~/webappreact/src/App.js 內容為
  1. import { Routes, Route } from "react-router-dom"
  2. import Home from "./components/Home"
  3. import About from "./components/About"
  4. import Data from "./components/Data"
  5. import FormInput from "./components/FormInput"
  6. import Nav from "./components/Nav"

  8. function App() {
  9.   return <>
  10.       <Nav />
  11.       <Routes>
  12.         <Route path="/" element={<Home />} />
  13.         <Route path="/about" element={<About />} />
  14.         <Route path="/data" element={<Data />} />
  15.         <Route path="/form" element={<FormInput />} />
  16.         <Route path="*" element={<Home />} />
  17.       </Routes>
  18.     </>
  19. }
  20. export default App
複製代碼
(D2) 修改以下文件 ~/webappreact/src/components/Nav.js 內容為
  1. import { Link } from "react-router-dom"

  3. function Nav() {
  4.   return <>
  5.         <span className="css-nav"><Link to="/">Home</Link></span>
  6.         <span className="css-nav"><Link to="about">About</Link></span>
  7.         <span className="css-nav"><Link to="data">Data</Link></span>
  8.         <span className="css-nav"><Link to="form">Form</Link></span>
  9.   </>
  10. }

  12. export default Nav
複製代碼
(D3) 修改以下文件 ~/webappreact/src/components/Data.js 內容為
  1. import React, {useState, useEffect} from "react"
  2. import {Container, Table} from "react-bootstrap";

  4. function Data() {
  5.   const [jsonResults,setJsonResults] = useState(null)
  6.   const [data,setData] = useState(null)
  7.   const [loading, setLoading] = useState(false)
  8.   if (typeof google === 'object') {
  9.     useEffect(()=>{
  10.       setLoading(true)
  11.       google.script.run.withSuccessHandler(response => {
  12.         console.log(response)
  13.         const [...values] = JSON.parse(response);
  14.         const keys = ["firstname","lastname","country","email","date"];
  15.         const objects = values.map(array => array.reduce((a, v, i) => ({...a, [keys[i]]: v}), {}));
  16.         console.log(objects);
  17.         setData([...objects])
  18.         setLoading(false);
  19.       }).withFailureHandler(er => {
  20.         alert(er)
  21.       }).getSpreadData();
  22.     },[])
  23.   }
  24.   else {
  25.     return <>
  26.       <Container>
  27.       <div style={{"height": "30px"}}/>
  28.       <h1 className="h1">Test getData from localhost</h1>
  29.       <Table striped bordered hover>
  30.         <thead>
  31.           <tr>
  32.             <th>#</th>
  33.             <th>First Name</th>
  34.             <th>Last Name</th>
  35.             <th>Creation Date</th>
  36.           </tr>
  37.         </thead>
  38.         <tbody>
  39.           <tr>
  40.             <td>1</td>
  41.             <td>FirstName 1</td>
  42.             <td>LastName 1</td>
  43.             <td>20220516</td>
  44.           </tr>
  45.           <tr>
  46.             <td>2</td>
  47.             <td>FirstName 2</td>
  48.             <td>LastName 2</td>
  49.             <td>20220517</td>
  50.           </tr>
  51.         </tbody>
  52.       </Table>
  53.       </Container>
  54.     </>
  55.   }
  56.   if (loading) return <h1>loading...</h1>
  57.   if (!data) return null;
  58.   console.log(JSON.stringify(data))
  59.   return <>
  60.     <Container>
  61.     <div style={{"height": "30px"}}/>
  62.     <h1 className="h1">getData from Google SpreadSheet</h1>
  63.     <Table striped bordered hover>
  64.       <thead>
  65.         <tr>
  66.           <th>#</th>
  67.           <th>First Name</th>
  68.           <th>Last Name</th>
  69.           <th>Creation Date</th>
  70.         </tr>
  71.       </thead>
  72.       <tbody>
  73.         { data.map((row, index) => (
  74.           <tr key={index}>
  75.             <td>{index}</td>
  76.             <td>{row.firstname}</td>
  77.             <td>{row.lastname}</td>
  78.             <td>{row.date}</td>
  79.           </tr>
  80.           ))
  81.         }
  82.       </tbody>
  83.     </Table>
  84.     </Container>
  85.   </>
  86. }

  88. export default Data
複製代碼
(D4) 修改以下文件 ~/webappreact/src/apps-script/main.js 內容為
  1. function doGet() {
  2.   return HtmlService.createTemplateFromFile("index")
  3.   .evaluate()
  4.   .addMetaTag("viewport","width=device-width, initial-scale=1.0")
  5. }

  7. function getData() {
  8.   console.log("getData()")
  9.   return (
  10.     [{
  11.       "key": "apple",
  12.       "value": "green"
  13.      },
  14.      {   
  15.      "key": "banana",
  16.      "value": "yellow"
  17.      }]
  18.   );
  19. }

  21. function getSpreadData() {
  22.   const data = SpreadsheetApp
  23.       .getActiveSpreadsheet()
  24.       .getActiveSheet()
  25.       .getDataRange()
  26.       .getValues();
  27.   console.log("getSpreadData() "+ JSON.stringify(data))

  29.   return JSON.stringify(data)
  30. }

  32. function AddRecord(firstname, lastname, country, email) {
  33.   console.log("AddRecord() "+ email)
  34.   var webAppSheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  35.   const datestr = (new Date().toLocaleString('sv',{timeZone: 'Asia/Hong_Kong'})).slice(0, 19).replace(/-/g, "").replace(/:/g, "").replace("T", " ");
  36.   webAppSheet.appendRow([firstname, lastname, country, email, datestr]);
  37.   // sendEmailfromdoc(firstname, lastname, email);
  38. }

  40. function sendEmailfromdoc(firstname, lastname, email){
  41.   // fill in google doc ID here
  42.   var id = 'FILL-IN-GOOGLE-DOC-ID-HERE' ;
  43.   var forDriveScope = DriveApp.getStorageUsed(); //needed to get Drive Scope requested
  44.   var url = "https://docs.google.com/feeds/download/documents/export/Export?id="+id+"&exportFormat=html";
  45.   var param = {
  46.     method      : "get",
  47.     headers     : {"Authorization": "Bearer " + ScriptApp.getOAuthToken()},
  48.     muteHttpExceptions:true,
  49.   };
  50.   var html = UrlFetchApp.fetch(url,param).getContentText();
  51. // email send out with replaced fields
  52.   var htmlout1 = html.replace("{{title_1}}","Welcome to join our Newsletter subscription");
  53.   htmlout1 = htmlout1.replace("{{heading_1}}","Dear "+ firstname +" "+lastname);
  54.   htmlout1 = htmlout1.replace("{{heading_2}}","You have subscribed our Newsletter successfully.");
  55. //  Logger.log(htmlout1);
  56.   MailApp.sendEmail({
  57.     to: email,
  58.     subject: "Newsletter Registration",
  59.     htmlBody: htmlout1
  60.     });
  61.   console.log('email sent to '+ email + ' !!')
  62. }
複製代碼
(D5) 新增以下文件 ~/webappreact/src/components/FormInput.js 內容為
  1. 上傳在 … https://pastebin.com/nFWTgrdz
複製代碼
(D6)新增及修改完 Code 後可根據上一篇的(B8)的方法執行 npm run build 及 npm run start 後在 localhost 測試

(D7) 新增及修改完 Code 後可根據上一篇的(B9) 的方法執行 npm run build 及 npm run gpush 後預備在 Google WebApp 測試，接著便可用 Browser 打入Test Development 的Web URL 去測試 Input Form，今次主要測試Form 內的 Registration Form Input，成功後如下截圖。
[attach]2320492[/attach][attach]2320493[/attach]



(E) 第五部份，製作 email template 及修改 Google Apps Script Code 去測試 Gmail 服務

(E1) 用 Chrome Browser在 drive.google.com 新增一個 Google doc 作為 email template ，內容如下圖，具備有 {{title_1}}  {{heading_1}}   {{heading_2}}  等字串及或附加任何圖片或文字格式。


(E2) 在 Browser 網址欄中取得當時這個 Google doc 的 ID 字串(如下圖)。

(E3) 將這個 ID 貼在 ~/webappreact/src/apps-script/main.js 檔的相應位置(如下圖)及同時 uncomment (即去除最開頭嘅 // 字符) 這句 sendEmailfromdoc 代碼讓 input form save data 後隨即執行 sendMail 功能。

[attach]2320497[/attach]

[attach]2320496[/attach]


(E4) 修改完 Code 後可根據上一篇的(B9) 方法執行 npm run build 及 npm run gpush 後預備在 Google WebApp 測試。

(E5) Browser 在 drive.google.com 打開 React Test Project ，進入 Apps Script Editor 透過執行任何 function 例如 getData() ，便會激發要求去授權取得 Authorisation token 讀取 Google doc 及可以去 send mail 。

(E6) 接著便可使用 Test Development 的 Web URL 去測試 Input Form 內輸入你自己的電郵地址去登記，看看是否可以收到郵件如下截圖。
[attach]2320491[/attach]
作者: javacomhk    時間: 2022-5-16 20:22

本帖最後由 javacomhk 於 2022-5-19 17:35 編輯

留位
作者: javacomhk    時間: 2022-5-17 03:07

本帖最後由 javacomhk 於 2022-5-19 17:36 編輯

留位




歡迎光臨 電腦領域 HKEPC Hardware (https://www.hkepc.com/forum/) Powered by Discuz! 7.2