iT邦幫忙

2024 iThome 鐵人賽

DAY 29
0
JavaScript

Javascript網頁程式管理系統系列 第 29

day 29 javascript結合line分析地價成長空間網頁程式管理系統

  • 分享至 

  • xImage
  •  

今天是第十九天我們可以寫一個javascript結合line分析地價成長空間網頁程式管理系統,以下是我的程式碼

  1. Line Bot 開發:使用 Line Messaging API 接收用戶請求,並將請求傳遞給後端進行資料處理。
  2. 地價資料庫管理:使用一個資料庫來儲存地價相關的資料,例如地區、年度、價格、成長率等。
  3. 分析功能:撰寫算法來分析不同地區的地價成長趨勢。
  4. JavaScript 前端與後端開發:前端可能會是一個簡單的用戶介面用來查詢地價資料,後端負責資料處理、分析和與 Line API 的互動。

系統架構:

  • Line Bot:負責與使用者溝通,接收查詢請求並返回結果。
  • 資料庫:存放地價資料,可選擇 SQL 或 NoSQL 資料庫。
  • 後端 API:使用 Node.js + Express 處理地價資料分析邏輯,並與 Line Bot 通訊。
  • 前端(可選):如果需要管理系統或查看分析結果的介面,可以搭配簡單的 HTML、CSS 和 JavaScript 前端頁面。

開發步驟:

1. 設定 Line Bot

首先,在 Line Developers 註冊並創建一個 Messaging API Bot,並取得 Channel ID、Secret 和 Access Token。

2. 後端架構(Node.js + Express)

首先,初始化一個 Node.js 專案並安裝所需的套件:

npm init -y
npm install express line-bot-sdk body-parser mongoose

接下來,建立 app.js 並設定 Express 伺服器和 Line Bot 的基本配置:

const express = require('express');
const line = require('@line/bot-sdk');
const bodyParser = require('body-parser');
const mongoose = require('mongoose');

const app = express();
app.use(bodyParser.json());

const config = {
    channelAccessToken: '你的LINE_CHANNEL_ACCESS_TOKEN',
    channelSecret: '你的LINE_CHANNEL_SECRET'
};

const client = new line.Client(config);

// Mongoose 設定 MongoDB 資料庫連接
mongoose.connect('mongodb://localhost:27017/land_price_db', {
    useNewUrlParser: true,
    useUnifiedTopology: true
});

// 定義地價資料 Schema
const landPriceSchema = new mongoose.Schema({
    region: String,
    year: Number,
    price: Number
});
const LandPrice = mongoose.model('LandPrice', landPriceSchema);

// 處理 Line Webhook 請求
app.post('/webhook', line.middleware(config), (req, res) => {
    Promise.all(req.body.events.map(handleEvent))
        .then(result => res.json(result))
        .catch(err => {
            console.error(err);
            res.status(500).end();
        });
});

// 處理事件
function handleEvent(event) {
    if (event.type === 'message' && event.message.type === 'text') {
        const userMessage = event.message.text;

        if (userMessage.startsWith('查詢地價')) {
            const region = userMessage.split(' ')[1];
            return getLandPrice(region, event.replyToken);
        }
    }
}

// 查詢資料庫的地價資料
function getLandPrice(region, replyToken) {
    LandPrice.find({ region: region }).sort({ year: -1 }).limit(1).exec((err, data) => {
        if (err) {
            return client.replyMessage(replyToken, {
                type: 'text',
                text: '查詢失敗,請稍後再試。'
            });
        }
        if (data.length === 0) {
            return client.replyMessage(replyToken, {
                type: 'text',
                text: `找不到 ${region} 的地價資料。`
            });
        }

        const latestData = data[0];
        return client.replyMessage(replyToken, {
            type: 'text',
            text: `最新 ${region} 地價資料:\n年份: ${latestData.year}\n價格: ${latestData.price}`
        });
    });
}

// 啟動伺服器
const port = process.env.PORT || 3000;
app.listen(port, () => {
    console.log(`Server running on port ${port}`);
});

3. 資料庫設計與管理

資料庫將用 MongoDB 來儲存地價資料。每條資料將包含地區、年份、價格等字段。你可以使用 Mongoose 來操作 MongoDB,並建立如下資料庫結構:

const landPriceSchema = new mongoose.Schema({
    region: String,
    year: Number,
    price: Number
});

4. 前端(可選)

若需要管理介面來新增、查詢、編輯資料,可以使用 HTML、CSS、JavaScript 做出簡單的管理介面。後端可以提供 RESTful API 來操作資料庫。

例如,新增資料的 API 可以這樣設計:

app.post('/addLandPrice', (req, res) => {
    const { region, year, price } = req.body;
    
    const newPrice = new LandPrice({ region, year, price });
    newPrice.save((err) => {
        if (err) {
            return res.status(500).send('資料儲存失敗');
        }
        res.status(200).send('資料儲存成功');
    });
});

5. 部署到雲端

這個系統可以部署在任何支持 Node.js 的平台上,比如 Heroku、Vercel 或 AWS。將應用部署後,設定 Line Bot Webhook 指向你的雲端伺服器 URL。

1. 引入所需的模組

const express = require('express');
const line = require('@line/bot-sdk');
const bodyParser = require('body-parser');
const mongoose = require('mongoose');

這裡我們引入了四個模組:

  • express:Node.js 的 web 應用框架,用來處理 HTTP 請求和路由。
  • line-bot-sdk:Line Bot SDK,讓我們可以與 Line Messaging API 互動。
  • body-parser:用來解析 HTTP 請求中的 JSON 資料,方便我們處理來自 Line Bot 的請求。
  • mongoose:用來與 MongoDB 資料庫溝通。

2. 初始化 Express 應用和 Line Bot 設定

const app = express();
app.use(bodyParser.json());

const config = {
    channelAccessToken: '你的LINE_CHANNEL_ACCESS_TOKEN',
    channelSecret: '你的LINE_CHANNEL_SECRET'
};

const client = new line.Client(config);

這段程式碼:

  • app = express() 初始化了一個 Express 應用,並透過 app.use(bodyParser.json()) 來處理傳入的 JSON 資料。
  • config 物件儲存了你的 Line Bot 的憑證,包括 channelAccessTokenchannelSecret,這些是從 Line Developers 平台取得的,用來驗證你的 Bot 與 Line 平台的通訊。
  • client = new line.Client(config) 用來創建一個 Line Bot 的客戶端實例,稍後我們將使用這個實例來發送訊息給用戶。

3. 連接 MongoDB 資料庫

mongoose.connect('mongodb://localhost:27017/land_price_db', {
    useNewUrlParser: true,
    useUnifiedTopology: true
});

這段程式碼使用 mongoose.connect() 來連接到 MongoDB。資料庫的 URL 是 mongodb://localhost:27017/land_price_db,這表示我們將在本地運行 MongoDB,並使用名為 land_price_db 的資料庫。useNewUrlParseruseUnifiedTopology 是一些 Mongoose 的配置選項,用來優化連接的行為。

4. 定義資料庫的地價 Schema 和模型

const landPriceSchema = new mongoose.Schema({
    region: String,
    year: Number,
    price: Number
});
const LandPrice = mongoose.model('LandPrice', landPriceSchema);

這段程式碼使用 mongoose.Schema 定義了一個名為 landPriceSchema 的資料結構,描述了每筆地價資料將包含:

  • region:地區名稱(文字類型)。
  • year:年份(數字類型)。
  • price:地價(數字類型)。

LandPrice 是基於這個 Schema 創建的模型,我們將使用它來對資料庫進行操作,例如新增、查詢或刪除資料。

5. 處理 Line Webhook 請求

app.post('/webhook', line.middleware(config), (req, res) => {
    Promise.all(req.body.events.map(handleEvent))
        .then(result => res.json(result))
        .catch(err => {
            console.error(err);
            res.status(500).end();
        });
});

這段程式碼:

  • app.post('/webhook', ...) 定義了一個 POST 路由,當 Line 平台向我們的伺服器發送訊息時,會觸發這個路由。Line Bot 的所有事件請求會送到 /webhook
  • line.middleware(config) 是用來驗證請求的中介程式,確保請求來自 Line 平台。
  • req.body.events.map(handleEvent) 將每一個來自 Line 的事件(例如用戶傳來的訊息)傳給 handleEvent 函數來處理。
  • Promise.all() 保證所有事件都處理完畢後再回應 Line 平台。

6. 處理 Line Bot 的訊息事件

function handleEvent(event) {
    if (event.type === 'message' && event.message.type === 'text') {
        const userMessage = event.message.text;

        if (userMessage.startsWith('查詢地價')) {
            const region = userMessage.split(' ')[1];
            return getLandPrice(region, event.replyToken);
        }
    }
}

這段程式碼的 handleEvent 函數用來處理來自 Line Bot 的訊息事件:

  • 它先檢查事件是否是用戶發送的文字訊息 (event.type === 'message' && event.message.type === 'text')。
  • 如果是,則從 event.message.text 中提取用戶的訊息內容,並檢查訊息是否以 查詢地價 開頭。
  • 如果符合條件,則從訊息中提取地區名稱,並調用 getLandPrice() 函數來查詢地區的地價資料。

7. 查詢地價資料並回覆訊息

function getLandPrice(region, replyToken) {
    LandPrice.find({ region: region }).sort({ year: -1 }).limit(1).exec((err, data) => {
        if (err) {
            return client.replyMessage(replyToken, {
                type: 'text',
                text: '查詢失敗,請稍後再試。'
            });
        }
        if (data.length === 0) {
            return client.replyMessage(replyToken, {
                type: 'text',
                text: `找不到 ${region} 的地價資料。`
            });
        }

        const latestData = data[0];
        return client.replyMessage(replyToken, {
            type: 'text',
            text: `最新 ${region} 地價資料:\n年份: ${latestData.year}\n價格: ${latestData.price}`
        });
    });
}

這段程式碼定義了 getLandPrice 函數,它用來查詢資料庫中的地價資料並回應用戶:

  • LandPrice.find({ region: region }) 根據地區名稱來查找符合條件的地價資料,並按年份 (year) 降序排列 (sort({ year: -1 }))。
  • limit(1) 確保只返回最新的資料。
  • exec() 方法執行查詢,並在查詢結果中使用 callback function 來處理資料。
  • 如果查詢失敗,則回應用戶一條錯誤訊息。
  • 如果查詢成功且找不到資料,則告知用戶找不到該地區的資料。
  • 如果找到了資料,則回傳最新的地價資訊給用戶。

8. 啟動伺服器

const port = process.env.PORT || 3000;
app.listen(port, () => {
    console.log(`Server running on port ${port}`);
});

這段程式碼啟動了 Express 伺服器,並監聽來自指定 port 的 HTTP 請求。process.env.PORT 是用於雲端環境的設定(例如 Heroku),如果沒有設定則預設為 3000。

總結:

這個程式碼實現了一個基於 Line Bot 的地價資料查詢系統。用戶可以在 Line 中發送訊息(如「查詢地價 台北」),系統會根據用戶查詢的地區從 MongoDB 中查找最新的地價資料,並將結果回傳給用戶。

整個系統的工作流程是:

  1. Line Bot 接收用戶訊息。
  2. 後端解析訊息並提取查詢條件(如地區名稱)。
  3. 從資料庫查詢相關的地價資料。
  4. 回傳查詢結果給 Line 用戶。

上一篇
day 28 Javascript結合line bot時事推薦股票網頁程式管理系統
下一篇
day 30 javascript腳踏車路線紀錄分享給車友網頁程式管理系統
系列文
Javascript網頁程式管理系統30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言