第一版開發

為什麼是第一版，因為還有第二版...

開發過程

，開發缺人，就想說或許也可以來嘗試看看，因為不懂而不能掌握現在開發狀態，真的是很...不踏實或是說無能為力，就展開了前端學習的旅程
在這時候，主要協助新功能-尋找夥伴的畫面切版，功能由另一位前端大大負責，成果就是下面的影片介紹。

這邊功能像是登入、表單的設計、資料的處理、串接firebase服務都是一位大大包辦，他先把大概功能做出來，完成後有三個畫面，這時候設計稿還沒出來，設計稿出來後畫面有很多步驟，另外還有彈出視窗等等，我再依照設計稿去把畫面完成，就是影片demo的樣子。

開發的困難

雖然說只是單純的切版，但由於是與別人協作，最不容易的就是去看懂他的code在寫什麼，以及檔案擺放位置各是代表什麼，尤其是大大的模組化拆分的非常細，常常搞混pages資料夾跟components資料夾的差別，陷入連連看迷宮中。

另一方面也是第一次接觸相對複雜的程式碼，之前自己開發的Side Project相對簡單，檔案也容易尋找，因此協作時需要一點時間適應一下。

https://ithelp.ithome.com.tw/upload/images/20230924/20162644aL6WbXss44.png

由於專案有使用eslint+prettier，也是搞了好一陣子的設定，搞到快發瘋

這邊超級感謝卡斯伯老師撰寫好文
VSCode Prettier 整合 ESLint 自動排版

第二版開發

• 後端：Node.js
• 後端框架：Express
• 資料庫：MongoDB Altas

為何棄用Firebase選用Node.js

原先是因為沒有後端，所以前端大大選了Firebase來嘗試看看，但後來討論後，考量到未來還是會需要增加功能，長遠來說還是需要有後端，而且把處理資料的邏輯都寫在前端也不是很好的做法，這是後來想改用後端的原因。

至於為什麼後端選Node.js，主要是考量未來維護上還是要選比較容易上手的語言，前端是Javascript，後端選Node.js會是比較容易上手與維護的選擇。

開發前準備

• 熟悉MERN Stack
• 分析前後端代辦事項
• 尋找合適的教學練習
• 上工幹大事

MERN Stact練練手

選MERN Stack 原因無他，YT上看到超級多MERN Stact的教學，教學資源豐富，就決定先用看看這樣的架構，於是先找了幾個小專案熟悉一下，同時也為之後島島功能改寫做準備，邊學邊研究要怎麼應用在島島上。

Build Your ChatGPT AI App in React use OpenAI Api | MERN tutorial | Machine Learning

Build and Deploy a Full Stack MERN AI Image Generation App | Midjourney & DALL-E Clone

上面兩個都蠻喜歡的，超級推薦，可以練習到簡單的前後端串接，後端API串接、JWT Token，雖然我一開始也不太懂在幹嘛，邊做邊查，不過累積經驗值也是很重要的，不懂是很正常的。

加碼打基礎

後來想想還是找完整的課程補基礎，選來選去買了三個課程，除了補基礎外課程有專案需要的OAuth登入、完整的Redux教學也含有專案會用到的Redux Saga。

Udemy課程：Complete React Developer in 2023 (w/ Redux, Hooks, GraphQL)

Udemy課程：Complete NodeJS Developer in 2023 (GraphQL, MongoDB, + more)

Udemy課程：2023 網頁全端開發

開發過程

前端：

原本Firebase的Google第三方登入移除，改成call 後端api提供的Google OAuth登入服務

原本Firebase的資料串接全部移除，改成用Redux Saga call 後端Api存取資料

原本使用者狀態與資料使用Firebase Auth服務 ，使用者資料與狀態改成用Redux管理

後端：

資料庫建置:

使用MongoDB Atlas，設定上還算簡單易懂。

資料格式建立:

參考原本在Firestore的資料格式，在Models建立Schema

撰寫Api:

根據需要的功能，參考其他專案跟教學來寫

第三方登入
讀取使用者資料
更新使用者資料
讀取所有使用者資料

開發困難

Redux Saga

只用過Redux toolkit，沒用過Redux，也沒用Redux Saga，一開始看到 function* 跟yield還以為看錯了，網路上查到的寫法以及課程上的教學寫法又跟專案用的寫法略有不同，看到我眼睛快要脫窗了，到底為什麼一樣都是Redux Saga寫法會不同？！＠＃＄

Passport 套件 串接Google OAuth2

登入完成後會回傳一個user物件，本地測試是可以傳回前端瀏覽器，部署上PAAS後就消失了，原本以為是PAAS的問題，換了好幾個平台都一樣的結果

找了好幾天都無解，原本想說做完告一段落，就開始投履歷面試，竟然因此多卡了好幾天，害我不敢投履歷，功能都做完一段落了，真是氣氣氣

最後log出來看回傳的資料有什麼是我可以用的，把一個多層陣列＋物件混合的奇怪資料攤平，再做一些資料處理，拿到我要的userID，終於告一段落，真是印象深刻的非開發問題，到現在還是無解。

改版小結

以上就是改版後的過程，有點難描述的很清楚，但在逐漸完成的過程中，很有成就感，也對前後端串接有更多的認識與了解，從前端發出的請求是如何到後端，後端該如何處理請求並回傳給前端接收，前端再做處理與呈現。

為什麼會有很多認識與了解呢？因為Debug的時候，很常從前端追到後端，後端再追回前端，追久了，不熟也熟了

簡短的心得是一條龍真是不容易，資訊量太大太多太雜，做了前端忘了後端，做完後端忘了前端，一直在重新回憶的循環中

今天先分享到這，至此功能還未正式上線呢！

有關Side Project Taiwan的簡介

Side Project Taiwan 的宗旨是藉由Side Project開發來成就自我，透過持續學習和合作，共同推動技術和專業的發展。我們相信每一個參與者，無論是什麼專業，都能在這個社群中找到屬於自己的成長空間。

歡迎所有對Side Project開發有興趣的人加入我們，可以是有點子來找夥伴，也可以是來尋找有興趣的Side >Project加入，邀請大家一同打造一個充滿活力且有意義的技術社群！

Discord頻道連結：https://sideproj.tw/dc