sencha touch
Transcription
sencha touch
SENCHA TOUCH Iri Takeshi Mail : [email protected] Twitter : @takitano fb : ExtJs France [email protected] www.activbrowser.com Fax : +33 (0)1 75 60 14 69 14 rue de silly 92100 Boulogne-Billancourt France Phone : +33 (0)1 45 65 50 60 Sujet … Etat des lieux des outils de débogage, compilation, de déploiement des applications Sencha Touch / mobiles HTML5. SOMMAIRE Histoire PhoneGap / Cordova XDK Intel XWalk Conclusion Histoire … A écouter … IOS Android Conclusion : Une application peut ne pas marcher sous Android avec PhoneGap. Diagnostique Symptômes : • Ne fonctionne pas sous Android (LG / Samsung) • Fonctionne sous tous les navigateurs desktop • Pas de bug Js • Fonctionne sous IOS => Problème de WebView Android. Composant non supporté par la WebView Android (4.4) • WebGL • WebRTC • WebAudio • FullScreen • Form validation Diagnostique • Avec quelque recherche… From Google’s perspective, Android Browser sounds much like IE6 and nobody wants to talk about it. They give us the idea that Chrome has been powering web browsing in Android for a while, but that is only true for some particular Android devices - Nexuses and devices from top manufactures. However, as I’ve mentioned before, the relationship between users browsing with Android Browser and Chrome is still 7 to 1. Don’t get so excited. We will deal with the old Web View (known as “classic”) for a couple of years. In fact, some devices such as Galaxy Nexus that are today on 4.3 will not get the update. And remember that still today 30% of Android users are on 2.x after 2 years of being replaced by 4.0, so it’s fair to guess that at the beginning of 2016 we will still have around a third of the users on the “classic” WebView that we hate today. The migration on the market will be slow based on Android’s fragmentation. Maximiliano Firtman (http://java.dzone.com/) Présentation des solutions Debug / Compilation - PhoneGap - Xdk - Xwalk PhoneGap Présentation Phonegap est un framework open-source développé par Adobe Systems et basé sur Apache Cordova. Il permet de créer des applications mobiles pour différentes plateformes (Android, iOS, Windows Phone...) en HTML, CSS et JavaScript. (wikipedia) Fonctionne très bien avec un projet Sencha Touch Avantage + Multiplateforme mobile (IOS/Android/WindowPhone …) + Nombreux plugins et rapide à intégrer + Aucune limitation en taille et nombre des projets Inconvénient - Debug n’est pas aisé - Problème sous Android Phonegap avec Sencha Touch Installation de PhoneGap: • Installation de Java JDK 7 • Installation de NodeJs • Installation de Ant 1.9 • Variables environnements à configurer • npm install -g phonegap • npm install -g plugman Instance Phonegap pour le projet Sencha Touch • sencha phonegap init [AppID] • Déterminer les platformes de votre projets dans le fichier phonegap.local.poperties • Valider le contenu de packager.json • sencha app build -run native XDK Intel Présentation XDK est in IDE cross-plateforme pour le développement d’application mobile. Il embarque un IDE, débogeur, testeur, émulateur, compilateur pour les principaux OS mobile. 17 modèles pour l’émulateur. Avantage + Multiplateforme + Pas de soucis sous Android + Outils de débogage Inconvénient - Plugin Phonegap - Limitation à 50 Mo par projet Intégration de Xdk avec Sencha Touch 1 - Création de projet Xdk • Si vous commencez un nouveau projet, alors importez la librairie Sencha Touch, créer un projet sencha touch dans le répertoire de projet. • Si vous voulez importer un projet existant, pointez vers le répertoire ou il y a le fichier index.html. • Ajouter la balise le plus haut possible <script src='intelxdk.js'></script>, dans le fichier index.html • Ajouter la balise pour le débogage fournit dans l’onglet Test avant la balise fermante </body> Intégration de Xdk avec Sencha Touch 2 - Développement de projet Intégration de Xdk avec Sencha Touch 3 – Emuler le projet Intégration de Xdk avec Sencha Touch 4 – Emuler le projet sur votre mobile - mode wifi / mobile - Pusher le projet puis scanner le Qrcode Intégration de Xdk avec Sencha Touch 5 – Débugger et profiler le projet sur votre mobile Intégration de Xdk avec Sencha Touch Intégration de Xdk avec Sencha Touch 5 Compiler le projet Intégration de Xdk avec Sencha Touch XWalk Présentation Xwalk sur Android permet de passer d’une application web en application mobile Android (apks) grâce à un ensemble d’outil et une couche Java (python). Développé par Zhu, Yongsheng. Utiliser uniquement la version 4.32 ! Avantage + Aucune limitation en taille et nombre des projets + Pas de soucis sous Android Inconvénient - N’est pas multiplateforme - Plugin Phonegap - Pas de débugeur Xwalk avec Sencha Touch Doc : https://crosswalk-project.org Fonctionne sous Ubuntu 12.10 ou Windows 7 64 bits Installation de l’environnement • Installer (curl, unzip, tar, gzip; used to install other tools) • Installer Python. • Installer the Oracle Java Development Kit (JDK 7 SE). • Installer Ant. (1.9) • Installer Android SDK (activer le haxm) • configurer les variables d'environnement • vérifier les installes Installation de Xwalk et projet Sencha Touch • Télécharger la version 4.32 de Xwalk et dézipper le tout dans votre répertoire de projet • dé TarGZ les sous répertoires xwalk_app_template et xwalk_core_template. • Créer au même niveau le répertoire du projet sencha Touch Xwalk avec Sencha Touch • Créer le fichier manifest.json dans le répertoire du projet sencha et mettre le contenu suivant: { "name": "KitchenSink", "version": "0.0.0.1", "app": { "launch":{ "local_path": "index.html" } }, "icons": { "128": "icon.png" }, "package": « con.example.kitchen" } • Assurer la présence du fichier icon.png (128px) Compilation • Se placer dans le répertoire xwalk_app_template • python make_apk.py --manifest=C:/dev/workspace/xwalk/ SenchaTouchProjet /manifest.json • Le fichier simple_arm.apk est généré. Le mettre sur le mobile ou le publié. Résumé PhoneGap Multiplateforme Plugin Phonegap Limitation ( < 50Mo) Pb Android Debogage XDK Intel Xwalk Taille de l’application Kitchen Sink Compilation Android Taille Xdk Android Native 28,73Mo PhoneGap 2,66Mo Xwalk ARM 56,95Mo Xwalk X86 21,62Mo La suite ? Effervescence importante afin de résoudre les problématique de Android: • • • • • • SDK Android (pour le dev Java) Xdk Xwalk GeckoView (en cours …) ChromeView by thedracle (mort depuis juillet 2013) Xwalk ( version 6 compatible avec Cordova) Question / Réponses ?