Рационал Лаб
Расчет проекта
Что будем делать? Каждая мелочь и мысль может помочь нам составить необходимое представление о проекте.
Прикрепите файл(-ы)

Разработка мобильного приложения iOS для новичков

С чего начать?

Вероятно, вы ранее слышали о программе «Hello World!», если читали книги по программированию ранее. «Привет мир!»— программа для начинающего программиста. Это не сложная программа выводит сообщение «Привет мир!» на экран. Давайте создадим приложение «Привет мир!» с использованием Xcode!
Наш телефон +7 (926) 609-20-98 или оставьте заявку на расчет стоимости
Расчет проекта
Что будем делать? Каждая мелочь и мысль может помочь нам составить необходимое представление о проекте.
Прикрепите файл(-ы)
«Hello World» поможет нам
Получить представление о синтаксисе и структуре Swift, нового языка программирования iOS.
Овладеть базовыми знаниями об Xcode. Узнать, как создать проект Xcode и создать интерфейс приложения в Interface Builder.
Узнать, как скомпилировать программу, собрать сборку приложения, протестировать приложение с помощью встроенного симулятора.

Установка среды разработки Xcode

Для работы с этой статьей вам потребуется установить Xcode на MacBook. Для установки воспользуйтесь этой ссылкой. Программа предназначена для ПК под управлением операционной системой macOS.
Установка Xcode не требует специальных навыков и презентаций на этот счет, нужно только нажать на кнопку "скачать" в App Store на своем Mac и подождать загрузки и установки. Поле установки можно переходить на следующий шаг. Создание первого мобильного приложения.

Кстати, чтобы иметь возможность публиковать приложения в App Store вам нужно будет зарегистрировать аккаунт разработчика, вы можете начать регистрацию по этой ссылке. Стоимость аккаунта 99 USD в год.

Ваше первое мобильное приложение

Ваше первое приложение, оно очень простое и только показывает кнопку «Hello World». Если пользователь нажимает кнопку, приложение покажет приветственное сообщение. Это и все. Очень просто, но это поможет вам начать путешествие по iOS.
экран первого приложения на симуляторе
экран первого приложения на симуляторе

Создание первого проекта Xcode

Откройте Xcode. Сразу после запуска Xcode отобразит диалоговое окно приветствия. Здесь выберите «Create a new Xcode project», чтобы начать новый проект.
создать новый проект мобильного приложения iOS в Xcode
создать новый проект мобильного приложения iOS в Xcode
Xcode дает на выбор различные шаблоны проектов. Каждый шаблон служит различным целям и помогает вам легче начать разработку приложений определенного типа. Например, если вы хотите создать пакет стикеров для "Messages", вы будете использовать шаблон приложения Sticker Pack. Так или иначе, но в большинстве случаев шаблон приложения Single View достаточен для создания большинства приложений для iOS. Далее, выберите «iOS»> «Single View Application» и нажмите «Next».
выбор шаблона проекта в Xcode
выбор шаблона проекта в Xcode
На следующем шаге , нежно заполнить все необходимые параметры вашего проекта.
задаем настройки проекта мобильного приложения iOS в Xcode
задаем настройки проекта мобильного приложения iOS в Xcode
Заполните поля в таком соответствии:
Product Name: HelloWorld
Название вашего приложения.
Team:
Оставьте как есть. Вы еще не настраивали команду. Для первого приложения пропустите этот шаг.
Organization Name: Rational Lab
Название вашей организации.
Organization Identifier: com.rational-lab
Уникальный идентификатор приложения, который используется во время отправки приложения. Xcode автоматически генерирует это для вас.
Language: Swift
Xcode поддерживает Objective-C и Swift для создания приложений. Мы будем использовать Swift для разработки проекта.
Use Core Data: [не отмечено]
Для простого проекта этого не требуется.
Include Unit Tests: [не отмечено]
Юнит-тесты для этого простого проекта не требуются.
Include UI Tests: [не отмечено]
Тесты пользовательского интерфейса для этого простого проекта не требуются.
Нажмите «Next», чтобы продолжить. Xcode спросит вас, где сохранить проект «Hello World». Выберите любую папку (например, Desktop) на вашем Mac. Вы можете заметить, что есть опция для контроля версий. Просто снимите выбор. Нам не нужно использовать опцию в этой книге. Нажмите «Create», чтобы продолжить.
создание проект
создание проект
После подтверждения Xcode создает проект «Hello World». Экран будет выглядеть как скриншот, показанный на рисунке.
Экран проекта в Xcode
Экран проекта в Xcode
Наш телефон +7 (926) 609-20-98 или оставьте заявку на расчет стоимости

Знакомство с Xcode

Прежде чем мы начнем создавать приложение Hello World, нужно потратить пару минут, чтобы быстро взглянуть на среду рабочего пространства Xcode. На левой панели находится навигатор проекта. Вы можете найти все ваши файлы проекта в здесь.

Область редкатора

Центральная часть - область редактора. Здесь вы выполняете все действия по редактированию (например, редактирование настроек проекта, файла исходного кода, интерфейса).
В зависимости от типа файла, Xcode показывает разные интерфейсы редактора. Например, если вы выберете ViewController.swift в навигаторе проекта, Xcode отобразит исходный код в центральной области.
Просмотр контроллера в редакторе Xcode
Просмотр контроллера в редакторе Xcode

Сториборд. Storyboard.

Если вы выберете Main.storyboard, который хранит пользовательский интерфейс, Xcode покажет вам визуальный редактор "Сториборд".
Редактор интерфейса в Xcode
Редактор интерфейса в Xcode

Отобразить/спрятать панели управления в Xcode

Самая правая панель - это область утилит. Эта область отображает свойства файла и дает доступ к быстрой справке. Если Xcode не показывает эту область, вы можете выбрать крайнюю правую кнопку на панели инструментов (в верхнем правом углу), чтобы включить ее.
Отобразить/спрятать панели управления в Xcode
Отобразить/спрятать панели управления в Xcode
Средняя кнопка просмотра по умолчанию выключена. Если вы щелкните по ней, Xcode отобразит область отладки прямо под областью редактора. Область отладки, как следует из ее названия, используется для отображения сообщений отладки.
Наш телефон +7 (926) 609-20-98 или оставьте заявку на расчет стоимости

Запуск приложения на эмуляторе

До сих пор мы не написали кода. Тем не менее, вы можете запустить приложение на встроенном симуляторе. Это даст вам представление о том, как создать и протестировать ваше приложение в Xcode. На панели инструментов вы должны увидеть кнопку Run/Запустить.
Кнопки запуска симулятора в Xcode
Кнопки запуска симулятора в Xcode
Кнопка Run/Запустить в Xcode используется для компиляции приложения и его запуска в выбранном симуляторе. По умолчанию симулятор установлен на iPhone XR. Если вы нажмете кнопку iPhone XR, то увидите список доступных симуляторов, таких как iPhone 8 и iPhone X. Давайте выберем iPhone 8 в качестве симулятора и попробуем.
После выбора вы можете нажать кнопку Run/Запустить, чтобы загрузить приложение в симулятор.
Симулятор xcode
Симулятор Xcode
Видите пустой белый экран?! Это нормально. Мы пока не разработали пользовательский интерфейс и не написали кода. Поэтому симулятор показывает пустой экран. Чтобы закрыть приложение, просто нажмите кнопку «Stop» на панели инструментов.

Симулятор работает почти как настоящий iPhone. Вы можете нажать кнопку «Home», чтобы открыть домашний экран, он поставляется с некоторыми встроенными приложениями. Просто поиграйте с ним, чтобы ознакомиться с Xcode и симулятором.

Краткое руководство по построению интерфейса

Теперь у вас есть общее представление о среде разработки Xcode, давайте перейдем к разработке пользовательского интерфейса. В навигаторе проекта выберите файл Main.storyboard. Xcode затем вызывает визуальный редактор Interface Builder.

Редактор Interface Builder - это способ создания и разработки пользовательского интерфейса мобильного приложения. Вы можете использовать его для разработки отдельных экранов, дизайнер Interface Builder позволяет вам размещать несколько экранов и связывать их вместе, используя различные типы переходов, чтобы создать полный пользовательский интерфейс. Все это можно сделать без написания кода.
объекты в storyboard
объекты в storyboard
В Xcode версии 10 Apple внесла изменения в библиотеку объектов. Если вы использовали Xcode 9 (или более раннюю версию), то библиотека объектов располагалась в нижней правой панели. Теперь библиотека объектов скрыта по умолчанию. Вы должны нажать кнопку библиотеки объектов в верхнем меню, как показано на рисунке выше, чтобы она выглядела как плавающее окно.

Библиотека объектов содержит все доступные объекты, такие как кнопка, метка, картинка, чтобы вы могли создать экраны своего приложения.

Мы используем шаблон приложения Single View, Xcode сгенерировал "сцену" контроллера представления по умолчанию в Storyboard. В вашем Interface Builder вы должны увидеть View Controller в области редактора. В этом View Controller вы разрабатываете экран приложения. Каждый экран приложения обычно представлен контроллером представления (View Controller). Интерфейсный конструктор позволяет вам добавить несколько контроллеров представления в Storyboard и связать их.
Панель конфигурации была впервые представлена в Xcode версии 8, которая позволяет вам предварительно просматривать пользовательский интерфейс приложения на разных устройствах. Кроме того, вы можете использовать кнопки + и - для увеличения / уменьшения.
меню выбора различного представления на разных iPhone
меню выбора различного представления на разных iPhone
Наш телефон +7 (926) 609-20-98 или оставьте заявку на расчет стоимости

Разработка пользовательского интерфейса

Теперь мы собираемся разработать интерфейс. Сначала мы добавим в вид кнопку "Hello World". Нажмите кнопку "Object library", чтобы отобразить библиотеку. Затем вы можете выбрать любой из объектов пользовательского интерфейса и перетащить их на будущий экран.

Пришло время добавить кнопку на экран. Все, что вам нужно сделать, это перетащить объект Button из библиотеки объектов на экран.
перетаскиваем кнопку на экран Xcode
перетаскиваем кнопку на экран Xcode
Переименуйте кнопку как показано ниже, нажав на нее.
Замечательно! Сейчас вы готовы протестировать свое приложение. Выберите симулятор iPhone 8 и нажмите кнопку Run, чтобы выполнить проект, вы должны увидеть кнопку Hello World в симуляторе, как показано на рисунке.
симулятор iPhone 8 в xcode
симулятор iPhone 8 в xcode
Однако при нажатии на кнопку ничего не происходит. Нам нужно добавить несколько строк кода для отображения нашего сообщения «Hello, World».

Программирование кнопки "Hello World"

Теперь, когда вы завершили пользовательский интерфейс приложения, пришло время написать некоторый код. В навигаторе проекта вы должны найти файл ViewController.swift. Поскольку мы изначально выбрали шаблон проекта Single View Application, Xcode уже сгенерировал класс ViewController в файле ViewController.swift. Этот файл связан с контроллером представления в Storyboard. Чтобы отобразить сообщение при нажатии кнопки, мы добавим некоторый код в этот файл.

Выберите файл ViewController.swift в области редактора и отобразится исходный код. Введите следующие строки кода в классе ViewController:
@IBAction func showMessage(sender: UIButton) {
    let alertController = UIAlertController(title: "Welcome to My First App", message: "Hello World", preferredStyle: UIAlertController.Style.alert)
    alertController.addAction(UIAlertAction(title: "OK", style: UIAlertAction.Style.default, handler: nil))
    present(alertController, animated: true, completion: nil)
}
После редактирования ваш код должен выглядеть так:
import UIKit
class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
    }
    @IBAction func showMessage(sender: UIButton) {
        let alertController = UIAlertController(title: "Welcome to My First App", message: "Hello World", preferredStyle: UIAlertController.Style.alert)
        alertController.addAction(UIAlertAction(title: "OK", style: UIAlertAction.Style.default, handler: nil))
        present(alertController, animated: true, completion: nil)
    }
}
Вы можете попробовать запустить проект в симуляторе. Поведение приложения остается прежним. Когда вы нажимаете кнопку, она все равно не показывает никакого ответа. Причина в том, что мы не установили связь между кнопкой и кодом.
Наш телефон +7 (926) 609-20-98 или оставьте заявку на расчет стоимости

Соединение кода с интерфейсом приложения

Как мы можем связать кнопку «Hello World» в Storyboard с методом showMessage (sender: UIButton) в классе ViewController?

Вам необходимо установить связь между кнопкой «Hello World» и только что добавленным методом showMessage (sender: UIButton), чтобы приложение реагировало, когда кто-то нажимает кнопку Hello World.
соединение кнопки с контроллером
соединение кнопки с контроллером
Теперь выберите Main.storyboard, чтобы вернуться к Interface Builder. Нажмите и удерживайте клавишу "Control" на клавиатуре, нажмите кнопку «Hello World» и перетащите ее на значок View Controller. Отпустите обе кнопки (мышь + клавиатура), и во всплывающем окне отобразится параметр showMessageWithSender: в разделе «Отправленные события». Выберите его, чтобы установить связь между кнопкой и действием. (как показано на рисунке выше)

Тестирование приложения

Теперь вы готовы протестировать свое первое приложение. Просто нажмите кнопку «Run». Если все правильно, ваше приложение должно запуститься в симуляторе. На этот раз приложение отображает приветственное сообщение, когда вы нажимаете кнопку Hello World.
сообщение на экране iPhone 8
привет мир - сообщение