Як створити програму для віндовс. 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:



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


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 не потрібно знань в області програмування, крім того, створення програми та отримання її вихідного кодуабсолютно безкоштовно.

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

Створення віконної програми Visual Studio

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

Функції API для роботи з консоллю

Структура віконної програми

Елементи керування вікна

Графіка у віконних програмах

В операційній системі Windows можливі 3 типи структур програм:

  • діалогова (основне вікно – діалогове),
  • консольна, або безвіконна структура,
  • класична (віконна, каркасна) структура

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

Невіконні (консольні) програмиє програмою, що працює в текстовому режимі. Робота консольної програми нагадує роботу програми MS-DOS. Але це лише зовнішнє враження. Консольний додаток забезпечується спеціальними функціями Windows. Консольні додатки є системою засобів взаємодії користувача з комп'ютером, засновану на використанні текстового (літерно-цифрового) режиму дисплея або аналогічних (командний рядок MS-DOS, Far). Консольні програми дуже компактні не тільки у відкомпілюваному вигляді, але й у текстовому варіанті, і мають такі ж можливості звертатися до ресурсів Windows за допомогою API-функцій, як і віконні програми.

Віконні (каркасні) програмибудуються з урахуванням спеціального набору функцій API, складових графічний інтерфейс користувача (GUI, Graphic User Interface). Головним елементом такої програми є вікно. Вікно може містити елементи управління: кнопки, списки, вікна редагування та ін. Ці елементи, по суті, також є вікнами, але мають особливі властивості. Події, що відбуваються з цими елементами (і самим вікном), призводять до надходження повідомлень у процедуру вікна.

Різниця між віконними та консольними програмами Windows полягає в тому, з яким типом інформації вони працюють.

У діалозі New Project Visual Studio виберемо Visual C#, Silverlight for Windows Phone та простий шаблон програми Windows Phone Application і назвемо його ExploringXAMLFeatures.


У діалозі вибору цільової операційної системиоберемо Windows Phone OS 7.1


Після створення проекту, вікно Visual Studio набуде наступного вигляду


Розглянемо структуру проекту у вікні Solution Explorer:

Назва файлу Призначення
AppManifest.xmlФайл маніфесту, необхідний для генерації файлу XAP, в який упаковується програма для розгортання на телефоні.
AssemblyInfo.csЩе один конфігураційний файл, в якому визначаються деякі метадані головного складання (Assembly) програми.
WMAppManifest.xmlФайл метаданих, який містить різноманітні налаштування програми: заголовок, завдання першої сторінки, шляхи до іконок, визначення необхідних системних можливостейі т.д.
App.xamlЦе файл ресурсів програми. Тут розташовуються глобальні ресурси (це буде розглянуто при використанні стилів) або глобальні події (при старті програми). Цей файл також є точкою входу програми.
App.xaml.csКод файлу (code-behind) для App.xaml. Тут можна обробляти події та помилки рівня програми, у тому числі його здобуття. Цю концепцію буде розглянуто пізніше, коли розглядатиметься багатозадачність.
ApplicationIcon.pngКартинка, яка буде піктограмою програми в телефоні. Це дійсно важливий файл, так як він є першим, що побачать користувачі під час роботи з програмою.
Background.pngЦя картинка використовується, коли програма закріплена на стартовому екрані телефону (start screen). По суті, це велика іконка програми. Розумно зробити її візуально схожою на ApplicationIcon.png.
MainPage.xamlЦе частина вибраного шаблону програми. Назва MainPaige не дуже вдала, але саме вона використовується шаблоном проекту за умовчанням. Ця сторінка представляє інтерфейс, який бачить користувач під час старту програми.
MainPage.xaml.csФайл коду MainPage.xaml.
SplashScreenImage.jpgЦя картинка відображається під час завантаження програми. Можна встановити зображення з анімацією, щоб поінформувати, що програма завантажується. Є техніка створення дуже динамічних сторінок завантаження на XNA, але вона виходить далеко за межі цього циклу статей.

Файли XAML визначають інтерфейс програми. Насправді це просто XML файлиіз мовою розмітки XAML.

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

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

Додавання елементів керування на сторінку XAML

Зверніть увагу, що Visual Studio за промовчанням відображає і дизайн, і XAML код сторінки.

Якщо ви переходили до перегляду інших файлів рішення, подвійним клацанням перейдіть на файл MainPage.xaml.

У XAML код файлу MainPage.xaml всередину елеметна Grid з ім'ям ContentPanel вставте елемент керування Button:

У вікні дизайну кнопка з'явиться приблизно в центрі інтерфейсу. Звернули увагу на атрибут Name? Це унікальний ідентифікатор елемента, який допомагає посилатися на нього код. Вважайте це ID атрибутом елемента керування. Давайте тепер додамо якісь дії при натисканні на цю кнопку. Є два способи прив'язати подію до кнопки Button (або будь-якого іншого елемента керування). У XAML, прямо у визначенні Button, можна додати атрибут Click і система InteliSense автоматично запитає, чи хочемо ми згенерувати новий обробник подій:


Можна пов'язати обробник подій безпосередньо в коді сторінки Home.xaml.cs, не вказуючи його в XAML файлі:

Public MainPage() ( InitializeComponent(); MyButton.Click +=new RoutedEventHandler(MyButton_Click); )

Обидва способи працюють. Можете використовувати будь-який із них. Для спрощення тут буде використовуватися визначення методу XAML. Тепер у функції MyButton_Click можна написати керований код, який змінюватиме інтерфейс або викликати інші функції. Завершимо наш приклад програми, додавши код, який змінюватиме текст у TextBlock PageTitle (PageTitle – це Name, так що можна посилатися на неї безпосередньо в коді) на «привіт wp7». Щоб зробити це допишемо наступний код у функцію:

Private void MyButton_Click(object sender, RoutedEventArgs e) ( PageTitle.Text = "привіт wp7"; )

Виберемо в налаштуваннях проекту Windows Device Emulator

І запустимо програму, натиснувши на зелений трикутник або копію F5. Після запуску програми та натискання на кнопку «Натисніть мене», вигляд екрана повинен бути аналогічним знімку екрана нижче:

Додавання нових сторінок до проекту

Тільки найпростіший додаток складається з однієї сторінки. Ми хочемо навчитися писати складні багатосторінкові програми. Ми можемо використовувати шаблони Pivot, Panorama, можемо використовувати патерн проектування MVVM (Model-View-ViewModel), а спочатку навчимося додавати нові сторінки в проект і переходити між ними.

У вікні Solution Explorer клацніть правою кнопкою миші по назві проекту, і в меню виберемо, Add, далі New Item, у діалоговому вікні виберемо Windows Phone Portrait Page і назвемо її SecondPage.xaml:


Тепер у нас є порожня сторінка XAML, точна копія сторінки MainPage.xaml до того, як ми її відредагували.

Щоб краще розрізняти сторінки, перейдемо до XAML коду сторінки SecondPage і в елементі TextBlock з Name PageTitle відредагуємо властивість Text, як показано нижче:

Навігація між сторінками програми

Отже, у проекті є дві сторінки, при запуску програми відображається сторінка MainPage.xaml. Як перейти зі сторінки MainPage.xaml на SecondPage.xaml?

Спробуємо два простих способу, як це зробити.

У XAML код файлу MainPage.xaml після доданого раніше коду Button, додамо код HyperlinkButton, як показано нижче:

Розповісти друзям