Twitter 專案 - 全端組: Michael 、Hao 、 HT 、 Yun

.env.example

@@ -0,0 +1 @@
+IMGUR_CLIENT_ID=

.gitignore

@@ -84,4 +84,6 @@ typings/
 .fusebox/
 
 # DynamoDB Local files
-.dynamodb/
+.dynamodb/
+
+temp/

Procfile

@@ -0,0 +1 @@
+web: NODE_ENV=production node app.js

README.md

@@ -0,0 +1,81 @@
+# Simple Twitter － Alphitter
+![image](public/photos/homepage.png)
+**可點擊[Demo](https://vast-gorge-80772-a3d6b2e88ad8.herokuapp.com/signin) ，查看專案預覽！**
+
+## 專案簡介
+> 本專案係以Twitter(今已改名為X)的架構所打造社群網站。
+
+此網站能提供以下服務：
+1. 註冊及登入帳號：
+  - **使用者能夠建立帳號，建立屬於自己的社群！**
+  - 有針對註冊帳號及登入帳號進行錯誤處理。
+  - 前後台登入路徑分離。
+  - 透過身分驗證，能夠有效阻擋一般使用者進入後台，管理員也無法進入前台。
+2. 個人頁面：
+  - 使用者能夠修改帳號或密碼等登入資訊，且一樣會有驗證。
+  - 使用者能夠新增自我介紹或上傳個人照片等個人資料設定，展現自我！
+  - 使用者可以在個人頁面查看推文、回覆、或是喜歡內容的紀錄。
+  - 使用者亦能查看追隨者和被追隨者的清單。
+3. 社群互動：
+  - 使用者能透過左側功能列的推文紐、或是首頁最上方的發文框，無時無刻發布推文。
+  - 使用者亦能夠對喜歡的推文按下Like。
+  - 使用者更能夠回覆有趣的推文，進行議題討論。
+  - 使用者還能夠追隨對感興趣的用戶，擴展社群(當然，若是之後不感興趣也可以取消追隨)。
+  - 主頁面右側會呈現前十大活躍用戶給使用者查看。
+4. 後台監測：
+  - 管理員可於後台查看推文清單，了解議題的脈動。
+  - 管理員可於後台查看使用者活躍資料。
+  - 管理員可於後台刪除不當言論，維持論壇環境。
+
+## 環境需求與相關套件
+1. Node.js
+2. MySQL (MySQL Workbench 8.0)
+3. npm(Node Package Manager)
+4. 環境檔(.env)
+
+## 專案安裝與執行步驟
+1. 請先確認「環境建置與需求」第1和2點所提及的程式皆已安裝。
+2. 將此專案clone到本地。
+3. 初始化專案－開啟終端機，在專案資料夾執行：
+```
+cd [filePath]  # [filePath]為專案資料夾的路徑
+npm init -y
+```
+4. 接著在終端機依序安裝套件(請見package.json的dependencies和devDependencies)：
+```
+# 安裝dependencies的套件
+# 以"express": "^4.16.4"為例，執行
+npm install express@4.16.4
+```
+```
+# 安裝devDependencies的套件
+# 以"proxyquire": "^2.1.3"為例，執行
+npm install -D proxyquire@2.1.3
+```
+5. 環境檔－在目標資料夾新增副檔名為**env**的檔案，私密資訊皆紀錄在**env.example**，請自行設定到內文中。
+```
+# .env的內文
+IMGUR_CLIENT_ID=[yourSecret] # [yourSecret]為您的私密資訊
+```
+6. 資料庫設定－請在終端機藉由Sequelize，將Migration和Model的設定導入到MySql中。
+```
+npx sequelize db:migrate
+```
+7. 種子資料－請將種子資料匯入DB，做為初始化的測試資料。
+```
+npx sequelize db:seed:all
+```
+8. 在終端機啟動伺服器，成功或失敗皆會有通知訊息。
+```
+# 啟動方法1
+npm run start (node app.js)
+```
+```
+# 啟動方法2
+npm run dev (nodemon app.js)
+```
+9. 在瀏覽器輸入 http://localhost:3000 ，即可連線。
+
+## 相關設計
+### 系統流程
+![image](public/photos/twitter_flow.png)

app.js

@@ -1,13 +1,52 @@
+if (process.env.NODE_ENV !== 'production') {
+  require('dotenv').config()
+}
+// 引入模組
 const express = require('express')
-const helpers = require('./_helpers');
+const handlebars = require('express-handlebars')
+const methodOverride = require('method-override')
+const session = require('express-session')
+const flash = require('connect-flash')
+// 引入路由
+const routes = require('./routes/index')
+// 引入helper
+const { getUser } = require('./helpers/auth-helpers')
+const handlebarsHelpers = require('./helpers/handlebars-helpers')
+const passport = require('./config/passport')
+const SESSION_SECRET = 'secret'
 
+// 建立app
 const app = express()
-const port = 3000
+const port = process.env.PORT || 3000
 
-// use helpers.getUser(req) to replace req.user
-// use helpers.ensureAuthenticated(req) to replace req.isAuthenticated()
 
-app.get('/', (req, res) => res.send('Hello World!'))
+
+// Handlebars 設定
+app.use(express.static('public'))
+app.engine('hbs', handlebars({ extname: '.hbs', defaultLayout: 'main', helpers: handlebarsHelpers }))
+app.set('view engine', 'hbs')
+app.use(express.urlencoded({ extended: true }))
+app.use(express.json())
+app.use(methodOverride('_method'))
+app.use(express.static('public'))
+
+app.use(session({ secret: SESSION_SECRET, resave: false, saveUninitialized: false }))
+app.use(passport.initialize())
+app.use(passport.session())
+app.use(flash())
+app.use((req, res, next) => {
+  res.locals.success_messages = req.flash('success_messages')
+  res.locals.error_messages = req.flash('error_messages')
+  res.locals.warning_messages = req.flash('warning_messages')
+  res.locals.notice_messages = req.flash('notice_messages')
+  res.locals.user = getUser(req)
+  next()
+})
+
+
+// 使用路由器
+app.use(routes)
+
 app.listen(port, () => console.log(`Example app listening on port ${port}!`))
 
-module.exports = app
+module.exports = app

config/config.json

@@ -15,11 +15,7 @@
     "logging": false
   },
   "production": {
-    "username": "root",
-    "password": null,
-    "database": "database_production",
-    "host": "127.0.0.1",
-    "dialect": "mysql"
+    "use_env_variable": "MYSQL_DATABASE_URL"
   },
   "travis": {
     "username": "travis",

config/passport.js

@@ -0,0 +1,44 @@
+const passport = require('passport')
+const LocalStrategy = require('passport-local')
+const bcrypt = require('bcryptjs')
+const { User, Tweet } = require('../models')
+
+
+// set up Passport strategy
+passport.use(new LocalStrategy(
+  // customize user field
+  {
+    usernameField: 'account',
+    passwordField: 'password',
+    passReqToCallback: true
+  },
+  // authenticate user
+  (req, account, password, cb) => {
+    User.findOne({ where: { account } })
+      .then(user => {
+        if (!user) return cb(null, false, req.flash('error_messages', '帳號不存在！'))
+        if (req.route.path === '/signin' && user.toJSON().role === 'admin') return cb(null, false, req.flash('error_messages', '帳號不存在！'))
+        if (req.route.path === '/admin/signin' && user.toJSON().role === 'user') return cb(null, false, req.flash('error_messages', '帳號不存在！'))
+
+        bcrypt.compare(password, user.password).then(res => {
+          if (!res) return cb(null, false, req.flash('error_messages', '帳號不存在！'))
+          return cb(null, user)
+        })
+      })
+  }
+))
+// serialize and deserialize user
+passport.serializeUser((user, cb) => {
+  cb(null, user.id)
+})
+passport.deserializeUser((id, cb) => {
+  User.findByPk(id, {
+    include: [
+      { model: Tweet, as: 'LikedTweets' },
+      { model: User, as: 'Followers' },
+      { model: User, as: 'Followings' }
+    ]
+  }).then(user => cb(null, user.toJSON()))
+    .catch(err => cb(err))
+})
+module.exports = passport

controllers/admin-controller.js

@@ -0,0 +1,64 @@
+const { Tweet, User, Like, Reply, sequelize } = require('../models')
+const { Op } = require('sequelize')
+const controllerHelper = require('../helpers/controller-helpers')
+const adminController = {
+    getTweets: (req, res, next) => {
+        Tweet.findAll({
+            include: [User],
+            raw: true,
+            nest: true
+        })
+            .then(tweets => {
+                const maxLength = 50
+                tweets = tweets.map(tweet => ({
+                    ...tweet,
+                    description: tweet.description.slice(0, maxLength)
+                }))
+                res.render('admin/tweets', { tweets })
+            })
+            .catch(err => next(err))
+    },
+    getUsers: (req, res, next) => {
+        User.findAll({
+            where: { [Op.or]: [{ role: 'user' }, { role: null }] },
+            attributes: {
+                name : 'name',
+                account: 'account',
+                cover: 'cover',
+                avatar: 'avatar',
+                include: [[sequelize.literal('(SELECT COUNT(*) FROM Tweets WHERE Tweets.user_id = User.id)'), 'tweetsCount'],
+                          [sequelize.literal('(SELECT COUNT(*) FROM Followships WHERE Followships.follower_id = User.id)'), 'Followings'],
+                          [sequelize.literal('(SELECT COUNT(*) FROM Followships WHERE Followships.following_id = User.id)'), 'Followers'],
+                          [sequelize.literal('(SELECT COUNT(*) FROM Likes LEFT JOIN Tweets ON Tweets.id = Likes.tweet_id WHERE Tweets.user_id = User.id)'),
+                          'likesCount']
+                        ]
+            },
+            order: [[sequelize.literal('tweetsCount'), 'DESC']],
+            raw: true
+        })
+            .then(users => {
+                return users.map(user => ({
+                    ...user,
+                    tweetsCount: controllerHelper.ifThousand(user.tweetsCount),
+                    likesCount: controllerHelper.ifThousand(user.likesCount)
+                }))
+            })
+            .then(users => {
+                res.render('admin/users', { users })
+            })
+            .catch(err => next(err))
+    },
+    deleteTweet: (req, res, next) => {
+        const id = req.params.id
+        Tweet.findByPk(id)
+        .then(tweet => {
+            if (!tweet) throw new Error("推文不存在")
+            return Reply.destroy({ where: { TweetId: id } })
+        })
+        .then(() => Like.destroy({ where: { TweetId: id } }))
+        .then(() => Tweet.destroy({ where: { id } }))
+        .then(() => res.redirect('/admin/tweets'))
+    }
+}
+
+module.exports = adminController

controllers/api-controller.js

@@ -0,0 +1,34 @@
+const { User } = require('../models')
+const helper = require('../_helpers')
+
+const apiController = {
+    editApi: (req, res, next) => {
+        const id = Number(helper.getUser(req).id)
+        if (id !== Number(req.params.id)) {
+            return res.json({ status: 'error' })
+        }
+        return User.findByPk(id, { raw: true })
+            .then(user => {
+                if (!user) throw new Error('使用者不存在')
+                return res.status(200).json(user)
+            })
+            .catch(err => next(err))
+    },
+    postApi: (req, res, next) => {
+        const { name } = req.body
+        const id = Number(helper.getUser(req).id)
+        if (id !== Number(req.params.id)) {
+            return res.json({ status: 'error' })
+        }
+        return User.findByPk(id)
+            .then(user => {
+                if (!user) throw new Error('使用者不存在')
+                return user.update({ name })
+            })
+            .then(user => res.json({ status: 'success', user }))
+            .catch(err => next(err))
+    }
+}
+
+
+module.exports = apiController