全端網站開發筆記:活用MERN技術,打造制霸全球的動態網站,開創六位數被動收入!(iThome鐵人賽系列書)(軟精裝)
- P幣
全盈+PAY單筆消費滿1200回饋80P幣(每帳號限乙次,限量5000名)
- 登記送
【OK】單筆滿$1純取貨/取貨付款訂單登記送OK購物金50元(限量)
- 登記送
【7-11】單筆滿$350純取貨/取貨付款訂單登記送一顆檸檬青茶兌換券乙張(限量)
- 信用卡、無卡分期、行動支付,與其他多種方式
- PChome 聯名卡最高6%,新戶再享首刷禮1000P
- PChome 倉庫出貨,24小時到貨
- 宅配到府(本島/低溫)滿$699免運
- 宅配到府(本島/常溫)滿$490免運
- 超商取貨(常溫)滿$350免運
- 超商取貨(低溫)滿$699免運
- i郵箱(常溫)滿$290免運
內文簡介
<內容簡介>
誰說獨自開發軟體不可能,
現在就教您怎麼獨自完成的價值數十萬產品!
本書是寫給有一點 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 上傳訂房日期並設置同時段不能再訂房
六、完成的下單檢測
<作者簡介>
柯昱丞(Ko)
台灣大學工商管理系畢業。靠自學網站開發並參與各項創業競賽累積創業經驗。在畢業後,從業前端到至今,目前就職區塊鏈公司前端,擁有 TypeScript (ES6+) 和 React 18+ 與後端開發經驗。著重於電商相關的開發功能和用戶界面,對前、後台等動態網站有豐富的經驗,也最喜歡零到一的開發過程。此書為此特別設計給想要直接實作累積經驗的程式小白,內含 580 張豐富的圖文操作解說,還有線上資源可以客製化做出自己的產品,使任何人都可以零成本進行網站和應用程式的開發。
相關分類
寄送時間 | 全台灣24h到貨,遲到提供100元現金積點。全年無休,週末假日照常出貨。例外說明 |
---|---|
送貨方式 | 透過宅配送達。除網頁另有特別標示外,均為常溫配送。 消費者訂購之商品若經配送兩次無法送達,再經本公司以電話與Email均無法聯繫逾三天者,本公司將取消該筆訂單,並且全額退款。 |
送貨範圍 | 限台灣本島與離島地區註,部分離島地區包括連江馬祖、綠島、蘭嶼、琉球鄉…等貨件,將送至到岸船公司碼頭,需請收貨人自行至碼頭取貨。注意!收件地址請勿為郵政信箱。 註:離島地區不配送安裝商品、手機門號商品、超大材商品及四機商品。 |
售後服務 | 缺掉頁更換新品 |
執照證號&登錄字號 | 本公司食品業者登錄字號A-116606102-00000-0 |
- PChome24h購物的消費者,都可以依照消費者保護法的規定,享有商品貨到次日起七天猶豫期的權益。(請留意猶豫期非試用期!!)您所退回的商品必須回復原狀(復原至商品到貨時的原始狀態並且保持完整包裝,包括商品本體、配件、贈品、保證書、原廠包裝及所有附隨文件或資料的完整性)。商品一經拆封/啟用保固,將使商品價值減損,您理解本公司將依法收取回復原狀必要之費用(若無法復原,費用將以商品價值損失計算),請先確認商品正確、外觀可接受再行使用,以免影響您的權利,祝您購物順心。
- 如果您所購買商品是下列特殊商品,請留意下述退貨注意事項:
- 易於腐敗之商品、保存期限較短之商品、客製化商品、報紙、期刊、雜誌,依據消費者保護法之規定,於收受商品後將無法享有七天猶豫期之權益且不得辦理退貨。
- 影音商品、電腦軟體或個人衛生用品等一經拆封即無法回復原狀的商品,在您還不確定是否要辦理退貨以前,請勿拆封,一經拆封則依消費者保護法之規定,無法享有七天猶豫期之權益且不得辦理退貨。
- 非以有形媒介提供之數位內容或一經提供即為完成之線上服務,一經您事先同意後始提供者,依消費者保護法之規定,您將無法享有七天猶豫期之權益且不得辦理退貨。
- 組合商品於辦理退貨時,應將組合銷售商品一同退貨,若有遺失、毀損或缺件,PChome將可能要求您依照損毀程度負擔回復原狀必要之費用。
- 若您需辦理退貨,請利用顧客中心「查訂單」或「退訂/退款查詢」的「退訂/退貨」功能填寫申請,我們將於接獲申請之次日起1個工作天內檢視您的退貨要求,檢視完畢後將以E-mail回覆通知您,並將委託本公司指定之宅配公司,在5個工作天內透過電話與您連絡前往取回退貨商品。請您保持電話暢通,並備妥原商品及所有包裝及附件,以便於交付予本公司指定之宅配公司取回(宅配公司僅負責收件,退貨商品仍由特約廠商進行驗收),宅配公司取件後會提供簽收單據給您,請注意留存。
- 退回商品時,請以本公司或特約廠商寄送商品給您時所使用的外包裝(紙箱或包裝袋),原封包裝後交付給前來取件的宅配公司;如果本公司或特約廠商寄送商品給您時所使用的外包裝(紙箱或包裝袋)已經遺失,請您在商品原廠外盒之外,再以其他適當的包裝盒進行包裝,切勿任由宅配單直接粘貼在商品原廠外盒上或書寫文字。
- 若因您要求退貨或換貨、或因本公司無法接受您全部或部分之訂單、或因契約解除或失其效力,而需為您辦理退款事宜時,您同意本公司得代您處理發票或折讓單等相關法令所要求之單據,以利本公司為您辦理退款。
- 本公司收到您所提出的申請後,若經確認無誤,將依消費者保護法之相關規定,返還您已支付之對價(含信用卡交易),退款日當天會再發送E-mail通知函給您。