Від рутини до автоматизації: Як я розробив ШІ-інструмент для генерації навчальних завдань

💡 Усі статті, обговорення, новини про AI — в одному місці. Приєднуйтесь до AI спільноти!

Привіт! Я соло-розробник і за сумісництвом майбутній вчитель математики. Сьогодні хочу поділитися досвідом створення "Урок+«(urok-plus.vercel.app) — веб-додатка на базі штучного інтелекту, який автоматизує рутину зі створення навчальних матеріалів.

Це історія про те, як реальні болі з офлайн-роботи перетворюються на технічні рішення у вебі, і як зробити повноцінну платформу з інтерактивними завданнями без жодної бази даних.

Ідея та біль

Цієї весни я проходив активну педагогічну практику в Харківському ліцеї № 49, де викладав математику для 5-х та 7-х класів. Кожен, хто хоч раз готував матеріали до уроку, знає, скільки часу йде на створення тестів, інтерактивних вправ чи кросвордів. Ти використовуєш десяток різних сервісів на кшталт Quizizz чи Kahoot, десь потрібна реєстрація, десь платні ліміти, а десь просто незручний інтерфейс.

Я зрозумів, що хочу мати єдиний інструмент, якому можна просто «згодувати» тему (наприклад, «Координатна площина» або «Дроби»), а він сам згенерує тест, вправу на відповідність, завдання з пропущеними словами або повноцінний кросворд, які одразу можна відправити учням. Так з’явився проєкт «Урок+».

Що вміє платформа (Task Runners)

Замість того, щоб просто генерувати текст, я розробив систему інтерактивних ранерів (UI-компонентів), які відразу перетворюють згенерований JSON на готову гру чи тест для учня.

Під капотом працює кілька рушіїв:

Test Runner: Класичні тести з вибором правильної відповіді.

Match Runner: Завдання на встановлення відповідностей (наприклад, з’єднати формулу та її назву).

Fill Runner: Вправи, де потрібно вписати пропущені слова в текст.

Crossword Runner: Мій улюблений компонент, який автоматично будує сітку кросворда на основі згенерованих ШІ слів та підказок.

Архітектура та стек: Як обійтися без бази даних

Проєкт побудований на Next.js (App Router), стилізований через Tailwind CSS, а UI-компоненти зібрані на базі shadcn/ui. Усе це задеплоєно на Vercel.

Найцікавіший технічний челендж полягав у тому, як ділитися згенерованими завданнями з учнями. Спочатку рука потягнулася прикрутити Postgres (як я це робив у своїх Telegram-ботах), щоб зберігати згенерований JSON і видавати учням посилання за ID. Але я вирішив зробити систему stateless — повністю без бази даних.

Як працює шеринг завдань:

Уся логіка побудована навколо серіалізації стану. Коли ШІ (через `/api/generate/route.ts`) повертає згенероване завдання, клієнт бере цей JSON, стискає його і кодує у Base64-подібний рядок (логіка лежить у `lib/encode.ts`).

Далі цей рядок стає частиною URL-адреси. Вчитель просто копіює посилання вигляду `.../task?data=ey...` і кидає в чат учням.

Плюси: Не потрібна БД, немає проблем із масштабуванням, посилання живуть вічно.

Мінуси: Довгі URL-адреси (але для месенджерів це рідко є проблемою).

Для генерації контенту на бекенді Next.js я налаштував системні промпти, які жорстко вимагають від ШІ повертати валідний JSON у заданій структурі для кожного типу ранера.

Народжено з болю (і плани на використання)

Найкрутіше в пет-проєктах — коли вони вирішують твої ж проблеми. Під час весняної практики я відчув на собі весь процес підготовки інтерактивів. Тоді я ще не мав «Урок+» і витрачав години на компіляцію завдань у різних сервісах. Саме це і стало тригером написати свій інструмент.

Зараз проєкт повністю готовий, і я планую активно використовувати його на наступній практиці або вже під час повноцінної роботи в школі. Впевнений, що учні набагато краще сприймуть інтерактивний веб-кросворд, ніж сухий текст на дошці, а я нарешті зекономлю години сну на підготовці.

Що далі

Проєкт зараз працює як безкоштовна вітрина. У планах — розширення типів завдань (наприклад, інтерактивні графіки, що особливо актуально для математики) та додавання аналітики для вчителя (хто з учнів як пройшов тест).

Буду радий почути думку спільноти! Як вам підхід із stateless-посиланнями замість БД? Можливо, хтось реалізовував подібні EdTech інструменти — діліться досвідом у коментарях!

👍ПодобаєтьсяСподобалось0
До обраногоВ обраному0
LinkedIn
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter

Підписатись на коментарі