# Веб-приложение без программиста: ИИ-нейросеть для HTML-файла онлайн

> Источник: https://aliviy.io/html-app/
> Обновлено: 2026-10-15
> Сервис: Аливия (aliviy.io) — онлайн ИИ-чат на русском языке.

## Что такое приложение в одном HTML-файле

**Приложение в одном HTML-файле**  — это программа, у которой разметка, оформление и логика лежат в одном файле с расширением .html. Его открывают двойным щелчком в любом браузере — на компьютере или телефоне, без установки, сервера и регистрации. Данные такое приложение хранит в памяти браузера.

Для многих личных и рабочих задач этого хватает: трекер привычек, учёт расходов, калькулятор стоимости заказа, тест для сотрудников, журнал тренировок. Раньше для этого приходилось искать готовый сервис и мириться с его ограничениями или просить знакомого программиста. Теперь достаточно описать задачу словами: нейросеть Аливии напишет код, а вы проверите результат прямо на странице.

Этот инструмент отличается от генератора [HTML-разметки для сайта](https://aliviy.io/html/). Там — вёрстка блоков для готового сайта. Здесь — работающая программа под вашу задачу: с кнопками, расчётами и сохранением данных.

## Какие приложения реально собрать в одном файле?

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

| Тип приложения | Пример | Что хранит | Где упрётся в ограничения |
| --- | --- | --- | --- |
| Трекер | Привычки, вода, сон, тренировки | Отметки по датам | Нет синхронизации между телефоном и компьютером |
| Учёт | Расходы, показания счётчиков, выданный инструмент | Список записей с суммами | Несколько человек не смогут вносить данные в один учёт |
| Калькулятор | Стоимость заказа, раскрой материала, норма корма | Обычно ничего или последние настройки | Почти не упирается — лучший кандидат для первого опыта |
| Тест или тренажёр | Проверка знаний, карточки слов | Результаты прохождений | Ответы видны в коде — для экзамена с контролем не годится |
| Планировщик | Список дел, план поездки, таймер | Задачи и их статусы | Напоминания работают, только пока страница открыта |

Если нужны вход по паролю, общие данные для команды, приём оплаты или рассылка уведомлений, одного файла мало: понадобится сервер. В этом случае полезнее сначала описать продукт в [техническом задании для разработчика](https://aliviy.io/technical-specifications/), а для уведомлений в мессенджере посмотреть [Telegram-бота под ключ](https://aliviy.io/telegram-bot-builder/).

## Как сделать приложение: пошагово

1. **Опишите задачу в конструкторе.**  Что приложение должно делать, какие экраны в нём есть, какие поля вводит человек и что нужно хранить. Конструктор под чатом соберёт из этого техническое задание для одного HTML-файла с хранением данных в браузере.
2. **Отправьте задание в чат.**  Нейросеть ответит кодом файла целиком и короткой инструкцией: как сохранить и как открыть.
3. **Запустите предпросмотр.**  Скопируйте код из ответа и вставьте в окно предпросмотра под чатом. Приложение откроется в изолированной рамке прямо на странице.
4. **Попробуйте его как пользователь.**  Добавьте записи, закройте и откройте снова, введите пустые и слишком длинные значения.
5. **Попросите правки.**  «Кнопка удаления слишком близко к кнопке сохранения», «добавь итог за неделю» — нейросеть пришлёт обновлённый файл целиком.
6. **Сохраните файл.**  Вставьте код в любой текстовый редактор и сохраните с расширением .html, например `habits.html`. Откройте его в браузере — это и есть ваше приложение.

> Готовая формулировка запроса: «Сделай приложение учёта расходов в одном HTML-файле. Поля: дата, сумма, категория из списка (еда, транспорт, дом, другое), комментарий. Экран со списком за текущий месяц и итогом по категориям. Данные храни в localStorage. Добавь кнопки экспорта и импорта в JSON. Вёрстка под телефон, крупные кнопки».

### Как описать задачу, чтобы код получился с первого раза

Нейросеть не видит, как вы работаете сейчас, поэтому опишите не только функции, но и обстановку. Хорошее описание отвечает на четыре вопроса.

- **Кто и где пользуется.**  «Я сама, с телефона, одной рукой в магазине» даёт совсем другую вёрстку, чем «бухгалтер за компьютером».
- **Что вводится.**  Поля и их тип: дата, сумма в рублях, выбор из списка, свободный текст.
- **Что нужно увидеть.**  Итог за неделю, график, список просроченного, процент выполнения.
- **Что важно не сломать.**  Например, «случайно удалить запись нельзя» или «старые записи не редактируются».

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

## Где хранятся данные и как их не потерять

Приложения на этой странице сохраняют данные в `localStorage` — хранилище браузера. По документации MDN у данных в localStorage нет срока истечения, а ключи и значения хранятся строками, поэтому записи переживают закрытие вкладки и перезагрузку компьютера. Списки и объекты нейросеть превращает в строку формата JSON и обратно.

У хранилища есть пределы, о которых стоит знать заранее:

- **Объём.**  Браузеры отводят до 5 МиБ localStorage на один источник; при переполнении возникает ошибка QuotaExceededError. Для текста это тысячи записей, для фотографий — очень мало, поэтому картинки в таком приложении лучше не хранить.
- **Режим инкогнито.**  Данные приватного окна удаляются, когда закрывается последняя приватная вкладка.
- **Файл с диска.**  Для страниц, открытых по адресу `file:`, поведение localStorage не определено стандартом и может различаться между браузерами. На практике у каждого файла своё хранилище: переименовали или переместили файл — приложение может открыться пустым.
- **Очистка браузера.**  Удаление данных сайтов стирает и записи приложения.

> Типичная ошибка — неделями вести учёт в приложении без резервной копии. Одна очистка истории, и записи пропали. Всегда просите у нейросети кнопки «Экспорт» и «Импорт» в файл JSON или CSV и сохраняйте копию хотя бы раз в неделю. Пароли и данные карт в таком приложении не храните: localStorage не предназначен для секретов.

## Почему предпросмотр работает в изолированном окне

Код из ответа нейросети запускается в рамке `iframe` с атрибутом `sandbox`. По описанию MDN, пустое значение sandbox включает все ограничения, а отдельные разрешения вроде allow-scripts снимают их по одному. Так приложение может выполнять свои скрипты, но не получает доступа к странице Аливии и вашим данным на ней.

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

## Как проверить приложение перед тем, как им пользоваться

Нейросеть пишет рабочий код, но проверяет его человек. Пройдите короткий список — он ловит большинство проблем.

1. **Перезагрузка.**  Добавьте три записи, закройте вкладку, откройте файл снова. Записи на месте — хранение работает.
2. **Пустой ввод.**  Нажмите «Сохранить» с пустыми полями. Приложение должно подсказать, а не создать пустую строку.
3. **Числа.**  Введите сумму с запятой, «1 500» с пробелом и отрицательное число. Итог не должен превратиться в NaN.
4. **Телефон.**  Откройте файл на телефоне или сузьте окно: кнопки не должны наезжать друг на друга.
5. **Экспорт и импорт.**  Выгрузите данные, очистите хранилище, загрузите обратно — всё должно вернуться.
6. **Удаление.**  Проверьте, что удаляется ровно одна запись и есть подтверждение.

Если захочется разобраться в коде и дописать что-то самому, отдельные функции удобно обсуждать в генераторе [скриптов на JavaScript](https://aliviy.io/javascript/). Аливия работает круглосуточно и без VPN из России, понимает русский и принимает файлы — можно прислать свой HTML-файл и попросить доработку. Длинные диалоги с правками расходуют дневной лимит, у платных тарифов он больше.

## Веб-приложение без программиста: частые вопросы

Можно ли создать приложение без знания программирования?
Да, для простых задач. Опишите словами, что должно делать приложение, — нейросеть напишет HTML-файл, а предпросмотр на странице его запустит. Нужно уметь только скопировать код и сохранить файл.
Нужно ли что-то устанавливать?
Нет. Приложение — это файл .html, который открывается в любом современном браузере на компьютере или телефоне. Сервер, хостинг и установка не нужны.
Где хранятся мои данные?
В localStorage браузера на том устройстве, где вы открыли файл. На другое устройство они сами не попадут — для переноса используйте экспорт и импорт в JSON.
Почему после переноса файла данные пропали?
Для файлов, открытых с диска, браузеры обычно выделяют хранилище по адресу файла. Переименовали или переместили файл — адрес изменился, и хранилище для него новое. Сначала сделайте экспорт, потом переносите.
Можно ли открыть приложение на телефоне?
Да. Отправьте файл себе в мессенджер или сохраните в облако и откройте браузером. Попросите нейросеть сразу сделать вёрстку под телефон: одна колонка и крупные кнопки.
Можно ли сделать приложение для нескольких человек?
В одном HTML-файле — нет: у каждого будут свои данные в своём браузере. Для общего учёта нужен сервер или хотя бы общая Google Таблица, это уже другой уровень задачи.
Безопасно ли запускать код в предпросмотре?
Предпросмотр работает в изолированной рамке с атрибутом sandbox: скрипты приложения выполняются, но не получают доступа к странице Аливии. Код всё равно стоит читать хотя бы бегло, если вы будете вводить в приложение что-то важное.
Что делать, если приложение работает с ошибкой?
Опишите в чате, что сделали и что увидели, или откройте консоль браузера (F12) и скопируйте текст ошибки. Нейросеть пришлёт исправленный файл целиком, чтобы не собирать куски вручную.
Можно ли опубликовать приложение в интернете?
Да, HTML-файл можно разместить на любом хостинге статических страниц. Но данные по-прежнему будут храниться у каждого посетителя в его браузере, а не на сервере.
Чем это отличается от генератора HTML?
Генератор HTML делает разметку блоков для сайта. Здесь собирается работающая программа под задачу: с вводом данных, расчётами, сохранением и проверкой в предпросмотре.

## Итог

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