AI編程助手：使用ChatGPT製作簡單HTML5的應用

自從ChatGPT面世，很多人開始說ChatGPT可用代替編程人員，或者什麼開發者會被淘汰；
但是，其實有多少非編程專業的人認真試下自己可否直接用ChatGPT製造程序？

這個系列，我會嘗試解說在0編程經驗下如何利用chatgpt製作軟件；
我估計在開發中，應該需要用上某些編程經驗或知識才能完成任務；
這次分享是最簡單的HTML5 web應用 — 計時器

開發 & AI 工具

建議用以下工具進行開發：

  1. Code Sandbox
  2. VSCode + LiveServer

而文章主要描述Code Sandbox 環境下的操作

而AI工具：
建議用OpenAI的ChatGPT，如果用不了，可以用poe.com的CHATGPT；
而文章中會以Poe版本的CHATGPT來進行教學。

Code Sandbox

首先進入Code Sandbox的網站: https://codesandbox.io ，然後註冊或登入平台；

使用以下步驟開始項目

  • 點擊 “New Sandbox"
  • 選擇 static (HTML5的標誌)
  • 修改項目名稱，例如 Timer App

編寫 Prompt 提示

如果需要指示AI (ChatGPT)進行編程，你需要提供足夠的信息讓他進行開發，包括：

  • 開發語言/框架
  • 目標平台
  • 使用的開發軟件
  • 應用名稱
  • 功能和需求

以下是製作 計時器的 Prompt

請以以下需求編寫一個程序：

  • 開發語言/框架：HTML, JS, CSS
  • 目標平台: HTML5 網頁
  • 使用的開發軟件：Code Sandbox
  • 應用名稱: 計時器
  • 功能和需求
    • 開始
    • 暫停
    • 重置

複製代碼及Debug

把ChatGPT輸出的代碼複製到CodeSandbox中的index.html，然後保存（Cmd+S / Ctrl+S）
如果你獲取的和我一樣，你會看到這個畫面：

當然，這是一個有問題的結果；你可以用以下的一句放在<head></head>修復

<meta charset="utf-8" />

或問ChatGPT 如何修改，相關prompt例子：

出現亂碼問題，請修改

優化和完善

ChatGPT製作的程序，雖然完成了，但是還有很多問題（比較簡陋），這些一些問題：

  • 沒有表示時 / 分 / 秒
  • 沒有考慮響應式介面（即是不支持mobile 界面）

改善界面

改變為“時/分/秒”的Prompt

修改界面，把時/分/秒能獨立顯示

修改後，雖然界面優化了，但是出現BUG，需要額外進行修復；
問題出現在這段代碼 （class="time-value()``"：

使用建議代碼優化後，會出現這樣的界面

<div class="timer-section">
      <div class="timer-value" id="hours">00</div>
      <div class="timer-label">時</div>
    </div>
    <div class="timer-section">
      <div class="timer-value() id="minutes">00</div>
      <div class="timer-label">分</div>
    </div>
    <div class="timer-section">
      <div class="timer-value" id="seconds">00</div>
      <div class="timer-label">秒</div>
    </div>

你們可以自行解決，或使用ChatGPT為你Debug。

修復後，就正常操作了

支持手機界面

如果代碼不是Responsive，可以使用這個Prompt來改善

請優化代碼，令界面Responsive

修改後，還沒有什麼改進；也沒有加入常用的

<meta name="viewport" content="width=device-width, initial-scale=1.0">

完成效果

基本上，除了一些小問題，大概能完成這個簡單的HTML 小應用；
但是，還是需要大家懂一點HTML/JS/CSS的基礎。

CodeSandbox的分享連結在這裡：
https://codesandbox.io/s/timerapp-628viy?file=/index.html

OpenAI 版的ChatGPT

以上的教學，是基於Poe ChatGPT的結果，如果使用OpenAI的ChatGPT, 效果大致相同，也是沒有考慮charset 和 mobile responsive；

不過，他有一個好處，有更好的代碼注釋(Comment)和代碼更整潔，這2點對大家來說很重要；
所以，比較推薦使用OpenAI的ChatGPT。

這是chatgpt的版本：
https://codesandbox.io/s/simple-timer-chatgpt-tu517g?file=/index.html

用後感 / 總結

其實ChatGPT編程寫的程序算不錯，排版、命名、邏輯等都合格；而未如理想的地方如下：

  • 界面不夠吸引 — 也許是Prompt的問題
  • 有Bug — 這對非開發者來說是很大問題，他們會不懂解決或不懂這樣去反饋；
  • 考慮不週全 — 例如沒有考慮encoding和responsive方面，當然可以透過Prompt去解決，但是資深程序員會給予建議來補充的你需求。
  • 配合Best Practice — 例如某些地方應 const 而不是 let，沒有做Error Checking等。

雖然ChatGPT還是有不少瑕疵，但是作為一個項目 Idea 的起點 (Prototype)是很好；而單獨功能，我相信他可以勝任，當然還需要程序員加以修正才能上線；

建議大家試試用一下ChatGPT + CodeSandbox來體驗一下AI如何編程和效果；
可以歡迎大家分享你的Prompt和作品；卡在某些地方，也歡迎留言給我。

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

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

發表留言

在WordPress.com寫網誌.

向上 ↑