iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 3
0
Software Development

[行銷也要自動化] 用 Python Selenium + NodeJS + Amazon EC2 打造簡易關鍵字搜尋報表應用!系列 第 3

Day2:NodeJS 與 Express 4、route設定|KeywordSearch 1.0 爬蟲關鍵字報表工具

什麼是KeywordSearch 1.0 爬蟲關鍵字報表工具?
是作者近期兩周實作出來的小專案,把不同關鍵字搜尋工具的api及部分爬蟲寫在nodejs App當中,讓使用者可以一鍵拿到搜尋趨勢和相似詞組推薦。此專案尚有很大擴充空間,未來在作者自己的部落格若有進一步更新,會回來附在此處:________

為什麼要做KeywordSearch 1.0?
精闢有效的前導市調可以避免不符市場需求的產品出現,定期觀測關鍵字趨勢,是網路行銷或市場分析人員的日常;但網路資訊四散各地,市調人除了大量閱讀、蒐集、篩選判斷外,還要把資料整理過後呈現給團隊,這個過程非常需要耐心、想像力、判斷力、大把時間,能夠獨立做出完整市調非常不容易;因此作者和朋友想幫市調人員節省文書、搜尋時間,讓他們能專注在判斷、分析上。

現在進度到哪了?為什麼文章是有關nodejs?
這個工具已經開發完成,現在在測試修改中,這30天文章是想把自己的開發過程完整記錄下來。第一周的進度是初步架好NodeJS App的基底,以及在jupyter上測試爬蟲script。

昨天我們碰了一下最陽春的Nodejs和Connect來管理middleware,今天讓我們直接用Express架構KeywordSearch 1.0的基底!

安裝

  1. 先進行實作的部分,後面我在多補充一些有關Express 3和4的差別。別管昨天的陽春server了,回到上一層,並安裝Express module:
user@ubuntu:/NodeJS/yangChunServer$ cd ..
user@ubuntu:/NodeJS$ sudo npm install express-generator -g
  1. 創一個新專案(資料夾)名稱自己開心取。如果你有意想搭配後面的模板教學,記得加上 --view=ejs,不然沒加的話預設會是jade。
user@ubuntu:/NodeJS$ express YourAppName --view=ejs

跑完以後會看到你的App架構長這樣:

- bin/
----- www
- node_modules/
- public/
-------- images
-------- javascripts
-------- stylesheets
- routes/
-------- index.js
-------- users.js
- views/
------- error.ejs
------- index.ejs
- app.js
- package.json
- package-lock.json
  1. 進入資料夾,設定環境:
user@ubuntu:/NodeJS$ cd YourAppName
user@ubuntu:/NodeJS/YourAppName$ npm install
  1. 試跑一下你的App:
user@ubuntu:/NodeJS/YourAppName$ DEBUG=YourAppName:* npm start
或
user@ubuntu:/NodeJS/YourAppName$ node ./bin/www

當你看到

> YourAppName@0.0.0 start /NodeJS/YourAppName
> node ./bin/www
    YourAppName:server Listening on port 3000 +0ms
    

就表示成功deploy了!可以打開localhost:3000跟大大的Express標題打個招呼。

bin資料夾中的www就是你的App的starting script,裡面大致做的事情是幫你創一個server、指定監聽哪個port等。www會再啟動app.jsapp.js裡面是基本設定,如route。

route設定

在你一建好App的同時,就可以在routes資料夾裡面看到users.js,以及你也可以在app.js裡面看到這一行:app.use('/users', users);,你可以隱約的猜到,這應該是已經預設好的路由。
我們在localhost:3000後面加上/users試一下:localhost:3000/users,嗯,確實有頁面,上面就是users.js中的response訊息。如果我們把users.jsres.send裡面的('respond with a resource');隨意換成其他文字,你就會看到他出現在剛剛的/users頁面。

現在我們來加加看新的route,只要一次更新這三個地方:

  • route/
  • app.js
  • views/

在route/下層新增about.js

// about.js
var express = require('express');
var router = express.Router();

/* GET about page. */
router.get('/', function(req, res, next) {
  res.render('about', { title: 'About YourAppName' });
});

module.exports = router;

app.js新增兩行

// app.js
var index = require('./routes/index');
+ var about = require('./routes/about');

app.use('/', index);
+ app.use('/about', about);

在views/下層新增about.ejs

其中的<%= title %>是模板變數,讓你可以在about.jsres.render設定好整組變數。
(模板部分先簡單複製index.ejs的,後面我們會詳細講模板的變化,除變數以外,還有固定模板、如何載入json等等。)

// about.ejs
<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <h1><%= title %></h1>
  </body>
</html>

/* 補充 */

Express 3 -> Express 4的改變


上一篇
Day1:NodeJS 基本安裝、環境設定、淺談Connect|KeywordSearch 1.0 爬蟲關鍵字報表工具
下一篇
Day3:關於middleware的小示範|KeywordSearch 1.0 爬蟲關鍵字報表工具
系列文
[行銷也要自動化] 用 Python Selenium + NodeJS + Amazon EC2 打造簡易關鍵字搜尋報表應用!14

尚未有邦友留言

立即登入留言