understanding captive new portal

hello, I am once again messing around with my NodeMCu 8266 board and i got to the example topic “DNS Server” and subtopic “Captive portal”.

From what I read online from sites like https://www.hackster.io/rayburne/esp8266-captive-portal-5798ff
Where it says, Connect to this ESP8266 WiFi Access Point and redirect all browser traffic DNS requests to the embedded web server address.

So pretty much I am setting the Nodemcu to AP mode, Then when i go to my wifi setting on my phone and connect to the device, I have no internet, I am only able to go to the IP address set In the Arduino code and it brings me to a page where it says “Hello World” all request will be redirected here.

Can some explain to me in a easy to understand way how all of this works and what is the practical purpose? I have read the article that i have linked and still dont fully understand, but i do get how a DNS server works.

Here is the code

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

const byte DNS_PORT = 53;
IPAddress apIP(192, 168, 1, 1);
DNSServer dnsServer;
ESP8266WebServer webServer(80);

String responseHTML = ""
                      "<!DOCTYPE html><html><head><title>CaptivePortal</title></head><body>"
                      "<h1>Hello World!</h1><p>This is a captive portal example. All requests will "
                      "be redirected here.</p></body></html>";

void setup() {
  WiFi.mode(WIFI_AP);
  WiFi.softAPConfig(apIP, apIP, IPAddress(255, 255, 255, 0));
  WiFi.softAP("DNSServer CaptivePortal example");

  // if DNSServer is started with "*" for domain name, it will reply with
  // provided IP to all DNS request
  dnsServer.start(DNS_PORT, "*", apIP);

  // replay to all requests with same HTML
  webServer.onNotFound([]() {
    webServer.send(200, "text/html", responseHTML);
  });
  webServer.begin();
}

void loop() {
  dnsServer.processNextRequest();
  webServer.handleClient();
}

I’m not sure exactly what part you want to know the practical purpose of.

The sketch itself has no practical purpose other than to demonstrate how you can create a captive portal.

The practical purpose of a captive portal is that it makes things easier for the user. Without the captive portal, the user would need to open 192.168.1.1 in their browser to load the web page. That adds an extra step to the process and gives another chance for the user to make a mistake or get confused.

If you want to see an example of a practical use of a captive portal on ESP8266, check out this library: