App Studio – нова версія онлайн конструктора програм від Microsoft

Привіт всім!

Представляю вашій увазі новий інструмент від Microsoft "Windows App Studio"- Конструктор для створення програм. Сьогодні розповім про те, як звичайному користувачеві стало доступне створення програм для Windows і Windows Phone. І трохи про те, що цей інструмент може бути корисний розробнику.

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

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

Для доступу до App Studio необхідно мати обліковий запис Microsoft (колишнє Live ID) та можливість виходу до мережі.

Огляд
Інтерфейс простий та інтуїтивно зрозумілий:

На головній сторінці є панель керування для доступу до основних сторінок ресурсу:


Також на головній сторінці демонструються створені в 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;
  • Далі дві вкладки відповідають за зовнішній вигляд та стиль програми: Themesі Tiles.
  • Publish infoмістить попередні налаштування для публікації програми у Windows Store.
Робота над змістом
В області Content визначимо з яких сторінок складатиметься Wine Expert:
  • Про вино;
  • Каталог вин;
  • Виробництво вина;
  • Про творців.
Для створення структури використовуємо набір блоків, запропонований App Studio:

  1. Сторінку «Про вино», якщо вона містить текст як у даному прикладі, найзручніше оформити за допомогою блоку “HTML”:

    Редагування тексту доступне як у текстовому режимі, так і HTML – редактора, достатньо натиснути на символ .

  2. Каталог вин є блоком типу «Collection»:

    Дані у додатку можуть бути двох типів:

    • Статичні;
    • Динамічні.
    Статичні дані- Це дані, які знаходяться в додатку. Додаток з таким типом даних не потребує інтернет-з'єднання. Однак для оновлення статичних даних, доведеться оновити повністю всю програму.

    Динамічні дані- Дані, розташовані в хмарі. Для доступу до них необхідне інтернет-з'єднання, однак при оновленні цих даних у хмарі, у програмі вони оновляться автоматично.
    Процес заповнення будь-якого з цих типів даних 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»:

    Не забуваємо про кнопку Save і подивимося на вкладку Data:

    Вже відома структура бази даних, готова до редагування. Нас цікавить введення даних у додаток, натискаємо «Edit Data» та потрапляємо на наступну сторінку:

    Дані можна додавати вручну, заповнюючи кожен рядок після її створення, за допомогою Create new. Але ми скористаємося вбудованою в App Studio можливістю завантаження даних за допомогою файлу з розширенням. csv «Import data»:

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

    Залишилося тільки додати картинки:

    Режим перегляду програми на платформі Windows доступний при натисканні на « Windows Preview».

  3. Сторінка "Виробництво вина" міститиме відео цього процесу, в цьому випадку вибираємо блок типу YouTube:

    • Search/User/Playlist- тип запиту, за яким додаток шукатиме відео;
    • « wine production- зміст запиту.
    Результат – сторінка, що відображає відео з YouTube за заданим пошуковим запитом:

  4. "Про творців" - цю сторінку створимо за допомогою блоку типу "Menu":

    Для цього блоку є два режими редагування:

    • Стандартне редагування відображення на сторінці: кнопка «Edit»;
    • Редагування пунктів меню.
    Редагування пунктів меню є область, в яку необхідно додати потрібні елементи:

    Блок типу «Menu» може містити в собі всі базові блоки, колекції, а також елемент нового типу «MenuAction»:

    Дія, за яку відповідає цей пункт після його редагування – написання листа через доступні на пристрої програми:

    Також налаштування «MenuAction» включає й інші дії: телефонний дзвінок, перехід на вказану сторінку і т.д.

    Додамо на сторінку «Про творців» телефон та наповнення програми контентом завершено:

Оформлення та стиль програми

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:



Одна з умов публікації програми в Windows Store - щоб назва програми (App Name) перед її публікацією була зарезервована в магазині. Резервуємо ім'я програми в Центрі розробки. Кожному зарезервованому (зареєстрованому) імені магазин надасть свій «Package Identity». Користувачеві App Studio необхідно знати цю інформацію, ім'я та ID.

Для того, щоб App Studio згенерувало спеціальний пакет програми для публікації, необхідно заповнити «Application manifest» - маніфест програми. Для цього в Publish Info передбачено наступне налаштування Associate App with the 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. Встановити на пристрій програму:
    • Завантажити Installable packages;
    • Знайти файл Add-AppDevPackage1.ps1, правою кнопкою миші запустити “Run with PowerShell”.

Доступ до даних програми у хмарі
Для додавання, видалення або редагування динамічних даних опублікованої програми необхідно в Центрі розробки звернутися до відповідної програми у списку Dashboard. Відкрити колекцію та зробити всі необхідні зміни. Програма оновиться автоматично.
Можливості для розробників
App Studio може бути корисною для професійного розробника тим, що надає вихідний код програми.

Розробнику також може бути зручно створити структуру своєї програми за допомогою цього інструменту, а далі використовуючи Visual Studio 2013 (Update 2) доопрацювати його, не витрачаючи часу на прописування базових елементів.

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

Розробникам так само буде цікаво скористатися новим інструментом, наприклад, для скорочення часу на розробку базової структури програми.

Теги:

  • windows phone
  • windows
  • visual studio 2013
  • windows store
Додати теги

Всім привіт!

Моя остання посада була написана досить давно і настав час виправляти цей прикрий факт. Сьогодні я вирішив розбавити низку статей про Windows Azure і поговорити про іншу, не менш привабливу платформу від Microsoft - Windows Phone.

Як ви, напевно, вже знаєте, операційна система для мобільних пристроїв компанії Microsoft присутня на ринку вже давно (аж з 2010 року) і на сьогоднішній день займає одну з лідерських позицій, в деяких країнах обходячи за кількістю проданих пристроїв навіть популярну iOS. Тому багато розробників як у Росії так і по всьому світу вже на повну пишуть додатки для цієї ОС, звітуючи про відмінні продажі і прибутки в Windows Store.

Почати розробляти програми для Windows Phone насправді досить легко. Якщо ви вже знаєте C# і мали досвід роботи з WPF або Silverlight, можна сказати, що ви знаєте 80% необхідної інформації. Справа в тому, що в основі платформи розробки для Windows Phone спочатку лежав Silverlight, а у версії WP8 він змінився на щось схожу на нього платформу, хоч і більш наближену до WinRT. Так що якщо ви коли-небудь писали програми на WPF, знаєте, що таке MVVM і для чого він потрібен, то вперед, пишіть програми для Windows Phone.

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

Windows Phone App Studio

Я завжди любив компанію Microsoft за те, що вона надає своїм користувачам розробникам дуже зручний інструмент для роботи. І ось у серпні Microsoft представила свій новий сервіс, який дозволить будь-якій людині, навіть не знайомій із програмуванням взагалі, створити свій власний додаток для Windows Phone. Називається він Windows Phone App Studio.

За допомогою даного сервісу ви за чотири кроки зможете створити повноцінний додаток з нуля. Ви зможете задати свої стилі, зображення та дані, додати опис та викласти результат у магазин додатків. При цьому вам не обов'язково бути зареєстрованим розробником (річна передплата для яких коштує $99). Тепер кожен має можливість безкоштовно розблокувати один пристрій і завантажити на нього до двох власних програм, щоб їх протестувати.

Мені самому стало цікаво, які можливості є у даного сервісу, і я вирішив створити програму-суптник для свого міні-проекту Факти про програмування. Про це я зараз докладно розповім.

Крок 0.1. Реєстрація

Для того, щоб почати користуватися сервісом, вам необхідно зареєструвати свій власний обліковий запис LiveID. Я думаю немає сенсу пояснювати, що це таке, якщо ви хоч раз користувалися сервісом від Microsoft. Заходимо на сайт App Studio і тиснемо кнопку Start Building:

Введіть свій LiveID логін та пароль і випадете в систему керування своїми програмами. Якщо ви робите це вперше, у вас буде порожній список. У мене ж у колекції вже є програма prog_facts.

Крок 0,2. Вибір типу програми

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

Готових шаблонів досить багато. Серед них є і шаблони для програм спортивної спрямованості (наприклад, для відстеження результатів улюбленої команди), сімейні, розважальні та багато інших. При наведенні маші на шаблон ви побачите його короткий опис, а при виборі кожного з них відкриється додаткове вікно, де буде продемонстровано те, як ця програма може виглядати.

У моєму випадку я вирішив не покладатися на шаблон, а створив програму з нуля, вибравши відповідний пункт меню create an empty app.

Крок 1. Інформація про програму

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

Зверніть увагу на телефон, який відображається праворуч. У ньому завжди відображається ваш додаток із тими змінами, які ви з ним робите.

Крок 2. Наповнення контентом

Кожна програма, що створюється через Windows Phone App Studio, складається з секцій. Кожна секція є набором сторінок, пов'язаних між собою якоюсь логікою. Наприклад, дані, які можна відображати на цій сторінці. Створимо нову секцію, в якій як джерело даних будемо використовувати потік RSS.

Тут треба задати ім'я майбутньої секції, вибрати тип джерела даних (доступні Колекція, RSS, відео з YouTube, зображення з Flickr, пошук у Bing та HTML5 контент) та присвоїти йому ім'я. Після створення секції ми потрапимо на сторінку редагування.

Сторінка редагування поділена на кілька частин. У розділі Data Source ви можете керувати джерелом даних, пов'язаним із цією секцією. Розділ Pages містить перелік усіх сторінок, які належать до секції. Можна помітити, що у нас за умовчанням було створено дві сторінки. Перша, під назвою Blog - головна сторінка секції, яка містить записи, зчитані з RSS потоку. Друга сторінка Info була згенерована автоматично і вона відповідає за відображення деталей кожного запису RSS, коли користувач вибере її в списку. Ми поки що залишимо сторінки секції і спочатку відредагуємо джерело даних. (і не забуваємо натиснути Save Changes, щоб секція збереглася у проекті)

Крок 2.1. Джерело даних

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

Як тільки ви натиснете Refresh і збережете результати, на головній сторінці програми в емуляторі ви відразу побачите, що дані з RSS-стрічки вже відображаються у вашому додатку. Це дуже зручно і корисно, тому що відразу можна дізнатися, як програма виглядатиме. Наприклад, моя RSS стрічка не прикріплює зображення до записів, тому замість них конструктор App Studio підставляє стандартні зображення, які виглядають недоречно. Давайте це виправимо.

Крок 2.2. Редагування зовнішнього вигляду сторінки

Вибравши на сторінці “Configure App Content” у розділі Section Pages одну із сторінок, ви перейдете у вікно її редагування. Для кожного типу сторінки є кілька можливих шаблонів. Для сторінки Blog, яку я спочатку хочу поправити, за замовчуванням виставлено вигляд відображення записів та картинок. Давайте виберемо вигляд із лише записами, попутно поправивши заголовок сторінки:

Відразу видно, як змінилася програма. Тепер записи йдуть одна за одною послідовно, що наводить зовнішній вигляд програми до мінімалістичного стилю. Варто звернути увагу на поля Item Title та Item Subtitle. Замість простого тексту там зараз написані незрозумілі вирази (Data.Title) та (Data.Summary). Для тих, хто знайомий з WPF, це можна порівняти з Data Binding. Для решти я поясню.

Оскільки наша секція побудована навколо Data Source, ми маємо можливість якимось чином отримувати дані з цього джерела. Ці вирази таки означають, що у відповідних полях ми хочемо бачити інформацію, отриману з RSS стрічки. Тут об'єкт Data є одним записом з RSS, а поля Title і Summary – якусь конкретну частину цього запису. Якщо натиснути на іконку праворуч від поля, то вам виведеться весь перелік доступних полів об'єкта Data, серед яких є інформація про автора запису, її дату, посилання та дещо ще.

Аналогічно спробуємо відредагувати сторінку Info. Для неї доступний дещо інший набір шаблонів, серед яких ми виберемо найпростіший і найбільш підходящий:

На цій сторінці все приблизно аналогічно. Єдине, що замість об'єкта даних Data тут використовується Context, який по суті є тим самим.

Крок 2.3. Додавання меню та інших секцій

Крім простих секцій, у Windows Phone App Studio можна додати так зване меню. Це секція, яка складається з переліку посилань на інші секції або зовнішні сайти. Я вирішив додати меню до розділів сайту з відео, щоб у вас завжди був під рукою швидкий доступ до корисної інформації. Додається меню аналогічно до простої секції і його налаштування не становить складності. Так що пропоную освоїти це як домашнє завдання.

Крок 3. Стилі

Завершивши наповнення програми секціями, сторінками та меню, переходимо до розмови про прекрасне, а саме про стиль. У розділі 3 “Configure App Style” ви зможете налаштувати базову колірну гаму, яка використовуватиметься у вашій програмі. Я вибрав кольори, які використовуються у блозі – це синій та білий. Таким чином, додаток вийшов світлим і приємним, хоча про смаки не сперечаються.

Колір Accent Brush відповідає за те, яким буде ваш основний колір акценту. Він відповідає за заголовок програми. Пензель Background Brush, як не важко здогадатися, відповідає за колір тла. Ви також можете вибрати картинку, якщо вважаєте її доречнішою, ніж однотонна заливка. Foreground Brush – це колір шрифтів, якими виводитимуться дані у вашому додатку. Ну і Application Bar Brush - колір фону панелі меню, що виводиться знизу.

Крок 3.1. Тайли

Тайли – це невід'ємна частина будь-якої програми для Windows Phone. Вони можуть розширити вашу програму, дозволивши користувачеві бачити додаткову інформацію, не відкриваючи основне вікно програми. Звичайно ж, у Windows Phone App Studio ви не зможете створити розумний тайл, який зміг би самостійно оновлювати свій вигляд і підвантажувати додаткові дані звідкись. Однак ви можете вибрати один із кількох стандартних типів поведінки, використовуючи деякі статичні дані. Наприклад, для програми glamcoder я вибрав тип тайла Iconic Template і виведу на нього короткий опис програми:

Крок 3.2. Splash та Lock екрани

Це додаткові прикраси, які дозволять вашому додатку виглядати більш ошатно та презентабельно. Зображення Splash Screen – це зображення, яке виводиться користувачеві, доки ваша програма завантажується. Там, як правило, прийнято поміщати логотип вашої програми або фірми, щоб одразу дати зрозуміти користувачеві, яким саме програмою він збирається користуватися в даний момент.

Зображення для Lock Screen – це зображення, яке буде виводитися на екран блокування. Насправді в ньому немає особливого практичного сенсу, тому що ця картинка статична в рамках Windows Phone App Studio, і навряд чи користувач захоче змінити барвисті шпалери Bing вашою картинкою.

Крок 4. Фінал

Ну ось ми і дійшли до останнього етапу - створення нашого першого додатка для Windows Phone. На останній сторінці з назвою Generate на нас чекає заповітка – згенерувати пакет, який згодом ми зможемо встановити на свій пристрій. Натискаємо велику кнопку Generate app і чекаємо, доки працює магія.

Після того, як генерація завершиться, ви побачите відповідне повідомлення, а також на вибір кілька варіантів. Перший – вам на пошту прийде лист, з якого ви зможете завантажити свою програму. Другий - ви можете завантажити на свій комп'ютер готовий файл пакета, щоб потім опублікувати його в магазині програму. І третій варіант – ви можете завантажити вихідні коди отриманої програми, щоб підредагувати їх. Я вам раджу скористатися третім способом. По-перше, так ви отримаєте більше гнучкості та зможете внести такі зміни, які у Windows Phone App Studio зробити не можна. А по-друге, і це найголовніше, ви зможете самостійно розібратися в коді програми, вивчити як воно працює, щоб наступного разу написати все своїми власними руками.

Висновок

Популярність тієї чи іншої мобільної операційної системи в наші дні визначається не тими функціями, які вона надає користувачам із коробки сама, а тими додатками, які доступні в магазині і дозволяють розширити функціональність кожного пристрою до нескінченності. Я часто чую слова людей, мало знайомих з Windows Phone, що це відстала система, що для неї немає необхідних додатків тощо. Усе це негаразд. Система активно розвивається, з кожним днем ​​з'являється все більше нових, корисних, а часом навіть ексклюзивних програм.

Я дуже сподіваюся, що ця стаття надихне вас на написання свого власного першого додатка для Windows Phone. І мені хочеться вірити, що знання, які ви придбаєте, допоможуть вам створити новий Instagram або нові Angry Birds. А щоб це сталося якомога раніше, заходьте на портал розробки для Windows Phone, вивчайте матеріали, дивіться відеоуроки, робіть.

Удачі та хороших вам додатків!

На сьогоднішній день розробка додатків для W indows 10 M obile є одним із найперспективніших напрямків.

Багато програмістів переучуються і освоюють цю сферу своєї діяльності самостійно.

Інших навчає компанія, в якій вони працюють.У будь-якому випадку напрямок цей відмінний і займатися ним точно варто.

Тому ми розберемо ті кроки, які повинні зробити.

Зміст:

Ввідна інформація

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

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

Можливо, ви вивчилися в коледжі або пройшли якісь курси для .

Якщо це так, ця інструкція спеціально для вас.

Переходимо до теми розробки.

Розробники Microsoft кілька років тому зробили дуже зручну річ. Вони створили звані універсальні докладання, а точніше, середу розробки їм.

Вони підходять для всіх пристроїв, які працюють на .

На малюнку 1 те, що написано вище показано на схемі.

Саме існування універсальних додатків ґрунтується на понятті UWP (Universal Windows Platform)).

Такі програми (Universal Apps) підходять для різних пристроїв - ПК, мобільні апарати, і так далі.

Вони об'єднані такими компонентами:

  • Adaptive User Interface– адаптивний інтерфейс, тобто такий зовнішній вигляд програми, який може самостійно змінюватись в залежності від пристрою, на якому він працює;
  • Natural User Inputs– набір пристроїв для введення даних, таких як мікрофон, стілус тощо;
  • One SDK + Tooling– універсальне для різних пристроїв середовище розробки та супутній набір інструментів;
  • One Store + One Dev Center– один магазин, з якого можна взяти додатки для різних девайсів, та один центр розробників;
  • Cloud Services– завдяки яким можна організувати спільний процес розробки або просто зберігати програми та файли в одному місці, доступному з різних гаджетів.

Завдяки такому підходу можна дуже серйозно оптимізувати свою роботу.

Основний його плюс у тому, що потрібно писати, наприклад, 2 окремих і .

Ви пишіть одну програму, а вона сама адаптується під девайс, на якому запускається.

Тому такого поняття, як окрема програма під Windows 10 M obile на сьогоднішній день не існує в принципі.

Замість нього є UWP.

Примітно, що коли в побуті була ОС W indows Phone (операційна система, яка передувала Win Mobile), такого підходу не було передбачено. Доводилося робити програму під комп'ютер, а потім намагатися портувати (іншими словами адаптувати) її для . Хоча в переважній більшості випадків доводилося розроблятися з нуля. Як ви розумієте, це було дуже незручно.

Добре, що зараз усе змінилося, і ми маємо універсальний спосіб програмування.

Тепер перейдемо до практики.

Способи розробки під W indows 10 M

Виходячи з вищесказаного, можна виділити три способи написати програму для W indows 10 M

Cross-Platform. У програмному середовищі Visual Studio (це один із інструментів розробника, про які ми поговоримо в наступному розділі) є такий компонент,як Xamarin . Так ось, завдяки ньому є можливість розробляти програми для Windows 10 Mobile, та одночасно. Перед розробником будуть три екрани, в яких він зможе змінювати інтерфейс свого творіння. А програмна логіка залишатиметься незмінною. Використовується C#.

Інші.Теоретично, хоча це буде досить проблематично, для поставленої нами мети можна використовуватиі . Ці мови програмування на сьогоднішній день вважаються застарілими (менш активно використовується тільки Basic ). Але їх все ще можна використати.

Як бачите, оптимальним є перший спосіб, особливо якщо йдеться про майстра коду-початківця.

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

Що потрібно для розробки – вивчаємо інструментарій

Все це вам потрібно буде скачати зараз, щоб почати творити! Скажімо одразу, все це є Microsoft.

Отже, ось що вам знадобиться:

Visual Studio. Це середовище розробки.Саме в ній ви будете писати код, бачити зовнішній вигляд майбутньої програми, компілювати його (запускати іншими словами) і таке інше. Завантажити VS можна з сайту visualstudio.com. Там є 3 версії – Community, Professional та Enterprise . Перша – безкоштовна та в ній мінімальний функціонал. Але цього цілком вистачить для того, щоб займатися розробками під Win 10 Mobile . Інші дві – платні і вони значно розширено функціонал.

Windows 10 Anniversary Update SDK. Це оновлений пакет інструментів, необхідних для розробки під весь асортимент гаджетів, що працюють на ОС Віндовс 10. Завантажити його можна на сайті developer.microsoft.com. Цей компонент потрібно просто встановити після завантаження. Він автоматично «вбудується» в VS.

Початківцям буде цілком достатньоVisual Studio Communityв поєднанні з Windows 10 Anniversary Update SDK.

Важливо!Обов'язково перевірте системні вимоги Visual Studio . Цілком можливо, ваш комп'ютер не потягне версію 2017. На тому ж сайті можна знайти раніше VS.

У майбутньому, коли ви освоїте основні ази, можна буде також спробувати використати Blend for Visual Studio.

Але це актуально, тільки якщо ви використовуєте Visual Studio не 2017, а старішу версію.

У VS 2017 такий інструмент просто не має сенсу. Там від нього і так взято найкраще.

Ліцензія розробника та розблокування

У нашому випадку також потрібна ліцензія розробника. Це актуально якщо ви працюєте на

Але її буде отримано автоматично при компіляції першого додатка.

Так що нічого додатково робити вам не потрібно.

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

Конкретно потрібно зробити таке:

  • За допомогою пошуку знайдіть меню « Update & Security» («Оновлення та безпека» якщо російською).
  • Там у меню зліва ви берете " For developers» («Для розробників»).
  • Поставте позначкубіля напису « Developer mode» («Режим розробника»).

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

Приклад програми - "Hello World"

Отже, щоб написати вашу першу програму, зробіть ось що:

1 Запустіть інстальовану Visual Studio. Ви берете «Файл», потім «Створити»і «Проект».

2 Відкриється вікно «Створення проекту». Натисніть на панелі зліва «Установлені» , потім клацніть «Visual C++» (ми поки що будемо використовувати саме цю мову) і надалі пункт«Універсальні програми для Windows» .

3 У центральній частині відкритого вікна залиште все як є. Там має бути обраний пункт «Порожній додаток…».

4 Внизу введіть назва проекту, розташування вихідних записів та ім'я ярлика.

5 Натисніть "ОК"в лівому верхньому куті.

6 На панелі зліва ви знайдете список усіх файлів проекту.Не вдаючись до подробиць, скажемо, що код пишеться у файлі з розширенням .xaml. У нашому випадку це "MainPage.xaml". Відкрийте його, і в центральній частині з'явиться місце для коду.

  • - Елемент « StackPanel » є своєрідним контейнером для інших елементів, тут ми вказуємо його довжину та висоту;
  • Hello World» та 36 шрифтом;
  • - текстовий блок зі словами « What's your name?»;
  • - Ще один StackPanel зі своїми параметрами;
  • - поле для введення тексту;
  • - Закриття першого StackPanel;
  • - Закриття другого StackPanel.

8 Натисніть кнопку «F5» на клавіатурі, щоб побачити, як програма працює.

Таким чином, ви написали свою першу програму.Тепер необхідно приділити величезну кількість часу вивченню основ програмування та галузі, яку ви обрали. Потрібно йти далі. Якщо ви навчаєтесь у якомусь навчальному закладі, де викладають Windows або маєте можливість пройти додаткові курси, скористайтеся матріалом, який вам дадуть. А якщо ні, ми склали для вас список найкращих книг та статей, які можна знайти в інтернеті, щоб навчитися самостійно.

З виходом Windows 8, розробникам було представлено абсолютно новий тип додатків – додатки у стилі Modern UI. Ну як новий? Подібні програми вже розроблялися для Windows Phone. Ці програми не мали нічого спільного зі звичними програмами Windows. Такі програми не сумісні з попередніми версіями Windows, мають абсолютно новий інтерфейс (Modern) і для їх розробки використовується новий WinRT API(Windows Runtime API) та Windows XAML(Мова розмітки інтерфейсу).

Жодних проблем для написання тільки Windows 8-версії своєї програми не було, однак, якщо потрібно було написати програму не тільки для Windows, але і для Windows Phone, потрібно було подолати певні труднощі. Вся справа в тому, що Windows Phone для своїх програм використовує Silverlightі Windows Phone API, тоді як Windows 8 використовує Windows XAMLта WinRT API. Вони мають деякі суттєві відмінності.

Необізнаній людині може здатися, що жодних проблем це приносити не повинно, хоча насправді кожна версія програми має бути написана з нуля повністю. Саме це є головною проблемою, оскільки обсяг роботи, який потрібно виконати, був колосальним. Ні, звичайно були способи для уніфікації деяких частин програми, але вони важкі для розробника-початківця.

У Microsoft знали про цю проблему і тривалий час працювали над її вирішенням. Результатом цієї роботи стали так звані універсальні програми Windows(Universal Windows Apps), які доступні починаючи з Windows 8.1 Update 1 та Windows Phone 8.1 (яка до кінця літа буде доступна для встановлення всіх пристроїв на Windows Phone 8). Можна припустити, що тепер програми будуть працювати без перекомпіляції як Windows, так і Windows Phone, але це не зовсім так.

Кожен додаток буде створюватися і компілюватися окремо для кожної платформи, але обсяг необхідної роботи тепер істотно скоротився. Вся справа в тому, що Microsoft уніфікували більшу частину API для Windows і Windows Phone. Найбільше змін було виконано саме на боці Windows Phone. Відтепер для написання програм для цих двох платформ (скоро буде три, Xbox One туди ж) використовується WinRT API та Windows XAML. Звичайно ж, звичний для Windows Phone Silverlight нікуди не подівся і навіть обзавівся деякими додатковими можливостями, але не про нього зараз розмова.

Універсальні програми тепер використовують середовище виконання Windows (той самий Windows Runtime). Ці нововведення дозволяють програмісту звести платформозалежний код до мінімуму, адже більшість викликів до API ідентичні.

Тестовий додаток

Сьогодні пропоную вам спробувати написати просте універсальне додаток, ім'я якому "Hello, World!". Писатимемо мовою C#(потрібні як мінімум початкові знання мови та XAML). Для цього мінімально нам знадобиться:

Windows 8.1 (x86)

Це дуже мінімально. З таким комплектом ви зможете розробити універсальну програму та налагоджувати її Windows-версію на своєму поточному комп'ютері. Windows Phone-версію програми ви зможете налагоджувати тільки на реальному пристрої (причому потрібний обліковий запис розробника).

Щоб мати можливість налагодити свою програму в емуляторі Windows Phone, вам знадобиться:

Windows 8.1 Професійна (x64)
Процесор з підтримкою апаратної віртуалізації для клієнта Hyper-V (підходить навіть бюджетний Celeron G1610 і навіть Pentium 4 на LGA775)
Visual Studio Express 2013 для Windows з оновленням 2

З таким комплектом ви зможете розробляти свою програму більш повноцінно та тестувати її в різних режимах з використанням імітатора Windows-планшета та емулятора Windows Phone.

Я ж буду використовувати Visual Studio Ultimate 2013 і показуватиму все саме на ній. Не хвилюйтеся, від безкоштовного Express інтерфейс практично не відрізняється. Почнемо!

Універсальний Hello, World!

Запустимо Visual Studio та створимо новий проект.

В розділі «Програми Магазину Windows»Існують різні шаблони програм як для Windows, так і для Windows Phone. Нас цікавлять саме універсальні програми, шаблони яких доступні у спеціальному підрозділі.

На вибір дається два варіанти: порожній додаток та програма з Hub (це такий класний елемент управління). Зупинимося на порожньому додатку, адже ми поки що тільки вчимося, і одразу лізти в нетрі не слід. Ходімо від простого.

Введіть ім'я для створюваної програми. Я назвав його "UniversalHelloWorld", чітко та ясно. Натискаємо «ОК» і очікуємо, доки Visual Studio створює проект. Розгляньмо структуру створеного проекту.

Весь проект підрозділений на три частини:

Windows - містить код та елементи, доступні лише Windows-версії програми
Windows Phone - містить код та елементи, доступні тільки Windows Phone-версії програми
Shared – містить код та елементи, які доступні відразу для двох платформ

Зверніть увагу, що на даний момент спільним є лише один елемент: App.xaml(та App.xaml.cs). Цей елемент відповідає за запуск та зупинення програми.

Ви вже можете спробувати запустити програму. Для цього натисніть F5. Щоб припинити налагодження, поверніться до Visual Studio і натисніть "Shift+F5". Ви повинні побачити пустий екран. Спочатку буде запущено Windows-версію програми. Щоб вибрати, яку версію програми запустити, знайдіть на панелі інструментів кнопку налагодження (зелений трикутник).

Тут ви можете вибрати, де запускати налагодження вашої програми. Імітатор виконує імітацію Windows-планшета, у якого ви можете змінювати орієнтацію, роздільну здатність дисплея та інші речі. Кнопка «Видалений комп'ютер» призначена для запуску налагодження на зовнішньому Windows 8 пристрої. Я для цього використовую Surface RT.

Повернімося до зміни версії, що запускається. У підменю «Проект, що запускається»ви можете обрати "Windows Phone 8.1". Після цього вміст базового меню зміниться і на ваш вибір буде доступно безліч емуляторів.

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

Поки що кожна версія програми має окрему головну сторінку MainPage.xaml. Так як наша програма дуже проста, нам зовсім не потрібен різний дизайн сторінки на кожній платформі. Перемістіть MainPage.xaml до розділу Shared, а потім видаліть його з розділів Windows та Windows Phone. Структура проекту стане такою:

Відкривши цей файл, ви побачите цю країну у візуальному редакторі, а також код розмітки. Поки що ми маємо наступний код:

Він лише створює кореневу сітку сторінки, зафарбовану стандартним кольором сторінки. Давайте додамо на сторінку однойменний напис та кнопку для привітання. Розмістіть у Grid елемент TextBlock. Код елемента буде таким:

Щоб побачити, як сторінка виглядає в режимі планшета/десктопа та телефону, використовуйте список, що випадає, над редактором коду.

Також на сторінку додамо кнопку, яка покаже нам невелике повідомлення. Код цієї кнопки такий:

Додамо для цієї кнопки обробник події її натискання (Click). Для цього двічі клацніть кнопку і ви автоматично перейдете до редактора коду C#. Автоматично згенерувався порожній обробник.

Останнє оновлення: 31.10.2015

Запустимо Visual Studio Express 2013 для Windows. У меню виберемо File->New Project.. . Перед нами відкриється вікно створення проекту:

У лівій частині вікна виберемо Visual C#->Store Apps-> Windows Phone Apps. А серед шаблонів нового проекту виберемо Blank App (Windows Phone), дамо якусь назву проекту, наприклад, назвемо його HelloApp. І натиснемо ОК.

І Visual Studio створить новий проект:

Проект шаблону Blank App за замовчуванням має такі вузли:

    Каталог Assets, що містить файли зображень, що використовуються.

    App.xaml та App.xaml.cs - файл ресурсів програми на xaml та файл коду програми на c# відповідно

    MainPage.xaml та MainPage.xaml.cs - файл графічного інтерфейсу вікна програми та файл коду вікна на c# відповідно

    Package.appxmanifest - файл маніфесту програми

На цьому початковому етапі поки що для нас цінність представляють файли MainPage.xamlі MainPage.xaml.cs. Відкриємо файл MainPage.xaml, який представляє графічний інтерфейс:

Зліва у вигляді телефону ми матимемо вікно графічного дизайнера. Праворуч – вікно розмітки графічного інтерфейсу на мові xaml. Графічний інтерфейс у разі представлений класом MainPage, який є окрему сторінку. Всі зміни по інтерфейсу, які ми зробимо, відразу будуть відображатися в графічному дизайнері, який дасть нам візуальне розуміння того, як у результаті все виглядатиме.

Припустимо, наш додаток буде рахувати суму вкладу після нарахування відсотків. Для цього нам потрібно поле введення суми вкладу, поле для виведення результату та кнопку, за допомогою якої ми ініціюватимемо обчислення підсумкової суми. Отже, змінимо код файлу MainPage.xamlнаступним чином:

ПОХОДЖЕННЯ СТАТТІ