Мини-проект: приложение на публичном API

01 Задание: выберите вариант

Проект собирается из того, что вы прошли на уроках 13–17: асинхронность, fetch, состояния загрузки, debounce, модули и сборка Vite. Выберите один из трёх вариантов. Все они оцениваются по одним и тем же критериям, а API у всех открытые и не требуют ключа.

Сложность примерно равная: у товаров больше логики поиска, у погоды — разбор вложенного ответа, у пользователей — зависимые запросы. Свою идею на другом открытом API можно предложить, если у него нет ключа, он работает из браузера (CORS) и объём такой же — согласуйте это с преподавателем до начала работы.

Что вы показываете в конце

1. Работающее приложение — открывается без ошибок в консоли, при отключённой сети показывает аккуратную ошибку.
2. Репозиторий на GitHub с кодом на Vite, README и скриншотом; команда npm run build проходит без ошибок.
3. Защита на 5 минут — демонстрация, объяснение кода и ответы на вопросы.
4. Короткий разбор «ИИ в проекте» — раздел 12: где ИИ помог, где увёл в сторону.

02 Требования: MVP и бонусы

MVP — минимальная версия, которая уже работает от начала до конца. Сначала делаем её полностью, и только потом украшения. Проект без MVP не получит высокой оценки, сколько бы бонусов в нём ни было.

MVP — обязательно для всех вариантов

Бонусы — после MVP

• Скелетоны вместо слова «Загрузка…» (серые блоки под карточки).
• Кэш последних запросов: тот же запрос второй раз не ходит в сеть.
• Таймаут запроса через Promise.race или AbortController со своим сообщением.
• История поиска или избранное в localStorage.
• Автоповтор при ошибке: до трёх попыток с паузой.
• Тёмная тема с сохранением выбора.
• Пагинация или кнопка «Показать ещё» (limit и skip у dummyjson).

03 Как оценивается проект (0–100)

Мини-проект оценивается по шкале 0–100, как записано в правилах курса. Оценка складывается из восьми критериев:

Бонусы добавляют до +5 баллов, но итог не может быть больше 100.

Что снимает баллы

• Не можете объяснить свой код — теряете баллы в том критерии, к которому относится непонятная часть.
• Данные «захардкожены» вместо настоящего запроса — критерий «fetch и async/await» получает 0.
• Не сдано в срок — до −10 баллов, по договорённости с преподавателем.
• Код целиком скопирован у другого студента или из чата без понимания — 0 за проект. Помогать друг другу можно и нужно, но каждый пишет и понимает своё.

Как это влияет на итоговую оценку курса

Для сертификата нужно сдать оба мини-проекта. Контрольная №2 — отдельная проверка знаний: она показывает, что вы понимаете асинхронный код без ИИ, и разбирается с преподавателем (см. раздел 11).

04 Декомпозиция: разбиваем проект вместе с ИИ

Проект с API опаснее первого: появились сеть, ожидание и ошибки, которые не воспроизводятся «по заказу». Поэтому план особенно важен. Идея та же, что на уроке 12: сначала шаги, потом код, и у каждого шага — видимый результат. Но теперь в плане должны быть отдельные шаги на каждое состояние (loading, error, empty) и на «рискованные» места: первый запрос, гонка ответов, сборка.

Первый запрос даст случайный набор слов или сразу весь код, который вы не сможете объяснить. Второй — план, с которым можно работать. Но это только черновик. Вот пример плана после вашей правки:

Пример плана для варианта Б (≈ 5 часов)

Что вы делаете с ответом ИИ — по шагам

1. Вычеркните лишнее. «Подключить React», «настроить Redux», «написать свой сервер» — не про наш проект.
2. Проверьте порядок. Нельзя рисовать состояние error раньше, чем есть сам state. Каждый шаг опирается на готовые предыдущие.
3. Оцените время сами. ИИ не знает вашей скорости: умножайте его оценку на 1.5. Шаг длиннее 40 минут — разбейте.
4. Каждый шаг даёт видимый результат. «Разобраться с API» — не шаг. «getWeather("Душанбе") возвращает температуру в консоли» — шаг.
5. Добавьте шаги на «плохую погоду»: Offline, ответ 404, пустой результат. ИИ часто забывает о них — это ваша зона ответственности.
6. Запишите план в PLAN.md и отмечайте выполненное.

const plan = [
  { title: "Разметка и стили", min: 30 },
  { title: "Функция fetch и разбор ответа", min: 40 },
  { title: "Состояния loading / error / empty", min: 40 },
  { title: "Debounce для поиска", min: 25 },
  { title: "Разбивка на модули", min: 30 },
  { title: "Сборка Vite и проверка build", min: 20 },
];

// посчитайте сумму минут и выведите итоговую строку

Всего: 185 мин = 3.1 ч

const plan = [
  { title: "Разметка", min: 20, risky: false },
  { title: "Первый запрос к API", min: 40, risky: true },
  { title: "Обработка ошибок сети", min: 35, risky: true },
  { title: "Стили", min: 25, risky: false },
  { title: "Отмена устаревших запросов", min: 30, risky: true },
];

// отфильтруйте, отсортируйте копию, выведите

Рискованно: Первый запрос к API (40 мин)
Рискованно: Обработка ошибок сети (35 мин)
Рискованно: Отмена устаревших запросов (30 мин)
Рискованных: 3

const plan = [
  { phase: "api", min: 40 },
  { phase: "ui", min: 30 },
  { phase: "api", min: 35 },
  { phase: "build", min: 20 },
  { phase: "ui", min: 25 },
];

// const byPhase = plan.reduce(...)
// console.log(JSON.stringify(byPhase));

{"api":75,"ui":55,"build":20}

05 Разминка 1. Состояния запроса и ошибки сети

Любой запрос в сеть живёт в одном из четырёх состояний: idle (ещё не просили), loading (ждём), success (получили, и данные могут быть как с содержимым, так и пустыми) и error (не получилось). Главное правило: всё это лежит в одном объекте state, а страница рисуется из него, как и в проекте №1.

const state = {
  status: "loading",   // "idle" | "loading" | "success" | "error"
  items: [],           // данные (при success)
  error: "",           // текст ошибки (при error)
};

// для каждого статуса — свой «экран»
const screens = {
  idle: "Введите запрос",
  loading: "Загрузка...",
  success: "Показываем данные",
  error: "Что-то пошло не так",
};
console.log(screens[state.status]);

Чтобы тренироваться без интернета, мы будем подменять сервер своей функцией: она тоже возвращает Promise и отвечает с задержкой — точь-в-точь как fetch, но каждый раз одинаково.

const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

// «сервер» отвечает через 20 мс; на запрос "error" падает
async function fakeApi(query) {
  await wait(20);
  if (query === "error") throw new Error("Сеть недоступна");
  return [`${query} 1`, `${query} 2`];
}

async function main() {
  console.log("запрос...");
  const items = await fakeApi("плов");
  console.log("получили:", items.join(", "));
  try {
    await fakeApi("error");
  } catch (err) {
    console.log("ошибка:", err.message);
  }
}
main();

Настоящий fetch: что нужно проверить после ответа

fetch устроен хитро: он «падает» (отклоняет промис) только если вообще не удалось связаться с сервером — нет сети, не найден домен. А вот ответ 404 Not Found или 500 Server Error — это успешный с точки зрения fetch ответ: сервер ведь ответил! Поэтому после await fetch(...) всегда проверяйте response.ok.

async function getJson(url) {
  const response = await fetch(url);                       // 1. ждём ответ
  if (!response.ok) {                                      // 2. 404 / 500 — тоже ошибка
    throw new Error(`HTTP ${response.status}`);
  }
  return await response.json();                            // 3. ждём разбор JSON
}

async function load() {
  try {
    const data = await getJson("https://jsonplaceholder.typicode.com/users/1");
    console.log(data.name);
  } catch (err) {
    console.log("Ошибка:", err.message);                   // сеть упала ИЛИ статус не 2xx
  }
}

Попробуйте настоящий запрос. Это единственный блок на странице, который ходит в сеть, поэтому у него нет автоматической проверки: результат зависит от API.

async function getJson(url) {
  const response = await fetch(url);
  if (!response.ok) throw new Error(`HTTP ${response.status}`);
  return await response.json();
}

getJson("https://jsonplaceholder.typicode.com/users/1")
  .then((user) => console.log("Пользователь:", user.name))
  .catch((err) => console.log("Ошибка:", err.message));

getJson("https://jsonplaceholder.typicode.com/users/99999")   // такого нет → 404
  .then((user) => console.log("Пользователь:", user.name))
  .catch((err) => console.log("Ошибка:", err.message));

const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
const fakeFetch = async () => { await wait(10); return { ok: true, json: async () => ({ name: "Плов" }) }; };

async function load() {
  const response = fakeFetch();         // забыли await
  const data = await response.json();   // TypeError: response.json is not a function
  console.log(data.name);
}
load().catch((err) => console.log("Ошибка:", err.message));

Читать подробнее: learn.javascript.ru — Fetch · MDN — Response.ok · learn.javascript.ru — try…catch

function getView(state) {
  // допишите
}

const states = [
  { status: "idle", items: [], error: "" },
  { status: "loading", items: [], error: "" },
  { status: "success", items: [], error: "" },
  { status: "success", items: [{ id: 1 }, { id: 2 }], error: "" },
  { status: "error", items: [], error: "Сеть недоступна" },
];
states.forEach((s) => console.log(getView(s)));

Введите запрос
Загрузка...
Ничего не найдено
Найдено: 2
Ошибка: Сеть недоступна

const wait = (ms) => new Promise((r) => setTimeout(r, ms));
const okApi = async (q) => { await wait(10); return [`${q}-1`, `${q}-2`]; };
const badApi = async () => { await wait(10); throw new Error("Сервер упал"); };

// async function loadResults(api, query, onChange) { ... }

const log = (s) => console.log(`[${s.status}] items=${s.items.length} error="${s.error}"`);

async function main() {
  await loadResults(okApi, "плов", log);
  await loadResults(badApi, "плов", log);
}
main();

[loading] items=0 error=""
[success] items=2 error=""
[loading] items=0 error=""
[error] items=0 error="Сервер упал"

const fakeFetch = (url) => new Promise((resolve) => setTimeout(() => {
  if (url.endsWith("/missing")) {
    resolve({ ok: false, status: 404, json: async () => ({ message: "Not Found" }) });
  } else {
    resolve({ ok: true, status: 200, json: async () => ({ title: "Плов" }) });
  }
}, 10));

async function getTitle(url) {
  try {
    const response = fakeFetch(url);
    const data = response.json();
    return data.title;
  } catch (err) {
    return "Ошибка: " + err.message;
  }
}

async function main() {
  console.log(await getTitle("/dishes/1"));
  console.log(await getTitle("/dishes/missing"));
}
main();

Плов
Ошибка: HTTP 404

const delays = { "п": 50, "пл": 10 };
const search = (q) => new Promise((resolve) =>
  setTimeout(() => resolve(`результаты для "${q}"`), delays[q]));

const state = { text: "" };
let latestId = 0;

async function onInput(q) {
  // допишите: номер запроса, await search(q), применить только свежий ответ
  // при применении выведите console.log("применён: " + q)
}

onInput("п");
onInput("пл");
setTimeout(() => console.log(state.text), 100);

применён: пл
результаты для "пл"

06 Разминка 2. Debounce, кэш и таймаут

Если отправлять запрос на каждую нажатую букву, сервер получит десятки лишних обращений, а экран будет мигать. Debounce решает это: функция срабатывает только когда пользователь замолчал на заданное время. Каждый новый вызов сбрасывает таймер и запускает новый.

function debounce(fn, ms) {
  let timer;
  return (...args) => {
    clearTimeout(timer);                           // отменили прошлый таймер
    timer = setTimeout(() => fn(...args), ms);     // запустили новый
  };
}

const search = debounce((q) => console.log("запрос:", q), 30);
search("п");
search("пл");
search("плов");      // сработает только этот вызов, через 30 мс

Модули и сборка: где что лежит

В проекте на Vite код живёт в нескольких файлах — ES-модулях. Каждый файл экспортирует то, что нужно другим (export), и импортирует чужое (import). Хорошее правило границ: api не знает про DOM, ui не знает про сеть, main их соединяет.

product-search/
├─ index.html          ← подключает <script type="module" src="/src/main.js">
├─ package.json        ← скрипты dev / build / preview
├─ src/
│  ├─ api.js           ← только fetch и разбор ответа
│  ├─ ui.js            ← только DOM: render(state)
│  ├─ utils.js         ← debounce и мелкие помощники
│  ├─ main.js          ← состояние, события, связывает всё
│  └─ style.css
└─ dist/               ← появляется после npm run build (в Git не кладём)

export async function searchProducts(query, signal) {
  const url = `https://dummyjson.com/products/search?q=${encodeURIComponent(query)}&limit=10`;
  const response = await fetch(url, { signal });
  if (!response.ok) throw new Error(`HTTP ${response.status}`);
  const data = await response.json();
  return data.products;
}

import { searchProducts } from "./api.js";
import { render } from "./ui.js";
import { debounce } from "./utils.js";

const state = { status: "idle", items: [], error: "" };
// … событие input → debounce(search, 400) → searchProducts → render(state)

npm create vite@latest product-search -- --template vanilla
cd product-search
npm install
npm run dev        # режим разработки, адрес вида http://localhost:5173
npm run build      # собирает проект в папку dist
npm run preview    # открывает собранную версию — проверьте её перед защитой

Читать подробнее: learn.javascript.ru — модули · learn.javascript.ru — Promise API · MDN — AbortController

// function debounce(fn, ms) { ... }

const calls = [];
const search = debounce((q) => { calls.push(q); console.log("запрос:", q); }, 30);

search("п");
search("пл");
search("плов");
console.log("сразу:", calls.length);

setTimeout(() => search("чой"), 80);
setTimeout(() => console.log("всего запросов:", calls.length), 150);

сразу: 0
запрос: плов
запрос: чой
всего запросов: 2

const wait = (ms) => new Promise((r) => setTimeout(r, ms));
let apiCalls = 0;
const api = async (q) => { apiCalls++; await wait(10); return q.toUpperCase(); };

// function makeCached(api) { ... }

const cached = makeCached(api);
async function main() {
  console.log(await cached("Плов"));
  console.log(await cached("  плов "));
  console.log(await cached("чой"));
  console.log("вызовов API:", apiCalls);
}
main();

ПЛОВ
ПЛОВ
ЧОЙ
вызовов API: 2

const apiData = {
  total: 4,
  products: [
    { id: 1, title: "Телефон", price: 2500, rating: 4.46, stock: 5 },
    { id: 2, title: "Наушники", price: 300, rating: 3.9, stock: 0 },
    { id: 3, title: "Чехол", price: 50, rating: 4.8, stock: 20 },
    { id: 4, title: "Зарядка", price: 120, rating: 4.1, stock: 7 },
  ],
};

// function toCards(data) { ... }

const cards = toCards(apiData);
cards.forEach((c) => console.log(c));
console.log(cards.length, apiData.products[0].title);

Чехол — 50 сом. (★ 4.8)
Зарядка — 120 сом. (★ 4.1)
Телефон — 2500 сом. (★ 4.5)
3 Телефон

const wait = (ms) => new Promise((r) => setTimeout(r, ms));
const fast = () => wait(20).then(() => "быстро");
const slow = () => wait(200).then(() => "медленно");

// function withTimeout(promise, ms) { ... }

async function main() {
  for (const fn of [fast, slow]) {
    try {
      console.log(await withTimeout(fn(), 100));
    } catch (err) {
      console.log("Ошибка:", err.message);
    }
  }
}
main();

быстро
Ошибка: Таймаут

07 Чек перед защитой: package.json и сборка

Когда вы выполняете npm run build, Vite находит команду build в разделе scripts файла package.json, собирает все модули в несколько файлов и кладёт их в папку dist. Именно эту папку выкладывают на хостинг. В .gitignore должны быть node_modules и dist: их не нужно хранить в репозитории, они восстанавливаются командами npm install и npm run build.

const text = `{
  "name": "product-search",
  "private": true,
  "scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview" },
  "devDependencies": { "vite": "^7.0.0" }
}`;

// разберите JSON и выведите результат

npm run dev → vite
npm run build → vite build
npm run preview → vite preview
Зависимостей: 1

08 Стартовый шаблон: поиск с состояниями

Ниже — рабочий скелет приложения с поиском в песочнице. Чтобы результат всегда был одинаковым, вместо настоящего сервера в нём «поддельный» (fakeSearch); а рядом лежит realSearch с настоящим fetch — в своём проекте вы подставите его одной строкой. Код разбит на блоки в том порядке, в каком его удобно объяснять на защите: «сервер» → состояние → DOM и отрисовка → поиск → события.

1. «Сервер». Данные и функции, которые возвращают промис: поддельная и настоящая.
2. Состояние. Один объект { status, items, error } и счётчик запросов latestId.
3. Отрисовка. render() строит интерфейс из state. Больше никто DOM не трогает.
4. Поиск. search(query): loading → success или error, устаревшие ответы игнорируются.
5. События. Поле ввода с debounce.

Нажмите ▶ Запустить: самопроверка внизу напечатает, что пока не работает. Ваша задача — четыре отметки TODO.

<main class="app">
  <h1>Поиск товаров</h1>
  <input id="q" placeholder="Например: телефон" autocomplete="off">
  <p id="status" class="status"></p>
  <ul id="results"></ul>
</main>

.app { max-width: 420px; margin: 0 auto; font-family: system-ui, sans-serif; }
h1 { font-size: 22px; margin: 0 0 12px; }
input { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid #c7ccd6; border-radius: 8px; font: inherit; }
.status { color: #5b6477; min-height: 1.4em; }
.status[data-status="error"] { color: #d1344f; }
.status[data-status="loading"] { color: #1f6feb; }
ul { list-style: none; padding: 0; margin: 0; }
li { display: flex; justify-content: space-between; padding: 8px 4px; border-bottom: 1px solid #e6e9f0; }
li .price { color: #5b6477; }

// ===== 1. «Сервер» =====
const PRODUCTS = [
  { id: 1, title: "Телефон Samsung", price: 2500 },
  { id: 2, title: "Телевизор LG", price: 4200 },
  { id: 3, title: "Ноутбук Acer", price: 5100 },
  { id: 4, title: "Наушники Sony", price: 600 },
  { id: 5, title: "Чехол для телефона", price: 50 },
  { id: 6, title: "Зарядка для телефона", price: 120 },
  { id: 7, title: "Клавиатура", price: 180 },
  { id: 8, title: "Мышь", price: 90 },
];
const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

// поддельный сервер: отвечает через 60 мс; на запрос "error" падает
async function fakeSearch(query) {
  await wait(60);
  if (query === "error") throw new Error("Сеть недоступна");
  const q = query.trim().toLowerCase();
  return PRODUCTS.filter((p) => p.title.toLowerCase().includes(q));
}

// настоящий сервер — в своём проекте поменяйте searchApi на него
async function realSearch(query) {
  const url = `https://dummyjson.com/products/search?q=${encodeURIComponent(query)}&limit=10`;
  const response = await fetch(url);
  if (!response.ok) throw new Error(`HTTP ${response.status}`);
  const data = await response.json();
  return data.products;
}
const searchApi = fakeSearch;

// ===== 2. Состояние =====
let state = { status: "idle", items: [], error: "" };   // "idle" | "loading" | "success" | "error"
let latestId = 0;                                        // номер последнего запроса
const DEBOUNCE_MS = 40;

function setState(patch) {
  state = { ...state, ...patch };
  render();
}

// TODO 1: debounce — вызывает fn только после паузы в ms миллисекунд
function debounce(fn, ms) {
  return fn;
}

// TODO 2: текст статуса по состоянию:
// idle → "Введите запрос", loading → "Загрузка...", error → "Ошибка: ТЕКСТ",
// success: пусто → "Ничего не найдено", иначе → "Найдено: N"
function getStatusText(s) {
  return "";
}

// ===== 3. DOM и отрисовка =====
const input = document.querySelector("#q");
const statusEl = document.querySelector("#status");
const list = document.querySelector("#results");

function createItem(product) {
  const li = document.createElement("li");
  const name = document.createElement("span");
  name.textContent = product.title;
  const price = document.createElement("span");
  price.className = "price";
  price.textContent = product.price + " сом.";
  li.append(name, price);
  return li;
}

function render() {
  statusEl.textContent = getStatusText(state);
  statusEl.dataset.status = state.status;
  list.replaceChildren();                                // очистили список
  state.items.forEach((product) => list.append(createItem(product)));
}

// ===== 4. Поиск =====
// TODO 3: пустой запрос (после trim) → setState idle без обращения к серверу.
// Иначе: свой номер запроса, status "loading", await searchApi, потом "success" или "error".
// Если пока ждали, начался новый запрос (номер устарел) — результат выбросить.
async function search(query) {
}

// ===== 5. События =====
// TODO 4: на каждый ввод вызывайте search(input.value), но через debounce(…, DEBOUNCE_MS)
input.addEventListener("input", () => {
});

render();

// ===== Самопроверка для задачи 8.1 (в свой проект не копируйте) =====
(async () => {
  const type = (text) => {
    input.value = text;
    input.dispatchEvent(new Event("input"));
  };
  console.log("старт:", statusEl.textContent);
  type("т"); type("те"); type("тел");
  console.log("сразу после ввода:", statusEl.textContent);
  await wait(70);
  console.log("через 70 мс:", statusEl.textContent);
  await wait(100);
  console.log("ответ:", statusEl.textContent, "|", list.children.length);
  type("zzz");
  await wait(200);
  console.log("пусто:", statusEl.textContent);
  type("error");
  await wait(200);
  console.log("ошибка:", statusEl.textContent);
  type("   ");
  await wait(100);
  console.log("очистили:", statusEl.textContent);
})();

старт: Введите запрос
сразу после ввода: Введите запрос
через 70 мс: Загрузка...
ответ: Найдено: 4 | 4
пусто: Ничего не найдено
ошибка: Ошибка: Сеть недоступна
очистили: Введите запрос

Как перенести шаблон в свой проект

1. Создайте проект на Vite (раздел 06) и разнесите код по модулям: fakeSearch/realSearch — в api.js, debounce — в utils.js, getStatusText и render — в ui.js, состояние и события — в main.js.
2. Каждому файлу добавьте export/import. render теперь принимает state аргументом — глобальные переменные между модулями не ходят.
3. Замените fakeSearch на realSearch и убедитесь во вкладке Network, что запросы настоящие.
4. Удалите блок самопроверки.
5. Если у вас уже есть собственный проект с уроков 15–17 — не выбрасывайте его, а сравните со схемой «состояние → render → search → события».

09 Практика на уроке: ревью, защиты, контрольная

Сегодня занятие устроено иначе, чем обычно: проекты уже почти готовы, поэтому время уходит на проверку, защиту и контрольную. Действуем по плану.

1. 0–10 мин · Последняя проверка. Чек-лист из раздела 07: npm run build, preview, Offline, Slow 3G. Преподаватель утверждает порядок защит.
2. 10–30 мин · Code review в парах. По 10 минут на проект. Ревьюер идёт по чек-листу ниже и записывает замечания, автор слушает. Затем меняетесь.
3. 30–60 мин · Защиты. Каждая — 5 минут плюс минута на смену. Остальные слушают и задают вопросы. Не успели сегодня — защищаетесь в начале следующего занятия.
4. 60–90 мин · Контрольная №2. 30 минут, у всех одновременно, без ИИ. Подробности — в разделе 11. Разбор типичных ошибок — в конце.

Code review: чек-лист ревьюера

Code review — это когда один разработчик читает код другого до того, как он «уйдёт в мир». Не экзамен и не поиск виноватых: свежий взгляд видит то, что автор уже перестал замечать. Формула замечания: где (файл и строка) → что вижу → почему важно → предложение (лучше вопросом).

Читать подробнее: learn.javascript.ru — отладка в браузере

function applyResult(state, result) {
  if (result.error) {
    return { ...state, status: "error", error: result.error };
  }
  return { ...state, status: "success", items: result.items };
}

let s = { status: "idle", items: [], error: "" };
s = applyResult(s, { items: ["плов", "чой"] });
console.log(s.status, s.items.length, JSON.stringify(s.error));
s = applyResult(s, { error: "Сеть недоступна" });
console.log(s.status, s.items.length, JSON.stringify(s.error));
s = applyResult(s, { items: ["самбуса"] });
console.log(s.status, s.items.length, JSON.stringify(s.error));

success 2 ""
error 0 "Сеть недоступна"
success 1 ""

function badge(status) {
  if (status === "loadin") return "⏳ Загрузка";
  if (status === "error") return "⚠ Ошибка";
  if (status === "success") return "✓ Готово";
  return "…";
}

console.log(badge("idle"));
console.log(badge("loading"));
console.log(badge("error"));
console.log(badge("success"));

…
⏳ Загрузка
⚠ Ошибка
✓ Готово

10 Защита: 5 минут, которые решают 15 баллов

Защита — это короткий рассказ о том, что вы сделали и как это работает. Не презентация и не допрос: нужно показать, что проект ваш и вы его понимаете. Поэтому на неё отведено 15 баллов из 100. Здесь вы показываете не только «когда всё хорошо», но и «плохую погоду»: Offline и пустой результат.

Сценарий на 5 минут

Типичные вопросы и о чём на них сказать

Что такое async/await и чем отличается от then?

Это тот же Promise, но код читается сверху вниз. await «ставит функцию на паузу» до ответа, не блокируя страницу.

Почему нужен response.ok? Разве fetch не упадёт на 404?

Нет: fetch отклоняется только при сетевой проблеме. Ответ 404/500 — «успешный», потому что сервер ответил. Статус нужно проверять самому.

Зачем await response.json(), это же уже ответ?

Заголовки пришли, а тело ответа читается отдельно и тоже асинхронно.

Что такое debounce и зачем он здесь?

Функция срабатывает после паузы. Без него каждая буква — запрос: лишняя нагрузка и «мигающий» экран.

Что такое гонка ответов и как ты её решил?

Ответ на старый запрос может прийти позже ответа на новый и затереть его. Решение: номер запроса (применяем только свежий) или AbortController.

Как у тебя устроены состояния?

Один объект state со status, items, error; render рисует из него. Нет набора флагов, которые могут противоречить друг другу.

Что в api.js, что в ui.js, и почему так?

В api.js только сеть, в ui.js только DOM, main.js связывает. Так каждую часть можно менять и проверять отдельно.

Что делает npm run build и что лежит в dist?

Vite собирает модули в готовые для хостинга файлы. В Git dist не кладут: его можно пересобрать.

Где ты использовал ИИ? Объясни эту строку.

Скажите честно, для чего (план, объяснение ошибки, ревью) и где он ошибся — раздел 12. Любую строку нужно объяснить своими словами.

Советы по подготовке

• Прогоните демо вслух с секундомером. Offline включается в DevTools → Network → «No throttling» → Offline.
• Откройте нужные файлы заранее, увеличьте шрифт: группа должна видеть код.
• Уберите лишнее: console.log, закомментированный код.
• Не оправдывайтесь («не успел»). Лучше: «этого нет, потому что… вот как бы я добавил».

const defence = {
  ok: "Проверяю response.ok, потому что ...",
  states: "",
  debounce: "",
  race: "",
  ai: "",
};

console.log(Object.keys(defence).length + " ответов подготовлено");

11 Контрольная №2 · пробная версия

const students = [
  { name: "Алишер", age: 22, address: { city: "Душанбе" } },
  { name: "Мадина", age: 19, address: {} },
  { name: "Фаррух", age: 25, address: { city: "Худжанд" } },
];

// ваш код

Алишер (22) — Душанбе
Мадина (19) — не указан
Фаррух (25) — Худжанд

const prices = { плов: 25, чой: 5, самбуса: 6 };

// ваш код

Сумма: 36
Дороже всего: плов (25)

const orders = [
  { city: "Душанбе", sum: 100 },
  { city: "Худжанд", sum: 80 },
  { city: "Душанбе", sum: 50 },
];

// ваш код

{"Душанбе":150,"Худжанд":80}
Городов: 2

const wait = (ms) => new Promise((r) => setTimeout(r, ms));
const getName = () => wait(10).then(() => "Алишер");

async function greet() {
  const name = getName();
  console.log(`Привет, ${name}!`);
  return name.length;
}

greet().then((len) => console.log("Длина имени:", len));

Привет, Алишер!
Длина имени: 6

const wait = (ms) => new Promise((r) => setTimeout(r, ms));
const api = {
  user: async (id) => { await wait(10); return { id, name: "Мадина", teamId: 7 }; },
  team: async (teamId) => { await wait(10); return { id: teamId, title: "Frontend-17", members: 12 }; },
};

// async function showProfile(id) { ... }

showProfile(1).then(() => console.log("готово"));

Мадина — Frontend-17 (12 чел.)
готово

const delays = { 1: 30, 2: 5, 3: 15 };
const cities = { 1: "Душанбе", 2: "Худжанд", 3: "Бохтар" };
const getCity = (id) => new Promise((resolve) => setTimeout(() => {
  console.log("пришёл", id);
  resolve(cities[id]);
}, delays[id]));

// function loadAll(ids) { ... }

loadAll([1, 2, 3]).then((names) => console.log(names.join(", ")));

пришёл 2
пришёл 3
пришёл 1
Душанбе, Худжанд, Бохтар

const wait = (ms) => new Promise((r) => setTimeout(r, ms));
const fakeFetch = async (url) => {
  await wait(5);
  if (url === "/users") return { ok: true, status: 200, json: async () => [{ name: "Алишер" }] };
  if (url === "/nope") return { ok: false, status: 404, json: async () => ({}) };
  return { ok: false, status: 500, json: async () => ({}) };
};

// async function getJson(url) { ... }

async function main() {
  for (const url of ["/users", "/nope", "/crash"]) {
    try {
      const data = await getJson(url);
      console.log("OK:", data.length);
    } catch (err) {
      console.log("Ошибка:", err.message);
    }
  }
}
main();

OK: 1
Ошибка: HTTP 404
Ошибка: HTTP 500

const wait = (ms) => new Promise((r) => setTimeout(r, ms));
let finished = 0;

// async function safeLoad(task) { ... }

const tasks = [
  async () => { await wait(5); return [1, 2, 3]; },
  async () => { await wait(5); throw new Error("Сервер недоступен"); },
  async () => { await wait(5); throw new TypeError("Неверный формат"); },
];

async function main() {
  for (const task of tasks) {
    const result = await safeLoad(task);
    console.log(result.ok ? `данные: ${result.data.length}` : `${result.name}: ${result.error}`);
  }
  console.log("завершено:", finished);
}
main();

данные: 3
Error: Сервер недоступен
TypeError: Неверный формат
завершено: 3

const wait = (ms) => new Promise((r) => setTimeout(r, ms));
let attempt = 0;
const flaky = async () => {
  attempt++;
  await wait(5);
  if (attempt < 3) throw new Error(`сбой ${attempt}`);
  return "данные получены";
};
const alwaysBad = async () => { throw new Error("навсегда"); };

// async function retry(fn, times) { ... }

async function main() {
  console.log(await retry(flaky, 5));
  try {
    await retry(alwaysBad, 2);
  } catch (err) {
    console.log("Не вышло:", err.message);
  }
}
main();

Попытка 1
Попытка 2
Попытка 3
данные получены
Попытка 1
Попытка 2
Не вышло: навсегда

const wait = (ms) => new Promise((r) => setTimeout(r, ms));
const withTimeout = (promise, ms) => Promise.race([
  promise,
  new Promise((_, reject) => setTimeout(() => reject(new Error("Таймаут")), ms)),
]);

const apis = {
  ok: async () => { await wait(10); return [1, 2, 3]; },
  empty: async () => { await wait(10); return []; },
  slow: async () => { await wait(300); return [1]; },
  bad: async () => { await wait(10); throw new Error("Сеть недоступна"); },
};

// async function load(api, onChange) { ... }

async function main() {
  for (const name of ["ok", "empty", "slow", "bad"]) {
    const log = [];
    await load(apis[name], (status) => log.push(status));
    console.log(name + ": " + log.join(" > "));
  }
}
main();

ok: loading > success:3
empty: loading > empty
slow: loading > error:Таймаут
bad: loading > error:Сеть недоступна

12 Разбор: где ИИ сэкономил время, а где увёл в сторону

Это AI-блок урока: после двух проектов важно не просто «пользоваться ИИ», а знать его настоящую цену. Часто кажется, что ИИ ускорил работу, а потом вы час искали баг в чужом, непонятном коде. Бывает наоборот: ИИ за три минуты объяснил то, на что вы потратили бы вечер. Чтобы отличать одно от другого, нужны не ощущения, а записи.

Структурированный разбор: шаблон

Выберите 3–5 эпизодов из проекта, где вы обращались к ИИ. Для каждого заполните одну строку таблицы. Пример (вариант Б, погода):

А теперь — шаблон для вашего README. Скопируйте его и заполните своими эпизодами:

## ИИ в проекте: где помог, где увёл в сторону

### Эпизод 1: <что делал>
- Что просил (коротко): …
- Что получил: …
- Итог: ✅ сэкономил / ⚖ частично / ❌ увёл в сторону
- Минуты: сэкономил … / потерял …
- Как проверил результат: …
- Вывод для себя (правило): …

### Эпизод 2: …

## Итог
- Где ИИ реально сэкономил время: …
- Где он увёл в сторону и почему я не заметил сразу: …
- Что я теперь делаю иначе: …

Три вопроса для самопроверки

1. Могу ли я объяснить этот код построчно? Если нет — это долг: вы взяли чужое и не поняли. Либо разберите, либо перепишите.
2. Как я узнал, что ответ ИИ правильный? «Заработало» — слабая проверка. Хорошая: сломал нарочно (Offline, 404, пустой запрос) и убедился, что поведение осмысленное.
3. Что бы я сделал без ИИ — и сколько бы это стоило? Честная оценка помогает понять, где выгода реальна, а где — самообман.

Типичные «увели в сторону» в проектах с API

Читать подробнее: MDN — отладка JavaScript

const episodes = [
  { task: "разметка карточек", saved: 25, lost: 0 },
  { task: "запрос к API", saved: 15, lost: 10 },
  { task: "debounce", saved: 10, lost: 0 },
  { task: "обработка ошибок", saved: 5, lost: 40 },
  { task: "README", saved: 15, lost: 0 },
];

// посчитайте и выведите четыре строки

Сэкономил: 70 мин
Потерял: 50 мин
Итого: +20 мин
Главная ловушка: обработка ошибок

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

Доработайте проект по замечаниям ревью и защиты, оформите разбор «ИИ в проекте» и сделайте работу над ошибками по контрольной.

Что нужно сделать

• ☐ Исправить замечания ревью и защиты, которые вы приняли.
• ☐ Проверить все пункты MVP из раздела 02 и пройти чек-лист ревьюера по своему проекту ещё раз; npm run build без ошибок.
• ☐ Убрать лишние console.log, закомментированный код и мёртвые функции.
• ☐ Дописать в README раздел «ИИ в проекте» по шаблону из раздела 12 (3–5 эпизодов и итог — своими словами).
• ☐ Обновить репозиторий: публичный, README со скриншотом, не менее 5 осмысленных коммитов, node_modules и dist не загружены.
• ☐ Работа над ошибками: каждую задачу пробной контрольной, которую вы не решили или решили с ошибкой, решите заново и объясните своими словами, в чём была ошибка (1–2 предложения в комментарии).

Что сдать

Ссылку на репозиторий в чат группы (Telegram). В сообщении напишите: вариант проекта (А, Б или В), какое API использовали, что добавили после ревью, какой бонус сделали, и список задач контрольной, которые переделывали.

Как оценивается ДЗ (0–10)

Это оценка за домашнее задание урока (0–10). Оценка за мини-проект (0–100) выставляется по таблице из раздела 03 и учитывается отдельно.