Chapitre 19: Intégration dans les Applications Mobiles

19.1 Introduction

L'intégration de l'API Chat GPT d'OpenAI dans les applications mobiles permet d'enrichir l'expérience utilisateur avec des fonctionnalités avancées de traitement du langage naturel. Ce chapitre explore comment intégrer l'API dans des applications mobiles en utilisant React Native pour le développement multiplateforme.

19.2 Configuration du Projet

19.2.1 Pré-requis

  • Node.js et npm installés sur votre machine.
  • Expo CLI installé pour faciliter le développement avec React Native.
  • Une clé API OpenAI valide.

19.2.2 Initialisation du Projet React Native avec Expo

Expo simplifie le développement et le déploiement d'applications React Native. Créez un nouveau projet en utilisant Expo CLI.

npx expo-cli init my-openai-mobile-app 
cd my-openai-mobile-app

19.3 Création du Serveur Backend avec Express.js

19.3.1 Installation des Dépendances

Installez les dépendances nécessaires pour le backend.

npm install express openai dotenv cors 

19.3.2 Configuration de Base

Créez un fichier index.js à la racine de votre projet et configurez Express.js avec OpenAI.

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);

app.post('/api/generate', async (req, res) => {
  const { prompt } = req.body;
  
  try {
    const response = await openai.createChatCompletion({
      model: "gpt-4",
      messages: [{ role: "user", content: prompt }],
      max_tokens: 150,
      temperature: 0.7,
    });

    const assistantMessage = response.data.choices[0].message.content.trim();
    res.json({ message: assistantMessage });
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
});

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

19.4 Création de l'Application Mobile avec React Native

19.4.1 Installation des Dépendances

Installez les dépendances nécessaires pour faire des requêtes HTTP depuis l'application mobile.

expo install axios 

19.4.2 Configuration de Base

Modifiez App.js pour ajouter un formulaire permettant de saisir un prompt et d'afficher la réponse de l'API.

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 handleSubmit = async () => {
    try {
      const res = await axios.post('http://localhost:3001/api/generate', { prompt });
      setResponse(res.data.message);
    } 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="Generate" onPress={handleSubmit} />
      <ScrollView style={styles.responseContainer}>
        <Text style={styles.response}>{response}</Text>
      </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',
  },
});

19.5 Lancer l'Application

19.5.1 Lancer le Serveur Backend

Dans le répertoire racine de votre projet, lancez le serveur backend.

node index.js 

19.5.2 Lancer l'Application Mobile avec Expo

Dans le répertoire my-openai-mobile-app, lancez l'application mobile.

expo start 

19.6 Exemple Complet de Code

19.6.1 Code Complet du Serveur Backend (index.js)

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);

app.post('/api/generate', async (req, res) => {
  const { prompt } = req.body;
  
  try {
    const response = await openai.createChatCompletion({
      model: "gpt-4",
      messages: [{ role: "user", content: prompt }],
      max_tokens: 150,
      temperature: 0.7,
    });

    const assistantMessage = response.data.choices[0].message.content.trim();
    res.json({ message: assistantMessage });
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
});

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

19.6.2 Code Complet de l'Application Mobile React Native (App.js)

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 handleSubmit = async () => {
    try {
      const res = await axios.post('http://localhost:3001/api/generate', { prompt });
      setResponse(res.data.message);
    } 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="Generate" onPress={handleSubmit} />
      <ScrollView style={styles.responseContainer}>
        <Text style={styles.response}>{response}</Text>
      </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',
  },
});

Conclusion

L'intégration de l'API Chat GPT d'OpenAI dans des applications mobiles peut enrichir l'expérience utilisateur en offrant des fonctionnalités avancées de traitement du langage naturel. En utilisant React Native et Expo, vous pouvez créer une application mobile multiplateforme qui interagit avec l'API via un serveur backend. Ce chapitre vous a guidé à travers les étapes nécessaires pour configurer et lancer une telle application.

Last modified: Monday, 1 July 2024, 7:59 AM