iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 22
0
Modern Web

用 JavaScript 打造全端產品的入門學習筆記系列 第 22

產品工匠日常:打造全端產品的宏觀程序——全端刻意練習 I

產品工匠日常

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

 


閱讀更多

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


上一篇
Heroku 雲端佈署初步上手——全端產品工具箱 VI
下一篇
產品工匠日常:打磨全端產品的實作細節——全端刻意練習 II
系列文
用 JavaScript 打造全端產品的入門學習筆記30

尚未有邦友留言

立即登入留言