Accéder à localhost avec l’émulateur Genymotion

Si vous ne connaissez pas Genymotion c’est à essayer d’urgence. Il s’agit d’un émulateur Android basé sur VirtualBox, qui fonctionne aussi bien que l’émulateur « officiel ».

En beaucoup plus rapide ! Plus besoin d’aller se faire un café à chaque fois qu’on lance une app ou d’acheter un pc surpuissant juste pour faire tourner l’émulateur.

Etant basé sur VirtualBox, il y’a quelques particularités notamment au niveau de la config réseau. Sur l’émulateur pour accéder à localhost il suffit de taper localhost, ça marche. Avec Genymotion, voici comment procéder :

Sur Mac OS, il faut ouvrir le Terminal et taper :

ifconfig vboxnet0

Ce qui devrait retourner quelque chose comme ça :

 

Il suffit d’utiliser cette IP sur l’émulateur pour accéder à localhost.

 

Par exemple si vous y accédez d’habitude avec localhost:8888  il faut utiliser  192.168.56.1:8888

Ca peut servir par exemple pour débugger une web app avec Weinre.

Un plugin PhoneGap / Cordova pour décompresser des zip

Le Github/readme c’est par ici :

https://github.com/MobileChromeApps/zip

 

Et pour installer il suffit de faire ça

 

Ca s’utilise comme ça :

 

Ca peut être utile pour télécharger plusieurs fichiers d’un coup sans avoir à lancer de multiples FileTransfer avec PhoneGap.

Afficher un indicateur de progression de téléchargement avec PhoneGap

C’est pas très compliqué avec la propriété onprogress de l’objet fileTransfer de PhoneGap, il suffit de quelques lignes :

Et si vous avez besoin d’inspiration pour l’indicateur de progression, il y’a quelques beaux exemples ici.

 

 

Intercepter un évènement swipe sur un panel avec Sencha Touch

Et avec Sencha Architect, il faudra utiliser au préalable l’évènement onPanelPainted :

sencha architect listen swipe event

Debugger facilement des applications & sites mobiles

Pour débugger des applications PhoneGap ou des sites mobiles en temps réel  avec l’inspecteur Webkit, rien de plus simple.

debug.phonegap.com

La première solution, très simple, c’est d’utiliser debug.phonegap.com, tout est expliqué sur la page.

debug-phonegap-com

Mais debug.phonegap.com peut desfois s’avérer très lent.

Weinre

On peut alors utiliser  la même chose que phonegap, ça s’appel Weinre (à prononcer comme le mot « winery » ou « weiner » en anglais, au choix).

weinre-screenshot

C’est très simple à mêtre ne place :

Si ce n’est pas déja fait, Il faut installer Node.js, par ici http://nodejs.org/download

Une fois que Node.js est installé, sur mac ou linux, ouvrir le terminal et copier/coller ceci

sudo npm install -g weinre

-g signifie installation globale, c’est plus judicieux, vu qu’il s’agit d’un outil qui resservira très probablement pour d’autres projets

ça y’est weinre est installé on peut lancer le serveur en tapant

weinre --boundHost -all-

–boundHost -all- pour pouvoir accéder au serveur depuis un appareil qui n’aura pas la même IP. L’appareil doit se trouver sur le même réseau local.

Il ne reste plus qu’a insérer ceci dans la page qu’on veut débugger (index.html par exemple)

<script src="http://localhost:8080/target/target-script-min.js#anonymous"></script>

puis de se rendre à l’adresse

http://localhost:8080/client/#anonymous

On peut remplacer #anonymous par n’importe quoi, du moment qu’on le change dans l’adresse du script et dans l’url.

Et voila on peut maintenant facilement débugger un site mobileou une application Phonegap ou Trigger.io

Tapez alert('test')  dans la console pour essayer.

Et si o nsouhaite pouvoir fermer le terminal sans arrêter le serveur Weinre, nohup est là pour ça.

nohup weinre --boundHost -all-

Adobe Edge Inspect

adobe-edge-inspect-website-screenshot

La troisième solution, un tout petit peu plus simple mais aussi la plus chère, est d’utiliser Adobe Edge Inspect qui consiste en une application windows, mac , accompagnée d’une application iOS, Android ou Kindle et d’une extension Chrome. (Nécessite de s’inscrire à Adobe Creative Cloud. 1mois gratuit puis 60€/par mois).

 

Trigger.io simplifie le développement d’applications hybrides

trigger.io example hojoki dk

La jeune start-up trigger.io (anciennement forge) qui à déja reçu un million de dollars d’investiment de business angels et venture capitals, éspère bien rendre la vie des développeurs plus facile et réduire le temps et la complexité de dévelopement des applications mobiles.

A l’instar de Phonegap, Appcelerator et Sencha Touch Trigger.io offre la possibilité  de développer des applications mobiles cross-platform avec les languages web, html, css et javascript.

Trigger.io innove de pusieurs façons :

  • Un « bridge » web <-> natif très performant sur iOS et jusqu’a 5x plus rapide sur Android.
  • Des modules écrit en javascript et compilés en language natif, tab bar, top bar. Qui procure un « native-feel » et une amélioration des performances.
  • Débuggage facile des applications, simplement basé sur weinre mais ça fait toujours une chose de moins à configurer.
  • La compilation s’effectue sur les serveurs de Trigger.io, on peut maintenant déveloper des applications iOS sur windows.
  • Trigger.io Reload qui permet de pusher des modifications après soumission à l’App Store et Google Play.

Trigger.io s’associe très bien avec backbone ou angular et ça donne de belle application qui ressemble à s’y méprendre à du natif. Voici quelques exemples d’applications déjà publiés sur les stores.

Quel framework UI choisir pour une application mobile web ou hybride?

Qu’on choisisse de développer une application mobile avec phonegap, trigger.io ou un site mobile « Single Page Application » , on ne le développe pas de la même façon qu’un site internet classique, le site ou application doit ressembler à une application native.

Ressembler à une application native ça veut dire : s’adapter sur smartphones et tablettes, avec la possibilité d’avoir un layout différent selon l’appareil, être constitué de plusieurs pages qui prennent tout l’espace disponible sur l’écran, des transitions avec accélération hardware, des side menus à la Facebook, des longues liste scrollables avec de bonnes performances, de l’inertie et un effet de rebond à la fin, du pull-to-refresh façon twitter, des boutons et des sliders assez gros pour pouvoir être utilisé sur un smartphone, etc.

Après avoir choisi son framework de base qui gèrera toute la logique et la structure de l’application (backbone, ember, angular), il convient donc de choisir un framework UI, qui s’occupera de la partie graphique de l’application. Et là, le choix et vaste. Voici une petite sélection des principaux candidats.

 

Kendo UI

kendo-uiSurement une des solutions les plus abouties, présente depuis 2011, développé par Telerik, s’adapte bien sur tablette et smartphone, de puissant outils de visualisation de données et de création de graphiques, de nombreux widgets. Kendo dispose même de wrappers pour languages serveur comme ce module de recherche avec autocompletion en php. La documentation est très bien faite. Ca serai surement le framework à conseiller sans hésiter si ce n’était pour la licence, à partir de 199$ pour Kendo UI Mobile.

kendoui.com

ChocolateChip-UI

chocolatechip-uiChocolateChip est focusé sur la rapidité de chargement et de rendu, en ne prenant pas en compte les vieux navigateurs, son objectif à été dès le début  d’être plus rapide et plus léger que jQuery. iOS, Android et Windows phone sont pris en charge, la dernière version intègre un thème iOS 7 « flat ». Tout les éléments graphiques sont en SVG comme ça pas de problème pour les différentes résolutions d’écrans et même les écrans rétina. La librairie est présente depuis 2010 et est disponible sous license open source à la simple condition de mentionner son utilisation dans l’application. Un très bon choix pour une application qui se doit d’être, tant que possible aussi réactive qu’une application native.

chocolatechip-ui.com

jQuery Mobile

jquery-mobileLe framework le plus facile d’accès, avec une très bonne documentation et une énorme communauté. Supporte de nombreux naviguateurs. Il n’est par contre pas réputé le plus « snappy ». A conseiller à un débutant ou pour un site mobile à développer rapidement qui ne nécessite pas de performances « native-like ». La licence est la mêm que pour jQuery, MIT, Free for commercial use.

Demo

 

 

 

 

 

Ionic

ionic-frameworkC’est le petit dernier puisqu’il vient tout juste de sortir. On préfèrera donc attendre un peu avant de l’utiliser sur un vrai projet. Ionic est assez sexy et optimisé. La documentation est clair et simple mais la communauté encore naissante. C’est un framework résolument UI à comparer à Bootstrap par exemple. Le framework est particulièrement optimisé pour être utilisé avec Angular. Ionic est conçu pour fonctionner seulement pour les applications hybride et les derniers navigateurs mobile (Android 4.2 & iOS 6 minimum). Licence MIT.

Demo

 

Sencha Touch

sencha_touchSencha touch est plus qu’un framework UI, il permet réaliser une application de A à A et à même son propre IDE, Architect. Réputé un peu plus compliqué à prendre en main, il peux vite devenir un outil très efficace avec un peu d’expérience, et permet de développer des applications hybride très rapidement. Il est aussi connu pour être celui qui à le rendu le plus rapide et une bonne gestion de la mémoire.  La licence est gratuite même pour utilisation commerciale.

Demo

 

 

 

 

 

Junior

junior-mobile-framework

Demo

 

Lungo

lungo-mobile-framework

Demo

 

Fries

fries-framework

Demo

 

Et pour vous aider à faire un choix, voici un site qui regroupe des screenshots de la même application réalisée avec différents frameworks et un tableau comparatif bien pratique