熱點評！零基礎：如何用AI三小時上線自己的小程序

2023-05-04 18:02:15 來源：人人都是產品經理

ChatGPT的出現是為了分擔人類的部分工作，AI還具有非常大的想象空間。例如，本文作者利用AI開發了一個小程序，解決不知道每天午飯吃什么的難題。他是怎么做到的呢？本文作者對此進行了展示和經驗總結，希望對你有幫助。

上一篇文章分享了我是如何利用ChatGPT高效完成一段超長SQL的優化工作的，依照文中分享的思路，我又陸續完成了幾個超長SQL的優化任務，性能都提升了幾十倍，幾次實操下來基本已經熟練掌握了一些SQL優化的思路。

【資料圖】

圖為后續優化的SQL運行情況

AI的效率之高和學習成本之低，讓我想到了是否能借助AI做更多的嘗試，比如零基礎開發一款App、一個網頁、一個小程序？

說干就干，結合之前的工作經驗以及用戶需求洞察，很快我確定了產品載體和功能：

【載體】：App開發成本較高，不適合零基礎進行；網頁開發難度小，但功能有限且增長慢留存低；小程序依附于微信，開發成本低且功能更豐富，更易于傳播，是一個不錯的選擇。

【功能】：想要快速驗證產品可行性，最簡單最直接的一定是工具類產品。因此我把產品定位為即時工具，幫助用戶解決日常生活中幾乎每天都會遇到的一個痛點—— 午飯吃什么？

最終我決定借助AI，在一天之內開發一個小程序：今天吃什么？

一、準備工作

準備工作其實很簡單，因為有過相關經驗，所以十分鐘左右就完成了。

1.用郵箱注冊一個微信小程序賬號，完成個人實名認證；

2.根據產品功能，選擇所屬類型；

3.設計logo：借助AI設計網站，根據產品名稱、類型，5分鐘完成logo設計（logo設計網站也是由ChatGPT推薦的^_^）

4.下載微信開發工具，創建項目，進入開發

二、需求背景描述

今天吃什么其實是一個非常簡單的功能，通過GPT了解到前端開發的基本思路（HTML+CSS+JS）后，我把需求分成三個部分進行描述：

內容：一個文本展示框，一個按鈕布局：文本框和按鈕在頁面居中的位置，按鈕在文本下方交互：點擊開始按鈕后，按鈕文案變為停止，文本開始隨機滾動內容，直到用戶再次點擊按鈕，隨機滾動的內容為50道菜名（這些菜名也是由GPT推薦的^_^）

三、代碼編寫及調試

掌握了熟練的prompt技巧后，根據我的需求描述，GPT很快就給出了第一份具體的代碼，然后我把代碼貼到了項目中進行調試：

代碼內容

第一次運行效果

很顯然，樣式和功能都不太符合我們的要求：布局過于簡陋，交互也不符合預期。

于是我向GPT進一步完善我的需求并指出問題，GPT很快給出了修改方案：

樣式：調整間距、顏色、布局、圓角等（GPT給出相應字段，具體數值可以自行調整）交互：修改切換間隔、停止時的顯示、開關控制自動停止等

經過多輪的溝通和修改，最終的效果如圖：

到這里其實已經基本完成了，但感覺有點過于簡單，于是我又想到是否能增加一個頁面：今天喝什么，通過底部的Tab欄進行切換，頁面的布局和交互完全一致。

于是繼續提問GPT，如何增加Tab并實現切換，同樣給出了非常標準的代碼，并一次性調試成功，測試過程中發現不能分享頁面，又詢問GPT原因并配置了參數。

調整了部分樣式參數后，v_1.1.0版本全部開發完成，成功提交審核并發布上線，該版本實現的功能有：

隨機選擇一個午餐/奶茶可控制是否自動停止可Tab切換不同模版

點擊體驗小程序??

四、總結

這依然是一次非常簡單的嘗試，只是嘗試的方向從SQL優化變成了相對復雜的前端開發。

從idea到上線，只花了3個小時，整個流程中，除了手動調整樣式的數值，沒有寫一行代碼，全部由GPT幫助我完成，而我的主要任務依然是做好prompt的輸入。而經過這段時間和GPT的交流，我也總結出了一些prompt方法論，能幫助我們在對話的過程中，得到更好的答案：

背景介紹：當前訴求的一些隱形背景，比如此次的背景就是：我沒有前端開發的能力，但是想自己研發微信小程序。明確目的：盡可能準確、清晰地描述出最終想要達到的目的、效果，比如此次的目的就是：給出具體的小程序代碼和開發流程需求描述：對目的的細節要求補充，比如此次的需求就是對小程序的界面元素、布局、交互效果的描述糾錯調整：一旦發現GPT有偏離或者不符合需求的地方，一定要第一時間直接指出錯誤，否則會越跑越偏，最后可能整個對話的內容就脫離控制了，可能需要重新發起對話。 Magic Words：最有用也最常用的一個詞組是 “step by step” ，這是GPT官方給出的一個使用手冊詞匯，會讓GPT分步驟給出更有邏輯性的回復。

當然這只是一次淺嘗輒止的案例，對于我個人來說只是完成了一個極簡工具小程序的開發上線和了解到了一些基本的前端開發知識，對于熟練的前端開發來說可能就是一個小時工作量，但我分享的目的依然是打工人如何利用強大的GPT來幫助自己解決不擅長領域的問題以及學習成長，借助GPT來快速低成本地實現一些單靠自己難以落地的想法，大膽的嘗試總是沒錯的。

后續我會繼續借助ChatGPT、Claude（和GPT一樣，但不用且免費）學習和實踐一些小程序開發的知識，例如本次未涉及到的API接口、數據庫、函數等，逐漸拓展自己的技能樹，做出一些簡單實用好玩的產品，歡迎持續關注

本文由 @夏撈師原創發布于人人都是產品經理，未經作者許可，禁止轉載。

題圖來自Unsplash，基于CC0協議。

該文觀點僅代表作者本人，人人都是產品經理平臺僅提供信息存儲空間服務。

關鍵詞：