Зачем?
Ну иногда я ищу и перебираю кучи аналогов, а там везде то мало, то много, то чего-то не хватает.
Самому это всё писать времени не хватит, а если нейросеть сможет по твоему ТЗ написать в точности то что тебе нужно, то почему бы не попробовать?

Первое, что я захотел сделать - это такие веб-приложения, которые одинаково хорошо и с компьютера и с телефона, с любого устройства через браузер…
И мне по дому достаточно много такого нужно - таск листы, замена всяких табличек, каталогизация систем хранения (балкон, кладовка, коробки).

• Python 3.12 (или 3.13)
• Flask - фреймворк (или fastapi)
• Стилизация UI через Twitter Bootstrap (или Materialize)
• База данных sqlite (будем делать однопользовательские приложения, иначе - mysql или postgresql)

Далее, нужно описать некие требования, без которых нейросеть напишет нам непонятную кашу, а не приложение

• Все изменяемые пользователем и приложением данные хранятся в папке app_data (это для Docker)
• Базу данных храним в файле db.sqlite
• Файл конфигурации будет в формате JSON в файле config.json
• В приложение происходит авторизация, логин хранится в конфигурационном файле, пароль тоже, только он хранится в виде хеша sha256
• Секретный ключ для сессий flask подбирается случайным образом при старте приложения app.secret_key = os.urandom(32)
• Весь html код вынесен в шаблоны в подпапку /tpl
• В шаблонах избегаем использования встроенных стилей или скриптов, все стили размещаем в папку /static/css, а скрипты в папке /static/js
• Если при старте приложения нет файла конфигурации, то создаем с логином и паролем admin/admin
• Если при старте приложения отсутствует файл с базой данных - создаем пустую базу
• Приложение должно работать одинаково хорошо и на мобильных устройствах и на обычных компьютерах

Достаточно примитивное, но полезное приложение, пошел за хлебушком - накидал что жена просит купить, вспомнил на работе то что нужно вечером не забыть сделать - плюсанул…
Наше приложение будет работать на личном облаке, будет доступно со всех наших устройств, итак, поехали!

Сперва опишем базовые требования, которые выше определили, с небольшими корректировками эту часть промпта можно переносить между нашими приложениями

Реализуй мне кроссбраузерное веб-приложение на Python TODO List
Применяемые технологии: Python 3.12, фреймворк Flask, стилизация UI через Materialize, база данных на sqlite.


Все изменяемые пользователем и приложением данные хранятся в папке app_data (это для Docker)
Базу данных храним в файле db.sqlite
Файл конфигурации будет в формате JSON в файле config.json
В приложение происходит авторизация, логин хранится в конфигурационном файле, пароль тоже, только он хранится в виде хеша sha256
Секретный ключ для сессий flask подбирается случайным образом при старте приложения app.secret_key = os.urandom(32)
Весь html код вынесен в шаблоны в подпапку /tpl
В шаблонах избегаем использования встроенных стилей или скриптов, все стили размещаем в папку /static/css, а скрипты в папке /static/js
Если при старте приложения нет файла конфигурации, то создаем с логином и паролем admin/admin
Если при старте приложения отсутствует файл с базой данных - создаем пустую базу
Приложение должно работать одинаково хорошо и на мобильных устройствах и на обычных компьютерах


Интерфейс на русском языке.

А дальше опишем логику самого приложения

В базе данных хранятся списки (lists) и задачи (tasks).
В верхнем меню должен быть заголовок todo list и кнопка выхода (без текста, просто иконкой).
Ширина всей страницы ограничена 1000px и страница отцентрована.
Левое меню содержит сами списки, но на мобильном устройстве это меню сворачивается в бутерброд (три полосочки).
В левом меню есть плюсик чтобы создать новый список и сами списки по которым можно кликать.
Далее сами задачи, они выполнены в виде списка, где слева есть элемент за который можно перетаскивать задачи для сортировки, чуть правее есть элемент где ставится галочка, когда поставил галочку - задача должна перечеркнуться.
Справа от каждой задачи есть корзина чтобы удалить эту задачку.
Снизу в конце списка есть поле ввода, оно добавляет в конец списка задачу при нажатии кнопки enter, важно чтобы это работало через ajax, т.е. без перезагрузки страницы, когда я нажал Enter, то задача добавилась и поле очистилось.
Теперь заголовок списка, сверху над списком задач есть его название, например "что купить".
Там же сверху есть корзинка, которая удаляет весь список и все его задачи. Еще там есть карандашик который позволяет переименовать список, это реализовано через contentEditable = "true"; при нажатии карандашика фокус должен вставать в этот заголовок.

Ну и в финале пишем завершающий промпт для дальнейшего взаимодействия

Сделай мне bash скрипт, который создаст все папки и файлы и заполнит эти файлы содержимым

Я просто открываю GitBash в нужной папке и создаю там скрипт, потом выполняю…

Теперь можно попробовать открыть проект в vscode и стартануть…
Но еще одно сообщение чат-боту, чтобы настроить с ним взаимодействие

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

Но он не только сказал хорошо , но и сразу правки прислал)))

Думаете с первого раза запустилось? Нет!

Я просто копирую из терминала vscode всю трассировку ошибки и кидаю ему без дополнительных слов, он дает мне обновленный файл, я копирую и снова запускаю

И вот перед нами заветная форма ввода..

Когда авторизовался, то снова ошибки, снова кидаю ему трейс

Мы получили какое-то подобие, на бутстрапе у меня с первого раза получалось, а с этим ui впервые работаю…

• + Списки создаются и удаляются
• +/- Список переименовывается, но только при клике по заголовку, кнопка карандашик не работает
• Задачи создаются и удаляются через AJAX
• Жирный минус с левым меню, оно не скрывается, на мобильной версии оно перед списком, а вот на десктопной перекрывает сами задачи
• Кнопка с плюсиком деформировалась
• Задачи не сортируются…

Попробуем это исправить

Дальше еще и еще, потом не работала сортировка на мобилках, только на десктопе, я попросил его использовать библиотеку sortable, вместо jquery ui.