IDF Session Presentation Template
Total Page:16
File Type:pdf, Size:1020Kb
Intel® XDK для разработки кросс-платформенных мобильных приложений 1 Intel® XDK HTML5 Cross-Platform Development Environment Olga Mineeva – Product Validation Engineer, Intel Corporation 2 Topics to be Covered • HTML5 Apps - Why Would You Want to do That? • Apache Cordova* – the Bridge to Native API’s • What is the Intel® XDK? • Crosswalk Project for Consistent Behavior • Debugging and Profiling your App 3 Обзор мобильных систем 4 4 Тенденция развития 5 5 Средства быстрого прототипирования интерфейсов мобильных приложений • Бумага и ручка • Flinto (от $8 в месяц) • InVision (бесплатно / $15 в месяц) • Proto.io (бесплатно / $24 в месяц) • Marvel (бесплатно) • Codiqa (от $16 в месяц) • UXPin ($14.99 в месяц) • FluidUI (от $12 в месяц) 6 6 Native apps development means... 7 7 …walled gardens systems 8 8 Что общего между этими платформами? Google* Microsoft* Mozilla* Apple* iOS* BlackBerry* Tizen* Android* Windows* Phone Firefox* OS Platform code Open source, released to Open source, code released open source Closed, code released during Closed, after first Development controlled Closed, controlled during development. controlled commercial model by by Microsoft development; Controlled by by Apple device ships; Blackberry controlled by Tizen TSG, co- key pieces are Mozilla chaired by Intel Google and Samsung proprietary C/C++; Java; some Objective C; C/C++; managed HTML5 in C/C++; HTML5 HTML5 in (C#, JavaScript); APIs browser HTML5 in HTML5 only preferred; browser and HTML5 in browser and hybrid; browser and C/C++ hybrid and hybrid Java hybrid Architecture ARM only ARM only ARM and x86 ARM only ARM only ARM and x86 support OEM and Leading 1 OEM, Many OEMs, Limited OEMs, Supported by service Many OEMs, OEM, broad good SP broad SP good SP leading OEM, provider broad SP support SP support support support support good SP support support Device Smartphone, Smartphone, Smartphone Smartphone, Entry categories Smartphone, tablet tablet IVI, TV, tablet, TV , tablet tablet, TV smartphone supported PC 9 9 HTML5 - это спецификация • HyperText Markup Language, version 5 Что нового: 10 10 HTML5 - новое поколение веб-стандартов 11 11 Why HTML5 Apps? HTML5 is the language of the web. Used by millions of developers! Allows developers to build apps …that can be distributed in using web skills and tools… native app stores. 12 Native vs. Web Apps Native Apps Single Advanced UI interactions Platform Smoothest performance App store distribution Partial Full Capabilities Capabilities Web Apps Web developer skills Instant updates Unrestricted distribution Multiple Platforms 13 Hybrid HTML5 App Advantage Native Apps Single Advanced UI interactions Platform Smoothest performance App store distribution Partial Full Capabilities Capabilities Web Apps Hybrid HTML5 Apps Web developer skills Web developer skills Instant updates Access to native platform Unrestricted distribution App store distribution Multiple Platforms 14 Cordova* Bridges the HTML5 to Native Gap HTML5 Programming Native Programming HTML5 App Hybrid HTML5 App Native App Browser Accessed Downloadable via Stores Downloadable via Stores HTML5 based HTML5 based Native user experience Limited device API access Access to device APIs thru Cordova* Full device APIs access 15 Mobile HTML5 Web App Block Diagram HTML5 Web App Mobile Browser RestrictedDevice Device Libraries Access Mobile Device OS 16 Mobile Hybrid HTML5 WebView App Diagram Hybrid Extension HTML5 Bridge WebView App Device Libraries Native WebView Mobile Device OS 17 Intel® XDK Cordova* Development Environment Create Code Preview Debug Build Code Samples HTML5 Code Editor Emulator CPU & Memory Profiling One click app packaging Cordova* plugin management Visual App Designer Live on-device display of edits JavaScript* debugging Streamlined developer workflow Easily reach Advanced and easy-to-use tools to and building blocks for crafting across many help perfect the mobile apps great app experiences app stores 18 Android* WebView Problem 19 The Android* WebView Problem System WebView Chromium* 43+ Chromium 30 & 33 Non-Chromium Chrome* Browser https://developer.android.com/about/dashboards/index.html Chromium 43+ Data collected during a 7-day period ending on June 1, 2015. Any versions with less than 0.1% distribution are not shown. Consistent HTML5 App Behavior Default Android* WebViews Crosswalk Project WebViews Crosswalk Project enables consistent behavior on Android 4.0+ devices 21 Intel® XDK Demo 22 Demo: Mobile App Design Tools 23 Intel® XDK Demo: Ripple Emulator 24 Intel® XDK Demo: App Preview 25 Intel® XDK Demo: Remote Debugging 26 Intel® XDK Demo: Remote Debugging 27 Intel® XDK Demo: Application Profiling 28 Intel® XDK Users and Builds – Trendlines November, 2013 (Crosswalk build intro) through mid July, 2015 Intel® XDK Active Users per Week, Trend Intel® XDK Builds per Week, Trend Android* Crosswalk iOS* Windows® 8 Windows Phone 29 Ten Reasons to Use the Intel® XDK 1. Integrated tools All in one toolset to easily build mobile apps with a single codebase 2. One click packaging Build system makes it easy to reach more stores and customers 3. Flexible developer experience Use the integrated editor or your own editor, such as Sublime*, with the Intel® XDK 4. Visual mock ups Drag & drop GUI designer to help lay out your apps UX 5. Add web services RESTful web services support integrated 6. Real-time on-device preview “Live Layout Editing” see layout code changes in real-time 7. Debug & Profiling App Preview and on-device debugging 8. Device API support Seamless Cordova* 4.x support and plug-in management support 9. Performance Latest Crosswalk Project webview for your Android* apps 10. Cost effective tools Free to use, no royalties or restrictions on your apps 30 https://software.intel.com/en-us/android/app-testing 31 Download Intel® XDK xdk.intel.com 32 32 Download Intel® App Preview Onto Your Device Android* Windows® 8 Apple* iOS* bit.ly/1i8VEgl bit.ly/1j8rxdJ bit.ly/1a3W7Bk Проблемы со сканированием? Попробуй Google Goggles* или RedLaser* Barcode. 33 How to Create Your First HTML5 Mobile App with Intel® XDK www.youtube.com/watch?v=_4PF79XZWxg 34 34 “Things” 35 Intel® XDK IoT Edition • IoT App • Companion App - Program device with Node.js* - Full Intel XDK Capability - Remote debug in Intel® XDK - Mobile Device IoT device - Wireless connection . Wireless - http server - Interact/Control IoT device with - Socket server mobile device 36 Q&A • HTML5 Apps - Why Would you Want to do That? • Apache Cordova* – the Bridge to Native API’s • What is the Intel® XDK? • Crosswalk Project for Consistent Behavior • Debugging and Profiling Your App • The Intel XDK and IoT 37 What will you develop? 38 Legal Notices and Disclaimers Intel technologies’ features and benefits depend on system configuration and may require enabled hardware, software or service activation. Learn more at intel.com, or from the OEM or retailer. No computer system can be absolutely secure. Tests document performance of components on a particular test, in specific systems. Differences in hardware, software, or configuration will affect actual performance. Consult other sources of information to evaluate performance as you consider your purchase. For more complete information about performance and benchmark results, visit http://www.intel.com/performance. Cost reduction scenarios described are intended as examples of how a given Intel-based product, in the specified circumstances and configurations, may affect future costs and provide cost savings. Circumstances will vary. Intel does not guarantee any costs or cost reduction. This document contains information on products, services and/or processes in development. All information provided here is subject to change without notice. Contact your Intel representative to obtain the latest forecast, schedule, specifications and roadmaps. Statements in this document that refer to Intel’s plans and expectations for the quarter, the year, and the future, are forward-looking statements that involve a number of risks and uncertainties. A detailed discussion of the factors that could affect Intel’s results and plans is included in Intel’s SEC filings, including the annual report on Form 10-K. The products described may contain design defects or errors known as errata which may cause the product to deviate from published specifications. Current characterized errata are available on request. No license (express or implied, by estoppel or otherwise) to any intellectual property rights is granted by this document. Intel does not control or audit third-party benchmark data or the web sites referenced in this document. You should visit the referenced web site and confirm whether referenced data are accurate. Intel and the Intel logo are trademarks of Intel Corporation in the United States and other countries. *Other names and brands may be claimed as the property of others. © 2015 Intel Corporation. 39 Домашнее задание • Установить Intel® XDK • Создать своё собственное мобильное приложение • Прислать рабочий результат .xdk и .apk • Написать отчёт в свободной форме: - какова была основная идея - С какими проблемами столкнулись - Как их разрешили - Скриншоты - Что понравилось/не понравилось в среде разработки 40 Backup 41 Crosswalk External Extensions JS Extension Custom Native Apache Cordova* Runtime Model Framework APIs Framework * Manifest Parsing SysApps APIs Tizen* APIs etc. Chromium Core Extensions Chromium + Cordova Cross-platform Content Module content rendering in sandboxed Blink Web Engine Network Stack libraries (base,