Комп'ютерна Академія IT Step - повноцінна IT-освіта для дорослих і дітей. Ми навчаємо з 1999 року. Авторські методики, викладачі-практики, 100% практичних занять.

Ви використовуєте застарілий браузер!

Ваш браузер Internet Explorer, на жаль, є застарілим. Ця версія браузеру не підтримує багато сучасних технологій, тому деякі функції сайту можуть працювати з помилками. Рекомендуємо переглядати сайт за допомогою актуальних версій браузерів Google Chrome, Safari, Mozilla Firefox, Opera, Microsoft Edge

ШАГ логотип

Розробка мобільних додатків для новачків: від ідеї до Google Play і App Store

IT STEP Academy

01.12.2022

1193 перегляда

За даними ресурсу Statista, у 2021 році мобільні додатки завантажили 230 мільярдів разів. А 60% користувачів купують товари або послуги через мобільні додатки. 

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

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

==============================================================

Щоб створити мобільний додаток, потрібні:

  • Ідея.

  • Аналітика.

  • Технічне завдання.

  • Проектування і дизайн

  • Розробка.

  • Тестування та налагодження.

  • Публікація в магазині.

  • Підтримка.

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

 

=============================================================

Ідея. Відповідаємо на запитання

Щоб створити мобільний застосунок, потрібна ідея — що за застосунок і для яких цілей. А головне — чому аудиторія користуватиметься продуктом на рівні онлайн-оплати послуг, планувальників завдань або Tik Tok. 

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

Розглянемо на прикладі — ідея застосунку для замовлення їжі.

Концепція — сервіс громадського харчування, доставка готових страв.

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

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

Завдання продукту — закрити потребу клієнтів замовити їжу з ресторану без походу в заклад. Підвищити відсоток замовлень додому.

Іноді клієнти ставлять мету — заробити побільше. Не вирішивши завдання клієнтів, так не вийде: людина не платитиме за застосунок, зроблений не для її задоволення, користі або розваг.

Відповіді на запитання — частина великого дослідження: опитують потенційну аудиторію, порівнюють аналоги застосунків. Результати збирають у вигляді звітів, графіків, таблиць і списків.

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

 

Аналітика — дивимося, як працюють аналоги

Найімовірніше, ідея застосунку реалізована в іншій країні, місті, районі. Відомий вислів: «Все давно вже придумано». Нам залишається перейняти ідеї і зробити краще або також — залежить від завдань клієнта.

На етапі аналітики дивляться і порівнюють застосунки: що вийшло краще, а що гірше.

Де шукати застосунки:

  • У магазинах Google Play, App Store.

  • За посиланнями на сайтах і в соціальних мережах схожих закладів (ресторан). Беремо як конкурентів по місту чи району, так і заклади навіть з іншої країни.

Результат аналітики — знайшли 5-10 аналогів застосунку. Виокремили переваги та недоліки: перші намагаємося поєднати, а другі — уникати або їх позбуватися. У недорогих застосунках частіше копіюють 1-2 вдалих аналогів, щоб зекономити на часі та грошах.

Технічне завдання 

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

За технічним завданням видно: що очікує клієнт і що потрібно зробити розробникам. 

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

Варфрейми — картинки застосунку без кольору

100 макетів на застосунок — початкова точка навіть для простого застосунку, на кшталт планера

 

Коли технічне завдання погоджено, потрібно передавати роботу. У проєкт вступає UX\UI-дизайнер.

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

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

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

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

Які інструменти використовує UX\UI дизайнер. Для сценаріїв — будь-який застосунок із фігурами та стрілками, як на фото (Miro, Mindmeister, Figma). Для макетів вистачає Figma.

Де навчитися. На курсі «Комп'ютерна графіка та дизайн».

Дизайн застосунку

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

Чому так? Якщо людина не знає про застосунок, але бачила ресторан — у неї складуться потрібні асоціації: десь вона вже це бачила і запам'ятала.

Поки що це заготовки. Пізніше фото і кольори стануть частиною додатку.

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

Які інструменти використовує дизайнер. Графічні редактори — Figma, Photoshop, Adobe Illustrator. У фігмі найчастіше прикрашають макети, у фотошопі редагують фото, а в ілюстраторі малюють векторні зображення. Наприклад, іконки соціальних мереж.

Де навчитися. На курсі «Комп'ютерна графіка та дизайн».

Програмування — серце роботи застосунку

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

За технічним завданням людина бачить обсяги роботи і масштаб розробки.

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

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

Мови програмування для створення додатків.  Java, Kotlin, Python, C++. Вибір залежить від швидкості розробки і платформ: тільки для Android або для всіх телефонів на iOS і Android.

Де навчитися. Якщо хочете пройти весь шлях — від основ до програмування ігор, додатків, сайтів, то радимо записатися на «Розробку програмного забезпечення». Також є короткий курс «Програмування на Python».

Тестування мобільних додатків

Етап розробки — складна річ. Без перевірки продукту запускати його в магазин не можна. Розробники могли щось не врахувати.

Наприклад, на Android працює краще, ніж на iOS; на планшеті застосунок не можна відкрити або він взагалі не відкривається. Тестування — етап, де помилки і баги знаходять і виправляють.

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

Якщо помилок немає — продукт можна показувати аудиторії. Якщо є помилки — тестувальник пише звіт і відправляє ще раз на етап програмування.

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

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

Запуск програми

Збірка закінчується завантаженням у магазин — AppStore для iOS і Google Play для Android.

Після завантаження застосунок проходить модерацію від Google і Apple. Якщо влаштовує швидкість, безпека, відсутність забороненого контенту — застосунок з'являється в магазині.

Можна не публікувати в магазині, а залишити посилання з файлом на сайті компанії. Чим варіант поганий — людині простіше завантажити застосунок у магазині, ніж шукати посилання на сторонніх ресурсах. Тому так роблять рідко.



Автор:

IT STEP Academy

Редакція IT STEP Academy

Що таке CSS і для чого потрібен веб-розробнику

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

Написати HTML-розмітку документа — це лише невеличка частина щоденних завдань веб-розробника в конкретному проекті. Якщо ви знаєте, що таке HTML, які теги використовуються в розмітці і як правильно писати документ — переходьте до наступного етапу.  В статті розповімо, що таке CSS з нуля: як влаштований його код і як прописати стилі в дусі гуру-розробника, а не новачка після безкоштовних інтенсивів. Що таке CSS Кожен HTML-документ має базові параметри для тегів. Наприклад, розташування параграфів для тега [p], точки для ненумерованих списків і ліні

ШАГ логотип

Освіта для дорослих

Як знайти мотивацію вчитися, якщо вона пропала при навчанні

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

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

ШАГ логотип

Хто такий моушн-дизайнер і чим він займається

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

Відеоконтент збільшує продажі: дослідження показує, що двоє з трьох користувачів подивилися рекламу і купили продукт. Допомагає чарівна паличка — моушн-дизайн. Розповідаємо на прикладах: хто такий моушн-дизайнер і чому його роботи затребувані скрізь — від ТБ до презентацій Apple. Хто такий моушн-дизайнер Перенесемось у дитинство. У цей час деякі дітлахи робили перший моушн-дизайн. Хоча про це не здогадувалися. Крім футболу, класиків і плювання з ручок, було кумедним малювати всілякі каракулі. Наприклад, взяти зошит, і на куточку аркуша

ШАГ логотип

Програмування

Що таке CMS і як її правильно вибрати

Якщо ви ніколи не чули про CMS, але зараз це потрібно - стаття допоможе розібратися: чим відрізняється Wordpress від Joomla, де відкривати інтернет-магазин і як вибрати CMS для клієнта.

Кому знадобляться знання про CMS Якщо ви ніколи не чули про CMS, але зараз це потрібно - стаття допоможе розібратися: чим відрізняється Wordpress від Joomla, де відкривати інтернет-магазин і як вибрати CMS для клієнта. 👉 CMS знадобиться для роботи, хобі в Інтернеті або розваг щонайменше в чотирьох ситуаціях: Клієнт просить зробити сайт. Часто розробка сайту на CMS швидша, ніж робити проект з нуля. Вистачить дизайну і верстки, а додавати статті клієнт може сам або з контент-менеджером.  Ви — контент-менеджер, редактор і копірайтер. Більшість інфор

ШАГ логотип