Draftbit Огляд: Як я швидко створив трекер звичок

Чи мали ви коли-небудь чудову ідею застосунку, але відчували себе застряглими, бо створення застосунку здавалося надто складним або повільним?

Нещодавно я використав Draftbit, щоб створити повністю функціональний щоденний трекер звичок. Що мене найбільш вразило, так це те, як швидко я перейшов від ідеї до робочого прототипу, зберігаючи при цьому повний контроль над кодом.

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

Я завершую статтю порівнянням Draftbit з моїми трьома основними альтернативами (Base44 та Softr). У кінці ви будете знаєте, чи підходить Draftbit вам!

Вердикт

Draftbit – це платформа з низьким кодом, яка швидко створює рідні застосунки для iOS та Android, експортує код React Native та використовує настраївані компоненти з AI та необов’язковою допомогою експертів. Це швидко та гнучко для команд та розробників. Однак, для початківців може бути складно, бо складні функції можуть бути складними.

Що таке Draftbit?

Draftbit – це будівник застосунків без коду, який проектує та створює мобільні застосунки для iOS та Android без написання коду. Він має інтерфейс з перетягуванням, який дозволяє швидко створювати макети застосунків, а також автоматично генерує код React Native. Це дозволяє вам мати повний контроль над кодом застосунку для подальшої налаштування чи розробки.

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

Походження Draftbit та те, що робить його особливим

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

Підхід Draftbit інший: ви можете експортувати свій код React Native та передати його команді розробників, коли завгодно. Це величезна перевага для бізнесів, які турбуються про залежність від платформи.

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

Для кого підходить Draftbit?

Ось типи людей, для яких підходить Draftbit:

• Розробники мобільних застосунків та підприємці можуть використовувати Draftbit для створення застосунків для iOS та Android.
• Команди можуть використовувати Draftbit для спільної роботи над застосунками на платформі з низьким кодом, зберігаючи при цьому повний контроль над кодом.
• Дизайнери можуть використовувати Draftbit для роботи в інтерфейсі з перетягуванням, який відчувається схожим на Figma.
• Агентства та організації можуть використовувати Draftbit для спільної роботи в спільних робочих просторах з контрольованим доступом.
• Технологічні люди можуть використовувати Draftbit для роботи з JSON, REST API та React Native.
• Проекти, які потребують швидких прототипів, можуть використовувати Draftbit для швидкого переходу від ідеї до запуску з однією кнопкою публікації.
• Ті, хто хоче повний контроль над кодом, можуть використовувати Draftbit для експорту коду React Native для налаштування чи передачі розробникам.

Ключові функції Draftbit

Ось ключові функції Draftbit:

• Візуальний будівник застосунків: перетягування для проектування застосунків для iOS та Android без кодування.
• Експорт вихідного коду: завантаження чистого коду React Native для повного контролю.
• Мгновенні попередні перегляди: тестування застосунку на пристроях в режимі реального часу за допомогою QR-коду.
• Бібліотека компонентів: використання попередньо створених блоків інтерфейсу, шаблонів та тем.
• Інтеграція з API: легке підключення до REST API, Airtable, Supabase та ін.
• Настраїваний код: додавання JavaScript, JSX-компонентів та сторонніх пакетів.
• Навігація та дії: вбудовані стилі навігації та спригери.
• Спільна робота в команді: робота разом у спільних просторах з контрольованим доступом.
• Швидке прототипування: створення MVP за години або дні.
• Однократна публікація: розгортання до магазинів застосунків або вебу.
• Допомога AI: прискорення розробки за допомогою допомоги AI.
• Розширена логіка: створення робочих процесів та багатокрокових дій.
• Адаптивний дизайн: стилізація макетів, які адаптуються до будь-якого екрана.

Як використовувати Draftbit

Ось як я використав Draftbit, щоб створити та налаштувати щоденний трекер звичок:

1. Створити обліковий запис
2. Отримати допомогу експертів (необов’язково)
3. Створити проект
4. Додати назву та опис
5. Додати деталі проекту
6. Вибрати початкову точку
7. Вибрати іконку застосунку
8. Налаштувати компоненти
9. Переглянути екрани застосунку
10. Доступ до компонентів
11. Додати компонент
12. Налаштувати компоненти
13. Встановити проект онлайн

Крок 1: Створити обліковий запис

Я почав з переходу на draftbit.com та вибору “Почати” у верхньому правому куті.

Крок 2: Отримати допомогу експертів (необов’язково)

Після створення облікового запису та поділення моїх деталей та цілей з Draftbit, вони запитали, чи хочу я працювати з експертом для прискорення моєї роботи.

Я ніколи не бачив будівника застосунків з AI, який би пропонував це, тому я оцінив унікальну комбінацію автоматизації AI з реальною підтримкою людини (особливо для нек-технічних користувачів). Я натиснув “Ні, дякую”, але якщо вам потрібно допомога експертів, скористайтеся цією можливістю!

Крок 3: Створити проект

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

Я вибрав “Створити свій перший проект”.

Крок 4: Додати назву та опис

Далі Draftbit запитав мене, яку назву та опис дати моєму застосунку. Я дав йому назву “HabitForge” з наступним описом:

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

Ви завжди можете змінити назву та опис вашого застосунку пізніше, тому не турбуйтеся про це надто сильно. Я вибрав “Далі”, щоб продовжити.

Крок 5: Додати деталі проекту

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

• Бекенд, який буде використовуватися для моєї роботи (Xano, Bubble, Supabase тощо)
• Тип застосунку (аудіо, бізнес, крипто тощо)
• Як я планую розгортати свій застосунок (магазини застосунків, веб, PWA тощо)

Оскільки я хотів створити застосунок для відстеження звичок, я вибрав “Здоров’я та фітнес” як тип застосунку, який я буду створювати. Я не був впевнений щодо бекенду чи того, як я буду розгортати свій застосунок, тому я сказав, що не знаю.

Крок 6: Вибрати початкову точку

Потім Draftbit запитав мене, як я хочу почати будівництво свого застосунку. Він запропонував мені шаблони, починаючи від застосунків для знайомств та закінчуючи застосунками для фітнесу.

Я вибрав шаблон застосунку для фітнесу, оскільки він найкраще підходив до моєї ідеї проекту, та натиснув “Далі”, щоб продовжити.

Крок 7: Вибрати іконку застосунку

Далі мене запитали вибрати іконку застосунку та колір (це можна змінити пізніше). Мені сподобалася комбінація чорної іконки з галочкою та жовтого фону.

Крок 8: Налаштувати компоненти

Через кілька хвилин мій застосунок був створений!

Я почав з натискання на різні компоненти у попередньому перегляді, щоб зробити стилістичні редагування у правій панелі.

Крок 9: Переглянути екрани застосунку

У лівій панелі я вибрав “Екрани”. Я міг клікувати через всі екрани свого застосунку, щоб зробити редагування.

Крок 10: Доступ до компонентів

Draftbit поставляється з попередньо створеними компонентами, які насправді виглядають добре з коробки. Ми говоримо про кнопки, картки, списки, форми (все те, над чим ви звичайно проводите дні, стилізуючи).

Щоб отримати доступ до цих компонентів, я перейшов до “Блоків” (під “Екранами”) у верхньому лівому куті.

Коли я вибрав “+”, у мене з’явилася можливість додати пустий блок або отримати доступ до галереї блоків. Я вибрав галерею блоків.

Крок 11: Додати компонент

Галерея блоків надала мені широкий спектр компонентів, які я міг додати до свого застосунку (послуги, профіль, зображення тощо). Я навів курсор на один із цих компонентів (картку зображення), щоб імпортувати його.

Після імпортування компонент, який я вибрав, був доданий до моєї бібліотеки блоків!

Щоб додати блок до свого застосунку, я перейшов на сторінку, де я хотів додати його, та вибрав іконку “+” на панелі компонентів. Це відкрило нове вікно, де я міг додати “Біти” (малі елементи, такі як іконки та кнопки) або “Блоки” (де була моя картка зображення).

Я навів курсор на свій блок картки зображення та додав його до свого застосунку.

Крок 12: Налаштувати компоненти

Мій блок картки зображення був доданий до свого застосунку! Тепер я міг вибрати його та редагувати, як хотів.

Крок 13: Встановити проект онлайн

Коли я був задоволений тим, як все виглядало, я перейшов до “Встановити проект онлайн” у верхньому правому куті.

Отже, це основи використання Draftbit для створення застосунку з простим описом та того, як почати його налаштування. Draftbit більш технічний, ніж інші генератори застосунків з AI, тому якщо вам потрібна допомога, найміть експерта Draftbit.

У цілому, Draftbit зробив простим перетворення моєї ідеї у функціональний застосунок з чітким крок за кроком. Мені сподобалася комбінація автоматизації AI з можливістю реальної підтримки людини, що зробило весь процес гнучким та доступним.

Топ-3 альтернативи Draftbit

Ось найкращі альтернативи Draftbit:

Base44

Перша альтернатива Draftbit, яку я рекомендую, – це Base44. Це платформа з низьким кодом, яка створює функціональні застосунки, описуючи вашу ідею. Вона створює фронтенд, бекенд, базу даних та робочі процеси автоматично. Редагування здійснюється через чат з AI або візуальний редактор без необхідності спеціальних навичок.

Base44 використовує AI для автоматизації налаштування бекенду та фронтенду з вбудованим хостингом. Це робить Base44 ідеальним для веб-застосунків та швидких MVP.

Тим часом Draftbit фокусується більше на візуальному проектуванні мобільних застосунків з React Native під капотом. Ви отримуєте повний експорт вихідного коду та однократну публікацію до магазинів застосунків.

Виберіть Draftbit для створення мобільних застосунків з детальним контролем над дизайном, експортом коду та розгортанням до магазинів застосунків. В іншому випадку виберіть Base44 для швидкого створення веб-застосунків з підтримкою AI, бекенд-сервісами та хостингом.

Прочитайте мій огляд Base44 або відвідайте Base44!

Softr

Наступна альтернатива Draftbit, яку я рекомендую, – це Softr. Це платформа без коду для швидкого створення веб-застосунків, внутрішніх інструментів та клієнтських порталів з існуючих даних.

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

Тим часом Draftbit фокусується на створенні мобільних застосунків з експортом коду React Native, гнучкістю дизайну, подібною до Figma, та передачею коду розробникам.

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

Прочитайте мій огляд Softr або відвідайте Softr!

Огляд Draftbit: Правильний інструмент для вас?

У цілому, Draftbit зробив простим перетворення моєї ідеї у повністю функціональний мобільний застосунок. Мені сподобалася чітка послідовність крок за кроком, комбінація автоматизації AI з можливістю реальної підтримки людини.

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

• Base44 – найкращий для швидкого створення веб-застосунків та MVP з підтримкою AI.
• Softr – найкращий для створення веб-застосунків, внутрішніх інструментів чи клієнтських порталів з легкою інтеграцією бази даних та керуванням користувачами.

Дякую за прочитання мого огляду Draftbit! Сподіваюсь, він був вам корисним.

Draftbit пропонує безкоштовний план, який включає все необхідне для початку створення вашого застосунку. Спробуйте його самі та побачите, як вам сподобається.

Часто задавані питання

Чи є Draftbit безкоштовним?

Draftbit пропонує безкоштовний план для початку розробки застосунку. Безкоштовний план включає доступ до всіх основних функцій будівництва, підтримує до 5 екранів на проект, необмежену кількість проектів-чернеток та зображення, згенеровані AI, але має обмеження на публікацію.

Чи є Draftbit хорошим?

Draftbit – це будівник мобільних застосунків з низьким кодом для швидкого прототипування з повним експортом коду React Native. Його інтерфейс з перетягуванням простий для технічних користувачів, хоча деякі функції можуть бути складними. Це ідеально для розробників та команд, які хочуть візуальний дизайн з контролем над кодом.

Де знаходиться штаб-квартира Draftbit?

Штаб-квартира Draftbit знаходиться в Чикаго, Іллінойс, США.

Чи є Draftbit без коду?

Так, Draftbit – це платформа без коду для створення мобільних застосунків з візуальним інтерфейсом перетягування.