是的，如同標題所說，目前專案確實完成度沒有很高，但無論進度如何，今天就在挑戰的最後一天進行部屬吧！ 如何使用 Vercel 部屬 進到 Vercel 官網註冊...
前言 營養師不開菜單系列來到第三十天，首先謝謝有觀看到最後一天的讀者，也恭喜堅持到最後一天的你和我。在部署之後，應用程式上線後，我們就這樣結束了嗎？還是我們可...
倒數2天，把握時間繼續努力！ 製作月曆元件 昨天製作了顧客視角的服務項目詳細頁後，今天依照原先的 Wireflame 設計線稿，刻出可供預約的日期時段區塊，這部...
前言 專案建置的最後一哩路，就是讓整個應用程式上線，而在我們的專案小作品中，需要一個平台讓我們部署，並公開網站。Next.js 的母公司 Vercel 提供了一...
店家新增完服務項目後，顧客就可以開始查看預約了！所以今天將開發重點放在顧客角度會看到的頁面都實作完成。 組裝列表頁面(顧客視角) 串接讀取文件的 API i...
關於容器化 在科技迅速發展的今日，部署的技術也經歷了不少的變革。從早期的物理伺服器到現代的容器化技術，每個階段都是為了追求更高效率和更好的資源利用率。 在傳統...
倒數第4天的挑戰，是完成一套新增讀取編輯刪除(CRUD)的頁面組裝與串接，話不多說直接開始！ 組裝列表頁面(店家視角) 串接讀取文件的 API import...
前言 SEO，是搜尋引擎最佳化 (Search Engine Optimization) 的簡稱，是一套策略技術，幫助提升網站或網頁在搜尋引擎裡的曝光度。主要的...
接續上一篇文章，繼續將 Firebase Authentication 電話驗證的串接完成！ 關於 Firebase Authentication 的電話驗證...
前言 系列文到二十五天已經大致開發完成，但完成後會開始各種修改及優化，其中也包括效能的優化。效能對於前台網站是非常關鍵的。當網站載入速度緩慢時，可能會導致用戶流...
在使用者成功註冊、並且角色為店家時，需先經過電話驗證才可進行刊登服務項目供顧客預約，此故事情境在這篇文章可以回顧，所以今天將重點放在電話驗證的實作上。 使用 J...
前言 在開發前端應用時，不良的錯誤處理可能導致使用者困惑、挫折，甚至選擇放棄使用你的應用。所以在專案中，我們透過 try-catch 語句捕捉潛在錯誤，並使用...
花了兩天稍微了解 FireStore Database 的 CRUD 後，今天著手將我使用先前做好的表單元件們，組裝成店家資料維護頁面，但一直卡在明明登入了 u...
前言 接續著上一篇的前端實作分享，我們介紹完 NavBar 的核心功能邏輯以及響應式設計，這篇文章中我們的焦點將轉向「登入/註冊頁面」，深入挖掘使用者認證的細節...
延續上一篇，今天繼續研究 Firestore Database 的資料操作， 溫馨提醒：以下內容看到的 showNotify 是我個人封裝使用的提示彈窗，並不...
前言 經過從設計到後端的細緻實作後，我們現在進入了至關重要的前端實作階段。在這個階段，我們不僅要將畫面與資料結合，更要為我們的應用程式注入靈魂。前端不僅僅是視覺...
今天是組裝頁面的一天，也將 Firestore Database 的 CURD 先從文件學習到在 console 控制台中練習一遍。 溫馨提醒：以下內容看到的...
前言 Middleware 在網頁應用程式中的角色，猶如機場的安檢機制。每當我們在機場搭乘飛機時，必須經過嚴格的安檢程序，以確保旅程的安全和暢通。同理，每一個進...
會員管理終於來到最終章，因為其他功能都是 CRUD，而且也因為 Firebase 將使用者認證這塊切得很細，所以花較多的篇幅來介紹。然而雖然使用者在註冊成功當下...
前言 在上一章節，我們對請求數據進行了深入的驗證。透過多層篩選和檢查，對於不同的驗證結果，我們已經設定了相對應的錯誤回應。但是，我們還沒有詳細探討在哪些特定情境...
除了使用電子郵件與密碼註冊以外，考量到有些使用者不喜歡管理太多組帳號、密碼，所以今天就將開通的 Google, Facebook 帳號註冊功能串接到網站裡吧！關...
前言 在設計完畫面後，也大概確認了整個專案的頁面功能，在設置完資料夾結構後，就是進入前端後端實作的階段，大部分的頁面我是前後端功能同步進行，但為了避免畫面凌亂，...
在上一篇文章中，我成功將使用電子郵件與密碼註冊會員之功能串接，接下來是取得該註冊會員在 API 中的資訊，除了我們可以傳值進去，Firebase 也會自動產生一...
前言 在前15篇章節中，已經詳細介紹了專案中使用的套件及在專案中的具體實作方式。接下來的文章將深入探討專案的細節和商業邏輯。考慮到這是一個從零開始建立的產品，我...
好，目前已將 Firebase 的服務都設定的差不多了，接下來就是一一實作將功能與頁面結合。 提示訊息元件 在實作之前，我們來建立一個提示訊息元件，因為串接功能...
react-hot-toast 是一個專為 React 設計的輕量級通知提示（toast）套件。預設有成功、失敗、loading(Promise) 三種類型的...
我們在上一個篇章中完成了信箱的驗證設定後，今天就可以接著進行 Google 與 Facebook 的部分，設定完成後即可讓使用者以自己 Google 與 Fac...
Cloudinary 是一個雲端媒體管理平台，主要提供需要大量處理及優化圖片及影片的開發者管理及優化服務，可以藉由平台上傳、儲存及管理資源，並且讓媒體資源在不...
經過前一篇文章的操作與設定，我們已經將 Firebase 引入至 React 專案中，今天就來串接資料庫吧！ 串連 Firestore database 首先先...
在上篇文章中，我已稍微提及了本次專案所使用的驗證工具——Zod。Zod 是專為 TypeScript 設計的資料驗證工具，就像人體的免疫系統，確保資料結構在...
Annie
ysl0628
iThome鐵人賽
看影片追技術