안녕하세요. 저는 WhatsApp API 및 Instagram 댓글/DM 자동화 소프트웨어인 Spur의 창립자 Rohan입니다.
몇 주 전에 저는 WhatsApp 통합을 구축해야 하는지 여부에 대한 블로그를 작성했습니다. 그것은 주제에 대한 높은 수준의 기사였습니다. 오늘은 WhatsApp API를 시작하는 방법에 대해 알아볼 것입니다.
오늘은 Node 서버에서 실행되고 WhatsApp Cloud API에서 웹후크를 가져와 메시지를 읽고
를 사용하는 간단한 봇을 만들어 보겠습니다.
OpenAI GPT 4o를 사용하여 응답을 보내세요.
바로 코드로 이동하고 싶으신가요? 링크는 하단에 있습니다.
이것은 매우 간단하며 Meta에는 이미 이에 대한 가이드가 있습니다. 앞으로는 가정하겠습니다
토큰의 경우 임시 토큰을 사용할 수 있습니다. 프로덕션 배포에 대한 내용은 언젠가 다른 튜토리얼에서 다루도록 하겠습니다.
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" } }
이 예는 빙산의 일각에 불과합니다. 이를 개선하기 위해 할 수 있는 일이 너무 많습니다
그렇습니다. WhatsApp 통합에 관해 제가 쓴 기사에도 관심이 있으시면 여기에서 확인하실 수 있습니다.
Spur의 GitHub 조직에 작업 예제 코드도 공유했습니다.
위 내용은 WhatsApp AI Chatbot: API로 만들어 보겠습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!