API

Jusqu'à présent, nous avons utilisé notre serveur pour servir des pages HTML ou des fichiers statiques. Cependant, nous pouvons aussi l'utiliser pour créer une API (Application Programming Interface) qui permet de communiquer différemment avec le client. Selon le type renvoyé par la route, Bottle peut aussi renvoyer des données sous d'autres formats. Par exemple, si on renvoie un dictionnaire, le contenu du dictionnaire est renvoyé au format JSON. Plus de détails dans la note 1.

Exemple

Dans cette partie, nous allons :

  • côté serveur, créer une API qui renvoie des données au format JSON
  • côté client, utiliser JavaScript pour faire des requêtes à cette API et afficher les données reçues dans la page HTML

Côté serveur

Nous allons créer un point d'entrée /api/pwgen qui renvoie une liste de caractères aléatoires.

Télécharger le code

@route('/api/pwgen')
def api_pwgen():
    """
    Renvoie une liste de caractères aléatoires.
    """
    # On génère une liste de 10 caractères aléatoires
    import random
    import string
    chars = [random.choice(string.ascii_letters + string.digits) for _ in range(10)]
    # On renvoie un dictionnaire pour que Bottle le convertisse en JSON
    return {'password': ''.join(chars)}

Côté client

Le point d'entréé /api/pwgen peut être appelé en javascript dans une page, et être utilisé pour afficher le mot de passe généré dans la page HTML, sans rechargement de la page.

Télécharger le code

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemple API</title>
    <script>
        const fetchPassword = async () => {
            const response = await fetch('/api/pwgen');
            const data = await response.json();
            document.getElementById('password').innerText = data.password;
        }
    </script>
</head>
<body>
    <h1>Générateur de mot de passe</h1>
    <button onclick="fetchPassword()">Générer un mot de passe</button>
    <code id="password"></code`>
</body>
</html>

Dans ce code, nous avons ajouté un bouton qui, lorsqu'il est cliqué, appelle la fonction fetchPassword(). Cette fonction utilise l'API Fetch pour faire une requête GET à notre point d'entrée /api/pwgen. La réponse est ensuite convertie en JSON et le mot de passe généré est affiché dans la page.

Programme

  • NSI 1ère : intéraction client/serveur, requêtes HTTP, réponses du serveur
  • NSI 1ère : évènements
  • NSI 1ère : intéraction avec l'utilisateur dans une page web
1

Si la fonction renvoie :

  • un dictionnaire, Bottle le convertit automatiquement en JSON et le renvoie au client avec le Content-Type approprié (application/json)
  • une chaîne de caractères vide, False, None : réponse vide (204 No Content)
  • une lise de chaînes de caractères : elles sont concaténées et renvoyées comme une seule chaîne de caractères
  • une chaîne de caractères unicode : elle encodée avec le codec approprié spécifié dans l'en-tête Content-Type de la réponse (utf-8 par défaut) et traitéee ensuite comme une liste d'octets (byte string).
  • un liste d'octets (byte string) : elle est renvoyée telle quelle, sans traitement.
  • une instance de HTTPError ou HTTPResponse : elle est utilisée directement pour générer la réponse, en ignorant les modifications faites sur response
  • un fichier ou un objet de type fichier (n'importe quel objet qui a une méthode read()) : il est envoyé en listant les octets via read(); Content-Type et Content-Length ne sont pas générés automatiquement. Pour plus de sécurité, il est recommandé d'utiliser static_file() pour servir des fichiers.
  • un iterable ou un générateur : le contenu est envoyé au fur et à mesure qu'il est produit, en mode streaming. Le Content-Length n'est pas généré dans ce cas.

Référence : https://bottlepy.org/docs/dev/tutorial.html#generating-content.