contact@activbrowser.com
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
SENCHA TOUCH
Iri Takeshi
Mail : tiri@activbrowser.com
Twitter : @takitano
fb : ExtJs France

Etat des lieux des outils de débogage, compilation, de déploiement
des applications Sencha Touch / mobiles HTML5.
Sujet …

 Histoire
 PhoneGap / Cordova
 XDK Intel
 XWalk
 Conclusion
SOMMAIRE

A écouter …
 Conclusion :
Une application peut ne pas marcher sous Android avec PhoneGap.
Histoire …
IOS Android

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/)
Diagnostique

- PhoneGap
- Xdk
- Xwalk
Présentation des solutions Debug / Compilation

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

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
Phonegap avec Sencha Touch

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
XDK Intel

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

Intégration de Xdk avec Sencha Touch

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

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é.
Xwalk avec Sencha Touch

Résumé
PhoneGap XDK Intel Xwalk
Multiplateforme
Plugin Phonegap
Limitation ( < 50Mo)
Pb Android
Debogage

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

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)
La suite ?

Question / Réponses ?