[筆記] Alpha Camp 第四學期期末回顧之三 – 專案發表後 @地瓜大的飛翔旅程

章節連結

成品展示

第一組團隊成品(飲料店)
第二組團隊成品(訂閱制訂餐服務)
第三組團隊成品(家具店)

觀察與建議

登入/登出階段
消費者行為
後台操作
佈署相關
其他
關於面試
後記
Alpha Camp 相關文章

畢業專案簡報時，評審的手也沒有閒著，從各個角度來測試專案是否能正常運作，進一步的防止有心人士偷改資料造成系統當機。Max、維元、楚玄、Sam…..等評審給予的回饋，在往後的成長道路上，都是非常寶貴的第一手經驗。

成品展示

觀察與建議

印象中，口試當天其實的心跳普遍處在一個高頻率的段落。雖說先前有跟楚玄助教詢問過一些口試可能發生的狀況，但事實上的精采程度跟雲霄飛車有的比。
1. 客座評審 Max 的實測 Hack 過程，也讓我開了眼界。真的不要心存僥倖說：「應該不會有使用者這樣的有興趣來測試網站漏洞。」
2. 在專案開發期的三回面談，楚玄助教有提及到與其一味的開發新功能，也要顧及功能的完整性(換言之就是要考量各種的 Edge Case，不要輕易就出包)。
3. 助教 Sam 也提及他期許這個專案可以增加更多的亮點功能。跟週四的兩組功能相比，其 Dashboard 和自動化發送信件功能，是我滿想嘗試卻沒有時間來實作的，有些可惜。(或許之後可以來當 Side Project 來試用看看)
4. 維元老師有詢問我們在專案實作上的盲點和與人合作的過程。畢竟在實際進行專案的過程中，與人之間的溝通會佔用相當比例的時間。
5. Bernard 校長的面試和履歷提點，對於從未進入這產業的轉職者而言，是非常實用的第一手面試官意見分享。

以下整理出由三組專案點評後的提點內容：

登入/登出階段

1. 使用者登入階段，Email 不要區分大小寫，以免被判定成兩個帳號。

消費者行為

1. 購買數量要注意數字上限，要在後台設立阻擋邏輯。
2. 交易判斷環節(transaction)、金額等關鍵數字，要儘量從後端取值並給予驗證。以免有心人士竄改前台數字傳入，導致最後金額出錯。
3.以電商的角度而言，使用者的體驗非常重要(關係到轉換率)。因此應用程式的效率要高、表單要有提示和驗證訊息、金額不能因為消費者點了上一頁、或是另開新視窗後就出錯。

後台操作

1. 當表格的數量過多，要記得加上分頁功能和依照時間排序(由新到舊)
2. 後台檢查欄位的邏輯要放在 promise 的 then 裡面，否則會有重複建立值的可能 (Case 請點此)

佈署相關

1. 當分散式佈署時，隨著資料量的增加，有可能出現不同步和錯誤情況。
2. 選用套件和伺服器時，需留心專案的複雜度會不會因此而變高，導致後續難以維護。

其他

1. console.log 在測試完後，記得要移除或是區分 log level。
2. Hedge Case、Routing、分類和排序要考量到例外狀況，以避免頁面沒有回應
3. 使用者的層級要分細一點，方能因應各種管理狀況。同時，model 的關聯性要再留心，像是分店地址可以考慮獨立一個 model，不一定要與哪個model關聯。

關於面試

1. 專案討論文件整理(Trello, Google 文件…等)，如何合作和處理衝突的過程
2. 驗證的重要性
3. 寧可自己先提出專案可能有的漏洞，有嘗試過的方法，而非一味被動的等別人發現
4. 判斷專案 User Stories 的先後執行的原則(什麼先做，什麼後做)

後記

自2019年初踏入AC Camp，將近10個月的時間，扎扎實實的學到了如何優遊在程式海中的一種生活方式。以這邊所打下的基礎，如同得到一把超級釣竿，要在各種水面環境下釣魚都從不可能變成願意嘗試看看。最後，有幸得到前人提點道路，讓自己變得更強並提點後人，創造一個正向循環。那麼，這個部落格想必不會缺題目寫的。

Alpha Camp 相關文章

★全文分享★ [筆記] Body-Parser 無法解析的 FormData 解決方案 – multer

運用 express 的框架來架設後端的 Node.js 伺服器時，當遇上前端傳來的表單資料為 multipart/form-data 格式時，那麼 body-parser 套件是不支援的。這時可以運用 multer 套件來解決這個問題。使用範例1.首先先

★全文分享★ [筆記] 解決 Vue 專案的 localhost:8080/sockjs-node 的無效請求

這篇是解決不時在測試 Vue 專案上時，常會在瀏覽器的 console 內看見的無效 GET 請求如：http://localhost:8080/sockjs-node/info?t=<一串亂數>，要如何處理。步驟1.若是處在開發階段看到的話，會因為你所

★全文分享★ [筆記] Vue.js & Node.js 專案初始化筆記

這篇主要是筆記下如何快速的在本機端生成一個 Vue.js 的專案，並結合 Bootstrap 和 Node.js 二者來產生一個前後端兼備但卻彼此分離的網路應用程式。步驟Vue.js 框架下，其網址多半會帶有 # 字樣。這是

★全文分享★ [筆記] Alpha Camp 第四學期期末回顧之二 – 畢業專案

這回的畢業專案，AlphaCamp指定了三個方向(電商、旅遊規劃和CRM系統)，其餘的就交給各個團隊自己打磨。在這一個月的時間內完成ERD、決定使用者故事的開發的優先順序、實際寫 Code 和最後佈署後的

★全文分享★ [筆記] Alpha Camp 第四學期期末回顧之一 – 個人成長

AlphaCamp 的第四學期內容算是非常扎實。隨著接觸的內容變多的情況下，在心態上也得有所轉變，不再能一味的希望課程能教導或提供完整的範例給你。課程的內容應被當成是一個個的楔子，跟每個

★全文分享★ [筆記] Node.js 在 Windows 上的開發環境建置

這篇文章記載下於 Windows 上建置開發 NodeJS 相關應用的環境過程和步驟。操作步驟//1. 安裝 cmder，下載位置在右邊：https://cmder.net///2. 安裝 nvm，到右邊的 Github 網站下載：https://github.com/coreybutler/nvm-win

★全文分享★ [筆記] Sequelize NodeJS 專案初始化筆記

本篇記錄下 AlphaCamp 第四學期的重頭戲之一，與他人一同打造類 Twitter 專案的過程。同時，這也是記錄如何從無到有打造一個專案的過程。一、專案規劃提出規格(Spec)清單，內容包含以下：1.使用角

★全文分享★ [筆記] Heroku Sequelize 佈署細節

本篇記錄下如何將 SQL 關聯式資料庫佈署到 Heroku 上的步驟與心得。操作步驟// 1. Heroku 指定的資料庫是用 PostgreSQL，故先用 npm 安裝相關套件npm i pg// 2. 調整 config/config.json 的設定 “production”: { “use_env

★全文分享★ [筆記] 運用 Heroku 佈署的初始化步驟

這篇文章記錄下如何將本機端的專案推撥到 Heroku 上的步驟。整體操作難度不高，但是要盡量讓 git 和 heroku 的檔案放在同一層。否則上傳時，heroku 會抓不到 package.json 的檔案。步驟1. 首先，先上 Hero

★全文分享★ 運用 Node.js 建網站的初始化步驟

AlphaCamp 的課程進入到第三學期後期，趁機整理一下如何運用 Node.js 來建立一個簡單網站的步驟(包含前端畫面、後端資料庫、登入頁面、串接API以及除錯)。第一部分1.Wireframe畫面的設計草稿，每個頁

★全文分享★ [指南] AlphaCamp 第二學期與第三學期的差異

AlphaCamp 課程的第二學期和第三學期，其課程難易度與設計上有著顯著不同。趁著這篇寫下第一手的體驗心得。課程設計差別學期二瀏覽器的前後隱含了 HTML, CSS 和 JavaScript 的互動。不過，你並不會

★全文分享★ [筆記] Alpha Camp 第三學期期末回顧關於自學

學寫程式的過程旅途上，「自學」在不知不覺中就成為身體中記憶的一部分。畢竟寫程式卡關的問題有百百種，有時只是單純打錯字、也有可能是一開始的邏輯設計就出了毛病。這時，運用搜尋「

★全文分享★ [筆記] Handlebars Register Helper 自定義 Helper 用法

Handlebars 的模版，其判斷式功能的延展性不佳，類似 {{#if 3>2}} 這類的用法都預設無法使用。RegisterHelper 就是用來解決這個問題。使用方法初始化//initialize handlebars (not express-handlebars)const Handlebars = r

★全文分享★ [筆記] Google Place API 串接 (Google Map 系列服務)

Alpha Camp 的第二學期課程，讓大家試試水溫串接 API。在心血來潮下，想說串接個 Google Map 的 API 來玩玩看。不過要做的準備工作還真不少，以下是試驗不少次後所得到的心得。串接前的準備工作1. Goo

★全文分享★ [筆記] Alpha Camp 第三學期

Alpha Camp 是個新興的線上線下整合的課程平台。第三階段是為期8週的課程，主要將學習 Web 開發實務框架，使用 JavaScript + Node.js 打造一個兼具前、後端與資料庫的網路應用程式。若對第一階段有興

★全文分享★ [筆記] Pagination 分頁功能實作 JavaScript

網頁設計中常見的分頁功能(Pagination)的實作筆記過程。邏輯上，可以拆解成以下兩項：1.計算總共頁數2.依照使用者點擊的頁數來決定顯示多少項目實作步驟1.HTML部分<!–採用 Bootstrap 4.0 –><nav a

★全文分享★ [訪談記錄] 自身興趣和實作在工作上找到歸屬感與成就

AlphaCamp 第二學期的第三份訪談，幸運的請到一位自高中時期認識的神人朋友，來聊一下他的程式學習歷程。相關訪談1.什麼契機下開始接觸程式？小學的時候有去資策會上過 RPG 製作大師的課程，使

★全文分享★ [筆記] Git 忽略 .DS_Store 等排除檔案

初學 Git 常會遇上的一個問題就是，Git 會自動追蹤一些系統記錄檔案(如MAC上的 .DS_Store)，所以一份排除清單就是必要的一份工作。排除方法1.在 git 專案下，新增 .gitignore 檔案請利用終端機(Terminal)新

★全文分享★ [筆記] Git 更新分支、解除衝突方法一覽

從本機端同步到 GitHub 上頭的專案，於每次上傳 commit 時都會比對兩邊的資料。若有出現不一致的情形，就會挑出錯誤訊息。錯誤情境1.遠端資料較新由於 Github 網站本身有提供修改的地方(可以線上

★全文分享★ [筆記] API 串接, Axios 和綁定DOM事件

在 Alpha Camp 的第二學期課程中，有提到寫個網頁來向遠端伺服器請求資料，故整理一下自己腦海中所學到的技巧與觀念。重點提示運用 “Axios” 工具以 “GET” 方式請求資料<script src=”https://unpkg.com/axios/

★全文分享★ [筆記] textContent, event.target 和 innerHTML

筆記一下在學習撰寫 JavaScript DOM時，常會遇上的三大功能 innerHTML, textContent 與 event.target 的用法。重點整理innerHTML常搭配 HTML 的 Element Object 來執行，將一段 HTML Code 寫入特定區塊。// 以下例子取自 w3

★全文分享★ [筆記] Alpha Camp 第二學期期末回顧

Alpha Camp 的第二學期課程，一晃眼間就兩個月過去了。從現在回首來看，發現自己也默默的熟悉了一些網頁互動的技巧，寫程式也開始不讓人那樣心生恐懼。將情境轉換成電腦可以理解的小步驟，並

★全文分享★ [訪談記錄] 觀察、效能和成就感

第二場訪談請到大學時期認識的 Mr Miao，現職於電子五哥之一的廣達的旗下轉投資公司擔任後端工程師。藉著這次的對話，讓我得以一窺與記憶體、儲存空間和效能奮戰的工作日常。相關訪談1.工作

★全文分享★ [筆記] BootStrap Card + Grid System + Modal 彈出視窗

運用 BootStrap 4.0 版本起有的 Card 樣式，再加上 Grid System 排版。最困難的大概是「如何命名變數」和「從茫茫的API技術文件」中找到需要的資料。重點摘要Cards + Grid System 排版混用官方文件：1. https://

★全文分享★ [訪談記錄] 反思試著對未來的職涯跨出一步

訪談後的反思，是個讓理想化為現實的具體步驟之一。在一邊進修自己的技能之餘，試著描繪未來工作的樣貌可以讓自己更加清楚是為何堅持在現在的航道上。相關訪談短期職涯目標截至目前，個

★全文分享★ [訪談記錄] 堅持加上興趣在程式的世界中遨遊

YH 目前任職於某日商台灣分社旗下擔任軟體工程師，是我於高中時期於社團所結識的學長。幸虧有了 AlphaCamp 的職涯社群提出的大哉問，鼓勵大家去訪問目前已在相關產業工作耕耘的人們，而讓我們

★全文分享★ [筆記] Alpha Camp 第二學期啟程

Alpha Camp 是個新興的線上線下整合的課程平台。第二階段是為期8週的課程，主要帶大家實作網頁開發前後端的所需技術：HTML、CSS 和 JavaScript。若對第一階段有興趣的，可以點這裡。課程目的打穩前

★全文分享★ [筆記] Alpha Camp 第一學期暖身

Alpha Camp 是個新興的線上線下整合的課程平台。和其他的網路平台課程如 Udemy, Hahow 相比，在這個 Camp 學習程式設計的最大差別在於：真人助教的一對一客製化回應，學生也可以觀看其他同學的作品

按讚加入粉絲團