Использование Intel XDK для разработки гибридного мобильного приложения

{title}

Сначала мы загрузим инструмент Intel XDK, инструмент работает в Windows, Linux и Mac OS, вы попросите нас создать учетную запись пользователя на веб-сайте Intel XDK, зарегистрировать нас. В Linux мы устанавливаем распаковываемый файл и затем выполняем следующую команду с конца:

 sh ./install.sh 

{title}


Установщик проверит, что необходимые требования и зависимости выполнены, в противном случае он попросит нас установить их. Мы продолжаем шаги до конца. Когда мы запускаем программное обеспечение в первый раз, нас попросят создать учетную запись пользователя на веб-сайте Intel для разработчиков, которая предоставит нам имя пользователя и пароль для доступа к программному обеспечению, для регистрации мы должны перейти по следующей ссылке: //software.int .. .ion /? lang = en-us

{title}


Затем мы запускаем программное обеспечение Intel XDK, оно покажет нам окно презентации.

{title}


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

{title}


Приложение представляет собой среду разработки для гибридных приложений HTML5, которую можно использовать как в качестве веб-сайта, так и для мобильных устройств, и позволяет создавать и тестировать приложения на таких платформах, как Android и IO. Он предоставляет шаблоны кода для создания новых приложений, которые взаимодействуют с датчиками, ускорителями, камерами и другими компонентами каждого устройства.

{title}


Мы идем в раздел Шаблоны в левой части экрана, где мы найдем шаблоны для начала нового проекта. У нас есть три типа белого, дизайн и пользовательский интерфейс и игры.

Пустые проекты


Стандартный HTML5: этот тип шаблона предназначен для проектов, использующих HTML5, JavaScript, Jquery, и вы также можете использовать стандартный HTML W3C, но он не поддерживает использование Apache Cordova. Он может быть развернут как гибридное пакетное приложение на многих платформах, таких как Android, iOS и Microsoft Windows 8, или как веб-сайт на хостинг-сервере.
HTML5 и Apache Cordova: этот тип шаблона предназначен для проектов, использующих HTML5, JavaScript, Jquery, и позволяет использовать плагины Apache Cordova. Используется в мобильных устройствах. В другом уроке мы увидели, как создавать собственные веб-приложения на Android с помощью Apache Cordova.

{title}

Дизайн и проект пользовательского интерфейса (Layout и User Interface)


Шаблоны Design и user interface представляют некоторые формы навигации, которые пользователь может использовать, и показывают их в предварительном просмотре, эмулирующем мобильное устройство.
После выбора варианта дизайна или интерфейса, который мы будем использовать, Intel XDK сгенерирует исходный код и общий дизайн для нашего приложения. Это позволяет нам без особых усилий создавать и тестировать различные пользовательские интерфейсы и быстро тестировать, какой из них наиболее подходит для приложения, которое мы хотим разработать.

{title}

Игровые проекты (Игры)


В этом разделе мы можем создавать игры. Различные библиотеки и движки, разработанные на JavaScript, помогают нам создавать игры на HTML5 и Jquery с помощью множества проверенных и функциональных инструментов.
Мы можем выбрать любую из опций и начать пример с библиотеки шаблонов, и другие зависимости автоматически включаются в проект.
При запуске игрового проекта на Intel XDK мы должны выбрать, какой фреймворк или игровой движок мы будем использовать. Некоторые движки: Cocos2d, Phaser, Pixi и EaselJS.
В разделе «Образцы и демонстрации» мы также можем видеть примеры проектов с их исходным кодом, как приложений HTML5, так и готовых игр.

{title}

$config[ads_text5] not found
Мы создадим мобильный проект с выпадающим меню. Для этого мы выбираем из раздела «Шаблоны», затем «Дизайн и пользовательский интерфейс», а затем опцию «Приложение бокового меню». В правой части эмулятора мы видим образец бокового меню и приложения, как это будет выглядеть на мобильном устройстве.,

{title}


Мы нажимаем «Продолжить», и вы спросите у нас название нашего проекта.

{title}


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

$config[ads_text6] not found

{title}


В принципе, в двух верхних левых вкладках CODE мы укажем, где находится исходный код и DESIGN для представления дизайна, которое мы видим сегодня, как дизайн.
В левом столбце мы видим Рабочие файлы, которые показывают нам список всех конфигураций для различных устройств. Тогда у нас есть ТЕМЫ, где мы можем выбрать тип устройства, для которого мы проектируем. Ниже у нас есть КОНТРОЛЬ, который является элементами управления, которые мы можем перетащить на экран нашего приложения.
В центре у нас есть экран приложения, а справа - таблица свойств используемых нами элементов управления.
Если мы перейдем на вкладку CODE, мы увидим, что это HTML5 и файлы Jquery и Javascript, которые находятся в каталоге нашего приложения.

{title}


Мы переходим на вкладку EMULATE и можем эмулировать наше приложение на разных устройствах, например, мы эмулируем наше приложение на Iphone 6 с IOS.

{title}


Затем из устройства в левом столбце мы можем изменить устройство для эмуляции приложения на другой платформе, например, Samsung Galaxy S mobile с Android.

{title}


Таким образом, мы можем протестировать наше приложение на разных устройствах. Очень интересным вариантом является то, что на вкладке DEBUG мы можем протестировать приложение напрямую с нашего мобильного телефона, подключенного через USB.
На вкладках PROFILE он объясняет различные способы подключения usb для тестирования нашего приложения. Затем у нас есть вкладка BUILD или Build, на которой расположены процессы для компиляции нашего приложения.

{title}


Наконец приложение скомпилировано для устройства, которое мы указываем в данном случае Android, и мы можем загрузить его прозрачно со всеми данными результата компиляции, поэтому мы вернем файл Examplexdk1.android.apk, это также дает нам возможность загрузить его в Google Play Store.
Мы создали новый проект с INTEL XDK, мы наблюдаем, что фреймворки, поддерживающие платформу XDK. Intel XDK может использовать Ionic Framework, который мы видели в предыдущем руководстве. Разработка мобильных приложений с помощью Ionic Framework, который также используется для разработки гибридных приложений, что экономит нам много времени на разработку.
Intel XDK - это идеальный инструмент для визуального использования Ionic и выполнения кодирования с нуля, обеспечивающий ответственное проектирование нашего приложения для различных разрешений и устройств.
В итоге для использования Intel XDK нам нужно:
  • Загрузите, установите и запустите Intel XDK.
  • Создайте проект Intel XDK, выберите тип проекта с учетом платформ, на которые мы хотим распространить приложение.
  • На вкладке «Эмуляция» или «Эмулятор» можно запустить приложение в режиме предварительного просмотра, чтобы убедиться, что файлы приложения работают хорошо на одном или нескольких устройствах.
  • На вкладке «Сборка» или «Сборка» упакуйте приложение для распространения в хранилище приложений. Например, Google Play Store.
Расширенное программирование гибридных приложений будет обсуждаться в других руководствах, где мы углубим использование Intel XDK и узнаем, как мы можем использовать преимущества различных компонентов и функций, которые предоставляют нам мобильные устройства.

  • 0