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 ?