iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

0 Like 0 留言 12 瀏覽

鐵人賽自我挑戰組 DAY 10

我獨自開發 - Supabase 打造全端應用系列第 10 篇

技術第十關 - 快速建立地下城：Supabase UI Library

在前面的文章中，已經學會了如何建立和管理 Supabase 後端服務。今天要介紹的是 Supabase UI Library 能快速建立美觀且功能完整的 Su...

william ‧ 2025-09-23

0 Like 0 留言 12 瀏覽

鐵人賽 Software Development DAY 10

我獨自開發 - 用 Supabase 打造全端應用系列第 10 篇

技術第十關 - 快速建立地下城：Supabase UI Library

在前面的文章中，已經學會了如何建立和管理 Supabase 後端服務。今天要介紹的是 Supabase UI Library 能快速建立美觀且功能完整的 Su...

william ‧ 2025-09-23

0 Like 0 留言 32 瀏覽

鐵人賽自我挑戰組 DAY 9

我獨自開發 - Supabase 打造全端應用系列第 9 篇

技術第九關 - 有效操控暗影士兵：Supabase AI 提示詞

什麼是 AI 提示詞？身為開發者，我們經常需要查閱文件、思考最佳實踐，還要處理各種技術細節。而 Supabase 官方提供專門開發 Supabase 應用的...

william ‧ 2025-09-22

0 Like 0 留言 15 瀏覽

鐵人賽 Software Development DAY 9

我獨自開發 - 用 Supabase 打造全端應用系列第 9 篇

技術第九關 - 有效操控暗影士兵：Supabase AI 提示詞

什麼是 AI 提示詞？身為開發者，我們經常需要查閱文件、思考最佳實踐，還要處理各種技術細節。而 Supabase 官方提供專門開發 Supabase 應用的...

william ‧ 2025-09-22

0 Like 0 留言 50 瀏覽

鐵人賽自我挑戰組 DAY 8

我獨自開發 - Supabase 打造全端應用系列第 8 篇

技術第八關 - 召喚暗影士兵：Supabase MCP

什麼是 MCP？ MCP（Model Context Protocol）是一個開放標準，讓 AI 助手能夠安全地連接和操作外部系統。簡單來說： MCP 就像...

william ‧ 2025-09-21

0 Like 0 留言 34 瀏覽

鐵人賽 Software Development DAY 8

我獨自開發 - 用 Supabase 打造全端應用系列第 8 篇

技術第八關 - 召喚暗影士兵：Supabase MCP

什麼是 MCP？ MCP（Model Context Protocol）是一個開放標準，讓 AI 助手能夠安全地連接和操作外部系統。簡單來說： MCP 就像...

william ‧ 2025-09-21

0 Like 0 留言 26 瀏覽

鐵人賽自我挑戰組 DAY 7

我獨自開發 - Supabase 打造全端應用系列第 7 篇

技術第七關 - Supabase 自部署：打造專屬的後端服務

除了使用 Supabase 官方雲端平台，你也可以選擇在自己的伺服器上部署 Supabase！這就像是把整個 Supabase 搬到你自己家裡，完全由你掌控。...

william ‧ 2025-09-20

0 Like 0 留言 31 瀏覽

鐵人賽 Software Development DAY 7

我獨自開發 - 用 Supabase 打造全端應用系列第 7 篇

技術第七關 - Supabase 自部署：打造專屬的後端服務

除了使用 Supabase 官方雲端平台，你也可以選擇在自己的伺服器上部署 Supabase！這就像是把整個 Supabase 搬到你自己家裡，完全由你掌控。...

william ‧ 2025-09-20

0 Like 0 留言 64 瀏覽

鐵人賽自我挑戰組 DAY 6

我獨自開發 - Supabase 打造全端應用系列第 6 篇

技術第六關 - Supabase CLI 常用指令大全

在前面的文章中，我們已經學會了 Supabase CLI 的基本安裝和使用。今天要為大家整理一份完整的常用指令清單，讓你在開發過程中能夠快速查找和使用這些實用...

william ‧ 2025-09-19

0 Like 0 留言 72 瀏覽

鐵人賽 Software Development DAY 6

我獨自開發 - 用 Supabase 打造全端應用系列第 6 篇

技術第六關 - Supabase CLI 常用指令大全

在前面的文章中，我們已經學會了 Supabase CLI 的基本安裝和使用。今天要為大家整理一份完整的常用指令清單，讓你在開發過程中能夠快速查找和使用這些實用...

william ‧ 2025-09-19

0 Like 0 留言 82 瀏覽

鐵人賽自我挑戰組 DAY 5

我獨自開發 - Supabase 打造全端應用系列第 5 篇

技術第五關 - Supabase CLI（下）- 本地資料表建立與雲端同步

在上集中，我們學會了如何安裝、設定 Supabase CLI 以及基本指令的使用。這一集將用最簡單的方式示範如何本地建立資料表、同步到雲端，以及進行資料填充。...

william ‧ 2025-09-18

0 Like 0 留言 73 瀏覽

鐵人賽 Software Development DAY 5

我獨自開發 - 用 Supabase 打造全端應用系列第 5 篇

技術第五關 - Supabase CLI（下）- 本地資料表建立與雲端同步

在上集中，我們學會了如何安裝、設定 Supabase CLI 以及基本指令的使用。這一集將用最簡單的方式示範如何本地建立資料表、同步到雲端，以及進行資料填充。...

william ‧ 2025-09-18

0 Like 0 留言 44 瀏覽

鐵人賽 Software Development DAY 4

我獨自開發 - 用 Supabase 打造全端應用系列第 4 篇

技術第四關 - Supabase CLI（上）- 安裝、設定、指令

Supabase CLI 是開發者在本地環境中管理 Supabase 專案的強大工具。透過 CLI，你可以在本地建立完整的 Supabase 開發環境，包括資...

william ‧ 2025-09-17

0 Like 0 留言 85 瀏覽

鐵人賽 Software Development DAY 3

我獨自開發 - 用 Supabase 打造全端應用系列第 3 篇

技術第三關 - Supabase 官方文件導覽

今天要介紹的是 Supabase 的官方文件中導覽列，摘要整個網站的文件，將幫助你快速了解 Supabase 的各項功能，後續文章將介紹使用方式。官網文件導...

william ‧ 2025-09-16

0 Like 0 留言 101 瀏覽

鐵人賽 Software Development DAY 2

我獨自開發 - 用 Supabase 打造全端應用系列第 2 篇

技術第二關 - Supabase 從零基礎到專業開發者

為什麼 Supabase 適合所有人？ Supabase 就像主角獨自擁有的「系統」，裡面有各種不同複雜度的工具，能在這個工具箱中找到適合自己目前技能水平的工...

william ‧ 2025-09-15

0 Like 0 留言 108 瀏覽

鐵人賽 Software Development DAY 1

我獨自開發 - 用 Supabase 打造全端應用系列第 1 篇

技術第一關 - 打造全端應用的秘密武器：Supabase

故事介紹「身為前端開發者，是否也曾為後端開發頭痛？」大家好我是William，身為前端開發者，在開發自己的專案時，經常需要處理後端的資料庫、認證等功能。傳...

william ‧ 2025-09-14

0 Like 0 留言 1218 瀏覽

技術 Build a guestbook with Next.js, NextAuth and Supabase (supabase + nextauth 開發auth登入留言板)

Stack Next.js as a framework NextAuth (Authentication for Next.js) Supabase (gu...

eliaschen ‧ 2023-02-11

0 Like 0 留言 613 瀏覽

鐵人賽 Modern Web DAY 21

Full Stack Web Development 網站實作系列第 21 篇

技術 Day 21 使用Next.js和 Supabase -- CRUD(2)

Twimg.js (Create 功能)TwUpdate.js (Update 功能)TwDelete.js (Delete 功能) // components...

tjabi ‧ 2022-10-06

0 Like 0 留言 1695 瀏覽

鐵人賽 Modern Web DAY 19

Full Stack Web Development 網站實作系列第 19 篇

技術 Day 19 使用Next.js, Tailwind CSS 和 Supabase 做一個影像畫廊 image gallery app (11) -- Deploy佈署到 Vercel

(1) push 程式碼到 gitHub(2) Import 華國美學畫廊(image gallery app) 到 Vercel(3) 3-1 環境變數(En...

tjabi ‧ 2022-10-04

0 Like 0 留言 888 瀏覽

鐵人賽 Modern Web DAY 17

Full Stack Web Development 網站實作系列第 17 篇

技術 Day 17 使用Next.js, Tailwind CSS 和 Supabase 做一個影像畫廊 image gallery app (9) -- Head 元件

更改網頁的 title，建立 Meta 元件：(1)更改網頁 title 及其他 meta 資料(2)更改 Contact Us 網頁 title(3)更改個別...

tjabi ‧ 2022-10-02

0 Like 0 留言 774 瀏覽

鐵人賽 Modern Web DAY 16

Full Stack Web Development 網站實作系列第 16 篇

技術 Day 16 使用Next.js, Tailwind CSS 和 Supabase 做一個影像畫廊 image gallery app (8) -- 顯示 Supabase 資料在螢幕上

繼續加其他文字資料到圖卡上，增加圖片 title 到圖卡上。在 /components/ImageCard.js 加上下列指令。 <div classNa...

tjabi ‧ 2022-10-01

0 Like 0 留言 745 瀏覽

鐵人賽 Modern Web DAY 15

Full Stack Web Development 網站實作系列第 15 篇

技術 Day 15 使用Next.js, Tailwind CSS 和 Supabase 做一個影像畫廊 image gallery app (6) -- 顯示 Supabase 資料在螢幕上

將 Supabase 資料秀在螢幕上從 Supabase 成功讀取資料後，要秀出這些資料在螢幕上，需要兩個動作。每一個影像(image)需要一個圖片卡來放圖片及...

tjabi ‧ 2022-09-30

0 Like 0 留言 1085 瀏覽

鐵人賽 Modern Web DAY 14

Full Stack Web Development 網站實作系列第 14 篇

技術 Day 14 使用Next.js, Tailwind CSS 和 Supabase 做一個影像畫廊 image gallery app (5) -- 讀取 Supabase 資料

讀取 Supabase 資料首先安裝 supabase-js： npm i @supabase/supabase-js 接著，在根目錄，建立 client.j...

tjabi ‧ 2022-09-29

0 Like 0 留言 724 瀏覽

鐵人賽 Modern Web DAY 13

Full Stack Web Development 網站實作系列第 13 篇

技術 Day 13 使用Next.js, Tailwind CSS 和 Supabase 做一個影像畫廊 image gallery app (4) -- Supabase

Supabase:到 supabase.com 用您的 github 帳號註冊，出現下面驗證畫面，驗證成功後，會進到 supabase dashboard。進...

tjabi ‧ 2022-09-28

0 Like 0 留言 1275 瀏覽

鐵人賽 Modern Web DAY 12

Full Stack Web Development 網站實作系列第 12 篇

技術 Day 12 使用Next.js, Tailwind CSS 和 Supabase 做一個影像畫廊 image gallery app (3) -- Navbar

新增 Navbar 至每個網頁頂端：利用 Next 的 Layout 元件，來建立每個網頁都可以看到的 Navbar。新增 components/Layout....

tjabi ‧ 2022-09-27

0 Like 0 留言 10902 瀏覽

鐵人賽 Software Development DAY 10

IT邦鐵人賽文章搜尋引擎系列第 10 篇

技術 [Day 10] Serverless Database - 我才不會喜歡上像 supabase 這樣的資料庫呢！！ |【搜尋引擎製作錄】

Github, Over Engineering 前面三篇我麼講述了如何實作網路爬蟲，從網頁上擷取資料。接下來我們要用一天的篇幅，簡單介紹如何將爬蟲所擷取的初始...

tainvecs ‧ 2022-09-25

0 Like 0 留言 981 瀏覽

鐵人賽 Modern Web DAY 10

Full Stack Web Development 網站實作系列第 10 篇

技術 Day 10 使用Next.js, Tailwind CSS 和 Supabase 做一個影像畫廊 image gallery app (1)

這個 app 將從 supabase 讀取資料，在透過自製 Tailwind CSS 元件，呈現類似 netflix，hulu 的影像畫廊(image gall...

tjabi ‧ 2022-09-25

技術 第十關 - 快速建立地下城：Supabase UI Library

技術 第十關 - 快速建立地下城：Supabase UI Library

技術 第九關 - 有效操控暗影士兵：Supabase AI 提示詞

技術 第九關 - 有效操控暗影士兵：Supabase AI 提示詞

技術 第八關 - 召喚暗影士兵：Supabase MCP

技術 第八關 - 召喚暗影士兵：Supabase MCP

技術 第七關 - Supabase 自部署：打造專屬的後端服務

技術 第七關 - Supabase 自部署：打造專屬的後端服務

技術 第六關 - Supabase CLI 常用指令大全

技術 第六關 - Supabase CLI 常用指令大全

技術 第五關 - Supabase CLI（下）- 本地資料表建立與雲端同步

技術 第五關 - Supabase CLI（下）- 本地資料表建立與雲端同步

技術 第四關 - Supabase CLI（上）- 安裝、設定、指令

技術 第三關 - Supabase 官方文件導覽

技術 第二關 - Supabase 從零基礎到專業開發者

技術 第一關 - 打造全端應用的秘密武器：Supabase

技術 Build a guestbook with Next.js, NextAuth and Supabase (supabase + nextauth 開發auth登入留言板)

技術 Day 21 使用Next.js和 Supabase -- CRUD(2)

技術 Day 19 使用Next.js, Tailwind CSS 和 Supabase 做一個影像畫廊 image gallery app (11) -- Deploy佈署到 Vercel

技術 Day 17 使用Next.js, Tailwind CSS 和 Supabase 做一個影像畫廊 image gallery app (9) -- Head 元件

技術 Day 16 使用Next.js, Tailwind CSS 和 Supabase 做一個影像畫廊 image gallery app (8) -- 顯示 Supabase 資料在螢幕上

技術 Day 15 使用Next.js, Tailwind CSS 和 Supabase 做一個影像畫廊 image gallery app (6) -- 顯示 Supabase 資料在螢幕上

技術 Day 14 使用Next.js, Tailwind CSS 和 Supabase 做一個影像畫廊 image gallery app (5) -- 讀取 Supabase 資料

技術 Day 13 使用Next.js, Tailwind CSS 和 Supabase 做一個影像畫廊 image gallery app (4) -- Supabase

技術 Day 12 使用Next.js, Tailwind CSS 和 Supabase 做一個影像畫廊 image gallery app (3) -- Navbar

技術 [Day 10] Serverless Database - 我才不會喜歡上像 supabase 這樣的資料庫呢！！ |【搜尋引擎製作錄】

技術 Day 10 使用Next.js, Tailwind CSS 和 Supabase 做一個影像畫廊 image gallery app (1)

標記使用者

技術第十關 - 快速建立地下城：Supabase UI Library

技術第十關 - 快速建立地下城：Supabase UI Library

技術第九關 - 有效操控暗影士兵：Supabase AI 提示詞

技術第九關 - 有效操控暗影士兵：Supabase AI 提示詞

技術第八關 - 召喚暗影士兵：Supabase MCP

技術第八關 - 召喚暗影士兵：Supabase MCP

技術第七關 - Supabase 自部署：打造專屬的後端服務

技術第七關 - Supabase 自部署：打造專屬的後端服務

技術第六關 - Supabase CLI 常用指令大全

技術第六關 - Supabase CLI 常用指令大全

技術第五關 - Supabase CLI（下）- 本地資料表建立與雲端同步

技術第五關 - Supabase CLI（下）- 本地資料表建立與雲端同步

技術第四關 - Supabase CLI（上）- 安裝、設定、指令

技術第三關 - Supabase 官方文件導覽

技術第二關 - Supabase 從零基礎到專業開發者

技術第一關 - 打造全端應用的秘密武器：Supabase