Python REST API Feladat: Adatok Bekérése és kiírása

Készítsünk egy Flask alkalmazást, amely egy űrlapot jelenít meg két adattal: név és életkor. Az űrlap alatt legyen egy gomb, amely a "Beküldés" szöveget jeleníti meg. Mikor a gombot megnyomjuk, a Flask alkalmazás bekéri az adatokat és megjeleníti őket a gomb alatti div-ben.

Az adatok megjelenítésekor a következő formátumot használja: "Név: [név], Életkor: [életkor]".

Feladat lépései:

  1. Készítsünk egy új Flask alkalmazást.
  2. Hozzunk létre egy új HTML fájlt, amelyben az űrlap és a gomb található.
  3. Írjunk egy Python kódot, amely bekéri az adatokat az űrlapról és megjeleníti őket a gomb alatti div-ben.
  4. Teszteljük az alkalmazást és ellenőrizzük, hogy megfelelően működik-e.

Példa:

app.py

from flask import Flask, render_template, request, jsonify

app = Flask(__name__)


@app.route('/', methods=['GET'])
def index():
    return render_template('index.html')

@app.route('/data', methods=['POST'])
def get_set_data():
     data = request.form
     return jsonify(data)

if __name__ == '__main__':
    app.run(debug=True)

index.html

<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <main>
        <form id="data-form" method="POST" action="/data">
            <label for="nev">Név:</label>
            <input type="text" id="nev" name="nev" required><br><br>
            <label for="foglalkozas">Foglalkozás:</label>
            <input type="text" id="foglalkozas" name="foglalkozas" required><br><br>
            <button id="get-data-btn">Kattints ide!</button>
        </form>

        <div id="data-container"></div>
    </main>

    <script>
        const getDataBtn = document.getElementById('get-data-btn');
        const dataContainer = document.getElementById('data-container');

        var getDataFromServer = function(e) {
            e.preventDefault(); // Megakadályozza az alapértelmezett űrlapküldést

            let nev = document.getElementById('nev').value;
            let foglalkozas = document.getElementById('foglalkozas').value;

            // Ellenőrzés, hogy a mezők ki vannak-e töltve
            if (!nev || !foglalkozas) {
                alert('Kérlek, töltsd ki az összes mezőt!');
                return;
            }

            // URL-kódolt paraméterek létrehozása
            let params = new URLSearchParams();
            params.append('nev', nev);
            params.append('foglalkozas', foglalkozas);

            // Fetch API kérés
            fetch('/data', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                body: params
            })
            .then(response => {
                if (!response.ok) {
                    throw new Error(`Hiba történt: ${response.status}`);
                }
                return response.json();
            })
            .then(data => {
                // Megjeleníti a választ
                dataContainer.innerHTML = `
                    <p>Név: ${data.nev}</p>
                    <p>Foglalkozás: ${data.foglalkozas}</p>
                `;
            })
            .catch(error => {
                console.error('Hiba:', error);
                dataContainer.innerHTML = `<p>${error.message}</p>`;
            });
        }

        getDataBtn.addEventListener('click', getDataFromServer);
    </script>
</body>
</html>

Tesztelés

A tesztelés célja, hogy biztosítsuk, hogy a Flask alkalmazásunk megfelelően működik és a várt eredményeket adja vissza.

Például, ha a /data végpontot teszteljük, akkor a következő lépések történnek:

Ha a teszt sikeres, akkor biztosak lehetünk abban, hogy a /data végpont megfelelően működik és a várt eredményeket adja vissza.

Példa:

test_app.py

import unittest
from app import app

class TestApp(unittest.TestCase):

    def setUp(self):
        self.app = app.test_client()

    def test_get_data(self):
        # Teszteljük a GET kérést a / végpontra
        response = self.app.get('/')
        self.assertEqual(response.status_code, 200)

    def test_post_data(self):
        # Teszteljük a POST kérést a /data végpontra
        test_data = {
            'nev': 'Szabó János',
            'foglalkozas': 'Programozó',
        }
        response = self.app.post('/data', data = test_data)
        self.assertEqual(response.status_code, 200)
        self.assertIn('nev', response.json)
        self.assertIn('foglalkozas', response.json)

    def test_post_data_empty(self):
        # Teszteljük a POST kérést üres adatokkal a /data végpontra
        test_data = {}
        response = self.app.post('/data', data=test_data)
        self.assertEqual(response.status_code, 200)

if __name__ == '__main__':
    unittest.main()

A teszt a következő lépésekkel működik:

setUp: A setUp metódusban beállítjuk a Flask alkalmazás teszt kliensét. Ez a kliens egy olyan objektum, amely lehetővé teszi számunkra, hogy kéréseket küldjünk a Flask alkalmazásnak anélkül, hogy ténylegesen elindítanánk a szervereket.

Testek: A teszt osztályban három különböző teszt metódus van:

test_get_data: Teszteljük a GET kérést a / végpontra. test_post_data: Teszteljük a POST kérést a /data végpontra adatokkal. test_post_data_empty: Teszteljük a POST kérést üres adatokkal a /data végpontra.

Kérések küldése: Minden teszt metódusban küldünk egy kérést a Flask alkalmazásnak a self.app.get() vagy self.app.post() metódusokkal.

Válasz ellenőrzése: Minden teszt metódusban ellenőrizzük a válasz státusz kódját és tartalmát.

Például:

Teszt futtatása: A teszteket a unittest segítségével futtathatjuk. Ha a tesztek sikeresek, akkor a kimenetben nem lesz hibaüzenet. Ha hiba van, akkor a kimenetben megjelenik a hibaüzenet.