這回的畢業專案,AlphaCamp指定了三個方向(電商、旅遊規劃和CRM系統),其餘的就交給各個團隊自己打磨。在這一個月的時間內完成ERD、決定使用者故事的開發的優先順序、實際寫 Code 和最後佈署後的一連串模擬使用者的除錯過程。我自己的體悟是:以完成最小可行性產品的前提下,在眾多功能必須要做精準的取捨。同時,還得調配團隊的時間、資源以及協調大家的意見。在這將近一個月的開發階段,寫 Code 的時數大約三分之一而已,剩下的都是釐清自己的團隊究竟想要解決使用者的哪些痛點。那種站在極端使用者的角度來把玩自己所屬團隊的作品,是種略微嚴苛但是比需要有的挑戰。
專案內容簡介
電子商務網站自西元2000年算起,不到二十年的光陰,已經成為眾多產業電子化的標配。不過現今台灣還是有不少的巷弄美食缺乏一個簡易操作的官網,讓客人可以瀏覽餐點、線上點餐、完成付款、得知分店資訊……等。因此,我們團隊三人決定打造一個易於在手機、電腦上操作的網路應用程式。對使用者而言,可以透過它輕鬆下單付款、選擇喜歡的運送方式或是親自取貨。圖像化的後台,店家能減少請工程師協助後台操作的機會。
眾人靈感來源
1. 眾多台灣手搖飲品牌官網 – 純展示、沒有價格、無法線上訂購
2. 大型連鎖速食店 – 如:KFC、McDonalds
3. 訂便當系統:https://www.dinbendon.net/do/login
專案亮點
1. 保留庫存數量的欄位。換言之,若今天這個應用程式要應用到其他的產業別,轉換上並不困難。
2. 後台輸入所有的店家地址後,可以在聯絡資訊頁面裡的一張地圖中,看到所有的分店標記。
3. 桌機、手機都可一體適用,減少維護複雜度。
串接上的 API
Facebook 分享按鈕、Imgur、GoogleMap、第三方金流(藍新金流)
ERD
以 User, Product, Order 三塊為主線,然後陸續將每個相關聯的 Model 串在一起。
專案分工
我們團隊依照使用者的操作階段來分段進行專案施工。
駱駱:主要負責消費者的挑選商品階段,也就是首頁(搜尋、篩選)、單一產品頁面、個人資料頁面、註冊登入。
Zoey:主要負責消費者的訂購付款階段,也就是購物車、運送地址輸入、訂單確認、串接第三方金流。
Andy:主要負責店家(管理員)的後台管理相關頁面、前台的聯絡資訊頁面。另外使用 台灣縣市二聯式選單 tw-city-selector.js 和 [筆記] 純 CSS 製作圖片輪撥效 作為表單優化和首頁廣告輪播效果。
未來加強
有一些功能受限於時間和精神力,來不及附上。希望能在之後的版本做補強:
1.會員集點卡
2.企業會員,可以輸入統編
3.自取選項,可以選擇取貨的分店
4.店家自訂運費規則
最後成品
網站版:https://damp-cliffs-89201.herokuapp.com/
Github:https://github.com/F-Kibatodos/final-project
後記
專案花費最多的時間,反倒是動手寫 Code 的前二星期馬不停蹄的溝通,確認 Model, ERD, 要有多少頁面和路由。每兩到三天就線上開一次會,可以感受到明顯的時間壓力。在實作過程中,難免會遇到 Code 衝突或是溝通上的缺乏默契,讓整個專案實作上,會有一些時間在處理人的問題。身為在這次專案中為擔任窗口溝通的角色,發現要讓大家能準時在進度上完成任務,縱使我們是個三人團隊都會有點挑戰。人人對於這個專案的設定目標高度不同,也是要花時間去磨合的。
回到專案本身,使用者故事的多寡和取捨往往是很讓人折磨的。瞬間可以理解客戶端開個金口,對工程師來說可能是要花費數個工作天才能完工並除蟲完畢的。受限於時間和自身知識的侷限,這回沒有用上前後端分離的模式、以及沒有練習寫些自動化測試是有點可惜之處。不過在這一個月的時間內,確實讓我腦海中有充分的時間理解過往四個學期所學習到的眾多前後端技術,也藉機讀了不少網路上的技術文章。順帶一提,簡體中文和英文資料都有不少寶可以挖來學,吸收後再寫成繁體中文版的心得。換言之,不愁沒題材可寫技術文章,只愁沒時間好好寫。
最後,很開心自己與團隊成員們一起完成了一個小作品。雖然日後來看想必會覺得怎麼會如此的簡單陽春,但這就是一個自我成長的軌跡。
Alpha Camp 相關文章
運用 express 的框架來架設後端的 Node.js 伺服器時,當遇上前端傳來的表單資料為 multipart/form-data 格式時,那麼 body-parser 套件是不支援的。這時可以運用 multer 套件來解決這個問題。使用範例1.首先先
這篇是解決不時在測試 Vue 專案上時,常會在瀏覽器的 console 內看見的無效 GET 請求如:http://localhost:8080/sockjs-node/info?t=<一串亂數>,要如何處理。步驟1.若是處在開發階段看到的話,會因為你所
這篇主要是筆記下如何快速的在本機端生成一個 Vue.js 的專案,並結合 Bootstrap 和 Node.js 二者來產生一個前後端兼備但卻彼此分離的網路應用程式。步驟Vue.js 框架下,其網址多半會帶有 # 字樣。這是
畢業專案簡報時,評審的手也沒有閒著,從各個角度來測試專案是否能正常運作,進一步的防止有心人士偷改資料造成系統當機。Max、維元、楚玄、Sam…..等評審給予的回饋,在往後的成長道路上,
AlphaCamp 的第四學期內容算是非常扎實。隨著接觸的內容變多的情況下,在心態上也得有所轉變,不再能一味的希望課程能教導或提供完整的範例給你。課程的內容應被當成是一個個的楔子,跟每個
這篇文章記載下於 Windows 上建置開發 NodeJS 相關應用的環境過程和步驟。操作步驟//1. 安裝 cmder,下載位置在右邊:https://cmder.net///2. 安裝 nvm,到右邊的 Github 網站下載:https://github.com/coreybutler/nvm-win
本篇記錄下
AlphaCamp 第四學期的重頭戲之一,與他人一同打造類 Twitter 專案的過程。同時,這也是記錄如何從無到有打造一個專案的過程。一、專案規劃提出規格(Spec)清單,內容包含以下:1.使用角
本篇記錄下如何將 SQL 關聯式資料庫佈署到 Heroku 上的步驟與心得。操作步驟// 1. Heroku 指定的資料庫是用 PostgreSQL,故先用 npm 安裝相關套件npm i pg// 2. 調整 config/config.json 的設定 “production”: { “use_env
這篇文章記錄下如何將本機端的專案推撥到 Heroku 上的步驟。整體操作難度不高,但是要盡量讓 git 和 heroku 的檔案放在同一層。否則上傳時,heroku 會抓不到 package.json 的檔案。步驟1. 首先,先上 Hero
AlphaCamp 的課程進入到第三學期後期,趁機整理一下如何運用 Node.js 來建立一個簡單網站的步驟(包含前端畫面、後端資料庫、登入頁面、串接API以及除錯)。第一部分1.Wireframe畫面的設計草稿,每個頁
AlphaCamp 課程的第二學期和第三學期,其課程難易度與設計上有著顯著不同。趁著這篇寫下第一手的體驗心得。課程設計差別學期二瀏覽器的前後隱含了 HTML, CSS 和 JavaScript 的互動。不過,你並不會
學寫程式的過程旅途上,「自學」在不知不覺中就成為身體中記憶的一部分。畢竟寫程式卡關的問題有百百種,有時只是單純打錯字、也有可能是一開始的邏輯設計就出了毛病。這時,運用搜尋「
Handlebars 的模版,其判斷式功能的延展性不佳,類似 {{#if 3>2}} 這類的用法都預設無法使用。RegisterHelper 就是用來解決這個問題。使用方法初始化//initialize handlebars (not express-handlebars)const Handlebars = r
Alpha Camp 的第二學期課程,讓大家試試水溫串接 API。在心血來潮下,想說串接個 Google Map 的 API 來玩玩看。不過要做的準備工作還真不少,以下是試驗不少次後所得到的心得。串接前的準備工作1. Goo
Alpha Camp 是個新興的線上線下整合的課程平台。第三階段是為期8週的課程,主要將學習 Web 開發實務框架,使用 JavaScript + Node.js 打造一個兼具前、後端與資料庫的網路應用程式。若對第一階段有興
網頁設計中常見的分頁功能(Pagination)的實作筆記過程。邏輯上,可以拆解成以下兩項:1.計算總共頁數2.依照使用者點擊的頁數來決定顯示多少項目實作步驟1.HTML部分<!–採用 Bootstrap 4.0 –><nav a
AlphaCamp 第二學期的第三份訪談,幸運的請到一位自高中時期認識的神人朋友,來聊一下他的程式學習歷程。相關訪談1.什麼契機下開始接觸程式?小學的時候有去資策會上過 RPG 製作大師的課程,使
初學 Git 常會遇上的一個問題就是,Git 會自動追蹤一些系統記錄檔案(如MAC上的 .DS_Store),所以一份排除清單就是必要的一份工作。排除方法1.在 git 專案下,新增 .gitignore 檔案請利用終端機(Terminal)新
從本機端同步到 GitHub 上頭的專案,於每次上傳 commit 時都會比對兩邊的資料。若有出現不一致的情形,就會挑出錯誤訊息。錯誤情境1.遠端資料較新由於 Github 網站本身有提供修改的地方(可以線上
在 Alpha Camp 的第二學期課程中,有提到寫個網頁來向遠端伺服器請求資料,故整理一下自己腦海中所學到的技巧與觀念。重點提示運用 “Axios” 工具以 “GET” 方式請求資料<script src=”https://unpkg.com/axios/
筆記一下在學習撰寫 JavaScript DOM時,常會遇上的三大功能 innerHTML, textContent 與 event.target 的用法。重點整理innerHTML常搭配 HTML 的 Element Object 來執行,將一段 HTML Code 寫入特定區塊。// 以下例子取自 w3
Alpha Camp 的第二學期課程,一晃眼間就兩個月過去了。從現在回首來看,發現自己也默默的熟悉了一些網頁互動的技巧,寫程式也開始不讓人那樣心生恐懼。將情境轉換成電腦可以理解的小步驟,並
第二場訪談請到大學時期認識的 Mr Miao,現職於電子五哥之一的廣達的旗下轉投資公司擔任後端工程師。藉著這次的對話,讓我得以一窺與記憶體、儲存空間和效能奮戰的工作日常。相關訪談1.工作
運用 BootStrap 4.0 版本起有的 Card 樣式,再加上 Grid System 排版。最困難的大概是「如何命名變數」和「從茫茫的API技術文件」中找到需要的資料。重點摘要Cards + Grid System 排版混用官方文件:1. https://
訪談後的反思,是個讓理想化為現實的具體步驟之一。在一邊進修自己的技能之餘,試著描繪未來工作的樣貌可以讓自己更加清楚是為何堅持在現在的航道上。相關訪談短期職涯目標截至目前,個
YH 目前任職於某日商台灣分社旗下擔任軟體工程師,是我於高中時期於社團所結識的學長。幸虧有了
AlphaCamp 的職涯社群提出的大哉問,鼓勵大家去訪問目前已在相關產業工作耕耘的人們,而讓我們
Alpha Camp 是個新興的線上線下整合的課程平台。第二階段是為期8週的課程,主要帶大家實作網頁開發前後端的所需技術:HTML、CSS 和 JavaScript。若對第一階段有興趣的,可以點這裡。課程目的打穩前
Alpha Camp 是個新興的線上線下整合的課程平台。和其他的網路平台課程如 Udemy, Hahow 相比,在這個 Camp 學習程式設計的最大差別在於:真人助教的一對一客製化回應,學生也可以觀看其他同學的作品
按讚加入粉絲團延伸閱讀