Самый короткий путь к первому приложению с ИИ заключается не в магазине приложений, а в маленьком PWA, которое работает в браузере и может устанавливаться на устройство. Мы соберём трекер трёх привычек. Кнопки будут хранить сегодняшние отметки в localStorage, а manifest задаст имя, иконку и отдельное окно. Это честный мобильный прототип, который можно улучшать дальше.
Запрос «сделай приложение как популярный сервис» слишком велик для первого проекта. В нём одновременно появляются экраны, регистрация, база, уведомления, синхронизация и публикация в магазинах. Сузьте задачу до одного ежедневного действия. Пользователь открывает трекер, отмечает воду, прогулку и чтение, закрывает его, а после повторного открытия видит отметки этого дня. Такая версия уже даёт законченный цикл и остаётся понятной начинающему.
Один экран, три привычки и сохранение только на текущем устройстве.
HTML рисует список, JavaScript меняет состояние и записывает его локально.
Manifest и HTTPS позволяют поддерживающему браузеру предложить установку PWA.
Какой тип приложения мы создаём с ИИ
PWA остаётся веб-приложением: оно построено на HTML, CSS и JavaScript и выполняется браузером. После установки поддерживающий браузер может показывать его отдельным окном и добавить иконку на устройство. Это не то же самое, что нативная программа из Swift или Kotlin, и не автоматическая публикация в App Store или Google Play. Зато один проект сразу открывается по ссылке и подходит для проверки идеи.
| Вариант | Что нужно | Подходит для первого трекера |
|---|---|---|
| Обычная веб-страница | HTML, CSS, JavaScript, URL | Да, но открывается как сайт |
| PWA | Веб-код, manifest, иконки, HTTPS | Да, может устанавливаться |
| Нативное приложение | Swift для iOS или Kotlin для Android | Позже, если нужны возможности платформы |
| Конструктор | Визуальный редактор и правила сервиса | Быстро, но меньше контроля над кодом |
Один пользовательский цикл проще проверить, чем десять экранов без работающего состояния.
Пишем экран и сохранение привычек
Создайте index.html. Ключ хранилища включает текущую дату, поэтому у каждого дня своё состояние. При нажатии кнопка переключает значение, сохраняет объект и обновляет подпись. ИИ удобно просить объяснить функции readState, saveState и render отдельно: тогда вы увидите путь данных от клика до экрана.
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="manifest" href="manifest.webmanifest">
<meta name="theme-color" content="#4f46e5">
<title>Три шага</title>
<style>
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; padding: 24px; font: 18px/1.4 system-ui;
color: #17203d; background: #eef2ff; }
main { width: min(480px, 100%); margin: 40px auto; }
.habit { width: 100%; margin: 10px 0; padding: 20px; border: 2px solid #c7d2fe;
border-radius: 20px; background: white; color: inherit; font: inherit; text-align: left; }
.habit.done { border-color: #16a34a; background: #dcfce7; }
.mark { float: right; font-weight: 700; }
</style>
</head>
<body>
<main>
<p id="date"></p>
<h1>Три шага на сегодня</h1>
<button class="habit" data-id="water">Выпить воду <span class="mark"></span></button>
<button class="habit" data-id="walk">Пройтись 20 минут <span class="mark"></span></button>
<button class="habit" data-id="read">Прочитать 10 страниц <span class="mark"></span></button>
</main>
<script>
const today = new Date().toISOString().slice(0, 10);
const storageKey = 'habits:' + today;
const state = JSON.parse(localStorage.getItem(storageKey) || '{}');
document.querySelector('#date').textContent = 'Дата: ' + today;
function saveState() {
localStorage.setItem(storageKey, JSON.stringify(state));
}
function render(button) {
const done = Boolean(state[button.dataset.id]);
button.classList.toggle('done', done);
button.querySelector('.mark').textContent = done ? 'Готово' : 'Отметить';
button.setAttribute('aria-pressed', String(done));
}
document.querySelectorAll('.habit').forEach((button) => {
render(button);
button.addEventListener('click', () => {
state[button.dataset.id] = !state[button.dataset.id];
saveState();
render(button);
});
});
</script>
</body>
</html>- Нажатая привычка становится зелёной, получает подпись «Готово» и значение
aria-pressed="true". - После перезагрузки отметка остаётся, потому что объект записан в
localStorageдля текущего origin. - На следующий день изменится ключ вида
habits:2026-09-15, и экран начнёт новый список отметок.
Клик меняет объект, запись сохраняет его, а render отражает состояние на экране.
Добавляем manifest и условия установки
Рядом с HTML создайте manifest.webmanifest и две PNG-иконки 192 на 192 и 512 на 512 пикселей. В HTML уже есть ссылка rel="manifest". Для Chromium-браузеров manifest должен содержать имя или короткое имя, иконки, стартовый адрес и режим отображения. Публиковать приложение нужно по HTTPS; для локальной проверки подходит localhost или 127.0.0.1. Интерфейс установки зависит от браузера и системы.
| Поле manifest | Пример | Зачем нужно |
|---|---|---|
name | Три шага | Полное название приложения |
short_name | Привычки | Короткая подпись у иконки |
start_url | ./ | Адрес при запуске установленного приложения |
display | standalone | Запрос отдельного окна без обычной адресной строки |
icons | PNG 192 и 512 px | Иконки для интерфейса установки и системы |
theme_color | #4f46e5 | Цвет поддерживаемых элементов браузера и системы |
Практика: превращаем трекер в PWA
Соберите проект маленькими слоями. Сначала подтвердите сохранение без manifest, затем добавьте метаданные и иконки, после этого откройте через сервер. Не просите ИИ одновременно создавать дизайн, базу, авторизацию и уведомления. Каждая из этих функций добавляет отдельное состояние и отдельный источник ошибок.
- Создайте
index.html, отметьте две привычки и обновите страницу. Обе отметки должны сохраниться. - Откройте Application или Storage в DevTools и найдите ключ текущей даты в Local Storage.
- Создайте manifest с именем,
start_url: "./",display: "standalone", цветами и двумя иконками. - Запустите в папке
python -m http.server 8000и откройтеhttp://localhost:8000. - Проверьте manifest в DevTools: браузер должен загрузить файл и обе иконки без 404.
- Опубликуйте папку по HTTPS и откройте адрес на телефоне. Найдите установку или добавление на главный экран в меню браузера.
- Запустите приложение с иконки, измените отметку, полностью закройте окно и откройте снова.
- Три кнопки удобно нажимаются на ширине 360 пикселей, подписи не обрезаются.
- Состояние текущего дня переживает перезагрузку и повторный запуск.
- Manifest и иконки загружаются без ошибок, а приложение доступно по HTTPS.
- Если браузер поддерживает установку и выполнены его критерии, трекер запускается с иконки в отдельном режиме.
Рабочий экран, сохранение и установка проверяются отдельно, поэтому причина сбоя остаётся видимой.
Где чаще всего ломается приложение, созданное с ИИ
ИИ хорошо связывает знакомые API, но не видит ваш реальный браузер, адрес публикации и содержимое DevTools. Он может предложить устаревший критерий установки, абсолютный путь, которого нет на проде, или серверную функцию без сервера. Возвращайте в диалог точные данные: URL файла, HTTP-статус, текст ошибки и ожидаемое действие.
Одна отметка меняет несколько кнопок. Значение data-id должно быть уникальным для каждой привычки.
Интерфейс может работать, но установка и поведение origin проверяются через локальный сервер или HTTPS.
Manifest загружается, однако запросы icon-192.png и icon-512.png возвращают 404.
Данные остаются внутри конкретного origin и профиля браузера. На другом устройстве появится пустое состояние.
Сначала завершите локальный ежедневный цикл. Затем проектируйте разрешения, сервер и защиту данных отдельными задачами.
display: standalone выражает предпочтение. Реальный интерфейс зависит от поддержки браузера, системы и того, действительно ли приложение установлено. Технические детали сверены с руководством MDN по установке PWA.Это настоящее мобильное приложение?
Это веб-приложение PWA. Поддерживающий браузер может установить его на устройство, но оно продолжает работать на веб-технологиях.
Где хранятся отметки?
В localStorage текущего origin и профиля браузера. Между устройствами они не синхронизируются.
Зачем в ключе дата?
Чтобы новый день получал отдельный объект отметок и не перезаписывал предыдущий.
Что нужно для установки?
Manifest с нужными полями, подходящие иконки, HTTPS или localhost и браузер, который поддерживает установку.
Обязателен ли service worker?
Многие PWA используют его для офлайн-режима, но требования установки зависят от браузера. Для этого урока сначала проверяется manifest и основной сценарий.
Закрепите работу с событиями и объектами в курсе JavaScript, а мобильную сетку в курсе CSS. Привычки удобно расширить формой, которую вы уже встретите в проекте списка задач.
Перед следующей версией прочитайте что происходит после запуска мобильного приложения, проверьте адаптивность интерфейса и не переносите токены в браузер, о чём напоминает разбор мобильной безопасности. Хаб об устройстве приложений и сайтов поможет выбрать следующий стек.