Працюючи з ключовими словами я досить часто бачив запити типу “Калькулятор розрахунку *такого от*”. Коли я бачив подібне, то я просто видаляв запит і на цьому все. І от я сьогодні подумав:
А якого біса?!
Після цього я поліз на Ютуб і почав дивитися ролики з назвою на кшталт “Build a Calculator Website in using ChatGPT”. Надивившись на тих індусів я вирів спробувати зробити щось подібне. Скажу відразу, що вказані ролики хоча і дуже короткі (~2 хвилини), але дивитися їх важко, бо всі однакові і там окрім дуже базового промпту нічого не вказано.
Тобто питання того, як це все потім зібрати до купи і щоб воно працювало не розкрито ніяк. Я дуже не люблю колупатися на серваку і завжди подібне, у т.ч. розробку калькуляторів замовляв на біржах фрілансу. Але тепер же є нейромережі, плюс індуси не можуть обманювати у своїх обіцянках, що це справа на 1-2 хвилини. Чи можуть?
Спойлер: на отримання +- нормального результату в мене пішло приблизно 2 години. Якщо у майбутньому буде подібна задача, то я зможу її тепер хвилин за 20-30 закрити. Якщо у вас є ідеї, як це все оптимізувати і прискорити, то, напишіть, будь ласка, у коменти.
Забув сказати, що варіант типу “От посилання на калькулятор, зроби мені копію” відфутболили всі 4 ШІ, до яких я звертався. Навіть те, що я був власником того сайту (згідно легенди для нейромережі) і не проти такого копіювання, жодних порушень авторського права і все таке подібне, результату не було. Бляшанка говорила “Нє магу, астанавітєсь” і йшла у відказ.
Алгоритм дій
Йдемо до вашого улюбленого нейро-друга. У мене це Клод, у вас може бути ЧатгПТ чи то Геміні з Грогом. І хто я такий, аби обговорювати подібні збочення? Це ваша особиста справа, але Сlaude 3.5 Sonnet – топчик. Там забиваємо такий от промпт:
You’re a professional calculator developer. Please create [maximum detailed *тема* Cost Calculator] for my website using html, css and javascript in separated files
* уточнення щодо промпту: індуси роль не вказують + люблять, аби весь код був у одному файлі. Я же, як пам’ятаю з курсів, що проходив ще у минулому житті, то краще мух тримати окремо від котлет. Чи треба так робити сьогодні – хз. + додатково я вказав Клоду, аби калькулятор був максимально детальним. Якщо результат не влаштовує, то кажіть “make it more detailed”.
Клацаєте Enter і цей красень видає вам html-код, стилі + джаваскріпт.
Далі йдемо у блокнот. Я використовую Notepad++. Копіюємо код і жмемо “зберегти”. Розширення файлу вказуємо прямо у рядку з назвою (на випадаючий список доступних форматів забиваємо). У мене вийшло 3 файли:
- index.html
- styles.css
- script.js
Зверніть увагу, що назви я не придумав з голови, а брав зі згенерованого коду. Якщо вони не будуть збігатися, то нічого не запрацює.
Далі я запитав у нього:
How do I run this calculator on my wordpress site?
Було запропоновано 3 варіанти:
- Засунути весь цей код прямо у сторінку.
- Використовувати шорткоди.
- Або через <iframe>.
Перший варіант у мене, як я не бився, виглядав криво. З шорткодами теж була якась біда. Так я не зрозумів, чого він іноді рахував нормально, а бувало просто оновлював сторінку. Для реалізації варіанту зі шорткодами він згенерував мені спеціальний файл, який я і вказав у папці з темою. Виглядало це наступним чином:
шлях – /мій-сайт/www/wp-content/themes/тема_child (дочірня тема) – там functions.php. У самому файлі я вказав де знаходиться папка з правилами щодо використання цього шорткоду.
require_once get_template_directory() . ‘/видалено-calculator/видалено-calculator-shortcode.php’;
Як ви бачите, я створив окрему папку і туди засунув наші три файли + правила по шорткодам. У цьому файлі у трьох місцях треба вказати шлях до стилів та налаштувань калькулятору. Шлях виглядає так: /видалено-calculator/index.html
Але, повторюсь. У мене чогось через Shortcode воно працює не стабільно.
Найбільше мені сподобався результат з варіантом через <iframe>. Для його реалізації ми у редакторі переходимо з Візуально на Текст і у потрібному місці вставляємо щось на кшталт такого:
<iframe src=”https://вашсайт.укр/wp-content/themes/тема_child/видалено-calculator/index.html” width=”100%” height=”800px” frameborder=”0″><span data-mce-type=”bookmark” style=”display: inline-block; width: 0px; overflow: hidden; line-height: 0;” class=”mce_SELRES_start”></span></iframe>
І все працює, як годинник. Звісно, можна погратися з розмірами та виглядом рамки, але мені ок і так.
Що скажете? Є чим доповнити? Є світлі думки?
