Inbox Zero AI MCP

🚀 翻譯結果

本項目可實現 Gmail 推送通知功能，通過配置 Next.js 項目、Google Cloud PubSub 主題和訂閱、Webhook 處理以及 cron 作業，讓應用即時接收電子郵件通知。

🚀 快速開始

項目配置

1. 創建一個新的 Next.js 項目

使用以下命令創建一個全新的 Next.js 項目：

npx create-next-app next-door && cd next-door

2. 安裝依賴項

在項目根目錄下運行以下命令以安裝必要的依賴項：

npm install nextjs googleapis @google-cloud/pubsub express cors dotenv

3. 配置環境變量

創建一個 .env 文件，並添加以下內容（將佔位符替換為實際值）：

GOOGLE_CLIENT_ID=your_client_id
GOOGLE_CLIENT_SECRET=your_client_secret
GOOGLE_PUBSUB_PROJECT_ID=your_project_id
GOOGLE_PUBSUB_TOPIC_NAME=your_topic_name
GOOGLE_PUBSUB_VERIFICATION_TOKEN=your_verification_token

4. 配置 Next.js 環境變量

修改 next.config.js 文件，以確保環境變量在生產環境中可用：

/** @type {import('next').NextConfig} */
const nextConfig = {
  env: {
    GOOGLE_CLIENT_ID: process.env.GOOGLE_CLIENT_ID,
    GOOGLE_CLIENT_SECRET: process.env.GOOGLE_CLIENT_SECRET,
    GOOGLE_PUBSUB_PROJECT_ID: process.env.GOOGLE_PUBSUB_PROJECT_ID,
    GOOGLE_PUBSUB_TOPIC_NAME: process.env.GOOGLE_PUBSUB_TOPIC_NAME,
    GOOGLE_PUBSUB_VERIFICATION_TOKEN: process.env.GOOGLE_PUBSUB_VERIFICATION_TOKEN
  }
};

module.exports = nextConfig;

實現 Gmail 推送通知

1. 創建 PubSub 主題和訂閱

在 Google Cloud Console 中，導航到 PubSub API 並創建一個新的主題。例如，您可以命名為 inbox-zero-updates。

接下來，創建一個訂閱以接收來自該主題的通知。您可以在開發環境中使用 ngrok 來處理回撥 URL：

ngrok http --domain=your-domain.ngrok-free.app 3000

然後，在 PubSub 控制檯中，為您的訂閱配置以下屬性：

• 回撥 URL: https://your-domain.ngrok-free.app/api/google/webhook?token=TOKEN
• 驗證令牌: 在 .env 文件中設置的 GOOGLE_PUBSUB_VERIFICATION_TOKEN
• 推送協議: 選擇 HTTP

2. 實現 Webhook 處理

在您的 Next.js 應用中，創建一個 API 路由來處理 Google 的推送通知：

import type { NextApiRequest, NextApiResponse } from 'next';

export default function handler(req, res) {
  if (req.method !== 'POST') {
    res.status(405).json({ message: 'Method not allowed' });
    return;
  }

  // 驗證令牌並處理推送通知
  const verificationToken = req.query.token;
  if (!verificationToken || verificationToken !== process.env.GOOGLE_PUBSUB_VERIFICATION_TOKEN) {
    res.status(401).json({ message: 'Unauthorized' });
    return;
  }

  // 處理實際的推送數據
  const data = JSON.parse(req.body);
  console.log('Received email notification:', data);

  res.json({ message: 'Notification processed successfully' });
}

3. 設置郵件監控

為了確保您的應用能夠即時接收電子郵件通知，您需要定期檢查 Gmail API 的更改。為此，您可以設置一個 cron 作業，每隔一段時間（例如每 5 分鐘）調用一次 /api/google/watch/all 端點。

配置 cron 作業

在項目根目錄下創建一個 crons.json 文件，並添加以下內容：

{
  "crons": [
    {
      "path": "/api/google/watch/all",
      "schedule": "0 */5 * * *"
    }
  ]
}

使用 Upstash 來運行 cron 作業，您可以按照 Upstash 文檔 進行配置。

💻 使用示例

基礎用法

以下是項目中幾個關鍵文件的代碼示例：

pages/_app.tsx

import { NextApp } from 'next/app';
import type { AppProps } from 'next/app';

export default function MyApp({ Component, pageProps }: AppProps) {
  return (
    <NextApp>
      <Component {...pageProps} />
    </NextApp>
  );
}

pages/index.tsx

import { useState, useEffect } from 'react';

export default function Home() {
  const [emailNotifications, setEmailNotifications] = useState([]);

  useEffect(() => {
    // 定期檢查 Gmail API 的更改
    const interval = setInterval(() => {
      fetch('/api/google/watch/all')
        .then((response) => response.json())
        .then((data) => setEmailNotifications(data))
        .catch((error) => console.error('Error:', error));
    }, 5000);

    return () => clearInterval(interval);
  }, []);

  return (
    <div>
      <h1>即時電子郵件通知</h1>
      <ul>
        {emailNotifications.map((notification, index) => (
          <li key={index} >{notification.subject}</li>
        ))}
      </ul>
    </div>
  );
}

api/google/watch/all.ts

import type { NextApiRequest, NextApiResponse } from 'next';
import { google } from 'googleapis';

export default function handler(req, res) {
  const oauth2Client = new google.auth.OAuth2({
    client_id: process.env.GOOGLE_CLIENT_ID,
    client_secret: process.env.GOOGLE_CLIENT_SECRET
  });
  // 後續代碼可能還有，這裡省略
}