“Full stack с ИИ”

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

Рассмотрим роль ИИ в разработке: какие задачи можно поручать Codex и почему разработчику необходимо понимать созданный код, проверять результат и принимать решения. Покажем готовое приложение, чтобы обозначить результат, к которому учащиеся будут двигаться на протяжении курса.

В практической части установим Codex и познакомимся с базовым взаимодействием с инструментом.

По завершении урока учащиеся смогут объяснить устройство простого full stack приложения, понимать роль каждой его части и будут готовы начать работу над собственным проектом с помощью Codex.

В этом уроке учащиеся узнают, как подготовить задачу перед генерацией кода. Разберём, почему общего запроса «сделай приложение» недостаточно и какие сведения помогают ИИ создавать результат, соответствующий ожиданиям.

На примере «Кинотеки» определим назначение приложения, основные пользовательские сценарии и границы первой версии. Опишем список фильмов, форму добавления и правила работы с данными. Отдельно рассмотрим неоднозначные требования и способы их уточнения.

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

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

В этом уроке учащиеся приступят к созданию пользовательской части приложения. Разберем назначение HTML, CSS и JavaScript, а также связь между структурой страницы, её оформлением и реакцией на действия пользователя.

С помощью Codex создадим первую версию интерфейса «Кинотеки». На этом этапе приложение будет использовать тестовые данные без подключения к серверу. Такой подход позволит отдельно проверить внешний вид страницы и основные сценарии взаимодействия.

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

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

В этом уроке учащиеся познакомятся с назначением бэкенда и принципами взаимодействия клиента с сервером. Разберём, что такое API, из чего состоит запрос и как сервер возвращает результат его обработки.

С помощью Codex создадим сервер на FastAPI и добавим операции получения списка фильмов, создания и изменения записи. Рассмотрим передачу данных в формате JSON и проверку входных значений.

В практической части запустим сервер и протестируем API через страницу документации /docs. Проверим корректные запросы и разберём ответы на ошибочные данные, чтобы научиться оценивать работу бэкенда независимо от интерфейса.

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

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

Познакомимся с SQLite и основными понятиями реляционной базы данных: таблицей, строкой, столбцом и первичным ключом. Определим структуру хранения фильмов и с помощью Codex подключим базу к существующему API.

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

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

В этом уроке учащиеся объединят ранее созданные части «Кинотеки» в одно работающее приложение. Разберём, как фронтенд отправляет HTTP-запросы, получает ответы сервера и обновляет интерфейс.

С помощью Codex подключим загрузку списка фильмов и отправку формы добавления к API. Рассмотрим состояния загрузки, успешного выполнения и ошибки, чтобы пользователь понимал результат своих действий.

Отдельно разберём CORS и причины, по которым браузер может блокировать обращение к серверу с другого адреса. Научимся находить запросы в инструментах разработчика и проверять, какие данные отправляет и получает фронтенд.

По завершении урока учащиеся получат связанное full stack приложение: фильм, добавленный через форму, будет сохраняться в базе и отображаться в списке. Учащиеся смогут проследить путь данных между интерфейсом, API и хранилищем.

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

На специально подготовленных поломках «Кинотеки» разберём, где искать информацию: в консоли браузера, сетевых запросах и выводе сервера. Научимся отличать проблемы интерфейса от ошибок API и работы с данными.

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

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

В этом уроке учащиеся закрепят работу со всеми частями приложения на примере новых возможностей. Определим правила выставления оценки и поведение статуса «просмотрено», а затем опишем ожидаемый результат для пользователя.

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

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

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

Полное описание

В этом уроке учащиеся познакомятся с процессом публикации full stack приложения. Разберём, чем работа на локальном компьютере отличается от запуска на хостинге и какие настройки необходимо подготовить для новой среды.

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

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

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

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

Научимся оценивать замечания ИИ: проверять их связь с реальным поведением приложения, отличать существенные проблемы от косметических предложений и определять порядок исправлений. Обсудим ограничения учебного проекта и вопросы, которые необходимо решить перед использованием приложения с реальными пользователями и данными.

Подведем итоги полного цикла разработки и составим ориентиры для дальнейшего обучения: основы программирования, HTTP и API, базы данных, тестирование и безопасность. Обсудим, какие знания помогают осознанно управлять ИИ-инструментами и самостоятельно разбираться в созданном коде.

По завершении урока учащиеся смогут проводить первичное ревью проекта с помощью ИИ, проверять предложенные улучшения и определять следующие шаги в развитии приложения и собственных навыков разработчика.