前端小白是如何利用chatgt用一周時間從0做一款微信小程序的
前端小白是如何利用chatgt用一周時間從0做一款微信小程序的
隨著chatgpt的大火，真的是在工作上給各行各業(yè)的人帶來了極大的便利，本人是一個java程序員，其實我自己是一直想開發(fā)一款屬于自己的小程序的，但是迫于對前端知識的貧瘠，考慮到要學的前端開發(fā)知識有很多，比如js,ts,前端框架vue,react...,最難受的是css樣式，最簡單的效果都要弄好久，每次想一想就放棄了。最近出來的chatgpt，讓我對這個想法重新有了信心，然后就是直接開干！
?確定好方向
為什么要做一個題庫小程序呢？
之前幫人家做過自動答題的程序，所以不少人問我有沒有相關網(wǎng)站的題庫，所以既然別人有這個需求，我覺得還是有做的可行性的。
??模仿同類產(chǎn)品
既然想好了要做什么，那我就直接去應用市場，微信小程序搜相關的應用，我一口氣下載和看了十幾款搜題程序，搜題大俠，題海，刷題神器，聚題庫...,總結(jié)了幾點：
提供了豐富的搜題方式，手動輸入文字，語音輸入，拍照識別
提供題庫，可以讓用戶自己練習
用戶可以自主上傳題庫
上面這幾點，是用戶的基礎功能，也就是滿足題庫app的基本條件。 但是很多題庫都沒有把三點都做到，有些有拍照但是沒有語音輸入，有些只有文字輸入，有些題庫很豐富但是不支持用戶自己導入題庫，而且絕大多數(shù)app動不動就要收費，而且收費還很高，我覺得這可以是我的突破點，作為個人開發(fā)者，我的成本肯定比他們低，所以程序在收費方面肯定比他們低或者不收費。
??策劃產(chǎn)品ui和功能
功能方面，我就先模仿他人的題庫app，先把基礎的功能做起來，第一步先把搜題功能做好，再做其他的功能。
搜題方式：實現(xiàn)手動輸入文字，語音輸入，拍照識別題目。
題庫來源：我初步想的是爬數(shù)據(jù)+第三方api+用戶上傳，這樣才能覆蓋面廣，而且題庫也會一直更新。
根據(jù)要做的功能就簡單畫了下草圖，自己不懂ui，審美也不太行就只能潦草一點了
??開發(fā)
后臺
后臺接口想了下，先暫定三個接口，為了接口不被輕易爬取，采用前臺加密，后臺解密的方式，每次請求都會攜帶秘鑰，解密成功才會正確響應。
查詢題庫接口
登錄接口
百度ocr接口
因為后端是自己老本行，花了一天左右差不多就做完了
前臺
前臺我首先調(diào)查了那幾款框架好做微信小程序，就是坑比較少（包括uniapp,taro,原生），因為自己直接稍微接觸過一點react，鑒于taro對react的適配性比較好，taro也一直在更新，所以我選擇taro（原生也考慮過，但是感覺要多花時間去了解，所以就pass啦）。
準備事項
開發(fā)小程序還是有很多準備的工作要做的，
比如得先注冊一個微信小程序賬號，每次發(fā)布就是需要登錄這個賬號來發(fā)布，
選擇小程序的類目，這個挺重要的，因為有些類目，個人開發(fā)者不能申請，所以要特別小心，因為我做的屬于題庫，所以我選擇了 信息查詢和教育兩個類目。
想一個容易被記住和被搜索到的小程序名稱。
設計一個圖標，我自己不會，就在圖標網(wǎng)站先找了一個差不多適合的。
用戶隱私保護指引，這個需要根據(jù)自己的小程序功能來填寫，向我這邊就需要麥克風和攝像機的權限，這個需要在里面說明用途，更新提交上去，這樣才能保證審核可以成功。
根據(jù)demo修改
我先去官網(wǎng)clone了個demo下來，下載了微信開發(fā)者工具，嘗試運行了下，發(fā)現(xiàn)還真有用Taro官網(wǎng)
然后自己先把首頁的樣子，用語言描述給chatgpt，給我畫出大概得雛形，然后再進行微調(diào)
如此往復，我就得到了一個簡潔的首頁
然后就是對接接口啦，查詢題庫，ocr的接口，還有登錄接口統(tǒng)統(tǒng)對接上去。 這里遇到了兩個比較坑的地方。
一個是微信官方有一個“微信同聲傳譯”插件，需要自己去市場里申請，結(jié)果發(fā)現(xiàn)自己死活申請不了，提示“個人主體不能申請”，可是我也看到類似的個人小程序也用了這個插件，這我就很迷糊了，憑什么我就不能申請成功，后面在我窮追不舍的搜索下，終于發(fā)現(xiàn)了另外的入口，申請成功！
申請步驟
去微信服務平臺搜一下
找到了微信同聲傳譯，登錄后選擇給哪個小程序添加，添加成功后去小程序的微信公眾平臺看已經(jīng)添加成功了，而且是已通過狀態(tài)。
獲取用戶的昵稱和頭像方式變了，之前只需要調(diào)用getUserProfile這個Api，在成功回調(diào)中就能獲取用戶信息，現(xiàn)在已經(jīng)廢棄了，現(xiàn)在需要開發(fā)者自己寫表單，用戶自己填寫頭像和昵稱，感覺這個會讓用戶操作變得麻煩，所以我暫時先不實現(xiàn)這個功能了，等到那天想到合適的操作邏輯再做
這里前前后后花了我三四天的時間（主要是下班來做，上班一般沒啥時間），主要是交互和摸清wx的api使用比較花時間，chatgpt在設計界面和交互真的幫了我很大的忙，還有一些前端錯誤他也能快速定位，并給出解決方案，給我節(jié)省了很多時間
發(fā)布
最后一步就是上傳代碼，提交審核，一般一天左右就會審核完成，再點擊發(fā)布，就能看到上線的小程序，這一刻心情還是無比的激動！??
??開發(fā)總結(jié)
使用chatgpt幫助我一個前端小白慢慢搭建起一個小程序的過程中，缺點在我看來是chatgpt并不會準確無誤地給出我想要的答案，大多數(shù)是比較符合的，但是肯定不是特別符合，需要自己一點一點的調(diào)整。
優(yōu)點是chatgpt每次告訴你答案的時候往往還會為我解答代碼的作用，這讓我更快地了解語言的一些特性和框架的使用，節(jié)省了自己去官網(wǎng)查文檔的時間，這讓我感覺自己是真的參與了這個前端開發(fā)，而不是隨意地copy答案。
最后非常感謝大家看到這，很高興分享這次的開發(fā)過程，總之就是有意思，效率是真的高。
