Для первого проекта в этой книге я выбираю форму заявки. На ней видно, умеет ли сайт выполнять действие: принимать корректные данные, объяснять ошибку и давать человеку повторить попытку. Такой пример можно проверить локально до подключения платных сервисов.
Бриф до первого экрана
В брифе запишите, кто пользуется страницей, что он должен сделать и что считается успешным результатом. Для нашего учебного сайта человек вводит имя, email и сообщение. После отправки он получает явное подтверждение. При ошибке введённые данные сохраняются.
Граница проекта тоже записана заранее: сервер работает на этом компьютере и возвращает учебный ответ. Он не сохраняет реальные заявки, не отправляет письма и не подключает CRM. Подключение этих функций потребует отдельной реализации и проверки.
Промпт: Подготовить бриф сайта
Внешний вид можно задавать референсами и правилами проекта. Для нашего примера выбраны светлый фон, одна карточка формы и один основной акцент. Это собственное учебное оформление. Навык дизайна не устанавливался, сравнение дизайнерских инструментов на этом примере не проводилось.
Все состояния формы
Начните с пустого экрана, затем проверьте каждое обязательное поле. Сообщение об ошибке должно объяснять следующее действие. «Ошибка 400» полезна разработчику в журнале, а посетителю нужна подсказка о конкретном поле.
Не ограничивайтесь проверкой в браузере. Запрос можно отправить прямо на сервер, минуя интерфейс. Поэтому учебный сервер также отвергает отсутствие обязательных данных и неверный email. Проверка email в примере упрощена; она не доказывает существование адреса.
Во время отправки кнопка отключается. Это помогает избежать повторного нажатия в текущем интерфейсе, но не обеспечивает серверную защиту от повторных операций. Для платежей и других действий с последствиями нужен отдельный механизм, рассмотренный в главе об интеграциях.
Промпт: Сделать и проверить учебную форму
Этот промпт подготовлен по фактически выполненному разбору. Отдельный запуск именно этого текста в новой задаче ещё не проведён.
Повторить опыт из книги
В архиве «Учебный сайт - форма заявки» находятся index.html, server.py, инструкция и результаты. Требуется Python 3. Запускайте проект из отдельной учебной папки:
python3 server.py
Если в Windows Python доступен через launcher, соответствующая команда:
py -3 server.py
Windows-команда приведена для среды с установленным launcher, здесь не испытана. В браузере откройте http://127.0.0.1:8767/. Если порт занят, не останавливайте неизвестную программу: измените номер порта в учебном сервере и откройте новый адрес.
Введите синтетические данные. Для ошибки включите «Смоделировать ошибку сервера», отправьте форму и проверьте сохранение всех полей. Затем отключите переключатель и повторите отправку. Сервер должен подтвердить успех. Для остановки вернитесь в терминал и нажмите Ctrl+C.
Список выполненных проверок:
| Проверка | Фактический результат |
|---|---|
| Пустое имя | Отправка отклонена, показана подсказка |
| Неверный email | Отправка отклонена, показана подсказка |
| Пустое сообщение | Отправка отклонена, показана подсказка |
| Учебный ответ HTTP 503 | Поля сохранились, кнопка снова доступна |
| Повтор после ошибки | Успех, поля очищены |
| Ширина 390 пикселей | Элементы видны, ширина документа равна ширине экрана |
| Прямой запрос без полей | HTTP 400 |
| Прямой запрос с неверным email | HTTP 400 |
| Прямой запрос в режиме ошибки | HTTP 503 |
| Прямой корректный запрос | HTTP 200 с подтверждением |
Это реальные снимки локального примера. Узкий экран проверен изменением размера браузера, физический телефон не использовался. Показатель ширины не заменяет полную проверку доступности.
Что добавить перед настоящим запуском
Определите место хранения заявок, срок хранения, права доступа и получателя уведомлений. Подключите выбранный сервис через серверную часть. Проверьте фактическое появление заявки у получателя и поведение при недоступности этого сервиса.
Учебный сервер не готов к публичной эксплуатации: в нём нет хранения, защиты от спама, авторизации и полного набора проверок входа. Не публикуйте его как готовую систему приёма клиентских данных.
Хостинг, домен, тестовую публикацию и выпуск рабочего сайта разберём в главе 11. До этого этапа сохраните бриф, версию проекта и журнал проверок. Тогда при подключении внешней системы будет видно, какое поведение уже работало локально.
Магазин, личный кабинет и SaaS
Для многостраничного сайта сначала составьте карту страниц и переходов. Для магазина добавьте товар, количество, корзину, состояние заказа и оплату. Цена и доступность должны проверяться сервером: значение в браузере можно изменить.
Для личного кабинета проверьте данные двух пользователей. SaaS, приложение как услуга, добавляет правила тарифа и обслуживания. Создание красивого экрана ещё не подтверждает выдачу оплаченного доступа.
Промпт: Расширить сайт одним пользовательским путём
