Менше ніж тиждень тому я вирішила, що нарешті спробую створити додаток. Я думала про це протягом останнього місяця, і в 2025 році хіба не кожен має змогу створити додаток? Трохи про мене: у мене немає досвіду в сфері програмної інженерії, але я працювала з кількома різними мовами програмування, такими як SQL та Python. Насправді я отримала свою першу роботу бізнес-аналітика, швидко підготувавшись до тесту на знання SQL (дякую w3schools!) і відповівши на достатню кількість питань, щоб пройти тест, якось так. Зараз я працюю менеджером продукту в технічному стартапі, тому, чесно кажучи, це не зовсім так, що я не знаю, як створюються додатки.
Ідея створити додаток виникла з кількох різних причин — бажання мати пасивний дохід, розчарування поточними інструментами «на ринку», цікавість... але головним рушієм став ChatGPT. Коли ChatGPT з'явився, я спочатку була дуже скептична. Гіперболізація AI була на піку, і я не була впевнена, що він дійсно гарний. Я спробувала і він згенерував непоганий рецепт хумусу, і на цьому все закінчилося на кілька місяців. З часом все більше людей почали рекомендувати його для завдань, таких як підсумовування документів, написання лаконічних електронних листів, і незабаром мої колеги почали використовувати його для розробки програмного забезпечення. Частина моєї роботи полягає в аналізі великих наборів даних, і коли я почала використовувати його для написання SQL запитів, я нарешті почала оцінювати можливості ChatGPT.
Так ось, в минулу п’ятницю я опинилася на вебсайті Алі Абдала, читаючи статтю про пасивний дохід, яка привела мене на indiehackers.com та до мікроSaaS сайтів Марка Лоу. Ідея почати з малого і рухатися швидко мені дуже сподобалася, тому я вирішила взяти ідею мого чоловіка і спробувати втілити її в реальність: додаток для індивідуального плану читання Біблії. Звісно, є багато планів читання Біблії, але більшість з них або орієнтовані на читання Біблії за рік, або це випадкові тематичні плани, що можна знайти на YouVersion, які тривають певну кількість днів. Цей додаток дозволяє вам вибирати свої власні книги та часові рамки, і дає вам призначене читання на кожен день.
Далі в статті я розповім, як я дійшла до того, де я є сьогодні — у мене є прототип, який частково працює на живому сайті. Для моєї особистої безпеки я не буду поки що ділитися ним, але я цілком задоволена тим, де я змогла досягти менш ніж за тиждень, витративши $0. Найбільші висновки до цього моменту:
- ChatGPT може допомогти лише до певного моменту. Це досить далеко, але без знання того, як прочитати те, що він генерує, і без використання вашого мозку для налагодження, у вас не буде безпомилкової кодової бази.
- StackOverflow, спільнота GitHub і хороша стара документація систем — все ще надзвичайно актуальні. Після кількох годин марної роботи з ChatGPT — і все більшого розчарування, коли він весело відповідав: «Ви абсолютно праві, але це не робить те, що ви запитували» — я звернулася до реальних людей. Вони мали відповіді, які мені потрібні.
- Є багато відкритих і безкоштовних інструментів! Я була дуже вражена кількістю доступних варіантів. Спасибі GitHub Codespaces, яке швидко допомогло почати писати код і розгортати його. Я тільки що досягла 75% використання, тому нарешті перенесла налаштування на локальну машину, але це був чудовий спосіб швидко почати розробку.
Отже, тепер перейдемо до подорожі та технічних деталей. Сподіваюся, це допоможе тим, хто намагається почати з нуля і створити щось працююче за короткий час.
Крок 0: Натхнення
Хоча я дуже хотіла працювати над проектом у свій вільний час, у мене все одно були інші справи, які потрібно було зробити. Поки я мила посуд, готувала і прала, я слухала безліч подкастів The Startup Ideas Podcast.
Один з моїх улюблених епізодів — це інтерв'ю з Омаром Чоудрі, де він детально пояснює, як створив сайт bestdubai.com за допомогою Webflow і Zapier, і буквально крок за кроком розповідає, як він це зробив.
Я також переглянула багато мікро-SaaS сайтів, щоб отримати натхнення. Як я вже згадувала, IndieHackers — чудове місце для пошуку ідей. Мені також дуже сподобалася ця стаття від MarketerMilk, де було багато хороших прикладів.
Крок 1: Дослідження
З мого досвіду роботи менеджером продукту, я знала, що найкращий спосіб почати — це створити прототип. Я почала з того, що попросила ChatGPT написати спрощену версію додатка в HTML файлі, щоб я могла легко переглянути її на своєму комп’ютері. Я працювала над цим два дні і отримала сторінку, яка могла показувати план на основі вибраних дат і книг. Вона також обробляла логіку розподілу глав або віршів в залежності від тривалості плану і довжини вибраних книг. Це також допомогло мені знову ознайомитися з HTML та JavaScript.
Найскладніше було пояснити ChatGPT, як поділити читання на глави або вірші в залежності від довжини книги і часу. Тоді я зрозуміла, що мені потрібно насправді почати читати код замість того, щоб просто відправляти йому повідомлення про помилки і сподіватися, що він їх виправить. І ось тоді я зрозуміла, що console.log стане моїм найкращим другом.
Коли я довела HTML версію до хорошого рівня, я почала досліджувати шаблони (boilerplates), що є по суті оболонкою додатка з бажаним технологічним стеком. Я почала з шаблонів, побачивши шаблон Марка Лоу, але не хотіла платити за його, тому шукаю відкриті варіанти. Я швидко була приголомшена кількістю варіантів і комбінацій. Кожен має свої переваги та недоліки, і я спочатку почала використовувати налаштування Марка Лоу як орієнтир, використовуючи Next.js, React, DaisyUI та Firebase. Я переглянула багато шаблонів і скопіювала кілька з них, але швидко зрозуміла, що мати купу файлів і не знати, що з ними робити — не дуже хороша ідея. Також я зрозуміла, що мені не подобається Firebase, тому що я не могла швидко зрозуміти інтерфейс.
Після того, як я трохи відійшла від цього і одягла шляпу менеджера продукту, я зрозуміла, що мені потрібно чіткіше визначити свої вимоги перед тим, як вибирати технологічний стек. Для мого додатка з Біблією я знала, що хочу кілька речей:
- База даних для зберігання планів і записів плану
- Чистий інтерфейс
- Сучасні компоненти (які легкі у використанні, оскільки я дуже мало знаю про HTML, Javascript тощо)
- Аутентифікація
- (пізніше) Платежі
Маючи ці вимоги на увазі, я почала з баз даних і обрала Supabase, тому що 1) він має хороший безкоштовний план, і 2) він позиціонується як альтернатива Firebase, використовуючи SQL. Я не знаю, чому я вирішила, що, хоча я знаю SQL і мені з ним дуже комфортно, це буде краще — відмовитись від цього і обрати щось інше, але я була так захоплена бажанням почати з шаблону, що відчувала себе заблокованою в Firebase. Я не могла знайти хороший шаблон Supabase + Next.js + React, але в кінці кінців просто здалася, бо дуже хотіла використовувати Supabase. Також, признаюся, їхній чистий інтерфейс дуже допоміг. Після годин, проведених у документації і намагаючись зрозуміти технічні речі, які я не розуміла, бачити великі, очевидні кнопки було дуже приємно.
Звідси я вирішила обрати Next.js і React, оскільки вони здаються найпопулярнішими.
Я також обрала Vercel для хостингу, знову ж таки через безкоштовний план та популярність.
Крок 2: Як почати програмувати??
Мені трохи соромно визнати, як важко було для мене зрозуміти, з чого почати програмувати. Після того як я скопіювала безліч шаблонів у свій GitHub акаунт, я не зовсім розуміла, що з ними робити. Раніше я подавала та об'єднувала pull request'и через GitHub, але робила це через сам інтерфейс GitHub, редагуючи існуючі файли, і я знала, що це не найкращий шлях для справжньої розробки.
Я вирішила запитати у ChatGPT, що робити, щоб отримати доступ до мого репозиторію на GitHub. Він порекомендував мені завантажити Homebrew, і ось тут я одразу застрягла, бо я користуюсь Macbook Pro 2017 року, і мій термінал сказав, що мій комп’ютер занадто старий для того, щоб встановити останню версію Homebrew, яка була необхідна для запуску npm та nvm (Зараз я досі не зовсім розумію, що саме робить кожне з цих понять. Я також досі не розумію, як термінал на моєму комп'ютері може просто знаходити і встановлювати різні речі… але, у бажанні йти швидше, я поки що не звертала на це уваги).
Я відчувала себе трохи розчарованою і безнадійно шукала в Google, що робити, коли випадково натрапила на "Code" в GitHub і побачила Codespaces. Після деяких досліджень я зрозуміла, що це саме те, що мені потрібно для швидкого старту. І ось так почалась моя програмування!
Крок 3: Запитуйте ChatGPT все
Коли я отримала доступ до середовища, де могла почати програмувати, я створила абсолютно порожній репозиторій і налаштувала проект Next.js за допомогою їхнього автоматичного встановлення. Я була приємно здивована, коли побачила файли, що з'явилися, та структурований репозиторій. А коли я відкрила порт і змогла вперше переглянути свій сайт, я була на сьомому небі від щастя. Це справді дивовижно, коли ідеї з голови починають оживати!
Саме тоді і почалась важка робота з ChatGPT. Я мусила запитати його майже все. Я почала з того, що попросила переписати HTML код, який він написав, в мову, сумісну з Next.js / Typescript, і допомогти налаштувати його в моєму проекті. Перша проблема була в тому, що він давав мені інформацію на основі версії Next.js 12, а я використовувала версію 13, яка використовує іншу систему маршрутизації, тому ChatGPT давав мені багато неправильної інформації щодо того, куди потрібно розміщувати файли. Щоб подолати це, я мусила постійно нагадувати йому, що я використовую маршрутизатор app, що було досить дратуюче.
Я також дійсно хотіла, щоб додаток виглядав добре, тому я попросила ChatGPT спеціально включити стилі DaisyUI (на щастя, він мав точну версію в своїх навчальних даних). Я була досить задоволена тим, що він вивів вперше, хоча він і зробив деякі допущення щодо стилізації, які мені ще доведеться виправляти пізніше.
Одного вечора я гралася з ідеєю змінити свою бібліотеку компонентів на щось інше, наприклад, Mantine, Chakra і Material UI, але я заплуталась і вирішила залишити DaisyUI. Звісно, це було після того, як я спробувала встановити кілька з них, оскільки я не маю уявлення, що я роблю. Я також намагалася встановити NuxtUI, і досягла значного прогресу, поки не зрозуміла, що це не сумісно з Next.js.
Крок 4: "Молодший кодер"
Я слухала один з епізодів The Startup Ideas Podcast, і один з гостей описав ChatGPT як веселого молодшого кодера. Він дуже прагне допомогти, але іноді дає дивні чи погані поради. Я точно стикалася з таким.
Найгірший досвід, який я мала з ChatGPT, був при спробі змусити його правильно розподілити глави і вірші так, як я хотіла. Я почала з того, що дала йому просте завдання:
Я хочу створити додаток, де користувач може вибирати книги з Біблії і створювати індивідуальний план читання на основі вибраної книги та часу.
Я хочу, щоб план читання розбивався на природні місця (тобто кінець глав, кінець книг тощо) і рівномірно розподілявся на вибрані дні, щоб кожного дня читати приблизно однакову кількість слів або віршів. Чи можете ви допомогти мені написати простий інтерфейс для вибору книг Біблії, діапазону дат і обчислення, як розподілити читання? Результатом має бути персоналізований план з днем і призначеним читанням на вибраний час.
Перша версія коду була нормальною, але я помітила деякі проблеми з тим, як розподілялися глави і вірші, тому я спробувала бути більш конкретною. Я дізналася техніку надання прикладів з кількома варіантами у запитах з мого досвіду роботи з Google Vertex, тому спробувала це тут:
Я хочу вдосконалити деякий код, який у мене є. Я хочу створити додаток, який генеруватиме план читання Біблії на основі того, що я хочу читати (конкретні книги, старий чи новий заповіт, або тип книг, як закон, послання тощо) і на основі обраного мною часу. Я хочу, щоб він був достатньо розумним, щоб створити розподілений план читання на всі дні, які я виберу, розбиваючи це на глави, якщо це має сенс, або на вірші, якщо так буде логічніше. Ось кілька прикладів:
Я хочу прочитати Наума в січні. У Наума є 47 віршів, тому я маю читати трохи більше 1 вірша на день, щоб досягти цієї мети. План читання може сказати, що я читаю 2 вірші 1 січня, 1 вірш 2 січня, кілька віршів 3 січня і так далі.
Я хочу прочитати 1 і 2 Коринтян в травні. У цих двох книгах є 29 глав, тому мені потрібно читати менше 1 глави на день. Я можу прочитати цілу главу за 1 день, а інші глави, які довші, будуть розбиті, але я буду намагатися отримати природні точки розбиття, читаючи 1 главу на день.
Чи можете ви допомогти мені налаштувати мій код, щоб досягти цього?
Я не покажу вам десятки запитів, які я йому надіслала, але коли я почала потроху втрачати розум, намагаючись пояснити одну й ту саму концепцію ChatGPT знову і знову, я зрозуміла, що мені потрібно бути більш чіткою і перестати очікувати, що він зрозуміє мої ідеї. Я почала додавати посилання з console.log, щоб показати, що код генерує і що я очікую побачити. Тому я додала більше журналювання в свою кодову базу і почала надсилати ChatGPT повідомлення такого типу, що дало набагато кращі результати:
Мені потрібно написати функцію на JavaScript, щоб обробити всі ці випадки
input =
1 Коринтян 1:15output = книга =
1 Коринтянглаваівірш =1:15input =
Есфір 2:2output = книга =
Есфірглаваівірш =2:2Чесно кажучи, я ще не налаштувала логіку призначення віршів і глав так, як хочу, але після деякого часу мені потрібно було зробити перерву, і я перейшла до іншого. Думаю, щоб дійти до того, чого я хочу, мені потрібно краще опановувати техніку запитів до ChatGPT і почати краще розуміти код. ChatGPT дуже добре коментує свій код, тому я б рекомендувала просити його додавати коментарі в код, щоб зрозуміти, що він робить. Я пробувала змінити мого помічника AI на Claude, оскільки чула, що він краще справляється з програмуванням, ніж ChatGPT, але оскільки я досі не можу прочитати 75% своєї кодової бази, я змушена копіювати і вставляти цілу
.tsxфайли в чат. Безкоштовний план Claude має обмеження по кількості символів, що занадто низьке для таких великих обсягів тексту.
Крок 5: З'єднати все
З'єднання Supabase і Vercel було на диво простим. ChatGPT і джерела документації надали всю необхідну інформацію для підключення мого проекту.
Я відчула таку радість, коли використала свій додаток для створення плану читання та побачила дані плану в моїх таблицях Supabase.
Однією з основних перешкод, з якими я зіткнулася в Supabase, стали політики RLS, з якими я раніше не мала досвіду і які спричинили багато головного болю, оскільки ChatGPT теж, здається, мало що про них знав. Я витратила цілу ніч, намагаючись змусити ChatGPT виправити підключення мого додатка до Supabase, лише щоб зрозуміти, що я не ввімкнула доступ "тільки для читання" на одній з моїх таблиць. Ще одну ніч я витратила, ламаючи голову над тим, чому я не бачу всі дані з моєї таблиці, коли SQL-запит чітко використовує SELECT *, коли я нарешті знайшла в Google і виявила, що Supabase накладає ліміт у 1000 рядків за замовчуванням, тому я змінила це налаштування.
Я була дуже приємно здивована Vercel. Безкоштовний план прекрасно підходить для моїх потреб, і дуже приємно мати деякі автоматизовані перевірки, коли робиш GitHub pull requests. Єдина особливість: ім’я URL мого додатка не було доступне, тому до нього додали слово sandy, і тепер ми з чоловіком любляче називаємо весь додаток "Sandy".
Зрозуміти Git і взаємозв'язок з GitHub було однією з найскладніших частин. Я була дуже здивована, коли, здається, я подавала зміни в основну гілку мого проекту, невинно набравши git push, як сказав ChatGPT, і ці зміни були застосовані до виробничого додатка без створення pull request.
Я б дуже порадила ознайомитися з шпаргалкою Git, якщо, як і я, ви маєте обмежений досвід роботи з Git, але навіть це все ще плутає мене. Я створила свою власну шпаргалку (знову ж таки, завдяки ChatGPT), яку тримаю в нотатках:
Відкрийте Terminal
npm run dev
Після того як збережете файли локально…
git add .
git commit -m “commit message”
Щоб створити гілку та PR
git checkout -b feature/your-branch-name
git push origin feature/your-branch-name
Коли функціональність буде відправлена в основну гілку
git checkout main
git pull origin main
Крок 6: Зробити це крутішим
Коли я дісталася до гарної сторінки створення плану, де я могла ввести тип плану, вибрати конкретні книги та визначити часовий діапазон, я захотіла додавати нові функції. Мій список функцій дуже довгий, і я визнаю, що зараз у мене синдром "блискучих об'єктів" — якщо мені спадає класна ідея, я просто починаю працювати над нею. Пропозиція від мого бета-тестера (тобто мого чоловіка) призвела до створення нового вибірника дат.
Цей простий запит до ChatGPT насправді дав чудовий результат з першого разу:
У мене є вибірник дат у моєму додатку для Біблії. Мені потрібно, щоб він вибирав діапазон. Зараз я думаю, що я просто використовую базовий вибірник дат для react, але я хотіла б мати можливість пропонувати такі значення, як "30 днів", "наступний місяць", "90 днів", "наступні 3 місяці", "180 днів", "наступні 6 місяців", "365 днів" або "налаштування". Як би ви запропонували реалізувати це?
Ось що він запропонував з першого разу. На мою думку, досить добре!
Крок 7: Межі "Безкоштовного"
До цього часу єдине місце, де я зіткнулася з реальними обмеженнями через моє використання, це GitHub Codespaces. Учора я отримала електронного листа, що я використала 75% з 120 годин на безкоштовному плані (ефективно 60 годин використання Codespaces) і повинна буду платити, або чекати до 1 лютого, коли мій безкоштовний ліміт скидається.
Тому я вирішила подолати труднощі і зрозуміти, як налаштувати локальне середовище. Це привело мене назад до мого терміналу (який досі залишався заплутаним), але я змогла встановити всі необхідні пакети на своєму комп'ютері, створити копію мого репозиторію, підключити Sublime Text до мого проекту на GitHub і продовжити програмування.
Я обрала Sublime Text, тому що 1) він вже був встановлений на моєму комп'ютері, і 2) він безкоштовний.
Відтоді я весь код пишу локально, і хоча мені не вистачає деяких функцій Codespaces, Sublime Text працює досить добре. Вони, здається, мають більше інтеграцій, які я ще не досліджувала. Думаю, я повернуся до Codespaces, коли мій ліміт скидається, але я дуже налаштована використовувати тільки безкоштовні інструменти, тому мені доведеться чекати до лютого, щоб повернутися до цього.
Також — очевидно, мій час не безкоштовний. Я витратила чимало свого вільного часу або на саму роботу над цим проектом, або на роздуми про нього. Однак я вважаю це вартою інвестицією, оскільки мені дуже весело, і, сподіваюся, я зможу генерувати пасивний дохід з цього колись.
Крок 8+: Просто плисти далі
Отже, ось де я знаходжуся на даний момент. Одягаючи шляпу менеджера продукту, ось мої головні пріоритети на найближчий час:
- Уточнення завдань для читання на кожен день
- Уточнення моєї сторінки для перегляду створених планів
- Покращення UI, коли мені спаде на думку 🙂
Бонусний розділ: Що я дізналася про ChatGPT
ChatGPT добре в:
- Поясненні коду, який він написав, так, ніби ви нічого не знаєте про програмування
- Написанні базового коду згідно зі стеком, який ви використовуєте
- Наданні загального огляду того, як реалізувати XYZ функцію
- Відповіді на випадкові питання про “що це за річ, яку ви щойно згадали”
ChatGPT погано в:
- Налагодженні коду тільки на основі вашого запиту "це не працює"
- Надсиланні цілих блоків коду з незначними змінами без випадкових змін інших частин, які вам доведеться ще налаштовувати
Перекладено з: From No Coding Experience to Working Prototype in 7 Days