前言

這是第一篇文章，非常感謝鐵人賽前輩們提供的各種入門與深入文章，讓剛轉職的我可以在點歪的路越走越遠。能夠不斷的在公司的敏捷開發所以前端要寫後端伺服器的這條路上走到現在，所以這邊想分享在點歪的路上是如何越走越遠的。（藉由寫鐵人文章又能順便熟悉MD語法了呢）

在這系列的文章你不會看到深入探討，只會看到能動就好。這邊會完全著墨在解決當下的問題，不會去深入理解背後的原理（在死線下只能等問題解決才能去思考）。基本上所有用到的技術都會盡量提供個人追過的文章讓各位深入研究，跟隨到最後期望各位可以完成並理解用express框架建構的node伺服器如何操控資料庫和如何建立API與讓網頁能跟資料庫互動。

使用到的技術或套件

這邊會列出主要使用到的技術和為什麼使用他與使用他的方法

• webpack 打包工具
  用來打包前端與後端的檔案，一般來說node和web只看的懂javascript所以只要不是單純使用javascript撰寫的都必須經過轉譯才能執行。

• Vue 前端框架
  現在沒有學個框架都不好意思說自己是前端了，這邊會選擇使用vue3的寫法。因為剛好上完vue3的課程所以為了熟悉就決定使用vue3了，這邊不使用VueCli架設因為潮就要自己架設個人覺得VueCli其實跟webpack非常接近。但有些webpack的設定VueCli沒有，Vue有的webpack不一定有，希望可以盡量少學一點所以選用webpack自架。

• TypeScript 強型別版的javascript
  這邊後端會使用TypeScript重構並建置，因為使用TypeScript可以比較簡單的做到程式的分割與模組化（當然大神例外）。

• express node伺服器框架
  他幫你處理了非常多問題，包含ＭＶＣ架構和路由設定等等，只要init就能動了非常方便。可以很簡單的用樣板語言(這邊選ejs)輸出成網站！

• MongoDB 資料庫
  屬於NoSQL的資料庫，因為公司在用所以這邊繼續使用。且heroku有整合mLab所以就繼續沿用。

• github 版本控制
  沒有任何反應，他就是個版本控制。請盡量依照規則下去寫，養成寫好commit message的習慣。

• lineBot line機器人
  學習怎麼看文件，可以理解他與伺服器的互動跟網頁呼叫API其實相差無幾。

• heroku 雲端伺服器
  選用這個是因為只要綁定信用卡可以達成終生免費使用（雖然空間不大）。

• ngrok 讓你的電腦可以被外部連線
  因為lineBot會需要外部連線的IP，而每次都要重推到heroku測試其實效率很差。

撰寫路線

因為使用的東西有點多，這邊會將提示加在標題並分成前端、後端和打包工具，也會依據學習和實作來區分基本觀念的練習與學習和邁向成品的實作和重構，這邊因為是希望給自己的學習留下紀錄臨時報名所以也沒有好好規劃要寫什麼。基本上會依照下列路線前進

1.安裝環境 node.js
2.練習使用npm安裝express、Vue和webpack
3.練習express和建立路由
4.練習lineBot與建立
5.利用ngrok測試
6.利用webpack打包並重構express
7.將express專案用typescript重構
8.讓你的專案能吐出頁面
9.用webpack建立Vue編譯環境
10.用Vue3語法測試環境是否正確建立
11.上傳到heroku伺服器上
12.etc...

這是目前想到的路線，可能隨時變更、更改或放棄...。畢竟從入門到放棄是最簡單的嘛！

同步發表到驢形筆記