Accéder à localhost avec l’émulateur Genymotion

Pour ceux qui ne connaissent pas Genymotion 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.

unzip phongap javascript mobile

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.

phonegap filetransfer onpress loading indicator

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.

 

 

swipe sencha panel

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

API Geolocation HTML5

Essayez l’API geolocalisation HTML5 en 30 secondes dans votre navigateur

C’est très simple,

1. Ouvrir la console javascript

  • ⌘ + ⌥ + J sur Chrome/Mac OS
  • Ctrl + Shift + J sur Chrome/Windows
  • ⌘ + ⌥ + K sur Firefox/Mac OS
  • Ctrl + Shift + K sur Firefox/Windows
  • voir ici pour les autres.

2. Copier/coller ce code dans la console

3. Autoriser le partage de la position

google.fr wants to use your computer location

Votre position devrait maintenant s’afficher dans la console :

L’API geolocation est disponible sur tout les principaux navigateurs, sauf Opera Mini. caniuse.com/#feat=geolocation

phonegap-and-mobile-site-debugging

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

 

node.js-serialport-sublime-text-screenshot

Un module node.js pour lire les données du port série

Serialport est un module node.js qui permet de lire les infos du port série, ce qui ouvre pas mal de possibilité au javascript comme…  allumer la lumière du salon ou communiquer avec des drones.

Pour l’utiliser c’est assez simple

npm install serialport

 

Note

L’installation de serialport nécessite
python 2.X et les “xcode command line tools”
Pour les “command line tools” pas besoin de télécharger les quelques gigas de Xcode on peux les trouver ici

 

On va ensuite créer un serveur qu’on appelera server.js et y copier le code ci-dessous en précisant le bon “baudrate” et en remplaçant “tty.usbserial-A6023L0J” par l’adresse du port avec lequel on veux communiquer.  ls /dev/tty.*  pour voir les port actifs

Puis on lance le serveur

node server.js

 

En admettant qu’un appareil soit branché sur un port série de votre ordinateur et qu’il envoi des données, le terminal devrait maintenant afficher le console.log qui ressemble à ça :

node.js serialport

Serialport permet de lire mais aussi d’écrire sur le port série, ce qui laisse envisager de nombreuses d’utilisations, si ça vous intérresse voici deux articles intéressant, le premier sur le controle d’un arduino avec node.js et le deuxième sur le javascript et la robotique par l’auteur du module serialport.

http://brandontilley.com/2012/03/02/controlling-an-arduino-from-nodejs.html

http://voodootikigod.com/nodebots-the-rise-of-js-robotics

virtual-hosts-ec2-elastic-ip

Créer un virtual host, une elastic IP et rediriger son domaine vers EC2

Configurer les virtual host

Après avoir configuré un serveur ubuntu avec amazon EC2, on va maintenant voir comment le configurer.

Il faut d’abord créer l’arboresscence nécessaire pour notre site

Il faut ensuite modifier la config d’apache pour qu’il sache ou se trouve notre dossier domain.com, par défaut les sites accesible par apache sont dans /var/www , ici on préfère mettre domain.com dans le repertoire utilisateur (/home/users/ubuntu) afin de pouvoir y accéder facilement avec un client ftp. Pour se connecter en SFTP tout est expliqué dans cet article.

On va créer un nouveau fichier dans sites-available
nano /etc/apache2/sites-available/domain.com

Et y coller ceci, en remplacant bien sur domain.com par votre nom de domaine :

Il faut maintenat activer le site avec la commande suivante
sudo a2ensite domain.com

Puis on rafraichit la configuration d’apache
sudo service apache2 reload

Créer une elastic IP

On se rend sur la console AWS. Si vous n’avez pas encore créé d’instance EC2, voir cet article.

aws ec2 allocate new elastic IP
et dans elastic ip, “allocate new adress”

allocate new elastic IP on amazon aws ec2

On choisi ec2 et on associe ensuite l’ip avec l’instance crée dans ce post

allocate new elastic IP on amazon aws ec2 associate with instance

 

aws ec2 new elastic ip created

Editer la zone DNS

Il faut ensuite mofifier la zone DNS chez son registrar.
Chez OVH c’est par ici.
Puis dans “Domaines & DNS” puis “Zone DNS”.
On va changer les champs de type A et remplacer leurs ip par l’elastic ip que l’on viens de créer chez amazon.

 

C’est fini ! Domain.com devrait maintenant pointer vers notre nouveau serveur.