# 程設組1/5第一次開會-環境設定
###### tags: `課程`
<!-- import"資訊欄"-->
{%hackmd WytMqepOTcKzqNFq7mXjLQ %}

## 今天的目標
1. Gitlab
1. 了解今天裝的東西的用途
2. 裝好這些東西
3. 開啟一個express專案
4. ~~去競程白吃白喝~~

## 前置作業
1. [環境設定大禮包](https://drive.google.com/drive/folders/1nBVWyKPJfBo48rmsfMIQWwyH9uvrOLW3?usp=sharing)

2. **vscode**: 程式碼編輯器，如果你喜歡vim/notepad++...其他的編輯器也行

https://code.visualstudio.com/
## Windows安裝步驟

1. **Git**: 版本控制


default editor可以選vscode，不然預設是vim
https://git-scm.com/download/win
2. **Node.js**: 伺服器端的javascript的執行環境

https://nodejs.org/en/
3. **Mongodb**

**勾掉Mongodb Compass，然後next安裝**
https://www.mongodb.com/try/download/community

**用git bash打以下指令**
新增db資料夾，以供存放資料庫(盡量在C碟orD碟)

mkdir -p MongoDB/data/db

接著去剛剛安裝的目錄下

cd /c/Program\ Files/MongoDB/Server/4.4/bin/

啟動mongodb(dbpath，就是後面那一串，要看剛剛mkdir的db資料夾在哪)

./mongod --dbpath /d/MongoDB/data/db/

可以去瀏覽器打**http**://localhost:27017看看有沒有東西(有東西就是成功)
4. **Robo3t**
https://robomongo.org/download

安裝好後啟動點create，Address選localhost:27017
Save, Connect即可

## Mac 安裝步驟
### 首先要先安裝Homebrew來幫我們裝套件

$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

### 安裝nvm
!!不要用brew裝!!

$ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.32.1/install.sh | bash

上面的指令會把 nvm repository 複製到 /usr/local/opt/nvm，然後會把 source line 加進你的 profile (~/.bash_profile, ~/.zshrc, ~/.profile, or ~/.bashrc, 應該都是在~/.bash_profile)：

export NVM_DIR="/usr/local/opt/nvm"
[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh"  # This loads nvm

檢查是否安裝成功

$ command -v nvm

補充:
* .bash_rc vs .bash_profile: http://jamestw.logdown.com/posts/283485--bash-profile-bashrc-difference
* 用brew裝可能發生的問題: https://medium.com/@myread02/nvm-切換-node-版本鬼打牆問題-9c24fe0c627b
* 不能用which來檢查nvm: https://stackoverflow.com/questions/40165593/what-is-a-sourced-shell-function

### 使用nvm安裝Node.js
列出哪些版本可以安裝

$ nvm ls-remote

安裝，這邊我們裝v12.14.0

//nvm install <version>
$ nvm install v15.5.1

### 使用nvm切換Node.js版本
列出已安裝的版本

$ nvm ls
->     v12.14.0
default -> v10.15.0
node -> stable (-> v12.14.0) (default)
stable -> 12.14 (-> v12.14.0) (default)
iojs -> N/A (default)
lts/* -> lts/erbium (-> v12.14.0)
lts/argon -> v4.9.1 (-> N/A)
lts/boron -> v6.17.1 (-> N/A)
lts/carbon -> v8.17.0 (-> N/A)
lts/dubnium -> v10.18.0 (-> N/A)
lts/erbium -> v12.14.0
...

# nvm會在你的$PATH最前面安插指定版本的目錄，透過這個方式你在使用node指令時就會用指定的版本來運作了。
$ echo $PATH
/usr/local/opt/nvm/versions/node/v12.14.0/bin:...

選擇版本

# nvm use <version>

設定預設版本

$ nvm alias default v12.14.0
default -> v12.14.0

### 安裝mongodb

$ brew install mongodb

啟動

sudo mongod

### 安裝Robo 3T

https://robomongo.org/download
安裝好後啟動點create，Address選localhost:27017
Save, Connect即可

:::success
> 想要把 terminal 弄的酷酷的方法這邊就不詳述了
> 有興趣再來找我 [name=wasabi-neko]
:::

## Linux 安裝步驟
1. Git
:::info
$ *sudo apt install git*
:::

2. Node.js
:::info
$ *sudo apt install nodejs*
:::

## :point_right::point_right::point_right::point_right:前置作業

### 設定VSCode for windows
前往設定 → 功能 → 終端機 → Integrated>Shell:Windows改成bash.exe
> [name=華崧淇][time=2019]要看你裝在哪。*etc*: **C:\Program Files\Git\bin\bash.exe**
以便之後coding時不用一直切換到git bash


## 建置Express專案

建立一個目錄，在目錄底下使用

:::info
npm init
:::

會請你輸入一些資訊，基本上不太需要管，entry point修改一下就好

:::info
entry point: (index.js) app.js
:::

安裝自動產生express專案的generator
:::info
npm install express-generator -g
:::
建立一個view的模板為ejs、名為blog的express應用程式
:::info
express --view=ejs blog
:::

切到blog目錄底下後，下載套件(npm install)然後執行(npm start)
:::info
cd blog
:::
:::info
npm install // 安裝必要module
npm start // 啟動nodejs伺服器
:::

看到下面這串表示成功囉~~~~

> blog@0.0.0 start C:\Users\schua\OneDrive\桌面\code\example\blog
> node ./bin/www

  blog:server Listening on port 3000 +0ms

打開瀏覽器，輸入localhost:3000就可以看到網頁了

## 其他：一些推薦的 extensions :package:
### vscode extension
- Path Intellisense
- 檔名的自動完成
- Todo tree
- 在你的code中加上 TODO 提醒自己做到哪裡！
- Better Comments
- 讓你的註解五顏六色
- GitLens
- 讓我們看看這行code 是誰寫的！
- git graph
- 來看看 git 捷運幹線
- live share
- vscode 是一款真正的社交軟體
- miku tap
- nyan nyan nyan~
- discord present
- 在 discord 上分享你寫了什麼爛code

### node extension
- nodemon
- installation
- `npm install -g nodemon`
- usage
- `nodemon ${your_file}`
- descript:
- 每當你檔案有更動的時候，就會重新跑一次，超方便
- mongoose-data-faker
- installation
- `npm install mongoose-data-faker`