Задача · данни · C# (или друг език)

От HTML към JSON

Страницата на нашия профил, kartsov.com/inf, е написана на ръка. Превърни я в данни: програма, която я сваля, извлича всички списъци и ги записва като JSON. После от този JSON ще строим страницата с JavaScript, а по-късно и база данни.

ЗащоСега списъкът със задачи живее само в HTML. Щом стане данни, от него могат да се правят страница, търсачка, статистика, таблица в база данни.

Какво тренираHTTP заявки, структура на HTML документа (DOM), проектиране на данни, JSON, кодировки.

РезултатФайл zadachi-spisak.json, който учителят качва в сайта и зарежда с JavaScript.

Правила

Програмата сваля страницата сама, по HTTP. Не се копира ръчно от браузъра.
HTML се разбира с парсер (например библиотеката AngleSharp за C#), а не с регулярни изрази върху целия текст. Защо? Отговори в етап 2.
JSON-ът следва договорената схема по-долу, защото JavaScript страницата разчита на нея. Ако искаш да добавиш поле, добави го, но не променяй съществуващите.

Схемата

Един раздел = едно заглавие (h3 или h4) със списъка след него. Пример с един раздел и един елемент:

{
  "title": "Профил Информатика",
  "subtitle": "Примери, задачи, първи стъпки в кода",
  "sections": [
    {
      "title": "Първи стъпки в Javascript",
      "level": 3,
      "ordered": true,
      "start": 3,
      "items": [
        {
          "number": 3,
          "text": "Сняг в браузъра",
          "url": "https://www.kartsov.com/inf/snqg_stranica_s_copy.html",
          "type": "html",
          "external": false
        }
      ]
    }
  ]
}

Поле	Значение
level	3 за `h3`, 4 за `h4`
ordered	`true` за `ol`, `false` за `ul`
start	от кое число започва номерацията; `null` при `ul`
number	номерът, който виждаш на екрана пред елемента; `null` при `ul`
url	пълен адрес, винаги с `https://`
type	`"pdf"` или `"html"`, според адреса
external	`true`, ако връзката води извън `kartsov.com/inf`

Етапи

Свали страницата

С HttpClient свали страницата и я запиши във файл. Отвори файла и провери, че кирилицата се чете.

Готово, когато: ако няма интернет или адресът е грешен, програмата казва това с разбираемо съобщение, а не се срива.

Извлечи разделите

Обходи документа отгоре надолу. Всяко h3 или h4 започва нов раздел, а първият ol/ul след него е неговият списък.
Внимавай с номерацията: някои ol имат атрибут start, други не. Какво означава липсващ start?
Изчисти текстовете от излишни интервали и нови редове.
Отговори в две изречения: защо регулярен израз не е надежден начин да се чете HTML?

Запиши JSON

Използвай System.Text.Json с отстъпи, за да се чете лесно от човек.

Капан: по подразбиране .NET записва кирилицата като \u041F\u0440.... Това е валиден JSON, но нечетим. Намери настройката, която записва буквите такива, каквито са.

Готово, когато: файлът се отваря с JSON.parse в конзолата на браузъра без грешка.

Провери се

Програмата отпечатва кратък отчет, който можеш да сравниш със страницата с очите си:

Раздели: …
Елементи общо: …
  [h3] Блоково програмиране          ol  1–2
  [h3] Първи стъпки в Javascript     ol  3–6
  ...
PDF файлове: …   Външни връзки: …

Готово, когато: номерата в отчета съвпадат с номерата, които браузърът показва на страницата.

Обратният път

Направи HTML страница, която зарежда JSON файла с fetch и сама строи заглавията и списъците.

Капан: ако отвориш страницата с двоен клик (file://), fetch няма да работи. Защо? Отвори я през Live Server във VSCode.

Готово, когато: новата страница изглежда като оригиналната по съдържание и номерация.

★ 6

Какво ново?

Пусни програмата пак след седмица. Добави режим --razlika, който сравнява новия JSON със стария и казва кои задачи са добавени, премахнати или преименувани.

★ 7

Към базата данни

Скоро минаваме към SQL. Помисли как тези данни изглеждат като таблици: колко таблици трябват и как се свързват разделите с елементите? Напиши CREATE TABLE за тях и генерирай от JSON-а INSERT заявките.