WuWac's CrAzY World!

專案介紹： 後端專案連結 複刻Twitter的簡易版功能。除了複習這學期所學，這個專案最主要在體驗前後分離協作及如何在時間壓力下走完Scrum流程。 以往在Alpha Camp的學習雖然助教、同學環繞、有問題能即時詢問討論，但所有專案或作業都是一人獨力完成，這是個難得的機會能在學習階段就體驗團隊協作時與前端溝通理解如何互相配合彼此的工作與理解對方方便的資料、與後端夥伴Git協作怎麼避免不必要的conflict與如何分工和互相cover。 擔任角色與完成項目 在前後分離組裡擔任後端工程師角色，在此專案中負責： 共用檔案設置、資料庫Model建置、種子資料建置、本地端Model unit test、遠端travis自動化測試 為了避免不必要的conflict，在Scrum流程第一階段工作分配上決定unit test測試檔中，我負責完成與資料庫有關的建置並通過測試，另一組員負責與路由設定有關的RESTful API規劃。除了資料庫，有許多共同檔案的建置也由我一併完成。 (GitHub repo設置、README.md撰寫、Heroku repo設置、第一條給前端測試連線用API產出、資料庫Model建置並確定符合unit test要求、種子資料建置、登入認證錯誤處理相關檔案建置、確認後端專案完成後符合自動化測試要求) 協作路由coding與API Doc 在Scrum第二階段工作分配上，我負責與user-controller所有路由，另一組員負責其他所有路由。由於我進度較快，reply-controller路由也一併由我完成。 協作 refactor、debug 在Scrum第三階段，由於在前兩階段大量的code review，發現彼此除了coding邏輯、方式、風格不同外，也發現API產出的資料結構和類似狀況時錯誤訊息不同。討論過後決定要統一資料結構與錯誤訊息，避免造成前端的困擾。 這一階段也是再次檢查所有的API是否有問題，並交付給前端組員使用，發現問題立即調整。 git指令 由於多數組員對於git指令皆不熟悉，在專案開始前我先製作大部分這個專案會用到的指令清單。也由於我個人進度較快，在組員有git指令相關問題、前端gh-pages建置問題時，由我這裡即時提供指令步驟與觀念釐清。 專案中特別練習技術與套件 使用MYSQL建置關聯性資料庫，並使用sequelize操作資

專案介紹： 一個以使用者登入方式擁有的私人記帳本，可以自建帳號也可以用FB、Goggle帳號登入。 記帳本除了瀏覽所有支出細項外，可以很方便的新增、編輯、刪除一筆支出，也可以依分類簡單看出該類別花費金額。 你為何會選擇這個專案？ 做一個自己順眼的記帳本幫助自己日常開銷紀錄和控管。另外記帳本有資料庫CRUD、身分認證等需求，對於學習相關套件和語法是個還不錯的練習。 你使用了什麼技術或套件？ 除了Node.js、Express.js基礎框架外， 使用express-handlebars樣板處理畫面渲染，並搭配connect-flash讓partial handlebar做訊息警示 使用method-override實現CRUD路由RESTful語意化 使用mongoose物件映設連線MongoDB資料庫 使用dotenv設定統一放置環境變數，並以.gitignore隱藏避免個人設定外洩 使用passport及相關local、facebook、google策略進行身分驗證 使用bcryptjs密碼雜湊，增加資訊安全性 使用bootstrap和font awesome美化也簡化CSS樣式 使用async await語法糖搭配promise all，優化callback hell槽狀結構由外向內問題，讓程式碼由上到下更簡潔易讀 使用MVC架構，增加功能獨立性 使用heroku佈署網頁 哪部分你相對能掌握？哪裡花了最多時間？ 對於 各個套件的語法雖然不能直接默寫出來，但查閱文件後都還算能掌握。另外對於promise的.then().catch用法相當熟悉，與資料庫的溝通、model建立、種子資料設計和資料關聯性都還算順手。 在這個專案裡，讓我花較多時間的除了bootstrap切版外，就是async await語法糖的用法，發現這種寫法讓程式碼更簡潔容易閱讀，特地先查找資料學習後再回專案裡練習，中途還一度發現沒有catch到error訊息，再重新翻找相關資訊學到try catch語法。 過程中碰到什麼困難？又如何克服？（例如：查找網路文件） 由於很多套件都是新學，常遇到語法不熟悉的狀況，我就常在網上查找相關文件和討論範例。像是課程中提到LocalStrategy和FacebookStrategy語法，但我在做專案時還想多加GoogleStrategy，於是就多花點時間從原始文件和

  第一週- 網路概論&Node.js、Express與相關樣板套件使用 接續上學期末提到的git&github，原本模模糊糊的指令操作，在這學期變成必備的基本技能了，果然就是欠練習!😂 進到這學期馬上就來了個震撼彈：各種沒接觸過的模板、套件的安裝應用和Terminal指令。在這過程中，出現各種卡關，原本表定一週的課程，光是"安裝"就足足多花了一週的時間，雖然回頭看都是些根本不是問題的問題，還是不小的打擊了原本以為擁有滿滿JS、HTML、CSS能力的信心。 這週一步一步的練習初始化專案、樣板引擎、靜態畫面&動態資料渲染、動態路由，不得不說，AC課程教得真的很仔細! 還在每一步的停頓也帶著同學git commit一次，讓原本對git指令很混亂的我，這麼多次的重複練習後也變得熟悉起來。 這週的結尾以餐廳清單網頁初級版作業和被打擊轉為謙卑的心作為終結😂。 這學期初還是完成了一個side project - 樂透轉盤  ( replit程式碼 )，主要用的是上學期最後教的MVC概念，另外應用DOM event listener、local storage，再加上一些自己玩的CSS，有緣人可以在右下角找到音樂撥放鍵(個人建議心情不好可以來按一下，馬上就開心起來😂)。 這次side project在這週課程衝擊下還沒辦法用到新學到的課程內容，但在這個課程轉折點來說，是個不錯的練習，相當於把我在前三學期的課程做了一個自我測驗。 第二週- CRUD&MongoDB 這週先從一個密碼產生器製作開始，讓我們注意到<form> method的GET和POST用法的差異及不同input型態得到的value的不同。 接著開始了經典的Todo List的CRUD的一步步講解實作，並帶入MongoDB及Mongoose使用，也多了seed資料匯入的作法。 整體來說這週還算愉快。在上週的洗禮後，本週在express專案初始化和各個套件安裝匯入使用上都感覺熟悉了 一點。直到MongoDB的環境設定的地方才又莫名其妙的卡關，設定方法有在terminal設定或是電腦系統設定兩種方式，由於常同時編輯不同專案，這兩種方式對我來說都相當不方便也很容易忘記修改參數而出問題，在無數次錯誤訊息出現debug到眼花之後，後來用了dotenv套件把變

第一週- API&Ajax串接 這學期以API&Ajax串接做開場，難度不高，只是讓我又打開了新世界大門，以前從來沒想過原來不用所有事都要自己做😂。 這週練習了幾個很方便練習的API(Random狗狗照片、Random User、找歌詞)。除了課堂的練習，也讓我萌生了以後也想成為提供API帶給別人方便的開發者。 這週玩得很愉快，除了課堂作業外，Alpha Camp這週又再度舉辦了黑客松。沒想到在分享要做什麼的想法時，現場炸了！😂 比起上次有意識的在想黑客松要刻意練習什麼，這次我是沒怎麼想就直接訂主題。訂完主題後想user story再構圖，後來就是建構需要的資料，查找想要的效果語法用法，最後把程式碼慢慢補完細部調整完成。 這次的主題是月老廟。構想來源是社群裡有人分享去拜月老都沒拖單，我就想疫情期間就別去現場了吧，我們來試試線上拜拜求籤擲茭試手氣😂。 以下是我黑客松弄出來的網頁開發練習 (照片來源是google搜尋到的，籤詩是網上隨意找的各個古詩詞，只是初學者的練習，如有侵權請通知我刪掉) See the Pen sideproject-月老廟 by Naomi ( @wuwachon ) on CodePen . 完成了黑客松的side project，我發現自己對於監聽事件處理更熟悉了，也因為資料有點多，也開始對於怎麼讓程式更簡單易讀這件事有感覺。在開始做之前試圖要找別人建置好的古詩詞API，發現只有簡體版的，又開始研究怎麼簡轉繁。在一系列的查資料、看不懂、再查資料、又看不懂的循環下，最後都沒有採用😂，但對於我想學習後續的課程更有動力了，我就是相信等到後面課程教到我一定就懂。 第二週-  電影清單：前端體驗綜合實作 這週開始建構一個完整的網頁，內容極多。從電影資料的API手把手教一個簡單網夜各個細部功能怎麼建構，包含了一開始的HTML文件、API資料取用、Search功能、Local Storage、Paginator。照著做都不難，就是細節比較多一點。這週算是輕鬆的一週。 到目前為止，跟學期2-1一上來就懷疑人生比起來，這學期有一種由苦到甜的感覺。不僅內容難度不高還特別有成就感做出像模像樣的網頁，大部分的bug幾乎都是拼錯字導致(debug特別痛苦)，但在這學期同學們之間基底深厚度就很明顯看的出來。 很感謝Alpha

 JavaScript特性 - 同步性程式語言 JS其實是種同步性程式語言，和其他程式語言不同，JS在執行時是 照順序 且 一次只做一件事。 在程式執行時，按照順序把程式碼push進stack區執行，執行完畢pop off出stack區，再把下一行程式碼push進stack區執行，直到完成整份文件。 所以當某一行程式碼卡在stack區處理不完的時候，程式執行變得緩慢(後面的程式碼排隊等著)或是卡死(while無限迴圈永遠執行不完)或是直接報錯(堆疊超過系統設定上限，系統直接說不幹了 XD)。所以在寫程式時檢查程式碼有沒有不小心無限迴圈很重要，學習優化程式碼提高程式運行效率的概念也要建立起來。 Callback function Callback function其實就是把函式當作另一個函式的參數，透過另一個函式來呼叫它。當callback同步時，stack區會往上推疊callback function，再由上往下一件一件處理完移出stack區域；那當callback非同步呢？像是AJAX、Event Listener、setTimeOut、...等用法都讓callback function成為非同步。 非同步callback function發生甚麼事？ 以經典的windows.setTimeOut( function() {...}, 毫秒)為例。 程式碼的指令："在經過了多少毫秒後呼叫callback function"。但在實際上當程式執行到windows.setTimeOut( function() {...}, 毫秒)時，理所當然地把這包指令整包丟到stack區，要處理時發現了非同步指令，接著整包指令又被從stack區移除並被丟進webapis區解析要做的動作。 stack區在移除了setTimeOut指令後，繼續把下一行程式碼丟進stack區處理，而webapis區在處理完非同步指令的request後(setTimeOut為例，指令request是等待多少毫秒)把callback function丟進task queue等待，stack區清空後才依序把task queue裡pending的function丟進stack區處理。 有時候會發生："奇怪？不是設定0秒後執行，為什麼延遲了？"的狀況。這就是因為callba

第一週- JavaScript核心概念 這學期以JavaScript做開場，在學期一完成後自信滿滿的我一踏入馬上就開始懷疑人生了 T.T~ 難度和學期一的確是有段落差。 這週課程以補齊JavaScript核心基本概念為主，介紹陣列、物件、函式概念及用法。第一次跟課對我來說好像是懂了卻彷彿很模糊，在課堂作業時就傻眼了做不出來，再回頭看課程、查資料和看各種範例才拼拼湊湊完成了這週課程。 很慶幸我個性就是拗 😂，我就不信我會看不懂這種初學者的東西。 我實際花了兩週時間在這預計一週的課程裡。除了查資料、練習各種範例外，難得的我在 HackMD 寫了筆記，把我弄懂的東西放上來做個紀錄，也在完成所有課程後再回頭快速複習一遍、重做一遍作業們。在我重作作業時完全無障礙一遍過時，我知道"我得到它了"！ 非常的感謝Alpha Camp學習設定的方式，在學習開始前可以預讀，讓我在學期一到學期2-1的難度落差銜接上有充裕的時間。也很感謝可以觀摩前人的作業，在我真的打死結時可以看一下答案，也在我完成後可以觀摩以往同學們有沒有其他不同的做法，讓我學到更多不只是課堂上的基礎知識。 第二週- 切版技巧和工具 這週比起上週輕鬆一點。課程從CSS的FlexBox、Position觀念下手練習，接著對我來說花比較多時間的是Bootstrap的熟悉，最後再以RWD的概念結尾。 由於CSS在學期一時我一玩就會不小心一個通宵，Position用法在學期一時雖然課程沒有但我那時查資料查到覺得有趣就通宵玩了幾天，這週CSS部分對我而言就像是複習一樣輕鬆。果然凡是努力過就會留下痕跡！ Bootstrap對我來說就是新世界了，寫作業時花很多時間找想要的效果到底放哪一頁，那時心裡想"騙人！沒有比較快呀？"，但在完成作業後又用練習Bootstrap的想法參加Alpha Camp舉辦的黑客松，在短短3、4個小時逼出自己的極限(我極限怎麼這麼低 😂)，果然對Bootstrap熟悉度急速上升啊！就像近幾年有個概念"刻意練習"一樣，真的相當有用！ 以下是我黑客松弄出來的Bootstrap切版練習 (照片來源是FB婦仇者廚房，只是初學者的練習，如有侵權請通知我刪掉) See the Pen 婦仇者廚房-sideproject-bootstrap練習

  第一週- 稍微暖個身就開始往前衝了！ 除了上課平台、共學社群的基本使用介紹，初步講解了程式語言基礎觀念，對於我這種隔行如隔山的人來說是個還不錯的opening！ 這一週迅速地進入了基礎的Javascript基礎語法和觀念，使用 Repl.it 網路平台開始練習寫code(不用煩惱軟體安裝問題真好😂)，也馬上開始有作業和小測驗了。課程安排得還不錯，從很簡單的變數運算子到稍有挑戰 if/else 條件式、 for/while 迴圈，再到建立運算思維的 虛擬碼 、 流程圖 、 Debugging ，循序漸進地讓新手(就是我)建立寫程式思維邏輯的習慣。在相應的單元還有一些其他網站的參考資料連結，對我來說當下看不懂可是學習完回過頭才發現很不錯，基本觀念的介紹釐清換其他表達方式有時讓不知道我們不知道什麼的新手加強了解了一點。 這週的收穫除了終於踏入門的松一口氣和真的寫出會跑出結果的程式碼(雖然真的很基礎)的成就感，對我來說額外的收穫是收斂我跳躍的思考和表達方式(我必須說，辛苦了在我人生中嘗試要跟我溝通的人們😅，在此由衷的表達我的抱歉和感謝！)。還好這個上課平台可以看到其他同學交的作業，我才驚覺助教打開我作業的瞬間是會有多傻眼😂，其實我花了十二萬分努力先寫完可以跑出結果的程式碼再回頭修改加註解讓助教好讀一點。(對不起，我的虛擬碼和流程圖是寫完程式碼才回頭畫的，腦迴路方向不一樣還在努力中😅) 第二週-Javascript小挑戰和初步認識HTML、CSS Javascript 印象最深的作業是猜數字遊戲要在10局內猜出答案。喔吼我的暴力解是：第十局不管猜謎者說什麼數字，主持人都告訴她答對了，直接改了標準答案。(厲害吧😂) 改進後決定讓兩個參賽者參賽，一個用亂數猜、另一個用中位數猜謎，看誰會贏。 // 宣告變數 // 選號範圍 a <= 答案 <= b let a = 1 let b = 100 let answer = Math.floor(Math.random() * (b - a + 1)) + a // 標準答案 // 假設有2位玩家參與遊戲 let guess_1 = 0 // 電腦1號玩家, 用亂數策略 let guess_2 = 0 // 電腦2號玩家, 用中間數策略 let count = 1 // 局數 console.log(`手卡標準答

動機 據不可信資料來源統計，台灣年後想轉職勞工約佔90%以上。(不管別人想不想，反正我是想轉) 想轉職不是個新鮮玩意了， 但 為什麼是軟體工程師呢？ 咱們也不唱高調說什麼夢想了 很俗氣的說，錢多事少離家近裡至少占兩項 傳說中好好做可以年薪百萬(傳說可能更高但咱們要求不高)，離家近的部分... 遠距在家工作離家夠近了吧😂 尤其是疫情持續了兩年，多多少少都有感受到可以遠距的工作對收入穩定和工作舒適度有多大好處(想到不用擔心公司廁所乾不乾淨心情就好 咱們要求真的不高😂) 其他都是虛可以講出來讓大家笑一下 在看電影裡除了那些武打動作，最讓我覺得酷斃了的都是那些在鍵盤螢幕輸入一串看不懂的代碼然後想做什麼就完成了的橋段，高科技啊! 在現實世界哩，近幾年有幸在工作中和會寫程式的同事一起工作，也不管他們完成的是簡單還複雜的程式碼或功能，看著他們速度極快的在鍵盤上敲著一串又一串代碼，我彷彿活在電影裡啊！😂 對我來說就是酷斃了！高科技啊！原來這麼夢幻的技能在我們身邊離我們這麼近！ 小白們才懂的自學瓶頸 老實說，有程式基礎的人無法理解我們小白們卡死在哪？ 怎麼老是說要學，一問又沒什麼進度 過了這幾個月撞牆期，總結原因如下： 1. 不知道要學哪種語言，哪一種語言適合我呢？ 一開始對於哪種語言可以做哪些事沒概念 試著到處聽各補習班的說明會、各個youtuber的分享 老實說，除了耗很多時間之外，這個問題還是沒答案 😂 也因為不同分享推薦的不同，糾結如我，花了大把時間每聽一個就覺得好試試又聽到其他分享.. 每個語言都進展在Hello World 2. 訪間課程、書籍超多好難選 ==> 因為窮😂 訪間課程動輒10萬實在是沒辦法豪邁地說小孩子才做選擇啊 試著自學時書籍我買了很多，像我一樣的新手真的不建議，有問題沒人問就卡死了 有幾個網站推薦可以嘗試，資源多、免費或是便宜。雖然我都試著跟過，但對我來說除了英文聽力好像變好了其他沒什麼進展😭 (有經濟考量的可以試試) 大家耳熟能知的 Udemy ，課程便宜常常特價，有海量的課程英文中文都有 CS50 是哈佛公開課，免費練英文、聽一下正規課堂 好像是Google開的 Coursera ，上完可以拿到一流大學的證書 3. 電腦基本知識不足 自學對我最大瓶頸居然是卡在一開始安裝軟體  (想不到吧？😂) 安裝完怎麼使用？套件是啥？ 其實我