App Studio - нова версія онлайн конструктора додатків від Microsoft

    
 
Привіт Всім!
 
Пропоную Вашій увазі новий інструмент від 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
     
     
  •  
  • How to — сторінка з інструкцією до App Studio, в якій детально розписані елементи, дії та результати c App Studio.
  •  
  • Start new — дублює кнопку на головній сторінці "Start new project" і направляє на сторінку створення нового додатка.
  •  
  • Sample apps — розповість і продемонструє приклади готових демо-додатків.
  •  
  • News — сторінка новин ресурсу, де можна подивитися оновлення, повідомлення від команди підтримки і т.д.
  •  
  • OS preview — направить користувача на сторінку Центру розробників, на якій описано яким чином можна отримувати всі оновлення про операційні системи раніше звичайних користувачів, як отримати аккаунт розробника і оперативно скачувати всі оновлення на свій телефон.
  •  
  • Dev center — далі Центр розробки та ресурс для розробників під Windows і Windows Phone.
  •  
Так само на головній сторінці демонструються створені в 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 виглядає наступним чином:
 
 image
 
Робоча область розділена на чотири частини:
 
     
  • Робота над структурою і змістом програми: Content ;
  •  
  • Далі дві вкладки відповідають за зовнішній вигляд і стиль програми: Themes і Tiles .
  •  
  • Publish info містить попередні налаштування для публікації додатки в Windows Store.
  •  
 
Робота над вмістом
В області Content визначимо з яких сторінок складатиметься Wine Expert:
 
     
  • Про вино;
  •  
  • Каталог вин;
  •  
  • Виробництво вина;
  •  
  • Про творців.
  •  
Для створення структури використовуємо набір блоків, запропонований App Studio:
 
 
 
 
     
  1. Сторінку «Про вино», якщо вона містить текст як в даному прикладі, найзручніше оформити за допомогою блоку "HTML":
     
     image
     
    Редагування тексту доступно як в режимі текстового, так і HTML — редактора, досить натиснути на символ & lt; / & gt; .
     
  2.  
  3. Каталог вин представляє з себе блок типу «Collection»:
     
     image
     
    Дані в додатку можуть бути двох типів:
     
       
    • Статичні;
    •  
    • Динамічні.
    •  
     Статичні дані — це дані які знаходяться в додатку. Додатку з таким типом даних не потрібно інтернет-з'єднання. Однак для поновлення статичних даних, доведеться оновити повністю всі додаток.
     
     Динамічні дані — дані, розташовані в хмарі. Для доступу до них необхідно інтернет-з'єднання, однак при оновленні цих даних в хмарі, в додатку вони оновляться автоматично.
    Процес заповнення будь-якого з цих типів даних в App Studio однаковий, і для демонстрації підійде Dynamic resources. Тип ресурсів можна змінити, поки дані не заповнені.
     
    Оформимо структуру бази даних нашого застосування. При натисканні на кнопку «Add default columns» App Studio автоматично додає стандартно необхідні і використовувані поля зберігання даних: Title, Subtitle, ImageUrl, Description.
     
     image
      
    Прибираю поле SubTitle і додаю своє, за допомогою кнопки «Create new»:
     
     image
      
    У «ColumnType» вибираємо тип поля — text. Булевий Multiline, дозволяючий багатострокові записи, залишаємо у статусі false.
     
    На цьому процес створення структури бази даних програми завершується. І приступаємо до її наповненню.
     
    Кнопка «Confirm» повертає нас в робочу область «Сontent», де спостерігаємо всі сторінки, з яких поки складається додаток:
     
     image
     
    На блоці «Каталог вин» натискаємо кнопку «Edit» і переходимо в режим редагування цього блоку:
     
     image
     
    Таке повідомлення з'являється в браузері, коли на сторінці залишилися не збережені зміни. В цьому випадку натискаємо «Stay on this page», а потім кнопку «Save» у правому верхньому куті.
     
    Повторюємо дії і потрапляємо в режим редагування колекції:
     
     image
      
    На вкладці «Pages» реалізується можливість редагування відображення даних як на сторінці, так і при виборі елемента каталогу, а так же настройка джерел даних відповідних полям бази даних програми — «Bindings». Кількість рядків у «Bindings» залежить від обраного режиму відображення:
     
     image
     
    Налаштуємо ці джерела:
     
     image
     
    І перемкнемося на режим редагування відображення обраного елемента:
     
     image
      
    Тут знову буде потрібно налаштувати джерела, але звернемо увагу на нові налаштування — «Page extras»:
     
       
    • TextToSpeech дозволить перетворити текст в мову, для того щоб прослухати текст;
    •  
    • ShareText дозволить додатком поділитися вибраним елементом;
    •  
    • PinToStart дозволить закріпити вподобану статтю на стартовому екрані пристрою, щоб забезпечити до неї швидкий доступ.
    •  
    Для цих функцій так само необхідно вибрати джерело контенту:
     
     image
      
    Не забуваємо про кнопку «Save» і подивимося на вкладку Data:
     
     image
      
    Уже відома структура бази даних, готова для редагування. Нас цікавить введення даних в додаток, натискаємо «Edit Data» і потрапляємо на наступну сторінку:
     
     image
     
    Дані можна додавати в ручну, заповнюючи кожну строчку після її створення, за допомогою «Create new». Але ми скористаємося вбудованої в App Studio можливістю завантаження даних за допомогою файлу з розширенням .csv «Import data»:
     
     image
      
    Попереджаємо завантажувач, що наш файл створений без заголовка і завантажувати дані можна з першого рядка.
     
    Залишилося тільки додати картинки:
     
     image
      
    Картинки додали, натискаємо кнопку зберегти, повертаємося в режим редагування колекції і дивимося на результат:
     
     
     
    Режим попереднього перегляду програми на платформі Windows доступний при натисканні на «Windows Preview ».
  4.  
  5. Сторінка «Виробництво вина» міститиме відео цього процесу, в цьому випадку вибираємо блок типу YouTube:
     
     image
      
    Вкажемо назва сторінки, далі налаштовуємо параметри які необхідні для виводу відповідних відео на сторінку:
     
       
    • Search / User / Playlist — тип запиту, за яким додаток буде шукати відео;
    •  
    • «wine production » — зміст запиту.
    •  
    Результат — сторінка, яка відображає відео з YouTube за заданим пошуковим запитом:
     
     
     
     
  6.  
  7. «Про творців» — цю сторінку створимо за допомогою блоку типу «Menu»:
     
     image
     
    Для цього блоку доступно два режими редагування:
     
       
    • Стандартне редагування відображення даних на сторінці: кнопка «Edit»;
    •  
    • Редагування пунктів меню.
    •  
    Редагування пунктів меню представляє з себе область, в яку необхідно додати потрібні елементи:
     
     image
      
    Блок типу «Menu» може містити в собі всі базові блоки, колекції, а так же елемент нового типу «MenuAction»:
     
     image
      
    Дія, за яку відповідає цей пункт після його редагування — написання листа через доступні на пристрої програми:
     
     
     
    Так само настройка «MenuAction» включає в себе й інші дії: телефонний дзвінок, перехід на зазначену сторінку і т.д.
     
     image
      
    Додамо на сторінку «Про творців» телефон і наповнення додатки контентом завершено:
     
     
  8.  
  
 
Оформлення і стиль додатки
 
 image
 
App studio у вкладці Themes пропонує налаштувати тему програми:
 
     
  • Стандартні: темний, світлий фон;
  •  
  • Фон, який вважає за краще користувач, включаючи можливість вибрати зображення як «Background Image».
  •  
Використовуючи Custom Style, можна так само налаштувати колір тексту і стандартний Application bar додатки:
 
 
 
Tiles вкладка оформляє вид додатка на стартовому екрані, фонове зображення і фонову заставку:
 
 
 
Налаштуємо плитку додатки на стартовому екрані:
 
     
  • Flip template -живі плитка;
  •  
  • Cycle template — перегортання зазначеної колекції з програми;
  •  
  • Iconic template — одне зображення всіх трьох розмірів плитки.
  •  
Для каталогу вина виберемо Flip template і завантажимо необхідні зображення відповідають зазначеним розмірам:
 
 
  
У лівому верхньому кутку теж присутня область для завантаження картинки, яка буде відображатися близько назви програми, заповнимо і її:
 
 
  
На вкладці Splash & Lock зробимо ті ж дії з зображеннями:
 
 
  
Зберігаємо зміни і переходимо до наступного кроку.
 
 
Налаштування програми для публікації в Windows Store
Розберемо які дані вимагає від нас «Publish info», для підготовки публікації додатки в Windows Store, крім зрозумілих App title, App description і Language:
 
 
 
     
  • Enable ad client — настройка відображення рекламних банерів в додатку;
    Тим, хто активує цю настройку необхідно заповнити дані «Microsoft pubCenter data»:
     
     
      
  •  
  • Store Association
    Всі додатки створені в App Studio можуть бути опубліковані в Windows Store, проте публікація доступна тим користувачам App Studio, які мають акаунт розробника в Центрі розробки .
     
  •  
Одна з умов публікації додатки в Windows Store — щоб назва додатка (App Name) перед його публікацією було зарезервовано в магазині. Резервуємо ім'я додатка в Центрі розробки . Кожному зарезервували (зареєстрованому) імені магазин присвоїть свій «Package Identity». Користувачеві App Studio необхідно знати цю інформацію, ім'я та ID.
 
Для того щоб App Studio згенерувало спеціальний пакет додатки для публікації, необхідно заповнити «Application manifest» — маніфест додатки. Для цього в «Publish Info» передбачена наступна настройка «Associate App with the Store»:
 
 
  
Вся дані знайдемо Центрі розробки :
 
     
  1. App Identity: відкриваємо Store Dashboard, вибираємо або реєструємо там додаток. Вибираємо Edit — & gt; Select Services — & gt; Live Services сайт. Далі бачимо потрібну інформацію «Application Identity» в форматі "1234user.YourAppName".
  2.  
  3. App Display Name: це зарезервоване ім'я додатки в магазині.
  4.  
  5. Publisher ID: ця інформація назодітся в «Account profile» розробника в Центрі розробника, в наступному форматі "CN = AAAAA-1111-2222-BBBBBBBBB".
  6.  
  7. Publisher Name: ім'я, з яким розробник зареєстрований в Центрі розробника. Так само доступно в «Account profile».
  8.  
 Privacy statement url
 
Так як Windows Store працює з персональними даними, в кожному додатку необхідно вказати інформацію про політику конфіденційності. Політика конфіденційності розповість користувачеві додатки яким чином використовуються його дані. Тому в цьому пункті слід вказати посилання на положення про політику конфіденційності. Додаткову інформацію про політику конфіденційності можна знайти тут .
Про те, як опублікувати додаток в Windows Store можна прочитати тут .
 
 
Заключний етап роботи з додатком
Додаток готово — натискаємо "Finish":
 
 
 
Отримуємо можливість попереднього додатки для будь-якого пристрою.
 
Функція «Generate» пропонує вибрати для якої платформи необхідно згенерувати додаток, виберемо Windows Phone 8.1 і Windows 8.1, що дозволить створити новий тип додатка — універсальне :
 
 
  
В поле «Generation type» відзначимо що нам необхідний пакет додатки для установки на пристрій і пакет для публікації. Вихідний код програми генерується за замовчуванням.
 
 
  
Отже, тепер ми можемо завантажити всі матеріали, надані App Studio для роботи з створеним додатком.
 
 
Встановлення програми на пристрій
Додаток, створений за допомогою App Studio може бути встановлено на пристрій безпосередньо, поза Windows Store, завдяки згенеровані пакету «Installable packages».
 
Що для цього потрібно:
 
     
  1. Встановити на пристрій сертифікат:
     
       
    • Завантажити, наданий в App Studio інсталяційний пакет для сертифіката в залежності від пристрою (ПК, планшет, телефон);
    •  
    • Запустити файл з розширенням .cer (при установці вибрати Local machine, Place all certificates in the following store: Trusted Root certification Authorities).
    •  
  2.  
  3. Встановити на пристрій додаток:
     
       
    • Завантажити Installable packages;
    •  
    • Знайти файл Add-AppDevPackage1.ps1, правою кнопкою миші запустити "Run with PowerShell".
    •  
  4.  
 
 
 
 
Доступ до даних додатка в хмарі
Щоб додати, видалити або редагування динамічних даних опублікованого додатки необхідно в Центрі розробки звернутися до відповідного додатком у списку Dashboard. Відкрити колекцію і провести всі необхідні зміни. Додаток оновиться автоматично.
 
 
Можливості для розробників
App Studio може бути корисна для професійного розробника тим, що надає вихідний код програми.
 
 
  
Розробнику так само може бути зручно створити структуру свого додатку за допомогою цього інструменту, а далі використовуючи Visual Studio 2013 (Update 2) доопрацювати його, не витрачаючи часу на прописування базових елементів.
  
 
Висновок
Для того щоб створити додаток в App Studio не вимагається знань в області програмування, крім того створення програми та отримання його вихідного коду абсолютно безкоштовно.
 
Розробникам так же буде цікаво скористатися новим інструментом, наприклад для скорочення часу на розробку базової структури додатка.
 
 
Корисні посилання
 Інструмент Windows App Studio
 Навчальні курси віртуальної академії Microsoft (MVA): Створення Windows і Windows Phone 8.1 додатка в App Studio
 Завантажити безкоштовну або пробну Visual Studio 2013
 Центр розробки Windows
 Як опублікувати додаток в Windows Store
 Завантажити приклад програми з цієї статті
    
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.