Предисловие
У любого последователя создания nocode сайтов может возникнуть проблема: хочу создать то‑то, но у сервиса нет этой функции, при этом сервис прекрасный: хорошая цена, обширная функциональность, доступность эксклюзивных функций и т. д. То есть менять на другой нет смысла, но того что я хочу — нет.
Этот рассказ о том, как я пытался решить эту проблему и что из этого вышло.
Описание проблемы
Я пользуюсь WIX, который занимает первое место во многих рейтингах nocode создавальщиков сайтов. У меня есть сайт, где предлагаются различные услуги, цена которых зависит от нескольких опций, а к ним можно применить скидку. Скидки разные: некоторые можно суммировать, а некоторые — нет. Также доступны пакетные покупки, которые накладывают дополнительные скидки.
Я хочу, чтобы пользователь мог быстро узнать итоговую цену со скидками для каждого продукта. При этом ему должно быть видно, сколько он сэкономил на пакетной покупке и других акциях
1. Пробую опции
Я взял базовый промпт для начальной генерации и задал разным ИИ (бесплатным версиям на тот момент) вот результаты и мое мнение:
Промпт:создай код для сайта чтобы клиент мог рассчитать примерную цену сессии с учётом скидок и других опций. Добавь какое-то красивое оформление.
-
Рекомендуется Claude очень хорошо генерирует скелет и стили сайта, с новым предпросмотрщиком сайтов Artifacts ещё и можно моментально увидеть изменения не скачиваю файл. Вот сайт Artifacts который получился: https://claude.site/artifacts/3c60167e-c34f-491c-a476-14d03d8e6508
Вот код от Claude
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Калькулятор цены сессии</title> <style> body { font-family: 'Arial', sans-serif; line-height: 1.6; color: #333; max-width: 800px; margin: 0 auto; padding: 20px; background-color: #f4f4f4; } h1 { color: #2c3e50; text-align: center; } .calculator { background-color: #fff; border-radius: 8px; padding: 20px; box-shadow: 0 0 10px rgba(0,0,0,0.1); } label { display: block; margin-bottom: 5px; color: #2c3e50; } input[type="number"], select { width: 100%; padding: 8px; margin-bottom: 15px; border: 1px solid #ddd; border-radius: 4px; } button { background-color: #3498db; color: #fff; border: none; padding: 10px 15px; border-radius: 4px; cursor: pointer; font-size: 16px; transition: background-color 0.3s; } button:hover { background-color: #2980b9; } #result { margin-top: 20px; font-weight: bold; font-size: 18px; color: #2c3e50; } </style> </head> <body> <h1>Калькулятор цены сессии</h1> <div class="calculator"> <label for="basePrice">Базовая цена сессии (руб):</label> <input type="number" id="basePrice" min="0" value="1000"> <label for="duration">Длительность сессии (минуты):</label> <input type="number" id="duration" min="30" step="30" value="60"> <label for="discount">Скидка (%):</label> <input type="number" id="discount" min="0" max="100" value="0"> <label for="options">Дополнительные опции:</label> <select id="options" multiple> <option value="100">Аренда оборудования (+100 руб)</option> <option value="200">Дополнительный специалист (+200 руб)</option> <option value="150">Расширенный отчет (+150 руб)</option> </select> <button onclick="calculatePrice()">Рассчитать цену</button> <div id="result"></div> </div> <script> function calculatePrice() { const basePrice = parseFloat(document.getElementById('basePrice').value); const duration = parseFloat(document.getElementById('duration').value); const discount = parseFloat(document.getElementById('discount').value); const options = Array.from(document.getElementById('options').selectedOptions).map(option => parseFloat(option.value)); let totalPrice = basePrice * (duration / 60); totalPrice += options.reduce((sum, option) => sum + option, 0); totalPrice *= (100 - discount) / 100; document.getElementById('result').textContent = `Итоговая цена: ${totalPrice.toFixed(2)} руб`; } </script> </body> </html> Что мне ответил Claude
Конечно, я создам код для сайта с калькулятором цены сессии, включая скидки и дополнительные опции. Я также добавлю красивое оформление с использованием HTML, CSS и JavaScript. Вот код для такого интерактивного веб-приложения:
Калькулятор цены сессии
Click to open website
Этот код создает простой, но функциональный и стильный веб-сайт с калькулятором цены сессии. Вот краткое описание его функций:
-
Пользователь может ввести базовую цену сессии.
-
Можно выбрать длительность сессии (с шагом в 30 минут).
-
Есть возможность указать скидку в процентах.
-
Пользователь может выбрать дополнительные опции, которые увеличивают стоимость.
-
После нажатия кнопки «Рассчитать цену» скрипт вычисляет итоговую стоимость с учетом всех параметров.
Дизайн сделан в современном минималистичном стиле с использованием приятной цветовой схемы. Сайт адаптивен и будет хорошо выглядеть как на десктопе, так и на мобильных устройствах.
Вы можете скопировать этот код и сохранить его в файл с расширением .html, затем открыть его в любом веб-браузере. Если вы хотите внести какие-либо изменения или добавить дополнительные функции, я с радостью помогу вам это сделать.
-
ChatGPT очень хорошо вносит изменения в файл и улучшает сам проект (например добавляет в файл HTML возможность подтягивать данные с JSON файла проекта). Если просить с нуля, он делает просто маленький пример и/или рекомендует обратиться к специалисту.
Что мне ответил GPT 4o
Вот пример кода для сайта, где клиент может рассчитать примерную цену сессии с учетом скидок и дополнительных опций. Для оформления используется HTML, CSS и JavaScript.
HTML (index.html)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Session Price Calculator</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="container"> <h1>Session Price Calculator</h1> <form id="priceForm"> <label for="basePrice">Base Price:</label> <input type="number" id="basePrice" name="basePrice" required> <label for="discount">Discount (%):</label> <input type="number" id="discount" name="discount" required> <label for="additionalOptions">Additional Options:</label> <select id="additionalOptions" name="additionalOptions"> <option value="0">None</option> <option value="20">Option 1 (+$20)</option> <option value="30">Option 2 (+$30)</option> <option value="50">Option 3 (+$50)</option> </select> <button type="button" onclick="calculatePrice()">Calculate</button> </form> <div class="result"> <h2>Estimated Price: <span id="estimatedPrice">$0.00</span></h2> </div> </div> <script src="script.js"></script> </body> </html> CSS (styles.css)
body { font-family: Arial, sans-serif; background-color: #f4f4f4; margin: 0; padding: 0; } .container { max-width: 600px; margin: 50px auto; padding: 20px; background-color: white; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } h1 { text-align: center; color: #333; } form { display: flex; flex-direction: column; } label { margin-top: 10px; } input, select, button { padding: 10px; margin-top: 5px; border: 1px solid #ccc; border-radius: 5px; } button { background-color: #28a745; color: white; border: none; cursor: pointer; } button:hover { background-color: #218838; } .result { text-align: center; margin-top: 20px; } .result h2 { color: #333; } JavaScript (script.js)
function calculatePrice() { const basePrice = parseFloat(document.getElementById('basePrice').value); const discount = parseFloat(document.getElementById('discount').value); const additionalOptions = parseFloat(document.getElementById('additionalOptions').value); if (isNaN(basePrice) || isNaN(discount) || isNaN(additionalOptions)) { alert('Please enter valid numbers'); return; } const discountedPrice = basePrice - (basePrice * (discount / 100)); const estimatedPrice = discountedPrice + additionalOptions; document.getElementById('estimatedPrice').innerText = `$${estimatedPrice.toFixed(2)}`; } Этот код создаёт простую страницу, где пользователь может ввести базовую цену, скидку в процентах и выбрать дополнительные опции, после чего нажать кнопку «Calculate» для расчета итоговой стоимости.
-
GitHub Copilot не рассчитан на генерацию целого файла или внесение изменений, которые затрагивают весь файл, только на малые и локальные изменения. Если попробовать сделать что‑то глобальное, половина кода теряется. В нём делать не пробовал, только редактировал.
-
Mistral AI, если просить с нуля, делает просто маленький пример, как в спойлере внизу и при этом не рассчитанный на удобное использование
Что мне ответил Mistral
Creating a full website is beyond the scope of this platform, but I can provide you with a basic structure of how you might approach this using HTML, CSS, and JavaScript.
HTML:
<!DOCTYPE html> <html> <head> <title>Session Price Calculator</title> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <h1>Session Price Calculator</h1> <form id="priceForm"> Session Duration: <input type="number" id="duration" min="1" required><br> Discount: <input type="number" id="discount" min="0" max="100"><br> Additional Options: <input type="number" id="options" min="0"><br> <input type="button" value="Calculate" onclick="calculatePrice()"> </form> <p id="result"></p> <script src="script.js"></script> </body> </html>CSS (styles.css):
body { font-family: Arial, sans-serif; padding: 20px; background-color: #f0f0f0; } h1 { text-align: center; color: #333; } form { background-color: #fff; padding: 20px; border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); max-width: 300px; margin: 0 auto; } input[type="number"] { width: 100%; padding: 10px; margin: 5px 0 10px; border: 1px solid #ddd; border-radius: 3px; } input[type="button"] { background-color: #4CAF50; color: white; padding: 10px; border: none; border-radius: 3px; cursor: pointer; width: 100%; } input[type="button"]:hover { background-color: #45a049; } #result { text-align: center; font-size: 18px; margin-top: 20px; }JavaScript (script.js):
function calculatePrice() { var duration = document.getElementById('duration').value; var discount = document.getElementById('discount').value; var options = document.getElementById('options').value; var basePrice = duration * 50; // Assuming $50 per hour var discountAmount = basePrice * (discount / 100); var optionsPrice = options * 10; // Assuming $10 per option var totalPrice = basePrice - discountAmount + optionsPrice; document.getElementById('result').innerHTML = 'Total Price: $' + totalPrice.toFixed(2); }This is a very basic example and you may want to adjust it according to your needs. This code assumes that each session is $50 per hour, each discount is a percentage of the base price, and each additional option costs $10.
Заключение: Начальную генерацию кода лучше делать с Claude, потом лучше переходить на другой, Claude очень забывчивый. Я решил перейти на ChatGPT 4o, хотя можно попробовать и другие
2. Создаю сам сайт
Этап начальной генерации кода (создания скелета) — Claude Omni
Я сначала описал свой минисайт Claude. Когда дошёл до уровня, который мне нравится внешне, но не хватает функциональности и Claude уже начинает тупить, забывая предыдущие функции (в тот момент был только один файл с кодом, где было всё: стили, скрипт и HTML), перешёл на ChatGPT 4o.
Этап улучшений и доработки — ChatGPT 4o
Скопировал весь код из файла, в тот момент он был рабочим, но в нём не хватало некоторых функций и опций. Потом просто начал задавать в ChatGPT, что я хочу и он изменял под мои требования.
Вот варианты создания, которые я пробовал или мне приходили в голову:
|
|
Только HTML |
HTML + JSON |
HTML + база данных (от Microsoft или SQL) |
|
Описание |
Всё в одном файле: стиль, скрипт и оформление |
Оформление, стиль и скрипт в HTML а данные в файле JSON |
Оформление, стиль и скрипт в HTML а данные в файле JSON |
|
Кому подходит |
Всем, особенно тем кто хочет интегрировать на существующий сайт |
Если надо создать отдельный сайт |
Если надо создать отдельный сайт, особенно на хостинге. |
|
Специальные требования |
Существующий сайт |
Место для размещения |
Купленный хостинг в случае SQL |
|
Плюсы |
Всё в одном файле |
Если надо изменить данные по опциям или добавить новые не надо пересоздавать весь код |
Если надо изменить данные по опциям или добавить новые, не надо пересоздавать весь код, визуально видны опции и легче добавлять новые и изменять существующие. |
|
Минусы |
При генерациях полностью пересоздается код, т. е. намного дольше делать. |
Отдельный файл |
— |
Чтобы взять какую‑то из опций, или использовать собственную, просто скажите об этом GPT. Или объясните, какие опции, условия, требования у вас есть и он вам покажет наилучшую опцию.
Рекомендации, когда будете создавать код:
-
У любого ИИ бывает, что предыдущие промпты в чате забываются, поэтому всегда просите его сохранить всё предыдущие правки за исключением тех, которые вы просите изменить прямым текстом. Также проверяйте на глаз и в браузере каждую версию кода.
-
Если пользуетесь ChatGPT, он при каждой правке будет выдавать весь код заново, так что лучше разделить на несколько файлов и просить его генерировать только те файлы, которые он изменяет. Например, разделите на файл CSS, HTML, и файл данных JSON. Если вы хотите вставить это на ваш сайт, а не сделать отдельный, это вам не подходит.
-
Описывайте точно и будто для очень ленивого программиста, который, если ему не описать точно и подробно, найдёт возможность сказать, что этого не было в ТЗ.
3. Публикую сайт
Место публикации сайта зависит от того, как вы сделали проект и для чего вы его сделали.
|
|
Вставить HTML отрывок в сайт |
GitHub Pages |
Claude Artifacts |
Через собственный хостинг |
|
Уровень сложности |
Низкий |
Средний |
Легче невозможно |
Сложный |
|
Кому подходит |
Когда нужно чтобы это был инструмент на сайте, а не отдельный сайт. |
Кто не хочет платить за хостинг и согласен, чтобы домен сайта был оформлен в виде: https://username.github.io/sitename/. Есть возможность купить собственный домен. |
Кому всё равно если сайт потеряется, и согласен чтобы сайт был на чужом домене с длинной ссылкой. |
Кому важно иметь сайт у себя, если важна безопасность и недоступность кода. |
|
Что нужно |
Код и существующий сайт, где вы это добавите |
Иметь Github аккаунт и базовое понимание как с ним работать. |
Аккаунт Claude и попросить у него создать сайт. |
Купить хостинг |
|
Плюсы |
Очень быстро вставлять и обновлять. |
Полностью бесплатно, доступен бесплатный домен, можно изменять во встроенном редакторе. |
Моментальные изменения и публикация, 100% бесплатно. |
Сам используешь и поддерживаешь сайт, точно никто не получит доступ к закрытому коду. |
|
Минусы |
Поскольку это просто HTML со встроенным скриптом и CSS возможна нехватка интерактивности. |
В бесплатной версии GitHub для публикации сайта файлы обязаны быть публичными. |
Длинная ссылка и чужой домен, публикуется результат генераций, добавить мелкие изменения нельзя. |
Более сложный в обновлении. |
Послесловие
Я просто делюсь своим опытом и не считаю, что моя манера лучше или хуже. Мне очень хочется создать универсальный гайд, поэтому буду благодарен любой конструктивной критике, отзывам об использовании и конкретно описанным дополнениям. Я их всё (те которые будут правильными) внесу в этот пост.
ссылка на оригинал статьи https://habr.com/ru/articles/833520/
Добавить комментарий