Здравствуйте, дорогие читатели. В этом уроке мы научимся: Добавлять иконку приложения; Добавлять картинки в приложение. Разберем, как пользоваться “Assets”. Откройте проект “Warehouse”. В панели навигатора откройте модуль “Assets.xcassets”.             Нажмите “App Icon”, вы увидите область с контейнерами для добавления иконок приложения. На рисунке выше  нас интересуют два контейнера “iPhone App iOS 7-10 60pt”, тут задается иконка приложения. В разделе “iPhone Notification iOS 7-10 20pt” задается иконка, которая будет отображаться при получении “Push” уведомлений от вашего приложения в заголовке сообщения. В разделе “iPhone Spotlight – iOS 5,6 Settings – iOS 5-10 29 pt”  задается иконка приложения, которая будет отображаться в диалоге поиска вашего телефона (если приложение под iOS 5 или 6) и в настройках телефона. В разделе “iPhone Spotlight iOS 7-10 40pt”  задается иконка, которая будет отображаться в диалоге поиска вашего телефона. Теперь давайте разберем, что означают метки “2х” и “3х”.  Метки- это размер иконок. Например, ваша исходная иконка имеет размер “16х16”, для нее будет задана метка “1х”. Соответственно, для метки “2х”  будет размер “32х32” (16+16 x 16+16), т.е. в два раза больше исходной иконки под меткой “1х”. Для метки “3х”  будет размер “48х48” (16+16+16 x 16+16+16), т.е. в три раза больше исходной иконки под меткой “1х”. Принято именовать иконки следующим образом: Иконка с меткой 1х используется для iOS ниже 7 версии. Вам ее не нужно делать, так мы используем язык программирования “Swift” в нашем приложении и доступен он, только начиная с версии “iOS 8”, не ниже. В “iOS” ниже версии 8  доступен для использования язык программирования “Objective C”, его я не буду разбирать вообще, поскольку у него не удобочитаемый синтаксис и для новичков он будет сложным. Т.е., должно быть в таком формате “[Имя исходной иконки][Размер в “pt”][Метка].[Расширение файла иконки]”. Таблица с размерами и метками иконок для раздела “iPhone Spotlight – iOS 5,6 Settings – iOS 5-10 29 pt”: Таблица с размерами и метками иконок для раздела “iPhone Spotlight iOS 7-10 40pt”: Таблица с размерами и метками иконок для раздела “iPhone App iOS 7-10 60pt” (иконка нашего приложения): Таблица с размерами и метками иконок для раздела “iPhone Notification iOS 7-10 20pt”: Итак, приступим к созданию нашей иконки. Скачайте  файл “warehouse.png” (размер 512х512)  ниже на странице себе на компьютер. Откройте любой графический редактор, которым умеете пользоваться и создайте файлы иконок в соответствии с 4 разделами, приведенными выше в таблицах. Имена файлов должны соответствовать тем, что в 4 таблицах выше. Как пользоваться графическим редактором, рассматривать не стану. Под OS X  есть бесплатный графический редактор “Gimp”, есть платный “Adobe Photoshop”. После обработки данного файла в графическом редакторе должны получиться на выходе следующие файлы: Отлично с этим справились, теперь необходимо перетащить из “Finder” иконки “*.png” в соответствующие места в “App Icon” по разделам. Выполните это, должно получиться вот так: Теперь закройте проект “Warehouse” и откройте его снова. Обратите внимание на иконку приложения, которая появилась в панели инструментов. Запустите приложение. Затем выполните комбинацию клавиш “Shift + Command + H”, чтобы выйти на рабочий стол устройства. Обратите внимание на иконку приложения “Warehouse”, она тоже изменилась. А вот так она выглядит в диалоге поиска “Spotlight”: Теперь разберем, как добавлять картинки в ресурсы и отображать их в элементах управления. Тренироваться будет на списке товаров. Прилагаю список картинок, которые мы будем использовать в ресурсах. Скачайте эти картинки, затем выделите весь список. Откройте модуль “Assets.xcassets” и перетащите из “Finder” в пустую область под “App Icon” выделенный список загруженных картинок. Должно получиться вот так: Все бы хорошо, если бы только не нововведения для картинок, начиная с iOS 10 и Xcode 8. До iOS 10, добавляя картинки подобным образом в ресурсы, все без проблем загружалось в AppStore. Но вот начиная с iOS 10, было принято, чтобы картинки были в двух разных форматах “sRGB” и “Display P3”, предпринято это было для возможности управления насыщенностью цветов. Более подробную информацию, как к этому пришли, можно получить, изучив “WWDC 16, Session 712, Working with Wide Color, Understanding and optimizing for Wide Color Gamut Displays”. Если использовать версию среды разработки, например, Xcode 7.3.1, то в ней с минимальной версией приложения iOS 8.0 не надо делать никаких конвертаций с картинками, все без проблем загружается в AppStore. Если же загружать без конвертации “sRGB and Display P3” со среды разработки “Xcode 8”, то на этапе валидации мы получим ошибку “Invalid Bundle. The asset catalog at '$path' can't contain 16-bit or P3 assets if the app is targeting iOS releases earlier than iOS 9.3”. Да, с одной стороны можно было поставить минимальную версию iOS 9.3, ничего не конвертировать и отправить приложение в AppStore, но тогда бы я потерял пользователей, у кого iOS 8, 8.1, 8.2, 8.3, 9, 9.1, 9.2, 9.2.1. Пришлось разбираться, как это исправить, чтобы выполнить загрузку в AppStore, и при этом минимальная версия так и осталась iOS 8. Для конвертации изображений в OS X есть специальная бесплатная встроенная утилита “ColorSync Utility”. Картинки, которые я показывал выше, имеют формат “RGB”, чтобы убедиться в этом. В “Finder” выполните клик правой кнопкой мыши на картинке, например, “tool001.png” и в контекстном меню выберите пункт “Get info”. Обратите внимание на свойство “Color space”, его значение “RGB”. Создайте где-нибудь две папки с названиями “Tools_sRGB” и “Tools_Display_P3”. В эти папки мы будем складывать сконвертированные картинки. Картинка формата “Display P3” (16 битная) будет автоматически подгружаться, если у пользователя iOS 10, если же у пользователя версия операционной системы ниже iOS 10, будет браться картинка формата “sRGB” (8 битная). Если вы добавите только картинки в формате “sRGB”, тогда, если у пользователя операционная система iOS 10, эти картинки будут каждый раз конвертироваться из формата “sRGB” в формат “Display P3”. Добавить только картинки формата “Display P3” и не добавить картинки формата “sRGB” нельзя, надо или в обоих форматах, или только в формате “sRGB”. Если вы обратили внимание, когда добавляли картинки в “Assets.xcassets”, а затем выделили одну из добавленных картинок, с правой стороны от нее был отображен контейнер “Universal”. Давайте включим поддержку “Display Gamut”. Выделите “tool001.png”, в панели свойств откройте вкладку “Show the attributes inspector”. Найдите свойство “Gamut”, в нем сейчас установлено значение “Any”, установите значение “sRGB and Display P3”.  Перейдите в “Finder”, теперь мы должны сконвертировать исходные загруженные картинки в два формата “sRGB” и “Display P3”. Для этого в “Finder”  выделите картинку “tool001.png”, выполните по ней клик правой кнопкой мыши и в контекстном меню выберите “ColorSync Utility.app”. В открывшемся приложении “ColorSync utility”, внизу в выпадающем списке, измените значение “Match to Profile” на “Assign Profile”. Затем нажмите на выпадающий список “None” и выберите “Display”, затем “sRGB IEC61966-2.1”. Кнопка “Apply” станет активной, нажмите на нее, затем закройте окно ColorSync “tool001.png”, нажав на красную кнопку в правом верхнем углу окна. Вам будет предложено сохранить изменения. Сохраните изменения. Теперь перейдите в папку “Tools_sRGB”, которую мы создавали ранее, и выделите файл “tools001.png”, нажмите на нем правой кнопкой мыши и в контекстном меню выберите пункт “Get info”. Обратите внимание на свойство “Color profile”, оно теперь имеет то значение “sRGB IEC61966-2.1”, которое мы устанавливали через утилиту “ColorSync”. Теперь проделайте такую же операцию, еще раз с исходным файлом изображения “tool001.png”, но на этот раз выберите “Color profile” - “Display P3”. Нажмите кнопку “Apply” и закройте окно ColorSync “tool001.png”, сохраните изменения в папку “Tools_Display_P3”. Затем откройте “Finder”, перейдите в папку “Tools_Display_P3”, выделите файл “tool001.png”, нажмите на нем правой кнопкой мыши и в контекстном меню выберите пункт “Get info”. Обратите внимание на свойство “Color profile”, там установлено значение “Display P3”. Теперь перейдите в Xcode, откройте модуль “Assets.xcassets”, выделите изображение “tool001” и перенесите из “Finder” картинки в контейнер. В поле “1x sRGB” перетащите картинку “tool001.png” из папки “Tools_sRGB”. В поле “1x Display P3” перетащите картинку “tool001.png” из папки “Tools_Display_P3”. Должно получиться вот так: Остальные картинки сконвертируйте самостоятельно в форматы “sRGB” и “Display P3” по той же схеме, что мы делали выше. Ниже вы можете скачать две сконвертированные картинки. Также добавим в “Assets” еще картинку фона страницы авторизации. Она имеет размер “750х1334” и называется “warehouse-view.png”. Картинку тоже необходимо сконвертировать в два формата “sRGB” и “Display P3”. В панели навигации откройте модуль “Main.storyboard”, найдите View с именем “View Controller”, из панели компонентов перетяните на View  компонент “ImageView”. Растяните его на всю область View. Нажмите кнопку “Pin” и задайте такие ограничения: Нажмите кнопку “Add 4 Constraints”. Измените цвет кнопки “Вход” на оранжевый, цвет текста “Нет ошибок” на белый. Откройте модуль “SuppliesViewController.swift”. Обновите модель “supplies”, как показано ниже (заполнены свойства “productImage”): Обновите метод “cellForRowAt indexPath”: Тут изменения только на 92 строке, в ячейке есть встроенный компонент “ImageView”, мы обращаемся к его экземпляру и от него инициализируем свойство “image”. В инициализаторe “UIImage” мы задаем аргумент “named”, название “Image Set” из “Assets”. Запустите приложение. На этом мы завершаем данный урок. Большой получился урок, но тему “Assets” надо было обязательно рассмотреть, чтобы в будущем к ней уже не возвращаться. В следующем уроке мы рассмотрим, как работать с библиотекой “Alamofire” и интегрируем ее в наше приложение. Создадим тестовый сервер, в который добавим таблицу пользователей для авторизации, а в последующих уроках переведем работу списка продуктов на сервер и перепишем клиент на интеграцию с сервером.

Здравствуйте, дорогие читатели. В этом уроке мы научимся: скрывать клавиатуру мобильного устройства для полей “Text Field”, “Text View”; добавлять  различные типы клавиатур цифровая, e-mail, URL; добавлять панель инструментов на клавиатуру мобильного устройства; добавим панель поиска в список товаров; добавим предварительный просмотр на ячейки списка товаров с использованием аппаратной технологии 3D Touch. Откройте проект Warehouse. В панели навигатора откройте модуль “ViewController.swift”, нам необходимо унаследоваться от протокола “UITextFieldDelegate”: Теперь реализуем этот протокол: Разберем код построчно. На 43 строке мы реализовали метод “textFieldShouldReturn” протокола “UITextFieldDelegate”. Метод вызывается, когда вы на клавиатуре мобильного устройства нажимаете кнопку “Return” (Done, Next). Метод принимает один аргумент, который содержит экземпляр текстового поля, для которого была вызвана клавиатура. Возвращаемое значение данного метода говорит о том, скрывать клавиатуру или нет. Мы возвращаем значение “true”, означающее, что мы хотим скрывать клавиатуру. С 44 по 51 строку идет поиск активного в данный момент текстового поля, куда пользователь установил курсор. Данный код мы добавили, чтобы сделать следующую функциональность. Пользователь ставит курсор в поле “Имя пользователя”, вводит имя пользователя. Затем на клавиатуре нажимает кнопку “Next”, курсор автоматически попадает на поле пароль. После того, как пользователь ввел пароль, он нажимает кнопку “Done” и клавиатура пропадает. Чтобы поставить курсор в текстовое поле, необходимо на экземпляре этого текстового поля вызвать метод “becomeFirstResponder”. Чтобы убрать курсор с текстового поля, необходимо на экземпляре текстового поля вызвать метод “resignFirstResponder”. На 55 строке мы переопредили метод “touchesBegan”. Данный метод объявлен в классе “UIResponder”, класс “UIViewController” наследуется от этого класса. Метод “touchesBegan” вызывается, когда вы нажимаете в любую свободную область экрана, находящуюся вне редактируемого текстового поля. На 56 строке мы обращаемся к внутреннему свойству “view”, которое содержит экземпляр представления, подвязанного к контроллеру. И на нем вызываем метод “endEditing” со значение аргумента “true”. Данный метод посылает представлению событие о том, что необходимо завершить редактирование элементов управления, которые на нем расположены. Но это еще не все. Теперь необходимо сообщить текстовым полям, что мы реализовали для них соответствующий протокол “UITextFieldDelegate” и хотим проинициализировать у них свойство “delegate”. Обновите код в методе “viewDidLoad”: На 30 и 31 строке мы проинициализировали свойство “delegate” для текстовых полей “Имя пользователя” и “Пароль пользователя”. Теперь эти поля знают, откуда им надо вызывать реализацию метода “textFieldShouldReturn”. Откройте модуль “Main.storyboard”, найдите и выделите представление “View Controller”. На этом представлении выделите текстовое поле “Имя пользователя”. В панели свойств откройте вкладку “Show the Attributes inspector”. Найдите свойство “Return key” и установите в него значение “Next”. Затем выделите текстовое поле “Пароль пользователя” и установите для его свойства “Return key” значение “Done”. Запустите приложение. Если клавиатура у вас не открылась в симуляторе, выполните в меню симулятора “Hardware -> Keyboard -> Toggle Software Keyboard”. Теперь давайте разберем, какие типы клавиатур имеются и в каком свойстве они задаются. Потренируемся пока на текстовом поле “Имя пользователя”. Выделите это текстовое поле в дизайнере и в панели свойств на вкладе “Show the Attributes inspector” найдите свойство “Keyboard Type”, в этом свойстве задается тип вызываемой клавиатуры для текстового поля. Часто используемые виды клавиатур: Default – клавиатура по умолчанию, содержит в себе все раскладки. Numbers and punctuation – клавиатура содержит цифры и знаки пунктуации. URL – клавиатура содержит все необходимые символы для быстрого ввода URL адреса. Number Pad – клавиатура содержит только цифры, без знаков разделения на дробные составляющие. Phone Pad – телефонная клавиатура. E-mail Address – клавиатура содержит необходимые символы для быстрого ввода e-mail адреса. Decimal Pad – клавиатура содержит цифры и знаки разделения на дробные составляющие. Теперь добавим функциональность закрытия клавиатуры для представления редактирования продукта. Откройте модуль “ProductViewController.swift”. Добавьте наследование от двух протоколов “UITextFieldDelegate”, “UITextViewDelegate”, для класса “ProductViewController”: Реализуем эти протоколы: Методы на 58 строке и 69 мы рассматривали уже ранее, не буду повторяться. На 64 строке мы реализовали метод “textViewDidEndEditing”, данный метод вызывается, когда редактирование многострочного текстового поля было завершено. Обновим код в методе “viewDidLoad”: Запустите приложение. Закрытие клавиатуры будет работать только для текстового поля “Название”, для описания работать не будет. Дело в том что, чтобы скрыть клавиатуру у поля “Text View”, надо добавить дополнительную панель инструментов над клавиатурой и на нее добавить кнопку, которая будет закрывать эту клавиатуру. Разберем, как это сделать. Обновите код: Разберем код построчно. На 37 строке мы вызываем метод “addToolbar”, который добавим ниже. Данный метод принимает аргумент типа “UITextView”, в него мы передаем экземпляр текстового поля, к клавиатуре которого будет привязана панель инструментов с кнопкой закрыть. На 40 строке мы объявили метод “addToolbar”. На 41 строке мы создали экземпляр панели инструментов. Чтобы добавить эту панель на клавиатуру, надо проинициализировать свойство “inputAccessoryView” созданной панелью инструментов. С 42 по 44 строку мы задаем визуальные стили панели инструментов. На 45 строке мы создаем экземпляр кнопки пробел. На 46 строке мы создаем экземпляр кнопки “Х Закрыть” и привязываем к нему метод обработчик “donePressed” на нажатие по кнопке. На 47 строке мы добавляем кнопки на панель инструментов. На 48 строке говорим, что панель инструментов будет принимать действия пользователя. На 49 строке мы вызываем метод “sizeToFit”, который растянет панель инструментов по ширине экрана. На 51 строке инициализируем свойство “delegate” текстового поля. На 52 строке добавляем панель инструментов на клавиатуру. Запустите приложение. Теперь, при нажатии на кнопку “Х Закрыть” на панели инструментов клавиатуры, клавиатура закрывается. Данный код еще удобно использовать для цифровых клавиатур. Добавим поле поиска товаров в представление списка товаров. Откройте модуль “SuppliesViewController.swift”. Добавьте наследование от протоколов “UISearchResultsUpdating” и “UISearchBarDelegate”. Обновите код: Разберем код. На 27 строке мы добавили свойство “filteredSupplies”, в котором будут содержаться найденные товары через поле поиска. На 28 строке мы добавили свойство, которое указывает, активно ли сейчас поле поиска или нет. На 29 строке мы объявили пока еще не инициализированный экземпляр контроллера для поля поиска типа “UISearchController”. Отлично, теперь обновим методы табличного представления “numberOfRowsInSection” и “cellForRowAt indexPath”: Разберем код. На 74 строке мы проверяем, является ли поле поиска в данный момент активным (т.е. мы в данный момент поставили в него курсор). Тогда на 75 строке мы возвращаем количество товаров из отфильтрованной коллекции. Иначе на 78 строке мы возвращаем исходный список товаров. На 84 строке мы изменили получение модели товара. Теперь мы проверяем: если поле поиска в данный момент активно, то возвращаем товар из отфильтрованной коллекции, иначе возвращаем товар из исходной коллекции. Ошибки с индексом за пределами коллекции у нас не будет, так как выше мы обновили реализацию метода “numberOfRowsInSection”. Теперь необходимо добавить метод, который будет инициализировать контроллер для поля поиска: Разберем код этого метода. На 131 строке мы инициализируем свойство “searchController”, которое объявляли ранее. На 132 строке мы указываем ссылку на представление, где находятся данные, которые мы будет фильтровать. На 133 строке мы указываем, доступен ли нам основной контент в ходе поиска данных. На 134 строке мы задаем текст, который будет отображаться в поле поиска. На 135 строке мы инициализируем свойство “delegate” поля поиска, тем самым говоря, откуда ему брать реализацию связанных с ним протоколов. Мы указали, что реализация находится в контроллере “SuppliesViewController”. На 136 строке мы вызываем метод “sizeToFit” на поле поиска, чтобы растянуть панель поиска по ширине экрана. На 137 строке левым операндом мы обращаемся к свойству “tableHeaderView” экземпляра таблицы и правым операндом инициализируем его нашим полем поиска. Тем самым мы добавляем в заголовок нашей таблицы поле поиска. Наше приложение на русском языке. А когда поле поиска становится активным, мы видим справа от него кнопку с текстом на английском языке “Cancel”, давайте сразу это исправим, чтобы потом не возращаться к этому: Разберем построчно код. На 141 строке мы обращаемся к свойству “searchController”, от него вызываем свойство “searchBar” - это наше поле поиска. И на экземпляре поле поиска вызываем свойство “showsCancelButton”, говорящее о том, отображать кнопку “Cancel” справа от поля поиска или не отображать. Мы говорим, что будем отображать. На 142 строке мы объявляем переменную типа “UIButton” с именем “cancelButton”. На 143 строке мы получаем представление, в котором будем производить ниже поиск кнопки с текстом “Cancel” по типу разумеется :) На 144 строке мы проходимся по иерархии вложенных представлений в поле поиска. На 145 строке мы проверяем: если представление имеет тип “UINavigationButton”, то это то представление, которое нам надо, это и есть наша кнопка с текстом “Cancel”. На 146 строке мы инициализируем переменную “cancelButton” экземпляром найденной кнопки. На 147 строке мы задаем текст кнопки “Отмена”. Реализуем протокол “UISearchResultsUpdating”: Разберем код. На 154 строке мы вызываем метод “searchDisplayControllerWillBeganSearch”, который ранее рассматривали уже, и передаем в аргумент “controller” экземпляр контроллера поиска, который у нас есть в аргументе метода “updateSearchResults”. На 155 строке мы проверяем, ввел ли пользователь какой -либо  текст в поле поиска, если ввел, тогда сохраняем этот текст в переменную “searchString”, если не ввел, тогда выходим из метода “updateSearchResults”. На 159 строке мы выполняем фильтрацию данных из основного источника данных по тексту, который ввел пользователь в поле поиска. Для этого у коллекции “supplies” вызываем метод “Filter”, в который передаем лямбда метод с одним аргументом типа “ProductModel”, и возвращаемым значением типа Bool (найден или не найден товар). На 160 строке мы создаем переменную с именем “product” типа “ProductModel” и инициализируем ее экземпляром аргумента “productItem”. Заметьте, лямбда метод будет вызываться столько раз, сколько элементов товара содержит коллекция “supplies”. На 161 строке мы объявляем переменную, в которой будет содержаться результат сравнения текста поиска с названием или описанием нашего товара. На 162 строке мы выполняем сравнение текста текущего товара в лямбда методе с текстом поля поиска . Оба текста путем вызова метода “lowercased” переведены в нижний регистр и теперь регистро независимы. Если по названию товара совпадений не было найдено, пытаемся сравнить по описанию товара. Результат сравнения записываем в переменную результата “res”. На 164 строке возвращаем результат метода “filter”. На 166 строке запускаем переинициализацию таблицы для отображения отфильтрованных данных и скрытия данных, не попавших под фильтр. Реализуем протокол “UISearchBarDelegate”: Разберем код. На 170 строке мы реализовали метод “searchBarTextDidBeginEditing”, который вызывается, когда пользователь начинает вводить текст в поле поиска. В реализации данного метода мы задаем свойство “shouldShowSearchResults” в значение “true”, тем самым давая понять контроллеру поиска, что поле поиска сейчас активно. Затем мы переинициализируем таблицу. На 175 строке мы реализовали метод “searchBarCancelButtonClicked”, который вызывается, когда пользователь нажал кнопку “Cancel” или в нашем случае “Отмена”, справа от поля поиска. В реализации мы говорим, что поле поиска теперь больше не активно и переинициализируем таблицу. На 180 строке мы реализовали метод “searchBarSearchButtonClicked”, который вызывается, когда на клавиатуре, отобразившейся к полю поиска, мы нажали кнопку “Search” (“Поиск”). В реализации метода мы проверяем: если свойство “shouldShowSearchResults” еще не активно, активируем его и переинициализируем таблицу. Затем скрываем клавиатуру для поля поиска на 185 строке. Обновите метод “viewDidLoad”: На 64 строке мы добавили заголовок представления “Продукты”. На 66 строке мы вызвали метод, который выполняет инициализацию контроллера поиска и добавляет его в наше представление. Запустите приложение. Нажмите на поле “Поиск товара”, введите туда, например, букву “Ш”. Все работает :) Теперь в этом уроке нам еще осталось добавить предварительный просмотр товара при выполнении на нем функции 3D Touch. Данная функция поддерживается только на устройствах iPhone 6s / 6s Plus / 7 / 7 Plus. В этих телефонах установлен специальный дисплей, который реагирует на силу нажатия на него. Даже если у вас нет подобного девайса это не проблема, так как данную функциональность можно проверить в симуляторе. Реализуем протокол “UIViewControllerPreviewingDelegate”. Обновите код “SuppliesViewController”: Теперь обновите метод “viewDidLoad”: На 67 строке мы обращаемся к свойству контроллера “traitCollection”, в котором содержится свойство “forceTouchCapability”, и проверяем: если данное устройство поддерживает данную функцию (3D Touch), тогда вызываем метод “registerForPreviewing”, в который первым аргументом передаем ссылку на контроллер, для которого надо применить данную функциональность, и экземпляр таблицы, на содержимом которой эта функциональность и будет выполняться. Добавим реализацию протокола “UIViewControllerPreviewingDelegate”: Разберем код. На 192 строке мы реализовали метод “previewingContext”, который возвращает экземпляр представления , которое надо отобразить в предварительном просмотре. Метод принимает два аргумента. Первый аргумент “previewContext” типа “UIViewControllerPreviewing” принимает экземпляр контроллера предварительного просмотра. Второй аргумент “location” типа “CGPoint” содержит позицию места, где пользователь выполнил усиленное нажатие по ячейке таблицы. На 193 строке мы получаем экземпляр “indexPath” путем вызова на таблице метода “indexPathForRow”, аргументом которого мы передаем аргумент “location”. Данный экземпляр нам необходим, поскольку у него имеется свойство “row” и по значению этого свойства мы сможем получить нужную модель товара. На 194 строке мы производим поиск контроллера ”ProductViewController” по его “Storyboard ID”. Это представление редактирования товара. На 195 строке мы передаем идентификатор товара в свойство “id” найденного выше контроллера. На 196 строке мы передаем в свойство “sourceRect” полную область ячейки, по которой было выполнено “3D Touch”. Благодаря этому данная область будет выделена, когда вы выполните нажатие “3D Touch” в таблице. На 197 строке возвращаем найденный контроллер “ProductViewController”. На 199 строке возвращается пустое значение, если пользователь выполнил нажатие “3D Touch” вне области таблицы. На 202 строке мы реализовали метод “previewingContext” перегруженный, который ничего не возвращает и отображает представление того контроллера, который мы вернули в методе выше. Запустите приложение. На этом завершим урок. На следующем уроке мы рассмотрим создание иконки нашего приложения и разберемся, как пользоваться “Assets”.

Здравствуйте, дорогие читатели. В этом уроке мы: создадим форму редактирования товара; рассмотрим понятие делегата и удобство его использования; добавим действия редактирования / удаления товара в списке товаров. Откройте проект Warehouse. В первую очередь, давайте изменим цвет View входа в систему с “Light Green” на “White”, я явно перестарался с выбором цвета в самом начале :). В будущих уроках, когда разберем, как пользоваться Assets, мы заменим фон на красивую картинку, подходящую по смыслу к этому приложению, а пока сделаем нейтральный цвет, не бросающийся в глаза. Для этого в панели навигатора откройте модуль “Main.storyboard”, выделите “View Controller”, затем в панели свойств откройте вкладку “Show the Attributes inspector”. Найдите свойство “Background” и установите значение “White”. Теперь найдите в библиотеке компонентов компонент “Table View Controller” и перетащите его в свободную область дизайнера рядом с “Supplies View Controller”, созданным в прошлом уроке. Выделите только что добавленный компонент. Найдите кнопку в дизайнере “Show Document Outline”, нажмите на нее, откроется панель документов. На этой панели разверните компонент “Table View Controller” и выделите компонент “Table View”. Затем в панели свойств откройте вкладку “Show the Attributes inspector”. Найдите свойство “Content”. По умолчанию у этого свойства установлено значение “Dynamic Prototypes”, установите значение “Static Cells”, в дизайнере вы увидите, что интерфейс контроллера изменился и отобразилось 3 строки. Разберем значения этого свойства. Значение “Dynamic Prototypes” используется, если вам необходимо иметь динамический набор данных, который будет постоянно изменяться. Установив это значение, обязательно необходимо переопределить методы протокола “UITableViewDataSource” для корректной работы контроллера. Значение “Static Cells” используется, если вам необходимо иметь статические данные, которые не будут меняться. Установив это значение, вам не нужно переопределять методы протоколы “UITableViewDataSource”. В данном примере мы устанавливаем это значение с целью удобства размещения элементов управления на нашей View. У нас будут ячейки с таким содержимым: ячейка под картинку, идентификатор товара, название товара, описание товара. Сейчас у нас 3 ячейки, надо чтобы было 4. В первой ячейке будет компонент “Image View”, в остальных 2 ячейках будут элементы управления “Label” и “Text Field”, в последней 4-й ячейке будут элементы управления “Label” и “Text View”. На панели документов для “Table View Controller”  выделите компонент “Table View Section”. В панели свойств откройте вкладку “Show the Attributes inspector”. Найдите свойство “Rows”. Сейчас у этого свойство установлено значение “3”. Измените значение на “4”, у вас появится 4 ячейка. В панели документов раскройте компонент “Table View Sections”, вы увидите список ячеек типа “Table View Cell”. Выделите первую ячейку. В панели свойств откройте вкладку “Show the Size inspector”. На этой вкладке можно управлять размерами компонента. Найдите свойство “Custom” и отметьте его галочкой. Затем найдите свойство “Row Height”. Установите значение этого свойства “144”, высота ячейки изменится. Перетащите на эту ячейку из библиотеки компонентов  компонент “Image View” и растяните его на всю область ячейки. Выделите компонент “Image View” и нажмите кнопку “Pin”. В открывшемся диалоговом окне снимите галочку с поля “Constrain to margin” и отметьте позиционирование относительно всех стенок ячейки. Нажмите кнопку “Add 4 Constraints”. В панели документов выделите вторую ячейку. Перетащите из библиотеки компонентов компонент “Label” на эту ячейку. Поместите его с левого края ячейки и растяните по высоте ячейки. В панели свойств откройте вкладку “Show the Size inspector”, установите свойство “Width” в значение “120”. Откройте вкладку “Show the Attributes inspector”, установите безымянное свойство с текстом “Label” на текст “Идентификатор”. Найдите свойство “Font”, нажмите на кнопку со значком “T”, откроется диалоговое окно задания свойств шрифта. Установите свойство “Style” в значение “Bold”, свойство “Size” в значение “12”. Нажмите кнопку “Done”. Представление должно выглядеть так: Из библиотеки компонентов перетащите компонент “Text Field” и расположите рядом с компонентом “Label”. Растяните компонент “Text Field” на оставшуюся ширину ячейки. Выделите элемент управления “Label”, нажмите кнопку “Pin”. Снимите галочку с поля “Constrain to margin”, отметьте позиционирование относительно верхней и левой стенок ячейки. Отметьте галочкой поле “Height”. Нажмите кнопку “Add 3 Constraints”. Выделите элемент управления “Text Field”, нажмите кнопку “Pin”. В диалоговом окне снимите галочку с поля “Constrain to margin”, установите позиционирование относительно левой, верхней, правой стенок ячейки, отметьте галочкой поле “Height”. Нажмите кнопку “Add 4 Constraints”. В панели документов выделите 3 ячейку. Повторите для нее все операции, которые были применены ко второй ячейке. Измените текст элемента управления “Label” на “Название”. Должно получиться вот так: В панели документов выделите последнюю ячейку, на вкладе “Show the Size inspectors”  установите в поле “Row Height” значение “144”, предварительно отметив поле “Custom” галочкой. Перенесите на ячейку два компонента “Label” и “Text View”. В          Установите ограничения для элемента управления “Label”, как мы устанавливали для предыдущих элементов управления “Label”, а для элемента управления “Text View” такие же ограничения, как для “Text Field”. Для элемента управления “Label” установите текст “Описание”, для элемента управления “Text View” уберите текст по умолчанию. Должно получиться вот так: В панели навигатора, добавьте новый модуль “Swift File” с именем “ProductViewController.swift”. Измените код, как показано ниже: Перейдите снова в дизайнер , выделите “Table View Controller”, с которым проводили изменения, в панели свойств, откройте вкладку “Show the Identity inspector”. Установите свойство “Class” значением “ProductViewController”, свойство “Storyboard ID” значением “ProductViewController”. В панели инструментов нажмите кнопку “Show the Assistant editor”. Для элемента управления “Image View” создайте переменную с именем “imageView”.       Во второй ячейке, для элемента управления “Text Field”, создайте переменную с именем “idTxt”. В третьей ячейке, для элемента управления “Text Field”, создайте переменную с именем “nameTxt”. В четвертой ячейке, для элемента управления “Text View”, создайте переменную с именем “descriptionTxt”. Должно получиться вот так: В панели навигатора, добавьте новый модуль “Swift File” с именем “ProductModel.swift”. Добавьте в него следующий код: Разберем добавленный код построчно. На 9 строке мы подключили пространство имен “Foundation” для класса “NSObject”. На 11 строке мы объявили класс с именем “ProductModel”, который наследуется от класса “NSObject” для того, чтобы считаться типом данных. На 12 строке мы объявили переменную с именем “productId” типа “Int” и инициализировали ее значение по умолчанию “-1”. На 13 строке мы объявили поле с именем “productImage” типа “String” и инициализировали ее значение по умолчанию “”. На 14 строке мы объявили поле с именем “productName” типа “String” и инициализировали ее значение по умолчанию “”. На 15 строке мы объявили поле с именем “productDescription” типа “String” и инициализировали ее значение по умолчанию “”. На 17 строке мы объявили параметризированный инициализатор класса “ProductModel” (это тоже самое, что и конструктор в языке программирования C#). Инициализатор - это метод, который вызывается при создании нового экземпляра класса. Данный инициализатор принимает аргументы с такими же именами, как имена полей в классе. Для того, чтобы инициализировать внутренние поля класса значениями полей аргументов. Мы левым операндом обращаемся к самому себе, через ключевое слово “self” и обращаемся к нужному нам полю, а правым операндом задаем значение аргумента. Мы плавно подходим к созданию делегата. В панели навигатора добавьте новый модуль “Swift File” с именем “ProductProtocol.swift”. Добавьте в него следующий код: Разберем добавленный код. На 11 строке мы объявили протокол с именем “ProductProtocol”. Протокол - это тоже самое, что и интерфейс в языке программирования C#. Экземпляр протокола через инициализатор создать нельзя, поскольку это только прототип, который не содержит реализации и используется в качестве описания и задания соглашений, которые разработчик должен реализовать сам в будущем. На 12 строке мы объявили метод прототип с именем “changeProduct”,  который принимает аргумент типа “ProductModel” с именем “model”. Откройте модуль “ProductViewController.swift”, добавьте поле с именем “delegate” типа “ProductProtocol?” и поле с именем “id” типа “Int” со значением по умолчанию “-1”. Должно получиться вот так: Добавьте после метода “viewDidLoad”, новые методы с именами “initNavigationButtons”, “backToParent”, “saveData”, которые ничего не принимают и ничего не возвращают. Код: Разберем построчно добавленный код. На 21 строке мы вызываем метод “initNavigationButtons”, когда View находится в процессе загрузки, чтобы инициализировать кнопки навигации. На 24 строке мы объявили метод с именем “initNavigationButtons”. На 25 строке мы переопределяем левую кнопку навигации, задаем ей текст “Отмена” и обработчик события на нажатие, метод “backToParent”. На 26 строке мы создаем кнопку с именем “saveButton” и текстом “Сохранить”, добавляем для нее обработчик событие на нажатие, метод “saveData”. На 27 строке мы обращаемся к экземпляру панели навигации контроллера “navigationItem” и вызываем от него метод “setRightBarButton”, который принимает два аргумента. Первый аргумент - это экземпляр добавляемой на панель навигации кнопки, второй аргумент - это стиль добавления кнопки, добавить с анимацией или без. Сам метод, как видно из названия, добавляет кнопку справа на панель навигации. Это вариант, как добавить правую кнопку из кода. На 30 строке мы объявили метод с именем “saveData”. На 31 строке мы обращаемся к нашему делегату с именем “delegate” и проверяем, если он инициализирован, тогда вызываем у него метод “changeData” и передаем туда модель данных, заполненную данными собранными с элементов управления. На 32 строке мы создаем экземпляр типа “ProductModel” с именем “model”. На 33 строке мы вызываем у делегата метод “changeData” и передаем туда экземпляр “model”. Данный метод будет реализован в классе “SuppliesViewController”. На 35 строке мы возвращаемся на предыдущую View (SuppliesViewController) в стеке иерархий вызовов View. На 38 строке мы объявляем метод с именем “backToParent”. Данный метод делает переход на предыдущую View (SuppliesViewController) в стеке иерархий вызовов View. Теперь откройте модуль “SuppliesViewController.swift”. Нам необходимо обновить его реализацию: Разберем обновленный код построчно. На 12 строке в классе SuppliesViewController мы наследуемся от протокола “ProductProtocol”. На 13 строке мы заменили тип данных для поля “supplies”. Тип данных был “[String]”, стал “[ProductModel]”. И сделали это поле статическим для того, чтобы была возможность доступа к нему из контроллера “ProductViewController”. На 29 строке мы реализовываем метод “changeProduct” протокола “ProductProtocol”. Именно этот метод будет вызываться при нажатии кнопки “Сохранить” в контроллере “ProductViewController”. На 30 строке мы проверяем идентификатор продукта, если “-1” - это означает, что это новый продукт. Иначе существующий продукт, и мы его обновляем. На 32 строке мы правым операндом генерируем идентификатор продукта путем вызова метода “makeNewProductId”. Данный метод возвращает значение типа “Int”, которое мы присваем левому операнду. Левый операнд - это поле “productId” экземпляра “ProductModel”. На 33 строке мы добавляем новый продукт в коллекцию продуктов. На 36 строке мы объявляем переменную с именем “changedIndex” типа “Int” со значением по умолчанию “-1”. В эту переменную мы запишем найденную ниже в цикле позицию продукта в коллекции “supplies”. На 37 строке мы в цикле проходимся по элементам коллекции “supplies” и ищем продукт, который нужно обновить. На 38 строке описано условие поиска продукта. На 39 строке, когда продукт был найден, мы сохраняем его позицию в переменную “changedIndex”. На 40 строке выходим из цикла. На 43 строке проверяем, если продукт был найден , тогда обновляем этот продукт. С 44 по 46 строку мы обновляем свойства продукта , значениями свойств модели, переданной аргументом метода “changeProduct”. На 49 строке мы запускаем переинициализацию “DataSource” для табличного представления, чтобы данные в ячейках обновились и добавились/удались обновленные данные. На 52 строке мы объявили метод с именем “makeNewProductId”, который ничего не принимает и возвращает значение типа “Int”. На 53 строке левым операндом мы объявили переменную с именем “sortProducts” типа “[ProductModel]”. Правым операндом мы на экземпляре коллекции “supplies” вызываем метод “sorted”, который принимает лямбда метод сортировки коллекции объектов и возвращает отсортированную коллекцию. У лямбда метода есть два аргумента, в них находятся экземпляры сравниваемых объектов из коллекции “suppliers”. Данный метод возвращает значение типа “Bool”. На 54 строке мы возвращаем условие сортировки по возрастанию. Сортировка производится по свойству “productId” класса “ProductModel”. На 56 строке мы обращаемся к последнему элементу отсортированной коллекции, тем самым получаем максимальный идентификатор продукта в коллекции и увеличиваем его на единицу. Теперь надо обновить реализацию метода “cellForRowAt indexPath”: Разберем код построчно. На 69 строке мы изменили вид обращения к коллекции “supplies”. На 73 строке мы изменили для экземпляра ячейки тип стиля. Был “.plain”, стал “subtitle”. На 74 строке мы левым операндом объявили константу с именем “model” типа “ProductModel”. Правым операндом мы инициализируем константу значением из коллекции “supplies”. На 75 строке мы записываем в свойство “tag” идентификатор продукта для этой ячейки. На 76 строке в элемент управления “Label”, который находится в верхней области ячейки, мы записываем название продукта. На 77 строке в элемент управления “Label”, который находится в нижней области ячейки, мы записываем описание продукта. На 78 строке мы активируем в ячейке информационную кнопку справа. При нажатии на эту кнопку мы будем редактировать продукт. Теперь нам надо подвязаться на событие нажатия на информационную кнопку в ячейке. Для этого необходимо переопределить метод протокола “UITableViewDelegate” ,реализованного в классе “UITableViewController” с именем “accessoryButtonTappedForRowWith”. Разберем код построчно. На 83 строке мы получаем экземпляр типа “ProductModel”, привязанный к ячейке, и сохраняем его в константу с именем “model”. На 84 строке мы производим поиск контроллера с именем “ProductViewController” в модуле “Main.storyboard”. На 85 строке на найденном экземпляре контроллера обращаемся к свойству “delegate” типа “ProductProtocol” и инициализируем его ссылкой на самого себя, тем самым говоря, что в этом классе уже реализован метод этого протокола с именем “changeProduct” и вызывать метод надо именно из этого класса. На 86 строке мы на найденном экземпляре контроллера обращаемся к свойству “id” и инициализируем его идентификатором продукта, привязанного к текущей ячейке. На 87 строке мы открываем контроллер “ProductViewController”. Редактирование мы почти сделали, осталось добавить инициализацию редактируемых данных в контроллере “ProductViewController”. Давайте реализуем еще в этом контроллере удаление данных. Для этого надо переопределить два метода объявленных в протоколе “UITableViewDelegate” и реализованных в классе “UITableViewController”. Эти методы называются “canEditRowAt IndexPath” и “commit editingStyle”. Обновите свой код в соответствии с представленным ниже: Разберем код построчно. На 90 строке мы переопределили метод “canEditRowAt IndexPath”, данный метод возвращает значение , которое говорит о том, активировать удаление строк или нет. На 91 строке возвращаем значение активировать. На 94 строке мы переопределили метод “commit editingStyle”, данный метод вызывается, когда мы нажали кнопку удалить на ячейке. На 95 строке мы удаляем продукт из коллекции “supplies”. На 96 строке обновляем содержимое таблицы. Теперь добавим кнопку добавления нового товара. Для этого обновим код метода “initNavigationButtons”.   Разберем код построчно. На 100 строке мы создали экземпляр кнопки с текстом “Новый продукт” и обработчиком события на нажатие - метод “newProduct”. На 101 строке мы добавили выше созданную кнопку в панель навигации контроллера в область справа. На 104 строке мы объявили метод “newProduct”, которые ничего не принимает и ничего не возвращает. На 105 строке мы производим поиск контроллера “ProductViewController” в модуле “Main.storyboard”. На 106 строке мы на найденном экземпляре контроллера обращаемся к свойству “delegate” и инициализируем его ссылкой на самого себя. На 107 строке мы  на найденном экземпляре контроллера обращаемся к свойству “id” и говорим, устанавливая значение “-1”, что мы создаем новый продукт. Теперь откройте модуль “Main.storyboard”, в нем на контроллере “ProductViewController” выделите элемент управления с идентификатором “idTxt”. В панели свойств на вкладке “Show the Attributes inspector” найдите свойство “User Interaction Enabled” и снимите галочку. Тем мы самым мы запретили редактирование значения этого поля. Теперь перейдите в модуль “ProductViewController.swift”. Обновите в нем код, как это показано ниже: Разберем добавленный код построчно. На 19 строке мы добавили метод с именем “initData”, который ничего не возвращает и принимает аргумент с именем “id” типа “Int”. На 20 строке мы проверяем идентификатор продукта, если он больше значения “-1”, значит продукт уже существует и содержит внутри себя данные, которые можно отобразить на текущей View. На 22 строке мы ищем продукт по идентификатору продукта, переданному аргументом в методе в коллекции продуктов “supplies”. С 23 по 25 строку мы заполняем элементы управления на пользовательском интерфейсе данными найденного продукта. На 33 строке в методе “viewDidLoad” мы добавили вызов метода “initData” и передали ему аргумент поле “id”, которое мы задаем в контроллере “SuppliesViewController”. Запустите приложение. На анимации выше видно, что мы вошли в систему, открыли товар на редактирование, откредактировали товар и изменения сохранились. Затем удалили товар. Теперь давайте проверим добавление нового товара: Проверили, добавление нового товара работает хорошо. Но все равно есть один нюанс, наше приложение на русском языке. А когда выполняли на ячейки жест справа на- лево, то показывалась кнопка удалить “Delete” на английском, давайте исправим это, чтобы показывалось русское название “Удалить”. Откройте модуль “SuppliesViewController.swift”, нам необходимо переопределить метод, объявленный в делегате “UITableViewDelegate” c именем “titleForDeleteConfirmationButtonForRowAt” и реализованный в классе “UITableViewController”. Добавьте следующий код, после метода “backToParent”: Я думаю, этот метод не стоит разбирать построчно, тут и так все понятно. Запустите приложение. На этом завершим наш урок. В следующем уроке мы разберем технологию 3D Touch и применим ее к нашему приложению для предварительного просмотра товаров. Добавим поле поиска в заголовок контроллера со списком товаров, реализуем поиск товаров. Реализуем протокол “UITextFieldDelegate”, чтобы скрывать клавиатуру при нажати кнопки “Ввод” на клавиатуре мобильного устройства. Разберем, как добавить собственную панель интрументов с кнопками.

                                                       Здравствуйте дорогие читатели. В этом уроке мы добавим форму списка товаров на складе. Разберем класс “UITableViewController” и как с ним работать. Откройте проект Warehouse из предыдущего урока. Необходимо добавить в наш проект две View. На одной будут содержаться все товары, которые есть на складе. На второй форма редактирования товара. Для реализации View со списком всех товаров мы будем использовать готовый табличный класс контроллера “UITableViewController”. Данный класс уже реализовал все необходимые протоколы внутри себя для уверенной работы табличного контроллера. Есть и другой вариант, который мы не будем рассматривать в этом уроке, это сделать свой класс “UITableViewController”, унаследовшись от базового класса “UIViewController” и реализовав протоколы “UITableViewDelegate” и “UITableViewDatasource”. В панели навигатора откройте модуль “Main.storyboard”. Найдите в библиотеке компонентов, компонент “Table View Controller” и перетяните в пустую область дизайнера рядом с View входа в систему. В панели навигатора, нажмите правой кнопкой мыши на папке “Warehouse” и в контекстном меню выберите пункт “New File...”. Откроется диалоговое окно добавления новых модулей в проект. Найдите в нем модуль “Swift File”, выделите его и нажмите кнопку “Next”. Появится диалоговое окно задания названия добавляемого модуля. В поле “Save As” введите “SuppliesViewController.swift”, нажмите кнопку “Create”.                                                                                                           Откройте модуль “SuppliesViewController.swift”, вы увидите в нем только “import Foundation”, это добавление пространства имен на базовую библиотеку классов Swift (аналог в C#, пространство имен “System”). Удалите эту строку. Добавьте в этот модуль следующий код: Разберем это код построчно. На 9 строке, мы подключили пространство имен “UIKit” в нем содержатся классы для взаимодействия с компонентами пользовательского интерфейса в iOS. На 11 строке, мы объявили класс с именем “SuppliesViewController”, который наследуется от класса “UITableViewController”. На 12 строке, мы объявили строковый массив с именем “supplies”, в этом массиве содержится статический список товаров (чуть позже мы заменим его на модель). На 17 строке, мы переопределили метод “viewDidLoad” класса “UITableViewController”, данный метод вызывается когда View начинает загрузку. В этом методе необходимо делать предварительную инициализацию компонентов, какими либо данными. На 18 строке, мы вызываем базовый метод “viewDidLoad” класса “UITableViewController”, с помощью ключего слова “super” (аналог в C#, ключевое слово “base”). Начиная с 21 строки и по 33 строку, мы переопределяем поведение базового контроллера “UITableViewController”, для отображения данных в нем. Более конкретно, мы переопределяем реализацию протокола “UITableViewDataSource”. На 21 строке переопределенный метод “numberOfSections”, возвращает количество секций в нашем табличном представлении. Секции это разделители между сгруппированными наборами ячеек в табличном представлении. У нас будет одна секция. На 25 строке переопределенный метод “numberOfRowsInSection”, возвращает количество ячеек в секции. Секция у нас одна, поэтому возвращаем количество товаров, которые будут в этой секции. На 29 строке переопределенный метод “cellForRowAt indexPath”, возвращает представление ячейки таблицы. На 30 строке мы создаем экземпляр типа “UITableViewCell” с повторно используемым идентификатором “сell”, первый параметр в инициализаторе это стиль ячейки, второй параметр это идентификатор этой ячейки в табличном представлении. Данный метод вызывается столько раз, сколько ячеек мы добавляем в нашу таблицу. Каждый вызов данного метода содержит в аргументе “indexPath” текущую позицию ячейки относительно таблицы. На 31 строке мы обращаемся к компоненту “Label”, расположенному внутри ячейки, чтобы задать текст, для этого используем свойство “textLabel”, затем от этого свойства уже обращаемся к свойству “text”, чтобы задать текст компонента “Label”. Текст мы извлекаем из массива товаров “supplies” через subscript (по индексу). Чтобы получить текущий номер строки, необходимо обратиться к аргументу “indexPath” и обратиться к свойству “row”. На 32 строке мы возвращаем созданную ячейку. Эта ячейка затем внутренними механизмами будет добавлена в табличное представление. Откройте модуль “Main.storyboard”, выделите добавленный ранее “Table View Controller”. В панели свойств, откройте вкладку “Show the identity inspector”, найдите поле “Class”, введите значение “SuppliesViewController”. Через это свойство мы подвязываем класс контроллера “SuppliesViewController” к нашему табличному представлению в дизайнере. Найдите свойство “Storyboard ID”, задайте значение в нем “SuppliesViewController”. Данное свойство содержит уникальный идентификатор представления, этот идентификатор будет позднее использоваться нами при поиске табличного представления программно в экземпляре “Storyboard”. Теперь нам необходимо добавить в обработчик события на нажатие кнопки “Вход”, переход на табличное представление. Откройте модуль “ViewController”. Добавьте код в метод “loginButtonTapped”, как показано ниже (смотреть выделенный код): Разберем добавленный код: На 23 строке, правым операндом мы обращаемся к свойству “storyboard” контроллера “ViewController”, в этом свойстве содержится экземпляр модуля “Main.storyboard”. Вызов метода “instantiateViewController” производит поиск представления по идентификатору “Storyboard ID”, которое мы задавали ранее, в модуле “Main.Storyboard” и возвращает базовый класс контроллера “UIViewController”. Класс “UITableViewController” наследуется от класса “UIViewController”, соответственно допустимо приведение данного экземпляра к классу “UITableViewController”. Класс “SuppliesViewController“ наследуется от класса “UITableViewController”. Соответственно мы приводим полученный экземпляр в правом операнде к типу “SuppliesViewController” и присваиваем его левому операнду c именем “controller”. Левый операнд объявлен константой, поскольку он не будет в дальнейшем проходить переинициализацию. На 24 строке, мы обращаемся к свойству “navigationController”, в данном свойстве содержится экземпляр класса “UINavigationController” (сейчас он не инициализирован и содержит значение “nil”). Затем от экземпляра этого свойства мы вызываем метод “pushViewController”. Данный метод принимает два аргумента, экземпляр контроллера, который надо отобразить и флаг использовать анимацию при отображении контроллера или нет. Если вы сейчас запустите приложение, заполните поля “Имя пользователя” и “Пароль пользователя” и нажмете кнопку “Вход”, вы получите ошибку, так как текущее представление не содержит экземпляра “UINavigationController”. Давайте это исправим. Откройте модуль “Main.storyboard”. Выделите в дизайнере представление “ViewController”, затем в меню Xcode выберите “Editor -> Embed In -> Navigation Controller”. После этого действия в дизайнер Storyboard добавится представление “Navigation Controller” привязанное к представлению “ViewController”. Данное представление инициализирует свойство “navigationController” класса “ViewController”, данное свойство имеет тип доступа только для чтения и не подлежит переинициализации в коде контроллера. Модуль “Main.storyboard” должен выглядеть так: Теперь запустите приложение. Заполните поля “Имя пользователя” и “Пароль пользователя”, нажмите кнопку “Вход”. Откроется табличное представление:   Но в нем нас смущает “Top Bar”, который отображается сверху. Его не должно быть видно на странице входа в систему. Чтобы его убрать, откройте модуль “Main.storyboard”, выделите представление “ViewController”, в панели свойств перейдите на вкладку “Show the attributes inspector”. На этой вкладке найдите свойство “Top Bar” и установите для него значение “None”, в дизайнере “Top Bar” пропал, но вот если вы запустите приложение снова, то он остался на прежнем месте. Чтобы его скрыть, перейдите в модуль “ViewController.swift”. После переопределенного метода “viewDidLoad” вам необходимо переопределить еще два метода класса “UIViewController” это методы “viewWillAppear” и “viewWillDisappear”. Исправьте код в соответствии с кодом ниже: Разберем построчно внесенные изменения. На 33 строке мы переопределили метод “viewWillAppear”. Данный метод вызывается когда наше представление уже появилось на экране. На 34 строке мы вызываем метод “viewWillAppear” из базового класса “UIViewController”, чтобы сохранить его поведение. На 35 строке мы обращаемся к свойству “navigationController” и вызываем от экземпляра этого свойства метод “setNavigationBarHidden”. Данный метод скрывает или отображает “Top Bar” и принимает два аргумента, первый аргумент указывает скрыть или отобразить “Top Bar”, второй указывает, сделать это с анимацией или без. В этом методе мы скрываем “Top Bar”. На 38 строке мы переопределяем метод “viewWillDisappear”. Данный метод вызывается когда наше представление перекрывается другим представлением поверх него. На 39 строке мы вызываем метод “viewWillDisappear” из базового класса “UIViewController”, чтобы сохранить его поведение. На 40 строке мы обращаемся к свойству “navigationController” и вызываем от экземпляра этого свойства метод “setNavigationBarHidden”. В этом методе мы отображаем “Top Bar”. Запустите приложение. Теперь все отображается правильно. С одной стороны да, с другой нет. После того как мы выполнили переход на табличное представление, в нем в левом верхнем углу отображается кнопка навигации “< Back”, но ведь наше приложение на русском. Давайте изменим текст этой кнопки на “<- Назад”. Откройте модуль “SuppliesViewController.swift”. После метода “cellForRowAt indexPath”, добавьте следующий код: Разберем этот код построчно. На 36 строке мы объявили метод с именем “initNavigationButtons”, который ничего не возвращает и ничего не принимает. На 37 строке мы вызываем обращаемся в левом операнде к свойству “navigationItem” в котором содержится экземпляр класса “UINavigationItem”. Данное свойство предоставляет доступ к системным кнопкам навигации. От экземпляра свойства “navigationItem” мы обращаемся к свойству “leftBarButtonItem” в котором содержится экземпляр класса “UIBarButtonItem” инициализированный по умолчанию текстом “< Back”. В правом операнде мы создаем новый экземпляр класса “UIBarButtonItem” и вызываем его инициализатор, который принимает 4 аргумента. Первый аргумент “title” задает текст кнопки навигации. Чтобы в текст вставить специальный символ Unicode, необходимо в меню среды разработки Xcode выбрать “Edit -> Emoji & Symbols”, затем выбрать подходящий символ и нажать на него. Второй аргумент “style” принимает перечисление типа “UIBarButtonItemStyle”, в этом аргументе мы задаем значение по умолчанию. Третий аргумент “target” имеет тип “AnyObject?”, в него мы передаем экземпляр нашего контроллера. Четвертый аргумент “action” имеет тип “Selector?”, в него мы передаем метод обработчик нажатия на кнопку навигации. Обратите внимание на запись “#selector(SuppliesViewController.backToParent)”, в этой записи с помощью выражения “#selector” создается экземпляр типа “Selector”. В скобках мы указываем путь к методу обработчику события в формате “Класс контроллера . метод”. На 40 строке мы объявляем метод обработчик события нажатия по кнопке навигации с именем “backToParent”, который не принимает аргументов и ничего не возвращает. На 41 строке мы обращаемся в правом операнде к свойству “navigationController” и вызывает от экземпляра этого свойства метод “popViewController”. Данный метод скрывает текущее представление и переход на предыдущее представление в иерархии вызова представлений. Принимает один аргумент, который задает стиль открытия предыдущего представления с анимацией или без. Добавьте в метод “viewDidLoad”, вызов метода “initNavigationButtons” (19 строка). Запустите приложение. Вы увидите такой результат: На этом урок подошел к концу. На следующем уроке, мы создадим модель товара. Добавим кнопку добавления нового товара, добавим форму редактирования товара и зададим поведение в табличном представлении на редактирование/удаление товара. После того, как редактирование товаров будет завершено, можно будет приступать к уроку в котором будут разбираться иконка приложения и папка Assets.

Здравствуйте, дорогие читатели. Данный блок будет продолжением темы “Введение в  разработку под iOS", которую мы затронули ранее. В этом уроке мы: рассмотрим пользовательский интерфейс среды разработки; сделаем форму авторизации для нашего приложения Warehouse; научимся добавлять обработчиков событий на элементы управления. Работу продолжим на примере приложения Warehouse, который мы создавали в первом уроке. В среде разработки Xcode можем видеть две панели. Левая из них - это панель навигации по составляющим проекта: Правая делится на панель свойств и панель библиотеки компонентов. Панель свойств: Библиотека компонентов: Также вы можете использовать набор функций в панели инструментов, который находится сверху: Обратите внимание на кнопки этой панели справа: Нажимая на них, вы будете скрывать или отображать левую, правую, нижнюю панель в среде разработки. Левее находится блок функциональных кнопок для отображения данных выбранного модуля: Кнопка отображения текущего представления модуля. Кнопка отображения связанного модуля с текущим модулем. Применяется для того, чтобы видеть на одной половине экрана код контроллера, а на другой - дизайнер представления.  Кнопка отображения изменений с момента последней заливки данных в репозиторий. Используется, если ваш проект находится под управлением GIT Панель снизу - это панель отладки и логирования: В панели навигации откройте модуль “Main.storyboard”. Обратите внимание на стрелку слева, которая указывает на View. Эту стрелку можно перемещать, зажав ее левой кнопкой мыши. Отмечу, что при включении в настройках вашей OS X эмуляции двухкнопочной мыши важно понимать, что на тачпаде нет понятия нажатия левой или правой кнопки мыши, есть просто нажатие. Данная стрелка означает точку входа в наше приложение. Точка входа привязывается только к одной View, и эта View будет отображаться первой при старте нашего приложения. Исключением может быть только модуль конфигурации предварительной заставки “LaunchScreen.storyboard”, тогда сначала будет появляться заставка с презентацией функций приложения, а затем наша View, на которую была привязана точка входа. Нажмите на View, на панели свойств откройте вкладку “Show the identity inspector”. В поле “Class” содержится класс контроллера, который привязан к нашему представлению (View). Рядом с названием класса “ViewController” есть серая иконка со стрелкой вправо, если вы нажмете на нее, то попадете в модуль контроллера “ViewController”. Вернитесь в модуль “Main.storyboard”. В свойствах дизайнера внизу выберите устройство “iPhone 6s”: Перенесите из библиотеки компонентов два элемента управления “Text Field” и один элемент управления “Button” на View. Выделите элемент управления “Text Field” справа и слева от него будут видны квадратики, потяните за правый квадратик и растяните поле на всю ширину экрана. То же самое проделайте со вторым элементом управления “Text Field” и элементом управления “Button”. У вас должно получится так, как на картинке ниже: Обратите внимание на кнопки внизу дизайнера: Это кнопки для отображения панелей свойств элементов управления. На этих панелях задаются выравнивания элементов управления либо относительно View, на котором они расположены, либо относительно других элементов управления, находящихся с ними по соседству. В терминологии Apple они называются ограничениями (Constraints). Это отдельная и довольно объемная тема для понимания, поэтому пока мы будем пользоваться только одной панелью задания ограничений, более простой для понимания. Выделите первый элемент управления “Text Field”, затем нажмите на кнопку “Pin” в дизайнере: Появится диалог ограничений для данного элемента управления: Выпадающие списки сверху, снизу, слева и справа - это допустимое расстояние элемента управления относительно стен View соответственно. Нам необходимо задать ограничение, чтобы наш элемент управления остался на том же месте, где он сейчас расположен на View , но при этом, в зависимости от ширины экрана устройства, подстраивался под эту ширину. Чтобы этого добиться, снимите галочку с “Constrain to margin”, отметьте галочкой поле “Height”, чтобы высота элемента управления не менялась. Отметьте линии верхняя, левая и правая. У вас должно получиться вот так: Заметьте, кнопка “Add 4 Constraints” стала активной. Нажмите на нее. Теперь проделайте ту же самую операцию для второго элемента управления “Text Field” и элемента управления “Button”. Значения в выпадающих списках не меняйте. Можно запустить приложение и посмотреть, что получилось. Остановите приложение. Откройте модуль “Main.storyboard”. Теперь нам необходимо привести в порядок пользовательский интерфейс и сделать его понятным для пользователя. Выделите первый элемент управления “Text Field”. В панели свойств откройте вкладку “Show the attributes inspector”, на этой вкладке найдите поле “Placeholder”, введите в это поле текст “Введите имя пользователя”. Свойство Placeholder задает текст, который отображается в поле ввода, когда это поле не заполнено. Выделите второй элемент управления “Text Field”, в панели свойств, откройте вкладку “Show the attributes inspector”, на этой вкладке найдите поле “Placeholder”, введите в это поле текст “Введите пароль пользователя”. Затем найдите поле “Secure Text Entry” и отметьте его галочкой. Данное свойство будет отображать звездочки вместо текста, вводимого пользователем, используется для полей ввода паролей. Выделите кнопку “Button”, в панели свойств, откройте вкладку “Show the attributes inspector”, найдите поле без названия с текстом “Button”, удалите этот текст и добавьте текст “Вход”. Найдите поле “Text Color”, установите цвет текста “White Color”. Найдите поле “Background”, установите фон кнопки цветом “Blue Color”. Перетащите из библиотеки компонентов на View под кнопку “Вход” элемент управления “Label”. Растяните его по ширине экрана. Задайте ему такие же ограничения, как мы задавали выше для прошлых элементов управления. Выделите элемент управления “Label”, в панели свойств, откройте вкладку “Show the attributes inspector”. На этой вкладке найдите поле без названия с текстом “Label”. Удалите из него текст, введите текст “Нет ошибок”. Найдите поле “Alignment”, задайте выравнивание текста по центру. Выделите View, в панели свойств, откройте вкладку “Show the attributes inspector”, найдите поле “Background”, установите фон View “Light Green”. У вас должно получиться следующее: Теперь необходимо добавить действие на нажатие кнопки “Вход” и объявить переменные для полей ввода и элемента управления “Label”. Для этого в панели инструментов нажмите кнопку “Show the assistant editor”, экран разделится пополам. Если экран вашего компьютера не позволяет нормально видеть дизайнер и модуль контроллера, скройте панель навигатора и панель свойств. Выделите первый элемент управления “Text Field” в дизайнере, не отводя курсор мыши с этого элемента управления, зажмите кнопку “Ctrl”, нажмите и удерживайте левую кнопку мыши, затем начинайте вести курсор на окно с модулем контроллера, когда курсор окажется между фигурными скобками класса контроллера, отпустите левую кнопку мыши, появится диалоговое окно параметров элемента управления: В данном окне есть несколько полей. Давайте их рассмотрим подробнее. Поле “Connection”,  может принимать несколько вариантов значений, в данном уроке нас будут интересовать всего два значения “Outlet” (используется для создания переменной, связанной с элементом управления) и “Action” (используйте для задания обработчика события на какое либо действие элемента управления). Поле “Name”, сюда вы вводите название вашей переменной, которая будет связана с элементом управления. Поле “Type”, содержит тип элемента управления (название класса элемента управления), можно ввести другой класс, если вы знаете иерархию наследования элемента управления UITextField. Поле “Storage”, содержит вид размещения созданной переменной в памяти операционной системы. Может принимать значения “Weak” или “Strong”. В поле “Name” введите название переменной “userNameTxt” и нажмите кнопку “Connect” или кнопку “Enter” на клавиатуре. В модуле контроллера добавится строчка с названием переменной, которую вы задали. Обратите внимание на черный шарик, находящийся на одном уровне с этой переменной слева в области нумерации строк. Нажмите на него, и в дизайнере выделится элемент управления, к которому привязана данная переменная. Вот пример: Повторите данное действие для остальных элементов управления. Для второго текстового поля  укажите название переменной “passwordTxt”. Для элемента управления “Label” укажите название переменной “validationLabel”. Для кнопки выберите в поле “Connection” значение “Action”, у вас добавится еще одно поле “Event”. В данном поле задается событие, на которые вы хотите назначить обработчик в коде контроллера. По умолчанию установлено событие “Touch Up Inside”, оставьте его как есть. В поле “Type” установлено значение “AnyObject” (Это класс, который может содержать любые типы данных, аналог подобного класса в других языка программирования, например, C# - это класс Object). Измените это значение на тип элемента управления UIButton, поскольку данный объект будет передан в аргументы метода обработчика назначенного события и намного удобнее будет обращаться явно к экземпляру кнопки, чем распаковывать этот экземпляр путем приведения к типу “UIButton” из типа “AnyObject”. В поле “Name” введите “loginButtonTapped”. У вас должно получиться вот так: Нажмите кнопку “Connect”. Код контроллера должен выглядеть вот так: Теперь давайте проверим, работает ли событие нажатия по кнопке “Вход”. Добавьте в метод “loginButtonTapped” следующий код: Давайте разберем этот код. На 16 строке идет проверка наличия текста в поле ввода “Имя пользователя”. Ключевое слово “self” означает ссылка на самого себя, в других языках программирования аналог, например, в C# - это ключевое слово “this”. Из переменной “userNameTxt” мы обращаемся к свойству “text”, данное свойство возвращает текст, который вы ввели в данный элемент управления. Знак вопроса в конце  этого свойства ставится, так как это свойство имеет тип String? и может содержать значение “nil” (аналог “null” в C#). Далее мы обращаемся к свойству “characters” , которое содержит массив символов и от этого массива вызываем свойство “count”, чтобы получить количество символов в строке. Такая запись введена, начиная со Swift 3, доступного с обновлением среды разработки до Xcode 8 версии. В ранних версиях Swift, например, версии 2.1-2.3 можно было получить длину строки намного короче “self.userNameTxt.text?.length”. Если поле ввода “Имя пользователя” не заполнено, мы отображаем сообщение валидации “Имя пользователя не задано”. На 18 строке мы делаем аналогичную проверку для поля “Пароль пользователя”. На 20 строке мы проверяем, если заполнены оба поля ввода, тогда все хорошо и мы выводим сообщение “Нет ошибок”. Обратите внимание на запись “(self.userNameTxt.text?.characters.count)!”, скобки и знак восклицания в конце, на самом деле, применяются к свойству “text”, так как оно имеется Nullable тип. Этой записью мы гарантируем компилятору, что в данном свойстве не будет содержаться значение “nil” и данное свойство будет инициализировано. Теперь запустите приложение и проверьте его работу. На этом урок подошел к концу. В следующем уроке мы рассмотрим работу с классами UITableViewController, навигацию между представлениями, понятие делегата, разберем формат и размеры иконки приложения, научимся использовать Assets.

Здравствуйте, дорогие читатели. Меня зовут Владимир. Любая технология рано или поздно приедается и рост себя как специалиста затрудняется. Было принято решение что то кардинально поменять в своей жизни. А так как писать различные интересные проекты я просто обожаю, было принято решение начать изучение в корне другой платформы, среды разработки и языка программирования. Поиск этой платформы оказался достаточно прост для меня. Я решил, что это будет мобильная платформа. У меня было много разных телефонов с разными операционными системами. Но свой выбор я сделал в пользу iOS, так как при железе слабее, чем у других телефонов, софт работает намного быстрее, чем на других платформах. Это не все преимущества этой платформы, но о других я рассказывать я не буду, дабы не раздувать дискуссию на эту тему. Скажу лишь одно, что телефон c iOS меня ни разу не подвел, даже в самые нужные моменты. Разумеется, что для разработки под iOS необходим mac, и я его купил. Перед покупкой, разумеется, пробовал разработку под мобильные платформы в гибридных платформах типа Xamarin, Ionic, но на то время функционал в них был не так совершенен, как сейчас, да и пользуясь ими, я бы остался на платформе Windows, это нарушало цель, которую я перед собой поставил по поводу другой платформы. В течение отпуска, где то за месяц я разобрался, как писать под iOS приложения и сразу начал искать проект, на котором смогу потренироваться. Друг предложил такой проект и я взялся. За 9 месяцев написал серьезное приложение, купил учетную запись разработчика, выкладывал сборки на Test Flight, их тестировали тестировщики, прошел валидацию в App Store и выложил приложение в App Store. А теперь по сути. Я постараюсь написать серию статей, в которых распишу простым языком, что надо делать, чтобы у вас тоже это получилось и вы таки выложили свое приложение в App Store. Касаемо разработки под iOS, то это просто мое хобби во вне рабочее время (надо же как то развлекаться), основной хлеб приносит разработка под Windows/Web платформу с технологиями Microsoft. Итак, приступим. Включите свой мак, найдите на панели задач иконку App Store и нажмите на нее. Выглядит эта иконка вот так: Затем введите в поле поиска, текст “xcode”, вы должны увидеть следующее:  У меня Xcode уже установлен, поэтому на скриншоте отображается кнопка “Open”, у вас будет отображаться кнопка “Install”. Установите Xcode себе на компьютер, версия Xcode с которой мы будет работать с вами в этом примере, будет 8, на текущий момент это последняя версия этой среды разработки. Язык программирования, который мы будем использовать, называется Swift, по синтаксису он больше похож на JavaScript и где-то даже на C# местами. Синтаксис языка Swift в этих статьях мы разбирать не будем, в сети интернет есть полно руководств на эту тему. Сам синтаксис языка не сложно изучить, это делается за день, сложность как раз возникнет при попытке разработки приложения под iOS. Вот именно эту сложность, мы с вами и постараемся одолеть. Чтобы серия статей была как-то взаимосвязана, мы с вами напишем проект под названием “Warehouse” (склад), в котором можно будет добавлять товары, заполнять их атрибуты, редактировать и удалять товары. Данные будут сохраняться в настройки телефона. Вы уже установили Xcode 8? Если да, тогда запускайте его, вы увидите следующее: Нажмите кнопку “Create a new Xcode project”. Вы увидите такой экран:  Выделите проект “Single View Application” и нажмите кнопку “Next”. Вы попадете на экран задания названия проекта: На данном скриншоте виден пример того, как заполнить название приложения. В поле “Product Name“, введите “Warehouse”, так будет называться наше приложение. В поле “Organization Name”, введите свои имя и фамилию, или название вашей компании. В поле “Organization Identifier”, вводится уникальный идентификатор приложения, который будет использоваться как ключ при регистрации данного приложения в iTunes, чтобы была возможность подписывать сборки и отправлять на бета сервер Test Flight для тестирования, но об этом позже. Вкратце “com” - это сокращенно “company”, “bozhek” это название компании, у вас это будет другое название. В поле Bundle identifier видно полное название вашего приложения в iTunes. В поле Language, оставьте Swift. В поле Devices, выберите iPhone. Нажмите кнопку “Next”. Откроется проект, который мы создали: Обратите внимание на красный кружок в поле Status: “Signing for Warehouse reguires a development team”. Это сообщение говорит нам о том, что приложение надо подписать сертификатом, без сертификата мы не соберем и не запустим это приложение. Давайте это исправим. В поле Team, откройте выпадающий список и выберите в нем пункт “Add an Account...”, откроются свойства среды разработки Xcode, с предложением ввести логин и пароль от  вашей учетной записи в App Store, под которой вы устанавливаете приложения себе на телефон: Если же у вас по каким то причинам нет этой учетной записи, создайте ее, нажав на кнопку “Create Apple ID”. Создание этой учетной записи я не буду рассматривать в данной статье, поскольку она создается очень легко и в сети интернет есть полно информации на эту тему. Итак, вы ввели в поля Apple ID и Password свои данные, нажмите кнопку “Sign In”. После этого красный круг с ошибкой пропадет и вы увидите следующее: Теперь вы сможете собрать и запустить свой проект. Заметьте, я рассказываю чисто практически как и что делается, особо не вникая в детали. Если вам нужна более подробная информация, вбейте в гугл WWDC, и посмотрите официальные видео сессии от компании Apple, в их двухчасовом видео много воды, но зато есть теория, которая будет вам нужна. Я даю только суть. Нажмите на иконку приложения в проекте: Выберите симулятор “iPhone 7”. Затем нажмите на кнопку Собрать и запустить приложение: Будет запущена сборка проекта и запущен симулятор “iPhone 7”, в котором откроется наше приложение: Сейчас мы видим только белый экран и больше ничего, так как мы еще ничего не делали. Чтобы выйти на рабочий стол в симуляторе, выполните сочетание клавиш Shift + Command + H, это сочетание означает нажатие кнопки Home: Вы увидите на рабочем столе наше приложение "Warehouse". Теперь давайте остановим выполнение приложения, для этого в Xcode нажмите кнопку: Теперь давайте посмотрим, что у нас есть внутри проекта. Выделите в левой панели среды разработки файл “Main.storyboard”, в этом файле содержится представление приложения. В панели справа отображаются свойства представления. Разработка под iOS строится через паттерн MVC (Model View Controller), файл Main.storyboard, содержит View, которые вы будете использовать в своем приложении для создания визуального  интерфейса. Теперь давайте выделим в панели свойств вкладку Class: В поле Class , мы видим класс контроллера, привязанный к данному представлению. Теперь выделите вкладку Size: На данной вкладке задаются размеры представления. Выделите вкладку Events: На данной вкладке задаются обработчики событий в представлении с привязкой к методам в контроллере. Теперь выберите в левой панели файл ViewController.swift : На 9 строке подключено пространство имен UIKit. На 11 строке объявляется класс с именем ViewController, который наследуется от базового класса контроллера UIViewController. На 13 строке мы переопределяем метод, загрузки представления, этот метод вызывается когда представление начинает свою загрузку. В этом методе необходимо предварительно проинициализировать данные элементов управления, используемых на вашем представлении. На строке 14, вызывается метод базового класса ViewController. Код на строке 18 нам пока не интересен, мы его рассматривать не будем, чтобы не путаться. На этом урок завершается. На следующем уроке, в первой части, мы рассмотрим с вами, как пользоваться элементами управления, как привязывать к ним обработчики событий и как взаимодействовать с ними.

Моя идея состояла в том, чтобы построить простой репликабельный проект на Angular с бэкэндом на Django. Я искал и не смог найти нужных решений, пришлось во всем разбираться самому. В итоге я разобрался и решил сам написать гайд для всех, кого может заинтересовать данная проблема.  Данная статья поможет вам построить простое приложение Angular с бэкэндом на Django, организованного с помощью Webpack. Проблема Я хочу настроить проект на Angular 1.1.x и скормить ему данные с сервера Django. Мне бы хотелось использовать Django REST Framework (DRF), чтобы пострить RESTful API. Я также хочу сбандлить JS ассеты. Сейчас я собираюсь запустить сайт на одном сервере. Предварительные требования Python 2.x Django 1.9.x npm 2.15.8+ Webpack 1.13.x (sudo npm i -g webpack) ESLint 2.13.1+ (sudo npm i -g eslint) NodeJS 4.4.7+ Содержание Скаффолдинг проекта. Создайте свои начальные директории. Скаффолдинг проекта на Django. Настрока переменных среды, нужных для запуска сервера Django. Установка Django REST Framework и настройка Django с использованием переменных среды. Создание API. Запуск Django сервера с использованием dev settings. Инициализация npm-пакета и установка front-end JS зависимостей. Создание Angular entry-point и загрузка начальных зависимостей. Настройка Webpack'а. Дайте команду Django загрузить приложение. Создайте шаблон базы приложения Angular. Напишите компонент home. Напишите Angular роуты, ведущие к вашему компоненту home и странице 404. Добавьте директивы ангуляр-маршрутизатора к шаблону входной точки приложения. Проверьте ваше REST API в приложении Angular.  Шпаргалка. Итак, начнем! 0. Настройте среду для Python. mkvirtualenv mysite 1. Скаффолдинг проекта на Django. Создайте начальные директории. Мы хотим сфокусироваться на модулярности в ходе разработки. Следовательно, существует множество директорий в конечном итоге использования. Мы хотим, чтобы наше дерево изначально выглядело так: mysite ├── backend │ ├── docs │ ├── requirements └── frontend ├── app │ ├── components │ └── shared ├── assets │ ├── css │ ├── img │ ├── js │ └── libs ├── config ├── dist └── js  Сделайте следующее: mkdir mysite && cd mysite mkdir -p backend/docs/ backend/requirements/ \ frontend/app/shared/ \ frontend/app/components/ \ frontend/config \ frontend/assets/img/ frontend/assets/css/ \ frontend/assets/js/ frontend/assets/libs/ \ frontend/dist/js/  *Примечание: Структура этого проекта была навеяна опытом с несколькими другими проектами. Я считаю эту организацию идеальной, но вам не обязательно ей следовать. Но, пока вы читаете этот гайд, вы должны придерживаться этой структуры. 2. Скаффолдинг проекта на Django. В директории backend/ создайте Django проект: python django-admin.py startproject mysite  Также создайте requirements.txt: pip freeze > requirements/requirements.txt В директории (вашего проекта) backend/mysite/ произведите скаффолдинг директории, той, где будет жить ваше API: mkdir -p applications/api/v1/ touch applications/__init__.py applications/api/__init__.py \ applications/api/v1/__init__.py applications/api/v1/routes.py \ applications/api/v1/serializers.py applications/api/v1/viewsets.py Теперь создайте структуру директории настроек: mkdir -p configlord/settings/ touch configlord/settings/__init__.py \ configlord/settings/base.py configlord/settings/dev.py configlord/settings/prod.py \ configlord/dev.env configlord/prod.en 3. Настройте переменные окружения, которые нужны для запуска сервера Django. На этом этапе я предпочитаю пользоваться django-environ для работы с переменными окружения. Существует множество способов сделать это, но пакет django-environ чрезвычайно упрощает этот процесс, поэтому я использую его во всех своих проектах. Установите django-environ: pip install django-environ  В mysite/dev.env добавьте следующее: DATABASE_URL=sqlite:///mysite.db DEBUG=True FRONTEND_ROOT=path/to/mysite/frontend/ SECRET_KEY=_some_secret_key Мы собираемся использовать эти переменные среды в наших настройках. Выгода от использования наших переменных окружения в отдельных файлах состоит в основном в том, что такая настройка позволяет облегчить переключение между средами. В нашем случае файл the dev.env является списком переменных, которые мы бы использовали в локальной среде разработки. *Примечание: SECRET_KEY можно взять из settings.py, который был сгенерирован django-admin.py startproject. 4. Установите Django REST Framework и настройте Django, используя переменные среды. Установка DRF: pip install djangorestframework Наполните settings/base.py  следующим: Укажите, где искать переменные окружения. import environ project_root = environ.Path(__file__) - 3 env = environ.Env(DEBUG=(bool, False),) CURRENT_ENV = 'dev' # 'dev' is the default environment # read the .env file associated with the settings that're loaded env.read_env('./mysite/{}.env'.format(CURRENT_ENV)) Установите базу данных. В данном случае мы собираемся использовать встроенные в django-environ настройки SQLite. DATABASES = { 'default': env.db() } Установите SECRET_KEY ,а также debug. SECRET_KEY = env('SECRET_KEY') DEBUG = env('DEBUG') Добавьте DRF в пул приложений, которые Django должен использовать. # Application definition INSTALLED_APPS = [ ... # Django Packages 'rest_framework', ] Ссылки будут «жить» в специальном URL модуле, созданном с помощью базы проекта. ROOT_URLCONF = 'mysite.urls' Укажите Django, где искать все шаблоны и другие статические ассеты. STATIC_URL = '/static/' STATICFILES_FINDERS = [ 'django.contrib.staticfiles.finders.FileSystemFinder', 'django.contrib.staticfiles.finders.AppDirectoriesFinder', ] STATICFILES_DIRS = [ env('FRONTEND_ROOT') ] TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', 'DIRS': [env('FRONTEND_ROOT')], 'APP_DIRS': True, 'OPTIONS': { 'context_processors': [ 'django.template.context_processors.debug', 'django.template.context_processors.request', 'django.contrib.auth.context_processors.auth', 'django.contrib.messages.context_processors.messages', ], }, }, ] В соответствии с настройкой TEMPLATES Django должен будет искать шаблоны внутри frontend/ directory. Это то, где Angular приложение будет жить. Мы используем только Django, чтобы обслужить шаблон, внутри которого Angular приложение будет загружаться, которое будет выполнено через entry-point директиву. Если вы не знаете, о чем я, продолжайте чтение...  Наполните settings/dev.py: from mysite.settings.base import * CURRENT_ENV = 'dev' Здесь мы указываем, что этот файл настроек унаследывает настройки из base.py и переопределяет строку CURRENT_ENV, найденную в base.py. Мы говорим: «Используй это значение вместо значения, найденного в наследуемом модуле». 5. Создайте API. Нам нужно нечто, с помощью чего мы сможем протестировать службы Angular, поэтому давайте создадим небольшое API. Этот шаг можно пропустить, но я не советовал бы делать этого. Нам важно знание того, что настройки приложения Angular работают исключительно с точки зрения его потенциала, чтобы облегчить HTTP запросы. Сгенерируйте приложение. manage.py startapp games Создайте модель в games/models.py. class Game(models.model): title = models.CharField(max_length=255) description = models.CharField(max_length=750) Создайте DRF сериализатор для модели игры в  applications/api/v1/serializers.py. from rest_framework.serializers import ModelSerializer from applications.games.models import Game class GameSerializer(ModelSerializer): class Meta: model = Game Создайте  DRF viewset для модели в приложениях applications/api/v1/viewsets.py. from rest_framework import viewsets from applications.games.models import Game from applications.api.v1.serializers import GameSerializer class GameViewSet(viewsets.ModelViewSet): queryset = Game.objects.all() serializer_class = GameSerializer В applications/api/v1/routes.py зарегистрируйте роуты, используя DRF's router registration features. from rest_framework import routers from applications.api.v1.viewsets import GameViewSet api_router = routers.SimpleRouter() api_router.register('games', GameViewSet) Обозначьте ссылки для зарегистрированного DRF роута внутри mysite/urls.py: from django.contrib import admin from django.conf.urls import include, url from applications.api.v1.routes import api_router urlpatterns = [ url(r'^admin/', admin.site.urls), # API:V1 url(r'^api/v1/', include(api_router.urls)), ] 6. Запустите сервер Django, используя dev settings. manage.py runserver --DJANGO_SETTINGS_MODULE=mysite.settings.dev Впуская DJANGO_SETTINGS_MODULE в runserver, мы «говорим» - работать используя специфические параметры. Если все работает, у вас появится возможность открыть localhost:8000/api/v1/games и увидеть ответ от DRF. Если все работает – самое время заняться построением приложения Angular. Если нет – направьте автору проблему. Если вы застряли на этом этапе – оставьте комментарий автору под оригиналом публикации. 7. Инициализируйте npm-пакет и установите front-end JS зависимости. Приложение Angular не будет работать так, как мы хотим, если правильные зависимости не будут установленны. Самое время установить базовые пакеты, которые понадобятся. Инициализируйте npm-пакет. Прямо из  frontend/ запустите npm init --yes By passing the --yes flag into init, you're telling NPM to generate a package.json using NPM defaults. Otherwise, if you don't pass that in, you'll have to answer questions... Boring. Установите dev dependencies.  npm install --save-dev eslint eslint-loader Установите общие зависимости. npm install --save eslint eslint-loader angular angular-resource angular-route json-loader mustache-loader lodash Файл package.json file во frontend/ должен выглядеть приблизительно следующим образом: { "name": "my-app", "version": "0.0.1", "description": "This is my first angular app.", "main": "app.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "eslint": "^3.1.1", "eslint-loader": "^1.4.1" }, "dependencies": { "angular": "^1.5.8", "angular-resource": "^1.5.8", "angular-route": "^1.5.8", "eslint": "^3.1.1", "eslint-loader": "^1.4.1", "json-loader": "^0.5.4", "lodash": "^4.13.1", "mustache-loader": "^0.3.1" } } Здесь то, что мы только что установили: eslint – отличный линтер, благодаря которому код JavaScript будет в порядке (последователен). eslint-loader – для запуска eslint через Webpack. Чуть позже я объясню концепцию «загрузчиков». angular -  MVC фреймворк. Если  вы не знали об этом, стоит подумать о том, чтобы закрыть эту страничку прямо сейчас. angular-resource -  (Angular) HTTP библиотека выбора. Это абстракция $http. json-loader - загрузчик (снова, используемый Webpack) для распаковки JSON из .json файлов с помощью require() во время работы нашего приложения. mustache-loader – загрузчик, который мы будем использовать, чтобы парсить наши mustache шаблоны. Mustache шаблоны – это веселье. Я могу спокойно предположить, что вы не знаете, как все эти пакеты заиграют вместе.  Не переживайте, братишки. 8. Создайте entry-point в Angular, объявите начальные зависимости, объявите первоначальные глобальные переменные. В frontend/app/app.js добавьте следующее: /* Libs */ require("angular/angular"); require("angular-route/angular-route"); require("angular-resource/angular-resource"); /* Globals */ _ = require("lodash"); _urlPrefixes = { API: "api/v1/", TEMPLATES: "static/app/" }; /* Components */ /* App Dependencies */ angular.module("myApp", [ "ngResource", "ngRoute", ]); /* Config Vars */ // @TODO in Step 13. /* App Config */ angular.module("myApp").config(routesConfig); app.js это то, где Webpack будет искать модули, чтобы бандлить их вместе. Лично я ценю такую организацию и методику вызовов, но такой порядок не обязателен. Существует 6 секций: Libs – главные библиотеки, используемые на протяжении работы Angular приложения; Globals – зарезервированные глобальные переменные, которые мы можем использовать во время работы приложения; Components (Компоненты) – особенные модули проекта; App Dependencies (Зависимости приложения) – объявление входной точки приложения и его зависимостей; Config Vars – переменные, где хранятся настройки, такие как route config; App Config - вводит configs (настройки) в приложение, используя сохраненные из предыдущей секции. Для того, чтобы globals работали, вам следует указать ESLint на то, какие из переменных - глобальные. В config/eslint.json добавляем следующее: { "env": { "node": true }, "extends": "eslint:recommended", "rules": { "indent": [ "error", 2 ], "linebreak-style": [ "error", "unix" ], "quotes": [ "error", "double" ], "semi": [ "error", "always" ], "no-console": 0 }, "globals": { "_": true, "_urlPrefixes": true, "angular": true, "inject": true, "window": true }, "colors": true } Ниже несколько переменных, о которых мы предупредили ESLint: _ представить lodash. _urlPrefixes – объект, который мы будем использовать в приложении для гиперссылок. Я расскажу об этом позже. angular, чтобы представить AngularJS object driving our entire application. inject, который будет использоваться для ввода зависимостей Angular. window, которая просто представляет объекты окон в JavaScript, является представителем  DOM. 9. Настройка Webpack. Теперь, когда мы выложили большинство наших зависимостей приложения, мы можем построить config file для Webpack. Webpack будет консолидировать все зависимости, а также модули для приложений, которые мы создаем в один файл. В bundle. В frontend/webpack.config.js добавляем следующее. module.exports = { entry: "./app/app.js", output: { path: "./dist/js/", filename: "bundle.js", sourceMapFilename: "bundle.js.map", }, watch: true, // eslint config eslint: { configFile: './config/eslint.json' }, module: { preLoaders: [{ test: /\.js$/, exclude: /node_modules/, loader: "eslint-loader" }], loaders: [ { test: /\.css$/, loader: "style!css" }, { test: /\.html$/, loader: "mustache-loader" }, { test: /\.json$/, loader: "json-loader" }] }, resolve: { extensions: ['', '.js'] } }; Для того, чтобы Webpack бандлил все наши статические зависимости, нам нужно указать ему, где их брать, какие зависимости обрабатывать и как управлять ими до банлинга. Давайте посмотрим на то, что указывает Webpack с помощью webpack.config.js: Entry - это путь к тому, что Webpack'у нужно для старта бандлинга. Это можеть быть полный путь или путь, относительный тому, где webpack.config.js располагается. В данном случае мы говорим о последнем варианте. output -  это объект, содержащий в себе path, который является директорией, в которую связанные зависимости будут помещаться; filename - это название бандла; и, в данном случае, мы решили использовать sourceMapFilename, чтобы обозначить, что наша() source map будет вызван(а). watch указывает Webpack следить за изменениями в файле, пока он выполняется. Если это не настроено как true, Webpack прогонит процесс бандлинга единожды и остановится. eslint содержит в себе специфические ESLint настройки, используемые eslint-loader. module указывает Webpack'у, что делать с модулями, с которыми он работает. module.preLoaders «говорит», что делать перед бандлингом. В данном случае мы хотим запустить модули (исключив модули установленные npm) через eslint. module.loaders - это то, где указана последовательность загрузчика. В нашем случае мы просто настраиваем test и loader,  где test указывает Webpack’у, какие модули запускать в загрузчике (по соответствию с паттерном regex), и loader говорит Webpack’y, какой загрузчик использовать в модулях, которые соответствуют regex паттерну в test. Каждый загрузчик указан в строке и разделен восклицательным знаком. Ex:  loader!another_loader!yet_another_loader module.preLoaders указывает, какие preLoaders'у запускать модули. Используемые настройки такие же точно, какие мы использовали в module.loaders. Но, Грег, какая  разница между preLoaders и loaders? Я рад, что ты спросил, мой дорогой друг!! A loader указывает Webpack'у, как бандлить требуемые файлы. Loader смотрит на модуль и говорт: «Эй, так как вы упаковываете это в один файл как строку – это то, как оно должно быть преобразованно для bundle'а». A preLoader обрабатывает код перед loaders, например, чтобы слинтить JavaScript модули. A postLoader является плагином Webpack'а, который обрабатывает код после бандинга. Мы не специфицировали ни один  postLoader ради простоты. 10. Укажите Django загрузить приложение. Прямо сейчас все, что нужно сделать – указать Webpack’у что создавать, как создавать и что должно быть создано. (На данном этапе я бы очень удивился, если вы попробуете запустить его и он заработает без ошибок. Если так и есть, я чертов мужик.) Так как Django использует свой собственный URL процессор в нашем приложении, мы можем быть рады тому, как любезно Django управляет всем тем, что введено в строку браузера пользователя. Как бы то ни было, мы бандлим одностраничное приложение, используя абсолютно другой фреймворк, и хотим, чтобы у приложения был полный контроль над тем, что пользователь вводит. Все, что нам нужно  – обслуживать одну страничку, в которой работает SPA. Следовательно... В backend/mysite/mysite/urls.py добавляем в список urlpatterns следующее: # Web App Entry url(r'^$', TemplateView.as_view(template_name="app/index.html"), name='index'), Это значит, что когда пользователь открывает mysite.com/, env('FRONTEND_ROOT') + app/index.html будет находить STATICFILES_FINDERS  в порядке рендера HTML шаблона. 11. Создайте шаблон базы приложения Angular. frontend/app/components/app/index.html шаблон должен выглядеть как обычный шаблон Django. В frontend/app/index.html добавляем следующее: {% load staticfiles %} <html ng-app="myApp"> <head> <title>My Sitetitle> <script src="{% static 'dist/js/bundle.js' %}">script> head> <body> body> html> В таком случае вам удастся запустить Webpack. Если вы запустите Django сервер и откроете localhost:8000,вы увидите пустую страничку. Если нет – дайте знать автору. 12. Напишите home component. Давайте напишем наш первый компонент. Он отобразит текст на страничке, пока пользователь открывает localhost:8000. Создайте директорию для компонента и базовые файлы. В frontend/app/components/: mkdir home && touch home/home-controller.js home/home.js home/home.html В frontend/app/components/home/home.html добавляем следующее: <div ng-controller="HomeController as ctrl"> <div> <h1>Home!h1> div> div> Теперь добавим следующее в  frontend/app/components/home/home-controller.js: function HomeController() { var that = this; that.foo = "Foo!"; console.log(that); // should print out the controller object } angular.module("Home") .controller("HomeController", [ HomeController ]) Определение модуля Angular должно быть объявлено в home.js: angular.module("Home", []); require("./home-controller"); Теперь мы можем сослаться на "Home" в области зависимости определения модуля. Давайте сделаем это! В app/app.js добавьте следующее: /* Components */ require("./components/home/home"); /* App Dependencies */ angular.module("myApp", [ "Home", // this is our component "ngResource", "ngRoute" ]); 13. Пропишите пути Angular'а, ведущие к home component и страничке 404. Нам нужно настроить первый путь. Когда пользователь попадает на localhost:8000, Angular должен взять контроль над загрузкой отрендеренного шаблона. Чтобы сделать это, нам потребуется использовать angular-router. В frontend/app/routes.js пишем следующее: function routesConfig($routeProvider) { $routeProvider .when("/", { templateUrl: _urlPrefixes.TEMPLATES + "components/home/home.html", label: "Home" }) .otherwise({ templateUrl: _urlPrefixes.TEMPLATES + "404.html" }); } routesConfig.$inject = ["$routeProvider"]; module.exports = routesConfig; Если мы не добавим _urlPrefixes.TEMPLATES, angular-router предположит, что components/home/home.html является действительной ссылкой, которую узнает сервер. Так как STATIC_URL в настройках предполагает неправильную работу localhost:8000/components/home/home.html. Также, если вы еще не заметили, вы увидите otherwise({...})  в коде роутов. Это то, как будут реализованы страницы 404. В frontend/app/404.html добавляем следующее: <h1>NOT FOUNDh1> И в завершении  добавляем frontend/app/app.js: /* Config Vars */ var routesConfig = require("./routes"); 14. Добавьте директивы angular-router к шаблону точки входа приложения. А теперь нам нужно указать Angular, где будет происходить переключение отображаемого, когда пользователь пользуется навигацией. Чтобы сделать это, мы используем всю силу angular-router. В тэг    в frontend/app/index.html добавляем: <base href="/"> Теперь в тэг  добавляем: <div ng-view>div> Ваш index.html теперь должен выглядеть так: {% load staticfiles %} <html ng-app="myApp"> <head> <title>My Sitetitle> <script src="{% static 'dist/js/bundle.js' %}" >script> <base href="/"> head> <body> <div> <div ng-view>div> div> body> html> Запустите Webpack. Откройте localhost:8000. Вы должны увидеть, что произошло в home/home.html. (Если ничего, отправьте эти данные автору J ). 15. Проверьте REST API в приложении Angular. Если все сделано, у вас появится возможность написать angular службы для Django API. Давайте создадим небольшой компонент, чтобы увидеть, можем ли мы это сделать. Этот компонент должен перечислять игры. Я предполагаю, что вы уже заполнили базы данных, следовательно запрос HTTP к localhost:8000/api/v1/games вернет список игр. Создайте скаффолд компонент в frontend/app/components/: mkdir -p game/list/ && touch game/list/game-list-controller.js game/list/game-list-controller_test.js game/game-service.js game/game.js game/game.html Этот компонент будет перечислять игры. Этот компонент должен перечислять игры. Я предполагаю, что вы уже заполнили базы данных, следовательно запрос HTTP к localhost:8000/api/v1/games вернет список игр. В game/game-service.js: function GameService($resource) { /** * @name GameService * * @description * A service providing game data. */ var that = this; /** * A resource for retrieving game data. */ that.GameResource = $resource(_urlPrefixes.API + "games/:game_id/"); /** * A convenience method for retrieving Game objects. * Retrieval is done via a GET request to the ../games/ endpoint. * @param {object} params - the query string object used for a GET request to ../games/ endpoint * @returns {object} $promise - a promise containing game-related data */ that.getGames = function(params) { return that.GameResource.query(params).$promise; }; } angular.module("Game") .service("GameService", ["$resource", GameService]); Обратите внимание на ссылку $resource, которую мы используем для того, чтобы настроить механизмы HTTP в нашей службе. В game/list/game-list-controller.js: function GameListController(GameService) { var that = this; /* Stored game objects. */ that.games = []; /** * Initialize the game list controller. */ that.init = function() { return GameService.getGames().then(function(games) { that.games = games; }); }; } angular.module("Game") .controller("GameListController", [ "GameService", GameListController ]); В game/game.html: <div ng-controller="GameListController as ctrl" ng-init="ctrl.init()"> <div> <h1>Gamesh1> <ul> <li ng-repeat="game in ctrl.games">{{ game.title }}li> ul> div> div> В game/game.js: angular.module("Game", []); require("./list/game-list-controller"); require("./game-service"); Затем обратимся к компоненту в app.js: /* Components */ require("./components/game/game"); /* App Dependencies */ angular.module("myApp", [ "Home", "Game", "ngResource", "ngRoute" ]); В конце концов, мы собираемся настроить роуты для списка игр, поэтому в frontend/app/routes.js добавьте следующее в объект $routeProvider: .when("/game", { templateUrl: _urlPrefixes.TEMPLATES + "components/game/list/game-list.html", label: "Games" }) Запустите Webpack снова. Все должно верно скомпилироваться. Если нет – дайте знать автору. Откройте localhost:8000/#/games. Вы увидите список игр. Сделано! Это все. Сомнения/Мысли Но есть некоторые сомнения: Глобальные переменные могут конкретно подставить вас, если вы не знаете, как с ними работать. Их локальное поведение не гарантирует того же на продакшене. Насколько я помню, их можно заставить работать, если правильно описан метод. Ваше приложение на Angular тесно связанно с Django. Поэтому ваше приложение не будет просто слиянием back- и фронтенда. Если ваш Django-RIP давно устарел, значит поменялись и маршруты, следовательно сконфигурируете ваш бэкенд согласно тому, как должны вести себя статические файлы. Так же вам будет необходимо заменить index.html с точкой входа Angular. Маленькие проекты не дадут вам особо попотеть, а вот большие явно заставят понервничать. Совет: единственное место, где должны сопрягаться приложение на Angular и Django сервер - это одна точка входа. Деплоймент должен быть выполнен так же, как любой обычный деплоймент приложения. Это все. Если у вас есть какие-либо вопросы и вы испытываете трудности, пожалуйста, оставьте их в комментариях в исходной статье! Чит! Автор пообещал выложить на гитхабе репозиторий со всем кодом. Оригинальная статья на английском языке. 

Недавно в моей жизни начинающего разработчика игр появилась задача - сделать фон в игре, но не просто уныленький статичный бэкграунд, а параллакс. Да, эта чудо-красота применима не только в разработке сайтов, но и при создании игр. Попытка вдохновиться в гугле практически ничем не закончилась. Пришлось справляться с задачей собственными силами. У меня получилось. Хочу поделиться с вами опытом. Справедливо замечу, что параллакс — это не достояние веба. Еще в дремучие времена существования 8-битных игр параллакс успешно применялся для создания иллюзии объема в двухмерной игре. Коротко говоря, параллакс — это наслоение изображений, каждый слой движется со своей скоростью. Ближайший к игроку имеет самую высокую скорость, соответственно дальний (последний) — самую низкую. Ну что, вроде, минимально в теории разобрались и даже нашли, откуда ноги растут, значит, мы готовы перейти непосредственно к практике и сотворить это чудо своими руками. Что вам потребуется: базовые знания Unity3D 5 (на уровне создания скриптов, добавления компонентов); понимание С#; 3 или больше картинок в формате .png; внимательность и желание. Ладно, последнее не очень обязательно =) По ссылке вы можете скачать необходимые изображения, а также уже готовый проект. Подготовка Запускаем Unity3D, создаем новый проект, называем его, например, Parallax2D. Закидываем в папку Assets наши бэкграунды. Рекомендую сложить их в отдельную папку. В моем случае они лежат в Assets – StarSky. Каждое изображение называем удобно и понятно. Я назвала их по порядку размещения (Background – задний фон, MiddleBackground – средний, TopBackground – верхний слой). Для того, чтобы картинка перемещалась гладко, нам необходимо настроить ее в Inspector. Обратите внимание, этот этап очень важен, иначе все размажет, как звезды за иллюминатором Энтерпрайза на 3-й космической скорости. В поле Texture Type выбираем тип Texture, во Wrap Mode отмечаем Repeat. И радостно тыкаем Apply. Без этого действия изменения не сохранятся, а потом можно долго недоумевать, почему же оно не работает. Совершаем эти телодвижения и для 2-х остальных текстур. Подготовив картинки, переходим к этапу размещения их на сцене. Часто в этих ваших интерентах можно встретить совет - размещать их с помощью GameObject – Plane. Вы, конечно, можете потрудиться и заставить 3D объект нормально функционировать в 2D игре. Но, на самом деле, это все будет уныло, как последний эпизод «Звездных войн», а работать это чудовище будет чуть более быстро, чем аж никак. Поэтому я рекомендую долго не мучиться и использовать элемент UI – Canvas. Canvas меняет размер фона автоматически, подстраивает его под размеры экрана гаджета, на котором запускают игру. Это избавляет нас от потребности писать скрипт, который будет отвечать за отслеживание размеров экрана и изменения размера фона. В Hierarchy выбираем UI – Canvas. Собственно, если работать с Юнькой для вас не впервой, то вы явно знаете еще много других способов, как добавить в Hierarchy объект. Так что делайте это любым удобным способом. Создав Canvas, добавляем чайлдами («внутрь» канвы) три Panel для 3-х наших фонов. После добавления наша Hierarchy выглядит так: Переименовываем Canvas и Panel, чтобы у всех были свои пароли и явки. А теперь засучиваем рукава и беремся препарировать — подготавливать каждый компонент в Inspector. Начнем с ParallaxBackground. Изменяем Layer на Ignore Raycast, чтобы наш фон не реагировал на касания пальцами. Unity обязательно спросит, применить ли эти изменения ко всем «детям» — соглашаемся.  Далее переходим к компоненту Canvas. Находим Render Mode, выбираем Screen Space – Camera. В Render Camera добавляем нашу текущую дефолтную камеру (Main Camera(Camera)). Plane Distance ставим пока 110, но этот показатель проще отстроить во время теста. По факту — это расстояние от камеры до нашей канвы. То есть, изменяя его, мы будем получать разную глубину изображения. Остальное не трогаем и переходим к Back. В Rect Transform привязываем позицию к левому краю. Теперь наш фон будет всегда отстраиваться по одному краю, и мы избежим проблем с правильной позицией на разных устройствах. Удаляем компонент Image (Script), вместо него добавляем Raw Image (Script) (напомню, Add Component – UI – Raw Image (Scriot)). В Texture добавляем картинку нашего самого последнего слоя. Те же операции проделываем и для остальных слоев. Можно сделать немного проще, наколдовать изменения в первой Panel, дублировать (Ctrl + D), поставить в каждую свою текстуру, переименовать. Тут уже зависит от того, как вам будет удобнее. Запускаем сцену — любуемся. Три картинки прекрасно легли друг на друга. Немного черной магии Теперь весь смак. Мы с вами напишем скрипт, который заставит наши картинки двигаться. Создаем новый скрипт, напомню, пишем на C#, назовем его BackgroundHelper. Он у нас будет один, поэтому нет смысла делать отдельную папку, кидаем его прямо в основную Assets. Открываем созданный скрипт и понеслась тяжкая работа на 5 строчек: using UnityEngine; using UnityEngine.UI; // обязательно добавляем библиотеку пользовательского интерфейса, без нее кино не будет using System.Collections; public class BackgroundHelper : MonoBehaviour {     public float speed = 0; //эта публичная переменная отобразится в инспекторе, там же мы ее можем и менять. Это очень удобно, чтобы настроить скорость разным слоям картинки     float pos = 0; //переменная для позиции картинки     private RawImage image; //создаем объект нашей картинки               void Start () {         image = GetComponent<RawImage>();//в старте получаем ссылку на картинку         }                    void Update () {         //в апдейте прописываем как, с какой скоростью и куда мы будем двигать нашу картинку           pos += speed;             if (pos > 1.0F)                 pos -= 1.0F;             image.uvRect = new Rect(pos, 0, 1, 1);        }     } Сохраняем скрипт и добавляем его, как компонент к каждому слою. Скорости у меня такие: Back 0.0001 Middle 0.00015 Top 0.00024 Наслаждаемся успешной работой Если все было сделано правильно, мы получим умопомрачительный эффект, от которого просто невозможно оторвать глаз. У вас остались вопросы или возникли трудности? Пишите в комментариях.

Введение В этой статье я детально опишу процесс сборки FrontEnd проекта, который стал незаменимым в моей ежедневной работе, очень облегчил рутинную работу и предоставил больше свободного времени для других задач.  Сейчас в интернете существует большое число различных сборщиков и подходов к ней, и каждый выбирает для себя что-то по вкусу. Я только опишу вам один из многих подходов, а вы уже решите сами, подходит он вам или нет. Как уже все догадались, речь пойдет о сборщике под названием Gulp. Скажу сразу, что у вас  должен быть установлен Node.js. У кого не установлен, то вам сюда https://nodejs.org/en/download/ Итак, приступим: Откроем консоль и создадим папку mkdir nebo15 Зайдем в папку, которую только что создали cd nebo15/ запустим команду инициализации проекта: npm init Заполняйте поля теми данными, которые вы знаете, остальные просто пропускайте, нажав Enter. На выходе получим что-то наподобие этого: {    "name": "nebo15",   "version": "1.0.1",   "description": "first gulp project",   "author": "stranger",   "license": "MIT",   "main": "main.js",    "dependencies": {       "gulp": "^3.9.0"    } } В строке dependencies я указал, что нам понадобится gulp и тут же будут появляться все наши плагины. Основные плагины, с которыми я хочу вас познакомить: gulp-minify-css — нужен для минимизации CSS кода, создаст один файл *.min.css gulp-uglify — будет минимизировать наш JS, создаст один файл *.min.js gulp-autoprefixer — авто-добавление добавляет вендорные префиксы (-webkit, -o, -moz) к CSS свойствам, нужно чтобы ваш код поддерживался во всех браузерах. browser-sync — понадобится  для запуска локального сервера. gulp-sass — предназначен для компиляции SCSS и SASS кода. gulp-sourcemaps — предназначен для генерации css sourscemaps, которые понадобятся при отладке кода //= footer.html   эти комментарии будут заменены на код с файла при компиляции gulp-watch — предназначен для отслеживания за изменениями файлов. rimraf —  для очистки папок по завершению сборки (rm -rf для nodejs). После установки всех плагинов у нас будет файл package.json: делается это при помощи команды npm install name_of_package --save-dev  где --save-dev означает то, что пакет будет остановлен в проект, а не глобально. Для глобальной установки используйте тег -g. Bower Сейчас просто не представляю своей жизни без установщика Bower и хочется верить, что вы не исключение. Если же нет, то почитать о Bower можно тут. Давайте поставим его в наш проект. Для установки напишем в консоли: bower init Заполняйте поля те, что знаете, остальное пропускайте. В конце вы получите файл bower.json: {   "name": "nebo15",   "version": "1.0.0",   "authors": [     "Dima"   ],   "license": "stranger",   "ignore": [     "**/.*",     "node_modules",     "bower_components",   ], "dependencies": {     "normalize.css": "*",     "jquery": "2.*" } Установим пакеты с dependencies: bower i Давайте создадим базовую структуру и настроим сборку нашего проекта.   Структура проекта: Сначала нужно 2 папки. Первая (src), в которой мы собственно будем писать код, и вторая (build), в которую сборщик будет собирать файлы.  Текущая структура у нас выглядит так: В src создали типичную структуру для проекта. Сделаем main файлы в папках js/ и style/ и создадим стартовую index.html страничку такого содержания. index.html Структура папки src теперь будет выглядеть так: Тут все просто: fonts —папка с шрифтами img — папка с картинками js — папка со скриптами. Тут в корне - main.js, а рабочие файлы в папке partials style — папка со стилями. Тут в корне - main.scss, а рабочие файлы в папке partials template — тут будем хранить  html код Все html страницы, которые мы верстаем, будут лежать в папке src Gulpfile.js Итак, начнем, сначала подключим все зависимости в этот файл. gulpfile.js Так же создадим js объект, в который пропишем все нужные нам пути, чтобы при необходимости легко в одном месте их редактировать: Веб сервер Чтобы иметь livereload, нам необходимо написать себе веб-сервер. Для этого напишем следующую таску : Сборщик для html Напишем таску для сборки верстки html Стоить вспомнить, что rigger - плагин, позволяющий использовать конструкцию для подключения файлов: //= template/footer.html В папке src/template/  создадим файлы header.html и footaer.html В папку header.html поместим В папку footer.html поместим а файл index.html отредактируем соответственно так: Запускаем сборку следующей командой gulp html:build После того, как она соберется, переходим в папку build и увидим там наш файл index.htm l Сборщик для JS Таска для сборки скриптов будет примерно такая Зададим структуру для main.js: Запустим сборку js: gulp js:build  И в папке build/js  можно увидеть скомпилированный и модифицированный файл. Сборщик для стилей Таска для сборки SCSS: Здесь все легко, но если вы заинтересовались настройками автопрификсера, то об этом можно почитать тут. Запустим нашу таску gulp style:build Теперь давайте определим таску с именем «build», которая будет запускать все: Отлеживаем изменения в файлах Чтобы не запускать каждый раз сборщик вручную, давайте попросим gulp при изменении какого-то файла  перезапускаться.  Понять это просто. Просто при изменениях какого-то файла происходит пересборка проекта. Попробуйте запустить в консоли: gulp watch Измените что-то в проекте и увидите, что произойдет. Очистка Если вы прикрепите большую библиотеку, потом запустите задачу js:build и потом решите, что она вам больше не нужна и удалите ее, то она все равно останется в папке проекта build. Так что было бы удобно периодически удалять ее содержимое. Создадим для этих потребностей простую таску Теперь, запуская команду с консоли gulp clean папка build будет удаляться. Напоследок Мы должны определить стандартную таску, которая запустит всю нашу сборку , используя только одну команду. gulp.task('default', ['build', 'webserver', 'watch']); Запустим в консоли gulp Вот и все. Теперь вы можете настроить проект для себя. Надеюсь, данная статья оказалась познавательной для вас.

Введение Я достаточно давно использую git практически во всех проектах. За это время я успел многому научиться и хочу поделиться опытом с читателями. Как известно, все новое пугает. Так говорит половина моих знакомых, которые не захотели потратить пару часов, чтобы разобраться с git раз и навсегда. Скорее всего, после прочтения этой статьи и они, и вы поймете, что это проще, чем кажется. Я постараюсь показать, как эта VCS (Version Controll System) помогает разрабатывать проект. Эта статья рекомендована к прочтению тем, кто только делает первые шаги в разработке больших проектов. Итак, Git — это «распределенная система контроля версий», где «система контроля версий» означает то, что она запоминает историю изменения своих файлов, а распределенная значит то, что мы можем работать с ней без доступа к интернету. Для того чтобы начать: Git акаунт на https://github.com Консоль или же графический интерфейс. Человек по ту сторону монитора, что сможет это поставить под свою ось, будь то Windows, Mac OS или Linux . Моё окружение - это Mac OS X + Webstorm + Git + Bash . Если у вас Windows, то, скорее всего, будет msysgit (git-bash) + TortoiseGit. Как вы уже поняли, придется работать с консолью, потому вам будет необходимо усвоить несколько команд для установки git на вашу операционную систему. Поговорим немного о том, как же установить git: Установка для Linux Установить Git под Linux как бинарный пакет можно, используя обычный менеджер. Если у вас установлена Fedora, можно воспользовать yum: $ yum install git-core Если же у вас дистрибутив, например, Ubuntu,  то вам нужно: $ apt-get install git Установка для Mac Существует два способа установки Git на Mac OS X. Первый - использовать графический компоновщик Git, который вы можете скачать здесь: http://goo.gl/nB31LK или же, для более продвинутых пользователей, просто вставьте следующую строчку в терминал $ sudo port install gitweb + git-core +doc  + bash_completion Установка в Windows Настроить Git в Windows просто: у проекта msysGit процедура установки  самая легкая. Просто скачайте *.exe инсталлятор на GitHub: http://goo.gl/cmGQSj После установки у вас будет и консольная версия, и стандартная графическая. Остались вопросы по установке? Тогда вам сюда - https://goo.gl/lec2M0 Git — это коллекция инструментов для решения определенных проблем. Давайте рассмотрим компоненты Git пошагово: Коммиты Коммит (патч) — показывает некоторые изменения в файлах, что подверглись изменениям с момента предыдущего коммита. Коммит также содержит заголовки, в которых есть автор, время его создания и прочее. Git-коммит шифрует это в заголовке «parent», указывая, после какого коммита его нужно наложить. Как применить коммит к другому коммиту? Мы можем применить коммит только к полному набору файлов. Но после этого мы получим измененный набор файлов. Поэтому «коммит» также показывает состояние репозитория после добавления нового патча. История Git — это вся цепочка изменений для воссоздания кодовой базы с нуля, коммит за коммитом. История коммиттов может выглядеть так: Commit C: Родитель — B. Добавь “Systematics” в конец файла «readMe.txt». Commit B: Родитель — A. Добавь “Bionic” в конец файла «readMe.txt». Commit A: Создай файл «readMe.txt», содержащий “Cyber”. Commit A здесь первый, это значит, что у него нет родителя. Это значит, что его патч может только добавить новые файлы — в репозитории нет никаких существующих файлов для изменения. Во всем остальном это такой же коммит, как и все остальные. Итак, мы начинаем с пустого файла. Затем мы применяем патч A, который дает текст “Cyber”. Затем мы можем применить патч B, который даст нам “Cyber Bionic”.  Наконец, мы применяем C, который дает “Cyber Bionic Systematics”. Визуализация Git изображает историю коммиттов слева-направо, описанное выше будет выглядеть так: A → B → C. Тэги Тэги —  имена для коммитов, чем-то похожие на ветки. Однако, тэги должны быть постоянными: они, в основном, используются для названий версий релизов. Вы можете переключаться по тэгу, но тэг не может быть вашей «текущей веткой», и тэг никогда не появится автоматически, если вы коммитите впервые. Также тэги (чаще всего) глобальные, с неограниченным пространством имен, как ветки. Как просмотреть историю последних коммитов: git log покажет название последних трех коммитов в ветке. git log --oneline --graph --decorate намного лучше для просмотра (можете сами убедиться). Вы также можете установить tig, который делает, в основном, то же самое, но вы сможете использовать Enter на коммите, чтобы увидеть различия. git log --follow показывает нам все изменения, только для конкретного файла (директории). --follow означает - следить за историей файла, включая изменение имени файла. А сейчас время для команд, которые вы будете писать каждый день по многу раз $ git status покажет, в какой ветке вы находитесь и какие файлы подверглись изменениям. git add file_name добавляет только указанный файл (файлы) к патчу. git add -A (all) добавляет к патчу все изменения, которые нужны вам в последующем коммите. git commit -a откроет редактор для ввода текста коммита, затем будет создан коммит со всеми произведенными изменениями. git commit -m “what is to change” запишет коммит и даст ему то описание, которое есть в скобках git branch name создает новую ветку под названием name, основаную на коммите, но не переключается на нее. Для этого тебе понадобиться команда: git checkout -b origin/develop, которая создаст новую ветку, основанную на origin/develop, или на той, в которой вы находитесь, и переключится на нее. git checkout производит переключение в ветку, которую вы укажите. Вы также можете перейти в удаленную ветку, в тэг или в конкретный коммит.   git rm file_name говорит Git, что ты собираешься удалить файл, а также удаляет его физически. Конфликты слияния Если вы делаете слияние или отправку изменений, возможно, ваши изменения будут конфликтовать с чужими. Git выведет сообщение: "Автоматическое слияние не удалось, вы должны сделать это вручную". Если вы посмотрите git status, то обнаружите новую секцию для конфликтующих файлов. И вам нужно это исправить, чтобы завершить слияние. Откройте конфликтующий файл и увидите что-то вроде этого: <<<<<<< то что мы изменили ======== то что сделал ваш предшественник >>>>>>>> origin/develop   Это говорит нам о том, что двое людей отредактировали одни и те же строки в том же самом файле по-разному, а Git не знает, что должно быть результатом. Просто отредактируйте файл, как нужно, и выполните git add -А, чтобы сообщить Git, что вы готовы к отправке. Когда все конфликты будут решены и все файлы добавлены через git add -A, сделайте простой git commit для полного слияния. Примечание: Проверяйте, что вы действительно исправили все конфликты в файлах после слияния. Иногда, конфликт - это когда один программист отредактировал файл, а другой удалил этот файл. Когда такое случается, Git покажет тебе, кто что сделал. Надеюсь, что статья дала вам много новых знаний. И если это так - то вперед, создавать первый репозиторий на github.com и закреплять все, что прочитали.