[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-如何與chatgpt合作生產並且部署一個短網址服務":3},{"id":4,"slug":5,"title":6,"description":7,"content":8,"date":9,"image":10,"imageAlt":6,"author":11,"categories":14,"path":20,"minRead":21},3430,"如何與chatgpt合作生產並且部署一個短網址服務","如何與chatGPT合作生產並且部署一個短網址服務","如何與chatGPT合作生產並且部署一個短網址服務 chatGPT問世之後一直想來與chatGPT合作產生一個 […]","\u003Ch1>如何與chatGPT合作生產並且部署一個短網址服務\u003C\u002Fh1>\n\u003Cp>chatGPT問世之後一直想來與chatGPT合作產生一個服務，最近總算花了一點時間完成這個小合作-部署短網址服務，因為設計很多程式碼細節，我在這篇僅紀錄與分享合作過程和遇到的問題。\u003C\u002Fp>\n\u003Ch2>確立目標\u003C\u002Fh2>\n\u003Cp>在開始之前，自己先訂了幾個小目標：\u003C\u002Fp>\n\u003Col>\n\u003Cli>目標是完成短網址服務\u003C\u002Fli>\n\u003Cli>要實際部署\u003C\u002Fli>\n\u003Cli>程式碼盡可能交給chatGPT生產，後來在實際合作過程中，我幾乎都是大膽直接複製貼上去跑服務\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Ch2>運用的環境與工具\u003C\u002Fh2>\n\u003Col>\n\u003Cli>nodeJS + express\u003C\u002Fli>\n\u003Cli>部署在Vercel上\u003C\u002Fli>\n\u003Cli>資料丟給firebase的realtime database\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Ch2>我們開始吧\u003C\u002Fh2>\n\u003Cp>一開始我就很暴力的直接問chatGPT\u003Cbr \u002F>\n\u003Cstrong>「如何使用node打造短網址服務，需要與firebase連結」\u003C\u002Fstrong>\u003Cbr \u002F>\n\u003Cimg decoding=\"async\" src=\"\u002Fapi\u002Fproxy-image?url=https%3A%2F%2Fpost.billxu.net%2Fwp-content%2Fuploads%2F2023%2F02%2F%E6%88%AA%E5%9C%96-2023-02-24-%E4%B8%8B%E5%8D%885.47.57.png\" alt=\"\" \u002F>\u003C\u002Fp>\n\u003Cp>根據chatGPT的回應，我完成了幾個步驟\u003C\u002Fp>\n\u003Col>\n\u003Cli>在firebase設定好環境\u003C\u002Fli>\n\u003Cli>從firebase取得node用的初始化與導入方法\u003C\u002Fli>\n\u003Cli>建立node服務\u003C\u002Fli>\n\u003Cli>完全遵照chatGPT回應貼上啟動服務的程式碼\u003C\u002Fli>\n\u003Cli>分別貼上「處理短網址」和「處理長網址」兩個api的程式碼\u003C\u002Fli>\n\u003Cli>貼上啟動express服務的程式碼\u003C\u002Fli>\n\u003Cli>啟動\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Cp>好啦其實我沒有那麼嚴謹，所以某些小細節我覺得怪怪還是有點修改，但基本上沒有太大問題。\u003Cbr \u002F>\n例如，chatGPT提供的作法是用require來引入，因為習慣問題我改成了import。還有chatGPT提供的程式碼是分段敘述，我組合起來時有餐入一點個人習慣，但這問題應該可以透過「請將程式碼組合成index.js」之類的prompt來調整。\u003C\u002Fp>\n\u003Cp>有時我也會問他一些函式寫法問題，像是下圖：\u003Cbr \u002F>\n\u003Cimg decoding=\"async\" src=\"\u002Fapi\u002Fproxy-image?url=https%3A%2F%2Fpost.billxu.net%2Fwp-content%2Fuploads%2F2023%2F02%2F%E6%88%AA%E5%9C%96-2023-02-24-%E4%B8%8B%E5%8D%886.08.47.png\" alt=\"\" \u002F>\u003Cbr \u002F>\n總之有稍微不懂就直接問，問爆XDDD\u003C\u002Fp>\n\u003Ch2>寫完就啟動啦！\u003C\u002Fh2>\n\u003Cp>當然沒那麼順利，剛剛那些步驟做完後，我很開心的輸入\u003C\u002Fp>\n\u003Cpre>\u003Ccode>npm run dev\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>然後就一如往常出現錯誤啦，\u003Cdel>chatGPT跟我的距離也沒多遠嘛\u003C\u002Fdel>。\u003Cbr \u002F>\n當然出現錯誤，我就會敘述清楚回報給chatGPT，像是下圖。\u003Cbr \u002F>\n\u003Cimg decoding=\"async\" src=\"\u002Fapi\u002Fproxy-image?url=https%3A%2F%2Fpost.billxu.net%2Fwp-content%2Fuploads%2F2023%2F02%2F%E6%88%AA%E5%9C%96-2023-02-24-%E4%B8%8B%E5%8D%886.11.51.png\" alt=\"\" \u002F>\u003C\u002Fp>\n\u003Cp>\u003Cstrong>這邊提到一個很有趣的狀況，其實chatGPT會漏給資訊唷\u003C\u002Fstrong>\u003Cbr \u002F>\n在短網址服務中，最重要的環節是將長網址轉換成一個隨機短字串，這邊一開始chatGPT居然只給我一個函式名稱就呼隆過去，我一開始就發現不對勁，果然啟動後發現這邊根本跑不動XDDD\u003Cbr \u002F>\n於是叫他補上，可惡ㄋ，我當免費仔也不能用騙啊。\u003Cbr \u002F>\n\u003Cimg decoding=\"async\" src=\"\u002Fapi\u002Fproxy-image?url=https%3A%2F%2Fpost.billxu.net%2Fwp-content%2Fuploads%2F2023%2F02%2F%E6%88%AA%E5%9C%96-2023-02-24-%E4%B8%8B%E5%8D%886.15.32.png\" alt=\"\" \u002F>\u003C\u002Fp>\n\u003Ch2>看起來順利執行了\u003C\u002Fh2>\n\u003Cp>補上後整體看起來有87像了，但他寫的程式碼他要跟我說怎麼測試啊( 你看使用者真的很懶)，所以就順口問了，啊這段程式碼怎麼測試。\u003Cbr \u002F>\n\u003Cimg decoding=\"async\" src=\"\u002Fapi\u002Fproxy-image?url=https%3A%2F%2Fpost.billxu.net%2Fwp-content%2Fuploads%2F2023%2F02%2F%E6%88%AA%E5%9C%96-2023-02-24-%E4%B8%8B%E5%8D%886.17.50.png\" alt=\"\" \u002F>\u003Cbr \u002F>\n\u003Cimg decoding=\"async\" src=\"\u002Fapi\u002Fproxy-image?url=https%3A%2F%2Fpost.billxu.net%2Fwp-content%2Fuploads%2F2023%2F02%2F%E6%88%AA%E5%9C%96-2023-02-24-%E4%B8%8B%E5%8D%886.18.01.png\" alt=\"\" \u002F>\u003Cbr \u002F>\n這之後開始進入一段時間不短的錯誤與改進攻防戰，因為服務不能正確運作，我就一直把錯誤狀況丟回去給他修改。\u003Cbr \u002F>\n大約來回四五次後提出來的程式碼版本終於能正常使用了，看起來沒啥問題。到這邊其實基本功能已經完成了，只是後來有想到一些防呆與檢查，chatGPT給我的版本處理的不是很好就稍微再修改過，未來有要這樣使用的話記得要提醒他加上檢查判斷。\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>但我覺得他已經完成任務！真的強啊！\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Ch2>補上介面\u003C\u002Fh2>\n\u003Cp>剛剛做的只有基本的node api，還沒有加上介面，當然這也得交給chatGPT囉。喂！快工作。\u003Cbr \u002F>\n\u003Cimg decoding=\"async\" src=\"\u002Fapi\u002Fproxy-image?url=https%3A%2F%2Fpost.billxu.net%2Fwp-content%2Fuploads%2F2023%2F02%2F%E6%88%AA%E5%9C%96-2023-02-24-%E4%B8%8B%E5%8D%886.24.36.png\" alt=\"\" \u002F>\u003C\u002Fp>\n\u003Cp>稍微看一下覺得寫得還不錯喔！雖然還是一點錯誤，但那其實是給予的資訊不夠清楚，跟前面一樣開始做一些調整的溝通就弄個差不多了。\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>要請他修正最好給予足夠資訊，例如在什麼地方做什麼出現什麼訊息。通常會給很具體的調整方式。\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Cp>最後我嫌介面不好看，還叫他用Alertify.js弄漂亮一點XDDDD像這樣\u003Cbr \u002F>\n\u003Cimg decoding=\"async\" src=\"\u002Fapi\u002Fproxy-image?url=https%3A%2F%2Fpost.billxu.net%2Fwp-content%2Fuploads%2F2023%2F02%2F%E6%88%AA%E5%9C%96-2023-02-24-%E4%B8%8B%E5%8D%886.31.32.png\" alt=\"\" \u002F>\u003C\u002Fp>\n\u003Cp>這時其實已經弄的差不多了，大概花了4小時左右。\u003Cbr \u002F>\n\u003Cimg decoding=\"async\" src=\"\u002Fapi\u002Fproxy-image?url=https%3A%2F%2Fpost.billxu.net%2Fwp-content%2Fuploads%2F2023%2F02%2F%E6%88%AA%E5%9C%96-2023-02-24-%E4%B8%8B%E5%8D%886.30.35.png\" alt=\"\" \u002F>\u003C\u002Fp>\n\u003Ch2>該來部署囉\u003C\u002Fh2>\n\u003Cp>剛剛提到我想部署到Vercel上，這邊犯了一個錯，忘記連部署方法也先叫他提供，導致這邊卡了一段時間，\u003Cbr \u002F>\n問題大意是我要在Vercel部署express服務，但又得提供一個介面，Vercel其實有自己一套做法，但一開始我先從express的設定去調整，造成服務一直部署失敗，Vercel的做法之後會再寫一篇文補上(?\u003Cbr \u002F>\n花了一些時間找錯誤後發現問題在於Vercel的設定，於是重新問問夥伴怎麼寫比較好。\u003Cbr \u002F>\n\u003Cimg decoding=\"async\" src=\"\u002Fapi\u002Fproxy-image?url=https%3A%2F%2Fpost.billxu.net%2Fwp-content%2Fuploads%2F2023%2F02%2F%E6%88%AA%E5%9C%96-2023-02-24-%E4%B8%8B%E5%8D%886.37.44.png\" alt=\"\" \u002F>\u003C\u002Fp>\n\u003Cp>看一看有點不太懂rewrites的一些規則，就乾脆直接問清楚，ㄟ你跟我怎麼設定辣！\u003Cbr \u002F>\n\u003Cimg decoding=\"async\" src=\"\u002Fapi\u002Fproxy-image?url=https%3A%2F%2Fpost.billxu.net%2Fwp-content%2Fuploads%2F2023%2F02%2F%E6%88%AA%E5%9C%96-2023-02-24-%E4%B8%8B%E5%8D%886.38.52.png\" alt=\"\" \u002F>\u003Cbr \u002F>\n我得說這樣問後得到的回答超清楚，比我自己回答還要清楚qq\u003Cbr \u002F>\n就這樣重新問了幾次後，我也搞懂了，然後就部署成功了，哈哈XD\u003Cbr \u002F>\n最後算了一下，從開始到部署完成運作大概花了兩天，中間有些時間是做小調整，熟練後能更快。\u003C\u002Fp>\n\u003Ch2>結論\u003C\u002Fh2>\n\u003Cp>經過這次練習後確認chatGPT真的能有效協助工程師執行專案，尤其面對一些陌生狀況更能快速找到一條處理的道路。說來真感概，幾年前寫論文就是在做人機合作的專家系統，那時就感覺NLP這塊每年技術迭代都在加速，沒想到畢業三年後就看到這麼純熟的人機合作工具，這個時代真棒。\u003C\u002Fp>\n\u003Cp>目前主要問題大概是整合部分，但用的過程也覺得只要給予的條件、目的夠明確，chatGPT回饋的程式碼越具體，所以我想整合能力未來也會突破。\u003C\u002Fp>\n\u003Cp>總之以後不管做工作專案也好、side project也好，有chatGPT真的是幫助不小，這個工具能補足很多欠缺的部分，讓我非常期待可以做更多有趣的東西啦。\u003Cbr \u002F>\n倒不太擔心什麼會被取代之類\u003Cdel>，反正我也沒多強\u003C\u002Fdel>，有這類工具身為創作者才能飛得更遠不是嗎？\u003Cbr \u002F>\n以上就是這個小專案的過程，分享一下，也歡迎留言討論。\u003C\u002Fp>\n\u003Cp>最後這是部署的工具網址\u003Cbr \u002F>\n\u003Ca href=\"https:\u002F\u002Fshort-url-test.vercel.app\u002F\">https:\u002F\u002Fshort-url-test.vercel.app\u002F\u003C\u002Fa>\u003C\u002Fp>\n","2023-02-24T18:49:52","\u002Fapi\u002Fproxy-image?url=https%3A%2F%2Fpost.billxu.net%2Fwp-content%2Fuploads%2F2023%2F02%2FChatGPT_logo.svg.png",{"name":12,"link":13},"Chih Fan","http:\u002F\u002Fpost.billxu.net",[15,18],{"name":16,"slug":17},"Devops","devops",{"name":19,"slug":19},"node","\u002Fblog\u002F如何與chatgpt合作生產並且部署一個短網址服務",1]