App studio - нова версія онлайн конструктора додатків від microsoft, savepearlharbor
Пропоную Вашій увазі новий інструмент від Microsoft «Windows App Studio» - конструктор для створення додатків. Сьогодні розповім про те, як звичайному користувачеві стало доступне створення додатків для Windows і Windows Phone. І трохи про те чим цей інструмент може бути корисний розробнику.
App Studio інструмент, призначений для створення тематичних програм. Цей тип додатків надає користувачеві тематичну інформацію, різні каталоги і цілий набір інших стандартних функцій.
App Studio взаємодіє з користувачем через веб-інтерфейс, працює на будь-якому браузері і доступна за наступним посиланням. Всі дані App Studio зберігаються в хмарі.
Для доступу до App Studio необхідно мати обліковий запис Microsoft (колишнє Live ID) і можливість виходу в мережу.
Інтерфейс простий і інтуїтивно зрозумілий:
На головній сторінці присутній панель управління для доступу до основних сторінок ресурсу:
- My projects - сторінка, на якій будуть зберігається все коли-небудь створені користувачем додатки в App Studio c зазначенням їх статусу: Edition / Generated
Так само на головній сторінці демонструються створені в App Studio додатки, що функціонують і доступні в Windows Store:
Для створення програми App studio пропонує наступні сценарії:
- Скористатися шаблонами;
- Створити додаток з нуля.
Шаблони App Studio є тематично-орієнтовані додатки з готовою структурою, демо наповненням і можливістю редагування:
На відміну від інших шаблонів, Empty App не пропонує ніякого сценарію для створення додатків і повністю звільнений від контенту.
Всі шаблони App Studio надають можливість створення універсальних програм, доступних на Windows і Windows Phone 8.1 пристроях. Крім шаблону Web App template:
Призначення цього шаблону - переробити мобільну версію веб-сайту в додаток Web App, використовуючи URL сайту. Ця можливість доступна тільки для Windows Phone додатків.
Варто відзначити різноманітність шаблонів App Studio і наявність тематичних складових у кожного з них:
створення програми
Цикл створення додатка в App Studio складається з 4 етапів:
- Пошук ідеї;
- Наповнення контентом;
- Оформлення стилю;
- Використання готового додатка;
Для демонстрації можливостей інструменту створимо Каталог Вин на основі Empty App. Назвемо його Wine Expert, почнемо створювати структуру і додамо контент.
Стартова сторінка нової програми Empty App виглядає наступним чином:
Робоча область розділена на чотири частини:
В області Content визначимо з яких IP-адрес буде складатися Wine Expert:
Для створення структури використовуємо набір блоків, запропонований App Studio:
- Сторінку «Про вини», якщо вона містить текст як в даному прикладі, найзручніше оформити за допомогою блоку "HTML":
Дані в додатку можуть бути двох типів:
Статичні дані - це дані які знаходяться в додатку. Додатком з таким типом даних не потрібно інтернет-з'єднання. Однак для поновлення статичних даних, доведеться оновити повністю все додаток.
Динамічні дані - дані, розташовані в хмарі. Для доступу до них необхідно інтернет-з'єднання, однак при оновленні цих даних в хмарі, в додатку вони оновляться автоматично.
Процес заповнення будь-якого з цих типів даних в App Studio однаковий, і для демонстрації підійде Dynamic resources. Тип ресурсів можна змінити, поки дані не заповнені.
Оформимо структуру бази даних нашого застосування. При натисканні на кнопку «Add default columns» App Studio автоматично додає стандартно необхідні і використовуються поля зберігання даних: Title, Subtitle, ImageUrl, Description.
Забираю поле SubTitle і додаю своє, за допомогою кнопки «Create new»:
У «ColumnType» вибираємо тип поля - text. Булевий Multiline, що дозволяє багаторядкові записи, залишаємо в статусі false.
На цьому процес створення структури бази даних програми завершується. І приступаємо до її наповнення.
Кнопка «Confirm» повертає нас в робочу область «Сontent», де спостерігаємо всі сторінки, з яких поки складається додаток:
На блоці «Каталог вин» натискаємо кнопку «Edit» і переходимо в режим редагування цього блоку:
Таке повідомлення з'являється в браузері, коли на сторінці залишилися не збережені зміни. В цьому випадку натискаємо «Stay on this page», а потім кнопку «Save» в правому верхньому кутку.
Повторюємо дії і потрапляємо в режим редагування колекції:
На вкладці «Pages» реалізується можливість редагування відображення даних як на сторінці, так і при виборі елемента каталогу, а так само настройка джерел даних відповідних полях бази даних програми - «Bindings». Кількість рядків в «Bindings» залежить від обраного режиму відображення:
Налаштуємо ці джерела:
І перемкнемося на режим редагування відображення обраного елемента:
Тут знову потрібно налаштувати джерела, але звернемо увагу на нові настройки - «Page extras»:
- TextToSpeech дозволить перетворити текст в мова, для того щоб прослухати текст;
- ShareText дозволить додатком поділитися обраним елементом;
- PinToStart дозволить закріпити вподобану статтю на стартовому екрані пристрою, щоб забезпечити до неї швидкий доступ.
Для цих функцій так само необхідно вибрати джерело контенту:
Не забуваємо про кнопку «Save» і подивимося на вкладку Data:
Вже відома структура бази даних, готова для редагування. Нас цікавить введення даних в додаток, натискаємо «Edit Data» і потрапляємо на наступну сторінку:
Дані можна додавати в ручну, заповнюючи кожну строчку після її створення, за допомогою «Create new». Але ми скористаємося вбудованою в App Studio можливістю завантаження даних за допомогою файлу з розширенням .csv «Import data»:
Попереджаємо завантажувач, що наш файл створений без заголовка і завантажувати дані можна з першого рядка.
Залишилося тільки додати картинки:
Картинки додали, натискаємо кнопку зберегти, повертаємося в режим редагування колекції і дивимося на результат:
Для цього блоку є два режими редагування:
- Стандартне редагування відображення даних на сторінці: кнопка «Edit»;
- Редагування пунктів меню.
Редагування пунктів меню представляє з себе область, в яку необхідно додати потрібні елементи:
Блок типу «Menu» може містити в собі всі базові блоки, колекції, а так же елемент нового типу «MenuAction»:
Дія, за яке відповідає цей пункт після його редагування - написання листа через доступні на пристрої додатки:
Оформлення і стиль додатки
App studio у вкладці Themes пропонує налаштувати тему програми:
- Стандартні: темний, світлий фон;
- Фон, який вважає за краще користувач, включаючи можливість вибрати зображення як «Background Image».
Використовуючи Custom Style, можна так само налаштувати колір тексту і стандартний Application bar програми:
Tiles вкладка оформляє вигляд програми на стартовому екрані, фонове зображення і фонову заставку:
Налаштуємо плитку додатки на стартовому екрані:
- Flip template -Живий плитка;
- Cycle template - перегортання зазначеної колекції з програми;
- Iconic template - одне зображення всіх трьох розмірів плитки.
Для каталогу вина виберемо Flip template і завантажимо необхідні зображення відповідають зазначеним розмірам:
У лівому верхньому кутку теж присутня область для завантаження картинки, яка буде відображатися біля назви додатка, заповнимо і її:
На вкладці Splash # 038; Lock зробимо ті ж дії з зображеннями:
Зберігаємо зміни і переходимо до наступного кроку.
- App Identity: відкриваємо Store Dashboard, вибираємо або реєструємо там додаток. Вибираємо Edit -> Select Services -> Live Services сайт. Далі бачимо потрібну інформацію «Application Identity» в форматі "1234user.YourAppName".
- App Display Name: це зарезервоване ім'я додатки в магазині.
- Publisher ID: ця інформація назодітся в «Account profile» розробника в Центрі розробника, в наступному форматі "CN = AAAAA-1111-2222-BBBBBBBBB".
- Publisher Name: ім'я, з яким розробник зареєстрований в Центрі розробника. Так само є в «Account profile».
Privacy statement url
Заключний етап роботи з додатком
Додаток готове - натискаємо «Finish»:
Функція «Generate» пропонує вибрати для якої платформи необхідно згенерувати додаток, виберемо Windows Phone 8.1 і Windows 8.1, що дозволить створити новий тип програми - універсальне:
Отже, тепер ми можемо завантажити всі матеріали, надані App Studio для роботи зі створеним додатком.
Щоб встановити програму на пристрій
Додаток, створений за допомогою App Studio може бути встановлено на пристрій безпосередньо, поза Windows Store, завдяки згенеровані пакету «Installable packages».
Що для цього потрібно:
Доступ до даних додатка в хмарі
Можливості для розробників
App Studio може бути корисна для професійного розробника тим, що надає вихідний код програми.
висновок
Для того щоб створити додаток в App Studio не потрібно знань в області програмування, крім того створення програми та отримання його вихідного коду абсолютно безкоштовно.
Розробникам так само буде цікаво скористатися новим інструментом, наприклад для скорочення часу на розробку базової структури програми.