Новое поколение средств разработки мобильных приложений ПА РХИМ ОВИЧ МАР ИЯ НИКОЛАЕВ НА СТ. ПРЕПОДАВАТЕЛЬ КАФЕДР Ы П РИКЛА ДНОЙ И НФ ОРМ АТИ КИ , ПРОГРАММИСТ ЦИО ИМ ИК Т
Тенденции рынка • Продажи традиционных компьютеров снижаются • Продажи планшетов и телефонов все еще растут очень большими темпами • Компьютеры уменьшаются в размерах, увеличивается время работы от батареи, появляются различные гибриды (моноблоки, ультрабуки, трансформеры, рассоединяемые устройства) 19. 11. 14 Новое поколение инструментальных средств разработки мобильных HTML 5 -приложений 2
Для какой платформы разрабатывать? • За 2014 год было продано 1, 2 млрд смартфонов. Продажи смартфонов в 2014 г. 3. 00%2. 00% 12. 00% • Самая популярная платформа – Android • Приложения для Apple i. OS приносят больший доход 83. 33% Android IOS MS Windows Остальные • Microsoft поддерживает молодых разработчиков 19. 11. 14 Новое поколение инструментальных средств разработки мобильных HTML 5 приложений 3
• Приложения замечательно выглядят и воспринимаются • Сравнительно высокая производительность • Для каждой платформы нужно писать свой код Гибридные • Сочетают удобство разработки кроссплатформенных приложений с качеством нативных Кроссплатформенные • Универсальные средства разработки • Можно написать один раз и запускать на разных платформах • Уступают родным по внешнему виду и производительности Новое поколение инструментальных средств разработки мобильных HTML 5 -приложений Родные (нативные) Платформы мобильной разработки 19. 11. 14 4
Решение Intel для разработки кроссплатформенных приложений Intel® XDK 19. 11. 14 Новое поколение инструментальных средств разработки мобильных HTML 5 приложений 5
04. 03. 2015 Разработка мобильных приложений с использованием Intel XDK 6
Intel® XDK NEW Февраль 2013 Intel приобретает app. Mobi* для HTML 5, включающие app. Mobi* XDK и Dev Center Сентябрь 2013 Первая редакция новой версии Intel® XDK Постоянно Обновления и новые возможности Новое поколение инструментальных средств разработки мобильных HTML 5 -приложений 19. 11. 14 7
Возможности и достоинства • Кроссплатформенная и бесплатная среда разработки • Быстрое прототипирование интерфейсов мобильных приложений • Возможность использовать облачный сервис для хранения • Языки разработки HTML 5 и Java. Script • Инструменты для создания, отладки и сборки ПО, а также эмулятор устройств • Простота разработки кроссплатформенных приложений (Android, i. OS, Microsoft Windows 8, Tizen, ? ? ? ) • Освоение этих технологий под силу даже школьникам. 19. 11. 14 Новое поколение инструментальных средств разработки мобильных HTML 5 приложений 8
Поддержка популярных библиотек j. Query* Mobile App Framework* • Сенсорноориентированный веб-фреймворк (мобильный фрейморк) • Java. Script библиотека для разработки мобильных HTML 5 -приложений 19. 11. 14 Twitter Bootstrap* • Свободный набор инструментов для создания сайтов и веб-приложений Новое поколение инструментальных средств разработки мобильных HTML 5 приложений Topcoat* • Свободная библиотека CSS для разработки веб-приложений 9
Поддержка Apache Cordova • Набор прикладных интерфейсов (API), позволяющих получить доступ к возможностям мобильных устройств (камера, акселерометр, etc. ) 19. 11. 14 Новое поколение инструментальных средств разработки мобильных HTML 5 приложений 10
Где взять? • Скачать с официального сайта http: //xdk-software. intel. com/ 19. 11. 14 Новое поколение инструментальных средств разработки мобильных HTML 5 приложений 11
Процесс установки − выполнение типичных действий 19. 11. 14 Новое поколение инструментальных средств разработки мобильных HTML 5 приложений 12
Необходима регистрация учетной записи Intel XDK 19. 11. 14 Новое поколение инструментальных средств разработки мобильных HTML 5 приложений 13
Авторизация • Можно выбрать пункт «Keep me logged in on this computer» для автоматической авторизации на данном компьютере 19. 11. 14 Новое поколение инструментальных средств разработки мобильных HTML 5 приложений 14
Набор средств разработки. Редактор кода 19. 11. 14 Новое поколение инструментальных средств разработки мобильных HTML 5 приложений 15
Набор средств разработки. Редактор интерфейса 19. 11. 14 Новое поколение инструментальных средств разработки мобильных HTML 5 приложений 16
Набор средств разработки. Отладчик 19. 11. 14 Новое поколение инструментальных средств разработки мобильных HTML 5 приложений 17
Запуск приложений Эмулятор 19. 11. 14 Запуск на устройстве через Intel App Preview Новое поколение инструментальных средств разработки мобильных HTML 5 приложений Сборка установочного файла 18
Набор средств разработки. Эмулятор 19. 11. 14 Новое поколение инструментальных средств разработки мобильных HTML 5 приложений 19
Запуск с использованием Intel App Preview 26. 08. 2014 Установка и настройка Intel XDK. Разработка простых приложений. Запуск на эмуляторе и реальном устройстве 20
Вход в Intel App Preview • Найти в магазине приложений • Ввести свои учетные данные для использования приложения 19. 11. 14 Новое поколение инструментальных средств разработки мобильных HTML 5 приложений 21
Установка Intel App Preview Найти самостоятельно в магазине приложений или воспользоваться ссылками • Для Android (минимальная версия Android 2. 3) • Для Windows 8 (Windows Phone 8 и выше) • Для i. OS (i. OS 4. 3 и выше) 26. 08. 2014 Установка и настройка Intel XDK. Разработка простых приложений. Запуск на эмуляторе и реальном устройстве 22
Вход в Intel App Preview • Ввести свои учетные данные для использования приложения 26. 08. 2014 Установка и настройка Intel XDK. Разработка простых приложений. Запуск на эмуляторе и реальном устройстве 23
Отправка проекта на сервер для тестирования • Нажмите кнопку PUSH FILES 26. 08. 2014 Установка и настройка Intel XDK. Разработка простых приложений. Запуск на эмуляторе и реальном устройстве 24
Чтение QR-кода • Используйте любую подходящую программу (можно Intel App Preview) 26. 08. 2014 Установка и настройка Intel XDK. Разработка простых приложений. Запуск на эмуляторе и реальном устройстве 25
Запуск с помощью Intel XDK App Preview 26. 08. 2014 Установка и настройка Intel XDK. Разработка простых приложений. Запуск на эмуляторе и реальном устройстве 26
Сборка и установка приложения на устройство 26. 08. 2014 Установка и настройка Intel XDK. Разработка простых приложений. Запуск на эмуляторе и реальном устройстве 27
Для запуска приложения необходимо • Иметь возможность передать готовое приложение на устройство (беспроводное или кабельное соединение) • Для Android: разрешить устанавливать приложения, полученные из альтернативных источников • Для i. OS и Windows Phone: иметь учетную запись разработчика 26. 08. 2014 Установка и настройка Intel XDK. Разработка простых приложений. Запуск на эмуляторе и реальном устройстве 28
Порядок сборки проекта Выбор платформы для сборки 26. 08. 2014 Установка и настройка Intel XDK. Разработка простых приложений. Запуск на эмуляторе и реальном устройстве 29
Нажмите Build App Now 26. 08. 2014 Установка и настройка Intel XDK. Разработка простых приложений. Запуск на эмуляторе и реальном устройстве 30
Download Build позволяет скачать приложение 26. 08. 2014 Установка и настройка Intel XDK. Разработка простых приложений. Запуск на эмуляторе и реальном устройстве 31
После сборки проекта • На электронную почту автоматически отправляется письмо, содержащее ссылку на собранный проект в облачном хранилище • Можно отправить проект в магазин приложений • Можно установить файл на устройство 26. 08. 2014 Установка и настройка Intel XDK. Разработка простых приложений. Запуск на эмуляторе и реальном устройстве 32
Установка apk-файла 26. 08. 2014 Установка и настройка Intel XDK. Разработка простых приложений. Запуск на эмуляторе и реальном устройстве 33
Установка apk-файла 26. 08. 2014 Установка и настройка Intel XDK. Разработка простых приложений. Запуск на эмуляторе и реальном устройстве 34
Способы создания проектов 19. 11. 14 Новое поколение инструментальных средств разработки мобильных HTML 5 приложений 35
Способы создания проектов Из примера Используются шаблоны наиболее популярных типов приложений Из шаблона «С нуля» 19. 11. 14 Используются готовые примеры Создается один пустой файл проекта, все остальное программист добавляет самостоятельно Новое поколение инструментальных средств разработки мобильных HTML 5 приложений 36
Примеры разработки 26. 08. 2014 Установка и настройка Intel XDK. Разработка простых приложений. Запуск на эмуляторе и реальном устройстве 37
Создание простого приложения 26. 08. 2014 Установка и настройка Intel XDK. Разработка простых приложений. Запуск на эмуляторе и реальном устройстве 38
Создайте новый проект c «чистого листа» 26. 08. 2014 Установка и настройка Intel XDK. Разработка простых приложений. Запуск на эмуляторе и реальном устройстве 39
Приложение ничего не делает! 26. 08. 2014 Установка и настройка Intel XDK. Разработка простых приложений. Запуск на эмуляторе и реальном устройстве 40
ПОКА НЕ ОБРАЩАЕМ ВНИМАНИЯ НА НАСТРОЙКИ В ВЕРХНЕЙ ЧАСТИ КОДА Наберите внутри тега <body> Привет, мир! <!DOCTYPE html><!--HTML 5 doctype--> <html> <head> <title>Your New Application</title> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1. 0, maximum-scale=1. 0, minimum-scale=1. 0, user-scalable=0" /> <style type="text/css"> /* Prevent copy paste for all elements except text fields */ * { -webkit-user-select: none; -webkit-tap-highlight-color: rgba(255, 0); } input, textarea { -webkit-user-select: text; } </style> <script src='intelxdk. js'></script> <script type="text/javascript"> /* This code is used to run as soon as Intel activates */ var on. Device. Ready=function(){ //hide splash screen intel. xdk. device. hide. Splash. Screen(); }; document. add. Event. Listener("intel. xdk. device. ready", on. Device. Ready, false); </script> </head> <body> <!-- content goes here-->Привет, мир! </body> </html> 26. 08. 2014 Установка и настройка Intel XDK. Разработка простых приложений. Запуск на эмуляторе и реальном устройстве 41
Приложение в эмуляторе 26. 08. 2014 Установка и настройка Intel XDK. Разработка простых приложений. Запуск на эмуляторе и реальном устройстве 42
Приложение «Часы» 26. 08. 2014 Установка и настройка Intel XDK. Разработка простых приложений. Запуск на эмуляторе и реальном устройстве 43
Часы • Настоящее приложение, которое можно будет использовать! • Отображает текущее время • При повороте устройства автоматически поворачивается 26. 08. 2014 Установка и настройка Intel XDK. Разработка простых приложений. Запуск на эмуляторе и реальном устройстве 44
Необходимо • Создать новый проект из пустого шаблона • Описать тело программы • Задать стиль • Добавить функцию для отображения времени • Сделать отображение времени корректным • Добавить запуск часов в загрузку приложения • Запустить приложение 26. 08. 2014 Установка и настройка Intel XDK. Разработка простых приложений. Запуск на эмуляторе и реальном устройстве 45
Тело программы • В теле документа (внутри тега <body> </body>) добавить строчку <h 1 id="times"> </h 1> 26. 08. 2014 Установка и настройка Intel XDK. Разработка простых приложений. Запуск на эмуляторе и реальном устройстве 46
Задание стиля • В разделе head документа между тегами <style type="text/css"> и </style> добавить #times {color: red; font-size: 50 pt; textalign: center; } 26. 08. 2014 Установка и настройка Intel XDK. Разработка простых приложений. Запуск на эмуляторе и реальном устройстве 47
Функция отображения времени • В разделе head документа между тегами <script type="text/javascript"> и </script> добавить function start. Time(){ var d=new Date(); var h=d. get. Hours(); var m=d. get. Minutes(); var s=d. get. Seconds(); m=Full. Time(m); s=Full. Time(s); document. get. Element. By. Id('times'). inner. HTML=h+": "+m+": "+s; t=set. Timeout('start. Time()', 500); } 26. 08. 2014 Установка и настройка Intel XDK. Разработка простых приложений. Запуск на эмуляторе и реальном устройстве 48
Корректное отображение времени • В разделе head документа между тегами <script type="text/javascript"> и </script> добавить function Full. Time(i){ if (i<10) { i="0" + i; } return i; } 26. 08. 2014 Установка и настройка Intel XDK. Разработка простых приложений. Запуск на эмуляторе и реальном устройстве 49
Добавить запуск часов в загрузку приложения • Изменить тег <body> на <body onload="start. Time()"> • Тело должно выглядеть так: <body onload="start. Time()"> <h 1 id="times"> </h 1> </body> 26. 08. 2014 Установка и настройка Intel XDK. Разработка простых приложений. Запуск на эмуляторе и реальном устройстве 50
Результат работы на эмуляторе 26. 08. 2014 Установка и настройка Intel XDK. Разработка простых приложений. Запуск на эмуляторе и реальном устройстве 51
ПОЛНЫЙ ТЕКСТ ПОЛУЧИВШЕГОСЯ ФАЙЛА <!DOCTYPE html><!--HTML 5 doctype--> <html> <head> <title>Your New Application</title> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1. 0, maximum-scale=1. 0, minimumscale=1. 0, user-scalable=0" /> <style type="text/css"> * { -webkit-user-select: none; -webkit-tap-highlight-color: rgba(255, 0); } input, textarea { -webkit-user-select: text; } #times {color: red; font-size: 50 pt; text-align: center; } </style> <script src='intelxdk. js'></script> <script type="text/javascript"> var on. Device. Ready=function(){intel. xdk. device. hide. Splash. Screen(); }; document. add. Event. Listener("intel. xdk. device. ready", on. Device. Ready, false); function start. Time(){ var d=new Date(); var h=d. get. Hours(); var m=d. get. Minutes(); var s=d. get. Seconds(); m=Full. Time(m); s=Full. Time(s); document. get. Element. By. Id('times'). inner. HTML=h+": "+m+": "+s; t=set. Timeout('start. Time()', 500)} function Full. Time(i){if (i<10) {i="0" + i; }return i; } </script> </head> <body onload="start. Time()"> <h 1 id="times"> </h 1> </body> </html> 26. 08. 2014 Установка и настройка Intel XDK. Разработка простых приложений. Запуск на эмуляторе и реальном устройстве 52
Самостоятельно • Используя HTML и CSS, создайте свои уникальные часы 26. 08. 2014 Установка и настройка Intel XDK. Разработка простых приложений. Запуск на эмуляторе и реальном устройстве 53
Работа с камерой
Захват изображения • intel. xdk. camera. take. Picture(10, true, "png"); Apple i. OS Google Android Microsoft Windows 8 - BETA Microsoft Windows Phone 8 BETA function capture. Camera() { /*this function opens default camera app and captures a picture. It stores the captured image in application storage. Parameters: 1. Quality 1 -100 2. Should stores the picture in photo library of phone also or not 3. Image format png or jpg */ intel. xdk. camera. take. Picture(10, true, "png"); } 27. 08. 2014 Использование Java. Script в мобильной разработке 55
Отображение сделанной фотографии • document. add. Event. Listener("intel. xdk. camera. picture. add", function(event){ //picture name var name = event. filename; //absolute URL of the image var url = intel. xdk. camera. get. Picture. URL(name); //dislay the image document. get. Element. By. Id("picture"). set. Attribute("src", url); }); 27. 08. 2014 Использование Java. Script в мобильной разработке 56
Скачать презентацию Новое поколение средств разработки мобильных приложений ПА РХИМ
intel_xdk_БМФ.pptx