回首頁  
帳號
 
關於博碩 博碩好讀 校園圖書 MOCC認證 下載教學 元學堂

博碩好讀
  新書推薦
  出版預告
  名家名著
  iT達人祕笈
 

分類索引
 

出版總覽
 

讀者服務
  徵求作者
 
首頁 >> 書籍介紹
 
 
點我可放大圖片
 
書名：全端網站開發筆記：活用MERN技術，打造制霸全球的動態網站，開創六位數被動收入！（iThome鐵人賽系列書）【軟精裝】
書號：MP22356 作者：柯昱丞（Ko） ISBN： 978-626-333-770-1
定價：NT$790元 印刷：彩色 頁數：376頁
書籍規格：17*23 上市日：2024/3/8 譯者：(無)
學習定位：初階 本書附件：無  
前往購買 >> 蝦皮購物 類別：電腦技術  
       
快速前往 快速前往        

 

 
    誰說獨自開發軟體不可能，
    現在就教您怎麼獨自完成的價值數十萬產品！


    本書是寫給有一點 JavaScript 基礎並想自己掌握網站前後端的人，且在幾乎零成本的情況下，做出一個自己能夠掌握客戶資料與實際運作的動態網站，就如同業界從零到一開發軟體一樣，並在練習時掌握各種觀念與架構，包括設計美感的培養與程式語言邏輯的脈絡，最終產生一個能夠被部署到網路上、被 Google 搜尋到的網站，為自己產生源源不絕的被動收入與邁進 solo 創業之路！

    【專業推薦】

    《全端網站開發筆記》結合實踐、觀念和實例，特別適合那些希望深入了解軟體開發的初學者。
    —Wesley Hsu｜Podcast 「幣須送外賣」主持人 / 愛錄不錄工作室負責人


    這本書不僅滿足了我想學習開發專案的需求，更為我提供了實際的保母級操作教學，使我能夠更自信、更有能力地應對日益複雜的產品開發挑戰。
    —鄭達玄｜Blockchain 產品經理


    我會說這本書不僅僅是一本技術手冊，更像是一場深度學習之旅。作者深入淺出地解釋了 MERN Stack 的每個元件開發過程，並通過豐富的圖片和圖表精心呈現程式碼和學習中的思維。
    —Kevin Liao｜資深後端工程師


    作者不僅在書中闡述了 MERN Stack 的開發過程及習過程中所遇到的困難和挑戰，且每一步複雜的技術都有圖文解釋，使讀者可以更容易的閱讀，並理解問題，解決問題，亦使讀者能學習到解決方法，也對內容更有印象。
    —Lawrence｜開拓者行銷 技術總監


    【重點說明】
    ☑ 軟體設計指南：內涵 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 的開發，或是希望加強串接技巧，這裡都提供了完整的指導。當你完成這一路程，你將擁有一個功能完善的網站！
 
    推薦序
    序

    [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 上傳訂房日期並設置同時段不能再訂房
    六、完成的下單檢測
 
    柯昱丞（Ko）
    台灣大學工商管理系畢業。靠自學網站開發並參與各項創業競賽累積創業經驗。在畢業後，從業前端到至今，目前就職區塊鏈公司前端，擁有 TypeScript (ES6+) 和 React 18+ 與後端開發經驗。著重於電商相關的開發功能和用戶界面，對前、後台等動態網站有豐富的經驗，也最喜歡零到一的開發過程。此書為此特別設計給想要直接實作累積經驗的程式小白，內含 580 張豐富的圖文操作解說，還有線上資源可以客製化做出自己的產品，使任何人都可以零成本進行網站和應用程式的開發。
 
 		  
     

博碩文化客服信箱
 

[email protected]
 
文教業務團隊
台北、新北、桃園、基隆、宜蘭、花蓮、金門
汪 玉 鳳
LINE ID：0925177716
0925-177716
[email protected]		 郭 南 彤
LINE ID：rgtech101
0917-727778
[email protected]
助理分機 519
新竹、苗栗、台中、彰化、南投、雲林
林 世 昌
LINE ID：0925275775
0925-275775
[email protected]
助理分機 519		 嘉義、台南、高雄、屏東、台東、澎湖
林 月 玲
LINE ID：0926858627
0926-858627
[email protected]
助理分機 238
 
MOCC 認證小組
 
  林 雯 玲 電話：02-2696-2869 分機：623 [email protected]

 

 
 

 

博碩文化股份有限公司 DrMaster Press Co., Ltd.
台灣新北市汐止區新台五路一段112號10樓A棟
Building A, 10F, No.112, Xintai 5th Rd., Sec.1,Xizhi Dist., New Taipei City 221, Taiwan
Tel：02-2696-2869　Fax：02-2696-2867　劃撥帳號：17484299

Copyright© DrMaster Press Co., Ltd. All Rights Reserved.