Веб-приложение против обычного веб-сайта: в чём разница и как проектировать на практике?

[Ryancoolround]

Здравствуйте!
Вы получили задание создать веб-приложение с использованием нескольких фреймворков и технологий. Основой должно служить отображение актуальной информации о здоровье, получаемой через HHS API (U.S. Department of Health & Human Services).
Возникает вполне уместный и логичный вопрос:

Раз приложение отображает данные из API, не является ли оно просто веб-сайтом? В чём вообще разница между веб-приложением и обычным сайтом?

1. Веб-сайт и веб-приложение: ключевые различия

Критерий	Веб-сайт	Веб-приложение
Основное назначение	Отображение информации	Взаимодействие с пользователем
Тип данных	Чаще статичные (HTML, CMS)	Динамичные, с реакцией на действия пользователя
Логика на клиенте	Минимальная	Развитая, на JavaScript-фреймворках
Пример	Блог, справочный сайт	Онлайн-калькулятор, чат, CRM
Использование БД	Необязательно	Почти всегда присутствует

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

Данное различие подробно рассмотрено в этой теме на IP-Gamers.NET, где подчёркивается историческая эволюция: от статичных сайтов Web 1.0 к интерактивным системам Web 2.0 и далее.

2. Использование HHS API: сайт или приложение?

HHS API — это набор открытых API. Они позволяют получить данные по темам:

• Заболеваемость
• Медицинские учреждения
• Профилактика и вакцинация
• Доступ к медицинским услугам

Надеюсь на нашем родном Госвеб рано или поздно введут такой сервис как предоставление API.

Само по себе отображение этих данных на странице делает ваш проект информационным.
Но если вы реализуете:

• выбор региона,
• поиск по ключевым словам,
• динамическую фильтрацию,
• возможность сохранить результаты или историю,

то это уже функционал веб-приложения.

Примеры:

Сценарий	Тип
Статическое отображение списка клиник из API	Веб-сайт
Пользователь выбирает фильтры, сортирует, добавляет в избранное	Веб-приложение

3. Архитектура веб-приложения: практический план

Ваш проект должен продемонстрировать использование разных технологий и фреймворков. Это типичное учебное или практическое задание, целью которого является отработка взаимодействия компонентов.

Базовая архитектура:

1. Frontend:

• Фреймворк: React, Vue или Svelte
• Динамическая загрузка данных из API
• Обработка пользовательского ввода (поиск, фильтры, сортировка)
• UI-компоненты: карточки, списки, кнопки, формы

2. Backend:

• Node.js + Express / PHP / Python Flask
• API-прокси (кэширование, фильтрация, трансформация данных)
• Контроль доступа (если требуется)

3. База данных (опционально):

• MySQL / PostgreSQL / MongoDB
• Хранение пользовательской истории, избранных клиник и предпочтений

4. Дополнительно:

• Авторизация через Yandex / email
• Админ-панель для управления контентом (например, через Strapi или кастомный CRUD)
• Логирование обращений к API

4. Мини-проект: пример реализации

Название: HealthInfo Finder
Функции:

• Поиск клиник по городу или области
• Сортировка по типу услуги или рейтингу
• Сохранение избранного
• Авторизация для персонализации

Стек:

• Frontend: React (с Axios для API-запросов)
• Backend: Node.js (Express-прокси для HHS API)
• БД: SQLite (для демонстрации хранения)

Функционал фронтенда:

• Компоненты: <SearchBox />, <ClinicList />, <Favorites />
• Работа с REST API
• Обработка загрузки, ошибок, состояния пустого результата

5. Советы по реализации

• Начните с проектирования интерфейса (прототип в Figma или схематично на бумаге).
• Составьте список компонентов и API-запросов.
• Реализуйте сначала минимально жизнеспособную версию (MVP).
• Постепенно добавляйте интерактивность, хранилище, улучшения UI/UX.

Вывод

Вы работаете над веб-приложением, если ваш проект:

• реагирует на действия пользователя;
• обновляет интерфейс без полной перезагрузки;
• использует данные из API динамически;
• содержит бизнес-логику или хранение состояния на клиенте или сервере.

Если же ваш проект просто отображает неизменяемую информацию, полученную от HHS API — это информационный веб-сайт.

[Ryancoolround]

Вот кстати простейший пример небольшого, очень минималистичного WEB приложения. Пример доступен по ссылке: https://z1z.org/imt/

<?php
$result = '';
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    // Применяем фильтрацию и проверку ввода
    $weight = filter_input(INPUT_POST, 'weight', FILTER_VALIDATE_FLOAT);
    $height = filter_input(INPUT_POST, 'height', FILTER_VALIDATE_FLOAT);

    // Проверяем, что данные корректны
    if ($weight !== false && $height !== false && $weight > 0 && $height > 0 && $weight < 500 && $height < 300) {
        // Расчёт ИМТ
        $bmi = round($weight / (($height / 100) ** 2), 2);

        // Определение статуса ИМТ
        if ($bmi < 18.5) {
            $status = 'Недовес';
        } elseif ($bmi < 25) {
            $status = 'Норма';
        } elseif ($bmi < 30) {
            $status = 'Избыточный вес';
        } else {
            $status = 'Ожирение';
        }

        // Выводим результат
        $result = "Ваш ИМТ: $bmi — $status";
    } else {
        // В случае некорректных данных
        $result = "Введите корректные значения веса и роста.";
    }
}
?>
    <style>

        .container {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            padding: 20px;
            width: 300px;
            text-align: center;
        }

        h2 {
            color: #333;
            font-size: 1.5em;
            margin-bottom: 20px;
        }

        form {
            display: flex;
            flex-direction: column;
        }

        label {
            margin-bottom: 10px;
            font-size: 1em;
            color: #555;
        }

        input[type="number"] {
            padding: 10px;
            margin: 5px 0 15px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 1em;
        }

        button {
            background-color: #4CAF50;
            color: white;
            padding: 10px 15px;
            border: none;
            border-radius: 4px;
            font-size: 1em;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        button:hover {
            background-color: #45a049;
        }

        p {
            font-size: 1.1em;
            font-weight: bold;
            color: #333;
        }

        .error {
            color: #ff4444;
        }

        .result {
            color: #4CAF50;
        }
    </style>
    <div class="container">
        <h2>Калькулятор индекса массы тела (ИМТ)</h2>
        <form method="post">
            <label>Вес (кг): <input type="number" name="weight" step="0.1" required max="500"></label>
            <label>Рост (см): <input type="number" name="height" step="0.1" required max="300"></label>
            <button type="submit">Рассчитать</button>
        </form>

        <?php if ($result): ?>
            <p class="<?= strpos($result, 'Введите') !== false ? 'error' : 'result' ?>"><?= htmlspecialchars($result, ENT_QUOTES, 'UTF-8') ?></p>
        <?php endif; ?>
    </div>

Это рабочий прототип — онлайн-калькулятора ИМТ (индекса массы тела),

Что делает этот калькулятор?

• Принимает ввод пользователя: вес и рост;
• Валидирует данные (в диапазоне, в нужном формате);
• Выполняет арифметический расчёт;
• Отображает результат на той же странице, без редиректа;
• Показывает статус ИМТ (недовес, норма, избыточный вес, ожирение).

Это не статическая страница, а динамический компонент, реализованный на PHP и HTML/CSS.

Признаки веб-приложения в примере

Признак	Наличие в проекте
Обработка пользовательского ввода	✅ Да
Валидация и логика на сервере	✅ Да
Динамический вывод результата	✅ Да
Интерактивное поведение страницы	✅ В рамках форм
Отображение бизнес-логики (расчёт)	✅ Да

Таким образом, мы делаем вывод — это веб-приложение, хоть и минималистичное.

Почему это веб-приложение, даже если оно маленькое?

Веб-приложение — это не обязательно что-то большое, сложное или использующее десятки фреймворков.
Это любой веб-интерфейс, реализующий:

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

И наш пример с ИМТ попадает под это определение.

Отличие от обычного веб-сайта

Если бы по адресу /imt/ просто находился текст вида:

Цитата

ИМТ = масса (кг) / (рост в метрах)^2
Ниже 18.5 — недовес
От 18.5 до 25 — норма

…это был бы информационный сайт.

Но мы создали интерактивный интерфейс, который делает расчёты на сервере. Следовательно — это уже динамическое веб-приложение, пусть и без использования JavaScript-фреймворков или SPA-моделей.