Craft from Unsplash

全端開發者的工作日常

雖然還沒正式成為一位全端工程師或全端開發者，但可以預期若成功轉職，將會有大部分的時間花在「開發產品與解決問題」。若建立日常事務的系統化的架構與流程，將能有依據地持續優化工作成效。

from 成為軟體工程師的條件：每日工作內容、重要技能、面試如何準備

筆記目的

本篇筆記將摘錄截至目前的所有學習，統整出一個實戰流程（或實作備忘錄），以利不斷刻意練習，將解決以下問題：

• 從頭到尾開發一個全端產品（web app）有哪些步驟？

誰適合閱讀：

• 希望能建構全端產品開發的宏觀視野與具體程序者

從頭到尾開發一個全端產品（web app）

以下將完整的全端產品開發流程彙整為一份備忘錄：

1.0 專案初始化

• 新增專案資料夾
• npm init -y 並設定 package.json

"start": "node app.js",
"dev": "nodemon app.js",

1.1 版本控制

• 初始化版本控制：git init，並新增 .gitignore 排除不必載入版本控制的檔案

# OS X
.DS_Store*
Icon?
._*

# npm
node_modules
*.log
*.gz

• 規劃並盡可能構思 commit message

$ git add .
$ git commit -m "feat: project init"

2.0 基礎環境設置

2.1 架設應用程式伺服器 Init Server

• 安裝 Express：npm i express
• 設定主程式 app.js

// Include packages and project related variables
const express = require('express')
const app = express()
const port = 3000

// set routes
app.get('/', (req, res) => {
  res.send('Express app coming soon ...')
})

// listen to server
app.listen(port, () => {
  console.log(`Express is listening on http://localhost:${port}`)
})

2.2 架設資料庫伺服器 Init MongoDB

• 啟動 MongoDB & Roto 3T

[~] $ cd ~/mongodb/bin/
[~/mongodb/bin] $ ./mongod --dbpath ~/mongodb-data

• 新增資料庫：DB_Name
• 安裝 Mongoose

$ npm i mongoose

• 連線資料庫伺服器

// app.js
// 載入 mongoose 並連線到 mongoDB
const mongoose = require('mongoose') 
mongoose.connect('mongodb://localhost/todo-list', { useNewUrlParser: true, useUnifiedTopology: true })

// 取得資料庫連線狀態
const db = mongoose.connection

db.on('error', () => { // 連線異常處理
  console.log('mongodb error 0.0')
})

db.once('open', () => { // 連線成功處理
  console.log('mongodb connected ^_^')
})

• 建立 data model

// todo.js
const mongoose = require('mongoose')
const Schema = mongoose.Schema
const todoSchema = new Schema({
  name: {
    type: String,
    required: true
  }
})
module.exports = mongoose.model('Todo', todoSchema)

• 新增種子資料

"seed": "node models/seeds/todoSeeder.js"

2.3 設定模板引擎 Template Engine

• views/layouts
• main.hbs & index.hbs
• Setup

const exphbs = require('express-handlebars');

app.engine('hbs', exphbs({ defaultLayout: 'main', extname: '.hbs' }))
app.set('view engine', 'hbs')

3.0 開發主要功能

3.1 CRUD 實作流程

1. 客戶端 Client：觸發請求的機制
2. 路由 Route：接收請求的路由
3. Controller：分派工作的程序
4. Model：處理的資料及方式
5. View：渲染的頁面及資訊

3.2 強化使用者體驗

3.3 測試與 Debug

4.0 優化與部署

4.1 重構程式碼

• 重構路由器（routes/modules）

// routes/index.js

// 引用 Express 及其路由器
const express = require('express')
const router = express.Router()

// 引用建立好的路由模組
const home = require('./modules/home')
const todos = require('./modules/todos')

// 設定路由
router.use('/', home)
router.use('/todos', todos)

// 匯出路由器
module.exports = router

• 重構資料庫連線設定（config/mongoose.js）

// config/mongoose.js

// 引用 mongoose
const mongoose = require('mongoose')

// 連線資料庫
mongoose.connect('mongodb://localhost/todo-list', { useNewUrlParser: true, useUnifiedTopology: true })

// 設定連線狀態
const db = mongoose.connection
db.on('error', () => {
  console.log('mongodb error!')
})
db.once('open', () => {
  console.log('mongodb connected!')
})

// 匯出連線狀態設定
module.exports = db

4.2 雲端部署

• 新增遠端應用程式伺服器及遠端資料庫伺服器

$ heroku create [project-name]
$ heroku addons:create mongolab -a [project-name]

• 修改專案環境設定

// Procfile
web: node app.js

// app.js
const PORT = process.env.PORT || 3000

// config/mongoose.js
const MONGODB_URI = process.env.MONGODB_URI || 'mongodb://localhost/todo-list'
mongoose.connect(MONGODB_URI, { useNewUrlParser: true, useUnifiedTopology: true })

• 專案上傳 Heroku

$ git add . 
$ git commit -m "chore: heroku init"
$ git remote add heroku [heroku_git_url]
$ git push heroku master

閱讀更多

關於本系列更多內容及導讀，請閱讀作者於 Medium 個人專欄 【無限賽局玩家 Infinite Gamer | Publication – 】 上的文章 《用 JavaScript 打造全端產品的入門學習筆記》系列指南。