您好！
===
# 開發環境
以下為主要使用的開發環境
## Node.js
javascript執行環境
:::success
[參考文件](https://ithelp.ithome.com.tw/articles/10191513)
:::
### nvm
可切換nodejs版本
有些專案是版本16或版本18
通常建議不要安裝到最新版本，有些套件會跟不上nodejs版本，而產生衝突。
:::success
[參考文件](https://ithelp.ithome.com.tw/articles/10340399)
:::
### npm
執行指令、安裝套件
套件可讓開發變容易，盡量使用下載數高且持續有在更新的套件。
比較有變化性的功能，如：輪播圖片，安裝套件會比較方便。
安裝套件時，可以盡量找下載量大，更新時間短的。
:::success
[參考文件](https://medium.com/@Hsu.Yang-Min/npm-node-package-manager-2e53c66f83bb)
[npm套件查找](https://www.npmjs.com/)
:::
## 前端
:::info
一般使用者操作的網站畫面，EX：官網
:::
:::danger
注意：
會有兩種呈現資料的方式
1. json：從後台拿到生成出的json，會由後台管理者修改或新增，EX：各文章內容
2. api：短時間內會持續更新，後台管理者無法控制，EX：文章的瀏覽次數
* 表單用api方式
:::
### React
:::success
[官方文件](https://react.dev/learn)
:::
* 分為class、functional，主要使用functional
* 使用TypeScript 增加程式碼的可讀性和可維護性
### Nextjs
react的其中一個框架
(先學習這個，主要使用此作為開發)
:::success
[官方文件](https://nextjs.tw/learn/foundations/about-nextjs)
:::
### Gatsby (新北投票網專用)
react的其中一個框架
(先學習上述的nextjs，這個可以擺最後面。)
:::success
[官方文件](https://www.gatsbyjs.cn/docs/recipes/)
:::
### 檔案說明
* `.env`：前後端都會有的，設定系統變數，EX：DB連線、第三方(google、line)參數
* `README.md`：前後端都會有的，專案說明，包含安裝、開發、測試步驟、注意事項，任何關於此專案補充說明也可以填入。
* `package.json`：管理套件、紀錄指令，忘記指令可以在這裡執行。
```json=
{
"scripts": {
"dev": "next dev -p 3006",
}
}
```
在終端機下：
```shell=
npm run dev
```
* 資料夾與作用：
```=
- api 傳遞至後端
- components 元件 EX：表單、欄位、頁籤等
- page 頁面、網站路徑
- provider 需要放在最上層的狀態、通常是回到頂端功能
- public 公用檔案外部可以訪問
- styles 共用css、系統css
- template 版面
- utils 小工具
```
### 建議
* 表單送出可以使用onSubmit，可以客製化表單需檢查欄位或送出的後續動作。
```javascript=
const handleSubmit = (e) => {
e.preventDefault();
...
}
<form onSubmit={handleSubmit}> </form>
```
* 預防DOM預設事件
* EX：`<a>`元素使用onclick做觸發事件，但`<a>`本身預設會跳轉頁面，避免預設事件的發生，加上`e.preventDefault()`。
```javascript=
const handleClick = (e) => {
e.preventDefault();
...
}
<a href="#" onClick={handleClick}></a>
```
* 小元件可以自己刻出來，像是loading的畫面，不複雜、各頁面或專案通用；過於複雜的可以找套件使用像是輪播圖片
## 後端
:::info
任何DB動作、接收前端表單、驗證資料
:::
### Express
nodejs的後端框架
:::success
[官方文件](https://expressjs.com/en/starter/installing.html)
:::
### 檔案說明
* `.env`：前後端都會有的，設定系統變數，EX：DB連線、第三方(google、line)參數
* `README.md`：前後端都會有的，專案說明，包含安裝、開發、測試步驟、注意事項，任何關於此專案補充說明也可以填入。
* `package.json`：管理套件、紀錄指令，忘記指令可以在這裡執行。
```json=
{
"scripts": {
"dev": "next dev -p 3006",
}
}
```
在終端機下：
```shell=
npm run dev
```
:::danger
注意：
1. 敏感資料存入DB都需要做加密，EX：身分證、電子郵件、地址、電話
2. README.md要寫每個api的規劃，方便前端知道要傳遞什麼body、header、Type；有任何欄位變動要跟前端溝通，避免前後不一。
:::
* api的規劃範例：
### 流程
大致的流程
1. 檢查傳遞格式
2. 檢查欄位型態、是否存在值
3. 回傳資料
資料夾與作用：
```=
- controller 每個api分配功能的地方
- route 每個api的進入點
- middleware 檢查格式、防呆(有效時間內、)
- services 處理資料的邏輯
- model 資料表
- repository 取資料的地方
- utils 小工具，例如polyfill
```
## 後台
:::info
網站擁有者上稿、網站設定
EX：新增最新消息內容
需生成json檔給前端使用
:::
用Next.js方式
與前端相似
但使用pages/api作為表單api
:::success
[官方文件](https://nextjs.org/docs/pages/building-your-application/routing/api-routes)
:::
## MySQL資料庫
[MySQL]
1. 資料表命名與欄位命名為一律小寫，用底線連結，例：member_message
2. 資料表命名需多加efa_以做為公司專案辨識
3. 設計資料表前先畫 ERD圖，可幫助瞭解資料間的關係
4. 資料表所有欄位都需寫中文註解，包含資料表本身
5. 所有欄位都需給預設值，依照資料量多寡給予合適的資料型態，並加上索引值
http://n.sfs.tw/content/index/10266
6. 承上，若數字型態不會使用到負值，則用unsigned
7. 資料庫引擎使用InnoDB，編碼使用utf8mb4_unicode_ci；若資料表需有大量資料要篩選，資料庫引擎可考慮用MyISAM或Memory
8. 資料庫管理工具，可使用 phpMyAdmin 或 adminer.php
# 可安裝軟體
:::danger
注意：不得安裝大陸出品或破解版軟體。
:::
## Git、TortoiseGit
任何專案都使用git來控制管理
1. `git clone` 取得專案到自己電腦
2. `git pull` 更新有專案內容
3. `git add` 選擇推送內容
4. `git commit` 寫該版本資訊
5. `git push` 推送自己更動的內容
:::danger
注意：建議先pull再push，避免已經有人先推送，而發生衝突。
:::
## Putty
可連線到遠端伺服器
## Vscode
code編輯器 (可依個人習慣安裝自己熟悉的編輯器)
推薦安裝的擴充套件：
1. `Codeium` 幫助編寫程式的AI工具(必裝)
2. `ESLint` 提高前端程式碼品質
3. `Prettier` 自動格式化程式碼
4. `Live Sass Compiler` 編譯scss
5. `Auto Rename Tag` 自動修改成對的Tag
6. `Bookmarks` 快速跳至書籤位置
7. `Playwright` 自動化測試工具
## Postman
測試API的工具
# coding習慣
1. 盡量打上註解，以便未來的維護
2. 用自動排版，好閱讀，在vscode用 shift + ctrl + f，可以自動排版。
3. 處理重要邏輯請加try-catch ，並把錯誤拋出寫入log檔中，之後要debug才會比較方便。
4. 可以嘗試先寫註解再寫程式碼：先把邏輯流程寫出來，再填入程式碼，可以更清楚看懂整個架構。
5. HTML / Javascript / CSS 的註解是可被任何人看到，所以請斟酌填寫重要資訊。
# 其他
1. 更新到測試站或正式站上時先自己測過一次，然後再請測試人員或PM測試。
2. 有任何資料表的異動一定要記下SQL語法，之後要更新到測試站和正式站上時比較方便。
3. 有學到新的東西一定要做筆記紀錄起來，用資料夾或檔案分門別類，方便以後可以快速找到
4. 可複製的程式碼或指令就盡量用"複製、貼上"，因為自己手打出錯的機率會較高。
5. 個人資料一定要定時做異地備份(雲端或NASA上)，正在開發中的專案程式碼和資料庫可備份到公司NASA上
6. 學習研究若要發表至個人部落格上或網上發問，請移除跟公司、專案相關文字，因政府專案都會簽保密條款，以免有爭議。
7. 程式撰寫或資料庫設計不要求寫得非常精美或高深，需考慮開發成本、維護成本等因素，可以讓人看得懂、可方便維護才是比較重要的。
8. 資料夾都是以小寫命名(EX：user)，檔案用駝峰式名命(動詞小寫，名詞大寫，EX：creatUser)。
:::info
有任何問題都可以詢問喔！
:::
來玩看看吧
===
:::danger
以下都需要用react next.js的環境
:::
# TimeLine
畫面可以引用此：
https://codepen.io/itbruno/pen/KwarLp
需求：
1. 畫面進來只會看到每個timeline的標題，描述不顯示
2. 點擊該timeline標題，顯示出該timeline的描述
3. 再點一下，將其收合
進階：
1. 只能出現一個描述，EX：點擊time1標題，出現time1描述；點擊time2，出現time2的描述，但time1的描述必須收起來。
# input select
需求：
1. 兩個 input select
2. 第一個select將會控制第二個select顯示什麼
3. EX：選擇select_1 value=第二個，select_2只能顯示cate=2的選項
注意：select_1的id對應select_2的cate
```javascript=
const select_1 = [
{ id: 1, value: "第一個" },
{ id: 2, value: "第二個" },
{ id: 3, value: "第三個" },
]
const select_2 = [
{ id: 1, cate: 1, value: "第一個的子選項1" },
{ id: 2, cate: 1, value: "第一個的子選項2" },
{ id: 3, cate: 1, value: "第一個的子選項3" },
{ id: 4, cate: 2, value: "第二個的子選項1" },
{ id: 5, cate: 2, value: "第二個的子選項2" },
{ id: 6, cate: 3, value: "第三個的子選項1" },
]
```
# postman
請嘗試用postman方式回傳資料給next.js 的 pages/api
能在postman接收到 pages/api return的資料就可以了
# DB
嘗試在本機建立mysql，讓next.js連上，與可以顯示DB裡table資料
可以用xampp建立mysql。
以後會是先用自己的本機環境測試，再上傳到測試站再次測試
# jquery套件
可參考以下畫面
https://codepen.io/Rowno/pen/kvLQex
1. 安裝jquery套件 (可以自己選擇好用的套件)
2. 用套件實現圖片輪播
3. 需要可以自動撥放
Sign in with Wallet
Connect another wallet