Основы разработки приложений для умных часов и устройств носимой электроники

Google выпустила серию видеороликов о проектировании приложений для Wear OS

Google опубликовала серию обучающих видеороликов о проектировании приложений для Wear OS. Компания решила помочь разработчикам разобраться с основными принципами создания приложений для умных часов.

Курс состоит из пяти уроков, которые охватывают темы начиная с того, как понять, чего хотят пользователи от приложений для умных часов. Рассматриваются способы оценки целевой аудитории и принципы максимально выгодного использования формфактора носимых устройств. Все видеоролики бесплатные и опубликованы на YouTube-канале Google Design. Уроки доступны на английском языке.

В курс входят уроки:

  • Введение в UX-исследования — видео поможет собрать идею создания приложения в осмысленное техническое задание и спланировать дальнейшие этапы разработки;
  • Введение в UX-дизайн для Wear OS — в ролике описываются принципы проектирования интерфейса именно для умных часов, учитывая особенности платформы и поведенческих особенностей пользователей;
  • Введение в инклюзивность — расскажет, как создать приложение, которое будет доступно и удобно всем пользователям;
  • Тематические исследования в технологическом дизайне — в ролике продемонстрированы несколько исследований, которые показывают, как интерфейс и дизайн приложения может влиять на разные группы пользователей;
  • Совместное формирование сообщества — поможет понять, как привлекать внимание людей из разных культур и сообществ таким образом, чтобы уважительно относиться к их взглядам и убеждениям.

В блоге компания пообещала продолжить выпускать образовательные ролики для разработчиков. Через них Google хочет рассказать о подходах, которые используются внутри компании.

  • Разработка под Android
  • Носимая электроника

Новый курс: разработка приложений для Android Wear

Android Wear API предоставляет платформу Android новейшему поколению носимых устройств и умных часов. С Android Wear вы можете создать пользовательский интерфейс, разработанный специально для носимых устройств. Наш последний курс дает вам подробное введение в разработку приложений Android Wear.

Снимок экрана из курса разработки приложений для Android Wear

Что вы узнаете

В этом курсе инструктор Tuts + Пол Требилкокс-Руиз расскажет вам о различных компонентах пользовательского интерфейса, специально разработанных для Android Wear. Вы также узнаете, как расширить приложение для использования новых типов уведомлений об износе.

Еще один скриншот из курса разработки приложений для Android Wear

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

Смотреть введение

Вы можете сразу пройти наш новый курс с подпиской на Envato Elements . За небольшую ежемесячную плату вы получаете доступ не только к этому курсу, но и к нашей растущей библиотеке из более чем 1000 видеокурсов и ведущих в отрасли электронных книг по Envato Tuts +.

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

Введение в разработку приложений для Smart Watch с Tizen

Конечный продукт

Стать разработчиком приложения для умных часов – отличная идея, но что если вы разработчик HTML? Сможете ли вы осуществить свою мечту, не переходя на совершенно иную платформу? Вы должны отказаться от всех своих навыков HTML и начать все заново? Не беспокойся Тизен приходит на помощь.

Tizen – это операционная система семейства Linux, предназначенная для целого ряда устройств, от смартфонов до умных часов и многого другого. Хотя Tizen является проектом в рамках Linux Foundation , им руководит Ассоциация Tizen , членами которой являются Samsung, Intel и другие известные компании в области технологий.

В этом руководстве я покажу вам, как установить и настроить Tizen SDK для носимых устройств, а также разработать приложение для интеллектуальных часов с IDE. Давайте начнем.

1. Установка и настройка SDK

Шаг 1: Tizen SDK или Tizen SDK для носимых?

В настоящее время доступны два типа SDK: Tizen SDK и Tizen SDK для носимых. Поскольку это руководство посвящено разработке автономного приложения для умных часов, вам нужен Tizen SDK для носимых устройств.

Вы можете скачать его с сайта разработчиков Tizen . Вам необходимо скачать соответствующий менеджер установки , соответствующий вашей операционной системе и версии. Если вы предпочитаете автономную установку, а не онлайн, вам также необходимо скачать образ SDK . Если вы используете операционную систему Windows 8 или Windows 8.1, вы можете загрузить установочные файлы, относящиеся к категории Windows 7. Они отлично подойдут для Windows 8 и 8.1.

Шаг 2: Требования

Обратитесь к подробным инструкциям Tizen, чтобы узнать о требованиях к аппаратному и программному обеспечению, которым должен соответствовать ваш компьютер.

Вы можете установить SDK, даже если ваш компьютер не соответствует этим требованиям к оборудованию. Однако, если вы это сделаете, эмулятор умных часов будет работать медленно, что приведет к плохому тестированию приложений. Посетите документацию для более подробной информации. В нем объясняется, как включить технологию виртуализации (VT) в BIOS и предотвращение выполнения данных в Windows.

Шаг 3: Установка SDK

  1. Запустите менеджер установки, который вы скачали ранее. Это файл .exe с именем файла, например tizen-wearable-sdk-2.2.159_windows64.exe, в зависимости от вашей операционной системы и версии.
  2. Нажмите « Дополнительно», чтобы перейти к следующему экрану.
  3. На этом экране установите переключатель с изображением SDK и перейдите к zip-файлу, содержащему соответствующее изображение SDK. Обратите внимание, что я предполагаю, что вы предпочитаете автономную установку, и вы уже загрузили необходимый образ SDK на компьютер для разработки.
  4. Выберите zip-файл образа SDK и нажмите кнопку « Открыть» в диалоговом окне.
  5. Появится извлечение изображения SDK . Нажмите OK после завершения извлечения.
  6. Нажмите Далее, и появится окно с лицензионным соглашением .
  7. Согласитесь с лицензией и нажмите Далее.
  8. Окно конфигурации появится рядом. Я рекомендую оставить все флажки установленными и нажать Далее .
  9. Наконец, когда менеджер установки запрашивает место для установки, укажите свой выбор, выбрав путь и нажав « Установить».
  10. Если вы уже правильно настроили BIOS, во время этого процесса будет автоматически установлен Intel Hardware Accelerated Execution Manager (Intel HAXM). Если нет, выйдите из процесса установки и настройте BIOS так, чтобы он позволял Intel HAXM быть установленным.
  11. Не забудьте включить Data Execution Prevention, если ваша операционная система Windows. Возобновите установку.

При желании вы можете установить Intel HAXM отдельно. После завершения установки перезагрузите компьютер.

Шаг 4: Настройка IDE

  1. Перейдите в папку, в которую вы установили SDK, и перейдите в подпапку ide . Запустите исполняемый файл с именем IDE .
  2. Через несколько минут появится окно с запросом места для рабочей области для сохранения разрабатываемых вами приложений. Укажите путь по вашему выбору для местоположения и нажмите ОК . После настройки должна появиться IDE.

Шаг 5: Особенности IDE

На левой панели IDE есть два окна: Project Explorer и Connection Explorer . Project Explorer показывает проекты, созданные пользователем. В проводнике подключений перечислены подключенные устройства, которые доступны в данный момент, экземпляры эмулятора или удаленные устройства.

Окно IDE

Шаг 6. Создание экземпляра эмулятора

  1. В обозревателе подключений нажмите значок диспетчера эмулятора , крайнюю левую синюю кнопку.
  2. Нажмите Да в открывшемся окне Контроль учетных записей . Это откроет окно менеджера эмулятора .
  3. Нажмите « Добавить новый» и присвойте экземпляру эмулятора имя.
  4. При нажатии кнопки «Подтвердить» будет создан новый экземпляр эмулятора. Нажмите синюю кнопку со стрелкой на значке эмулятора, чтобы запустить эмулятор.

Запуск эмулятора займет некоторое время. Вы должны увидеть окно со стартовым экраном, похожее на скриншот ниже, когда оно запущено и работает. Экземпляр эмулятора должен отображаться как запись в обозревателе подключений .

Проведите пальцем вверх от нижней средней точки начального экрана, чтобы перейти к экрану, на котором отображаются установленные приложения на устройстве или эмуляторе. Поскольку вы еще не установили никаких приложений, отображается только значок « Настройки» .

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

Эмулятор

2. Разработка простого комического приложения

В этом примере мы собираемся создать простое приложение для отображения комикса. Давайте посмотрим на каждый шаг по очереди.

Шаг 1: Создание нового проекта

Давайте создадим новый проект в IDE.

myapp Project Folder View

  1. Перейдите в File> New> Tizen Wearable Web Project .
  2. В появившемся окне выберите « Основные»> «Базовое приложение» и присвойте имени проектаmyapp .
  3. Установите флажок Использовать местоположение по умолчанию или перейдите в другое место по вашему выбору и нажмите Готово .
  4. Ваш новый проект, myapp , должен появиться в Project Explorer .
  5. Нажмите на маленькую стрелку слева от myapp, чтобы развернуть структуру проекта.
  6. Вы должны увидеть index.html файл, подпапка css, подпапка js и несколько других файлов и папок.

HTML, CSS и JavaScript формируют основу для программирования на платформе Tizen. Если вы мастер HTML, вам не нужно изучать новый язык программирования для написания приложений для платформы Tizen. Вы можете использовать свои навыки работы с HTML, CSS и JavaScript.

Шаг 2. Добавление файлов, ресурсов и ресурсов

Сначала нам нужно добавить две подпапки в проект myapp , comic и images . Для этого щелкните правой кнопкой мыши папку проекта myapp в IDE и выберите « Создать»> «Папка» . Подпапки должны появиться в расширенном myapp папка в IDE.

Загрузите исходные файлы для этого проекта с GitHub и перейдите к подпапке с изображениями , которая содержит несколько файлов PNG. Скопируйте файлы png в подпапку изображений , созданную вами недавно.

Вы можете вставить файлы в подпапку изображений в окне Project Explorer , щелкнув правой кнопкой мыши подпапку и выбрав Вставить из всплывающего меню.

Затем создайте девять файлов HTML со следующими именами файлов в подпапке комиксов , щелкнув правой кнопкой мыши подпапку комиксов и выбрав « Создать»> «Файл» . Не забудьте включить расширение .html для файлов.

Теперь у вас должно быть девять HTML-файлов в комической подпапке.

Шаг 3: Добавление кода

Давайте теперь отредактируем код в index.html . Этот файл является точкой входа вашего приложения. Дважды щелкните файл index.html, чтобы открыть файл в среде IDE. Измените содержимое на <title>2nd Race . Затем измените содержимое следующим образом:

При подготовке материала использовались источники:
https://habr.com/ru/news/737314/
https://coderlessons.com/articles/mobilnaia-razrabotka-articles/novyi-kurs-razrabotka-prilozhenii-dlia-android-wear
https://coderlessons.com/articles/mobilnaia-razrabotka-articles/vvedenie-v-razrabotku-prilozhenii-dlia-smart-watch-s-tizen