[筆記] Alpha Camp 第二學期期末回顧 @地瓜大的飛翔旅程

章節連結

Alpha Camp 第二學期課程內容

學到什麼？
Foreign Exchange Gadget
發現自我
課堂之外與下一步
Alpha Camp 相關文章

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

Alpha Camp 第二學期課程內容

學到什麼？

瀏覽器的前後隱含了 HTML, CSS 和 JavaScript 的互動。在兩個月前，我完全不認為自己有能力寫出一個 Side Project 出來。不過在課程的潛移默化下，似乎跟自然語言的習得的體驗類似，就有種：我居然也有辦法寫的出來一個簡單的小工具。

Foreign Exchange Gadget

這個小工具主要是方便查詢貨幣匯率。換言之就是，1塊A貨幣可以兌換X塊B貨幣的概念。
預設使用情境如下：
1.當使用者進入網頁時，首先看到的是新台幣的數據
2.使用者可以點選上方的貨幣名稱，迅速切換熱門貨幣(手機版為6個；電腦版為7個)
3.使用者也可以輸入3位的貨幣代碼，並按下”Enter”或是右方的”Search”來查詢
4.貨幣代碼要有中文顯示名稱

最後成品請點此。這個 Side Project 幫助自己複習了事件監聽、JSON的資料處理、取值特定字串、迴圈及一系列迭代器運用、CSS 排版、時間資料處理。

發現自我

為了養成持續學習的習慣，真的是個意志力的大考驗。每週定期的學習和時間規劃，剛好配合上碩士論文的求學進度。為了兩全其美，將自己的生活作息、精神力控制、EQ控制等剛好做個完整的重新設定，算是意料之外的收穫。

課堂之外與下一步

課堂上的教材的確是非常有趣，而且也是目前業界常用的，像是 Bootstrap、grid 和 flex 排版方式。體驗過這些後，當看到新穎的網站設計時，反倒腦袋會想究竟它的原型是怎樣磨出來的。不過這有利也有弊，你可能無法單純欣賞網頁的美。如同電影人去看電影時，腦袋裡會想這運鏡是如何是一樣的。另外，參考同學的作品並從中發現自己沒想到的點，也是讓自己成長變快的方法。一個人參加線上課程(如 Udemy)之類的最怕遇到的瓶頸就是：沒有參考的學習對象，也沒有人可以發問。雖說不是沒有成功案例，但讓很多有心人往往陣亡在路上。

成功 = 堅持到底 + 方法，而 Alpha Camp 的確是個將精良工具和方法融合的恰到好處。我想根據目前自身的學習狀況，打鐵趁熱往下一步前進是正確的選擇。

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 第四學期期末回顧之三 – 專案發表後

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

★全文分享★ [筆記] 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

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

第二場訪談請到大學時期認識的 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 學習程式設計的最大差別在於：真人助教的一對一客製化回應，學生也可以觀看其他同學的作品

按讚加入粉絲團