Kierunek Informatyka
Instrukcja do ćwiczeń laboratoryjnych nr:		4	Nazwa przedmiotu: Aplikacje mobilne i wbudowane
Temat: Komunikacja z układem esp8266 poprzez protokół HTTP				Tryb studiów: stacjonarne
				Czas trwanie ćw. 2x45 min
Autor materiałów: dr Marcin Skuba

1. Treści programowe:

Protokół http, metody komunikacji GET, POST, webserwer, POSTMAN

2. Cel zajęć:

Celem zajęć jest zapoznanie studentów z tematyką komunikacji zdalnej z urządzeniem mikroprocesorowym esp8266 poprzez protokół http.

3. Materiały dydaktyczne

I. Protokół HTTP

Wiadomość HTTP składa się z dwóch głównych części: nagłówków oraz ciała (body). Nagłówki dostarczają metadane, takie jak typ i długość zawartości, informacje autoryzacyjne czy kontrola cache. W przypadku metody HEAD serwer zwraca wyłącznie nagłówki, bez treści.

Struktura wiadomości HTTP

Nagłówki:

• Żądania (Request Headers): Zawierają m.in. metodę (GET, POST, HEAD), adres URL, dane uwierzytelniające (Authorization), preferowane formaty odpowiedzi (Accept, Accept-Encoding) oraz informacje o treści przesyłanej przez klienta (Content-Type, Content-Length).
• Odpowiedzi (Response Headers): Przekazują status odpowiedzi (np. 200 OK, 404 Not Found), typ i rozmiar zwracanej treści, dane o serwerze (Server), autoryzacji

Ciało (Body):

• Żądania: Zawiera dane wysyłane do serwera, np. zawartość formularza przy POST, pliki w PUT czy inne przesyłane treści.
• Odpowiedzi: Dostarcza właściwą zawartość zwracaną przez serwer, np. stronę HTML dla GET, plik do pobrania lub dane przetworzone w odpowiedzi na POST.

Przykładowe nagłówki:

• Content-Type: Format danych (np. text/html, application/json).
• Content-Length: Rozmiar treści.
• Authorization: Dane uwierzytelniające.
• Cookie: Przesyłane ciasteczka.
• Host: Adres serwera.
• User-Agent: Aplikacja wysyłająca żądanie (np. przeglądarka).

Nagłówki odpowiadają za metadane wiadomości, natomiast ciało zawiera właściwą treść. W przypadku metody HEAD zwracane są wyłącznie nagłówki, bez ciała odpowiedzi.

- PROTOKÓŁ HTTP – OPIS, METODY

- KODY ODPOWIEDZI HTTP

-----------------------------------------------------------------------

I. Program inicjujący połączenie wifi w układzie ESP8266

#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>

const char* ssid = "nazwa_sieci";
const char* password = "hasło";

ESP8266WebServer server(80);

void setup() {

Serial.begin(115200);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
  }
Serial.println("\nPołączono! IP: " + WiFi.localIP().toString());
}
void loop() {
}

II. Przykładowy program przedstawia definiowanie dwóch endpointów obsługiwanych z zewnątrz do zarządzania wyjściem cyfrowym.

Włączanie i wyłączanie (np. diody) odbywa się poprzez wywołanie odpowiedniej funkcji (przykład bez parametrów) :

.

Domyślnie ESP8266 nie ustawia nagłówków CORS, więc przeglądarka odrzuca odpowiedź dlatego należy dodać: server.sendHeader("Access-Control-Allow-Origin", "*");

Rejestracja endpointu wyświetlającego domyślny tekst bez tworzenie metody

III. Przykładowy program przedstawia definiowanie jednego endpointu z parametrem do włączania i wyłączania diody.

Drugi endpoint bezargumentowy wysyła informacje o stanie wyjścia

.

Zapytanie przesłane z przeglądarki internetowej. Możliwe tylko dla zapytania GET.

Zapytanie GET – włączające i wyłączające diodę utworzone w programie POSTMAN

IV. Przykład przedstawiający komunikację http metodą GET oraz POST

Pobieranie listy nagłówków

Kod pozwalający używanie nazwy urządzenia zamiast adresu IP, np.:

Zamiast:

Jest:

V. Kod strony internetowej utworzonej w oddzielnym pliku, w którym umieszczono skrypt JavaScript przedstawiający sposób obsługi odpowiedzi z/do układu esp8266. Przykład dla programu (pierwszego) bez parametrów :

- Plik HTML

Modyfikacja funkcji do wysyłania danych metodą POST

VI. Przykład programu na urządzenie esp8266 wysyłające całą stronę np. do przeglądarki internetowej (webserwer)

- Kod programu

- inne rozwiązanie

4. Zadania

Zadanie 1.

Napisz program włączający i wyłączający dwie diody. Polecenia wysyłaj z przeglądarki internetowej (http) metodą GET oraz programu POSTMAN. Użyj parametrów, które pozwolą sterować od razu dwoma diodami.

Zadanie 2.

Napisz program obsługujący przełącznik podłączony do dowolnego wejścia cyfrowego. Utwórz funkcjonalność pozwalającą na odpytywanie stanu przełącznika zdalnie (HTTP) metodą GET z przeglądarki internetowej oraz programu POSTMAN. Komunikacja bez parametrów.

Zadanie 3.

Napisz program, który pozwoli na odbieranie ciągu znaków (tekstu) przesłanych z programu POSTMAN metodą POST. Pobrany tekst wyświetl w konsoli ArduinoIDE.

Zadanie 4.

Napisz stronę internetową pozwalającą sterować diody z zadania nr 1. W programie powinny być dwie opcje do wyboru pozwalające wybrać kolejne diody oraz przycisk wysyłający stan kontrolek.

Zadanie 5.

Napisz program na mikrokontroler działający jak serwer Web generujący stronę www (zwracający stronę do klienta). Funkcje strony jak w zadaniu powyżej.