Як створити мобільний застосунок з нуля шляхом самоосвіти

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

Привіт, мене звати Дмитро, я хотів би поділитися своїм досвідом «пірнання в IT» з абсолютного нуля.

Ця стаття можливо стане у пригоді:

• потенційним світчерам, щоб надихнути або відлякати їх від IT;
• світчерам, які вже відбулися як розробники, щоб порівняти свій шлях з моїм;
• досвідченим розробникам, щоб відчути, як воно починати з нуля у віці 36 років 🙂.

Для розуміння мого бекграунду напочатку навчання наведу кілька фактів з біографії.

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

У 2014 році захистив дисертацію на тему «Удосконалення технології технічного обслуговування та діагностики колісних пар пасажирських вагонів на основі методу акустичного контролю». До цього часу працюю в університеті.

Початок. HTML / CSS

«Мобільні застосунки пишуть школярі», — мій друг Андрій, Senior С++ developer

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

Мабуть найбільш популярним варіантом «пірнути в IT» залишається навчання на курсах, але я вирішив почати з self-study: дивився профільні відео, слухав поради різних блогерів. Почати рекомендували зі знайомства з HTML / CSS і далі переходити на JavaScript.

Так я і зробив, знайшов два великих (перший і другий) ролики на YouTube і почав за ними навчатися. Крашкурси обирав за кількістю переглядів й одразу англійською, щоб паралельно практикувати мову та запам’ятовувати терміни. Тут я вперше встановив і почав користуватися Visual Studio, звикав до його інтерфейсу та інструментів на простих прикладах коду.

Загалом це навчання дало мені розуміння, що HTML / CSS можна порівняти з Microsoft Word для вебсайтів, де за допомогою HTML ви створюєте контент: пишете текст, вставляєте картинки, таблиці, кнопки, a завдяки CSS робите оформлення: виділяєте текст курсивом, додаєте кольори та інше.

Мабуть уже за пару тижнів інтенсиву я зробив свій перший вебсайт на HTML / CSS, обрав йому домен та завантажив на безоплатний хостинг. Мені сподобалося!

JavaScript

Далі за наміченим планом був JavaScript. Тут я вже не хотів навчатися за рандомними відеороликами і знайшов повноцінний курс JavaScript Basics на Coursera. І не прогадав, курс був справді класним, його розробив William Mead, викладач з University of California, Davis.

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

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

Проєкт KharkivHeritage

Ще в 2016 році ми з товарищем Олександром створили проєкт, присвячений нерухомій спадщині Харкова. Це був мобільний застосунок на основі мапи, де у вигляді маркерів були позначені особняки, прибуткові будинки, дореволюційні заводи та інші цікавинки міста — як популярні, так і нішеві. Про цей проєкт і всі пригоди, пов’язані з ним, уже писав DOU.

Тоді, у 2016-му, я був дуже далекий від розробки й виконував роль умовного продакт-менеджера: писав технічне завдання, підбирав інформацію для бази даних, розміщував застосунок на плеймаркеті та все інше, крім розробки. Сашко писав код на Kotlin, це була його бакалаврська робота.

Тоді створений нами застосунок був гарний та популярний серед користувачів, але з роками у ньому накопичилась низка обмежень: застарілий інтерфейс, націленість тільки на Android, обмеження в організації бази даних та інші. Наприклад, база даних була просто сховищем з файлами на Google Cloud.

Тобто був файл, який містив ідентифікатори, координати та назви об’єктів, файли з текстами та папки з ілюстраціями. Щоб додати новий об’єкт, треба було локально редагувати всі ці файли, а потім завантажувати їх на хмару — словом, трудомістко. Тому я час від часу гадав, як бути з проєктом: доробити його або переробити, сплатити комусь за розробку або розібратись самостійно?

Знайомство з Flutter

У період очікування своєї другої частини курсу JavaScript я поспілкувався з Олександром, який уже був досвідченим розробником мобільних застосунків. Він порадив мені не чіпати старий код, а відразу з нуля переписати проєкт на кросплатформі та «переїхати» на нову базу даних. Однією з переваг такого підходу була можливість згодом втілити мою мрію — випустити застосунок на iOS.

Так я почав своє знайомство з Flutter.

Майже одразу я придбав відповідний курс на Udemy, поставив всі необхідні SDK і взявся за вивчення Flutter, маючи натхнення переробити свій проєкт та здобути актуальні навички в розробці мобільних застосунків.

Перші уроки Flutter зайшли досить легко: коли я зробив декілька завдань, на віртуальному девайсі Android Studio вже світився мій перший елементарний застосунок. Типу такого, що на скрині:

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

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

OOP під час війни

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

Навчався на курсі Udemy, коли вдавалося, то по дві години на день. У грудні 2022 зробив календар, де відмічав свою активність.

Більше часу став приділяти теорії об’єктно-орієнтованого програмування. Розібрався з класами, які потрібні для створення об’єктів і які беспосередньо використовував раніше, але не розумів закладеного в них змісту. Ознайомився з фундаментальними концепами ООР: абстракцією (саме тут було про класи, параметри та методи), інкапсуляцією, спадковістю (тут про створення віджетів шляхом наслідування) та поліморфізмом.

Тоді ж зрозумів, що в ООР працює принцип Easy to learn, hard to master, тому не зациклювався на теорії, а практикувався далі, періодично переглядаючи OOP fundamentals і кожного разу засвоюючи нові їхні сенси.

Консультувався з Сашком щодо стратегічних питань мого проєкту, зокрема для бекенду він порекомендував мені розібратися з хмарним сервісом Firebase. Саме на Firebase я в подальшому зробив базу даних застосунку. Це вже були не окремі текстові файли на хмарі, а колекції «документів» з полями відповідних типів: map, array, string, geopoint та інші. Тобто, можна сказати, створив повноцінну NoSQL database, яка швидше працювала та зручніше наповнювалась.

Ментор з В’єтнаму

Просуваючись у знаннях Dart і Flutter, я часто заходив у глухий кут і днями не міг вирішити проблеми, що виникали. Наприклад, довго працював над методом, який під час натискання кнопки повинен був прописувати лінки з папки з ілюстраціями певного об’єкта на Firebase Storage у відповідні поля документа бази даних Firestore. Мені не вистачало ментора, self-study почало мене виснажувати.

Офлайн-курсів у прифронтовому Харкові не було. Я вирішив шукати собі помічника в мережі й написав у профільній фейсбук-групі пост з таким запитом:

Під постом згодом з’явилося декілька коментарів, у яких учасники групи пропонували допомогу. Серед коментаторів були хлопці з України, Пакистану, Малаві та В’єтнаму. Влад з України не зміг мені допомогти, він володів дещо іншими інструментами.

Пакистанець на все погоджувався, але умовою його допомоги було оформлення запрошення в Україну на роботу — він ще довго потім мені писав в особисті. В’єтнамець на ім’я Phuong Thao Bui погодився мені допомогти просто за спілкування з ним англійською.

Ми зв’язувалися з ним приблизно пʼять разів, кожного разу він допомагав мені з розвʼязанням тієї чи іншої проблеми просто онлайн через Messenger і Teamviewer. Наприклад, була така задача: визначити, до якого об’єкту належить фото в галереї, щоб, по-перше, автоматично підтягнути його назву і, по-друге, перейти до його місця розташування.

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

Внутрішнє тестування на Google Play

Крок за кроком я вивчав курс на Udemy, паралельно писав свій проєкт KharkivHeritage: вирішував поточні завдання й експериментував з дизайном. Зміни накопичувалися поступово і, не зважаючи на сирість проєкту, я вирішив завантажити його на Google Play.

Розуміючи, що до робочої версії ще далеко, і маючи негативний досвід 2016 року, коли в робочу версію ми залили ще зовсім сирий apk застосунку, який просто не запускався в половини користувачів, цього разу я обрав поступовий підхід.

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

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

Milestone

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

Тестування було нешироким — приблизно 40 людей, але воно характерне приємним сюрпризом: застосунок працював стабільно!

Від тестувальників були побажання щодо інтерфейсу та додаткового функціоналу, серед яких: рознести перемикання слайдів та відповіді на питання у вікторині, зробити функцію пропозиції контенту для користувачів, зробити об’єднання маркерів на зумауті та інше. Але для мене й це було значним milestone — я сам написав проєкт з нуля, втілив усі свої задуми й цей застосунок справно працював у інших. 🎉

Робоча версія

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

27 жовтня 2023 року я задеплоїв першу робочу версію застосунку на Google Play.

У версії 1.0.0 було реалізовано такий функціонал:

• головний екран: мапа з кастомними маркерами, під час тапу на маркер відкривається назва об’єкта, під час тапу на назву перехід до екрана об’єкта, епбар, у якому розташовувалися гамбургер-меню з дровером та прапорець для перемикання мов;
• екран об’єкта, слайдер з фото об’єкта і можливістю його збільшення та текстовий опис з автоматичним розставленням абзаців;
• екран listview — список об’єктів з іконками та назвами об’єктів в алфавітному порядку з можливістю переходу до екрана об’єкта або на його локацію;
• екран галерея — слайдер зі всіма ілюстраціями бази даних у випадковому порядку з можливістю переходу до екрана об’єкта або на його локацію;
• екран вікторина з фото випадкового об’єкта та чотирма варіантами відповідей, що перемішані в рандомному порядку, і одна з них — правильна, під час натискання правильної відповіді завантажується наступне питання;
• екран «про проєкт» та кнопка «Вихід»:
• інтерфейс і база даних застосунку реалізовані українською та англійською мовами;
• UI має єдину кольорову гаму та шрифти.

Підсумки

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

Що і казати, важко було зосередитися на будь-якому процесі. Після Слобожанського контрнаступу, коли ЗСУ відігнали ворога від міста та звільнили Харківську область, стало набагато спокійніше, хоч ракетні обстріли продовжувалися.

З грудня 2022 року я почав трекати свій час навчання Flutter і розробки застосунку. Сумарно вийшло 426 годин: це 53 дні по вісім годин або 106 днів по чотири години. Тобто якщо від початку відразу навчатися мобільній розробці, присвячувати цьому процесу по чотири години на день, то, ймовірно, і вийде зробити подібний проєкт десь до півроку.

Застосунок KharkivHeritage можна умовно назвати моїм пет-проєктом, з тією різницею, що основна робота в мене не перетинається з ІТ. У цьому основна складність процесу: постійно перемикатися з однієї сферу в іншу, шукати час та налаштовуватися на роботу. Зараз подібний проєкт я, звісно, напишу набагато швидше, це, мабуть, і є основним КРІ від мого дворічного навчання.

Що далі

Наступним завданням для себе бачу налаштування проєкту під iOS.

В принципі, проєкт уже розроблено на кросплатформі, і не потрібно писати окремий нативний код для iOS, але певні роботи все ж необхідно виконати. Основними бар’єрами на цьому шляху залишаються тонкощі політики Apple, наприклад, абонплата за девелоперський акаунт $200 на рік.

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

Навчаюсь далі Flutter, імплементую в застосунок нові прийоми, наприклад, нещодавно познайомився з State management фреймворком Riverpod, який робить процес керування станом Stateful-віджетів більш зручним і ефективним.

Також нещодавно змінив усі переходи між екранами застосунку з іменних маршрутів (named routes) на звичайні (material page routes), оскільки Flutter більше не рекомендує їх використовувати для більшості проєктів.

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

Розглядаю варіанти створення подібних застосунків для інших міст України, можливо, у співпраці або в команді.

До речі, коли готував цю статтю, прочитав новину про створення Дмитром Дубілетом туристичного застосунку Flat Planet, який також популяризує культурну спадщину міст США, Європи та України. У своєму дописі Дмитро зазначив, що чекає туристичного буму в Україні після перемоги, тому що більше інструментів для різної аудиторії буде, то краще.

Повноцінна або part-time робота розробником для мене також можливий сценарій, хоч зараз маємо перегрітий ринок і вакансій не так багато, та, можливо, ситуація зміниться з часом, а я вже матиму необхідні скіли та портфель пет-проєктів.