熱點(diǎn)評(píng)！零基礎(chǔ)：如何用AI三小時(shí)上線自己的小程序

2023-05-04 18:02:15 來(lái)源：人人都是產(chǎn)品經(jīng)理

ChatGPT的出現(xiàn)是為了分擔(dān)人類的部分工作，AI還具有非常大的想象空間。例如，本文作者利用AI開(kāi)發(fā)了一個(gè)小程序，解決不知道每天午飯吃什么的難題。他是怎么做到的呢？本文作者對(duì)此進(jìn)行了展示和經(jīng)驗(yàn)總結(jié)，希望對(duì)你有幫助。

上一篇文章分享了我是如何利用ChatGPT高效完成一段超長(zhǎng)SQL的優(yōu)化工作的，依照文中分享的思路，我又陸續(xù)完成了幾個(gè)超長(zhǎng)SQL的優(yōu)化任務(wù)，性能都提升了幾十倍，幾次實(shí)操下來(lái)基本已經(jīng)熟練掌握了一些SQL優(yōu)化的思路。

【資料圖】

圖為后續(xù)優(yōu)化的SQL運(yùn)行情況

AI的效率之高和學(xué)習(xí)成本之低，讓我想到了是否能借助AI做更多的嘗試，比如零基礎(chǔ)開(kāi)發(fā)一款A(yù)pp、一個(gè)網(wǎng)頁(yè)、一個(gè)小程序？

說(shuō)干就干，結(jié)合之前的工作經(jīng)驗(yàn)以及用戶需求洞察，很快我確定了產(chǎn)品載體和功能：

【載體】：App開(kāi)發(fā)成本較高，不適合零基礎(chǔ)進(jìn)行；網(wǎng)頁(yè)開(kāi)發(fā)難度小，但功能有限且增長(zhǎng)慢留存低；小程序依附于微信，開(kāi)發(fā)成本低且功能更豐富，更易于傳播，是一個(gè)不錯(cuò)的選擇。

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

最終我決定借助AI，在一天之內(nèi)開(kāi)發(fā)一個(gè)小程序：今天吃什么？

一、準(zhǔn)備工作

準(zhǔn)備工作其實(shí)很簡(jiǎn)單，因?yàn)橛羞^(guò)相關(guān)經(jīng)驗(yàn)，所以十分鐘左右就完成了。

1.用郵箱注冊(cè)一個(gè)微信小程序賬號(hào)，完成個(gè)人實(shí)名認(rèn)證；

2.根據(jù)產(chǎn)品功能，選擇所屬類型；

3.設(shè)計(jì)logo：借助AI設(shè)計(jì)網(wǎng)站，根據(jù)產(chǎn)品名稱、類型，5分鐘完成logo設(shè)計(jì)（logo設(shè)計(jì)網(wǎng)站也是由ChatGPT推薦的^_^）

4.下載微信開(kāi)發(fā)工具，創(chuàng)建項(xiàng)目，進(jìn)入開(kāi)發(fā)

二、需求背景描述

今天吃什么其實(shí)是一個(gè)非常簡(jiǎn)單的功能，通過(guò)GPT了解到前端開(kāi)發(fā)的基本思路（HTML+CSS+JS）后，我把需求分成三個(gè)部分進(jìn)行描述：

內(nèi)容：一個(gè)文本展示框，一個(gè)按鈕布局：文本框和按鈕在頁(yè)面居中的位置，按鈕在文本下方交互：點(diǎn)擊開(kāi)始按鈕后，按鈕文案變?yōu)橥Ｖ梗谋鹃_(kāi)始隨機(jī)滾動(dòng)內(nèi)容，直到用戶再次點(diǎn)擊按鈕，隨機(jī)滾動(dòng)的內(nèi)容為50道菜名（這些菜名也是由GPT推薦的^_^）

三、代碼編寫(xiě)及調(diào)試

掌握了熟練的prompt技巧后，根據(jù)我的需求描述，GPT很快就給出了第一份具體的代碼，然后我把代碼貼到了項(xiàng)目中進(jìn)行調(diào)試：

代碼內(nèi)容

第一次運(yùn)行效果

很顯然，樣式和功能都不太符合我們的要求：布局過(guò)于簡(jiǎn)陋，交互也不符合預(yù)期。

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

樣式：調(diào)整間距、顏色、布局、圓角等（GPT給出相應(yīng)字段，具體數(shù)值可以自行調(diào)整）交互：修改切換間隔、停止時(shí)的顯示、開(kāi)關(guān)控制自動(dòng)停止等

經(jīng)過(guò)多輪的溝通和修改，最終的效果如圖：

到這里其實(shí)已經(jīng)基本完成了，但感覺(jué)有點(diǎn)過(guò)于簡(jiǎn)單，于是我又想到是否能增加一個(gè)頁(yè)面：今天喝什么，通過(guò)底部的Tab欄進(jìn)行切換，頁(yè)面的布局和交互完全一致。

于是繼續(xù)提問(wèn)GPT，如何增加Tab并實(shí)現(xiàn)切換，同樣給出了非常標(biāo)準(zhǔn)的代碼，并一次性調(diào)試成功，測(cè)試過(guò)程中發(fā)現(xiàn)不能分享頁(yè)面，又詢問(wèn)GPT原因并配置了參數(shù)。

調(diào)整了部分樣式參數(shù)后，v_1.1.0版本全部開(kāi)發(fā)完成，成功提交審核并發(fā)布上線，該版本實(shí)現(xiàn)的功能有：

隨機(jī)選擇一個(gè)午餐/奶茶可控制是否自動(dòng)停止可Tab切換不同模版

點(diǎn)擊體驗(yàn)小程序??

四、總結(jié)

這依然是一次非常簡(jiǎn)單的嘗試，只是嘗試的方向從SQL優(yōu)化變成了相對(duì)復(fù)雜的前端開(kāi)發(fā)。

從idea到上線，只花了3個(gè)小時(shí) ，整個(gè)流程中，除了手動(dòng)調(diào)整樣式的數(shù)值，沒(méi)有寫(xiě)一行代碼，全部由GPT幫助我完成，而我的主要任務(wù)依然是做好prompt的輸入。而經(jīng)過(guò)這段時(shí)間和GPT的交流，我也總結(jié)出了一些prompt方法論，能幫助我們?cè)趯?duì)話的過(guò)程中，得到更好的答案：

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

當(dāng)然這只是一次淺嘗輒止的案例，對(duì)于我個(gè)人來(lái)說(shuō)只是完成了一個(gè)極簡(jiǎn)工具小程序的開(kāi)發(fā)上線和了解到了一些基本的前端開(kāi)發(fā)知識(shí)，對(duì)于熟練的前端開(kāi)發(fā)來(lái)說(shuō)可能就是一個(gè)小時(shí)工作量，但我分享的目的依然是打工人如何利用強(qiáng)大的GPT來(lái)幫助自己解決不擅長(zhǎng)領(lǐng)域的問(wèn)題以及學(xué)習(xí)成長(zhǎng)，借助GPT來(lái)快速低成本地實(shí)現(xiàn)一些單靠自己難以落地的想法，大膽的嘗試總是沒(méi)錯(cuò)的。

后續(xù)我會(huì)繼續(xù)借助ChatGPT、Claude（和GPT一樣，但不用且免費(fèi)）學(xué)習(xí)和實(shí)踐一些小程序開(kāi)發(fā)的知識(shí)，例如本次未涉及到的API接口、數(shù)據(jù)庫(kù)、函數(shù)等，逐漸拓展自己的技能樹(shù)，做出一些簡(jiǎn)單實(shí)用好玩的產(chǎn)品，歡迎持續(xù)關(guān)注

本文由 @夏撈師原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來(lái)自Unsplash，基于CC0協(xié)議。

該文觀點(diǎn)僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。

關(guān)鍵詞：