Первое iOS приложение. Простое приложение на основе компонента WebView. 4 урок

    Популярное

    Share

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

    Для удобства мы используем заготовку приложения, в которой уже написан бызовый код и есть меню: 

    WebToApp — она платная, но стоит недорого, на основе этого приложения вы сможете сделать сколько угодно своих приложений.

    Открываем папку с приложением и запускаем файл WebToApp.xcodeproj

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

    Сейчас мы шаг за шагом сделаем ваше первое приложение!

    Первое, что нужно сделать — это изменить Product name и Bundle Identifier на свои собственные. 

    Переходим во вкладку Build Settings и в поисковой строке набираем bundle, тем самым находим нужную нам настройку Product Bundle Identifier.

    По шаблону прописываем свой идентификатор, например: 

    ru.домен_вашего_сайта.название_приложения

    com.название_вашей_компании.название_приложения

    Далее набираем в поисковой строке Product name и в найденном поле вписываем название вашего приложения.

    Теперь давайте перейдём к конфигурированию приложения и наполнению его контентом.

    Сделаем иконки для нижнего таббара и назначим куда будет переходить пользователь при нажатии на кнопку. В title пишем название, а в arguments адрес web-страницы, отображаемой на экране.

    В image пишем названия файлов иконок, перед этим подготовив их в следующем формате:

    Размеры иконок: airplane — 24x24pxairplane@2x — 48x48pxairplane@3x — 72x72px и соответственно такие же размеры для других иконок. Иконки белого цвета на прозрачном фоне.

    Далее выделяем все подготовленные иконки и переиаскиваем их во вкладку Resources приямо в  xCode.

    Получаем следующее:

    Теперь давайте добавим пункты в панели бокового меню:

    Так вы можете добавить столько пунктов меню, сколько вам нужно.

    На следующем шаге поменяем логотип в боковом меню и ланчскрине. Для этого перетащим файлы logo.png (для ланчскрина) и logo_white.png (для меню) в папку Resources.

    Далее делаем иконки для приложения, для итого заходим на генератор иконок http://makeappicon.com и выбираем заранее подготовленный файл с иконкой размером не менее 1024x1024px. Генератор сделает иконки всех необходимых размеров. Вводим свой E-mail и нажимаем скачать. Архив с иконками придёт на почту.

    Из полученного архива перетаскиваем папку c иконками AppIcon.appiconset в папку WebToApp/Images.xcassets нашего приложения, соглашаясь заменить все элементы. 

    Что ещё можно сделать: 

    — Переводим элементы меню и тексты в файле Localizable.strings 

    — Изменить цвета в приложении в файле AppDelegate.h

    Используя при этом сервис https://briangrinstead.com/blo… 

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

    Осталось совсем немного, теперь необходимо подписать приложение сертификатом, выданным Apple. 

    Создание сертификата: 

    1) Переходим в xCode > Preferences…

    2) Слева выбираем Apple ID. Если его нет в списке, нажимаем внизу «+» -> Add Apple ID.

    3) Справа выбираем группу, от имени которой вы хотите выложить приложение, и нажимаем «Manage Certificates».

    4) Внизу слева нажимаем «+» и выбираем iOS Distribution.

    Добавление нового приложения в центре разработчика: 

    1) Заходим в Apple Developer центр по адресу https://developer.apple.com/ac…

    2) Переходим во вкладку «Certificates, ID & Profiles»

    3) В разделе Identifiers переходим по ссылке APP IDs

    4) Вписываем имя приложения и Bundle ID который мы уже придумали и вписали в приложении. Они должны совпадать, поэтому будьте внимательны при вводе.

    5) Нажимаем Continue > Register > Done. 

    Создание Provisioning profile: 

    1) В центре разработчика переходим в Provision Profiles https://developer.apple.com/ac…

    2) Нажимаем «+» и выбираем в Distribution пункт App Store.

    3) Выбираем добавленый ранее App ID:

    4) Выбираем созданный ранее iOS Distribution сертификат:

    5) Нажимаем Continue и на следующей странице вписываем имя профайла:

    6) Нажимаем Continue, скачиваем созданный профайл и открываем его, он загрузится в xCode. 

    7) В инспекторе файлов слева выбираем наш проект > Targets, переходим в Build settings, находим раздел Code Signing Style в поле Release выбираем Manual. В поле Provisioning Profile > Release > Any SDK выбираем тот, который мы скачали.

    Осталось только загрузить приложение в App Store Connect, перед этим создаём его там (об этом в следующем уроке).

    В окошке выбора симуляторы выбираем Generic iOS Device, затем в верхнем меню нажимаем Product > Archive и дожидаемся загрузки окна органайзера с созданным приложением.

    Нажимаем Upload to App Store… > Next > Upload

    Дожидаемся загрузки.

    Теперь нужно подождать пока приложение обработается и появится в App Store Connect. Об этом вы получите уведомление по электронной почте.