Twitterf開發反思部落格 前期組隊: 一開始忽略了這個環節。 最後一個禮拜參加了Zoom的會議才知道要組隊， 以及怎麼組隊。 這個時候大多數的人都已經有組了， 原本想到的幾個口袋名單也去別人口袋了(哭啊) 所以組隊蒐集隊友花了不少心力。 反思: 活動訊息很重要, 參加活動絕對不是人到就好. 很多規則，時程，前置作業，凡舉周邊的情報都要用心了解一下 時間花在前期準備是比較有效率的 工作分配: 對前端要怎麼分配雖有概念，但是規定自己絕對不要去表達或是去建議前端組員的想法。 我自己理解Twitter專案的目的是讓每個學員體會團隊協作其中，好的一面以及不好的一面。 AC的組員大多人都很好、很友善。但是過度的manipulating儘管專案進度會比較穩定，但是反而會犧牲掉組員練習的機會。 後來發現這樣做產生成本比預期的高，哈哈 後端部分因為餐廳論壇專案跟架構已經有跡可循，所以分工起來大家都很有共識 具體分工我分配在每個sprint階段 Sprint# 1 系統分析 (要交一堆文件) 我個人是負責 acceptance criteria, DoD, API 文件規格與哪邊用哪支. 系統分析好重要。這次的經驗挺珍貴的。 從需求 => 規格 => 系統分析 => break down到每個環節要怎麼執行以及怎麼執行 很有趣，很像以前產品開發的時候在看廠商做bussiness development的感覺 (要看這個廠商懂不懂, 會不會, 以及願意投入多少資源, 以及執行團隊跟設施這些) 反思: 秉持著大家都要練習到的想法，跟組員做了同樣的工作。 本來想著出來可以互相參考，但是因為出發點不一樣(不然就是我沒說清楚)，導致出來的東西不容易合併。而且時間也有限，最後就直接拿其中一份交出去。 有點給人莊孝維的感覺，所以總之就是: 嘖... 不要太自以為。 Sprint# 2 正式開發啦 ~ 我的部分: Express架構 -> Dummy data讓前端可以先套套看 -> Heroku架設 -> User request -> admin request 以及隨時修改前端需求。 我的部分本來打算盡快先讓前端有API可以串, 那怕是dummy data也好。 所...
發表文章
AC畢業部落格 (後端) 八個月過去了，其實還不敢說自己已經掌握了什麼技術，或是已經到了可以求職的程度 回頭看看自己之前做的比較整理一下這幾個階段學習到哪些東西 學期1 很基礎的Javascript 語法 像是幼幼班在玩編成機器人的那種感覺。 HTML () 知道網頁中的字, 圖片, 按鈕這些東西是怎麼顯示出來。 CSS (Cascading Style Sheet) 知道要如何修改HTML裡面這些元素在瀏覽器中呈現的位置以及外貌。 學期2-1 字串, Array, 物件的基礎操作 配合一些靜態網頁的實作, 練習一些基礎資料處理以及物件方法的使用. 挺有趣的 CSS與切版 由大到小, 由外而內. 先把設計稿轉換成貼近HTML架構的框線圖. 然後在HTML製作框建, 在CSS裡面調整版面. 這個時候排版多用FLEX跟position在排. 還不算太難 元素跟物件也多從 front-awesome跟bootstrap上面拿, 不用自己畫. RWD設計其實挺麻煩的 :( DOM的操作 既然切好版了, 就可以用切好的版來做一些簡單的功能啦 Document Object Model, 使用Javascript把HTML中的元素當作物件一樣來操作。 如何選取到要操作的元素, 已經樹狀的資料型態要怎麼去連結到想要的目標 但是到了學期三, 基本上就沒有再用到了, 應該忘得差不多了 學期2-2 學期2-2我覺得還挺酷的, 有比較真的有在做東西的感覺 學習了API & Ajax的原理, 使用Axios進行非同步的API資料串接, 也學習了客戶端送出url後, 是怎麼跟伺服器獲取response再到瀏覽器渲染的過程 再搭配之前學習的DOM操作. 實做了好多網頁. 印象中有: 電影清單: 拿到JSON資料, 利用標籤中的id 或是 class, 製作首頁, 收藏, 搜尋, modal這些功能 POS機: 取得產品資料後, 製作首頁, 購物車, 還有結帳 翻牌遊戲: 有特別提到"狀態", 使用不同的狀態讓controller進行不同的動作. 搭配之前學的MVC架構, 感覺做出...
1分鐘製作codepan的自動刷新 - Browser-Sync 功能 涉及到畫面製作與調整的專案, 在開發階段常常需要常常檢視代碼畫面的連動 不想要頻繁的手動刷瀏覽器, 也不想遷就codepan的介面, 請愛用Browser-Sync npm網址: https://www.npmjs.com/package/browser-sync 詳細說明: https://browsersync.io/ 兩個步驟搞定 step 1 - 安裝 npm install -g browser-sync 跟nodemon一樣, 建議使用全域安裝, 這樣每個專案都可以使用 step 2 - 執行 假設我們已經在localhost3000執行要監看的專案 此時你需要修改一下執行命令 官網上有詳細說明, 但是這邊我分享我修改後的命令 在你的專案路近下, 終端機輸入此命令 browser-sync start --proxy "localhost:3000" --files "./**/**/**" 瀏覽器會開啟一個新視窗(應該是http://localhost:3001) 這樣你變動任何檔案 例如: html, css, hbs, js 都會自動刷新瀏覽器 至於涉及到伺服器重啟動作, 則是需要安裝/使用nodemon
四個步驟使用Helper (express-handlebars) 目的 handlebars檔案(已下簡稱.hbs)中的{{#if }} 只能依照布林值做反應, 不能夠做 === 這樣的判定 要讓.hbs也能做等於的判定可以使用helper來實現 Step 1. 創建一個hbs-helper.js 檔案, 檔名跟位置沒有限定. 我這邊是直接放在根目錄. 也可以放在public Step 2. hbs.helper.js 中 輸出一個定義好helper的函式 其中 eq 就是之後要用來呼叫的helper的函式名稱 Step 3. 於 app.js 呼叫此檔案, 並於app.engine中加入helper的設定 const hbsHelper = require ( './hbs-Helper' ) app . engine ( 'hbs' , exphbs . engine ({ defaultLayout : 'main' , extname : 'hbs' , helpers : hbsHelper //這邊加入helper的設定 })) Step 4. 現在就可以.hbs中 使用定義好的helper做判定了 原本的 {{#if}} 後空格, 接一個括號 (A, B, C) A = 定義的函式名稱 B = 函式的第一個參數, 這邊是函式中的 a C = 函式的第二個參數, 這邊是函式中的 b 都是用空格隔開 {{ #if ( eq this.categoryId 1 ) }} < i class= "fa-solid fa-house fa-2x item-icon m-1" ></ i > {{ /if }} 補充 Helper裡面還有一個很常用的東西是option 但是比較負責, 等之後遇到實際運用在寫吧
AC_A3老爸的私房錢 (記帳本) 你為何會選擇這個專案？ 這個專案涵蓋了很多簡單又常用的功能. 使用者的註冊登入, 資料庫的CURD與簡單的計算跟sorting. 日後我有一個side project要做一個PM用的ERP 所用到的功能跟這個會很貼近. 所以是一個用來強化記憶的好專案 你使用了什麼技術？ 這是一個佈署再Heroku上的網站應用, 是用Node.js中的Express架構來完成的 前端是以express-handlebars, bootstrap, 以及一些手刻的CSS 後端是用mongoose連接mongoDB做資料管理 註冊登入功能是使用passport搭配bcrypt.js做加密 哪部分你相對能掌握？哪裡花了最多時間？ Express的架構以及Mongoose的資料庫管理是我最有信心的 花最多時間的是登入功能, 因為涉及到很多套件的使用例如passport, local, session, facebook等 套件 而每個套件又有自己的函式與參數設定. 這部分我需要看著官方文件做. 還沒辦法都記起來 過程中碰到什麼困難？又如何克服？（例如：查找網路文件） 有一個地方卡很久是在依照記帳類別來顯示對應的icon的功能 這個功能我上網找了一下可以用handlebars中的helper來完成 我試做了一下沒有做出來, 而且在做的過程有點牴觸. 因為這個功能只有一個地方用到, 專門為它去創一個helper覺得有點浪費. 所以後來就直接在資料處理這邊用邏輯的方式處理掉了 過程中你有對哪個技術有特別深刻的學習？ 非同步處理 在跟資料庫索取資料, 處理資料, 回傳前端這部分涉及到同步/非同步的任務 從callback, promise, async/await的方式都試過. 目前是用比較熟悉的promise語法來完成 但是看了網路上很多人推崇async/await的寫法, 因為更直觀, 日後小組維護程式碼更容易 所以這禮拜想把promise的地方用async改寫看看, 熟悉一下. 還有一個就是前端設計這塊, 因為類似的專案很多...
Error, 我討厭Error
思考結構 細部問題 狀況；緣起 在寫routes作業的時候. 跑出了這個錯誤 TypeError: Router.use() requires a middleware function but got a Object 第一次出手與失敗 一開始想說是不是哪個變數打錯了, 還是require這邊沒弄好 還是打字打錯. 還把教案的程式碼都複製過來, 一行一行看. 結果都不是這些問題 定義問題 我把教案沒提過, 或是自己沒遇到過錯誤當作是知識忙區. 尋找與嘗試 知識盲區的話就上網查最快. 直接把錯誤貼上去, 就會有很多相關的文章出來 但是很多是不相關的, 要慢慢找挺花時間的 掌握關鍵，撥雲見月 後來發現是, 因為我routes/modules那邊一次把所有檔案的創好了 routes/index.js 那邊也關聯了 但是modules裡面很多都是空白的 讀到的時候不會像是views那邊一樣可以顯示空白 而是因為沒有 module.export = router 這段 會直接出現伺服器錯誤無法測試 回顧與發現 一個字 菜 分享與展望 我自己是在Notion AC的目錄下創了一個Error大全 每次遇到不能馬上解決的error都貼進來 找到解決方法之後就去裡面註記一下怎麼解決的, 順便罵個幾句
Dummy Project - 社群網站
.png)
Dummy Project - 製作社群網站的前端頁面: 程式碼參考資料: 作品頁面 GitHub 製作流程: 功能描述 - 按照API資料庫顯示用戶 - 點選More顯示用戶的詳情 - 使用分頁器顯示 - 使用名字關鍵字搜尋用戶 - 加好友 - 好友分頁可以檢視已經加入的好友 - 可以移除好友 切版 Bootstrap模塊選用 這邊會需要用到以下模塊. 也可以直接在Bootstrap網站中搜尋關鍵字 Nav Bar - 用來做首頁與好友分頁的切換 Search Bar - 搜尋功能. 有些會合併到Nav Bar. 需要搜尋inline forms Card - 用來顯示每個用戶的頭像與名字後面會附加其他功能: 詳情 與 加好友 Pagination - 也有人稱為paginator. 分頁器 Modal - 彈出對話框. 用來顯示詳情 Javascript A. 渲染User List 1. 使用Ajax將API的用戶資料抓到 model.users中 2. 定義DOM節點 - 要渲染用戶清單位置 3. 製作view.renderUserList( ){ } 來渲染用戶頁面 使用 Template literals 的方式進行渲染 4. 在axios時 執行view.renderUserList(model.users) 因為這邊抓取資料式Ajax (非同步) 所以在外面執行的話, model.users還是空的 5. 渲染後調整一下margin. 以及Modal內容 B. 顯示詳情 Show Modal 1. 配對按鈕與Modal 參考範例 按鈕加上...