Создание iOS приложения. От идеи до результата

Все началось с того, что я огляделся по сторонам и, не увидев автомобиля своей мечты, решил сконструировать его сам
Фердинанд Порше

Привет, Хабр. Хочу рассказать, как создал свое первое iOS приложение и что из этого получилось.

image

Идея


Идея для приложения возникла сама собой: создай то, чем бы ты с удовольствием пользовался бы сам. Я постоянно пишу заметки. Ведь у каждого занятого человека существует определенный набор фактов, которые он получает в течение дня, и которые стоит запомнить. А так как все люди забывают (и это нормально!), то нет лучшего решения, чем просто записать. Я все время чувствовал какое-то неудобство при работе с представленными в AppStore приложениями-заметочниками. Излишняя сложность в управлении, наличие ненужных категорий, нагромождение дополнительной информации — все это мешает приложению выполнять его основную функцию. Плюс ко всему многие из этих вещей выглядят просто некрасиво.

Поэтому, поставив все ставки на простоту и удобство, я приступил к созданию концепции. Модель приложения с единым списком заметок. Все в одном месте, что может быть проще? Если что–то имеет большую ценность или актуальность, совсем не обязательно вешать на него ярлык, ведь достаточно просто переместить более важную заметку в топ списка. Старые и ненужные записи постепенно будут опускаться вниз и в последствии будут удалены пользователем.

Функционал


После того, как концепция была придумана, я выписал основной функционал — те вещи, на которые я хотел бы сделать акцент в управлении:

  • Один главный список для всех заметок;
  • Все действия с заметой должны выполняться одним движением — создание, редактирование, удаление, выделение, перемещение в топ и шаринг;
  • Возможность легко поделиться заметками в Facebook, Twitter, скопировать или отправить на электронную почту;
  • Выделение заметки несколькими цветами, в зависимости от приоритета и срочности;
  • Удобное редактирование в портретной и ландшафтной ориентации;
  • Дневная и ночная темы оформления для удобной работы в любое время суток

Довольно стандартный функционал для подобного рода приложений, согласитесь. Но это только верхушка айсберга, дьявол кроется в деталях.

Инструментарий


Перед тем, как писать код в Xcode, я полностью воссоздал внешний вид приложения в векторном редакторе Sketch. Эта программа отлично подходит для быстрого создания макетов. Для этого приложения доступна масса плагинов, среди них есть Sketch Preview — просмотр артборда сразу на устройстве через программу Skala Preview. Всего лишь нужно скачать бесплатные программы Skala Preview на компьютер и мобильное устройство и установить плагин. После этого выбрать нужный артборд, нажать комбинацию Command+P и уже через секунду внешний вид приложения транслируется на устройство.

Кроме того, в приложении очень удобно создавать скриншоты для публикации в AppStore. Для каждого размера экрана создавался свой набор артбордов, вместе с использованием стилей, время потраченное на форматирование минимально. Но про публикацию чуть позже.

Разработка


В приложении я использовал всего два контроллера – один непосредственно для всех-всех-всех заметок, другой — для отображения небольшого туториала при первом запуске. Работу с базой данных я организовал с помощью фреймворка CoreData.

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

Согласитесь, редактирование текста в iOS реализовано достаточно неудобно. При допущении ошибки в слове для перемещения курсора на нужную позицию необходимо сделать касание и не убирая пальца от экрана, попытаться попасть в выбранную область. К тому же после исправления ошибки нужно вернуть курсор назад в конец строки. В своем приложении я решил переработать механизм перемещения курсора: для того чтобы внести изменение в слово, нужно лишь сделать свайп в зоне между клавиатурой и набираемой фразой не загораживая при этом обзор текста.

Анимации удаление и перемещения в топ я решил реализовать самостоятельно, а визуальное сопровождение максимально приблизить к реальной жизни. Что-то приобрело более высокий приоритет — свайп вправо и заметка перемещается в топ списка. Чтобы удалить — свайп влево и анимация зачеркивания покажет на сколько еще нужно продлить свайп чтоб завершить удаление. При случайном удалении — нужно просто потрясти устройство («Shake»), и заметка вернется на свое прежнее место.

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

Чтобы поделиться заметками из приложения я добавил дополнительный нижний бар, для появления которого необходимо сделать свайп из-под нижнего края устройства (Bottom Edge Swipe). В панели для шаринга собраны все самые важные действия — публикация в Facebook или Twitter, отправка списка заметок по электронной почте, или просто копирование для дальнейшего использования. Механизм очень простой — нужно выделить необходимые записи, после — нажать на нужную функцию. Если вы необходимо вернуться в обычный режим — свайп по бару, но уже вниз.

Переход между дневной и ночной темами я решил сделать автоматическим — почему никто еще не додумался менять внешний вид в зависимости от положения солнца на небе? Все очень просто — после наступления темноты и после восхода солнца тема меняется, при этом пользователю не нужно отвлекаться от создания заметок, ведь приложение всегда будет автоматически подстраиваться под окружающие условия.

Нейминг


Название приложения — самая важная часть при разработке, это первое что видит пользователь в магазине. На хабре есть отличная статья по этому поводу. К подбору имени я решил подойти основательно: для начала я перебрал список 1000 самых популярных слов в английском языке и выписал всевозможные комбинации, которые подходили бы для названия мобильного приложения для заметок, к тому же хотелось уложиться в 8-10 символов. Но при этом не хотелось выбирать название SuperNotes или NotesPlus etc, хотелось чего-то нового. Мне понравилось сочетание mad note, на которое случайно наткнулся в Urban Dictionary:
mad note — excellent, entertaining, surprising, unexpected or awe-inspiring

Сразу же появился и слоган: MadNotes — Note your passion. Поскольку палитра основных цветов у меня уже была готова (белый, синий, красный), я решил сразу придумать подходящую иконку. Ситуация с логотипами для приложений подобного рода плачевная:

image

Поскольку заметки на бумаге пишут карандашом или ручкой, я решил отобразить это на иконке — карандаш повернутый под углом 45 градусов. Получилось вот так:
image

Результат


Поскольку изначально проект задумывался как дизайнерский, я решил поучаствовать с моим приложением в всеукраинском конкурсе Ukrainian Design Awards: The Very Best Of в категории Digital Design. До конкурса оставалось несколько недель, за это время я успел сделать публикацию на Behance, где визуально показал все основные функции приложения, а также записал видео-превью.
Поскольку победителей конкурса не разглашают до самого последнего момента, было невероятно приятно увидеть свою работу на выставке работ победителей — жюри увидели и оценили главную концепцию — минималистичное и, вместе с тем, функциональное приложение для ведения заметок.
image
Приложение находится в AppStore уже несколько месяцев, за это время я сделал шесть обновлений и переписал код на Swift. В последней версии (1.2) добавлена синхронизация с iCloud, так что заметки уже успели перебраться в облако.

Спасибо внимание.
Note your passion
Поделиться публикацией
AdBlock похитил этот баннер, но баннеры не зубы — отрастут

Подробнее
Реклама
Комментарии 23
  • –10
    > находиться
    вот который уже год замечаю, что uanet тащит из рунета очепятки, принимая их за норму языка, и возвращает в рунет, где позорный круг повторяется )
    • 0
      Вы пробовали Sketch Mirror?
      • 0
        Да, пробовал, но очень часто происходили перебои при подключении, поэтому для себя выбрал Skala Preview. К тому же эта программа еще совместима с Photoshop
      • +2
        Спасибо за статью!
        Что можете сказать про Swift в сравнении с Objective C? Процесс переписывания кода был очень трудозатратен? Какие преимущества от Swift?
        • 0
          Переписывал свое приложение c Objective-c на Swift, процесс переписывания не особо трудозатратен, Swift по отношению к Objective-c более читабельный и приятный, и на мой взгляд более удобный и динамичный
          • 0
            Процесс переписывания не трудозатратен вообще. С самого начала настораживали отзывы про сырость и нестабильность языка, но все оказалось отлично: понравился синтаксис, порадовало наличие optionals, tuples, неймспейсов, возможность не ставить точку с запятой после каждой строчки кода :)
            • 0
              значит можно изучать и применять, спасибо :)
          • 0
            А ссылка на апликейшн есть?
              • +3
                Свайп шеринга вызывает системный переключатели. Раздражает
                • 0
                  да, правда, панель для шаринга обязательно переделаю, получилось очень неудобно, сейчас в поиске подходящего решения
                  • 0
                    А еще в виджете не плохо бы сделать кнопку для перехода в приложение. А то я хочу добавить заметку, иду к виджету, а там пусто. Так взял нажал перешел в приложение и/или желательно на экран создания заметки.
            • –1
              omni focus
              • 0
                Скачал, поигрался. Поиск по тексту очень удобно сделан, но если случайно не провести, а тапнуть в пространстве между клавиатурой и заметкой — клавиатура закрывается, и курсор перемещается в конец текста. Смена цвета — мало цветов, и лучше сделать всплывающую палитру из 5-6 цветов. И самый главный недостаток, из-за которого лично я пользоваться не буду это отсутствие синхронизации с стандартными заметками. Так как очень удобно видеть их и на маке и на айфоне.
                • –3
                  Синхронизация с iCloud только для iOS 8 ?! Серьезная причина не ставить на iPhone 4s и ниже.
                  • +1
                    iphone 4s поддерживает iOS8.
                    • 0
                      Для синхронизации необходима поддержка iCloud Drive, которая доступна только для iOS 8 и выше
                    • 0
                      Мне кажется, что с неймингом Вы промахнулись
                    • –1
                      Непонятно, что автор вкладывает в понятие «дизайнерский проект».
                      • +2
                        Я бы посоветовал использовать стандартную UIScrollView для свайпа, чтобы использовать замечательный метод делегата scrollViewWillEndDragging:withVelocity:targetContentOffset:. В таком случае, если использовать targetContentOffset для определения момента, когда свайп был достаточен для удаления, будет учитываться его скорость. Сейчас, чтобы совершить действие, нужно сделать слишком длинный жест.
                        • +1
                          А еще в туториале забыли добавить про undo с помощью shake gesture.
                        • 0
                          Извините, не по теме статьи:

                          А кто-нибудь работал с получением данных о геопозиции от Google Maps в Swift?
                          С Apple-картами я вроде разобрался и всё получается, но мне теперь нужно отправлять запрос в Google, поэтому проще было бы всё в одной системе сделать, конечно:(

                          По теме:
                          Swift, конечно, хорош! Он довольно прост к изучению с нуля, чем я сейчас и занимаюсь. Главное, знать азы объектно-ориентированного программирования. По Swift'у уже много курсов в сети появилось.

                          Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.