Mirochiu's coding note

 這裡是serviceaccount的json放在環境變數中，並googleapis套件操作google sheet api。 因為新版google auth套件有改版把fromJSON()和給廢掉，導致升級版本程式要調整，跟google&AI弄了弄，範例都給我奇怪的結果，這篇把這些整理起來 pnpm add googleapis import { google , sheets_v4 } from 'googleapis' ; async function main ( ... args : string []) { const credentials = JSON . parse (process. env . SHEET_CREDENTIALS ); const authClient = new google . auth . JWT ({ scopes : [ 'https://www.googleapis.com/auth/spreadsheets' ] }) authClient . fromJSON ( credentials ); const sheetAPIs = google . sheets ({ version : 'v4' , auth : authClient }); const res = await sheetAPIs . spreadsheets . get ({ spreadsheetId : process. env . SHEET_ID }); if ( ! res . ok ) throw Error(`http error code:${ res . status }`); console . log ( res . data ) } const args = process . argv . slice ( 2 ); main ( ... args ). catch ( console . error ); scopes上面是提供讀寫 如果只讀取，就改成 scopes: ['https://www.go...

在原始碼最上層建立檔案 env.d.ts 寫入以下相關, 其他所需的變數請自行舉一反三增加 declare namespace NodeJS { interface ProcessEnv { /** * App 執行環境 * - development: 開發環境 * - production: 正式環境 * - test: 測試環境 */ NODE_ENV : 'development' | 'production' | 'test' ; /** 僅伺服器端 */ PRODUCT_SHEET_CREDENTIALS : string ; PRODUCT_SHEET_ID : string ; STORAGE_CREDENTIALS : string ; STORAGE_BUCKET_NAME : string ; /** 公開給前端 */ NEXT_PUBLIC_FIREBASE_SDK_CONFIGS : string ; NEXT_PUBLIC_API_URL : string ; } }  

pnpm init pnpm add -D typescript @types/node src/index.ts async function main ( ... args : string []) { console . debug ( 'process.env.NODE_ENV=' , process . env . NODE_ENV ) console . debug ( 'process.env.STORAGE_BUCKET_NAME=' , process . env . STORAGE_BUCKET_NAME ) } const args = process . argv . slice ( 2 ); main ( ... args ). catch ( console . error ); package.json "type" : "commonjs" , "scripts" : { "build" : "tsc" , "dev" : "pnpm run build && node --env-file=.env.development.local ." , "start" : "pnpm run build && node --env-file=.env.production.local ." }, tsconfig.json "compilerOptions" : { "module" : "CommonJS" , "moduleResolution" : "Node" , "outDir" : "dist" , "rootDir" : "src" 這個設定的優點是import不需要寫.js, 缺點就是沒有top-...

使用URL的參數(URL parameter)來顯示訊息是一種方便的作法。在SPA中也能使用，不需要有後端server的幫助。 這裡整理React.js和Next.js中用URL parameter來顯示訊息的方法，由於Next.js App router，這裡會都演示一次。

這裡使用範例MUI本身示範例，因為有時寫一寫會忘記一些步驟，乾脆就會整成一篇。以下整理成10點內容 1. 使用範例專案 pnpm create next-app {你喜歡的專案目錄名稱} --example https://github.com/mui/material-ui/tree/master/examples/material-ui-nextjs-ts 這裡使用MUI官方提供的Next.js的typescript範例，程式碼 請參考這裡 使用到的主要技術堆疊如下 a. MUI v5  b. Next.js v14 - App router c. typescript v5

這篇是受Tapas Adhikary所寫的 How to create a countdown timer using React Hooks 啟發 將它改成typescript和MUI的版本，並調整成自身使用的元件，並修改了 1. 使用  padStart()   處理時顯示分秒的雙位數字 2. 倒數30分鐘時會改變倒數時間成紅色 3. 避免顯示出NaN的狀況

筆記:手動初始化node.js使用typescript  步驟1. 建立資料夾 建立你喜歡的資料夾作為專案目錄，並進入目錄中 步驟2. 初始化 npm init 初始化node.js專案檔案package.json 步驟3. 安裝套件 npm install typescript @types/node --save-dev 安裝typescript套件到node_modules並生成package-lock.json 步驟4. 初始化tsc npx tsc --init 生成tsconfig.json 步驟5. 設定tsc 修改tsconfig.json "outDir": "dist",   "rootDir": "./src", tsc輸出結果到dis目錄，程式碼目錄則是在src 步驟6.寫你的ts程式 index.ts console.log('hello world'); 步驟7. 設定預設執行指令 修改package.json加入start指令 "scripts": {   "start": "tsc && node dist/index.js" }, 步驟8. 跑起來 npm run start