meetup sencha

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 ?