Développement d'applications mobiles

Développement d'applications mobiles

7- HTTP

Avant d'explorer les mécanismes de requêtes HTTP, on doit d'abord comprendre le traitement asynchrone en JavaScript que ceux-ci utiliserons.

sequenceDiagram Client->>Serveur: Requête 1 rect salmon Client-xClient: Bloqué Serveur-->>Client: Réponse 1 end Client->>Serveur: Requête 2 rect salmon Client-xClient: Bloqué Serveur-->>Client: Réponse 2 end

Synchrone

sequenceDiagram Client->>Serveur: Requête 1 rect palegreen Client-->>Client: Disponible Client->>Serveur: Requête 2 end Serveur-->>Client: Réponse 1 Serveur-->>Client: Réponse 2 note over Client,Serveur: ou Serveur-->>Client: Réponse 2 Serveur-->>Client: Réponse 1

Asynchrone

JS Asynchrone

Callbacks: then catch
Promises: async await
- ATTENTION await est disponible uniquement dans un contexte asynchrone

📚 Asynchronous JS

ℹ️ Javascript.info Async

ℹ️ async, await VS then, catch

js

//   
// ASYNC
//

async function sleep(delay) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            if (Math.random() > 0.5) {
                resolve(`{"name": "james", "age": 42}`);
            } else {
                reject();
            }
        }, delay);
    });
}


//
// Callbacks
//

sleep(2000)
    .then((data) => {
        console.log('1 ----')
        console.log('1 Yay!', data);
        return JSON.parse(data);
    })
    .then((obj) => console.log(obj))
    .catch(() => {
        console.log('1 ----')
        console.log('1 Nope')
    })
    .finally(() => console.log('1 ----\n'))

// !!!
console.log('Will print result in 2 seconds');


//
// await
//

// !!!
console.log('Will print another result in 3 seconds');

try {
    const data = await sleep(3000)

    console.log('2 ----')
    console.log('2 Yay!', data);
    console.log(JSON.parse(data));
} catch {
    console.log('2 ----')
    console.log('2 Nope')
}
finally {
    console.log('2 ----\n')
}

Requêtes HTTP

Protocole de communication entre un client(navigateur web, app mobile, AJAX, script, ...) et un serveur(serveur web, application PHP, application Ruby, ...)

Requête

Réponse

JSON

Format de données facilitant le transfert d’information

Facile à comprendre pour les humains,
Rapide à manipuler par les machines
Représente des objets sous forme clé-valeur, supporte également les tableaux
Les clés sont de type string
Les valeurs de type string, nombre, booléen, objet, tableau, null

json

{
    "first_name": "John",
    "last_name": "Smith",
    "is_alive": true,
    "spouse": null,
    "age": 27,
    "address": {
        "street_address": "21 2nd Street",
        "city": "New York",
        "state": "NY",
        "postal_code": "10021-3100"
    },
    "phone_numbers": [
        {
            "type": "home",
            "number": "212 555-1234"
        },
        {
            "type": "office",
            "number": "646 555-4567"
        }
    ],
    "children": [
        "Catherine",
        "Thomas",
        "Trevor"
    ]
}

Fetch

Mécanisme moderne pour effectuer des requêtes HTTP en JavaScript.

📚 Using Fetch

ℹ️ Javascript.info Fetch

js

const simple = await fetch('http://httpbin.org/uuid').then(
    (r) => r.text()
);
console.log({ simple })

const complete = await fetch(
    `http://httpbin.org/anything/something?${new URLSearchParams({filter: 'category'})}`,
    {
        method: 'PUT',
        headers: {
            'Content-Type': 'text/plain'
        },
        body: 'Hello world!!!'
    }
).then((r) => r.json());

console.log({ complete  })

Martha

Offre une couche d’abstraction entre la base de données et l’application client qui manipule les données.

Une interface web permet de gérer la base de données et les requêtes SQL à exécuter, qui seront accessibles via des requêtes HTTP.
http://martha.jh.shawinigan.info
Présentation sur Youtube

block-beta columns 3 client(("Application Client"))

block:http columns 1 int["(internet)"] req<["Requête HTTP"]>(right) res<["Réponse JSON"]>(left) end

block:api columns 1 Martha

db[("MariaDB")] end

style http fill:none,stroke:none style int fill:none,stroke:none style client fill:lightgreen,stroke:#333,stroke-width:1px style api fill:lightblue,stroke:#333,stroke-width:1px style Martha fill:none,stroke:none

API Martha

URL du service

http://martha.jh.shawinigan.info/queries/...NOM REQUETE.../execute

http

POST /queries/...NOM_REQUETE.../execute 
auth: base64(username:password)

...JSON BODY?...

=== Statement SUCCES

{
    success: true
}

=== Select SUCCES

{
    success: true,
    data: [
        { ... },
        { ... },
        { ... },
        ...
    ]
}

=== Insert auto-increment(statement) SUCCES

{
    success: true,
    lastInsertId: ...id...
}

~~~ Select/Statement ERREUR

{
    success: false,
    error: "Message..."
}

Démo Martha

Création de la BD

sql

create table items (
  id int unsigned auto_increment primary key,
  name varchar(100)
);

insert into items(name)
values ('aaa'), ('bbb'), ('ccc'), ('ddd');

Une query `select`

sql

select-items

select * from items;

Tester la requête HTTP

URL

http://martha.jh.shawinigan.info/queries/QUERY/execute

Préciser le header d'authentification

bash

echo -n 'username:password' | base64

ou

https://www.base64encode.com

bash

# https://httpie.io/docs/cli/http-headers
http POST http://martha.jh.shawinigan.info/queries/select-items/execute auth:...

Une query `statement`

sql

insert-item

insert into items(name) values ("?name");

Aller dans query detail pour expérimenter le Run Query

json

{"name": "new item"}

Requête HTTP, suite

URL

http://martha.jh.shawinigan.info/queries/insert-item/execute

json

Body

{"name": "new item http request"}

bash

# https://httpie.io/docs/cli/json
http POST http://martha.jh.shawinigan.info/queries/insert-item/execute auth:... name='new item http'

Constater la requête dans les API Requests

Démo ReactNative

jsx

"import { StatusBar } from 'expo-status-bar';\nimport { StyleSheet, Text, ScrollView, View, Button } from 'react-native';\nimport { useCallback, useState, useEffect } from 'react';\n\nexport default function App() {\n const [items, setItems] = useState()\n\n const AUTH = \"ZGVtbzpSZWFjdE5hdGl2ZTIwMjQh\"\n\n // useCallback ?\n // https://react.dev/reference/react/useCallback\n const refresh = useCallback(() =\u003e {\n let cancelled = false;\n\n // On doit creer un contexte async\n const asyncRefresh = async () =\u003e {\n\n const response = await fetch(\"http://martha.jh.shawinigan.info/queries/select-items/execute\", {\n method: 'POST',\n headers: {\n 'auth': AUTH\n }\n }).then((r) =\u003e r.json());\n\n if (!cancelled \u0026\u0026 response.success) {\n setItems(response.data);\n }\n };\n\n asyncRefresh();\n\n // Pour eviter une race condition\n // https://maxrozen.com/race-conditions-fetching-data-react-with-useeffect\n return () =\u003e { cancelled = true; }\n\n }, []) // [] pour executer seulement 1 fois, pas chaque re-render\n\n\n // https://react.dev/reference/react/useEffect\n useEffect(refresh, [])\n\n //\n // useEffect VS useFocusEffect ?\n //\n // https://reactnavigation.org/docs/use-focus-effect\n // useFocusEffect(refresh);\n\n async function handleAdd() {\n const response = await fetch(\"http://martha.jh.shawinigan.info/queries/insert-item/execute\", {\n method: 'POST',\n body: JSON.stringify({name: \u0060Item \u0024{Math.random().toString(16).substring(2)}\u0060}),\n headers: {\n 'auth': AUTH\n }\n }).then((r) =\u003e r.json())\n\n console.log(response)\n\n refresh()\n }\n\n //\n // Affichage, undefined VS []\n //\n // {\n // items \u0026\u0026\n // \u003c\u003e ... \u003c/\u003e\n // }\n\n return (\n \u003cView style={{ flex: 1, paddingTop: StatusBar.currentHeight }}\u003e\n\n \u003cScrollView style={{ flexGrow: 1 }}\u003e\n \u003cText style={{ flexGrow: 1 }}\u003e{ JSON.stringify(items, null, 2) }\u003c/Text\u003e\n \u003c/ScrollView\u003e\n\n \u003cButton title=\"Add\" onPress={ handleAdd }/\u003e\n \u003c/View\u003e\n );\n}"

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, ScrollView, View, Button } from 'react-native';
import { useCallback, useState, useEffect } from 'react';

export default function App() {
    const [items, setItems] = useState()

    const AUTH = "ZGVtbzpSZWFjdE5hdGl2ZTIwMjQh"

    // useCallback ?
    // https://react.dev/reference/react/useCallback
    const refresh = useCallback(() => {
        let cancelled = false;

        // On doit creer un contexte async
        const asyncRefresh = async () => {

            const response = await fetch("http://martha.jh.shawinigan.info/queries/select-items/execute", {
                method: 'POST',
                headers: {
                    'auth': AUTH
                }
            }).then((r) => r.json());

            if (!cancelled && response.success)  {
                setItems(response.data);
            }
        };

        asyncRefresh();

        // Pour eviter une race condition
        // https://maxrozen.com/race-conditions-fetching-data-react-with-useeffect
        return () => { cancelled = true; }

    }, []) // [] pour executer seulement 1 fois, pas chaque re-render


    // https://react.dev/reference/react/useEffect
    useEffect(refresh, [])

    //
    // useEffect VS useFocusEffect ?
    //
    // https://reactnavigation.org/docs/use-focus-effect
    // useFocusEffect(refresh);

    async function handleAdd() {
        const response = await fetch("http://martha.jh.shawinigan.info/queries/insert-item/execute", {
            method: 'POST',
            body: JSON.stringify({name: `Item ${Math.random().toString(16).substring(2)}`}),
            headers: {
                'auth': AUTH
            }
        }).then((r) => r.json())

        console.log(response)

        refresh()
    }

    //
    // Affichage, undefined VS []
    //
    //  {
    //      items &&
    //      <> ... </>
    //  }

    return (
        <View style={{ flex: 1, paddingTop: StatusBar.currentHeight }}>

            <ScrollView style={{ flexGrow: 1 }}>
                <Text style={{ flexGrow: 1 }}>{ JSON.stringify(items, null, 2) }</Text>
            </ScrollView>

            <Button title="Add" onPress={ handleAdd }/>
        </View>
    );
}

Observations?

Gestion d'erreurs
Répétition ++
Responsabilité des components par rapport aux requêtes HTTP? 👉 Services! Et modèles...

Il est possible d'inspecter les requêtes HTTP avec les outils de développement

jsx

"import { StatusBar } from 'expo-status-bar';\nimport { StyleSheet, Text, ScrollView, View, Button } from 'react-native';\nimport { useCallback, useState, useEffect } from 'react';\n\nexport default function App() {\n const [items, setItems] = useState()\n\n const AUTH = \"ZGVtbzpSZWFjdE5hdGl2ZTIwMjQh\"\n\n // useCallback ?\n // https://react.dev/reference/react/useCallback\n const refresh = useCallback(() =\u003e {\n let cancelled = false;\n\n // On doit creer un contexte async\n const asyncRefresh = async () =\u003e {\n\n const response = await fetch(\"http://martha.jh.shawinigan.info/queries/select-items/execute\", {\n method: 'POST',\n headers: {\n 'auth': AUTH\n }\n }).then((r) =\u003e r.json());\n\n if (!cancelled \u0026\u0026 response.success) {\n setItems(response.data);\n }\n };\n\n asyncRefresh();\n\n // Pour eviter une race condition\n // https://maxrozen.com/race-conditions-fetching-data-react-with-useeffect\n return () =\u003e { cancelled = true; }\n\n }, []) // [] pour executer seulement 1 fois, pas chaque re-render\n\n\n // https://react.dev/reference/react/useEffect\n useEffect(refresh, [])\n\n //\n // useEffect VS useFocusEffect ?\n //\n // https://reactnavigation.org/docs/use-focus-effect\n // useFocusEffect(refresh);\n\n async function handleAdd() {\n const response = await fetch(\"http://martha.jh.shawinigan.info/queries/insert-item/execute\", {\n method: 'POST',\n body: JSON.stringify({name: \u0060Item \u0024{Math.random().toString(16).substring(2)}\u0060}),\n headers: {\n 'auth': AUTH\n }\n }).then((r) =\u003e r.json())\n\n console.log(response)\n\n refresh()\n }\n\n //\n // Affichage, undefined VS []\n //\n // {\n // items \u0026\u0026\n // \u003c\u003e ... \u003c/\u003e\n // }\n\n return (\n \u003cView style={{ flex: 1, paddingTop: StatusBar.currentHeight }}\u003e\n\n \u003cScrollView style={{ flexGrow: 1 }}\u003e\n \u003cText style={{ flexGrow: 1 }}\u003e{ JSON.stringify(items, null, 2) }\u003c/Text\u003e\n \u003c/ScrollView\u003e\n\n \u003cButton title=\"Add\" onPress={ handleAdd }/\u003e\n \u003c/View\u003e\n );\n}"

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, ScrollView, View, Button } from 'react-native';
import { useCallback, useState, useEffect } from 'react';

export default function App() {
    const [items, setItems] = useState()

    const AUTH = "ZGVtbzpSZWFjdE5hdGl2ZTIwMjQh"

    // useCallback ?
    // https://react.dev/reference/react/useCallback
    const refresh = useCallback(() => {
        let cancelled = false;

        // On doit creer un contexte async
        const asyncRefresh = async () => {

            const response = await fetch("http://martha.jh.shawinigan.info/queries/select-items/execute", {
                method: 'POST',
                headers: {
                    'auth': AUTH
                }
            }).then((r) => r.json());

            if (!cancelled && response.success)  {
                setItems(response.data);
            }
        };

        asyncRefresh();

        // Pour eviter une race condition
        // https://maxrozen.com/race-conditions-fetching-data-react-with-useeffect
        return () => { cancelled = true; }

    }, []) // [] pour executer seulement 1 fois, pas chaque re-render


    // https://react.dev/reference/react/useEffect
    useEffect(refresh, [])

    //
    // useEffect VS useFocusEffect ?
    //
    // https://reactnavigation.org/docs/use-focus-effect
    // useFocusEffect(refresh);

    async function handleAdd() {
        const response = await fetch("http://martha.jh.shawinigan.info/queries/insert-item/execute", {
            method: 'POST',
            body: JSON.stringify({name: `Item ${Math.random().toString(16).substring(2)}`}),
            headers: {
                'auth': AUTH
            }
        }).then((r) => r.json())

        console.log(response)

        refresh()
    }

    //
    // Affichage, undefined VS []
    //
    //  {
    //      items &&
    //      <> ... </>
    //  }

    return (
        <View style={{ flex: 1, paddingTop: StatusBar.currentHeight }}>

            <ScrollView style={{ flexGrow: 1 }}>
                <Text style={{ flexGrow: 1 }}>{ JSON.stringify(items, null, 2) }</Text>
            </ScrollView>

            <Button title="Add" onPress={ handleAdd }/>
        </View>
    );
}

Observations?

Gestion d'erreurs
Répétition ++
Responsabilité des components par rapport aux requêtes HTTP? 👉 Services! Et modèles...

Il est possible d'inspecter les requêtes HTTP avec les outils de développement