🤖 Миграция с Next.js на Vanilla JS: Как ИИ Агент Qoder (бесплатная замена Cursor) помог переписать приложение «Голоса Животных России» для RuStore

Привет, читатели! Ранее я уже описывал пример создания приложения «Голоса животных России». Но вот незадача: изначально оно было написано на Next.js, и для работы ему требовался интернет. 📶 Для детского приложения это совершенно неудобно: то Wi-Fi пропал, то в машине сети нет. [Ссылка на приложение в конце статьи]

Решение очевидно: нужно «отвязать» приложение от сети и переписать его на чистый HTML, JavaScript и CSS, чтобы оно запускалось локально в браузере. Это позволило легко собрать его в нативное Android-приложение, работающее офлайн.

Забегая вперед, скажу, что в результате я собрал приложение для Android и успешно выложил его в RuStore! Приложение получилось быстрым, отзывчивым и меньше 3 мб. В качестве бонуса в конце я оставил ссылку на сборку Docker.

Поискав в интернете, я понял, что подобную масштабную задачу по миграции кода можно поручить специализированным AI-агентам. В этот раз решил выбрать бесплатного китайского агента, который разворачивается локально под Windows.

Qoder (от Alibaba) — это агентская платформа для кодирования, разработанная для реальной разработки программного обеспечения. Она позиционируется как бесплатная замена и прямой конкурент платному AI-редактору Cursor и предлагает:

Глубокое понимание кодовой базы благодаря интегрированной «инженерии контекста» (Enhanced Context Engineering).
Способность систематически решать задачи по разработке ПО, работая с большими проектами.
Поддержку интеграции с самыми современными моделями ИИ, включая Claude, GPT и Gemini.

🔗 Ссылка: https://qoder.com/

Процесс установки оказался максимально простым:

Перейти на официальный сайт Qoder.
Скачать установочный файл для Windows.
Запустить инсталлятор и следовать инструкциям (как при установке любого стандартного приложения).

Чтобы Qoder максимально точно выполнил задачу миграции, необходимо было составить четкий и недвусмысленный промт. Я сформулировал его как техническое задание для опытного разработчика, исключив любые упоминания о Next.js в финальном коде.

Промт DeepSeek

Подготовь промт для ИИ Агента, который должен переписать приложение с next.js на html и javascript, чтобы запускалось локально в браузере. Без кода, только запрос. Хм, пользователь просит подготовить промт для ИИ-агента, который должен переписать приложение с Next.js на чистые HTML и JavaScript, чтобы оно запускалось локально в браузере. Важно, чтобы в ответе не было кода, только сам запрос. Нужно учесть несколько аспектов: во-первых, промт должен быть четким и конкретным, чтобы ИИ правильно понял задачу. Во-вторых, важно указать, что нужно сохранить функциональность и стили, но без использования фреймворков. Также стоит упомянуть, что приложение должно работать локально, без серверной части Next.js. Можно предложить несколько вариантов промта, чтобы пользователь мог выбрать подходящий уровень детализации. Первый вариант — краткий и прямой, второй — более подробный с уточнениями, третий — структурированный с четкими требованиями. Также стоит добавить подсказку, что для лучшего результата можно приложить пример кода Next.js, но так как пользователь просит без кода, это просто совет на будущее.

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

Получившийся вариант промта для AI агента :

You are an experienced frontend developer. Translate the following application written in Next.js to vanilla HTML, CSS, and JavaScript without using any frameworks or build tools. Key requirements: 1. The code must run locally directly in the browser without a Node.js server (by opening `index.html`). 2. Remove all server-side logic (getServerSideProps, API Routes) and static generation (getStaticProps). 3. All interactive elements (navigation, forms, buttons) must work with pure JavaScript. 4. Styles must either be embedded in the HTML or linked as separate `.css` files. 5. If routing was used in Next.js, emulate it using the History API or hash-based routing. 6. SaveResult to path web

Я предоставил Qoder исходный код Next.js-приложения (скачанный с GitHub) и запустил подготовленный промт.

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

github.com

GitHub - CAMOPKAH/Learn_animals_html

Теперь нам нужно этот исходник запустить на мобильном телефоне или планшете. Уже подобное делал и описал процесс тут: «Как создать Android приложение из HTML-игры».

Мы делаем сборку через Cordova, но сразу сталкиваемся с проблемами на мобильных устройствах, которые приходится «лечить» при помощи другого AI-помощника — DeepSeek:

Проблема со звуком: Звук не работал. Оказывается, в Cordova нужно добавить специальный плагин для корректной работы с медиафайлами.
Проблема с выделением контента: Возможность пользователю копировать/выделять контент может сбить с толку ребёнка. Находим лекарство при помощи DeepSeek:

body { -webkit-user-select: none; /* Для предотвращения выделения */ user-select: none; }

3. Проблема с сенсорным вводом: Не адаптированный ввод с сенсорного дисплея (например, двойной тап вызывал зум). Так лечится при помощи пару заклинаний из DeepSeek (дополнительные метатеги и JS-обработчики).

Публикуем в RuStore, и вуаля — наше приложение готово. 🎉

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

Сын постарше, Егор, сказал: «Папа, а давай сделаем подобное приложение для Севы уже с машинками и спецтехникой». Уже вместе с Егором на генерировали образы изображение машинок, но об этом — в следующей статье.... 😉

Сборка Docker-контейнера

github.com

GitHub - CAMOPKAH/LEARN_ANIMALS_RUSTORE