> 웹 프론트엔드 > JS 튜토리얼 > WhatsApp AI Chatbot: API로 만들어 보겠습니다.

WhatsApp AI Chatbot: API로 만들어 보겠습니다.

PHPz
풀어 주다: 2024-07-30 08:26:03
원래의
1006명이 탐색했습니다.

안녕하세요. 저는 WhatsApp API 및 Instagram 댓글/DM 자동화 소프트웨어인 Spur의 창립자 Rohan입니다.

몇 주 전에 저는 WhatsApp 통합을 구축해야 하는지 여부에 대한 블로그를 작성했습니다. 그것은 주제에 대한 높은 수준의 기사였습니다. 오늘은 WhatsApp API를 시작하는 방법에 대해 알아볼 것입니다.

WhatsApp AI 챗봇을 만들어보자

오늘은 Node 서버에서 실행되고 WhatsApp Cloud API에서 웹후크를 가져와 메시지를 읽고
를 사용하는 간단한 봇을 만들어 보겠습니다. OpenAI GPT 4o를 사용하여 응답을 보내세요.

바로 코드로 이동하고 싶으신가요? 링크는 하단에 있습니다.

WhatsApp 테스트 번호 및 토큰 받기

이것은 매우 간단하며 Meta에는 이미 이에 대한 가이드가 있습니다. 앞으로는 가정하겠습니다

  1. 메타 앱을 만드셨습니다
  2. WhatsApp 제품 추가
  3. 테스트 번호를 받고 메시지를 보낼 수 있습니다

토큰의 경우 임시 토큰을 사용할 수 있습니다. 프로덕션 배포에 대한 내용은 언젠가 다른 튜토리얼에서 다루도록 하겠습니다.

노드 서버 설정

pnpm 설정이 없다면 이 방법이 가장 쉬운 방법입니다

corepack enable
corepack prepare pnpm@latest --activate
로그인 후 복사

이제 시작합니다

mkdir whatsapp-ai-bot

# intialize npm project
pnpm init

# make the server file
touch index.js

# env file
touch .env
로그인 후 복사

지금 필수 종속성을 설치하세요.

pnpm install express dotenv openai
로그인 후 복사

API 키를 커밋하지 마세요. API 키와 같은 민감한 정보를 코드베이스 외부에 유지하기 위해 환경 변수를 사용합니다. 프로젝트의 루트 디렉터리에 .env 파일을 만들고 다음 줄을 추가합니다.

OPENAI_API_KEY=<your-openai-api-key>
로그인 후 복사

이제 생성된 index.js 파일을 사용하여 다음 코드를 추가하세요

import express from 'express';
import { config } from 'dotenv';
import OpenAI from 'openai';

// Load environment variables
config();

// Create a web server
const app = express();
const port = process.env.PORT || 3034;
app.listen(port, () => {
  console.log(`Server running on port ${port}`);
});

// Add middleware to parse JSON bodies
app.use(express.json());

// Initialize OpenAI API
const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY,
});

app.get('/webhooks', (req, res) => {
  if (
    req.query['hub.mode'] === 'subscribe' &&
    req.query['hub.verify_token'] === '1234'
  ) {
    res.send(req.query['hub.challenge']);
  } else {
    res.sendStatus(400);
  }
});

app.post('/webhooks', async (req, res) => {
  const body = req.body.entry[0].changes[0];
  if (body.field !== 'messages') {
    // not from the messages webhook so dont process
    return res.sendStatus(200);
  }

  if (!body.value.messages) {
    return res.sendStatus(200);
  }

  const text = body.value.messages
    .map((message) => message.text.body)
    .join('\n\n');

  console.log(text);

  const completion = await openai.chat.completions.create({
    model: 'gpt-4o-mini',
    messages: [{ role: 'user', content: text }],
  });

  // Extract the response from the OpenAI completion
  const aiResponse = completion.choices[0].message.content;

  // Extract the phone number from the incoming message
  const phoneNumber = body.value.messages[0].from;

  // Prepare the message payload
  const messagePayload = {
    messaging_product: 'whatsapp',
    to: phoneNumber,
    type: 'text',
    text: {
      body: aiResponse,
    },
  };

  // Send the response back to WhatsApp
  try {
    const response = await fetch(
      `https://graph.facebook.com/v20.0/${process.env.PHONE_NUMBER_ID}/messages`,
      {
        method: 'POST',
        headers: {
          Authorization: `Bearer ${process.env.SYSTEM_TOKEN}`,
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(messagePayload),
      },
    );

    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }

    console.log('Message sent successfully');
  } catch (error) {
    console.error('Failed to send message:', error);
  }

  res.sendStatus(200);
});
로그인 후 복사

또한 package.json을
으로 수정합니다.

{
  "name": "whatsapp-ai-bot",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node server.js",
    "dev": "nodemon server.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "type": "module",
  "packageManager": "pnpm@9.6.0",
  "dependencies": {
    "dotenv": "^16.4.5",
    "express": "^4.19.2",
    "openai": "^4.53.2"
  },
  "devDependencies": {
    "nodemon": "^3.1.4"
  }
}
로그인 후 복사

코드 작동 방식 이해

Image description

  1. 먼저 Facebook 앱에서 웹훅을 설정할 때 챌린지가 통과되도록 "GET" 엔드포인트를 만듭니다. 또한 사용할 수 있는 .env.example 값에 확인 토큰 값도 포함했습니다.
  2. 그런 다음 실제 마법을 수행하는 POST 엔드포인트가 옵니다. 텍스트를 받아 ChatGPT에 전달한 후 해당 응답을 사용자에게 보냅니다.

다음 단계

이 예는 빙산의 일각에 불과합니다. 이를 개선하기 위해 할 수 있는 일이 너무 많습니다

  1. 멱등성을 구현하기 위해 WhatsApp 웹훅은 고유하지 않으며 반복될 수 있습니다.
  2. 메모리 채팅 기록 추가
  3. Redis/관계형 데이터베이스로 메모리 유지
  4. 버튼 등과 같은 풍부한 콘텐츠를 응답으로 활용합니다(이를 구축하려면 OpenAI 기능이 필요함)

결론

그렇습니다. WhatsApp 통합에 관해 제가 쓴 기사에도 관심이 있으시면 여기에서 확인하실 수 있습니다.

Spur의 GitHub 조직에 작업 예제 코드도 공유했습니다.

위 내용은 WhatsApp AI Chatbot: API로 만들어 보겠습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:dev.to
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿