Як створити мобільний додаток з ШІ: від першого екрана до Android та iPhone

Чи реально зробити свій додаток із ШІ без досвіду?

Так, простий прототип можна зібрати, описуючи ШІ потрібну поведінку. Але «бачу екран на телефоні» й «застосунок готовий для магазину» — різні етапи. Між ними будуть перевірка даних, збереження, робота без мережі, складання пакета й правила платформи. Тут пройдемо цей шлях на невеликому списку покупок українською: додати товар, позначити куплений, прибрати його.

ШІ в цій задачі допомагає створити програму. Сам список покупок не мусить містити чат-бота чи звертатися до платного API. Це зручна перша задача: результат легко перевірити у магазині, і не потрібні оплати, камера, геолокація чи реєстрація.

Таблицю можна гортати вбік →

PWA — вебзастосунок, який за відповідного налаштування можна додати на головний екран телефона. Можливості залежать від браузера й системи; сам ярлик не робить сайт нативним застосунком. Якщо твою задачу вже розв’язує сторінка за посиланням, почни з гайда про сайт із ШІ.

Маршрут для новачка: спочатку запусти один екран

React Native — технологія для мобільних інтерфейсів, а Expo — набір інструментів навколо неї. Для першого знайомства є Expo Snack: редактор у браузері. Можна побачити екран без налаштування повного середовища на комп’ютері. Це навчальний старт, а не випуск у магазин.

1. Відкрий Snack на комп’ютері й почни новий приклад. У списку файлів знайди App.js.
2. Завантаж наш повний навчальний App.js, відкрий як текст і скопіюй вміст у цей файл. Окрім React і React Native, приклад не потребує додаткових бібліотек.
3. Увімкни вебперегляд. Має з’явитися заголовок «Мій список покупок», поле назви й кнопка додавання. Введи «Яблука», додай, познач покупку та видали її.
4. Щоб подивитися на фізичному телефоні, встанови офіційний Expo Go з магазину своєї платформи та скористайся QR-посиланням або дією відкриття, яку показує Snack. Сумісність залежить від SDK, обраного в прикладі, та встановленої версії Expo Go.
5. Тестуй на вигаданих даних. Перед збереженням або поширенням прикладу перевір видимість проєкту: не вставляй у браузерний редактор приватний код, ключі чи дані клієнтів.

У першому файлі список живе лише під час роботи екрана: після перезавантаження він скидається. Це навмисно простий навчальний крок. Постійне збереження додамо окремо, щоб спочатку відрізнити помилку кнопки від помилки сховища. Сам код не надсилає назви товарів на сервер.

Якщо хочеш отримати власний варіант, а не копію нашого, дай цей бриф у ChatGPT, Claude або іншому помічнику, яким уже користуєшся. Не потрібно купувати одразу кілька підписок.

Створи App.js для навчального Expo Snack на React Native. Це список покупок українською: поле до 120 символів, додавання непорожньої назви, окрема позначка «куплено» та видалення. Однакові назви мають бути незалежними записами з унікальними id. Порожній список має зрозуміле повідомлення. Використовуй лише React і React Native, без додаткових залежностей. Поки без постійного сховища, реєстрації, реклами, сервера, API й оплат. Поясни, що після перезавантаження дані зникнуть. Зроби великі підписані кнопки та врахуй клавіатуру. Дай цілий файл і ручні перевірки, не стверджуй, що запускав його на моєму телефоні.

Друга версія: зроби список корисним у реальному житті

Коли додавання й позначки працюють, додай локальне збереження. Для несекретного списку підходить AsyncStorage — сховище значень на пристрої, яке підтримується в Expo Go. Воно не шифрує дані. Паролі й токени там зберігати не слід. У локальному Expo-проєкті бібліотеку встановлюють командою npx expo install @react-native-async-storage/async-storage; у Snack її потрібно додати до залежностей прикладу.

До нашого списку покупок додай локальне збереження через @react-native-async-storage/async-storage. Спочатку прочитай збережені дані, лише після завершення читання дозволяй запис; не зітри старий список початковим порожнім станом. Перевір структуру прочитаних записів. Передбач помилку читання або запису: покажи повідомлення та не обіцяй успішного збереження. Не додавай мережу або акаунт. Поясни, яку залежність додати до Snack або як встановити її в локальному Expo-проєкті. Дай тест із двома однаковими назвами, позначкою куплено та перезапуском.

Чому в завданні є дивне уточнення про читання до запису? Поширена помилка — спочатку записати початковий порожній список, а лише потім прочитати старий. Користувач бачить, як покупки зникли. Саме такі конкретні ситуації варто давати ШІ разом із вимогою «зберігай дані».

Наступну функцію обирай одну: кількість товару, категорії або пошук. Спільний сімейний список із синхронізацією вже потребує сервера, входу й правил доступу. Це окремий рівень складності, а не ще один рядок у промпті.

Сім перевірок перед тим, як показувати іншим

Таблицю можна гортати вбік →

Вебперегляд не доводить, що Android та iPhone поводяться однаково. А режим попереднього перегляду через Expo Go може потребувати мережі для завантаження проєкту. Остаточну роботу офлайн перевіряй саме на встановленій збірці.

Коли переходити зі Snack у проєкт на ПК

Переходь, коли з’явилися кілька екранів, залежності, потреба в Git або план випуску. Потрібні комп’ютер, актуальна LTS-версія Node.js і редактор, наприклад Cursor за нашим покроковим гайдом. У терміналі створи проєкт командою npx create-expo-app@latest shopping-list і далі дотримуйся поточної інструкції Expo.

Під час переходів між версіями SDK офіційні сторінки можуть по-різному описувати шаблон за замовчуванням. Для Expo Go обирай SDK, який підтримує саме встановлений застосунок, і за потреби явно вказуй шаблон з документації. Не виправляй конфлікт версій навмання десятком перевстановлень.

Сучасний шаблон може використовувати Expo Router: тоді головний екран — файл маршруту на кшталт src/app/index.tsx, а не App.js. Наш файл зі Snack не треба просто кидати поруч і чекати, що він запуститься. Попроси агента перенести компонент у фактичний стартовий екран проєкту та перевірити його імпорти.

Спочатку прочитай package.json і структуру цього Expo-проєкту. З’ясуй, чи використовується Expo Router і де фактичний стартовий екран. Перенеси навчальний компонент зі Snack у відповідний маршрут, за потреби адаптуй JavaScript до TypeScript. Не створюй паралельний невикористовуваний App.js. Перевір сумісність SDK, Expo Go та залежностей за актуальною офіційною документацією. Збережи додавання, позначки й видалення. Окремо вкажи, що реально запускав, і які перевірки Android/iOS ще потрібні.

Для локального перегляду використовується npx expo start. Комп’ютер і телефон зазвичай мають бути в одній Wi-Fi-мережі; якщо пряме підключення не проходить, у документації є режим --tunnel. На фізичному iPhone поточна інструкція вимагає однаковий Expo-акаунт у CLI та Expo Go. Якщо потрібна бібліотека з власним нативним кодом, можливостей Expo Go може не вистачити — переходь до development build, окремої збірки для розробки.

Якщо хочеться збирати екрани мишею: FlutterFlow

FlutterFlow — інший маршрут: інтерфейс збирають візуально, а ШІ допомагає з частинами роботи. Це може бути зручніше для тих, кому легше працювати з екранами й властивостями. Для першої вправи створи сторінку, додай текстове поле, список і кнопку, зв’яжи їх зі станом сторінки, перевір у Test/Preview. Вигляд без налаштованих дій ще не є робочим списком.

За офіційним порівнянням Free дає два проєкти та п’ять AI-генерацій за весь час, а Basic за $39/місяць при помісячній оплаті додає завантаження коду й APK. Створення прототипу, AI-ліміти, експорт і публікація — різні можливості тарифу. Власний акаунт стороннього агента та використання сервісів можуть оплачуватися окремо. Перед вибором перевір тарифну сторінку і таблицю функцій.

APK, AAB, TestFlight: що означає «випустити додаток»

APK — пакет Android, який можна встановити безпосередньо; AAB — формат пакета для Google Play. Екран у Expo Go не є жодним із них. Для Expo можна використати EAS Build: сервіс збирає мобільні пакети з проєкту. У профілі для внутрішньої Android-перевірки налаштовують APK; для магазину потрібна відповідна production-збірка.

На iPhone довільний APK не встановлюється. Є власні способи підпису й поширення Apple, зокрема TestFlight для тестування та App Store для публікації. Хмарне складання iOS можливе через EAS, тому Mac не обов’язковий для кожної операції; власне локальне складання iOS потребує відповідного середовища Apple.

Реєстрація Google Play Console коштує $25 одноразово. Для нових персональних акаунтів, створених після 13 листопада 2023 року, перед доступом до production потрібен закритий тест щонайменше з 12 тестувальниками, які беруть участь безперервно не менше 14 днів, а потім заявка на доступ. Це не автоматичне схвалення. Apple Developer Program має базову вартість $99 на рік; місцеві ціни та умови можуть відрізнятися.

Перед поданням також потрібні коректний опис, іконка, скриншоти, відомості про дані та виконання актуальних вимог магазину. «One-click deployment» у конструкторі не скасовує модерацію та не гарантує публікацію.

Скільки це коштує без плутанини

Таблицю можна гортати вбік →

Не складаємо тарифи різних альтернатив у «обов’язкову суму»: для початку достатньо одного маршруту. Конструктор і Expo не потрібно оплачувати разом. Безкоштовна розробка також не означає безлімітну роботу майбутнього AI-сервісу.

Для профі: що закласти до першого релізу

Зафіксуй версії залежностей, ідентифікатори Android/iOS, окремі конфігурації розробки й випуску. Перевір міграцію локальних даних, великі шрифти, екранну клавіатуру, повернення з фону, помилку запису та відсутність мережі. Для синхронізації потрібні серверні правила доступу; прихована кнопка в інтерфейсі їх не замінює.

Ключ платного AI API не повинен потрапляти в мобільний пакет: файл застосунку можна досліджувати. Якщо додаєш генерацію відповідей, викликай її через свій сервер із перевіркою користувача та лімітом витрат. Історію змін і резервне відновлення перевір до того, як запросиш перших людей. Це напрям розвитку після навчальної вправи, а не вже реалізовані можливості нашого файлу.

Є робочий приклад від нашої спільноти — Android-нотатник Origami Notes від BaraniukConnection. Він показує, навіщо робити власний інструмент. А свій прототип можна обговорити в українській спільноті вайбкодингу: додай версію SDK, платформу, точну помилку й очікувану поведінку.

Джерела й межі перевірки

Маршрути, можливості й тарифи перевірено за офіційною документацією. Навчальний список і промпти створені редакцією; синтаксис файлу та базові переходи стану перевірені локально. Це не тест установлення на всіх Android/iPhone і не звіт про публікацію в магазинах. Збереження та синхронізація наведені як наступні завдання, у стартовому файлі їх немає.

1. Expo: початок роботи й посилання на Snack
2. Expo Snack: офіційний код браузерного середовища
3. Expo: навчання створення застосунку з AI-агентом
4. Expo: актуальне створення проєкту й перехід між SDK
5. Expo: запуск на пристрої та вхід на iPhone
6. Expo: обмеження Expo Go
7. Expo: AsyncStorage, встановлення та незашифровані дані
8. EAS Build: окремі мобільні пакети й внутрішнє поширення
9. Expo: тарифи EAS
10. FlutterFlow: тарифи
11. FlutterFlow: порівняння планів і AI-квоти
12. FlutterFlow: AI-інструменти та власні акаунти агентів
13. Google Play: реєстрація та одноразова оплата
14. Google Play: тестування нових персональних акаунтів
15. Apple Developer Program: вступ і річна оплата
16. MDN: PWA та встановлення вебзастосунків
17. React Native: базові поняття та інтерактивні приклади Snack