Skip to main content

📡 Простая отправка данных на школьный сервер

🎯 Цели и планируемые результаты урока

Предметные результаты:

  • Понимание архитектуры 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 теперь умеет…”

🏠 Домашнее задание

📊 “Домашний мониторинг данных”

Основное задание:

  1. Наблюдение за своими данными

    • Проверять свою персональную страницу дома
    • Записывать интересные изменения в данных
    • Анализировать графики и тренды
  2. Эксперименты с кодом

    • Изменить интервал отправки данных
    • Добавить новое поле в JSON (например, “mood”: “отличное”)
    • Попробовать отправить данные о других “измерениях”
  3. Дневник 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

🔍 Методические заметки для учителя

Подготовка к уроку:

  1. Настройка сервера: Убедиться, что все API endpoints работают корректно
  2. База данных: Очистить тестовые данные, подготовить структуру таблиц
  3. Сетевая инфраструктура: Проверить стабильность WiFi подключения
  4. Персонализация: Подготовить уникальные идентификаторы для каждой команды

Возможные сложности:

Проблема: Неправильный формат JSON приводит к ошибкам 400 Решение: Подготовить валидатор JSON, показать типичные ошибки

Проблема: Перегрузка сервера при одновременной отправке от всех ESP32 Решение: Настроить разные интервалы отправки для команд, использовать очереди

Проблема: Сложность понимания HTTP кодов ответов Решение: Создать простую таблицу соответствия кодов и их значений

Безопасность и мониторинг:

  • Логирование всех API запросов для анализа активности
  • Ограничение частоты запросов от одного устройства
  • Фильтрация входящих данных от SQL инъекций
  • Мониторинг производительности сервера

Дифференциация обучения:

  • Для продвинутых: изучение дополнительных HTTP заголовков, аутентификация API
  • Для начинающих: фокус на базовой отправке данных, готовые JSON шаблоны
  • Для визуалов: диаграммы Client-Server взаимодействия, схемы API архитектуры
  • Для практиков: больше времени на эксперименты с кодом и отладку

Расширение урока:

  • Добавление аутентификации API (API ключи)
  • Изучение WebSocket для real-time коммуникации
  • Интеграция с внешними API (погода, время)
  • Создание мобильного приложения для мониторинга