# 開工大禮包

## 開始篇(7/5)
### 1. 建立開發環境
> 把Gitlab上的環境clone下來

`$ git clone https://gitlab.com/ncufresh/ncufresh21.git`
### 2. 安裝套件

$ npm install
$ npm start

## 每日篇
每天我們會定時把大家前一天的成果都merge在一起
### 下午1點開工時

$ git checkout master    // 切換到master branch
$ git branch -d 名字      // 刪掉前一天建立的branch
$ git pull               // 更新master branch

### 晚上9點收工時

$ git add .                       
$ git commit -m "今天的工作內容"
$ git pull              // 與遠端整合
$ git checkout -b 名字   // 建立自己的branch
$ git push              // 將今天的內容push到遠端repo中自己的branch  

### Notice
進行git操作的時候記得小心，然後確定自己在幹麻!!
不確定的可以去看[之前的教學](https://hackmd.io/_eYoFtsrT52o0cp4Xa7uaQ)，或者用`git status`確認

然後記得:
1. 不要在自己的branch pull
2. 不要在master branch push
## 進度篇
### Demo
每個禮拜五下午會是Demo的時間，到時候會讓大家稍微看一下我們這禮拜做了些什麼
### 每週建議進度
* 第一週(7/5~7/9)
熟悉開發流程、開發架構。在開始寫之前先想一下架構。
架構包括前端排版設計、後端資料庫資料設計，哪些地方要寫死、哪些地方要可以更新
* 第二週(7/12~7/16)
後端基本雛型要寫出來，前端排版要大致確定。
* 第三週(7/19~7/23)
大致完成電腦版，並且可以開始思考、實做手機版。
後端要完成到讓企劃組員能夠上資料，這樣之後才能檢查實際上資料後，前端排版跟後端功能有沒有什麼問題。
* 第四週(7/26~7/30)
開始寫手機版，進度比較快的可以開始請企劃組員幫忙測試網站
可以留時間補齊之前沒完成的部份
* 第五週(8/2~8/6)
全力測試網站!!有東西沒完成的也要在這週完成

## 提醒篇
### 技術方面
* 開工第一週應該會不太確定要幹麻，但滿正常的。建議可以先思考一下分頁前後端設計，或者看看前幾屆的Code以及網頁，或許會有些幫助
* 不會寫的功能或動畫要怎麼辦？
1. 問問看神奇的Google大神、Stackoverflow、CSDN
2. 看看前幾屆類似功能是怎麼寫的(Gitlab repo)
3. 問問看組長
* 盡量把程式碼寫的優美、有架構一點，但我相信用Vue的大家這方面應該沒什麼問題(?
* 開發過程可以寫一些註解，之後比較容易看懂自己在寫什麼
* [分頁注意事項](https://hackmd.io/QYN5sZ8iQWav6tumguSwXw)

### 團隊溝通方面
* **溝通、溝通、溝通**，雖然線上遠距這有點困難
* 跟企劃組溝通的時候不要一開始就打槍他們提出的功能，但也不要誇下海口所有提議都接受
* 美工組是你的好朋友，要打好關係
## 參考篇
### 1. 幾次的教學
- [Bootstrap, Sass, Eslint](https://hackmd.io/y0FEN_pMQhmdecu-uY58rw?both)
- [網路基本概念](/OfVaSgDeT4KZpuF-MN5U8A)
- [Javascript](/Zm8s8sZoQZyNEtg7KDDXdw)
- [DOM, Ajax](/@2021ncu-fresh-code/ry9j7CwdO)
- [動畫, RWD, Git](/_eYoFtsrT52o0cp4Xa7uaQ)
- [Vue]

### 2. EJS
* 標籤
* 普通輸出用`<%= %>`
* 只有在輸出html用`<%- %>`
* 不是輸出用`<% %>`
* 註解
* `<% /* 我是不會顯示的註解。 */ %>`
這樣註解才不會被解釋出來
* `<!-- 我是會顯示的註解。 -->`
這樣一般的HTML註解會被解釋出來

### 3. TinyMCE
後端讓企劃組上資料的文字編輯器

[TinyMCE文件](https://www.tiny.cloud/docs/quick-start/)
* 配置

<textarea id="editor"></textarea>
<script src="/tinymce/js/tinymce/tinymce.js"></script>    // 加入tinymce的必要套件
<script>
  tinymce.init({
    selector: 'textarea#editor',        // selector要選到上面的textarea
    height: 500,
    menubar: false,
    plugins: [
      'advlist autolink lists link image charmap print preview anchor',
      'searchreplace visualblocks code fullscreen',
      'insertdatetime media table paste code help wordcount'
    ],
    toolbar: 'undo redo | formatselect | ' +
      'bold italic backcolor | alignleft aligncenter ' +
      'alignright alignjustify | bullist numlist outdent indent | ' +
      'removeformat | help',
    content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
  });
</script>

* 讓TinyMCE更fancy
在toolbar跟plugins調整，詳細可以看官方文件
上方的toolbar是可以客製化的

### 4. Fontawesome
一些好用的Icon
可以到[這邊](https://fontawesome.com/v5.15/icons?d=gallery&p=2)看有什麼Icon可以用

### 5. Multer
上傳圖片用
#### 前端

//name需要為img
<form action="uplaodimg" method="post" enctype="multipart/form-data">
    <input type="file" name="img">
    <button type="submit">submit</button>
</form>

#### 後端

var multer = require('multer');
var storage = multer.diskStorage({
  destination:`../public/分頁名`,
  filename(req, file, callback) {
    cb(null,file.originalname);
  }
})
var upload = multer({storage:storage});
//上傳單一圖片
router.post('/uploadimg',upload.single('img'),(req,res,next)=>{
    //req.file可以get到圖片的各種資料
})
//上傳多張圖片
router.post('/uploadimg',upload.arrays('img'),(req,res,next)=>{
    //req.files可以get到圖片的各種資料
})
/*******注意路徑********/
<img src="........">

//刪除
fs.unlink(req.file.path, (err)=>{
    if(err){return next(err)};
})

### 6. check-user.js
檢查使用者狀態

module.exports = {
    isLoggedIn:
        function(req, res, next){
            if(!req.isAuthenticated()){
                return res.redirect('/login');
            } else {
                next();
            }
        },
    isAllowtoLogin:
        function(req, res, next){
            if(req.isAuthenticated()) {
                return res.redirect('/');
            } else {
                next();
            }
        },
    isAdmin:
        function(req,res,next) {
            if(req.isAuthenticated() && req.user.role === "admin" ){
                return next();
            } else {
                return res.redirect('/');
            }
        }
}

#### 用來當作middleware檢查使用者狀態

var checkUser = require('./check-user');

router.post('/edit', checkUser.isAdmin, function(req, res, next) {
...
})