Курс: iOS-программирование для дизайнеров

Задача
Научиться работать в Xcode: узнать основы разработки мобильных приложений для iOS, научиться делать прототипы и разобраться с анимацией.

С 4 по 13 июля я проходил «iOS-программирование для дизайнеров» — это курс для дизайнеров, которые хотят разобраться в том, из чего состоит разработка мобильного приложения для айфона.

Автор курса Антон Ловчиков — дизайнер из Злых Марсиан. Было четыре занятия, каждое по два с половиной часа. Ещё была домашка: сделать калькулятор.

В этой заметке расскажу, чему научился.

К концу курса у меня получилось написать калькулятор, который умеет выполнять простые арифметические действия:

В нём много недочётов. Калькулятор не умеет выполнять многие функции, которые есть в стандартном приложении, но это не главное. Главное — благодаря работе над калькулятором я разобрался, как работать с Xcode и усвоил материалы занятий.

Процесс создания приложения:

История изменений калькулятора

  1. Накидал кнопки и текстовое поле
  2. Задал названия для кнопок и действий
  3. Настроил стили и констрейнты
  4. Начал работать с кодом: задал границы кнопок, добавил обработку нажатий и логику вычисления значений
  5. Добавил градиенты для областей клавиатуры, настроил правильные отступы для кнопки «0» и текстового поля при разных размерах экранов
  6. Добавил историю вычислений

Теперь подробнее.

Констрейнты

Для смартфонов на iOS есть три размера экранов:

  1. 640×1136
    iPhone 5, 5c, 5s, SE
  2. 750×1134
    iPhone 6, 7
  3. 1220×2208
    iPhone 6 Plus, 7 Plus

Под каждый размер экрана необходимо настроить правильное поведение элементов, чтобы было красиво как на SE, так и на 7 Plus. Для этого нужны констрейнты. С их помощью можно сказать компилятору, каким образом должны задаваться размеры элементов и их положение на экране.

Например, все квадратные кнопки калькулятора имеют ширину 25% от ширины экрана и соотношение сторон 1:1.

Так выглядит мой калькулятор на разных экранах:

Настройка адаптивности элементов на экране

Констрейнты для калькулятора начинал делать три раза. Первый раз накидал все кнопки. Получилось быстро и красиво. Добавил сразу все констрейнты, появилась куча ошибок, запутался и начал сначала.

Во второй раз добавлял кнопки по очереди. Получилось долго, кропотливо, но результат получился нормальный. На разборе домашки Антон дал пару советов как можно ещё лучше настроить адаптивность приложения.

Для закрепления материала создал новый проект и ещё раз добавил кнопки и констрейнты. На этот раз до меня наконец-то дошла вся магия. И это классно!

Выглядит немного страшно, но если разобраться — всё просто.

Программирование

В 2014 году компания Apple выпустила язык программирования Swift. Раньше приложения писали на Objective-C. Он сложный и запутанный.

Swift — это легкий и понятный язык программирования. Удивился, насколько быстро вник в него. Кроме языка программирования необходимо уметь работать со стандартными библиотеками, которые используются для написания приложений под iOS, watchOS, macOS и tvOS.

Пример кода приложения:

Можно увидеть, как сделал отступы для кнопки «0» и текстового поля, в зависимости от размера устройства. Выглядит понятно и просто, особенно если знакомы с JavaScript.

Пример по сложнее. Задаю градиент для правой панели калькулятора.

Пример кода

Быстрый прототип

В Xcode можно делать не только полноценные приложения, но быстрые прототипы. Нарезаем дизайн экрана на картинки и вставляем их в Image View. Настраиваем анимацию и переходы.

Прототипирование в Xcode похоже на смесь Principle и Framer Studio.

В Principle можно быстро накидать кликабельный прототип и настроить анимацию появления элементов на экране. Если необходимо сделать что-то по сложнее, например, с вводом данных, Principle не подойдёт. А вот Framer Studio справится с этой задачей.

Проблема в том, что придется изучать два инструмента.

В Xcode можно сделать как простой прототип, так сложный. Большим плюсом прототипов в Xcode является то, что исходники проекта можно передать разработчикам и им не нужно устанавливать новый для них инструмент и разбираться в нём.

Они просто открывают привычный для них проект в Xcode и вытаскивают оттуда необходимые значения анимации, элементы и внедряют их в своё приложение.

Σ

Какую пользу вынес для себя:

  1. Понял, как происходит настройка адаптивности в мобильном приложении на стадии разработки. Буду стараться заранее продумывать дизайн элементов таким образом, чтобы разработчикам было проще адаптировать дизайн на все разрешения экранов.
  2. Узнал основы программирования на Swift: классы, наследование, прототипы и делегирование.
  3. Увидел, как можно делать быстрые прототипы в Xcode. Это не так уж и сложно. В следующих своих задачах попробую сделать прототип в Xcode. Посмотрим, что на это скажут разработчики.

Что дальше?

  1. Сделать своё небольшое мобильное приложение: нарисовать дизайн, запрограммировать и выложить в AppStore.
  2. Найти похожий курс, но про Java и Android Studio, чтобы понимать, как разрабатываются мобильные приложения под Android.

°°°

Спасибо Антону за полезный курс и спасибо за то, что отвечал на вопросы в нашем учебном чате, даже в полпервого ночи.

Если вам стало интересно разобраться, как делают мобильные приложения для iOS, подпишитесь на почтовую рассылку на странице курса.

Когда Антон определится с датой второго набора, вам придёт письмо.

°°°

Курс непростой. В начале нас было десять человек. К третьему занятию добралось только пятеро. На последнем было только двое.

Если хотите записаться на следующий набор — подготовьтесь.

  1. Выделите время на лекции и домашку. Занятия начинались в 19:00 по московскому времени. Как раз после окончания рабочего дня. Некоторые учащиеся пропускали занятия из за того, что в это время ехали домой в метро.Во время занятий я закрывался в переговорке на работе. Домой уходил только в 23 часа, но это того стоило. Поэтому спланируйте свой день так, чтобы на время лекции вы были в комнате и вас никто не отвлекал.Многие не успевали делать домашку, так как на работе аврал. Постарайтесь договориться, что во время учебы не сможете работать сверхурочно. Постарайтесь эффективней выполнять задачи во время рабочего дня. Используйте помидорки. Отложите второстепенные занятия: твитер, общение в фэйсбуке, удалите инстаграм.

    Занятия шли по вторникам и четвергам. В среду вечером занимаешься домашкой, которую показываешь в четверг. На курсе между занятиями только одни выходные и лучше всего посвятить их работе над домашкой. Другого времени разобраться в новом материале не будет.
    Отговорки «сделаю потом» — не работают.

  2. Заранее подучите Swift. Если у вас есть небольшой опыт в программировании хоть на каком-то языке, то всё нормально. У меня есть опыт работы с JavaScript, этого хватило, чтобы понять основы Swift.Если опыта нет, заранее разберитесь с основами языка. Так проще будет воспринимать материал на занятиях. Советую посмотреть:
    • «Язык программирования Swift» от Hexlet
      Рахим Давлеткалиев в коротких видео рассказывает о возможностях языка. На примерах объясняет как работают операторы, массивы, классы и т.д.
    • The Swift Programming Language от Apple
      Официальная книга про Swift от Apple. Если владеете достаточным знанием Английского языка, почитайте.

Успехов!

Создание сферической панорамы, с помощью приложения «360 панорама»

В комментариях к фотографиям в инстаграме у меня часто спрашивают, как я делаю такие сферические панорамы:



Ответ прост — это приложение для айфона называется 360 Panorama, стоит оно всего 33 рубля.

Приложение поддерживается всеми ай девайсами от iPhone 3GS до iPhone 5, iPod touch 4 и 5, iPad 2, 3, 4 и iPad mini. Даже для некоторых девайсов на блекберри есть приложение. А вот поддержка андроида, к сожалению, отсутствует, но, думаю, не трудно будет найти похожее по функционалу.

Ребята из Occipital специально записали видео, где показали пример создания панорамы:

Оно немного устарело. Можно не просто провести на 360 градусов смартфон, но и заснять верх и низ, вот тогда вы получите настоящую сферическую фотографию.

После этого вы можете перевести отснятую панораму в режим Stereographic. А потом сохранить в фотопоток или отправить в любимую социалочку:





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

Код вставки панорамы на сайт выглядит следующим образом:

// 859Ntb - id панорамы, который можно будет узнать после публикации в сервисе
// 800 и 480 - размеры вставляемого окна для панорамы
<script src="http://occipital.com/360/embed.js?pano=859Ntb&width=800&height=480"></script>

Выглядеть она будет вот так:

Если зайти с телефона по ссылке http://360.io/859Ntb, то будет еще круче 🙂

Теперь вы знаете, как делать крутые сферические панорамы на свой айфон. Удачных фотографий!

Разблокировка компьютера стуком по айфону, с помощью приложения Кнук

Прежде чем начать читать статью, посмотрите промо-ролик приложения.

Посмотрели? Круто, правда? Вот и я так же подумал и купил приложение в App Store за 129 рублей.
Потом скачал с официального сайта Knock Software программу для мака и установил ее. Процесс настройки достаточно простой, поэтому описывать не буду.

После запуска в панели задач появилась иконка приложения Knock, по клику на которую доступно немного опций:

Приложение Knock на компьютере Mac OS Maverick

Приложение для айфона недалеко ушло от своего собрата — оно тоже с минимальным набором настроек. Knock показывает состояние подключения.
Если его нет, то нужно связаться с приложением на маке через блютус. После этого приложение на айфоне начнет показывать состояние экрана и, если потянуть иконку компьютера вниз, то можно разорвать соединение.


Монитор Mac OS активен
Монитор Mac OS заблокирован

Настало время воспользоваться приложением. Вот тут меня ждала засада. Ребята из Knock Software схитрили на видео.

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

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

Когда ты находишься дома, то вероятность подключения к домашней вайфай сетке куда больше, чем включение блютуса. Честно сказать, я вообще не люблю блютус.

Что мы имеем на выходе?

Сомнительное удобство использования разблокировки мака постукиванием по экрану айфона, как иногда стучат по дереву, чтобы не сглазить. И да, у меня не всегда получается с первого раза правильно стукнуть 🙁

Так в идеале происходит процесс разблокировки мака через постукивание экрана айфона:

Процесс разблокировки экрана на Mac двойным постукиванием

Для тех, кто все же решился опробовать приложение, знайте, что вам нужен Макбук Эйр не раньше 2011 года, Макбук Про не раньше 2012 года, айМак не раньше 2012 или Мак Мини не раньше 2011. А если у вас Мак Про, то свяжитесь со мной, я хочу взять у вас автограф!

Потратьте 129 рублей на что-нибудь получше, например, 300 грамм рульки (это такое копченое сало, очень вкусное — советую попробовать!)

Мой баланс

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

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

Зачем?

Удобно, не надо обновлять баланс самостоятельно. Иконка приложения всегда на виду.

Похожие