# Mike 週活動紀錄 #
tags: `活動紀錄`
## ==20231226== ##
#### 逢甲: 純前端 ####
預計要接我課程的是Stan，加油加油！
==**更新**==
因為公文還沒下來，所以12/28的下午、12/29兩天還是我上課。
所以要交接的應該會改成我上到哪了。
我預計會先講vue的安裝，下面你看到的課程。
==**更新結束**==
下面是預計會講到的東西，時間上你要再統整一下看要花多久講完(真心覺得分配是最難的)。
Vue語法已經講過一輪了
由於已經提前講過vue介紹，以及使用過vue的cdn做一些例子了，也有使用到以下功能:
1.v-if 系列
2.v-bind
3.v-for 系列
4.v-show
接下來就直接講如何建立一個vue專案，可以搭配github複習一下記憶。
**1.為了npm,先安裝node.js (要解釋node.js嗎?)**
**2.安裝vue**
這是我自己的選擇。
```sh
#安裝vue
npm create vue@latest
#可以提示從readme檔案中看到能使用的指令
npm run dev
```
~~這邊開始就有些分歧了，看有沒有要順便帶tailwind。~~
==**改變想法了**==
應該先把vue專案介紹完再回頭講tailwind比較合理跟連貫。
==**先講vue**==
可以介紹一下資料夾。
public: 公開資源可以存這。
src: 你的資源、網頁、JS都放在這。
然後看主頁、router。
解釋為甚麼要設定主頁(App.vue)中插入其他來自Views的頁面。
不外乎是每頁都要設定header跟footer會 ==**很難管理**==，用插入的方式就不用每頁都複製貼上
後期要改也方便。
==**tailwind放後手**==
==1.選框架導覽==
==2.vue是採vite，選vite (看看怎麼介紹vite跟webpack或者丟給未來的自己)==
==3.指令前兩個就是安裝vue，已經安裝了就略過吧。==
選Using Vue
==4.如果略過了上面的指令，請記得你接下來的步驟還是要在vue的資料夾底下運行喔。==
2、3、4步驟都照做即完成安裝tailwind。
接下來就可以在vue中使用tailwind啦。
==tailwind介紹==
1.輕量化。
透過tailwind.config.js檔案可以設定偵測那些檔案進行編譯，會找出裡面符合tailwind語法的class加入到css中來實現，意即你寫甚麼就放入甚麼，不像bootstrap一次就是一大包。
2.使用方便。
寫起來輕鬆之餘，還能透過tailwind.config.js自己設定一些預設值來幫助自己快速開發，不只顏色或px，連RWD都可以設定。
請記得動過tailwind.config.js之後要重跑npm run dev。
#### 中興: 含後端 ####
不知道誰會接，也是加油加油！
## ==20231220== ##
#### 教育用伺服器 ####
每周進度: Kaz表示中立，沒有說服他Z>B。
也不知道這個進度到底...還能繼續嗎:sweat_smile:?
#### 修專案 ####
- 沒幫上忙的
stan遇上pdf上傳失效的問題。
一個可上傳圖片或者pdf檔案的功能(依據選取的檔案)。我建議能用分析出來的字串去辨認檔案是哪一種。但後來想想也不需要fileReader就應當能從value知道使用者上傳的是甚麼檔案。但就算如此，stan將pdf檔案送出時，送到後台的資料就會==整包**平空消失**==，真奇妙。
去查以前的專案就沒這個問題，不確定是漏了甚麼，要再問stan。
==補充==:
- 更新資料的情況時方法會選用PUT，但是要確保只能在沒有檔案要上傳時候使用。如果有檔案要上傳那你只能選擇POST。PUT不會帶上上傳的檔案，導致你後臺接不到東西，==你只會拿到null==。
- 圖片是因為有先轉成base64字串送到後台才又重新轉回圖片儲存，並不是直接帶著圖片送到後台，所以PUT才能通過。
對我來說，這件事真的超容易忘的:nauseated_face:。但我有個問題...是laravel中才會這樣還是...?
在inertia.js文件提到的laravel中PUT及PATCH不支援檔案上傳。
你需要使用像blade一樣的使用方法，在form中增加"_method"欄位，值為"PUT"或"PATCH"來"欺騙"form的方法。:sweat:
- 有幫上忙的
stan要我幫他把報名中的活動能夠繼續新增加購，但舊的依舊不能改任何資料。所以我在新增加購時加上了new這一屬性，傳到後台後，後台php利用property_exists辨識資料裡有們沒有new的屬性，
## ==20231213== ##
#### 教育用伺服器 ####
每周進度: 目前正在詢問Kaz關於教育用伺服器如何處理？
需要教育用伺服器的理由:
1. 會讓之後得商案不管部屬或是測試時處理速度變慢
2. 有特別為了商案調整伺服器的設定，有不確定因素可能會導致專案測試出BUG
反饋:
1. 這個取決於主機容納跟效率，只要專案一多，就算不是教育案也會一樣吧
2. 要求學生做到符合主機設定也是很好的教學要求吧
需要更多的分析:
1.都會有專案多的瓶頸，但讓商案的不會這麼早遇上，比較好保證商案測試時的品質。
2.伺服器設定可能是基於某些需求(例如excel功能，檔案上傳大小限制)才要開，不見得學生都用的到。
3.伺服器分類對於管理及設定調整上比較方便，一致性高。
4.兩種專案間互不影響，不用擔心商案出問題(例如:伺服器SSR設定衝突)。
5.學生專案伺服器可以將權限給授課教師操作，上傳專案較為方便。
等待回覆，持續追蹤。
#### 逢甲教課 ####
下一次上課是12/29號，課程為vue.js
- Vue
由於已經提前講過vue介紹，以及使用過vue的cdn做一些例子了，也有使用到以下功能:
1.v-if 系列
2.v-bind
3.v-for 系列
4.v-show
接下來我打算直接講如何建立一個vue專案。
1.為了npm,先安裝node.js (要解釋node.js嗎?)
2.安裝vue
```sh
npm create vue@latest
npm run dev
```
介紹router
介紹頁面以及如何引入組件
- json server auth
要與json server一同安裝
開啟服務指令
```sh
json-server db.json -m ./node_modules/json-server-auth
```
json server跟一樣在vscode會遇到權限不足問題，記得要用cmd執行。
就可以使用他提供的api
1.註冊帳號:
```javascript=
// method: POST
// url: http://localhost:3000/register 或者接signup或者接users 三種
// body: Object 其中一定要有email及password,其他選填一樣存入資料裡
fetch('http://localhost:3000/register', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({ ...this.userData }),
})
.then(res => res.json())
.then(data => {
// data內含驗證token 在其他api裡會使用到 可以存入sessionStorage中
console.log(data);
})
```
2.登入用
```javascript=
// POST /login
// POST /signin
// 跟第一步很像 一樣是拿到驗證token
```
3.接下來就能用json server的方式去執行
```javascript=
// 例如你要有登入才能看資料 使用660
fetch('http://localhost:3000/660/posts', {
method: 'GET',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
// 記得Bearer跟token間要有空格
'Authorization': `Bearer ${sessionStorage.getItem('accessToken')}`,
},
})
.then(res => res.json())
.then(data => {
console.log(data);
})
```
路由應用
| code | 用戶(有驗證) | 訪客
| ------- | ------- | ------ |
| 664 | W+R | R |
| 660 | W+R | 沒有權限 |
| 644 | W(owner)+R | R |
| 640 | W(owner)+R(owner) | 沒有權限 |
| 600 | W(owner)+R(owner) | 沒有權限 |
| 444 | R | R |
| 440 | R | 沒有權限 |
| 400 | R(owner) | R |
## ==20231206== ##
#### 正在寫的composition練習 ####
[**github: my-vue-test**](https://github.com/nakayamalee/my-vue-test)
- pinia + composition api
雖然大致上有體會到pinia的效果及composition api的寫法，但有個問題實在卡的有點久了，那就是pinia的儲存效果。我只能保存頁面切換間資料不流失，但一重整頁面(F5)資料就沒了，怎麼查都沒發現有甚麼不同，甚至有些作法都提示要我存在session/local storage裡，嗯...當然可以做到，但真的只能這樣做?
==補充==:
pinia的使用時機為組件之間有資料共用的時候。
要小心重整頁面後資料消失的問題，依據情況可儲存在session/local storage。
- invalid(偽類)
這個功能是想要讓form元素能幫你檢查input是否有填 (內建的提示)之外，同時又顯示紅框+顯示提示。使用到了:invalid，這裡提供一個==方法==，看大家有沒有更好的辦法。
*[方法]: 有點彆扭的作法
```javascript=17
// pending(false):用來記錄是否按過送出 有按過 => form會多pending這個class
const isPending = ref(false);
```
```html=47
<form :class="{ 'pending': isPending }" @submit.prevent="submitData()">
<label>
<p>廣告標題<span class="text-[red]">*</span></p>
<input v-model="formData.title" name="title" class="border border-black" type="text" required>
<p class="text-[red] hidden">請輸入廣告標題</p>
</label>
<button type="submit" @click="isPending = true">儲存</button>
</form>
```
```css=100
// 按過之後 form元素增加了pending時候啟用
.pending :invalid {
// 裡面"出錯"的元素(例如:input、select)會有紅色邊線
@apply border-[red] outline-[red];
// 跟在後面的p元素一同顯示
& + p {
@apply block;
}
}
```
- json server
安裝json server
```sh
npm install -g json-server
```
資料夾中新增db.json
```json
// db.json
{
"productList": []
}
```
用工作管理員開啟命令提示字元
移動到專案資料夾
```sh
cd (此資料夾路徑)
```
執行json server
```sh
json-server --watch db.json
```
- composition api排版
差不多寫完了之後一看，發現我程式碼東寫一塊西寫一塊的好亂，不知道有沒有甚麼好方法？
==補充==:
1.依據情況拆分組件或函式，達到關注點分離功效並減少程式碼。
2.認真寫註解
#### 逢甲教學篇 ####
- js30 => day06
同學來問我他寫的功能一樣但卡很久是為甚麼?
```javascript=
matchArray.innerHTML = '';
matchArray.forEach(place => {
suggestions.innerHTML += `
<li>
<span class="name">${place.cityName}, ${place.stateName}</span>
<span class="population">${place.population}</span>
</li>
`;
});
```
就是學到了最初色弱遊戲的作法，不斷的動到DOM導致效率差。
應該要改成innerHtml只插入一次的作法。
```javascript=
const html = matchArray.map(place => {
return `
<li>
<span class="name">${place.cityName}, ${place.stateName}</span>
<span class="population">${place.population}</span>
</li>
`;
}).join('');
suggestions.innerHTML = html;
```
or
```javascript=
let html = '';
matchArray.forEach(place => {
html += `
<li>
<span class="name">${place.cityName}, ${place.stateName}</span>
<span class="population">${place.population}</span>
</li>
`;
});
suggestions.innerHTML = html;
```
兩個一樣意思，但map感覺比較煞氣。
#### 新電腦加裝篇 ####
- 無線網卡
起因是想要連無線耳機、手把，但當初買的主板沒有帶無線網卡，所以自己買了intel ax210無線網卡+PCIe轉接版+天線花了700元，如果網卡走m2就只需要買網卡就好還會更便宜。查了下如果當初買帶wifi的主板要多花1300，且記憶體還是DDR4，這樣看起來還是蠻划算的。總之，之後要再換無線鍵盤或滑鼠都可以了。
原本想說可能會擋到顯卡進氣，但到手時才發現很小一塊。明明轉接版只需要插x1卻奢侈的插上x16的插槽，妥妥的浪費空間XD。其實也可以放棄m2的硬碟&放棄傳輸速度讓硬碟去走sata，m2讓給網卡，這樣PCIex16就空出來了，也不會擋到顯卡風扇。但多出來的x16要再放甚麼也還不清楚...我看就先維持現狀好了。
用起來還是相當方便的，開機自動就識別了，wifi順、藍芽也順，大功告成。
## ==20231129== ##
- 逢甲課程
目前javescript上完了，輪到上git與github，教的範圍很含糊。有人git教得多、有人github教得多，但就是不知道哪個才對學生有幫助。講多一點github可以快速入手做到版本控制，解決當前問題;講多一點git，學生面試遇到的話可能比較有幫助。
總之我自己現在是幫他們兩邊做連結，讓他們知道兩個之間魚幫水、水幫魚的關係。
## ==20231122== ##
- 換電腦的心路歷程
摳摳沒有不見，只是變成喜歡的樣子。現在只希望跟看過的大家約法三章，==我玻璃心==XD。
1. 不要跟我說買的時機不好。
2. 不要跟我說這兩個效能差不多，你可以選到更便宜的。
3. 不要跟我說你應該繼續蹲。我已經蹲12年了，腳麻。
好啦，還是可以說啦。就是我的臉可能會很臭QQ。
我的老電腦，從剛升大學買來到現在，途中換了幾個硬碟、加了記憶體、撿人家==不要==的顯卡，一路撐到現在。
老阿公了，都過幾個世代了。
cpu: i5-2310
display: NVIDIA GT740
ram: DDR4 4G * 2
hardware: SSD 250GB + HDD 1TB
要跑甚麼都可以跑就是新遊戲的畫面很糊很卡XD，但寫網頁或當文書機很夠用了，放棄玩新遊戲後，就是拿來~~看動畫~~...寫網頁。這些記憶終於要成為歷史了。
- 新電腦
顯卡佔了預算一半，總預算應該就很明顯。
總之可以好好的來~~打遊戲~~...寫網頁了。
- 回歸正題
JS課程編課要思考時間長度，之前JS只有一周可以教，不小心習慣這速度了，逢甲班已經將天氣小卡派下去了，看來是要往JS30前進了。
## ==20231115== ##
- tinymce 所見及所得
專案遇到上傳圖片時，圖片路徑前面會被增加若干個 . . / 的問題，導致圖片有些頁面可以看的見，有些頁面又看不見(破圖)。
回到原本的狀況來說，我們現行專案上要能顯示圖片==只要/upload開頭==且==圖片存在==就可以正常顯示，所以只要把圖片路徑那些 . . / 通通不要加就可以了。
tinymce中設定追加
```shell
convert_urls: false, // 不修改上傳圖片的src
```
就能不額外修改路徑，直接依據回傳的圖片路徑正常顯示。
- 逢甲JS教學歷程
11/14
1.2張圖片切換、3張圖片切換(課堂作業)
2.classList 操作
上午為了讓他們熟悉DOM的操作，慢慢帶他們用console.dir()看元素中的屬性，讓他們理解修改的到底是甚麼。下午則是嘗試classList的功能，指示他們不要一時爽就用JS寫inline-style。
11/15
1.function、input取值、button。計算機(課堂作業)
2.table。BMI(回家作業)
3.還有時間就講迴圈。
預計要教他們function，並讓他們課堂實作計算機。
## ==20231108== ##
- 教學狀況
雖然不是第一次被要求列出全學生的前端能力，但這其實還蠻困難的。
如果之前作業出的簡單，同學雖然繳交熱烈，檢討完後有的學生會重新上傳，變成所有人作業相似度高達九成。如果出的困難且提示不多，可能會影響繳交率，有些同學也會變成事後繳交，一樣是很難看出來到底會寫不會寫。最後只能憑印象學生有來問過你，你才確定他哪些是懂的。
初步想法
1.JS30去辨識，最省力且資源多，但有可能學生貼回來還是一樣的程式碼。
2.自己想，很累但可能要依照學生程度去決定功課難度，以免同學受挫不交作業。
- 面試情況
準備第三次送同學去面試，對於流程還是記不住，但記住了又會損失彈性，因為不見得每次的狀況都一樣，依據教育單位處理方式又不同，總之就是盡力配合單位，提供意見解決問題。看來如果有辦活動的經歷，那真的是很寶貴的經驗，因為真的相當有難度。
- 套件問題
用習慣git看誰上傳的功能後，有點回不去了。
但現在有些工作電腦
1.有裝套件
2.有裝git
忘記還缺甚麼了...
導致有些工作電腦還是看不到這行是誰寫的(抓戰犯XD)，可惜
補: 看半天原來這台沒裝，小丑是我自己
---
## ==20231101== ##
- 教學部屬
教學班級有編列伺服器預算，所以同學們的專案都得上架。一直以來，我們使用forge部屬的專案有larvel、laravel + vue，結果現在反而是靜態網頁沒有自己部屬過。
靜態網頁部屬(forge):
:::info
思路: 透過[**網頁伺服器**](https://zh.wikipedia.org/zh-tw/%E7%B6%B2%E9%A0%81%E4%BC%BA%E6%9C%8D%E5%99%A8)軟體進行傳送資料夾內的網頁，基本需求架構很簡單。設定資料夾位置，準備首頁index.html檔案。
就跟你把檔案放在Xampp內的htdocs是一樣的想法。
:::
所以搬過來forge上看，設定只要改成用靜態網頁(Static Html)，並且根目錄上有index.html就萬事大吉。
Again,thank you,forge,save my day.
- 教學狀況
很常遇到同學喊救命，但我一過去，bug就消失了的狀況。
抱歉，這個只是碎念。 :sunglasses::crossed_fingers: 無量空處
教學過程中需要再提醒同學幾點，免得專題做下去會很難改，已經做下去的就只能**請他慢慢修**了。
1.裝飾用的元素再考慮position，不是直接用。
2.JS控制元素樣式的時候，盡量用class控制。
3.不要動不動就用innerHtml去修改版面。
不過他有時間的話，讓學生慢慢修或許才讓他理解為甚麼，真難拿捏。
- 預計進行
嘗試寫寫看stanley給的題目，預期對於vue的Composition API及pinina實作上有助益。
那話說回來，為啥要學composition?
官方是這麼說的:
1. 程式編寫上更通順
兩邊比較(左option;右composition)
東西少還沒問題...但當頁面邏輯多起來的時候...
option的作法，你寫的程式被分散在世界各處，而composition可以更好將你寫的邏輯集中在一起。
2. 更好的邏輯覆用
說是解決了 mixins的問題，待查。
3. 支持typescript
4. 無需使用this上下訪問對象屬性，能直接存取資源
---
## ==20231025== ##
南投數據班結束了，接下來是面對blender班
學生很會做模型，代表我網頁也得跟上他們，但事實是沒啥時間測試了。學生們已經來問我模型放上網頁的問題了，完蛋了
我是不是要找書來看比較好...
---
這周都在守望著blender班同學製作專題，網頁的程式面可以提示他們方向、three的問題我們或許可以一起找到答案，但同學的設計上我只能說出自身感受XD，該怎麼改就...好在同學們都還算有幹勁，希望他們能學到東西。
---
Gsap
[**Demo介紹**](https://hackmd.io/@zackgibson/B13JPdczu)
動畫套件，css可用，three.js也可用。
用起來簡單，設定多了會眼花，但依舊好過於自己寫動畫、算位置、計秒接續後面的動畫，最後得到動畫不上不下的 結果 ，如果早點運用，工時有望截短，效果更加突出，在three.js中鏡頭的移動免不了要靠他了。
- **鏡頭移動效果**
{%youtube O2ouLOL6C4c %}
配上onUpdate事件，在鏡頭移動行進間調整鏡頭方向，效果妙不可言。專題為興大校區導覽的組別已經應用了在校區模型可隨意翻轉的情況下，移動回固定位置、觀看方向也校準回正了。
*[Demo介紹]: 在HackMD中引用HackMD，爽啦
*[結果]: 鐵路便當節XD
## ==20231018== ##
上禮拜截至10/18週活動紀錄
---
一次帶數據班+blender兩班，真的有夠緊張。好在有其他導師幫忙，我才能好好專注在three.js的測試上，下面做個小筆記。
:::info
雖然是這麼說啦 :sweat_smile:，但目前程度做出來的東西也還陽春到不行。
:::
---
Three.js
文件有夠難懂難查的three.js，以下統稱Three:
稍微簡略的提一下就是，首先需要四個酷酷的東西:
1. Sence(場景)
```shell
// 設置一個場景
const scene = new THREE.Scene();
```
宣告一個場景，你可以往場景裡放不管你是由Three函式==自製==的模型，或是利用各種 loader ==載入==的模型。下方是自製一個綠色的正方形。
```shell
// 宣告骨架，可重複利用
const geometry = new THREE.BoxGeometry( 1, 1, 1 );
// 宣告材質，可重複利用
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
// 結合骨架及材質 製作出綠色正方形
const cube = new THREE.Mesh( geometry, material );
// 加入場景中
scene.add( cube );
```
:::info
:information_source: 自製一個綠色的正方形，並加入場景中。
:::
**夠嗆的是**有些模型可以是==自帶材質==，甚至是==自帶==各種設定(燈光、攝影機( WTF 、動畫...等)。對於沒摸過模型的我，有時遇到不符預期的時候根本不知道是模型搞出來的還是**自己沒寫好**。
**補充**:用gltf載入的模型其實是一個**場景**，所以你可以把完整的場景加到canvas中，可以直接使用模型裡設置好的攝影機。
*[loader]: 多如繁星的模型載入器，用法有可能不同
*[WTF]: 沒錯，就是What the fuck，我要怎麼用這攝影機?會發生甚麼事?
2. Camera(攝影機)
```shell
const container = window.innerWidth / window.innerHeight;
const camera = new THREE.PerspectiveCamera( 75, container, 0.1, 1000 );
```
有兩種攝影機
範例:
- **正交攝影機**
場景中的物體不管離鏡頭遠近都會==保持一定大小==
- **透視攝影機**
場景中的物體會隨著鏡頭遠近放大縮小(會有==遠近==的感覺)
[**官方範例**](s://threejs.org/examples/?q=camera#webgl_camera)
- 按O:正交
- 按P:透視
:::info
:information_source: 可以設置多個攝影機,也可以設定攝影機位置、角度、看的方向...等。
:::
3. Renderer(渲染器)
``` shell
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
```
簡而言之就是要設定canvas，設定他的大小跟位置。
4. RequestAnimationFrame(重複調用功能)
``` shell
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
}
animate();
```
重複調用讓canvas重新渲染畫面。
感覺很簡單，但這**意味著是你可以用這裡調整模型**，舉凡位置、顯示，鏡頭的位置、各種大大小小需要動畫改變的東西都會寫在這裡，你可以自己調整模型位置做出動畫效果，再加上模型可以又自帶動畫，那簡直是神魔大戰，亂到不行。最後，動畫的呈現上數值不會從1跳100，而是1慢慢增加到100，我查到是要靠==gsap==來完成，但又是一個神仙文件，有夠難讀:skull_and_crossbones:
## ==20250206== ##
休息了一年，一年間沒有很認真找工作，還拿考國營當藉口躺了一年。一年間都是博弈來找我上班，但我就一直撐一直撐，突然有公司打給我找我面試(對，當時的我還是很消極XD)。
(面試)
:會不會angular?
:不會
:沒事，跟Vue很像，你錄取了。
:诶不是(是不是甚麼詐騙還是甚麼前端債很重?)
就這樣迷迷糊糊的北上報到，前晚緊張到連絡大大壓壓驚，謝謝大大，讚嘆大大。總之開始了我的Angular之旅。
### 第三天 ###
我懷念v-model、v-on、v-if、v-for...還有那不需要先定義物件裡有甚麼javascript，那種自由的感覺。
---
...再說，我也根本不會typescript阿。
---
哭了，一把鼻涕一把眼淚地坐在位子上try and error把to do list弄出來...
話說怎麼到處都在todolist...
前天報到，昨天練JS，今天練angular，戰略性沒有用到angular的父子層。但對方說有做出來就好，那就這樣吧。明天繼續試ˊˋ
## ==20251028== ##
也待8個月了，也對typescript大概有一些理解了
只能說手上專案好狂阿哈哈，這真的有EX嗎?
連開發者自己都沒辦法點完的流程，這真是太酷了
Sign in with Wallet
Connect another wallet