SlideShare une entreprise Scribd logo
1  sur  25
Télécharger pour lire hors ligne
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 ?

Contenu connexe

Tendances

L'intégration continue avec Bitrise
L'intégration continue avec BitriseL'intégration continue avec Bitrise
L'intégration continue avec BitriseCocoaHeads France
 
Tuto Phonegap
Tuto PhonegapTuto Phonegap
Tuto PhonegapSUN
 
Prérequis au développement google android
Prérequis au développement google androidPrérequis au développement google android
Prérequis au développement google androidThierry Gayet
 
Coder des jeux en 2D ou 3D sur mobile Android, IPhone ou iPad
Coder des jeux en 2D ou 3D sur mobile Android, IPhone ou iPadCoder des jeux en 2D ou 3D sur mobile Android, IPhone ou iPad
Coder des jeux en 2D ou 3D sur mobile Android, IPhone ou iPadDavid MEKERSA
 
Panorama des solutions mobile hybrides
Panorama des solutions mobile hybridesPanorama des solutions mobile hybrides
Panorama des solutions mobile hybridesekino
 
Presentation clean architecture
Presentation clean architecturePresentation clean architecture
Presentation clean architectureThomas LOMBARD
 
PhoneGap VS Appcelerator
PhoneGap VS AppceleratorPhoneGap VS Appcelerator
PhoneGap VS AppceleratorTiyab K.
 
JPA avec Cassandra, grâce à Achilles
JPA avec Cassandra, grâce à AchillesJPA avec Cassandra, grâce à Achilles
JPA avec Cassandra, grâce à AchillesIppon
 
Phonegap
PhonegapPhonegap
PhonegapVISEO
 
Développement Cross-Platform avec Titanium Mobile
Développement Cross-Platform avec Titanium MobileDéveloppement Cross-Platform avec Titanium Mobile
Développement Cross-Platform avec Titanium MobileXavier Lacot
 
Retour d'expérience développement jeux android
Retour d'expérience développement jeux androidRetour d'expérience développement jeux android
Retour d'expérience développement jeux androidjodem
 

Tendances (14)

L'intégration continue avec Bitrise
L'intégration continue avec BitriseL'intégration continue avec Bitrise
L'intégration continue avec Bitrise
 
Tuto Phonegap
Tuto PhonegapTuto Phonegap
Tuto Phonegap
 
Prérequis au développement google android
Prérequis au développement google androidPrérequis au développement google android
Prérequis au développement google android
 
Coder des jeux en 2D ou 3D sur mobile Android, IPhone ou iPad
Coder des jeux en 2D ou 3D sur mobile Android, IPhone ou iPadCoder des jeux en 2D ou 3D sur mobile Android, IPhone ou iPad
Coder des jeux en 2D ou 3D sur mobile Android, IPhone ou iPad
 
Paug aosp ice-creamsandwich_20120119
Paug aosp ice-creamsandwich_20120119Paug aosp ice-creamsandwich_20120119
Paug aosp ice-creamsandwich_20120119
 
Panorama des solutions mobile hybrides
Panorama des solutions mobile hybridesPanorama des solutions mobile hybrides
Panorama des solutions mobile hybrides
 
Presentation clean architecture
Presentation clean architecturePresentation clean architecture
Presentation clean architecture
 
PhoneGap VS Appcelerator
PhoneGap VS AppceleratorPhoneGap VS Appcelerator
PhoneGap VS Appcelerator
 
JPA avec Cassandra, grâce à Achilles
JPA avec Cassandra, grâce à AchillesJPA avec Cassandra, grâce à Achilles
JPA avec Cassandra, grâce à Achilles
 
Phonegap
PhonegapPhonegap
Phonegap
 
Développement Cross-Platform avec Titanium Mobile
Développement Cross-Platform avec Titanium MobileDéveloppement Cross-Platform avec Titanium Mobile
Développement Cross-Platform avec Titanium Mobile
 
Apache Cordova 3.3 de zéro
Apache Cordova 3.3 de zéroApache Cordova 3.3 de zéro
Apache Cordova 3.3 de zéro
 
React xp
React xpReact xp
React xp
 
Retour d'expérience développement jeux android
Retour d'expérience développement jeux androidRetour d'expérience développement jeux android
Retour d'expérience développement jeux android
 

Similaire à Meetup sencha

Gtug2 Mobile app with web technlogy
Gtug2 Mobile app with web technlogyGtug2 Mobile app with web technlogy
Gtug2 Mobile app with web technlogySacha Leprêtre
 
Windows Phone 8 for Business - Developer Talks
Windows Phone 8 for Business - Developer TalksWindows Phone 8 for Business - Developer Talks
Windows Phone 8 for Business - Developer TalksJean-Sébastien Dupuy
 
Débuter avec phonegap (APACHE CORDOVA) dans eclipse pour android
Débuter avec phonegap (APACHE CORDOVA) dans eclipse pour androidDébuter avec phonegap (APACHE CORDOVA) dans eclipse pour android
Débuter avec phonegap (APACHE CORDOVA) dans eclipse pour androidBosco Basabana
 
Jug Lausanne Android Janvier2013
Jug Lausanne Android Janvier2013Jug Lausanne Android Janvier2013
Jug Lausanne Android Janvier2013jeromevdl
 
Ch1. Développement mobile
Ch1. Développement mobileCh1. Développement mobile
Ch1. Développement mobileHaifa Chorfi
 
Hackathon Android Abidjan
Hackathon Android  AbidjanHackathon Android  Abidjan
Hackathon Android AbidjanBacely YoroBi
 
Conférence Titanium + Alloy au JUG Montpellier
Conférence Titanium + Alloy au JUG MontpellierConférence Titanium + Alloy au JUG Montpellier
Conférence Titanium + Alloy au JUG MontpellierDamien Laureaux
 
Passage aux applications mobiles
Passage aux applications mobilesPassage aux applications mobiles
Passage aux applications mobilesneuros
 
Les défis d’une application mobile multi-périphériques avec HTML5
Les défis d’une application mobile multi-périphériques avec HTML5Les défis d’une application mobile multi-périphériques avec HTML5
Les défis d’une application mobile multi-périphériques avec HTML5davrous
 
Programmation Android - 01 - Introduction
Programmation Android - 01 - IntroductionProgrammation Android - 01 - Introduction
Programmation Android - 01 - IntroductionYann Caron
 
Construire une PWA connectée à WordPress
Construire une PWA connectée à WordPressConstruire une PWA connectée à WordPress
Construire une PWA connectée à WordPressBenjamin LUPU
 
Tech conf1 développement_natif_applications_mobiles
Tech conf1 développement_natif_applications_mobilesTech conf1 développement_natif_applications_mobiles
Tech conf1 développement_natif_applications_mobilesTelecomValley
 
Introduction à web assembly
Introduction à web assemblyIntroduction à web assembly
Introduction à web assemblyJérémy Buget
 

Similaire à Meetup sencha (20)

Gtug2 Mobile app with web technlogy
Gtug2 Mobile app with web technlogyGtug2 Mobile app with web technlogy
Gtug2 Mobile app with web technlogy
 
Cours cordova & REST
Cours cordova & RESTCours cordova & REST
Cours cordova & REST
 
Formation mobile-cross-platform
Formation mobile-cross-platformFormation mobile-cross-platform
Formation mobile-cross-platform
 
Windows Phone 8 for Business - Developer Talks
Windows Phone 8 for Business - Developer TalksWindows Phone 8 for Business - Developer Talks
Windows Phone 8 for Business - Developer Talks
 
Débuter avec phonegap (APACHE CORDOVA) dans eclipse pour android
Débuter avec phonegap (APACHE CORDOVA) dans eclipse pour androidDébuter avec phonegap (APACHE CORDOVA) dans eclipse pour android
Débuter avec phonegap (APACHE CORDOVA) dans eclipse pour android
 
Android introvf
Android introvfAndroid introvf
Android introvf
 
Développement web mobile avec IONIC 2
Développement web mobile avec IONIC 2Développement web mobile avec IONIC 2
Développement web mobile avec IONIC 2
 
Jug Lausanne Android Janvier2013
Jug Lausanne Android Janvier2013Jug Lausanne Android Janvier2013
Jug Lausanne Android Janvier2013
 
Ionic
IonicIonic
Ionic
 
Intro Android
Intro AndroidIntro Android
Intro Android
 
Programmation sous Android
Programmation sous AndroidProgrammation sous Android
Programmation sous Android
 
Ch1. Développement mobile
Ch1. Développement mobileCh1. Développement mobile
Ch1. Développement mobile
 
Hackathon Android Abidjan
Hackathon Android  AbidjanHackathon Android  Abidjan
Hackathon Android Abidjan
 
Conférence Titanium + Alloy au JUG Montpellier
Conférence Titanium + Alloy au JUG MontpellierConférence Titanium + Alloy au JUG Montpellier
Conférence Titanium + Alloy au JUG Montpellier
 
Passage aux applications mobiles
Passage aux applications mobilesPassage aux applications mobiles
Passage aux applications mobiles
 
Les défis d’une application mobile multi-périphériques avec HTML5
Les défis d’une application mobile multi-périphériques avec HTML5Les défis d’une application mobile multi-périphériques avec HTML5
Les défis d’une application mobile multi-périphériques avec HTML5
 
Programmation Android - 01 - Introduction
Programmation Android - 01 - IntroductionProgrammation Android - 01 - Introduction
Programmation Android - 01 - Introduction
 
Construire une PWA connectée à WordPress
Construire une PWA connectée à WordPressConstruire une PWA connectée à WordPress
Construire une PWA connectée à WordPress
 
Tech conf1 développement_natif_applications_mobiles
Tech conf1 développement_natif_applications_mobilesTech conf1 développement_natif_applications_mobiles
Tech conf1 développement_natif_applications_mobiles
 
Introduction à web assembly
Introduction à web assemblyIntroduction à web assembly
Introduction à web assembly
 

Meetup sencha

  • 1. 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
  • 2. Etat des lieux des outils de débogage, compilation, de déploiement des applications Sencha Touch / mobiles HTML5. Sujet …
  • 3.  Histoire  PhoneGap / Cordova  XDK Intel  XWalk  Conclusion SOMMAIRE
  • 4. A écouter …  Conclusion : Une application peut ne pas marcher sous Android avec PhoneGap. Histoire … IOS Android
  • 5. 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
  • 6. • 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
  • 7. - PhoneGap - Xdk - Xwalk Présentation des solutions Debug / Compilation
  • 8. 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
  • 9. 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
  • 10. 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
  • 11. 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
  • 12. 2 - Développement de projet Intégration de Xdk avec Sencha Touch
  • 13. 3 – Emuler le projet Intégration de Xdk avec Sencha Touch
  • 14. 4 – Emuler le projet sur votre mobile - mode wifi / mobile - Pusher le projet puis scanner le Qrcode Intégration de Xdk avec Sencha Touch
  • 15. 5 – Débugger et profiler le projet sur votre mobile Intégration de Xdk avec Sencha Touch
  • 16. Intégration de Xdk avec Sencha Touch
  • 17. 5 Compiler le projet Intégration de Xdk avec Sencha Touch
  • 18. Intégration de Xdk avec Sencha Touch
  • 19. 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
  • 20. 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
  • 21. • 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
  • 22. Résumé PhoneGap XDK Intel Xwalk Multiplateforme Plugin Phonegap Limitation ( < 50Mo) Pb Android Debogage
  • 23. 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
  • 24. 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 ?