Chapitre 26: Déploiement du Chatbot sur Différentes Plateformes

26.1 Introduction

Déployer votre chatbot sur différentes plateformes permet de le rendre accessible à un large public et d'intégrer ses fonctionnalités dans divers environnements utilisateur. Ce chapitre explore comment déployer votre chatbot basé sur l'API Chat GPT d'OpenAI sur plusieurs plateformes, y compris les serveurs web, les applications mobiles et les plateformes de messagerie.

26.2 Déploiement sur un Serveur Web

26.2.1 Configuration du Serveur Web

Pour déployer votre chatbot sur un serveur web, vous devez configurer un serveur pour héberger votre application backend (Express.js) et frontend (React).

  1. Choix du Service d'Hébergement

    • Utilisez des services comme Heroku, Vercel, AWS, ou DigitalOcean pour héberger votre application.
  2. Préparation du Projet

    • Assurez-vous que votre projet est prêt pour le déploiement. Créez un fichier Procfile pour Heroku ou un fichier de configuration pour Vercel/AWS.
  3. Déploiement sur Heroku

    • Installez l'outil Heroku CLI :
      npm install -g heroku
    • Connectez-vous à votre compte Heroku :
      heroku login
    • Initialisez un dépôt Git et déployez votre application :
      git init
      heroku create
      git add .
      git commit -m "Deploying my chatbot"
      git push heroku master

26.2.2 Configuration du Backend pour le Déploiement

Modifiez votre fichier index.js pour utiliser les variables d'environnement correctement configurées.

const express = require('express');
const { Configuration, OpenAIApi } = require('openai');
const cors = require('cors');
require('dotenv').config();

const app = express();
const port = process.env.PORT || 3001;

app.use(cors());
app.use(express.json());

const configuration = new Configuration({
  apiKey: process.env.OPENAI_API_KEY,
});

const openai = new OpenAIApi(configuration);

let conversationHistory = [];
const MAX_HISTORY = 10;

app.post('/api/chat', async (req, res) => {
  const { prompt } = req.body;
  conversationHistory.push({ role: "user", content: prompt });

  if (conversationHistory.length > MAX_HISTORY) {
    conversationHistory = conversationHistory.slice(-MAX_HISTORY);
  }

  const messagesWithContext = [{ role: "system", content: "You are a helpful assistant." }, ...conversationHistory];

  try {
    const response = await openai.createChatCompletion({
      model: "gpt-4",
      messages: messagesWithContext,
      max_tokens: 150,
      temperature: 0.7,
    });

    const assistantMessage = response.data.choices[0].message.content.trim();
    conversationHistory.push({ role: "assistant", content: assistantMessage });

    const suggestions = getSuggestions(prompt);

    res.json({ message: assistantMessage, suggestions });
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
});

app.listen(port, () => {
  console.log(`Server is running on http://localhost:${port}`);
});

const getSuggestions = (input) => {
  const suggestions = [];

  if (input.toLowerCase().includes("weather")) {
    suggestions.push("What's the weather like today?");
    suggestions.push("Will it rain tomorrow?");
    suggestions.push("What's the forecast for this weekend?");
  } else if (input.toLowerCase().includes("news")) {
    suggestions.push("What's the latest news?");
    suggestions.push("Show me technology news.");
    suggestions.push("What's happening in sports?");
  } else if (input.toLowerCase().includes("sports")) {
    suggestions.push("Who won the game last night?");
    suggestions.push("Show me the latest sports scores.");
    suggestions.push("Tell me about upcoming sports events.");
  } else {
    suggestions.push("Tell me a joke.");
    suggestions.push("What's the capital of France?");
    suggestions.push("How do I make a cake?");
  }

  return suggestions;
};

26.3 Déploiement sur des Applications Mobiles

26.3.1 Utilisation de React Native et Expo

Expo facilite le développement et le déploiement d'applications mobiles avec React Native.

  1. Initialisation du Projet Expo

    npx expo-cli init my-chatbot-app
    cd my-chatbot-app
  2. Ajout de la Communication avec le Backend Installez Axios pour gérer les requêtes HTTP.

    expo install axios
  3. Configuration de l'Application Mobile Modifiez App.js pour communiquer avec le backend et afficher les réponses.

import React, { useState } from 'react';
import { StyleSheet, Text, View, TextInput, Button, ScrollView } from 'react-native';
import axios from 'axios';

export default function App() {
  const [prompt, setPrompt] = useState('');
  const [response, setResponse] = useState('');
  const [suggestions, setSuggestions] = useState([]);

  const handleSubmit = async () => {
    try {
      const res = await axios.post('http://your-backend-url/api/chat', { prompt });
      setResponse(res.data.message);
      setSuggestions(res.data.suggestions || []);
    } catch (error) {
      console.error("Erreur :", error);
    }
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Chat GPT Mobile App</Text>
      <TextInput
        style={styles.input}
        value={prompt}
        onChangeText={setPrompt}
        placeholder="Enter your prompt here..."
      />
      <Button title="Send" onPress={handleSubmit} />
      <ScrollView style={styles.responseContainer}>
        <Text style={styles.response}>{response}</Text>
        {suggestions.map((suggestion, index) => (
          <Button key={index} title={suggestion} onPress={() => setPrompt(suggestion)} />
        ))}
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
    padding: 20,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 20,
  },
  input: {
    height: 40,
    borderColor: 'gray',
    borderWidth: 1,
    width: '100%',
    marginBottom: 20,
    padding: 10,
  },
  responseContainer: {
    marginTop: 20,
    width: '100%',
  },
  response: {
    fontSize: 16,
    color: 'black',
  },
});
  1. Déploiement sur Expo
    • Exécutez l'application en utilisant Expo CLI.
    expo start
    • Suivez les instructions pour tester votre application sur un appareil physique ou un émulateur.

26.4 Déploiement sur des Plateformes de Messagerie

26.4.1 Intégration avec Telegram

  1. Création d'un Bot Telegram

    • Utilisez BotFather pour créer un nouveau bot et obtenir un token d'API.
  2. Configuration du Bot Utilisez node-telegram-bot-api pour intégrer le bot avec votre backend.

npm install node-telegram-bot-api 
  1. Développement du Bot Créez un fichier telegramBot.js pour configurer et lancer le bot.
const TelegramBot = require('node-telegram-bot-api');
const axios = require('axios');
require('dotenv').config();

const token = process.env.TELEGRAM_BOT_TOKEN;
const bot = new TelegramBot(token, { polling: true });

bot.on('message', async (msg) => {
  const chatId = msg.chat.id;
  const prompt = msg.text;

  try {
    const res = await axios.post('http://your-backend-url/api/chat', { prompt });
    const responseMessage = res.data.message;
    bot.sendMessage(chatId, responseMessage);
  } catch (error) {
    bot.sendMessage(chatId, "Sorry, I couldn't process your request.");
  }
});
  1. Lancement du Bot Exécutez le script pour lancer le bot.
    node telegramBot.js

Conclusion

Déployer votre chatbot sur différentes plateformes permet de toucher un large public et d'améliorer l'accessibilité et l'utilité de votre application. En suivant les étapes décrites dans ce chapitre, vous pouvez déployer votre chatbot sur des serveurs web, des applications mobiles et des plateformes de messagerie. Chaque plateforme a ses propres spécificités, mais avec les bons outils et configurations, vous pouvez offrir une expérience utilisateur cohérente et engageante sur toutes les plateformes.

Modifié le: lundi 1 juillet 2024, 09:27