Создание iOS приложения. От идеи до результата
Все началось с того, что я огляделся по сторонам и, не увидев автомобиля своей мечты, решил сконструировать его сам
Фердинанд Порше
Привет, Хабр. Хочу рассказать, как создал свое первое iOS приложение и что из этого получилось.
Идея для приложения возникла сама собой: создай то, чем бы ты с удовольствием пользовался бы сам. Я постоянно пишу заметки. Ведь у каждого занятого человека существует определенный набор фактов, которые он получает в течение дня, и которые стоит запомнить. А так как все люди забывают (и это нормально!), то нет лучшего решения, чем просто записать. Я все время чувствовал какое-то неудобство при работе с представленными в AppStore приложениями-заметочниками. Излишняя сложность в управлении, наличие ненужных категорий, нагромождение дополнительной информации — все это мешает приложению выполнять его основную функцию. Плюс ко всему многие из этих вещей выглядят просто некрасиво.
Поэтому, поставив все ставки на простоту и удобство, я приступил к созданию концепции. Модель приложения с единым списком заметок. Все в одном месте, что может быть проще? Если что–то имеет большую ценность или актуальность, совсем не обязательно вешать на него ярлык, ведь достаточно просто переместить более важную заметку в топ списка. Старые и ненужные записи постепенно будут опускаться вниз и в последствии будут удалены пользователем.
Функционал
После того, как концепция была придумана, я выписал основной функционал — те вещи, на которые я хотел бы сделать акцент в управлении:
Инструментарий
Перед тем, как писать код в Xcode, я полностью воссоздал внешний вид приложения в векторном редакторе Sketch. Эта программа отлично подходит для быстрого создания макетов. Для этого приложения доступна масса плагинов, среди них есть Sketch Preview — просмотр артборда сразу на устройстве через программу Skala Preview. Всего лишь нужно скачать бесплатные программы Skala Preview на компьютер и мобильное устройство и установить плагин. После этого выбрать нужный артборд, нажать комбинацию Command+P и уже через секунду внешний вид приложения транслируется на устройство.
Кроме того, в приложении очень удобно создавать скриншоты для публикации в AppStore. Для каждого размера экрана создавался свой набор артбордов, вместе с использованием стилей, время потраченное на форматирование минимально. Но про публикацию чуть позже.
Разработка
В приложении я использовал всего два контроллера – один непосредственно для всех-всех-всех заметок, другой — для отображения небольшого туториала при первом запуске. Работу с базой данных я организовал с помощью фреймворка CoreData.
После создания базового функционала (создание, удаление, редактирование заметок) я решил улучшить каждую из этих функций.
Согласитесь, редактирование текста в iOS реализовано достаточно неудобно. При допущении ошибки в слове для перемещения курсора на нужную позицию необходимо сделать касание и не убирая пальца от экрана, попытаться попасть в выбранную область. К тому же после исправления ошибки нужно вернуть курсор назад в конец строки. В своем приложении я решил переработать механизм перемещения курсора: для того чтобы внести изменение в слово, нужно лишь сделать свайп в зоне между клавиатурой и набираемой фразой не загораживая при этом обзор текста.
Анимации удаление и перемещения в топ я решил реализовать самостоятельно, а визуальное сопровождение максимально приблизить к реальной жизни. Что-то приобрело более высокий приоритет — свайп вправо и заметка перемещается в топ списка. Чтобы удалить — свайп влево и анимация зачеркивания покажет на сколько еще нужно продлить свайп чтоб завершить удаление. При случайном удалении — нужно просто потрясти устройство («Shake»), и заметка вернется на свое прежнее место.
Для того, чтобы выделить заметку, я использовал LongTapGesture и три основных цвета приложения — белый, синий и красный, которые и сформировали главную палитру цветов.
Чтобы поделиться заметками из приложения я добавил дополнительный нижний бар, для появления которого необходимо сделать свайп из-под нижнего края устройства (Bottom Edge Swipe). В панели для шаринга собраны все самые важные действия — публикация в Facebook или Twitter, отправка списка заметок по электронной почте, или просто копирование для дальнейшего использования. Механизм очень простой — нужно выделить необходимые записи, после — нажать на нужную функцию. Если вы необходимо вернуться в обычный режим — свайп по бару, но уже вниз.
Переход между дневной и ночной темами я решил сделать автоматическим — почему никто еще не додумался менять внешний вид в зависимости от положения солнца на небе? Все очень просто — после наступления темноты и после восхода солнца тема меняется, при этом пользователю не нужно отвлекаться от создания заметок, ведь приложение всегда будет автоматически подстраиваться под окружающие условия.
Нейминг
mad note — excellent, entertaining, surprising, unexpected or awe-inspiring
Сразу же появился и слоган: MadNotes — Note your passion. Поскольку палитра основных цветов у меня уже была готова (белый, синий, красный), я решил сразу придумать подходящую иконку. Ситуация с логотипами для приложений подобного рода плачевная:
Поскольку заметки на бумаге пишут карандашом или ручкой, я решил отобразить это на иконке — карандаш повернутый под углом 45 градусов. Получилось вот так:
Результат
Поскольку изначально проект задумывался как дизайнерский, я решил поучаствовать с моим приложением в всеукраинском конкурсе Ukrainian Design Awards: The Very Best Of в категории Digital Design. До конкурса оставалось несколько недель, за это время я успел сделать публикацию на Behance, где визуально показал все основные функции приложения, а также записал видео-превью.
Поскольку победителей конкурса не разглашают до самого последнего момента, было невероятно приятно увидеть свою работу на выставке работ победителей — жюри увидели и оценили главную концепцию — минималистичное и, вместе с тем, функциональное приложение для ведения заметок.
Приложение находится в AppStore уже несколько месяцев, за это время я сделал шесть обновлений и переписал код на Swift. В последней версии (1.2) добавлена синхронизация с iCloud, так что заметки уже успели перебраться в облако.
Как создать своё первое iOS-приложение. Подробная инструкция от профессионалов
Спокойно, это не так сложно, как может показаться на первый взгляд
Научиться мобильной разработке не так трудно: главное — знать, с чего начать. Ильдар Гильфанов, iOS Teamlead e-legion и эксперт курса «iOS-разработчик» онлайн-университета «Нетология» считает, что разбираться во всех символах кода и языках разработки лучше сразу на практике. Специально для «Цеха» он подготовил пошаговый план действий по изучению разработки на iOS и созданию своего первого приложения.
Купите мак
Не хочется начинать с плохих новостей, но разрабатывать приложения под iOS (как и под другие яблочные ОС) можно только на macOS. Но не спешите ставить крест на карьере iOS-разработчика из-за дорогой техники Apple. Если вы только учитесь, рассмотрите варианты с виртуалками или хакинтошем. Инструкцию по применению можно легко найти в любой поисковой системе.
Три рекомендации при выборе мак:
Изучите Swift
Swift очень дружелюбен к начинающим. Вы в этом убедитесь, написав свою первую программу — Hello World. Это простейшее приложение, которое создают все новички в разработке на первом уроке, оно выводит окно с вашим именем и приветствием. Его можно написать даже, если вы еще не знаете всех инструментов языка.
Благодаря Swift playground в среде разработки Xcode можно начать писать код, не разбираясь в самой среде разработки и особенностях системы, а ещё — на iPad есть приложение Swift Playgrounds. Это настоящий редактор кода, в котором можно разрабатывать небольшие приложения, игры и изучать Swift в интерактивном учебнике.
iOS-приложения разрабатываются в полноценных проектах. В них можно не только писать код, но и работать с ресурсами, интерфейсами, тестами, а также настраивать и публиковать проект.
Не забывайте практиковаться. Если вы обучаетесь самостоятельно, и в доступных вам книгам или вебинарах нет практических заданий, придумайте их сами. Запускайте примеры кода, пробуйте сразу применить на практике полученные знания, экспериментируйте.
Основные фреймворки iOS
Помимо языка разработки вам нужно знать, как создавать пользовательский интерфейс и переходы между экранами, как получать данные по сети и сохранять информацию в памяти телефона, как запустить приложение на симуляторе и как искать в нём ошибки. Вам предстоит много изучать самостоятельно и работать, но старайтесь не отклоняться от своего плана и не закапываться в изучение ненужных вам сейчас технологий.
Для начала сосредоточьтесь на изучении UIKit — это фреймворк для создания интерфейса iOS-приложения. Кнопки, текстовые поля, лейблы, списки, анимации, окна, жесты, drag-and-drop — всё это и многое другое входит в UIKit.
Для создания интерфейса приложения в Xcode есть графический редактор. Он позволяет легко добавлять нужные элементы на экран и задавать правила их построения. Им пользуются не только начинающие, но и профессиональные разработчики. Так что не тратьте время на вёрстку в коде.
Foundation — второй по важности системный фреймворк. С его помощью вы будете работать с датами, ресурсами, файловой системой, данными пользователя и сетью. Часть его обязанностей забрала на себя Swift Standard Library. Например, строки и коллекции. Но Foundation всё равно остается важным компонентом системы.
Планирование
Во время изучения системных фреймворков вы можете начать работу над собственным приложением. Возможно, это будет просто to-do лист. Или у вас на телефоне есть очень полезное приложение, но оно чем-то не устраивает, и вы хотите сделать своё. А может у вас есть супер идея для совершенно нового приложения. В любом случае, для начала вам нужно определиться с тем, что будете делать:
Важными являются базовые функции приложения. То есть те, без которых оно не имело бы смысла. Приложение, состоящее только из таких функций, называется MVP (Minimum Viable Product). Постарайтесь также добавить в список несколько функций, которые отличали бы ваше приложение от конкурентов и представляли бы для пользователя особую ценность.
Пора переходить к дизайну. Начните с карандашных набросков, а если хотите создать несколько настоящих макетов, не обязательно осваивать сложные приложения. Можно ограничиться даже Keynote.
Конечно, вы не сможете заменить профессионального аналитика, маркетолога и дизайнера, но если вы работаете в одиночку, вам придётся самостоятельно выполнить эти шаги. Очень важно определить и зафиксировать объём работы. Ведь любая цель должна быть конкретной и достижимой. Иначе вы рискуете никогда не закончить своё приложение.
Разработка
Постарайтесь заранее подумать над тем, что и как у вас будет реализовано в коде. Конечно, не имея опыта, сложно продумать архитектуру приложения. Вот несколько советов, которые могут вам с этим помочь.
Пора открывать Xcode и приступать к работе. Возможно, вы начнете с экрана авторизации или с основного экрана, а может быть, с создания общей архитектуры приложения. В любом случае, сохраняйте порядок с самого начала проекта:
Вам придётся взять на себя и обязанности тестировщика. Обязательно проверяйте всё, что делаете. Если что-то может пойти не так, оно пойдет не так. Поэтому проверяйте все сценарии, а не только позитивные. Полезно дать своё приложение другому человеку. Это позволит найти ошибки не только в реализации, но и в самой концепции приложения.
Выкладка в App Store
После регистрации аккаунта можно переходить к публикации. Для этого нужно выбрать в Xcode меню Product->Archive. После архивации — нажать кнопку Distribute App и дождаться выгрузки.
Приложение попадает в App Store Connect. На этом сайте вам нужно заполнить информацию о приложении, добавить скриншоты и информацию для ревьюверов Apple. Да, ревью проходить обязательно. Ознакомиться с правилами можно тут. Отчасти это рулетка, но если следовать всем пунктам, то вероятность успешного ревью сильно увеличивается. Для начала изучите основные причины для отказа. Приложение должно:
Обязательно нужно указать тестовый аккаунт для ревьюверов в специальном поле, если в приложении есть авторизация. Если приложение содержит встроенные покупки, то стоит уделить особое внимание к требованиям разделе 3.1.
Если вам отказали, постарайтесь разобраться, в чём причина, и исправьте нарушения. Можно попытаться оспорить решение, но это не всегда удаётся. Если не получится, попробуйте созвониться с ревьюверами и обсудить проблему голосом.
Дальнейшее развитие приложения
Поздравляем! Ваше первое приложение уже в магазине, а вы с надеждой смотрите на счётчик скачиваний. Но работа ещё не окончена. Дальше вам предстоит развивать и поддерживать своё приложение.
После того, как вы разберетесь с основами, переходите к изучению других технологий. GPS, push-уведомления, Apple Pay, Siri, AR, информационная безопасность, работа с медиа и огромное количество third party-сервисов и фреймворков — изучая и используя в работе что-то новое, вы повышаете свою ценность на рынке. Поэтому, если вы хотите быть хорошим разработчиком, никогда не останавливайтесь на достигнутом.
Подводя итог
В статье мы постарались отразить самые базовые вопросы мобильной разработки на платформе iOS и этапы создания простого приложения. Способов дальнейшего погружения в тему есть очень много. Вы можете самостоятельно читать профильную литературу и смотреть обучающие ролики на Youtube, там их легко найти. Можете смотреть вебинары или лекции с преподавателями, которые также наглядно показывают, что такое мобильная разработка.
Мы также предлагаем обратить внимание на дополнительные онлайн- и офлайн-курсы, которые дают готовый план обучения, структурированную информацию и дополнительную мотивацию не забросить обучение. Подходящих курсов сейчас на рынке представлено достаточно много, и если этот вариант кажется вам наиболее подходящим, смело изучайте образовательные программы. Хорошая программа должна предусматривать:
Если все эти пункты есть в выбранном вами курсе, значит результат не заставит себя ждать, и вы напишите не одно свое мобильное приложение.
Делаем приложение для iOS самостоятельно
Разработка приложений для мобильных устройств приносит неплохой доход. Программисты получают за это солидную зарплату, а компании-разработчики активно реализуют софт через магазин приложений AppStore, получая прибыль с каждой продажи. Написать свою программу легко и сложно одновременно. В некоторых случаях для этого нужно быть программистом, а в некоторых – обычным пользователем.
Создать мобильное приложение под iOS с нуля можно двумя способами:
Последний вариант разработки создан для профи, которым тесно в рамках традиционной экосистемы.
Что касается языков Objective-C и Swift: в разработке приложения задействованы оба. Только Objective-C устарел, ведь он появился почти три десятка лет тому назад. На смену ему пришёл Swift, на котором создаётся современный софт, как платный, так и бесплатный. Также профессионалы используют в своих программах кодинг на C++, но это уже выходит за рамки статьи.
Основная среда для разработки приложений
Независимо от того, под какое устройство создаётся приложение, программисту потребуется среда разработки Xcode. Эта среда является универсальной – в ней делаются приложения для смартфонов, планшетов, компьютеров и прочих устройств от Apple. Скачивается она через магазин приложений Mac App Store, версии для Windows нет. Распространяется программа бесплатно, в ней уже присутствует эмулятор для тестирования софта.
Последняя версия среды была выпущена 27 марта 2017 года – номер версии 8.3. Также для обновлённого софта характерна поддержка новых функций и более быстрая работа.
Каждая новая версия предоставляет всё новые возможности.
Пример разработки приложения
Данный пример показывает основы разработки программы «Hello World» — процесс создания прописан пошагово, что позволяет повторить его самостоятельно. Инструкция предусматривает использование объектно-ориентированного языка программирования Objective-C. Многие свои возможности он унаследовал от языка С, но в нём используется динамическая система типов данных, а не строго типизированная. Для более детального ознакомления рекомендуется поработать с книгой «Сила Objective-C 2.0. Эффективное программирование для iOS и OS X». Автор издания – Мэтт Гэлловей.
В мире программирования принято начинать изучение новых языков с программы «Hello, World». Она выведет на экран кнопку, при нажатии на которую на нём будет появляться и исчезать данная надпись. Для начала необходимо выбрать тип приложения:
Предусмотрены и ещё два типа – это Sticker Pack Application с изображениями для iMessage, а также iMessage Application для создания дополнений для iMessage или разработки приложений-аналогов.
Для «Hello, World» выбирается первый тип – это Single View Application. Выбираем его и задаём имя проекта, указываем язык Objective-C, в списке Devices выбираем пункт «Universal» (софт будет работать на iPad и iPhone), снимаем флажки Include Unit Tests и Include UI Tests и сохраняем проект.
Работа с текстом и кнопкой
На следующем этапе делаем интерфейс программы – разворачиваем меню ShowLab и выбираем пункт Main.storyboard, после чего откроется окно с макетом устройства (Interface Builder). В панели компонентов выбираем два компонента – это Button (кнопка) и Label (надпись). Разворачиваем список свойств, нажав на Show the Attributes Inspector, и настраиваем компонент Label – выбираем свойство Text, в выпадающем списке выбираем пункт Plain и вводим будущую надпись «Hello World». При необходимости меняем границы надписи и центруем её по горизонтали через Size Inspector – открываем панель и выбираем в выпадающем списке Arrange пункт «Center Horizontally in Container». Здесь необходимо поменять его свойство с Text на Switch.
Работа с кодом
Следующий пункт – необходимо создать связь между кодом и используемыми в приложении элементами. Последовательность действий:
Язык Swift
Язык программирования Swift
Написанное приложение можно продавать через App Store. Также возможно бесплатное распространение. Независимо от способа распространения своих приложений, вы должны приобрести специальную лицензию.
Сервисы для создания приложений под iOS
Человеку, малознакомому с программированием, будет сложно сделать собственную программу. На изучение языков программирования уйдёт уйма времени. Чтобы создать приложение под iOS максимально быстро, можно воспользоваться специальными конструкторами. Рассмотрим их более подробно.
Сервис iBuildApp
Сервис Apps Globus
Интерфейс Apps Globus
Конструктор App2b
Здесь разрабатываются интернет-магазины, каталоги товаров, онлайн-журналы и многое другое. Пользователей ждёт множество готовых шаблонов, настраиваемых под свой вкус. Ваш софт сможет работать с графикой, мультимедийными файлами, push-уведомлениями, навигацией, социальными сетями и многим другим. Запускайте фотогаллереи, онлайн-витрины, каталоги музыки и прочий софт буквально в несколько нажатий мышью.
Основная ориентация сервиса – на бизнес-софт. Разработка здесь бесплатная, но нужно оплатить доступ к конструктору, техподдержку, доступ к статистике и размещение программ в App Store. Стоимость одного приложения – 9990 рублей.
Конструктор New Digital Times
Конструктор New Digital Times
AppsMakerStore
Если нужен реально красивый и функциональный софт, обратите своё внимание на конструктор AppsMakerStore. Это мощный бизнес-инструмент, позволяющий создавать приложения для бизнеса, причём своими руками – без помощи третьих лиц. На выбор пользователей представлено множество шаблонов:
Таким образом, здесь разработчиков ждёт внушительный функционал по разработке программ различного назначения.
Команда сервиса поможет опубликовать ваше приложение в App Store без сложных действий с вашей стороны – вам остаётся только создать софт.
В чём лучше разрабатывать приложения
Ответить на этот вопрос довольно сложно. Поэтому мы составили сравнительную таблицу:
Сервис | Плюсы | Минусы |
iBuildApp | Много шаблонов для приложений, русскоязычный интерфейс, круглосуточная поддержка | Нужно платить деньги за разработку, причём немаленькие |
Apps Globus | Поддержка русского языка, доступные цены на публикацию и поддержку программ, множество инструментов для разработки софта, гибкость конструктора, доступ к аналитике, предоставление исходных кодов | Мало доступных шаблонов |
App2b | Множество инструментов для разработки – от простых страниц до интернет магазинов, собственный хостинг, инструменты для продвижения приложений | Не самый информативный сайт, для получения подробной информации по разработке необходимо позвонить по контактному телефону |
New Digital Times | Не нужно платить деньги, возможность разработки приложения через веб-интерфейс или приложение для компьютера. Можно создать магазин, журнал, есть хостинг для данных | Мало модулей, многие из них придётся заказывать у программистов сервиса |
AppsMakerStore | Гигантское количество профессиональных отточенных шаблонов позволит создать продукт любого уровня сложности. Множество дополнительных модулей. Поддержка множества платформ. | Трудно понять ценовую политику |
Создать приложение с помощью сервисов очень просто – разработка не займёт у вас много времени. Все действия здесь производятся в визуальных редакторах, результаты можно посмотреть без публикации в App Store. Также почти все сервисы поддерживают софт под Android – вы сможете охватить сразу две мобильные платформы. Такая возможность актуальна для тех, кто занимается бизнесом и продвигает его в интернет-среде.
Но в конструкторах возможно создание далеко не любых программ. Кстати, мобильные игры создать с помощью конструкторов не удастся. Поэтому изучение языков программирования откроет перед вами широчайшие возможности по работе с софтом для продукции Apple.
Знания можно черпать из следующих источников: