Разрабатывать приложения под Windows Phone не так уж и сложно, особенно если вы пытаетесь сделать приложение, которое предоставляет информацию об услугах и товарах или собирает данные из RSS-ленты.

Это такой тип приложений, которые можно реализовать при помощи javascript-кода в браузере, или при помощи конструктора Access, и поэтому для разработки подобных мобильных или настольных приложений вам вовсе не обязательно обзаводиться полноценным набором инструментов. Пришло новое поколение конструкторов приложений, веб-сервисов, которые позволяют вам создавать и запускать собственные приложения.

Недавно компания Microsoft запустила собственную студию для создания приложений — Windows Phone App Studio . Это простой инструмент, который позволит вам создавать работающие приложения с нуля. Например, на разработку простого приложения о котором идет речь в статье, вам потребуется менее 15 минут, так как в данном конструкторе представлены стандартные шаблоны. Конечно, мы сейчас не говорим о разработке сложных программ или игр, но для начала этой статьи вам будет достаточно.

Подобно приложениям Access, программы созданные при помощи Windows Phone App Studio используют подключения к данным, то есть они построены по модели просмотра master/detail. Вы можете подключить фид контента (будь то RSS, Youtube и т.п.), либо использовать его для публикации собственного контента. Конечно же, приложение способно и на то, и на другое одновременно. Кроме фидов, у вас также будет возможность размещать собственный контент, будь то скомпилированные в код HTML-страницы, или страницы, организованные при помощи простых баз данных, которые Microsoft называет “collections”.

1. На первом шаге , вам нужно определиться с содержимым вашего приложения, вы можете отредактировать или удалить те страницы и элементы, которые стоят по умолчанию.

Мы привязали наше тестовое приложение к RSS-фиду great-world . Все, что нам нужно, это URL фида, и конструктор автоматически создаст окно просмотра, на котором отображается список свежих статей, а также второе окно просмотра с отображением подробной информации о статьях.

Однако стоит отметить, что процесс создания собственного приложения не такой уж и простой, так как RSS-парсер, используемый в App Studio, иногда не справляется с форматированием RSS-лент, генерируемых сайтом. То есть, иногда это может стать реальной проблемой, потому что текст статьи просто не будет отображаться, и при этом возможность отладки будет сильно ограничена, как в случае с любыми облачными инструментами разработки.

3. Теперь, нужно будет задать название, описание, а также выставить размером 160х160 пикселей.

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

На финише, доступен предосмотр созданного приложения, можете проверить как оно будет работать на смартфоне или планшете. Если все хорошо, нажимайте кнопку «Generate», появляется всплывающее окно:

Два варианта на выбор, первый — сгенерировать приложение для мобильных устройств, второй — для планшетов и обычных ПК. Сервис тратит на генерацию менее 10 минут, поэтому вы можете по очереди сделать продукт под каждую платформу. Процесс установки очень прост благодаря встроенной поддержке QR-кодов в Windows Phone. Для начала, вам нужно установить сертификат на телефон, и реализуется это посредством QR-кода, который позволено скачивать сертификат прямо на телефон.

• Чтобы выложить получившееся чудо в Windows Phone Store т.е. в магазин приложений, чтобы его мог скачать любой желающий, а не только вы, необходим сертификат разработчика. Стоит он около 600 рублей.

Сразу очевидно, что этот инструмент направлен на сценарии BYODev, — когда вам нужно быстро получить приложение, и при этом не ввязываться в полноценный процесс разработки. Хотя стоит отметить, что за вами остается возможность скачивать готовые исходные коды, и использовать этот инструмент для прототипирования перед тем, как отдать их на доработку команде разработчиков. Вы наверняка сможете самостоятельно привязывать источники данных в виде коллекций, размещенных в облаке.

Это одна из веских причин, из-за которых Microsoft позволяет вам скачивать исходный код, который подготовлен к работе в Visual Studio. Он будет укомплектован в проект Visual Studio, и его можно будет импортировать напрямую в настольный IDE, а затем провести работу над ошибками. Отладка приложения при помощи любимого симулятора устройств поможет вам быстро выявить проблему – вставленное в начало статьи изображение было удалено на сервере. Можно быстро изменить код, и приложение снова заработает.

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

Относительно создания подобных приложений очевидно лишь одно: они не предназначены для создания комплексных приложений. Они похожи на пластиковые игрушки для детей: все перед нами, и нам остается лишь сложить что-то со смыслом. По мере накопления опыта за счет подобных «игровых» площадок, вы можете постепенно переходить к оформлению кода, и использовать его для создания более сложных вещей. При помощи наборов инструментов типа Windows Phone App Studio, вы можете получать определенный опыт работы с приложениями, основанными на контенте, с RSS-фидами, веб-контентом и локальным контентом.

Конечно, этот набор вряд ли представляет все, что вам потребуется для создания коммерческого приложения, вне зависимости от того, насколько простым оно должно быть. Но дело не в этом, так как генерируемый код дает вам основу, с которой вы можете работать, а также возможность понять, как устроен процесс создания приложения. Одно можно скачать точно: если вы планируете начать разрабатывать собственные приложения, то это отличная точка для старта. Читайте далее: и ?

С выходом 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#. Автоматически сгенерировался пустой обработчик.

При установке Windows Phone Developer Tools вы получаете следующие бесплатные инструменты и компоненты.

• Windows Phone emulator
• Zune software
• XNA Game Studio 4.0
• Silverlight
• .NET Framework 4

Если у вас уже есть установленная Visual Studio 2010 (Professional или Ultimate), то вы можете использовать для разработки свою редакцию Visual Studio 2010 после установки Windows Phone Developer Tools.

Expression Blend for Windows Phone

Expression Blend for Windows Phone - программа для разработки дизайна, которая позволяет создавать и добавлять специальные визуальные возможности, такие как градиенты, анимации и переходы. Для некоторых задач Expression Blend проще в использовании, чем Visual Studio. Следующий список содержит некоторые задачи, которые легко выполняются с помощью Expression Blend.

• Визуальное создание шаблонов данных
• Использование во время разработки тестовых данных для визуализации шаблонов данных
• Визуальное создание стилей элементов управления
• Создание и просмотр анимации

На следующем изображении показан внешний вид Expression Blend.

Примечание:
В этой статье описывается работа в Visual Studio 2010 Express for Windows Phone, и не будет использоваться Expression Blend for Windows Phone.

Visual Studio 2010 Express for Windows Phone

Visual Studio 2010 Express for Windows Phone включает в себя drag-and-drop дизайнер, который имитирует внешний вид телефона, редактор кода и отладчик. Если вы работали с Visual Studio для разработки других видов приложений, вы обнаружите среду для разработки мобильных приложений очень знакомой. На следующем изображении показан внешний вид Visual Studio 2010 Express for Windows Phone.

Дизайнер для Windows Phone содержит панель инструметов (Toolbox), режим дизайна (Design view), режим XAML (XAML view), обозреватель решений (Solution Explorer) и окно «Свойства» (Properties window), похожие на стандартный дизайнер Visual Studio. Два ключевых различий в том, что в режиме дизайна поверхность выглядит как Windows Phone устройство, и появилось целевое устройство (Target device), которое позволит вам выбрать, будет ли вы отлаживать приложение на устройстве или эмуляторе. На следующем изображении показан внешний вид эмулятора в портретной и альбомной ориентации.

Рекомендации по проектированию интерфейса (Design Guidelines)

Важно, что бы вы знали об установленных принципах проектирования интерфейса, если вы планируете опубликовать своё Windows Phone приложения в App Hub. Рекомендации по проектированию описывают, как спроектировать пользовательский интерфейс для своего приложения.

В следующей таблице приводится краткое изложение основных принципов проектирования интерфейса и требований к приложений, которые необходимо учесть при проектировании и разработке вашего приложения. Полный и самый актуальный список рекомендаций по проектированию интерфейса вы можете найти по следующей ссылке.
UI Design and Interaction Guide for Windows Phone 7

Категория	Рекомендации по проектированию
Навигация, фреймы и страницы	Убедитесь в том, что рассмотрели действие кнопки «Назад» и взаимодействие пользователя с панелью приложения при создании навигационной карты.
Панель приложения	Используйте панель приложения для выполнения общих задач приложения. Вы ограничены четырьмя кнопками в панели приложения. Помещайте реже выполняемые действия в меню панели приложения. Если действие трудно чётко выразить с помощью иконки, поместите его в меню панели приложения, а не в виде кнопки. Вы ограничены пятью пунктами в меню панели приложения, чтобы предотвратить возникновение прокрутки.
Кнопка «Назад»	Вы должны реализовать только такое поведение кнопки «Назад», которое осуществляет переход назад или скрывает контекстное меню и диалоговые окна. Все другие реализации запрещены.
Ориентация экрана	Ориентацией по умолчанию является портретная. Для поддержки альбомной ориентации, вам необходимо дописать код. Если приложение поддерживает альбомную ориентацию, оно не может определять только левую или только правую альбомную ориентацию. Левая и правая альбомные ориентации должны поддерживаться. Если приложение поддерживает ввод текста, вы должны поддерживать альбомную ориентацию из-за возможности существования аппаратной клавиатуры.
Темы оформления	Избегайте использования слишком большого количества белого цвета в приложениях, напримера, белого фона, поскольку это может оказать серьёзное влияние на время автономной работы устройств с OLED дисплем. Если основной или фоновый цвет элемента управления задан явно, убедитесь, что его содержание одинаково хорошо видно как при темной, так и при светлой теме оформления. Если указанного цвета не видно, также явно задайте фон или основной цвет, чтобы он был достаточно контрастным или выберите более подходящий цвет.
Настройки приложения	Действия приложения, которые перезаписывают или удаляют данные, или не могут быть обратимы должны иметь кнопку «Отмена». При использовании дополнительных экранов с кнопками подтверждения или отмены, нажатие на эти кнопки должно выполнить соответствующее действие и вернуть пользователя в главное меню настроек.
Сенсорный ввод	Все основные и общие задачи должны выполняться с помощью одного пальца. Сенсорное управление должно реагировать на прикосновения сразу. Сенсорное управление, которое срабатывает с задержкой или кажется медленным при переходах будет иметь негативное влияние на пользовательский опыт. Для длительных ресурсоёмких операций, разработчики должны обеспечивать обратную связь, чтобы указать, что что-то происходит, с помощью содержимого, отображающего прогресс, или рассмотреть возможность использования прогресс-бара или на крайний случай необработанного уведомления (raw notification). Например, вы можете показать все больше и больше содержимого в процессе загрузки. Долгое нажатие, как правило, следует использовать для отображения контекстного меню или страницы опций для элемента.
Экранная клавиатура	Вы должны установить свойство возможности ввода для текстового поля или других элементов с возможностью редактирования, чтобы определить тип клавиатуры и включить соответствующие средства печати.
Элементы управления Canvas и Grid	Элемент управления Canvas использует основанную на пикселях разметку и может обеспечить лучшую производительность, чем элемент управления Grid для глубоко встроенных (embedded) или вложенных (nested) элементов управления в приложениях с неизменяющейся ориентацией. Grid является лучшим выбором, когда фрейм приложения должен расширяться, сжиматься или поворачиваться.
Элементы управления Panorama и Pivot	Как Panorama, так и Pivot обеспечивают горизонтальную навигацию по содержимому устройства, что позволяет пользователю совершать движения и панорамирование по мере необходимости. Используйте элемент управления Panorama в качестве отправной точки для более детализированного пользовательского опыта. Используйте Pivot для фильтрации больших объемов данных, обеспечивая просмотр нескольких наборов данных, или чтобы предоставить способ переключения между различными режимами одних и тех же данных. Не используйте Pivot для задач навигации, как wizard-приложениях. Вертикальная прокрутка списка или сетки в разделах Panorama приемлемо, пока она находится в пределах границ раздела и не параллельно горизонтальной прокрутке. Никогда не ставьте Pivot внутри другого элемента управления Pivot. Никогда не ставьте Pivot внутри элемента управления Panorama. Приложение должно минимизировать количество страниц Pivot. Pivot должен использоваться только для отображения элементов или данных сходного типа. Вы не должны использовать кнопки панели приложения для навигации в элементе управления Pivot. Если Pivot требует навигационные средства, вы, вероятно, не правильно используете его.
Текст	Вы должны в первую очередь использовать шрифт Segoe. Используйте альтернативные шрифты с осторожностью. Избегайте использования шрифтов, размеры которых меньше 15 пунктов. Придерживайтесь единого стиля использования заглавных букв. Название приложения в строке заголовка должно быть в верхнем регистре. Используйте все строчные буквы для большинства остального текста в приложении, включая заголовки страниц и названия списков. В панели приложения любой текст автоматически отображается в нижнем регистре.

Дополнительные ресурсы

Ниже приведены некоторые ссылки на дополнительные ресурсы, где можно узнать больше о разработке для Windows Phone.

Ресурс	Описание
Windows Phone App Hub	Дополнительная документация, примеры кода и сообщество по разработке для Windows Phone.
Windows Phone Development Documentation	Официальная документация по разработке для Windows Phone на MSDN.
Silverlight Documentation	Официальная документация по Silverlight и Silverlight for Windows Phone на MSDN.
Code Samples for Windows Phone	Скачиваемые примеры кода, которые дополняют документацию по Windows Phone.
Windows Phone QuickStarts	Сборник коротких статей, демонстрирующих задачи и возможности при разработке для Windows Phone.
Windows Phone Developer Guide	Руководство разработчика, описывающее историю фиктивной компанией, которая решила использовать Windows Phone 7 как клиентское устройство для уже существующих облачного приложения.
The Windows Phone Developer Blog	Блог, который содержит актуальную информацию и объявления прямо от команды по разработке Windows Phone.
Windows Phone 7 Development for Absolute Beginners	Серия видеороликов для абсолютных новичков, не требующая никаких навыков программирования.
Windows Phone 7 Jump Start	Серия видеороликов для разработчиков, не знакомых с разработкой для Windows Phone с использованием Silverlight или XNA.
Windows Phone 7 Training Course	Видеоролики и практические занятия по разработке для Windows Phone с использованием Silverlight или XNA.
.toolbox	Учебники и другие ресурсы для дизайнеров, обучающие, как разрабатывать дизайн приложения для Windows Phone. Включает в себя учебники по Expression Blend.
Jeff Wilcox Blog	Блог о Silverlight, Silverlight Toolkit и Silverlight for Windows Phone. Джеф Уилкокс - это ведущий разработчик программного обеспечения в Microsoft в команде Silverlight.
Jeff Prosise Blog	Блог о различных областях в программировании на.NET, в том числе Silverlight и Windows Phone. Джеф Просиз является опытным программистом и одним из основателей Wintellect.

Всем привет!

Моя последний пост был написан довольно давно и пора бы исправлять этот прескорбный факт. Сегодня я решил разбавить череду статей о 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 , изучайте материалы, смотрите видеоуроки, творите.

Удачи и хороших вам приложений!

Привет Всем!

Представляю вашему вниманию новый инструмент от 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

Добавить метки