iT邦幫忙

frontend相關文章
共有 389 則文章

技術 前後端各開 feature 分支時,前端怎麼拿到對的 API 型別

英文版在 dev.to。 我們前端的 API 型別都是從後端的 OpenAPI(Swagger)規格自動產生的,用的是 swagger-typescript...

技術 在 Next.js 前台接 LINE LIFF,我踩過的坑

我負責的預約前台是用 Next.js 寫的,而不少會員是從店家的 LINE 官方帳號點進來,所以一開始就接了 LIFF,讓會員可以直接用 LINE 登入。之後我...

技術 App 內建瀏覽器裡的 Passkey:API 存在,不代表能用

英文版在 dev.to。 最近幫會員登入加上 Passkey,結果在 LINE 的內建瀏覽器裡踩到一個很隱蔽的問題:按鈕有出現,按下去沒反應,而且沒有任何錯...

技術 【Day 11】開啟多重對話宇宙:實現多話題清單(Chat Sessions)管理

一、 前言 在前幾天的文章中,我們已經成功讓「AI 酒館」支援多角色切換,並且每個角色都有獨立的記憶。不過,隨著和調酒師 Mark 聊得越來越深入,玩家可能會同...

技術 【Day 10】前端 AI 專案的資安防護:打造安全且直覺的 API Key 設定彈窗

一、 前言 在前幾天的文章中,我們已經順利將 Google Gemini API 串接進「AI 酒館」中。然而,在 100% 前端運行的 Vite 專案裡,使用...

技術 【Day 09】打造專屬微醺氛圍:動態主題色與背景光暈渲染

一、 前言 在前幾天的文章中,我們成功為「AI 酒館」建立了多角色獨立對話記憶,讓調酒師 Mark 與吟遊詩人 Bard 擁有各自獨立的對話宇宙。然而,如果切換...

技術 【Day 08】角色平行宇宙:多 NPC 獨立對話記憶與切換架構

一、 前言 在前幾天的文章中,我們透過 localStorage 為「AI 酒館」打造了對話紀錄持久化功能。但如果所有 NPC 都共用同一串訊息紀錄,當我們從冷...

技術 【Day 07】酒館的長效記憶:利用 localStorage 實現對話紀錄持久化

一、 前言在前幾天的文章中,我們的「AI 酒館」已經變得非常生動:不僅有精美的暗色介面、雙向語音支援、Gemini AI 動態對話,還有流暢的打字機特效與自動捲...

技術 【Day 06】營造酒館沉浸感:為 AI 回應加入打字機特效與聊天室自動捲動

一、 前言 在前幾天的文章中,我們的「AI 酒館」已經成功串接了 Google Gemini API,讓調酒師 Mark 與吟遊詩人 Bard 擁有了即時對話的...

技術 【Day 03】讓酒館聽懂你說話:嘗試整合 Web Speech API 語音轉文字 (STT) 與實戰踩坑紀錄

一、 前言在前面兩天,我們透過 Vibe Coding 快速生成了「AI 酒館」的暗色調 UI 介面,並成功在本地端順利跑起來。身為一個沉浸式的酒館,如果全程只...

鐵人賽 Vibe Coding DAY 19

技術 Day 19|匯入的 Draft,在按下確定之前不能先進 App

Day 17 我故意沒做一件事:匯入前確認。 那時候,匯入一份合法的 draft,會直接取代目前的 draft。 而 ClarifyBuild 每次變更都會寫進...

鐵人賽 Vibe Coding DAY 18

技術 Day 18|還沒有 browser test,我先把按鈕背後的狀態流程抽出來測

Day 17 結尾,我寫下今天應該補 browser-level test。 因為 ClarifyBuild 從 Day 15 到 Day 17,已經不只是單純...

鐵人賽 Build on Google AI DAY 15

技術 【Day 19】數據追蹤與自動覆盤:Google Sheets 紀錄整合與 AI 方向預判紀錄

「一個完整的生產級 AI Agent,不能只管把報告推播出去,更必須將每日產出的市場數據、AI 預判方向與推播狀態進行持久化追蹤,為後續的勝率統計與離線 Eva...

鐵人賽 Modern Web DAY 30

技術 Day 30: 30天打造SaaS產品前端篇-完賽心得與技術棧總回顧

30 天旅程回顧 終於來到了鐵人賽的最後一天!回顧這 30 天的挑戰,感觸良多。 我在軟體開發領域已經工作八年,從最初的後端工程師,到後來的全端工程師,再到區塊...

鐵人賽 生成式 AI DAY 6

技術 Day06 - MCP:你使用的工具方法是安全的嗎?

前言 安安大家週末好... 既然 MCP 的運作原理是可以被查到的,那這樣駭客不會想利用機制缺陷做壞壞的事情嗎?基於好奇心驅使,還真的查到了微軟在今年五月分佈的...

鐵人賽 生成式 AI DAY 5

技術 Day05 - MCP:請 Claude 幫我初探架構及原理

前言 ... Claude 快用你無敵的白金之星想想辦法.. 運作背後三大角色 MCP 運行背後圍繞著一個架構 (Client-Server Architec...

鐵人賽 生成式 AI DAY 4

技術 Day04 - MCP:LLM 的進化之箭

前言 在上一篇試著分享了最通用的 Prompt 優化方式,但要知道 LLM 還能更強,就像替身能力能透過箭再進化是相同的意思,等等... 你那什麼表情?......

鐵人賽 生成式 AI DAY 3

技術 Day03 - 新手也能上手的 LLM Prompt 優化術

前言 在 Day02 的篇章,簡單探討了 LLM 理解、記憶限制,以及讀取長文本內容時要注意的問題後,你有發現嗎?不論是溝通到它開始失憶,或是一次丟入太多內容導...

鐵人賽 生成式 AI DAY 2

技術 Day02 - LLM 為什麼會漏掉細節?從 Context Window 到 Lost in the Middle 現象初探

前言 在過去開發的過程中,不知道你有沒有以下的這些經驗: 情境一: 針對某個功能跟 GPT 討論,該給的情境、需求都說完了,也糾正它的回覆好幾次,發現它像是不接...

鐵人賽 生成式 AI DAY 1

技術 Day01 - 為什麼前端的我會關注 AI

為何要關注 AI 可以協助甚至是做到的事情越來越多,以我自己的開發經驗來說,它可以: 協助撰寫測試:由開發者提供詳細規格(例如:測試架構、情境等),它就能照...

徵才 【SHOPLINE 招募中】Backend (RoR, Go) / Data Engineer (Batch, Streaming) / Frontend (React) / SRE / QA

【關於工程團隊】SHOPLINE 台灣研發團隊有超過百位工程師,分為前後端、測試、數據、雲端維運等團隊,台北辦公室採混合辦公模式,目前 Backend、Fron...

鐵人賽 Software Development DAY 30
前端也想學設計模式 系列 第 30 篇

技術 Day 30 - 結語

持續一個月的努力,終於來到了鐵人賽的最後一天。我大約在兩個月前萌生了參加鐵人賽的念頭,但當時其實猶豫了很久,一方面是擔心無法兼顧工作與寫作,另一方面也怕無法產出...

鐵人賽 Software Development DAY 29
前端也想學設計模式 系列 第 29 篇

技術 Day 29 - Visitor 訪問者

訪問者模式允許在不修改物件類別的情況下,對物件集合中的元素施加新的操作。 生活範例 麥當勞的餐點有很多種點法,比如說一個麥香雞漢堡,可以單點、搭配薯條和可樂做成...

鐵人賽 Software Development DAY 27
前端也想學設計模式 系列 第 27 篇

技術 Day 27 - Method Chaining 方法鏈

方法鏈可以透過一連串的方法呼叫來取得計算結果,而無需將中間結果存為變數。 生活範例 想像草莓果醬的生產線,上面包含幾個主要關卡:清洗、烹煮和裝瓶,經過一步步的處...

鐵人賽 Software Development DAY 26
前端也想學設計模式 系列 第 26 篇

技術 Day 26 - Memento 備忘錄

備忘錄模式能讓物件在不破壞封裝的情況下儲存與回復狀態。 生活範例 備忘錄模式的一個經典應用場景是歷史紀錄。這類紀錄在我們的日常生活中隨處可見,例如 Word、P...

鐵人賽 Software Development DAY 25
前端也想學設計模式 系列 第 25 篇

技術 Day 25 - State 狀態

狀態模式使用狀態物件來表示物件在不同狀態下的行為,並通過改變狀態物件來改變行為。 生活範例 街道中的紅綠燈非常適合用來說明狀態模式的概念。紅綠燈有三種狀態:紅燈...

鐵人賽 Software Development DAY 24
前端也想學設計模式 系列 第 24 篇

技術 Day 24 - Bridge 橋接

橋接模式通過將物件的抽象部分與實現部分分離,使系統更具彈性。 生活範例 隨著行動支付方式日益多樣化,想像一間行動支付整合商的服務,支援像 Apple Pay、L...

鐵人賽 Software Development DAY 23
前端也想學設計模式 系列 第 23 篇

技術 Day 23 - Flyweight 享元

享元模式透過重複使用物件來減少資料量並節省記憶體。 生活範例 圖書館有很多藏書,同一本書可能有多本館藏,以滿足讀者需求。假設每次購書都要將書本的基本資料輸入圖書...

鐵人賽 Software Development DAY 22
前端也想學設計模式 系列 第 22 篇

技術 Day 22 - Mediator 中介者

中介者模式透過獨立的物件來協調物件之間的互動行為,避免它們相互依賴。 生活範例 想像你在一間公司,各部門都透過專案管理組來進行溝通。每當某個部門有需求時,都會聯...

鐵人賽 Software Development DAY 21
前端也想學設計模式 系列 第 21 篇

技術 Day 21 - Proxy 代理

代理模式透過包裝物件來管理外部對物件的操作行為。 生活案例 每名偶像都有一位經紀人,負責管理其工作行程。廠商會透過經紀人洽談合作機會,並透過經紀人取得回覆。廠商...