Программа для проектирования сайтов и интерфейсов на Айпаде / Хабр

Что в итоге?

Я не жалею, что прошёл такой путь. Если вы захотите повторить мой опыт, оценивайте свои навыки и возможности своей компании. Коллеги в Apiqa пошли мне навстречу, но не факт, что у вас будет так же, поэтому перед тем, как начать подобный переход, обсудите его с менеджментом.

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

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

Стать веб- или Android-разработчиком может любой человек, который поставил себе такую задачу — нужно лишь искать информацию, изучать её, нарабатывать опыт. А вот чтобы посвятить себя iOS, как минимум придётся раздобыть Mac.

Начало: веб-программирование

УрЗПИ занимался разработкой сайтов: «Золотого яблока», «Лиги ЖКХ», ювелирного бренда, салонов красоты и других. Мы сделали масштабный проект Digital Pathology — это платформа для исследования онкологических заболеваний. Параллельно с основной работой я был наставником в двух онлайн-школах: Loftschool и HTML Academy.

В 2021 году якорным клиентом Apiqa стал ПИК-Комфорт — крупнейшая управляющая компания в России — в результате чего определилась специализация, и мы стали заниматься продуктовой разработкой в сфере ЖКХ.

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

«гибридное», «не совсем нативное» приложение

Уточню: термин, вынесенный в заголовок, даже по сути своей не очень верен. Приложения, которые мы получим в результате, самые что ни на есть нативные в смысле того, что они исполняются на той же iOS, на том же железе, что и любое другое ПО для iOS, просто сам процесс разработки позволяет использовать не только предложенные Apple технологии и языки программирования.

Если человек умеет писать, скажем, на JavaScript, и не хочет разбираться в Swift, то Apple ему ничем не поможет (кроме, конечно, хорошего учебника по Swift), а вот вариант написать, условно говоря, приложение на JavaScript, а потом запустить его на iOS, как если бы оно было написано в Xcode (получив, таким образом, некий «гибридный» вариант) существует, и вполне востребован.

Ionic

Ionic – один из самых известных фреймворков для кросс-платформенной разработки. Он построен на базе Apache Cordova, что обеспечивает доступ к различным функциям устройства, таким как геолокация, push-уведомления, камера и прочим, и позволяет разработчикам создавать приложения для iOS и Android с веб-технологиями, такими как HTML, CSS и JavaScript.

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

Ionic Creator представляет собой визуальный редактор, который позволяет разработчикам быстро прототипировать и создавать мобильные приложения методом drag&drop. Наконец, существует Ionic View — бесплатное приложение для iOS и Android, которое позволяет разработчикам легко делиться своим Ionic-приложением с пользователями, тестерами и клиентами без необходимости развертывать приложение в магазине приложений конкретной мобильной платформы.

Разработчики просто отправляют пользователям приглашение из приложения Ionic View, и как только оно принято, пользователь может загрузить и запустить конкретное приложение в своей копии Ionic View — так, как если бы приложение было установлено на его телефоне из магазина приложений.

Увы, есть и «ложка дегтя». Приложения, написанные с использованием Ionic, используют WebView, в результате мы получаем самое натуральное веб-приложение, со своей обычной (обычно не самой впечатляющей) скоростью работы. За счет этого трудно считать его подходящим для создания тяжелых приложений, таких, как игры, либо программы с интенсивным использованием графики. Разработка с Ionic требует хороших знаний Angular, по крайней мере при желании «выжать» из фреймворка как можно больше.

Iwebstudio: создание сайта на ipad стало возможно

Phonegap / cordova

PhoneGap исходно был создан компанией Nitobi. В 2021 году, Adobe приобретает Nitobi и бренд PhoneGap. Adobe затем передает одну из версий PhoneGap (назвав её Cordova), в Apache Foundation, оставив себе бренд PhoneGap и его как продукт. В результате Cordova можно рассматривать как движок, стоящий под капотом PhoneGap (а также некоторе другие гибридные фреймворки). PhoneGap, в свою очередь, добавляет к возможностям Cordova свои, дополнительные, функции.

PhoneGap во многих отношениях очень похож на Ionic. Он так же дает разработчикам возможность создавать кросс-платформенные приложения при помощи веб-технологий, и так же построен на базе Apache Codova. Однако PhoneGap не привязан к какому-то определенному Javascript-фреймворку, поэтому разработчики имеют бОльший выбор, на чем и как они будут создавать свои приложения.

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

React native

‎simdif — конструктор сайтов

Swift 4

Итак:

• Приложения, написанные на Swift 4, станут меньше в размерах.
• Swift 4 получит встроенную поддержку кодирования/декодирования в/из JSON. До Swift 4 приходилось много писать много кода самому, либо использовать сторонние кодогенераторы. Сейчас этот код генерирует компилятор. Отдельное спасибо!
• Возврат к удобной модели работы со строками, которая была реализована в Swift 2 и убрана в Swift 3. Вместе с этим изменением строки станут лучше поддерживать Unicode («чтобы ваши любимые приложения корректно показывали все ваши emoji»), а работа с ними ускорится.
• Проекты, в которых используется и Swift, и Objective-C, будут собираться на 40% быстрее за счёт улучшений в Xcode 9 и его системы сборки.​
• Apple (как обычно) обещает простую миграцию на Swift 4, и одновременную поддержку разных кодовых баз (3.2 и 4.0).

Xamarin

Основанная в 2021 году компания Xamarin, выпускающая семейство продуктов Xamarin через пять лет своего существования была купена компанией Microsoft. Сегодня продукты Xamarin представляют на рынке очень интересный подход к разработке кросс-платформенных мобильных приложений: приложения пишутся на C#, затем Xamarin компилирует его в нативное приложение для iOS, либо для Android, при этом в качестве базовой технологии Xamarin использует Mono, чем кросс-платформенность и обеспечивается.

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

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

Xcode

Текстовый редактор в Xcode переписали на Swift, сделав его надёжнее и быстрее. Можно ли это почувствовать? Да! Подсветка синтаксиса работает (почти) моментально, открытие и навигация по файлу теперь без заметных задержек, а сообщения об ошибках больше не перекрывают исходный код. В beta все выглядит очень приятно, посмотрим, что нас ждет в релизе!

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

(Источник)

Редактор, кстати, научился подсвечивать блоки кода, удобно при изучении большого объёма кода.

(Источник)

Ещё одной важной фичей Xcode 9 стал рефакторинг кода на Swift, Objective-C, Objective-C , C. Рефакторинг позволяет переименовывать классы, переменные, а также дробить методы на менее крупные.

(Источник)

Из менее выделяющихся, но тем не менее полезных фич, можно назвать:

Веб, чистый веб

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

Разница между открытием той же страницы в браузере будет в оформлении экрана: элементы управления браузера (в т.ч. и адресная строка) будут спрятаны, а содержимое страницы окажется выведенным на весь экран устройства. Из неудобств нас, конечно, ждет довольно долгое время открывания такого «приложения» (что связано со скоростью ответа удаленного веб-сервера), но для ряда применений это, думаю, вовсе не проблема.

Дальнейший путь

Моё потенциальное развитие на вебе — это изучение вещей, которые не сильно востребованы в повседневной работе. В iOS же у меня до сих пор много вопросов, есть куда развиваться, расти и учиться. Меня привлекает возможность практического применения навыков в рамках повседневной жизни и работы: нужно для телефона что-то написать — напишу, нужно для Mac — помучаюсь, поразбираюсь и напишу, для часов и Apple TV — тоже.

Сейчас больше занимаюсь разработкой для iOS, но в любой момент могу вернуться обратно. Я слежу за частыми обновлениями веба, получаю release notes и понимаю, куда всё движется. На мобильных платформах обновление происходит фактически раз в год.

Сразу после анонса SwiftUI и новых версий операционок мне захотелось их пощупать. Я установил себе бету… и убил часы — они превратились в кирпич. Чтобы заставить их снова работать, пришлось ещё и телефон обновить до сырой, глючной беты iOS.

В целом подход со SwiftUI мне понравился гораздо больше, чем тот, с которым мы работаем сейчас — Auto Layout. SwiftUI прост и понятен, пишешь код и сразу видишь, что у тебя получается. По сути это схоже с вебом: пишешь код, а в браузере всё сразу появляется, это не требует какого-то долгого компилирования и постоянной сборки приложения.

Как заниматься веб-разработкой на айпаде?

Каким может быть флоу при работе по ssh?

Можно приобрести виртуальный облачный сервер на каким-либо сервисе, подключиться к нему по SSH и затем настроить окружение, установив необходимые пакеты. Это может быть PHP, Python, NodeJS, MySQL, Nginx — всё то, что необходимо для работы сервера. После этого настраиваем Git, создаём папку проекта и начинаем кодить на вашем iPad.

Установив на удалённый сервер текстовый редактор Vim, можно установить к нему различные плагины. Например, одним из самых популярных является NERD Tree, который добавляет удобную структуру папок проекта и навигацию по ним. База плагинов для Vim просто огромна.

Можно настроить его как для работы с бэкендом, так и для фронтенда, включая настройку Eslint и Prettier. Кроме того, для удобства можно установить терминальный мультиплексор Tmux. В отличие от iTerm на Mac OS, он запускает несколько сессий непосредственно внутри терминала, поэтому разделение экранов возможно и при работе по SSH.

Кто я

Привет, Хабр! Я — Саша Калинин, разработчик в Apiqa. Мне всегда нравилось писать сайты, собирать компьютеры, разбираться в сложных технических штуках, но по настоянию родителей я получил экономическое образование и пошёл работать в банковскую сферу.

В 2021 году начал изучать программирование и устроился на стажировку в УрЗПИ («Уральский завод программных изделий»), который позже объединился с интерактивным агентством «Всё ясно», и появилась Apiqa. Так я погрузился в мир веб-разработки. В прошлом году мне захотелось попробовать себя на просторах iOS, и компания пошла мне навстречу.

Мобильная разработка и веб: в чём разница

На вебе весь визуал создаётся с помощью кода. Его можно читать и представлять себе конечный продукт. В Xcode, это IDE для iOS-разработчиков, есть Interface Builder — инструмент, который позволяет верстать при помощи графического интерфейса, перетаскивая курсором элементы — то есть для визуальной части код писать не нужно.

Звучит круто, но работает весьма нестабильно — то глючит, то зависает, то ломается. Иногда происходят конфликты между собственным кодом и Interface Builder — в консоль падает много ошибок, может упасть само приложение, может вообще всё полететь к чертям.

Погружение в мобильный мир

В первый день я попросил нашего iOS-разработчика посоветовать мне, с чего начать. Он оказался отзывчивым и сыграл роль моего наставника, помогая на разных этапах обучения. Ближе к осени я начал читать книги: «Swift. Основы разработки приложений под iOS и macOS» (4-е издание)

Василия Усова и «Swift 3. Разработка приложений в среде Xcode для iPhone и iPad с использованием iOS SDK» (3-е издание) Молли Маскри. Полгода читал, выполнял задания, параллельно что-то писал, получал идеи приложений от наставника, чтобы прокачать скиллы.

Swift мне понравился — он оказался достаточно простым и схожим с TypeScript по синтаксису, на котором я пишу веб. С инструментами для разработки под платформы Apple сложнее — там очень много наследия из времён Objective-C, старого и неудобного системного API. Вторую книгу дочитал со скрипом.

Первый pull request провалился, и мне впервые захотелось всё бросить, но я этого не сделал. И процесс выстроился примерно за полгода: сейчас я пишу и для веба, и для iOS.

Текущие задачи мы распределяем. Мне нравится заниматься чем-то необычным, недоступным веб-разработчику — например, 3D Touch, а вот анимации пока не поддаются, нет у меня дизайнерского чувства. На вебе анимировать интерфейс, конечно, проще — там код получается понятнее, нет сложных заморочек.

Программа для проектирования сайтов и интерфейсов на айпаде

Сегодня я хочу рассказать вам про свою программу для Айпада — СкетчиПад (

ссылка в Айтюнс

,

сайт программы

). Да, я знаю, что Айпад все еще не продается официально на территории России, но во-первых думаю многие хабраюзеры уже обзавелись этим гаджетом у «неофициальных» поставщиков, а во-вторых уверен, что здесь много пользователей из стран официальных продаж.

Итак, что же это за программа? СкетчиПад — это программа для быстрого проектирования веб-сайтов и интерфейсов приложений «на коленях». В текущей версии в распоряжении пользователя 56 шаблонов, из которых вы можете «собирать» сайты и интерфейсы. Большинство шаблонов динамические, т.е. изменяют свой внешний вид в зависимости от ввода пользователя, лучше всего это проиллюстрирует видео:

Из других «вкусностей»:
— выравнивае по гайдлайнам
— управление цветами обводки/заливки/текста
— управление размером шрифта
— экспорт в Фотоальбом, ПНГ и формат Бальзамик Мокапс популярный в кругах разработчиков
— опции заморозки и клонировая шаблона
— возможность создать ссылку из одного документа на другой

После запуска о программе написали отзывы многие зарубежные сайты, что помогло выбиться в Топ 20 раздела «Производительность» американского АппСтора.

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

Желающим написать свой обзор и имеющим американский Айтюнс аккаунт — свяжитесь со мной по адресу app@sketchyapp.com, я вышлю вам промокод.

Надеюсь моя программа поможет вам в вашей работе!

Да, чуть не забыл, в день начала официальных продаж Айпада в России обязательно сделаю распродажу по $0.99. Сейчас она стоит $4.99 — примерно как кружка пива в среднем московском заведении.

Путь от apple

Путь

настоящего джедая

тру iOS-разработчика лежит в плоскости следования идеям Apple. Свежий SDK, свежая же версия Xcode, документация от Apple по технологиям Apple, форумы разработчиков на технологиях Apple – если вдуматься, а что ещё нужно для создания отличного приложения, кроме толики времени?

Новинки Apple озвучивает регулярно. На последней конференции для разработчиков WWDC 2021 были показан новый SDK и новая версия среды для разработке Xcode. Список изменений довольно обширен (тем более в преддверии выхода iOS 11):

Выводы

Конечно, если вы не хотите изучать Vim и вам легче использовать визуальные текстовые редакторы, использование iPad станет не лучшим вариантом для разработки софта, если же с этим проблем нет, можно смело рассматривать iPad Pro как неплохую рабочую машинку. К тому же стоит iPad Pro заметно дешевле MacBook Pro.

Понравился материал? Делитесь мнением в комментариях и не забывайте про наш Телеграм.