04 Claude Code и настоящие приложения
Результат: у каждого приложение из нескольких файлов, которое запоминает данные.
Главное открытие: Claude умеет работать как программист прямо в папке проекта.
- 10минДемоСписок покупок в Claude Code
- 10минПриёмыПлан до кода, статус проекта
- 30минМладшийКоллекционер или таймер
- 30минСтаршаяТрекер привычек или планировщик
- 10минРелизПриложение на телефонах
Подготовка до занятия
- Claude Code установлен и запускается: во вкладке Code десктопного приложения Claude или в терминале.
- Для каждого проекта своя пустая папка, например «Курс/Коллекция» и «Курс/Трекер».
- Крупный шрифт, чтобы было видно с дивана.
- Компьютер и телефоны в одной сети Wi-Fi.
Чем Claude Code отличается от чата
Обычный Claude отвечает в чате. Claude Code работает как программист в папке проекта: сам создаёт файлы, запускает их, читает ошибки и чинит. Каждое действие он показывает, а на важные спрашивает разрешение.
Цикл работы, который повторяем весь урок:
- Задача: что хотим получить.
- План: Claude рассказывает, что сделает.
- Код: Claude пишет файлы.
- Проверка: открываем и пробуем сами.
- Правка: одна за раз, и снова план.
Демо: приложение из трёх файлов
Взрослый открывает пустую папку в Claude Code и вводит один запрос. Дети смотрят, как в папке появляются файлы.
Создай в этой папке маленькое приложение «Список покупок»: отдельные файлы index.html, style.css и app.js. Можно добавлять и вычёркивать пункты, список сохраняется после закрытия. Когда закончишь, запусти его и покажи мне в браузере.
После запуска открыть app.js и попросить Claude показать строку, где список сохраняется. Закрыть вкладку, открыть снова: пункты на месте.
Приёмы занятия
1. Сначала план
Главный первый запрос в Claude Code. План читаем вслух, дети правят, потом: «План хороший, делай».
Вот техзадание: [вставь техзадание].
Сначала расскажи план простыми словами, код не пиши.2. Статус проекта
В конце каждого круга. Это детская версия приёма «Апдейт для руководителя». Читает «заказчик», тот, кто не собирал: понятно ли, что сделано.
Сделай из того, что мы сделали, короткий статус для заказчика. Короткие предложения. Прогресс / препятствия / следующие шаги.
Младший: коллекционер или таймер-тренер
Выбирает одно из двух. Обе заготовки начинаются с плана.
Вот техзадание. Сначала расскажи план простыми словами, код не пиши.
Приложение «Моя коллекция» для [что я собираю].
Карточка предмета: название, цвет или фото, редкость, дата, заметка.
Фильтр по редкости и поиск по названию. Счётчик «всего в коллекции».
Данные сохраняются в браузере, после закрытия всё на месте.
Отдельные файлы: index.html, style.css, app.js. Удобно на телефоне.Вот техзадание. Сначала расскажи план простыми словами, код не пиши.
Приложение «Тренер» для [вид спорта]: интервальный таймер.
Я задаю упражнения и время, приложение ведёт тренировку сигналом
и показывает, что сейчас и что дальше. История тренировок сохраняется.
Отдельные файлы: index.html, style.css, app.js. Крупные кнопки, удобно на телефоне.Идеи для следующих кругов:
- редкая карточка светится;
- скачать коллекцию в файл;
- свой звук на смену упражнения;
- достижение за 10 тренировок.
Старшая: трекер привычек или планировщик учёбы
Вот техзадание. Сначала расскажи план простыми словами, код не пиши. Трекер привычек: добавляю привычки и каждый день отмечаю, что сделала. Серия дней подряд для каждой привычки, календарь месяца, статистика за неделю. Данные хранятся в браузере (localStorage), есть кнопка «Скачать копию» в файл. Отдельные файлы, минималистичный дизайн, тёмная тема, удобно на телефоне.
Вот техзадание. Сначала расскажи план простыми словами, код не пиши. Планировщик учёбы: предметы, задания со сроками, отметка «сделано». Экраны «Сегодня», «Неделя» и список просроченного. Сколько заданий закрыто за неделю, по предметам. Данные хранятся в браузере, есть кнопка «Скачать копию». Отдельные файлы, минималистичный дизайн, тёмная тема, удобно на телефоне.
Проверка качества
Обязательный шаг для старшей: проверить приложение по чек-листу.
Составь чек-лист из 10 проверок для этого приложения. Для каждой: что нажать и что должно получиться. Обязательно проверки на пустые поля, очень длинный текст и перезагрузку страницы.
Пройти чек-лист руками на телефоне. Что не сработало, оформить баг-репортом из занятия 3.
Релиз
Попросить Claude Code открыть приложение для телефонов в домашней сети.
Запусти приложение так, чтобы его можно было открыть с телефона в нашей домашней сети. Напиши адрес, который нужно ввести на телефоне.
Данные на телефоне хранятся отдельно от компьютера. Это нормально: у каждого устройства своя память браузера.
Готово, когда
Закрыли и открыли приложение, а данные на месте.