Як створити додаток для iOS (iPhone / iPad): AppArchitect

Вітаю вас, шановні читачі.

У сьогоднішній статті я розповім вам – як легко зробити своє власне додаток для операційної системи iOS. На базі операційної системи iOS працюють такі популярні пристрої як iPhone і iPad.

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

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

Також ви зможе відразу ж протестувати ваше новий додаток на своєму iPhone або iPad, що теж не може не радувати.

інструмент створення

Інструмент, яким ми будемо користуватися називається – AppArchitect. Даний сервіс дозволить вам з легкістю (без писання коду) створити додаток для iOS.

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

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

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

Реєстрація в AppArchitect

Перед тим як почати використовувати AppArchitect вам необхідно в ньому зареєструватися, на щастя, робиться це дуже легко:

1. Перейдіть на сайт і натисніть велику помаранчеву кнопку до написом «Get Started».

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


Ну все, переходимо до найцікавішого – до створення програми для вашого Apple пристрої.

процес створення

У ваш обліковий запис натисніть кнопку «Create New App» для того, щоб створити новий додаток.

Далі вкажіть назву нової програми і виберіть пристрій, для якого цей додаток створюється, натисніть кнопку «Next».

Що ми будемо створювати

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

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

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

Наш фільм – на цій вкладці я покажу вам як вбудовувати відео з YouTube в ваш додаток;

Ми на мапі – на цій вкладці я покажу вам як працювати з Google картами в додатку;

Наш сайт – в цій вкладці я розповім вам як відображати будь-який сайт в вашому додатку;

Контакти – в цій вкладці я розповім вам як працювати з текстом в додатку;

опис інтерфейсу

1 – Панель інструментів – за допомогою даної панелі ви зможете копіювати, вставляти, видаляти різні елементи.

2 – Панель публікації проекту – за допомогою даної панелі в майбутньому ми будемо публікувати проект.

3 – Панель створення проекту – ділитися на три вкладки:

Screens – власне, це і є наші вкладки, про які я раніше говорив;

Library – бібліотека елементів з яких ми будемо збирати наш додаток;

Properties – панель функцій елементів програми, за допомогою даної панелі ми будемо задавати різні функції нашим елементів програми.

створення вкладок

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

Тепер давайте перейменуємо ці вкладки, для цього натискаємо по першій вкладці, з розкрився списку вибираємо пункт «Rename», пишемо назву вкладки, в моєму випадку – головна. Натискаємо кнопку «Apply».

Тепер поміняємо значок вкладки, для цього натисніть на зірочку поруч зі вкладкою і із списку виберіть необхідний значок.

Проробіть цю операцію з усіма залишилися вкладками.

Виберіть створені, тепер переходимо до їх наповнення.

Додавання фону до вкладок

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

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

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

Розмістіть цей фон (на панелі інструментів, є кнопка «Копіювати») і вставте цей фон в усі вкладки майбутнього програми.

Додавання заголовка, кнопок і соціальних кнопок

Перейдіть на вкладку «Головна».

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

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

Додайте текст на екрані гаджета.

Тепер давайте додамо кнопки, при натисканні на які користувач зможе переходити на різні вкладки.

У вкладці «Library» виберіть елемент «Button» і перенесіть його на екран пристрою.

Додайте кнопку на екрані так як вам зручно, мені зручно по центру.

Скопіюйте кнопку і вставте її три рази, щоб в результаті вийшло чотири кнопки.

Виділіть верхню кнопку і у вкладці «Properties» напишете текст кнопки (у мене він відповідає назві другої сторінки).

Далі в списку виберіть пункт «Go to Screen» (перейти на вкладку), в поле «Target» виберіть другу сторінку, цим дією ми запрограмували кнопку так, що при натисканні на неї, людина потрапить на другу вкладку додатки.

Виконайте ту ж саму операцію з усіма залишилися кнопками.

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

В результаті вищеописаних операцій головна сторінка додатка виглядає так.

Переходимо до наповнення другої сторінки.

Додавання роликів YouTube до додатка

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

Далі у вкладці «Library» вибираємо елемент «Youtube» і переносимо його на екран гаджета.

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

Розтягуємо ролик на весь екран пристрою.

Робота з Google картами в додатку

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

В поле «Library» вибираємо елемент «Карти» і переносимо його на екран пристрою.

Далі розтягуємо на весь екран.

На вкладці «Properties» натискаємо на кнопку «Add location».

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

Робота з сайтами в додатку

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

У вкладці «Library» вибираємо елемент «WWW» і переносимо його на екран пристрою.

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

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

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

Вибираємо елемент текст і переносимо його на екран пристрою.

Робимо необхідні настройки тексту.

Вирівнюємо текст на екрані гаджета.

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

тестування додатка

Отже, переходимо до тестування створеного додатки.

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

Зайдіть в AppStore і в рядку пошуку введіть «Apparchitect for iPhone» якщо ви створювали додаток для iPhone і «Apparchitect for iPad» якщо створювали додаток для iPad.

Після того, як ви скачаєте потрібну програму, запустіть його.

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

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

публікація додатка

Отже, ваше додаток готове, тепер його потрібно відправити на перевірку в AppStore (якщо ваше додаток не додати в AppStore) і просто не можна буде користуватися.

Для того, щоб відправити додаток в AppStore зайдіть в редактор додатків в Apparchitect і натисніть на кнопку «Відправити в AppStore».

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

Ссылка на основную публикацию