Meetup sencha

25
[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 SENCHA TOUCH Iri Takeshi Mail : [email protected] Twitter : @takitano fb : ExtJs France

Transcript of Meetup sencha

Page 1: Meetup sencha

[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

SENCHA TOUCH

Iri Takeshi Mail : [email protected]

Twitter : @takitano

fb : ExtJs France

Page 2: Meetup sencha

Etat des lieux des outils de débogage, compilation, de déploiement

des applications Sencha Touch / mobiles HTML5.

Sujet …

Page 3: Meetup sencha

Histoire

PhoneGap / Cordova

XDK Intel

XWalk

Conclusion

SOMMAIRE

Page 4: Meetup sencha

A écouter …

Conclusion :

Une application peut ne pas marcher sous Android avec PhoneGap.

Histoire …

IOS Android

Page 5: Meetup sencha

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

Page 6: Meetup sencha

• 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

Page 7: Meetup sencha

- PhoneGap

- Xdk

- Xwalk

Présentation des solutions Debug / Compilation

Page 8: Meetup sencha

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

Page 9: Meetup sencha

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

Page 10: Meetup sencha

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

Page 11: Meetup sencha

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

Page 12: Meetup sencha

2 - Développement de projet

Intégration de Xdk avec Sencha Touch

Page 13: Meetup sencha

3 – Emuler le projet

Intégration de Xdk avec Sencha Touch

Page 14: Meetup sencha

4 – Emuler le projet sur votre mobile

- mode wifi / mobile

- Pusher le projet puis scanner le Qrcode

Intégration de Xdk avec Sencha Touch

Page 15: Meetup sencha

5 – Débugger et profiler le projet sur votre mobile

Intégration de Xdk avec Sencha Touch

Page 16: Meetup sencha

Intégration de Xdk avec Sencha Touch

Page 17: Meetup sencha

5 Compiler le projet

Intégration de Xdk avec Sencha Touch

Page 18: Meetup sencha

Intégration de Xdk avec Sencha Touch

Page 19: Meetup sencha

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

Page 20: Meetup sencha

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

Page 21: Meetup sencha

• 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

Page 22: Meetup sencha

Résumé

PhoneGap XDK Intel Xwalk

Multiplateforme

Plugin Phonegap

Limitation ( < 50Mo)

Pb Android

Debogage

Page 23: Meetup sencha

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

Page 24: Meetup sencha

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 ?

Page 25: Meetup sencha

Question / Réponses ?