Как самостоятельно сделать приложение для iOS (iPhone/iPad)

Приветствую вас, уважаемый читатель.2

В сегодняшней статье я расскажу вам — как легко сделать свое собственное приложение для операционной системы iOS. На базе операционной системы iOS работают такие популярные устройства как iPhone и iPad.

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

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

Также вы сможет сразу же протестировать ваше новое приложение на своем iPhone или iPad, что тоже не может не радовать.

Инструмент создания

Инструмент, которым мы будем пользоваться называется — AppArchitect. Данный сервис позволит вам с легкостью (без писания кода) создать приложение для iOS.

Вам просто нужно, как в конструкторе, собрать свое приложение, протестировать его и отправить на одобрение в AppStore (без одобрения приложение не может появиться в AppStore). После того, как сотрудники AppStore одобрят приложение оно станет доступным в магазине.

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

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

Программа AppArchitect

Регистрация в AppArchitect

Перед тем как начать использовать AppArchitect вам необходимо в нем зарегистрироваться, к счастью, делается это очень легко:

1. Перейдите на сайт AppArchitect и нажмите большую оранжевую кнопку к надписью «Get Started».

Загрузка программы AppArchitect

2. В открывшемся окне заполните поля «E-Mail» и «Password», нажмите кнопку «Create». После этого ваш аккаунт будет создан, можете выполнить вход в него.

Создание аккаунта AppArchitect
Ну все, переходим к самому интересному — к созданию приложения для вашего Apple устройства.

Процесс создания

В вашем аккаунте нажмите кнопку «Create New App» для того, чтобы создать новое приложение.

Создание нового приложения в AppArchitect

Далее укажите название нового приложения и выберите устройство, для которого это приложение создается, нажмите кнопку «Next».

Создание нового приложения в AppArchitect

Что мы будем создавать

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

На каждой из этих страниц я покажу пример работы некоторых функций приложений:

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

Наш фильм — на этой вкладке я покажу вам как встраивать видео с YouTube в ваше приложение;

Мы на карте — на этой вкладке я покажу вам как работать с Google картами в приложении;

Наш сайт — в этой вкладке я расскажу вам как отображать любой сайт в вашем приложении;

Контакты — в этой вкладке я расскажу вам как работать с текстом в приложении;

Описание интерфейса

Панель инструментов в AppArchitect

1 — Панель инструментов — с помощью данной панели вы сможете копировать, вставлять, удалять различные элементы.

2 — Панель публикации проекта — с помощью данной панели в будущем мы будем публиковать проект.

3 — Панель создания проекта — делиться на три вкладки:

Screens — собственно, это и есть наши вкладки, про которые я ранее говорил;

Library — библиотека элементов из которых мы будем собирать наше приложение;

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

Создание вкладок

Для создания вкладок переходим в панели управления проектом (3) на вкладку Screens и с помощью кнопки «New Screen» создаем необходимое количество вкладок, в моем случае — пять.

Новая вкладка в AppArchitect

Теперь давайте переименуем эти вкладки, для этого кликаем по первой вкладке, из раскрывшегося списка выбираем пункт «Rename», пишем название вкладки, в моем случае — главная. Нажимаем кнопку «Apply».

Название нового приложения в AppArchitect

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

Выбор значка нового приложения в AppArchitect

Проделайте эту операцию со всеми оставшимися вкладками.

Выбор значка нового приложения в AppArchitect

Вкладки созданы, теперь переходим к их наполнению.

Добавление фона к вкладкам

Чтобы вкладки выглядели красивыми, нам необходимо добавить к ним привлекательный фон.

Для этого, в панели создания проекта, перейдите на вкладку «Library» и в поле Background выберите необходимый фон, перенесите его на изображение гаджета.

Добавление фона к приложению в AppArchitect

Растяните его по всему рабочему полю гаджета.

Добавление фона к приложению в AppArchitect

Скопируйте этот фон (на панели инструментов, есть кнопка «Копировать») и вставьте этот фон во все вкладки будущего приложения.

Добавление фона к приложению в AppArchitect

Добавление заголовка, кнопок и социальных кнопок

Перейдите на вкладку «Главная».

Добавление заголовка к приложению в AppArchitect

Далее во вкладке «Library» выберите элемент «Title» и перенесите его на рабочую область гаджета.

Добавление заголовка к приложению в AppArchitect

В поле «Properties» в строке «Text» напишите необходимый текст, например заголовок вашего приложения.

Добавление заголовка к приложению в AppArchitect

Разместите текст на экране гаджета.

Добавление заголовка к приложению в AppArchitect

Теперь давайте добавим кнопки, при нажатии на которые пользователь сможет переходить на разные вкладки.

Во вкладке «Library» выберите элемент «Button» и перенесите его на экран устройства.

Добавление кнопки к приложению в AppArchitect

Разместите кнопку на экране так как вам удобно, мне удобно по центру.

Добавление кнопки к приложению в AppArchitect

Скопируйте кнопку и вставьте ее три раза, чтобы в результате получилось четыре кнопки.

Добавление кнопки к приложению в AppArchitect

Выделите верхнюю кнопку и во вкладке «Properties» напишете текст кнопки (у меня он соответствует названию второй страницы).

Далее в раскрывающемся списке выберите пункт «Go to Screen» (перейти на вкладку), в поле «Target» выберите вторую страницу, этим действием мы запрограммировали кнопку так, что при нажатии на нее, человек попадет на вторую вкладку приложения.

Добавление кнопки к приложению в AppArchitect

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

Теперь давайте добавим кнопки социальных сетей. Для этого во вкладке «Library» найдите кнопки с названиями «Tweet» и «Share» и перенесите их на экран гаджета, также разместите их там, эти кнопки редактируются так же как и обычные.

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

Добавление кнопки к приложению в AppArchitect

Переходим к наполнению второй страницы.

Добавление роликов YouTube к приложению

Переходим на вкладку «Наш фильм».

Добавление роликов YouTube к приложению в AppArchitect

Далее во вкладке «Library» выбираем элемент «Youtube» и переносим его на экран гаджета.

Добавление роликов YouTube к приложению в AppArchitect

Далее в поле URL вставляем ссылку на необходимый YouTube ролик.

Добавление роликов YouTube к приложению в AppArchitect

Растягиваем ролик на весь экран устройства.

Добавление роликов YouTube к приложению в AppArchitect

Работа с Google картами в приложении

Переходим на вкладку «Мы на карте».

Работа с Google картами в приложении в AppArchitect

В поле «Library» выбираем элемент «Карты» и переносим его на экран устройства.

Работа с Google картами в приложении в AppArchitect

Далее растягиваем на весь экран.

Работа с Google картами в приложении в AppArchitect

На вкладке «Properties» нажимаем на кнопку «Add location».

В открывшемся окне набираем необходимый адрес, нажимаем кнопку «Search», после того как необходимое место будет найдено нажимаем кнопку «Add». Вы можете добавить несколько локаций.

Работа с Google картами в приложении в AppArchitect

Работа с сайтами в приложении

Переходим на вкладку «Наш сайт».

Работа с сайтами в приложении в AppArchitect

Во вкладке «Library» выбираем элемент «WWW» и переносим его на экран устройства.

Работа с сайтами в приложении в AppArchitect

В поле «Page url» вводим адрес необходимого сайта или адрес страницы.

Работа с сайтами в приложении в AppArchitect

Работа с текстом

Переходим во вкладку «Контакты».

Работа с текстом в AppArchitect

Выбираем элемент текст и переносим его на экран устройства.

Работа с текстом в AppArchitect

Делаем необходимые настройки текста.

Работа с текстом в AppArchitect

Выравниваем текст на экране гаджета.

Работа с текстом в AppArchitect

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

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

Итак, переходим к тестированию созданного приложения.

Для этого вам понадобиться скачать на ваш iPhone/iPad специальное приложение, которое будет подключаться к вашему аккаунту Apparchitect и запускать созданное вами приложение на вашем устройстве.

Зайдите в AppStore и в строке поиска введите «Apparchitect for iPhone» если вы создавали приложение для iPhone и «Apparchitect for iPad» если создавали приложение для iPad.

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

После того, как вы скачаете необходимое приложение, запустите его.

Далее введите ваш логин и пароль в системе Apparchitect и выполните вход в систему.

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

После входа в систему выберите ваше приложение из предложенного списка. Можете начать его тестирование.

Публикация приложения

Итак, ваше приложение готово, теперь его нужно отправить на проверку в AppStore (если ваше приложение не добавить в AppStore) и попросту нельзя будет пользоваться.

Для того, чтобы отправить приложение в AppStore зайдите в редактор приложений в Apparchitect и нажмите на кнопку «Отправить в AppStore».

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

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


Комментарии 12

Добавить комментарий

Ваш e-mail не будет опубликован.