AI編程助手：使用ChatGPT製作HTML表單

這次的教程會有趣一點和同時也會複雜些，我們會試試ChatGPT是否可以製作表單的應用；
表單在HTML5來說，是很常用的東西，例如聯絡我們、註冊、提交問題等，都會用上表單。

簡介

以下是這次文章的內容簡介：

  • 製作流程
  • 製作一個最簡化的HTML5表單
  • 建立Firebase帳號
  • 把表單提交到Firebase

如果你需要進行實作，需要以下的開發工具：

  • AI工具：ChatGPT – POE.com 或 OpenAI 版本也可，
  • 開發工具
    • CodeSandbox.com 或 VSCode
    • Google帳戶
    • Firebase帳戶

製作流程

製作表單，首先要理解一些製作流程，目前主流的做法，都是在表單填寫、按提交後，
相關資料會透過API傳送到後台，我們的項目來說，就是Firebase 的數據庫；相關架構，如下圖：

而流程如下：

  1. 透過HTML表單獲取使用者的信息
  2. 把信息包裝為JSON
  3. 使用Firebase SDK傳送給Firebase
  4. Firebase 系統把數據存到數據庫
  5. Firebase 返回操作的狀態
  6. 顯示成果

而這次的實驗，我們需要ChatGPT幫助編寫以下功能：

  • HTML 表單
  • 使用Firebase SDK 儲存表單數據
  • 修復問題及優化

製作一個最簡化的HTML5表單

首先，利用以下的PROMPT製作HTML5表單

PROMPT

請編寫HTML5的聯繫表單
支持：Response Desktop / tablet / mobile 
表單內容：
- 名字
- 郵件
- 查詢信息
- 提交按鈕
- 重置按鈕

poe 分享連結：https://poe.com/s/oIadK03EECk8KAI2BScf

把ChatGPT製作的代碼放到HTML中，例如放在Code Sandbox 上

這是完成後的效果：

關於Firebase

之後，就需要處理後端和連結後端的事情了；

由於這次的後端是使用Firebase，所以先簡單介紹有關Firebase；

Firebase是Google開發的雲資料庫與後端即服務平台。

開發者可不必搭建和維護自己的伺服器即可開發出具有雲端功能的應用程式，例如認證、資料庫、推播通知等。Firebase提供的服務有:

  • Realtime Database(實時資料庫)
  • Cloud Firestore(無結構化的資料庫)
  • Authentication(認證)
  • Storage(文件儲存)
  • Cloud Functions(雲函式)

而大家可以使用Google帳戶登陸Firebase提供後台（Console）並開啟和設置以上的功能；

建立Firebase帳號

首先你需要一個google帳號，然後根據以下步驟創建Firebase專案（Project)和數據庫

步驟 1: 前往Firebase 建立帳號

  • 瀏覽 google 的Firebase 網站:https://firebase.google.com
  • 點擊 左上角的"Go to Console"
  • 使用你的 Google 帳號登入,或建立新的 Google 帳號

步驟 2: 建立新的Firebase 專案

  • 點擊"Add Project"
  • 輸入專案名稱(project name),然後點擊「Continue」
  • Disable Google Analytics （這樣會快點完成設置）
  • 點擊"Create Project" 按鈕
  • 完成後，你會看到項目的主畫面

步驟 3: 創建 Firebase Database

  • 在左側專案總管中 點擊「Realtime Database」
  • 選擇「Create database」
  • 選擇数据库的地理位置 > 「Select Region」（例如 Singapore)
  • 選擇Start in Testbase (這會讓你之後可以進行數據存取)
  • 然後，點擊"Enable"
  • 完成後，你會看到這個畫面

使用Firebase SDK 儲存表單數據

下一步，就是使用Firebase儲存數據；

使用Firebase之前，你可以參考一下官方的文檔：
https://firebase.google.com/docs/web/setup

不過Firebase官方的文檔有點難看懂；所以，透過ChatGPT幫忙可能是更好的選擇；

這是給ChatGPT的Prompt

請編寫Javascript代碼把表單數據提交至firebase的database上
表單數據：
- 名字
- 郵件
- 查詢信息
並提供相關HTML代碼

當輸出代碼後，把相關Javascript代碼放在script.js內。
並且修改HTML代碼：

poe 分享連結：https://poe.com/s/8Jhkmrt4nAAJwDUXxQDE

由於ChatGPT，不知道我的Firebase設定，需要把設定添加到以下代碼位置

const firebaseConfig = {
    // 將您的Firebase配置放在這裡
};

而這些內容，可以在Firebase 後台找到：
Project Overview -> Project Setting -> Your apps

如果ChatGPT沒有提供有關如何連結Firebase，可以透過以下prompt追問:

請提供連結firebase 數據庫(realtime database)的HTML代碼

而你應該看的這段代碼：

只需要把這段代碼放在 <head></head>內就可以了。

測試表單

返回HTML頁面，輸入相關信息和內容，就可以成功儲存到firebase數據庫。

在Firebase後台，你會看到這些records

需要注意的事情

暫時這個程序有一個問題，就是API密鑰 (apiKey)寫在javascript呢，其他用戶簡單的通過Browser的查看代碼功能，輕鬆獲取你的ApiKey來做別的事情，例如使用程序不斷提交紀錄。

要解決相關的問題，是比較複雜，會在之後的文章解說的。

這個問題也可以請教ChatGPT提供

相關Prompt 如下

如何隱藏firebase的Config 和apiKey，請提供相關javascript代碼

用後感 / 總結

以ChatGPT製作連結Firebase的表單，是可以省了不少開發時間，例如製作表單的HTML，基本Javascript代碼。
但是，還說需要學習和了解有關Firebase才能完成任務，例如建立項目和建立權限等。
對於新手或者沒有編程知識的人來說，是比較困難的。

另外，ChatGPT也不會主動提出如何保護API Key等編程之外要考慮的事情，當然你詢問它時候，
它可以給你不錯的建議。

簡單來說，到了這個難度（需要前端，後端、數據庫）的軟件項目，大家需要有一定的編程/軟件知識，例如一個動作後面有哪些後繼處理，或者整個系統有哪些元件等。

和之前的文章一樣，歡迎大家跟住我的文章自己試做一次，體驗Chatgpt能為你做到多少。

大家如果想和我討論相關的主題，或有事請教，可透過Facebook和Twitter聯繫我；

另外，請加入我的FB專頁，有新文章發布時，大家就能立即知道了。
Facebook 專頁連結：https://www.facebook.com/kencoder1024
Twitter連結：https://twitter.com/kenlakoo

繼續AI輔助編程的課題，這次會試試用chatgpt製作html元件，然後讓成果放在你的網站上用；

詳細做法，請閱讀我的文章：
https://kendevlog.wordpress.com/2023/06/04/chatgpt-html5-component/

發表留言

在 WordPress.com 建立免費網站或網誌.

向上 ↑