---
tags: Node.js 直播班 - 2023 春季班
---

# (北14組) 小組破冰任務

成員(依Discord群組自我介紹順序排列)：
- Coolizz
- Evonne
- ya2
- Page
- PeterChang

## 任務挑戰一：小組自我介紹

1. 請分享您的背景給組員，當初為什麼想成為工程師？
2. 自己的程式技能樹介紹，這次 Node 班最想學的技術是什麼？
3. 分享自己的一個小秘密，可能連你爸媽都不知道(例：洧杰教練擔任過 9 年巴哈姆特熱門遊戲論壇版主，在線上遊戲氪金數字超過 6 位數，曾一度認真想成為電競選手)
4. 請分享自己的[測驗結果](https://www.16personalities.com/ch/%E7%B1%BB%E5%9E%8B%E6%8F%8F%E8%BF%B0)給您的組員。

>組員介紹
:::spoiler Coolizz

Hi  我是 Coolizz
競選者

我轉職已滿一年，現在是轉職後的第三份工作。在轉職之前，我是一名網路工程師，使用 Java 的 JSP + Spring Boot 撰寫簡單的網頁和 API 服務，並使用 Python 撰寫 Linux 的腳 Script。後來，我對程式開發產生了濃厚的興趣，想專職從事軟體開發。在撰寫網頁時，我發現自己對前端有濃厚的興趣，因此在 2021 到 2022 年期間開始在職自學前端技術。去年年初，我正式轉換為 RD。由於之前有寫過後端，我認為放棄後端的機會太可惜了，因此進了某知名博弈公司，擔任全端工程師。然而，後來我發現自己對前端的熱情更高，因此在下班時間裡更愛研究前端技術，而對於後端技術僅限於工作上所需。當時我覺得自己在前端技術方面的能力不錯，於是外面面試了四間公司，其中三間資深前端的職稱offer都拿到了。10月時，我加入了一家電商公司擔任前端工程師，但由於工作內容和開發模式與我面試時的預期不符，因此在11月中又轉到現在的公司。

此次報名，除了累積經驗外，我發現自己的轉換工作速度很快，雖然只轉職一年，但都是超級忙碌過得十分充實，除了第二份工作比較輕鬆外，其他都是非常具挑戰性的工作，並想擔任團隊中的領導角色。但是我對於未來是否走管理職，需要考慮到是否需要再次了解後端技術。
也覺得自己很快就成為資深工程師，雖然在每間公司對於資深定義不同，或許也只是個名稱，但這樣快速的轉變偶爾也會出現冒牌症候群，深怕自己是不是其實沒有這個能力。

在過去一年中，我使用過以下技術：
1. 全端工程師 React + Typescript + Style Component + TailwindCSS + C# + .Net + GCP 
2. 資深前端 Vue2 + jQuery + Ruby on Rails
3. 資深前端 React + Typescript + TailwindCSS + NextJS + WebSocket

另外發現到目前為止只有我是   競選者 這個是稀有品種嗎 !!
之前有上過六角直播班，但剛好都有事沒能完成到最後，我只記得某次JS直播班的 BMI KATA 三分鐘還四分鐘的完成 

:::

:::spoiler Evonne

Hi 
我叫 Evonne, 前端工作經歷約4年左右
測試的結果: 提倡者

目前公司在前端所使用的技術是 Vue2，而 Devops 部分為 Docker 
手上的Vue專案為：提供一個後台給醫院人員操作使用及報告檢閱，使用到 i18n 、Form Validate、Vuetify、Ｗebsocket 串接等。

這次想參加Node.JS 班，一方面想打開自己對後端那塊迷霧地帶，一方面想要有多人的開發合作經驗，也想間接提升自己的底氣及實力(隨時有跳槽或不怕被砍的底氣XD)。

考量到公司之後的專案，以及個人職涯，所以想在這次的專案使用 React🙂 及測試，並了解 Node.JS的資料流及應用

:::

:::spoiler ya2

大家好，我是ya，測試結果為調停者。
是快滿兩年的軟體工程師，大概20%前端80%後端，接觸過的網頁相關技術如下。
- 前端：JavaScript, jQuery, 非常皮毛的React, 非常皮毛的Babylon.js
- 後端：PHP(Codeigniter), Python(FastAPI, Flask), Nginx
- 資料庫：MySQL, PostgreSQL
- 其他：Docker, Prometheus, Grafana, AlertManager
工作主要都是一人完成，但常常不知道如何將程式寫的更好，希望透過專題班，精進自己，目前想精進方向如下。
- 前端：熟悉React、TS
- 後端：將api格式寫的更好、Redis
- 開發流程相關：git flow、CI/CD、雲端部屬等DevOps技能、團體開發網站
(之後主要希望做後端/DevOps部份～)
期待和大家一起學習成長，做出有趣的東西~~

:::

:::spoiler Page

大家好，我是Page，我也是調停者~
之前從事視覺設計工作，去年參加App works School 轉職到前端，到現在工作快滿半年

我最熟悉的框架是React，之前在學校做 side project 搭配使用的是 styled component，也有碰過一點點的 socket.io
目前工作上則會碰到Next.js+scss，後端的部分不是很熟，所以想要增進這方面的知識

目前除了上述兩個框架，也有碰過TypeScript、jQuery，跟一點點的scala 

由於工作上會需要跟後端合作跟溝通，我發現有時候都會聽不太懂他們在說什麼，所以想說乾脆自己跳下來學怎麼開Api、怎麼部署，還有怎麼跟資料庫聯繫

目前是新人，一切都還在摸索中，公司也沒有固定的規範怎麼寫code，大部分都是各寫各的為主，不太清楚怎麼寫比較好，所以想借這個機會了解其他工程師的 coding style 之外，也想要學到更多關於 Unit Test 方面的經驗

我也還有很多後端的領域不是很了解，像Nginx、Docker、Jenkins 等等只是都有個基礎認識而已，希望了解後端技術之後我可以更能瞭解這些服務在做什麼

目前看起來我好像是最菜的😂
請大家多多指教🙏

:::

:::spoiler PeterChang

大家好，我是Peter，測試結果為守衛者，從事前端工程師兩年半。
React 開發經驗約一年半，也寫過 Angular、Typescript，參加過資策會的轉職班，所以也略懂基本 Node.js 跟資料庫串接。
由於工作上都是單打獨鬥，常常不知道怎麼寫會更好，所以希望可以和大家多交流。
這次專題班主要想精進前端的部分，包括 Unit test、Next.js等等，並且對後端環境建置、資料庫操作更熟練，如果能再練習到CI/CD、Docker就更好了😆

:::

## 任務挑戰二：AI 生成式圖像訓練

1. 請用 [midjourney](https://midjourney.com/) **生出專屬於你們小組的代表圖**，[教學文](https://www.kocpc.com.tw/archives/453331)。例如大家都喜歡貓，可生出一群貓、都喜歡 React 就出數顆藍寶石。

> 小組代表圖

<img src="https://i.imgur.com/99j9SlT.jpg" alt="北14組代表圖" width="60%">

詠唱語法

five people code and like travel

## 任務挑戰三：[ChatGPT AI](https://openai.com/blog/chatgpt/) 程式題詠唱訓練

1. 請用 chatGPT 解答[10 道 if+function 題目](https://hackmd.io/zvASmoO4S3q6oLINjupvJA)，不可自己寫程式，需能直接詠唱出解答。如想找更進階題目，可前往 [Codewars](https://codewars.com/)、[Leetcode](https://leetcode.com/) 找題目。

:::spoiler 題目一：多重條件
:::
:::spoiler 題目二：飲酒測試
:::
:::spoiler 題目三：發燒檢測
:::
:::spoiler 題目四：溫標轉換
:::
:::spoiler 題目五：餵食青蛙
:::
:::spoiler 題目六：計算球體體積
:::
:::spoiler 題目七：BMI 計算
:::
:::spoiler 題目八：斜邊計算
:::
:::spoiler 題目九：FizzBuzz
:::
:::spoiler 題目十：蜘蛛下網
:::

2. 請用 chatGPT 詠唱以下 [Bootstrap 5 文件](https://hackmd.io/@YmcMgo-NSKOqgTGAjl_5tg/ryar-vGOd/%2FNdGKchTeRBqbkTMiQ2HSmw?fbclid=IwAR3SBn6du9SuAvTGOqscoVCtfddf-8QRPAk7POCDwtEeyL7lb3-mcPthUbI)的[募資網站](https://hexschool.github.io/boootstrap5WebLayout/)中，詠唱下圖範圍版型，並分享自己的詠唱語法與 Codepen，來看哪組的小組詠唱能力最接近。註：進入[標示文件](https://hexschool.github.io/boootstrap5WebLayout/)，點擊圖片後右下角的匯出可獲得圖片線上網址。

:::spoiler 募資網站
codepen
:::

3. 請嘗試用 chatGPT 寫出 [todolist API](https://discord.com/channels/801807326054055996/1075786895914700820)，並一樣需載入 `uuid` NPM 套件，並寫出各 API 功能

:::spoiler todolist API
:::

## 任務挑戰四：專題討論

1. **主題選擇**：請小組內成員，投票自己想做的題目，可先列出 2~3 個最有興趣的，並在線下專題工作坊的時候再做決定即可。
2. **挑選致敬對象，收斂開發範圍**：挑選出備案主題後，請蒐集幾個相同性質的網站，做為當天工作坊的討論素材。例 (部落格：方格子、medium。短網址：lihi.io)，會藉此設計[使用者故事](https://ithelp.ithome.com.tw/articles/10220522)，來收斂開發範圍。
> 感興趣題目與致敬對象
- 活動訂票服務
- [kktix](https://kktix.com/)
- [iNDIEVOX](https://www.indievox.com/)
- [accupass](https://www.accupass.com/?area=north)
- [拓元](https://tixcraft.com/)
- [寬宏](https://kham.com.tw/)
- [opentix](https://www.opentix.life/)
- 生產力工具
- [Trello](https://trello.com/)
- [ClickUp](https://clickup.com/)
- [monday](https://monday.com/)

## 會議紀錄

:::spoiler Discord討論
- 破冰活動
<img src="https://i.imgur.com/iyyEUj8.png" width="60%">
<img src="https://i.imgur.com/C7PQvKJ.png" width="60%">
<img src="https://i.imgur.com/0RNrbxo.png" width="60%">
:::

:::spoiler 03/09 Google Meet會議
- 決定小組代表圖
- 里程碑一討論
<img src="https://i.imgur.com/AaPkqlr.jpg" width="40%">
:::