全端網站開發筆記：活用MERN技術，打造制霸全球的動態網站，開創六位數被動收入！（iThome鐵人賽系列書）【軟精裝】 (1版)

類似書籍推薦給您

【簡介】 誰說獨自開發軟體不可能， 現在就教您怎麼獨自完成的價值數十萬產品！ 　　本書是寫給有一點 JavaScript 基礎並想自己掌握網站前後端的人，且在幾乎零成本的情況下，做出一個自己能夠掌握客戶資料與實際運作的動態網站，就如同業界從零到一開發軟體一樣，並在練習時掌握各種觀念與架構，包括設計美感的培養與程式語言邏輯的脈絡，最終產生一個能夠被部署到網路上、被 Google 搜尋到的網站，為自己產生源源不絕的被動收入與邁進 solo 創業之路！ 　　【重點說明】 　　☑ 軟體設計指南：內涵 UI 刻板與 React 實作 　　☑ 產品資料建立：MongoDB 資料庫快速入門 　　☑ 動態網站實作：前後端串連 RestFulAPI 　　☑ 適合自學創業：程式小白 / 初學者友善打造實用基礎 本書特色 　　1. 從 UI 中練習 SCSS 實作與配置原理探索 　　大量切版練習可以讓不熟 CSS 的你了解軟體是如何被打造的，學會 SCSS 的巢狀結構，之後學習更進階 Tailwind CSS 等其他 styling 技術都能通用。 　　2. 深入前端 Hook 與特效應用 　　透過在傳遞資料鏈和特效實作的過程中，你將能深入了解 React hook 的用法。一方面做出與模板網站不同的介面，一方面更了解 React 框架應用。 　　3. 後端打造和保護你的資料 　　從基礎開始，我們將探索如何架設 Restful API，實現 CRUD 操作——即建立、讀取、更新和刪除資料。此外，我們也會深入了解如何設立專屬的會員制度，這不僅使你能夠第一手掌握和保護資料，並且確保它們透過JWT得到妥善加密。最後，我們還將設置管理員功能，以防止不當存取或資料竊取。 　　4. 線上與線下技術的完美融合 　　透過 20 個詳細的實作進度版本，我們從每一章的前端開發探索到後端開發，最後到前後端的順暢串連。無論你是在路途中怕忘記某個步驟、只想專注於 API 的開發，或是希望加強串接技巧，這裡都提供了完整的指導。當你完成這一路程，你將擁有一個功能完善的網站！ 專業推薦 　　《全端網站開發筆記》結合實踐、觀念和實例，特別適合那些希望深入了解軟體開發的初學者。—Wesley Hsu｜Podcast 「幣須送外賣」主持人 / 愛錄不錄工作室負責人 　　這本書不僅滿足了我想學習開發專案的需求，更為我提供了實際的保母級操作教學，使我能夠更自信、更有能力地應對日益複雜的產品開發挑戰。—鄭達玄｜Blockchain 產品經理 　　我會說這本書不僅僅是一本技術手冊，更像是一場深度學習之旅。作者深入淺出地解釋了 MERN Stack 的每個元件開發過程，並通過豐富的圖片和圖表精心呈現程式碼和學習中的思維。—Kevin Liao｜資深後端工程師 　　作者不僅在書中闡述了 MERN Stack 的開發過程及習過程中所遇到的困難和挑戰，且每一步複雜的技術都有圖文解釋，使讀者可以更容易的閱讀，並理解問題，解決問題，亦使讀者能學習到解決方法，也對內容更有印象。—Lawrence｜開拓者行銷 技術總監 【目錄】 推薦序 序 [Chapter 1] 了解軟體前後端概念、各式專有名詞與開發流程 Frontend / Backend / MERN / Development Process 一、軟體開發前端與後端概念 二、MERN 開發系統名詞解釋 三、K.o.Booking 實作開發流程圖 [Chapter 2] 架設環境、npm 指令與建立 React App create-react-app / React App 一、了解並使用 Npm 二、使用 CMD/Terminal 指令 三、了解 React App 資料夾結構 [Chapter 3] SCSS 與 Component 首頁概念圖與 UI 實作 SCSS / CSS / SASS / UI 一、CSS Style Sheet Language 介紹 二、了解產品 Component 配置與 UI 分析 三、Header SearchBar 重點製作 [Chapter 4] useState 介紹與其條件搜尋功能 useState / SearchBar / Calendar / Operator 一、useState hook 與 React Hook 二、製作 Calendar 彈跳視窗 三、&&, ? : 運算子，React 的條件子句 四、搜尋欄資料連動使用者動作 五、製作 Conditon 彈跳視窗 六、製作加減函數 useStateData 運算 七、資料連動 Input onChange 用法 [Chapter 5] 介面訂房網的功能開發與最佳實作 Best Practices / Implementation 一、使用 React 和 Map 方法快速構建迴圈 二、探索 React 中 Map 的高效迴圈 三、獨立模組製作與 React props 四、PostCards 組件 Array.slice 用法 五、熱門產品排行 六、Footer 與全球註冊 Banner [Chapter 6] Hotels List Page 製作與 Page 分頁資料連接 react-router-dom / Hotels List Page 一、react-router-dom 使用方式 二、useNavigate 分頁的資料連動應用 [Chapter 7] useRef 與 Gsap 介紹 Hotel Page 與 Grid Hotel Page / CSS Grid / useRef / Animation 一、hotel Page UI 製作 二、CSS Grid 介紹與應用 三、useRef 與 Gsap 介紹 四、撰寫 hover 函數 [Chapter 8] 後端篇章 Node.js API 串接資料庫實作 MongoDB / RestFul API / Node.js 一、了解何謂 API 運作原理與實作 二、MongoDB 連接本地 三、async function 與 try & catch 實作 [Chapter 9] API 串接、建立 Schema 與了解 CRUD Api / Schema / CRUD 一、API route 連接express.router 運用 二、了解CRUD 並上傳與第一筆資料 三、了解insomnia 與如何實作 [Chapter 10] 讀取、更新、修改、刪除 API 建立 API / CRUD / insomnia 一、insomnia 環境變數建置 二、( req, res, next ) next 等多種用法 三、apiControllers 不斷分類（Controllers） [Chapter 11] Room / Hotel 非關聯式資料串接應用 Room / Hotel / NoSQL Data 一、完成 hotelsApi，抓取所有住宿資料 二、RoomApi 的 NoSql 類串接資料方式 [Chapter 12] User 註冊、登入常見會員制 API useApiRoutes / AuthApiRoutes 一、完成 userApi 註冊、登入並為授權做準備 二、認識 bcrypt 並加密使用者密碼 三、API 註冊時的一些條件實作 四、後台管理會員 CRUD 會員資料 [Chapter 13] 會員制授權認識 Cookie 與 JWT Cookie / JWT / Token / Admin 一、JWT（_____JSON Web Token）介紹 二、loginAPI 登入產生Token 與 Cookie 紀錄 三、使用 Token 來處理 API 授權動作 jwt.verify 四、callback function 名稱解釋 五、token 權限在 insomnia 測試 [Chapter 14] 前、後端串接 ClientSide API 與 UI 介面連接 Connect / Axios / useEffect / Proxy 一、API 與 ClientSide 網站 UI 介面連接 二、全端動態網站啟動流程 三、axios 介紹，前端串接後端 API 四、useEffect 介紹與使用 五、proxy 與同源設置與全端串接 [Chapter 15] NoSQL 資料爬梳應用 Filter 與 Query Filter / Query / Req / Res 一、統計資料庫的幾間住宿 API 串接與爬梳條件 二、req.query 與 Array 排列查詢 三、串接新 API 並再次練習 props 傳入資料 四、產品排行榜 API 應用 [Chapter 16] Context API 教學實作前台建立會員制 ContextAPI / Reducer / Auth 一、認識 Context API 並建立會員制 二、Context API 與 Redux 差異 三、串接 login 與 register 頁面 LoginContextApi 四、setError 設置註冊等錯誤回報訊息 五、建立 LoginContextApi 與其應用 六、了解 Reducer 在 Context 的作用 七、switch case 解釋與設立 constants 用意 八、JSON.stringify 與 JSON.parse [Chapter 17] Reducer 與 dispatch 應用 Provider / Reducer / Dispatch 一、Context API 的 dispatch 操作了解 二、利用 dispatch 上傳 User 資料 三、dispatch 抓取 user 資料 四、optionsContextApi 設立，儲存用戶操作 五、資料存於 localStorage 的契機 六、dispatch 我們使用者行為操作資料 [Chapter 18] SearchItem 搜尋欄查詢真實資料的實作 Query / useFetch / SearchItem / Skeleton Loading 一、query 的各種混合應用 二、useFetch 的使用 三、拆分 SearchItem 框架資料組成 四、設立 fetchDataUrl 的 state 五、skeleton loading 的 ListItem 載入畫面 六、最高價格與最低價格搜尋 API [Chapter 19] Reservation 儲存客戶行為 optionsContext / Reservation 一、將真實飯店資料連動到 hotelPage 二、製作空房情況 UI 設計與串接 room 顯示資料 三、顯示訂房時間與相關人數條件 [Chapter 20] 建立 Order 訂單完成訂房手續 Order / Reservation / Mui / FramerMotion 一、訂房操作限制，查詢時間防呆機制 二、Mui 與 framerMotion 特效使用 三、設立新的 model，Order 訂房下單準備 四、insomnia 的 Order API 測試 五、使用 axios 回到前台 UI 做串接 六、CheckBox 函數製作，RoomNumber useState [Chapter 21] 完成訂房功能 Order / Reservation 一、完成訂單的送出 axios.post 二、useState 的 re-render 執行時間與 useEffect 配合 三、new Date 與 getTime 宣告的全域變數問題 四、updatedRoomDates API 上傳日期區間 五、UI 上傳訂房日期並設置同時段不能再訂房 六、完成的下單檢測

一流的人如何擁有動態穩定力：培養變通思維，調整期待，修復不確定性帶來的震盪，隨變動而更高效強大 (1版)

類似書籍推薦給您

【簡介】 　　改變或失序是人生的必然，如何順應變動才是重點， 　　奮力逃避或抗拒改變，只會過勞焦慮，或決策困難、組織震盪， 　　在混亂中有技巧的適應改變，是心理健康和卓越成功的基石， 　　與人生的轉變共舞，你跳這支舞的技巧愈強，就愈健康、愈快樂！ 　　★聚焦在我們可以掌控的，透過改變得到力量：秩序→失序→新秩序 　　人生有些變化令人難以招架，並不如自己想像的那般歲月靜好。研究顯示，成年人會經歷36次失序事件，每一年半就會面臨人生波動，從經濟、政治動盪，到轉換工作、結婚或離婚、育兒、失去親人、生病等，或工作不順、與伴侶吵架、生活波折不斷等，但我們可以透過順應變動而強大，使其成為成長的推力，這種能力是可以培養與練習的。 　　★從奧運金牌選手、單親媽媽，到新手爸爸都在應用的新模式 　　《一流的人如何保持顛峰》作者史托伯格帶領我們以全新模式適應「秩序一失序一新秩序」的循環，順應人生的變動，採取我們可以掌控的行動，可以將苦惱、不安與憂慮降到最低，增進深層的幸福感與持續的滿足感，同時有更出色、更持久的表現。作者透過現代科學和生活實例，提供實踐的方法，你可以在本書學到： 　　＊接受改變的事實，可以帶來優勢：改變是中性的。你必須真正接受你所面對的現實，以務實態度向前進。例：健身房行銷總監突然遭到辭退，且有房貸壓力，她重新審視自己的專長與目標，發展寫作服務。她的價值不再取決於頭銜和職位，她的創造力是其他人無法奪走的。 　　＊預期會遇到困難，痛苦＝疼痛×抗拒：根據變動來修正期待，愈能適應，消耗的能量也愈少。例：梅約醫學中心發現患者會因為疼痛而抗拒某些活動，但經過適當的指引和練習，一旦撐過一開始的疼痛，身體會逐漸放鬆。將疼痛視為可以管理的，越退縮，情況越糟。不斷更新期待，並且面對現實。 　　＊刻意建立堅韌彈性的適應力：我們的健康、長壽與展現天賦的能力需依靠核心價值，在變動時期成為成長的動力。例：網球名將費德勒經歷多次受傷，他接受事實，順應年紀和體力來調整自己、改變戰術和練習方式。他的職業生涯比其他運動員更長，並在低潮後再度登上顛峰，除了卓越技巧之外，更重要是他在面臨變動時擁有絕佳適應力。 　　＊培養像水一樣流動的自我概念：人們經常過度依賴自身扮演的角色（例如好父母、好伴侶、好員工、好主管），藉此獲得肯定。若能整合多個身份認同，即使在某個領域跌倒，依然可從其他身份獲得力量。例：冬奧雙金選手范德普爾經常因成績而情緒起伏。以前他將運動視為生命的全部，後來認知這個身份只是人生的一部分，開始追尋滑冰以外的人生，接受改變和失序的概念後，成績表現和心理狀態更為放鬆和穩定。 　　＊保有核心價值，其餘部分有商量餘地：滿足變動環境需求，就不容易被取代。例：《紐約時報》在報業巨大的失序與動盪期間交出亮眼成績單，2000年有120萬訂戶，2022年超過1千萬付費訂閱者，股價創新高。紐時不像其他媒體逃避改變，而是順應環境變動，不斷調整自己。 　　＊以審慎回應取代憤怒反應：直接反應會帶來恐慌與攻擊，以暫停、消化、計畫、執行來回應，可以更靈活適應職場、身體、情緒和難題。例：加州大學洛杉磯分校研究，讓參與者在陌生人面前即席演講，半數參與者去標示自己的感受，例如胸口緊緊的或喉嚨卡卡的，結果顯示這一半參與者的心情較平靜。當你標示情緒，就可以 與那些情緒分離，並提供更大的自由去處理周遭發生的事。 　　＊生命有自己的時間表，給心理免疫系統一點空間：在劇變發生的當下，保持耐心，用溫柔對待自己是最好的方式。例：當我們遇到特別嚴重且從來沒遇過的變化（像是蒙受損失、生病或是身份認同危機），心理免疫系統不會立刻開始運作，需要一點時間匯集必要的資源。若想倉促得出正向的展望，會使我們覺得更糟。勉強不來，否則會產生反效果。 好評推薦 　　林妍希｜現任「為台灣而教」董事 　　洪仲清｜臨床心理師 　　卡爾．紐波特｜喬治城大學電腦科學系教授 　　凱蒂．米爾克曼｜華頓商學院教授 　　基倫．賽提亞｜麻省理工學院語言學及哲學系教授 　　奧利佛．柏克曼｜《衛報》獲獎專欄作家 各界推薦 　　接獲書稿時，我正在歐洲展開21天的旅程，原本以為我會沉浸在風光明媚的景致裡而無暇讀完，沒想到卻因為這本書的陪伴而扭轉了我在這次旅程中經歷不預期變化時的心境與念頭，讓我欣然接受且感恩所有的際遇。書中這句話「痛苦等於疼痛乘以抗拒」相當啟發我，許多痛苦源於對改變的抗拒。人生無常，我們都會有錐心刺痛的時刻，當你面臨生命中的低谷時，請給自己一些時間和空間暫停與消化，如作者所言「意義與成長的出現有自己的時間表」，不用急著為每一個事件標註意義。─林妍希，為台灣而教（TFT）董事暨School 28共同發起人 　　改變是無可避免的，這本書充滿智慧且符合時代需求，提供我們路線圖，幫助我們在這個紛亂的世界向前進。─卡爾．紐波特（Cal Newport），喬治城大學電腦科學系教授、《深度工作力》作者 　　本書挑戰了我們天生想要拒抗改變的心態，提供經過精心研究後得到的建議，幫助你擁抱並積極面對改變。這本深具內涵的書讀起來輕鬆愉快，同時賦予你寶貴的智慧，安然度過人生中意料之外的發展與轉折。─凱蒂．米爾克曼（Katy Milkman），華頓商學院教授 　　希臘哲學家赫拉克力特說，你無法踏入同一條河兩次。作者會讓你開始質疑，自己為什麼想要踏入同一條河兩次？改變是無可避免的，但假如我們學習與它一起努力、而不是與它對抗，我們就會和河流一樣：流動、可變通，更堅韌。─基倫．賽提亞（Kieran Setiya），麻省理工學院語言學及哲學系教授 　　在這個經濟、科技與政治現況不斷劇烈變動的世界，我們必須學會以悲劇性樂觀面對人生：儘管生命充滿無可避免的挑戰與苦難，仍然要不斷的重新找到意義與力量。若要獲得這個至關重要的能力，本書是最佳指南。我極力推薦。─德瑞克．湯普森（Derek Thompson），《大西洋》雜誌撰稿人 　　不確定性與變動性是每個人需要面對的現實。這本激勵人心的著作引導我們不只要應付這個現實，還要積極投入，甚至與它合而為一，在此時此地不斷成長茁壯。─奧利佛．柏克曼（Oliver Burkeman），《衛報》獲獎專欄作家 　　這個世界唯一確定不變的事情是，永遠在改變，因此用新的框架來理解並適應這些變化，而不是抗拒或否認這個事實，對於我們的幸福至關重要。作者運用高超的個人技巧，在本書中巧妙的將科學與哲學結合，提供一張藍圖，幫助我們擁抱意想不到的各種變化。─大衛．艾波斯坦（David Epstein），《跨能致勝》作者  【目錄】 序言 建立適應變動的新模式 PART 1 打造堅韌彈性的思維 1 接納改變，向生命之流敞開 擁抱非二元思維，接受事物之間存在矛盾 2 預期會遇到困難 依據變動設定合理期待，採取明智行動 PART 2 整合自我認同 3 培養像水一樣流動的自我概念 保有所有互相矛盾的特點 4 根據核心價值行事 找到界限與方向，做對的事 PART 3 刻意而為的行動 5 以審慎回應取代直接反應 提升自我效能，發展穩定自信心 6 給心理免疫系統一點時間 生命有自己的時間表，也要適時尋求協助 結論 實踐動態穩定力的練習 致謝 附錄 可供應用的核心價值