---
# System prepended metadata

title: 程設組1/5第一次開會-環境設定
tags: [課程]

---

# 程設組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://i.imgur.com/kIbfyn6.png)

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

1. **Git**: 版本控制
    ![](https://i.imgur.com/Ke6vCLY.png)

    ![](https://i.imgur.com/wY184d3.png)

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

    https://nodejs.org/en/
3. **Mongodb**
![](https://i.imgur.com/D7UVWej.png)


**勾掉Mongodb Compass，然後next安裝**
![](https://i.imgur.com/NCVwFrl.png)
    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://i.imgur.com/VxTz2SC.png)
    https://robomongo.org/download
    
安裝好後啟動點create，Address選localhost:27017
Save, Connect即可
    
## Mac 安裝步驟
### 首先要先安裝Homebrew來幫我們裝套件
```shell
$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
```
### 安裝nvm
!!不要用brew裝!!
```shell
$ 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)：

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

檢查是否安裝成功
```shell
$ 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
列出哪些版本可以安裝
```shell
$ nvm ls-remote
```

安裝，這邊我們裝v12.14.0

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

### 使用nvm切換Node.js版本
列出已安裝的版本
```shell
$ 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:...
```

選擇版本
```shell
# nvm use <version>
```

設定預設版本
```shell
$ nvm alias default v12.14.0
default -> v12.14.0
```
### 安裝mongodb
```shell
$ brew install mongodb
```
啟動
```shell
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

![](https://i.imgur.com/ngVECS5.png)

## 建置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`