03.08.2024 05:47
Mykola_08 3 1000 Источник

Предисловие

У любого последователя создания 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

Этот код создает простой, но функциональный и стильный веб-сайт с калькулятором цены сессии. Вот краткое описание его функций:

  1. Пользователь может ввести базовую цену сессии.

  2. Можно выбрать длительность сессии (с шагом в 30 минут).

  3. Есть возможность указать скидку в процентах.

  4. Пользователь может выбрать дополнительные опции, которые увеличивают стоимость.

  5. После нажатия кнопки "Рассчитать цену" скрипт вычисляет итоговую стоимость с учетом всех параметров.

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

Вы можете скопировать этот код и сохранить его в файл с расширением .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 для публикации сайта файлы обязаны быть публичными.

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

Более сложный в обновлении.

Послесловие

Я просто делюсь своим опытом и не считаю, что моя манера лучше или хуже. Мне очень хочется создать универсальный гайд, поэтому буду благодарен любой конструктивной критике, отзывам об использовании и конкретно описанным дополнениям. Я их всё (те которые будут правильными) внесу в этот пост.

Комментарии (3)


  1. digtatordigtatorov
    03.08.2024 10:30
    #27121228

    На кого статья ориентирована?

    Похоже на выжимку из новостей, Вам показывают громкий заголовок, а за ним следует ничего. Просто бездушный кусок текста А4. Ни кода, ни подробностей, вообще ничего. Рекламу на старых сайтах видели?

    Создаем мини сайт, нужно всего лишь…

    И тебя перекидывает на порно игру. Примерно так читается Ваша статья.


    1. Mykola_08 Автор
      03.08.2024 10:30
      #27121480
      +1

      Скажите, вы уверены что прочитали именно мою статью?

      В моей расписан весь процесс создания, ровно так я все и сделал. Но если все же считаете что чего-то не хватает, скажите пояснив нормально что именно. Я за это буду вам благодарен, мне всегда нравится совершенствоваться.


  1. Harconnen
    03.08.2024 10:30
    #27130798

    Немножко дополню, тут недавно была статья про генератор страниц
    https://habr.com/ru/companies/amvera/articles/832046/
    у меня было время просто попробовать - вроде сервис справляется с задачей неплохо.

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