鐵人賽 Day1 自己做一個價值幾十萬的動態網站

第一課：學習Mern全端開發概念與開發流程

1.前言：

此分享為給有一點JavaScript基礎並想自己掌握網站前後端幾乎零成本的情況下，能夠有客戶資料與實際運作的動態網站，並在其中自我練習的紀錄，包括設計美感的培養與語言上邏輯的脈絡能自己一步一步從零到一的實踐出來！

2.目標：

開發一個擁有前台訂房的網站與後台可以管理網站的頁面，並釐清所有網站觀念，完成30天挑戰並帶著毅力往App與Web3.0等趨勢邁進
以下為圖片預覽圖與SamBookingChallenge(致敬bookingcom最大的訂房網站挑戰)，完成後的樣子網址連結
https://ko-booking.netlify.app/
已開啟Api串接服務

3.學習好處：

當熟悉這些開發流程，訂房等複雜的邏輯概念，將可以套用在各個能夠實際產生現金流的各大網站上，如基本的電商擁有自己的購物車、電影網站到最近很紅的Web3.0網站，有了這些基礎，自己就能當自己的工程師並最後還能上架到實際網站上，最省只需付網域費用，再也不需要被第三方平台抽成才能創建自己的網站，俗話說的好靠別人不如靠自己，現在就來一起加入練習看看吧！

網站連結 查看

本次學習特色

下列都為擷取部分豐富內容、各種UI配置、資料連動等功能介紹的本次上百張做圖
1.設置UI SCSS的練習與了解配置原理

2.後端 RestFulApi串接

注重在如何使用nodejs來完成我們想要的動態網站動作。
3.全端串連與特效應用

4.給初學者 MERN 縮寫意思

網站開發分為前端跟後端，且這邊使用當代noSQL類資料庫開發與JavaScript一種程式語言來進行前端後端一次的串連。並在學會這些後，下一階段就是帶這樣的觀念去使用NEXT.JS與Typescript！

學Mern開發系統前 要先搞懂 M,E,R,N各個縮寫 先從
N:Node.js 與 E:express 開始
再來 R:React.js 與M: MongoDB

Node.js | BackEnd Service後端服務 或稱API連接

Node.js 是一個Open source and Cross-platform Runtime environment(執行環境)
中文白話文：使用Node.js能在瀏覽器以外的地方有一個執行環境來執行JavaScript 來去後端也就是伺服器位置抓取相關的資料，而抓取後端服務的這個過程又常常稱作叫用API抓取資料
如下圖：

Express | 建立在Node上面的Js框架來使Api運作

首先要先了解api與http關係

在實際應用下列為Coding示範案例：這邊只做一開始比較
後面會更詳細解說express其原理

const http = require("http");
const server = http.createServer((req,res)=>{
}) => 原 http module 創造一個web Server示範 

簡單來說就是在這邊設置你到時候要傳的URL 並規定這些URL會帶出什麼動作 所以http://你的主網域 sambooking.com or你的當地測試位置 localhost:5000/api/
api後面要打些什麼就會像下面打的樣式 看不懂沒關係後面node api會仔細講解

const express = require("express")
const app = express()
app.use('/api/users',(req,res)=>{
});．
＝>取代掉http module的express module 

新型態寫法的都會用插件import方式更好懂 也更字面上意思，不再需要require

import express from 'express';
const app = express()
app.use("/user", userRouter);
＝>取代掉http module的express module 

網站介面名詞解釋 才提到React 讓Js優化功能介面的好工具

React.js｜JavaScript的衍伸框架Framework

React.js是一個JavaScript的衍伸框架Framework或又可以說是專門在建立UI的JavaScript Library.
React 專長再將傳統網站Web1.0《html+css+js》的網站重新整理規劃變得有條理的Web2.0，包含著許多Components而每一個都代表著一個UI如下圖

其實這邊也可以發現網站的演進會從一開始的最無原則到後面慢慢演化出原則越來越明確，為的也是讓更多人能一起協同合作製作出一個大型的軟體。

像現今前端工程師也必須要會typeScript 一個從JavaScript延伸之新的語言，為的就是從馬虎到嚴謹、動態語法Dynamically-typed到靜態語法Statically-typed 後面有篇幅的會特別解釋這邊，為何這對網站維護上很重要。

所以上述將會搞定我們主要的介面與連接 那連接到最重要的伺服器就是我們的mongoDB雲端伺服

mongoDB | noSql類非關聯式資料庫

這邊先說開發選擇mongoDB，noSql資料庫的原因，非關聯性資料庫架設資料快速且適合敏捷開發，也是近期趨勢，如FB等大型社群軟體紛紛使用方便測試網站資料資料建立等等，雖目前台灣一般有規模的大型公司還是會採用SQL資料庫來維護資料，因為傳統SQL資料庫有多年歷史經驗，優勢也是數據一致性和數據完整性，與前面提到的一樣有原則的語法在協同操作上一定是加分的。
所以本次專案採取快速Nosql開發上與為教學練習用，無大型現金流公司需要的標準化，面對最重要的現金流處理、金融信息和交易上應須在更謹慎處理，所以學習noSql類之餘，相關資安問題與配合傳統sql類資料庫爬梳也是未來可以一起努力的，並期望能與其他後端工程師完美的協同合作，往更全面的前後端工程師之路邁進！
傳統Sql類資料庫與新型態NoSql類資料庫

之後後面單元會介紹並詳細解說mongoDB

5.挑戰開發流程圖

首先 最重要的30天挑戰開發流程圖
基本上會先開發UI/UX 網站介面 => 然後架設資料庫並架設Api做測試 => 實際最後串接前台與後台、前端與後端

樹狀圖

結論

本作者早在很早之前就開始準備此專案想要分享，結果還是發現進度上只能先做到20篇文章的內容，後面的內容會越來越豐富與精彩，希望大家都能夠看得懂並實作學習出東西，如其中有大神發現有觀念錯誤也歡迎糾正我趕快改，與歡迎下方大家跟我討論，之後到開始實作時都會有github的版本可以下載這樣也能讓中途加入的大家參與這次挑戰，並這次挑戰因致敬booking.com只為教學與紀錄自己練習開發的過程！絕無要抄襲與傷害booking.com之商譽，如其中有所不妥歡迎告知會馬上改善。

第一天結束後，明天開始會講述如何簡單架設環境，並主要會以Mac為主，一步一步解釋道理是什麼，使用window的下載node.js可能會有較多問題，如有問題也會幫忙處裡，操作指令會以npm為主，但當然可以換成yarn嘗試，速度更快，並回答問題上，會先以繼續完賽為主，盡量不會拖延問題！