# 第零次 ###### tags: `課程` `2022` ## 今天要幹嘛 - [x] 把大家弄進Gitlab - [x] 爆吃麥當勞...勞贖 - [x] 裝好大禮包內的東c - [x] 開一個express專案 - [x] 混熟一點 - [x] ~~出寒假作業，爽啦~~ ## 前置作業 1. [環境設定大禮包](https://drive.google.com/drive/folders/1VDBMinahob6XBSU3r-gss05dQuFj3Wqm?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 >我自己是有裝啦，我覺得好用XD >他可以搭配atlas用，讚讚[name=Mark] **用git bash打以下指令** 新增db資料夾，以供存放資料庫(盡量在C碟orD碟) ```shell $ mkdir -p MongoDB/data/db ``` 接著去剛剛安裝的目錄下 ```shell $ cd /c/Program\ Files/MongoDB/Server/5.0/bin/ ``` 啟動mongodb(dbpath，就是後面那一串，要看剛剛mkdir的db資料夾在哪) ```shell $ ./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 <font color="red">不要用brew裝</font> ```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 --lts ``` 安裝，這邊我們裝v16.13.1 ```shell //nvm install <version> $ nvm install v16.13.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即可 ## Linux 安裝步驟 1. Git ```shell $ sudo apt install git ``` 2. Node.js ```shell $ 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專案 建立一個目錄，在目錄底下使用 ```shell npm init ``` 會請你輸入一些資訊，基本上不太需要管，entry point修改一下就好 ```shell entry point: (index.js) app.js ``` 安裝自動產生express專案的generator ```shell npm install express-generator -g ``` 建立一個view的模板為ejs、名為blog的express應用程式 ```shell express --view=ejs blog ``` 切到blog目錄底下後，下載套件(npm install)然後執行(npm start) ```shell cd blog ``` ```shell 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就可以看到網頁了 ## 其他：一些推薦的工具 :package: ### Application - [Postman](https://www.postman.com/downloads/) - 拿來測api，賊好用 ### vscode extension - Path Intellisense - 檔名的自動完成 - Todo tree - 在你的code中加上 TODO 提醒自己做到哪裡！ - Better Comments - 讓你的註解五顏六色 - GitLens - 讓我們看看這行code 是誰寫的！ - git graph - 來看看 git 捷運幹線 - live share - vscode 是一款真正的社交軟體 - miku tap - nyan nyan nyan~ by芥末貓 - 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`