真理大學資工系企業參訪

Transcript

1. LINE Developers 誰說頂大 才能進 LINE 在 AI 時代我該怎麼強化自己 真理大學企業參訪
2. QUIZ 猜猜我的大學是？ 台大？ 清大？ 交大？ 答案是：雲林科技大學 成大？
3. Zion Lee EC Frontend @ LINE EDUCATION 雲林科技大學 人工智慧技優專班 AI Specialized Program @ NYUST EXPERIENC E 2025 Frontend Engineer @ LINE Taiwan 2024 TECH FRESH @ LINE Taiwan 2023 Full-stack Developer @ ADL（教育部因材網） 2023 Full-stack Developer @ NYUST Dorm
4. CONTENT 01 學校 VS 企業 02 傳統開發與 AI 開發 03 AI 可以幫我們專案做到什麼？ 04 我們應該怎麼做？ 05 實習到轉正 為什麼一畢業就卡關？ AI 寫得出來，你改得動嗎 以 LINE 購物為例 在 AI 時代做出自己的差異 我是怎麼走進 LINE 的
5. 01 學校 VS 企業 為什麼一畢業，突然就卡關了？
6. 畢業後的 第一道牆 找工作要經驗， 但沒工作，哪來的經驗？
7. SECTION 01 為什麼會這樣？ 究竟⋯⋯是哪裡出了差錯？
8. 學校 VS 職場 學校考你會不會解題，職場考你解決問題的綜合能力 學校 職場
9. 學校專題 VS 企業專案 學校專題：會動就好 企業專案 要能用、要有價值，還要顧到這些 監控與告警 資安 個資保護 Code Review Demo 那天能跑，就過關 可維護性 文件 擴充性 效能 相容性 上線流程 測試 錯誤處理 回滾機制 穩定性 成本 使用者體驗
10. 團隊合作 學校作業大多一個人就能完成，但職場幾乎沒有一個功能是靠自己完成的
11. 所以，為什麼要實習？ 畢業前，去看一下外面世界 拆需求 定義問題 思考 UX 對 API 把需求拆成可做的任務 PM 怎麼排優先順序 設計師怎麼想體驗 前後端怎麼對資料 Review 追 bug 做取捨 上線後 前輩怎麼 review 團隊怎麼追蹤問題 時程和品質怎麼平衡 上線後怎麼觀察修正 觀察別人怎麼工作，就是把別人的經驗變成自己的武器
12. 想更了解企業怎麼開發？ 推薦 LINE TECH FRESH 的畢業分享會 用手機掃描觀看 【畢業分享會】你在 DevOps 什麼啦，我要趕快上線！ https://www.youtube.com/watch?v=Bogq44fRQn4
13. 02 傳統開發 與 AI 開發
14. AI 改變開發，只花了五年 從幫你補個幾行，到自己開 PR 人工開發 AI 輔助開發 AI 穩定產出 2020 以前 2021 2022 2023 2024 2025 2026 人工開發 Copilot ChatGPT GPT-4 AI 編輯器 AI Agent 現在 人寫 code 人做 review AI 開始 幫你補完程式 用聊天 就能問程式 寫得出 完整的函式 讀懂整個專案 再幫你修改 自己改檔、跑測試 還會開 PR AI 寫、AI review 人來判斷 一個產業的工作方式，幾年內就整個翻過來
15. 傳統開發 VS AI 開發 AI 讓速度變快，但方向盤還是在你手上 傳統開發 AI 開發 自己一行一行寫 程式誰來寫 AI 先寫，你來檢查和修改 慢，人力和時間成本高 開發速度 快，雛型幾分鐘就出來 完整的程式能力和邏輯 需要的能力 會下指令，還要看得懂程式 不知道怎麼寫 最常卡在 看不懂、改不動 執行者 工程師角色 規劃者與判斷者
16. 同一個氣泡排序，人寫 VS AI 寫 人寫的 function bubbleSort(arr) { for (let i = 0; i < arr.length; i++) { for (let j = 0; j < arr.length - 1; j++) { if (arr[j] > arr[j + 1]) { let temp = arr[j]; arr[j] = arr[j + 1]; arr[j + 1] = temp; } } } return arr; } AI 多做了什麼？ • 先檢查輸入是不是陣列 • 複製一份，不改到原陣列 • 每輪少比一次，排好就提早結束 • 補上註解和型別說明 12 行 AI 寫的 /** * 氣泡排序：回傳新陣列，不修改原陣列 * @param {number[]} input 要排序的陣列 * @returns {number[]} 排序後的新陣列 */ function bubbleSort(input) { if (!Array.isArray(input)) { throw new TypeError('input 必須是陣列'); } const arr = [...input]; for (let end = arr.length - 1; end > 0; end--) { let swapped = false; for (let i = 0; i < end; i++) { if (arr[i] > arr[i + 1]) { [arr[i], arr[i + 1]] = [arr[i + 1], arr[i]]; swapped = true; } } if (!swapped) break; // 沒有交換代表已排好 } return arr; } 22 行
17. AI 寫得很精妙，但你看得懂嗎？ 人寫的 function topWords(text, k) { const words = text.toLowerCase().split(' '); const count = {}; for (const w of words) { if (w === '') continue; if (count[w]) { count[w]++; } else { count[w] = 1; } } const list = Object.keys(count); list.sort(function (a, b) { return count[b] - count[a]; }); return list.slice(0, k); } 17 行 AI 寫的 const topWords = (text, k = 3) => [...[...text.toLowerCase().matchAll(/\p{L}+/gu)] .reduce((m, [w]) => m.set(w, (m.get(w) ?? 0) + 1), new Map())] .sort(([a, x], [b, y]) => y - x || a.localeCompare(b)) .slice(0, k) .map(([w]) => w); 這 8 行在做什麼？ • matchAll + \p{L}：抓出所有的字，略過標點 • reduce + Map：邊走邊計數，set 會回傳 Map • ?? 0：還沒出現過的字就當作 0 次 • y - x || localeCompare：同次數照字母排 8行
18. SECTION 02 AI 寫得出來 不代表你改得動
19. 所以，工程師的價值在？ 工程師ㄉ價值 走勢為示意 寫 Code 變便宜 背語法 變便宜 判斷力 變值錢 規劃力 變值錢 創意力 變值錢 溝通協作 變值錢 為結果負責（背鍋） AI 不會承擔後果，做決定、負責任的還是你 AI 做不到
20. 好消息 不用害怕 被 AI 取代 因為 token 真的很貴⋯⋯ 老闆看完帳單，回頭跟你說： 「還是你比較便宜」
21. 好消息 不用害怕 被 AI 取代 因為 token 真的很貴⋯⋯ 老闆看完帳單，回頭跟你說： 「還是你比較便宜」
22. 03 AI 可以幫我們 專案做到什麼？
23. QUIZ 大家知道 LINE VOOM 被什麼取代了嗎？ 提示：看看畫面最下方的分頁
24. LINE 購物 我的逛逛 瀏覽紀錄、票券、紅包，集中在同一個地方
25. AI 做不到 AI 做得到 跨裝置細節 實機上的差異，要一台一台確認 前端架構設計 components、composables 怎麼拆 UI 設計 版面、配色、資訊的先後順序 API 串接 瀏覽紀錄、紅包、優惠券的資料 商業邏輯 點數、剩餘天數、使用條件 UI 刻版 CSS 間距、圓角、陰影對齊設計稿
26. LINE 購物 逛逛人氣對決 在逛逛的最上面， 你有發現嗎？ 裡面部分內容， 其實是 AI 輔助生成的 這個版面的開發， 也有很大部分有 AI 輔助
27. AI 做得到 AI 還做得到 Code Review 1 2 1 標出嚴重程度 分級（MAJOR）和問題類別 2 說明影響與根本原因 哪裡會出事、為什麼會出事 3 3 直接給修正建議 附上改法，一鍵就能套用 4 補充後續建議 該補的測試、安全設定 但要不要採納，還是人來判斷 4
28. AI 在前端專案還能做什麼？ 前端專案常見的 AI 用法 開發階段 品質與維運 產品功能本身 文件與溝通 寫測試 Code Review PR 描述、commit 個人化推薦 產生測試初稿，補上邊界情況 自動抓安全、隱私、效能問題 自動整理這次改了什麼 像「大家都在買」、商品推薦 型別與 API 對接 錯誤分析 技術文件 搜尋 從 API 文件產生型別和 mock 看 Sentry 錯誤，找原因、提修正 補 README、元件說明 語意搜尋、自動完成、錯字容錯 重構、升級 效能檢查 需求拆解 內容生成 Vue 2 → 3 這類大量修改 分析 bundle、Lighthouse 把需求拆成任務，列出邊界情況 商品摘要、文案初稿，上線前人審 讀懂舊程式 無障礙檢查 客服 解釋流程、畫出呼叫關係 alt、aria、對比度、鍵盤操作 聊天機器人、FAQ 自動回答 AI 給的有可能存在幻覺，對不對還是要人判斷
29. 04 我們應該 怎麼做？ 大家都會用 AI，你要怎麼被看見
30. 找專案做，或去實習 做過真實的專案，才知道自己缺少什麼 FREELANCE SIDE PROJECT INTERNSHIP 接案 做自己的專案 去實習 • 幫系上、社團、店家做網站 • 做一個自己每天會用的工具 • LINE TECH FRESH 等計畫 • 面對真的客戶和改稿 • 從想法到上線全部自己來 • 看見真實的開發流程 前期賺不到的錢，會先變成能力值
31. 做出差異 大家都用 AI 做出差不多的網頁，你的作品要有自己的想法 AI 生成的網頁 smart-bin.app 人設計的網頁 smart-bin.app AI 給你的是它學過的，你的作品要讓人一眼記且與眾不同
32. 建立作品集 把「做過」變成「說得出來」 每個任務，都用 5 個問題整理 1 我負責了什麼？ 2 當時遇到什麼問題？ 3 我怎麼解決？ 4 最後產生什麼結果？ 5 我從中學到什麼？ 這些答案，會變成履歷、面試和作品集的素材 基於 AI 影像辨識的自動分類垃圾桶 112 AI 創意競賽 第一名｜介面設計、AI 模型
33. 作品集範例：智慧垃圾桶 112 AI 創意競賽 第一名 2023.02 – 2024.01｜介面設計、AI 模型｜PyTorch・Figma 垃圾桶螢幕 功能集 垃圾辨識 分類知識
34. 作品集範例：其他專案 在學期間做過的專案 技能競賽精準訓練系統 教育部因材網 數位學習測驗系統 2023.01 – 2023.11｜介面設計、AI 模型、程式開發 2022.08 – 2023.09｜前後端開發 Electron・Python・Arduino 試題系統重構・互動式題目・RWD 2023 雲科大 AI 賽車 雲科大學生宿舍郵件處理中心 2023.09 – 2023.10｜前後端開發與部署 2023.02 – 2023.10｜前後端開發與部署 Nuxt.js・Node.js・Express・Docker Laravel・Proxmox・Docker
35. 從實習到轉正 我是怎麼走進 LINE 的 大一 大一～大三 大三 實習一年 大四畢業前 投 TECH FRESH 接案、比賽 再投一次 實習 轉正 第一次投，沒上 在外面接案、參加比賽 成功錄取 TECH FRESH 在團隊裡做真實的專案 成為正式的前端工程師 累積作品 第一次沒上別放棄，而是要藉此知道自己還缺少什麼
36. 炫耀一下：實習分享 實習期間的大小活動
37. 炫耀一下：工作日常 辦公室福利與團隊活動
38. THANK YOU 快來投履歷當我同事