📡 Простая отправка данных на школьный сервер
🎯 Цели и планируемые результаты урока
Предметные результаты:
- Понимание архитектуры Client-Server и принципов работы API
- Освоение основ HTTP протокола (GET/POST запросы)
- Навыки работы с готовыми API endpoints
- Умение отправлять структурированные данные в формате JSON
- Практические навыки интеграции ESP32 с веб-системами
- Создание персональной страницы с данными от своего устройства
Метапредметные результаты:
- Развитие понимания взаимодействия между устройствами
- Формирование навыков работы с API документацией
- Умение структурировать и передавать информацию
- Развитие навыков отладки сетевых приложений
Личностные результаты:
- Понимание роли данных в современном мире
- Формирование ответственного отношения к передаваемой информации
- Развитие навыков командной работы в цифровой среде
🚀 Мотивационное начало (7 минут)
“Превращение ESP32 в цифрового репортера”
Учитель демонстрирует ESP32, который отправляет данные на сервер, и они мгновенно появляются на большом экране
📊 Живая демонстрация магии данных:
1🌡️ ESP32 измеряет температуру: 23.5°C
2📡 Отправляет данные на сервер...
3💻 На экране появляется: "Класс 5А: 23.5°C - 15:18:46"
4📈 График обновляется в реальном времени
5🎉 Ваше имя появляется в списке активных устройств!
🎭 Интерактивная аналогия “Цифровые корреспонденты”:
1📰 ТРАДИЦИОННАЯ ЖУРНАЛИСТИКА ↔ 📡 IoT РЕПОРТИНГ
2📝 Репортер пишет заметку ↔ 🤖 ESP32 собирает данные
3📞 Звонит в редакцию ↔ 📡 Отправляет HTTP запрос
4🗞️ Статья попадает в газету ↔ 💻 Данные на веб-странице
5👥 Люди читают новости ↔ 📊 Анализируют информацию
🌟 Интрига урока: “Сегодня каждый ваш ESP32 станет цифровым журналистом, который будет рассказывать миру о том, что происходит в нашем классе!”
🎯 Вызов дня: “К концу урока у каждого из вас будет персональная страница в интернете с данными от вашего собственного IoT устройства!”
📖 Основная часть урока
Блок 1: “Client-Server архитектура - понимаем роли” (12 минут)
🏪 “Магазин и покупатель - идеальная аналогия”
Разыгрываем сценку с учениками:
1🏪 CLIENT-SERVER = МАГАЗИН И ПОКУПАТЕЛЬ:
2
3👤 КЛИЕНТ (ESP32): 🏪 СЕРВЕР (Raspberry Pi):
4"Здравствуйте!" ↔ "Добро пожаловать!"
5"Можно данные передать?" ↔ "Конечно! Какие данные?"
6"Температура 23.5°C" ↔ "Принято! Данные сохранены"
7"Спасибо! До свидания!" ↔ "Пожалуйста! Заходите еще!"
8
9🎯 РОЛИ:
10CLIENT: Тот, кто ПРОСИТ услугу (наш ESP32)
11SERVER: Тот, кто ПРЕДОСТАВЛЯЕТ услугу (школьный сервер)
📡 “HTTP протокол - язык общения в интернете”
Простое объяснение через письма:
1📮 HTTP = ФОРМАТ ЦИФРОВЫХ ПИСЕМ:
2
3✉️ GET ЗАПРОС (как вопрос):
4"Уважаемый сервер!
5Не могли бы вы показать мне страницу с данными?
6С уважением, ESP32"
7
8📤 POST ЗАПРОС (как отчет):
9"Уважаемый сервер!
10Докладываю данные:
11- Устройство: ESP32_5А_Команда1
12- Температура: 23.5°C
13- Время: 15:18:46
14С уважением, ESP32"
15
16📨 ОТВЕТ СЕРВЕРА:
17"Дорогой ESP32!
18Ваши данные получены и сохранены.
19Код ответа: 200 (все хорошо)
20С уважением, Школьный сервер"
🔍 “Анатомия HTTP запроса”
Разбираем по частям:
1📋 СТРУКТУРА HTTP POST ЗАПРОСА:
2
3POST /api/sensor-data HTTP/1.1 ← Метод и адрес
4Host: 192.168.1.100 ← Адрес сервера
5Content-Type: application/json ← Тип данных
6Content-Length: 156 ← Размер данных
7
8{ ← Начало данных
9 "device": "ESP32_5А_Команда1",
10 "student": "Иван Петров",
11 "class": "5А",
12 "temperature": 23.5,
13 "timestamp": "2025-05-27T15:18:46"
14} ← Конец данных
15
16🗣️ НА ПРОСТОМ ЯЗЫКЕ:
17"Привет сервер! Это POST запрос к адресу /api/sensor-data.
18Я отправляю JSON данные размером 156 байт.
19Вот мои данные о температуре..."
🎯 Интерактивное задание “HTTP театр”
Ученики играют роли компонентов:
- ESP32: “Я хочу отправить данные!”
- Router: “Передаю запрос серверу!”
- Server: “Получил! Обрабатываю! Сохраняю в базу!”
- Database: “Данные сохранены в таблице sensors!”
- Web interface: “Показываю новые данные пользователям!”
Блок 2: “Изучение школьных API endpoints - наша карта сокровищ” (15 минут)
🗺️ “API документация - путеводитель по серверу”
Демонстрация готовой документации:
1📚 СПРАВОЧНИК API ШКОЛЬНОГО СЕРВЕРА:
2
3🌐 Базовый адрес: http://192.168.1.100
4
5📊 ДОСТУПНЫЕ ENDPOINTS:
6
71️⃣ /api/hello
8 Метод: GET
9 Описание: Проверка связи с сервером
10 Ответ: {"status": "ok", "message": "Server is running"}
11
122️⃣ /api/sensor-data
13 Метод: POST
14 Описание: Отправка данных от датчиков
15 Формат: JSON
16 Поля: device, student, class, sensor_type, value, timestamp
17
183️⃣ /api/students/{student_name}
19 Метод: GET
20 Описание: Получение данных конкретного ученика
21 Пример: /api/students/ivan_petrov
22
234️⃣ /api/dashboard
24 Метод: GET
25 Описание: Данные для главной панели
26 Ответ: Список всех активных устройств
27
285️⃣ /api/class/{class_name}/data
29 Метод: GET
30 Описание: Все данные от класса
31 Пример: /api/class/5a/data
🧪 “Тестирование API через браузер”
Практическое исследование endpoints:
1🔬 ЛАБОРАТОРНАЯ РАБОТА "API EXPLORER":
2
3Задание 1: Проверка связи
4- Открываем браузер
5- Переходим: http://192.168.1.100/api/hello
6- Что видим: {"status": "ok", "message": "Server is running", "time": "15:18:46"}
7- Вывод: Сервер работает! ✅
8
9Задание 2: Просмотр данных
10- Переходим: http://192.168.1.100/api/dashboard
11- Видим JSON со списком устройств
12- Записываем количество активных устройств: ____
13
14Задание 3: Поиск своих данных
15- Переходим: http://192.168.1.100/api/class/5a/data
16- Ищем данные от предыдущих уроков
17- Есть ли данные с нашими именами: ДА/НЕТ
📝 “Формат JSON для отправки данных”
Создаем шаблон данных:
1📋 ШАБЛОН JSON ДЛЯ НАШИХ ДАННЫХ:
2
3{
4 "device": "ESP32_5А_[номер_команды]",
5 "student": "[Имя и Фамилия]",
6 "class": "5А",
7 "sensor_type": "temperature",
8 "value": 23.5,
9 "unit": "°C",
10 "timestamp": "2025-05-27T15:18:46",
11 "location": "Кабинет информатики",
12 "notes": "Измерение во время урока 10"
13}
14
15🎯 ПРИМЕР ЗАПОЛНЕНИЯ КОМАНДОЙ:
16{
17 "device": "ESP32_5А_Команда3",
18 "student": "Мария Сидорова",
19 "class": "5А",
20 "sensor_type": "temperature",
21 "value": 24.2,
22 "unit": "°C",
23 "timestamp": "2025-05-27T15:18:46",
24 "location": "Кабинет информатики",
25 "notes": "Тестовые данные от команды №3"
26}
🔧 “Инструменты для тестирования API”
Знакомство с отладочными средствами:
1🛠️ ИНСТРУМЕНТЫ API РАЗРАБОТЧИКА:
2
31️⃣ БРАУЗЕР (простейший способ):
4- Только GET запросы
5- Удобно для просмотра данных
6- Не подходит для POST запросов
7
82️⃣ POSTMAN (профессиональный инструмент):
9- Любые типы запросов
10- Красивый интерфейс
11- Сохранение коллекций запросов
12
133️⃣ CURL (командная строка):
14- Быстрый и мощный
15- Подходит для автоматизации
16- Требует знания синтаксиса
17
184️⃣ ARDUINO SERIAL MONITOR:
19- Видим что отправляет ESP32
20- Отладка в реальном времени
21- Простой и доступный
22
23🎯 МЫ БУДЕМ ИСПОЛЬЗОВАТЬ:
24- Браузер для GET запросов
25- Arduino Serial Monitor для отладки
26- ESP32 для POST запросов
Блок 3: “Программирование отправки данных - делаем ESP32 говорящим” (18 минут)
💻 “Базовая программа отправки данных”
Пошаговое создание кода:
1// 📡 ПРОГРАММА ОТПРАВКИ ДАННЫХ НА ШКОЛЬНЫЙ СЕРВЕР
2// Урок 10: Client-Server взаимодействие
3
4#include <WiFi.h>
5#include <HTTPClient.h>
6#include <ArduinoJson.h>
7
8// 🔐 Настройки WiFi (из предыдущего урока)
9const char* ssid = "School_IoT_2025";
10const char* password = "ваш_пароль";
11
12// 🌐 Настройки сервера
13const char* serverURL = "http://192.168.1.100/api/sensor-data";
14
15// 👤 ПЕРСОНАЛЬНЫЕ ДАННЫЕ (заполняет каждая команда)
16String deviceName = "ESP32_5А_Команда1"; // Уникальное имя устройства
17String studentName = "Иван Петров"; // Имя ученика
18String className = "5А"; // Класс
19
20// 📊 Переменные для данных
21float temperature = 0.0;
22int sendInterval = 30000; // Отправляем каждые 30 секунд
23unsigned long lastSendTime = 0;
24
25void setup() {
26 Serial.begin(9600);
27 Serial.println("🚀 Запуск IoT репортера");
28
29 // 📶 Подключаемся к WiFi
30 connectToWiFi();
31
32 // 🌡️ Настраиваем "датчик температуры" (симуляция)
33 randomSeed(analogRead(0));
34
35 Serial.println("✅ Система готова к отправке данных!");
36 Serial.printf("📡 Данные будут отправляться каждые %d секунд\n", sendInterval/1000);
37}
38
39void loop() {
40 // 🕐 Проверяем, пора ли отправлять данные
41 if (millis() - lastSendTime >= sendInterval) {
42
43 // 🌡️ "Измеряем" температуру (симуляция)
44 temperature = 20.0 + random(-50, 150) / 10.0; // 15-27°C
45
46 // 📤 Отправляем данные на сервер
47 sendSensorData();
48
49 lastSendTime = millis();
50 }
51
52 // 🔍 Проверяем состояние WiFi
53 if (WiFi.status() != WL_CONNECTED) {
54 Serial.println("⚠️ WiFi отключен, переподключаемся...");
55 connectToWiFi();
56 }
57
58 delay(1000); // Небольшая пауза
59}
60
61// 📡 Функция отправки данных
62void sendSensorData() {
63 if (WiFi.status() == WL_CONNECTED) {
64 HTTPClient http;
65
66 // 🌐 Настраиваем HTTP клиент
67 http.begin(serverURL);
68 http.addHeader("Content-Type", "application/json");
69
70 // 📝 Формируем JSON данные
71 String jsonData = createSensorJSON();
72
73 Serial.println("📤 Отправляем данные:");
74 Serial.println(jsonData);
75
76 // 🚀 Отправляем POST запрос
77 int responseCode = http.POST(jsonData);
78
79 // 📨 Обрабатываем ответ
80 handleServerResponse(responseCode, http.getString());
81
82 http.end();
83 } else {
84 Serial.println("❌ WiFi не подключен, данные не отправлены");
85 }
86}
87
88// 📋 Функция создания JSON
89String createSensorJSON() {
90 // 🕐 Получаем текущее время
91 String timestamp = getCurrentTimestamp();
92
93 // 📊 Формируем JSON строку
94 String json = "{";
95 json += "\"device\":\"" + deviceName + "\",";
96 json += "\"student\":\"" + studentName + "\",";
97 json += "\"class\":\"" + className + "\",";
98 json += "\"sensor_type\":\"temperature\",";
99 json += "\"value\":" + String(temperature, 1) + ",";
100 json += "\"unit\":\"°C\",";
101 json += "\"timestamp\":\"" + timestamp + "\",";
102 json += "\"location\":\"Кабинет информатики\",";
103 json += "\"notes\":\"Урок 10 - Отправка данных\"";
104 json += "}";
105
106 return json;
107}
108
109// 🕐 Функция получения времени
110String getCurrentTimestamp() {
111 // Упрощенный формат времени (в реальности используем NTP)
112 unsigned long uptime = millis() / 1000;
113 int hours = (uptime / 3600) % 24;
114 int minutes = (uptime / 60) % 60;
115 int seconds = uptime % 60;
116
117 String timestamp = "2025-05-27T";
118 if (hours < 10) timestamp += "0";
119 timestamp += String(hours) + ":";
120 if (minutes < 10) timestamp += "0";
121 timestamp += String(minutes) + ":";
122 if (seconds < 10) timestamp += "0";
123 timestamp += String(seconds);
124
125 return timestamp;
126}
127
128// 📨 Функция обработки ответа сервера
129void handleServerResponse(int responseCode, String response) {
130 Serial.printf("📊 Код ответа: %d\n", responseCode);
131
132 if (responseCode == 200) {
133 Serial.println("✅ Данные успешно отправлены!");
134 Serial.println("📨 Ответ сервера: " + response);
135 } else if (responseCode == 400) {
136 Serial.println("❌ Ошибка 400: Неправильный формат данных");
137 } else if (responseCode == 500) {
138 Serial.println("❌ Ошибка 500: Проблема на сервере");
139 } else {
140 Serial.printf("⚠️ Неизвестная ошибка: %d\n", responseCode);
141 }
142
143 Serial.println("─────────────────────────");
144}
145
146// 📶 Функция подключения к WiFi (из предыдущего урока)
147void connectToWiFi() {
148 WiFi.begin(ssid, password);
149 Serial.print("🔍 Подключение к WiFi");
150
151 int attempts = 0;
152 while (WiFi.status() != WL_CONNECTED && attempts < 20) {
153 delay(1000);
154 Serial.print(".");
155 attempts++;
156 }
157
158 if (WiFi.status() == WL_CONNECTED) {
159 Serial.println("\n✅ WiFi подключен!");
160 Serial.printf("📍 IP адрес: %s\n", WiFi.localIP().toString().c_str());
161 } else {
162 Serial.println("\n❌ Не удалось подключиться к WiFi");
163 }
164}
🎯 “Персонализация кода каждой командой”
Задание для команд:
1✏️ ПЕРСОНАЛИЗАЦИЯ ВАШЕГО IoT РЕПОРТЕРА:
2
31️⃣ ИЗМЕНИТЕ ЛИЧНЫЕ ДАННЫЕ:
4String deviceName = "ESP32_5А_Команда[номер]";
5String studentName = "[Ваше имя и фамилия]";
6String className = "5А";
7
82️⃣ ДОБАВЬТЕ УНИКАЛЬНОЕ СООБЩЕНИЕ:
9"notes": "Привет от команды [номер]! Изучаем IoT!"
10
113️⃣ НАСТРОЙТЕ ИНТЕРВАЛ ОТПРАВКИ:
12int sendInterval = 30000; // 30 сек (можно 15000 или 60000)
13
144️⃣ ДОБАВЬТЕ ДИАПАЗОН "ИЗМЕРЕНИЙ":
15temperature = 20.0 + random(-30, 70) / 10.0; // 17-27°C
16
17🎯 ЦЕЛЬ: Сделать ваше устройство уникальным!
🔍 “Отладка и диагностика”
Алгоритм поиска проблем:
1🚨 ДИАГНОСТИКА ОТПРАВКИ ДАННЫХ:
2
31️⃣ ПРОВЕРКА СЕТИ:
4✅ WiFi подключен? (статус WL_CONNECTED)
5✅ IP адрес получен?
6✅ Ping сервера проходит?
7
82️⃣ ПРОВЕРКА ДАННЫХ:
9✅ JSON формируется корректно?
10✅ Все поля заполнены?
11✅ Нет лишних символов в строках?
12
133️⃣ ПРОВЕРКА ОТВЕТА:
14📊 Код 200: Все отлично!
15📊 Код 400: Проблема с форматом JSON
16📊 Код 404: Неправильный URL
17📊 Код 500: Проблема на сервере
18
194️⃣ ЧАСТЫЕ ОШИБКИ:
20❌ Забыли кавычки в JSON
21❌ Лишняя запятая в конце
22❌ Неправильный URL сервера
23❌ Слишком частые запросы
Блок 4: “Наблюдение за данными на дашборде - видим результат!” (10 минут)
💻 “Школьная панель мониторинга”
Демонстрация веб-интерфейса:
1📊 ГЛАВНАЯ ПАНЕЛЬ: http://192.168.1.100/dashboard
2
3┌─────────────────────────────────────────────┐
4│ 🏫 ШКОЛЬНАЯ IoT СИСТЕМА │
5│ Обновлено: 2025-05-27 15:18:46 │
6├─────────────────────────────────────────────┤
7│ 📈 АКТИВНЫЕ УСТРОЙСТВА: 8 │
8│ │
9│ 🤖 ESP32_5А_Команда1 | Иван Петров │
10│ 📊 Температура: 23.5°C | 15:17:30 │
11│ │
12│ 🤖 ESP32_5А_Команда2 | Мария Сидорова │
13│ 📊 Температура: 24.1°C | 15:18:15 │
14│ │
15│ 🤖 ESP32_5А_Команда3 | Петр Иванов │
16│ 📊 Температура: 22.8°C | 15:18:45 │
17├─────────────────────────────────────────────┤
18│ 📈 [График температуры за последний час] │
19│ 🎛️ [Кнопки управления устройствами] │
20└─────────────────────────────────────────────┘
👤 “Персональные страницы учеников”
Создание индивидуальных профилей:
1🏠 ПЕРСОНАЛЬНАЯ СТРАНИЦА:
2http://192.168.1.100/students/ivan_petrov
3
4┌─────────────────────────────────────────────┐
5│ 👤 ПРОФИЛЬ IoT УСТРОЙСТВА │
6│ Ученик: Иван Петров │
7│ Класс: 5А │
8│ Устройство: ESP32_5А_Команда1 │
9├─────────────────────────────────────────────┤
10│ 📊 ПОСЛЕДНИЕ ДАННЫЕ: │
11│ 🌡️ Температура: 23.5°C │
12│ 🕐 Время: 15:18:46 │
13│ 📍 Место: Кабинет информатики │
14├─────────────────────────────────────────────┤
15│ 📈 ИСТОРИЯ ДАННЫХ: │
16│ 15:18:46 - 23.5°C │
17│ 15:18:16 - 23.2°C │
18│ 15:17:46 - 23.8°C │
19│ 15:17:16 - 23.1°C │
20├─────────────────────────────────────────────┤
21│ 📊 СТАТИСТИКА: │
22│ Всего измерений: 24 │
23│ Средняя температура: 23.4°C │
24│ Мин/Макс: 22.1°C / 24.8°C │
25│ Время работы: 12 минут │
26└─────────────────────────────────────────────┘
📊 “Живые графики и аналитика”
Интерактивные элементы дашборда:
1📈 ВОЗМОЖНОСТИ ВЕБ-ИНТЕРФЕЙСА:
2
3🔴 РЕАЛЬНОЕ ВРЕМЯ:
4- Данные обновляются каждые 10 секунд
5- График "растет" на глазах
6- Счетчики активных устройств
7
8🎨 ИНТЕРАКТИВНОСТЬ:
9- Клик на устройство → подробная информация
10- Hover на графике → точные значения
11- Фильтры по времени и классам
12
13📊 АНАЛИТИКА:
14- Средние значения по классу
15- Сравнение между командами
16- Тренды изменения данных
17- Экспорт данных в CSV
18
19🎛️ УПРАВЛЕНИЕ:
20- Кнопки включения/выключения светодиодов
21- Изменение интервалов измерений
22- Калибровка датчиков
🎯 “Проверка своих данных”
Практическое задание для команд:
1🔍 НАЙДИТЕ СВОИ ДАННЫЕ НА ДАШБОРДЕ:
2
3Шаг 1: Запустите программу на ESP32
4Шаг 2: Дождитесь отправки первых данных
5Шаг 3: Откройте http://192.168.1.100/dashboard
6Шаг 4: Найдите свое устройство в списке
7
8📋 ЗАПОЛНИТЕ КАРТОЧКУ:
9┌─────────────────────────────────────┐
10│ 🎯 МОИ ДАННЫЕ НА СЕРВЕРЕ │
11├─────────────────────────────────────┤
12│ Имя устройства: ___________ │
13│ Последнее значение: ____°C │
14│ Время последнего обновления: ___ │
15│ Количество отправленных данных: __ │
16│ Ссылка на мою страницу: ___ │
17│ │
18│ ✅ Данные отправляются регулярно │
19│ ✅ График обновляется │
20│ ✅ Нет ошибок в Serial Monitor │
21└─────────────────────────────────────┘
🎨 Творческое задание: “Цифровой дневник IoT репортера” (8 минут)
📰 “Создание профессионального профиля”
Каждая команда создает расширенную карточку:
1🆔 ПРОФИЛЬ IoT РЕПОРТЕРА
2Команда: _________________ Дата: 2025-05-27
3
4📰 ЖУРНАЛИСТСКИЕ ДАННЫЕ:
5Имя репортера: _________________________
6Позывной устройства: ESP32_5А_Команда___
7Специализация: Температурные сводки
8Территория покрытия: Кабинет информатики
9
10📡 ТЕХНИЧЕСКИЕ ХАРАКТЕРИСТИКИ:
11API endpoint: /api/sensor-data
12Формат данных: JSON
13Частота отчетов: каждые ___ секунд
14Точность измерений: ±0.1°C
15
16📊 СТАТИСТИКА РАБОТЫ:
17Отчетов отправлено сегодня: ____
18Успешных передач: ____%
19Средняя температура: ____°C
20Самое интересное измерение: ________
21
22🌐 СЕТЕВАЯ АКТИВНОСТЬ:
23IP адрес: 192.168.1.___
24Время в сети: ___ минут
25Качество связи: Отличное/Хорошее/Плохое
26Ошибок подключения: ____
27
28🎯 УНИКАЛЬНЫЕ ОСОБЕННОСТИ:
29Что особенного в наших данных: __________
30_______________________________________
31
32Секретное сообщение в JSON: ____________
33_______________________________________
34
35🏆 ДОСТИЖЕНИЯ:
36□ Первый успешный POST запрос
37□ Данные появились на дашборде
38□ Создана персональная страница
39□ Работает стабильно >10 минут
40□ Помог товарищу с настройкой
41
42📈 ПЛАНЫ НА БУДУЩЕЕ:
43Хотим добавить датчик: ________________
44Хотим измерять: ______________________
45Хотим научиться: ____________________
46
47🖊️ Подпись главного репортера: __________
48
49📱 QR-код ссылки на мою страницу:
50[Место для QR-кода]
🎪 “Пресс-конференция IoT репортеров”
Презентация результатов:
- Каждая команда представляет своего “цифрового репортера” (2 минуты)
- Демонстрирует данные на дашборде
- Показывает свою персональную страницу
- Рассказывает о самых интересных измерениях
- Отвечает на вопросы от “коллег-журналистов”
📝 Рефлексия и закрепление (5 минут)
📡 “API викторина”
Быстрые вопросы с практическими ответами:
1❓ ПОКАЖИ ЖЕСТАМИ:
21. Как работает POST запрос? (руки к себе = получение, от себя = отправка)
32. Что делает JSON? (руки складывают "коробочку" = упаковка данных)
43. Где живут ваши данные? (показать на сервер/компьютер)
54. Как часто отправляете данные? (показать пальцами количество секунд)
📊 “Шкала готовности к API разработке”
1🎚️ УРОВЕНЬ ПОНИМАНИЯ API:
2
3🏆 API Архитектор (100%):
4"Понимаю Client-Server, пишу JSON, анализирую ответы сервера"
5
6🥇 API Разработчик (75%):
7"Отправляю данные через POST, читаю API документацию"
8
9🥈 API Пользователь (50%):
10"Понимаю GET/POST, вижу свои данные на дашборде"
11
12🥉 API Новичок (25%):
13"Знаю что такое сервер и JSON"
14
15Поднимите руку на уровне вашей готовности!
💭 “Одной фразой об API”
Каждый ученик завершает фразу:
- “API для меня теперь это…”
- “Самое крутое в отправке данных…”
- “JSON похож на…”
- “Мой ESP32 теперь умеет…”
🏠 Домашнее задание
📊 “Домашний мониторинг данных”
Основное задание:
-
Наблюдение за своими данными
- Проверять свою персональную страницу дома
- Записывать интересные изменения в данных
- Анализировать графики и тренды
-
Эксперименты с кодом
- Изменить интервал отправки данных
- Добавить новое поле в JSON (например, “mood”: “отличное”)
- Попробовать отправить данные о других “измерениях”
-
Дневник API разработчика
1📔 МОЙ ДНЕВНИК API РАЗРАБОТЧИКА - УРОК 10
2
3📡 ГЛАВНЫЕ ОТКРЫТИЯ:
4- Client-Server это: _________________________
5- POST запрос отличается от GET тем: _________
6- JSON используется для: ____________________
7
8📊 МОИ ПЕРВЫЕ ДАННЫЕ:
9Сколько отправил сообщений: ____
10Средняя температура: ____°C
11Самое необычное значение: ____°C
12Код ошибки, который видел: ____
13
14🌐 МОЯ ПЕРСОНАЛЬНАЯ СТРАНИЦА:
15URL: http://192.168.1.100/students/________
16Что мне нравится в дизайне: _______________
17Что бы хотел добавить: ___________________
18
19💻 ПРОГРАММИРОВАНИЕ:
20Самая сложная часть кода: _________________
21Что понял про JSON: ______________________
22Где применю эти знания: __________________
23
24🏠 ДОМАШНИЕ НАБЛЮДЕНИЯ:
25Какие API использую дома: _________________
26Где еще видел формат JSON: _______________
27Идеи для домашнего IoT: __________________
🔬 Исследовательское задание (для увлеченных):
- Изучить другие HTTP методы (PUT, DELETE, PATCH)
- Найти примеры публичных API (погода, новости)
- Исследовать формат XML как альтернативу JSON
🎨 Творческое задание:
- Нарисовать схему путешествия данных от ESP32 до веб-страницы
- Создать комикс “Приключения JSON пакета в интернете”
📊 Критерии оценивания
“Отлично” (5):
- Понимает архитектуру Client-Server и роли компонентов
- Уверенно программирует отправку данных через HTTP POST
- Правильно формирует JSON структуры данных
- Может анализировать ответы сервера и диагностировать ошибки
- Успешно создает персональную страницу с данными
- Демонстрирует творческий подход к персонализации данных
“Хорошо” (4):
- Понимает основы HTTP протокола и API
- Отправляет данные на сервер по готовому шаблону
- Может модифицировать JSON структуру
- Находит свои данные на дашборде
- Понимает основные коды ответов HTTP
“Удовлетворительно” (3):
- Имеет общее представление о Client-Server архитектуре
- С помощью настраивает отправку данных
- Использует готовые JSON шаблоны
- Участвует в групповом обсуждении результатов
🛠️ Материалы и оборудование
Серверная инфраструктура:
- Raspberry Pi с настроенным API сервером
- База данных для хранения данных датчиков
- Веб-интерфейс с персональными страницами
- Система логирования API запросов
Для каждой команды:
- ESP32 DevKit плата с WiFi подключением
- Готовый код шаблон для отправки данных
- Доступ к API документации
- Индивидуальные учетные данные
Программное обеспечение:
- Arduino IDE с библиотеками HTTPClient и ArduinoJson
- Веб-браузер для мониторинга дашборда
- Доступ к Serial Monitor для отладки
API Сервер (Raspberry Pi):
1# Пример API endpoint на Flask
2@app.route('/api/sensor-data', methods=['POST'])
3def receive_sensor_data():
4 data = request.get_json()
5
6 # Валидация данных
7 required_fields = ['device', 'student', 'class', 'sensor_type', 'value']
8 if not all(field in data for field in required_fields):
9 return jsonify({'error': 'Missing required fields'}), 400
10
11 # Сохранение в базу данных
12 db.execute('''INSERT INTO sensor_data
13 (device, student, class, sensor_type, value, timestamp)
14 VALUES (?, ?, ?, ?, ?, ?)''',
15 (data['device'], data['student'], data['class'],
16 data['sensor_type'], data['value'], datetime.now()))
17
18 return jsonify({'status': 'success', 'message': 'Data received'}), 200
🔍 Методические заметки для учителя
Подготовка к уроку:
- Настройка сервера: Убедиться, что все API endpoints работают корректно
- База данных: Очистить тестовые данные, подготовить структуру таблиц
- Сетевая инфраструктура: Проверить стабильность WiFi подключения
- Персонализация: Подготовить уникальные идентификаторы для каждой команды
Возможные сложности:
Проблема: Неправильный формат JSON приводит к ошибкам 400 Решение: Подготовить валидатор JSON, показать типичные ошибки
Проблема: Перегрузка сервера при одновременной отправке от всех ESP32 Решение: Настроить разные интервалы отправки для команд, использовать очереди
Проблема: Сложность понимания HTTP кодов ответов Решение: Создать простую таблицу соответствия кодов и их значений
Безопасность и мониторинг:
- Логирование всех API запросов для анализа активности
- Ограничение частоты запросов от одного устройства
- Фильтрация входящих данных от SQL инъекций
- Мониторинг производительности сервера
Дифференциация обучения:
- Для продвинутых: изучение дополнительных HTTP заголовков, аутентификация API
- Для начинающих: фокус на базовой отправке данных, готовые JSON шаблоны
- Для визуалов: диаграммы Client-Server взаимодействия, схемы API архитектуры
- Для практиков: больше времени на эксперименты с кодом и отладку
Расширение урока:
- Добавление аутентификации API (API ключи)
- Изучение WebSocket для real-time коммуникации
- Интеграция с внешними API (погода, время)
- Создание мобильного приложения для мониторинга