Sur la route d'Oxiane digressions diverses

LeBlog OXiane

13 fév
2014

AngularJS mobile avec Ionic

Pour ceux qui suivent un peu l’actu des applications mobiles hybrides, et plus particulièrement celles qui utilisent la plateforme Cordova / Phonegap, il y a un blog incontournable, celui de Holly Schinsky.
Récemment, nous avons commencé à dispenser des formations AngularJS à OXiane, ainsi que des projets de développement.

Je suis très porté sur le développement mobile, et l’opportunité de développer pour mobile via Angular permet de faire une jonction logique entre deux mondes très proches : le web et le mobile.

Venons-en au fait : que choisir pour designer son application hybride ?
Nous avons choisi un framework mobile encore très jeune, toujours en beta à la date de rédaction, c’est Ionic.
A vrai dire j’avais commencé à designer les écrans avant d’avoir lu ce très bon article de Holly.

Son article expose très bien les qualités de ce framework UI, mais pour apporter ma petite contribution, je dirais que ses points forts sont :

  • La réflexion autour d’AngularJS, avec l’utilisation de directives spécifiques en s’appuyant sur des plugins Angular.
  • La gestion des états via AngularJS pour afficher ou non un bouton back
  • La légèreté du code d’une manière générale (par rapport à un jQuery mobile par exemple).
  • Les nombreux widgets qui viennent répondre aux besoins les plus courants d’un designer d’interface mobile : listes, boutons, blocs avec ou sans padding, éléments de type « cards » avec header et footer … etc.
  • Un joli menu de type NavigationDrawer Android, très sympa.
  • L’utilisation de SASS pour décorer son application suivant sa propre charte graphique.
  • L’utilisation d’icônes ionicons basées sur des polices, et donc parfaitement adaptées à des multiples résolutions.

Bon, pour ce qui est de SASS, on pourrait imaginer un mode un peu plus souple, car pour l’instant, il faut modifier un ou plusieurs fichiers livrés avec le framework pour lancer le build de sa CSS finale, c’est très simple, mais lors d’une nouvelle version du framework (et c’est très souvent) il faudra faire une fusion des fichiers … pas top.

Le montage d’une application est très simple et des ressources bien faites permettent de commencer. Ce qui est essentiel pour Ionic, c’est de s’intégrer sur la plateforme Cordova, ce qui permet en quelques lignes de code de préparer un projet et de le lancer sur un device. Une petite page permet de se rendre compte de la facilité d’utilisation. En fait les lignes de commande ionic sont des portages de cordova, qui a évolué depuis quelques versions pour une grande rapidité de déploiement !

Si vous utilisez un émulateur Android GenyMotion, sachez que pour un PC, il est reconnu comme un device, ce qui est très pratique pour lancer la commande « run » de cordova (ou d’ionic).
Avec une simple commande « cordova run android » … et zou !

J’ai trouvé le développement sous SublimeText très rapide, on a aussi bien les outils Angular que les commandes de build Sass.
Autre aspect non négligeable, les premiers tests de fonctionnement peuvent très bien se faire sans serveur ni device ni même émulateur, un simple navigateur fera l’affaire ! (Attention cependant, Firefox n’aime pas le slide menu … pourquoi …)

A priori, les ionicons sont basées sur Icomoon, une bibliothèques d’icones et un outil bien sympa pour générer vos propres icônes au format fonte, en attendant l’arrivée des SVG qui devrait rendre ce système un peu inutile dans pas mal de situations. Pour l’instant, c’est un très bon moyen de personnaliser son appli hybride Ionic !

Alain Boudard

aboudard

4 fév
2014

OXiane Studio : IUFN

Comme annoncé au colloque inaugural HUNGRY CITY en décembre 2012, IUFN International Urban Food Network lance sa plate-forme interactive dédiée aux systèmes alimentaires urbains durables. Élément clé pour favoriser le dialogue entre les autorités locales, la communauté scientifique internationale et la société civile autour de cet enjeu majeur, elle représente une véritable colonne vertébrale pour toute action futur de l’ONG.

OXiane Studio a réalisé les développements autour du CMS WordPress et de son outil social BuddyPress. La charte graphique et les nombreux écrans ont été également réalisés en accord avec les besoins de l’IUFN.

L’objectif – favoriser la coopération entre les différentes parties prenantes du système alimentaire à l’échelle territoriale – celle d’une région urbaine – et aider les acteurs locaux à identifier des solutions concrètes pour avancer. Sa création a été possible grâce au soutien de la Fondation Daniel et Nina Carasso et de la Caisse des Dépôts.

Retrouvez le communiqué de presse.CP Plateforme IUFN (Grand public)

Alain Boudard

aboudard

30 jan
2014

Partager l’entityManager JPA/Hibernate entre plusieurs bundles OSGI-Equinox

Contexte du projet

J’ai une web application qui consomme des services métiers, mis à disposition grâce à OSGI (Implémentation Equinox).

J’ai un premier bundle « A » qui fournit un ensemble de services métiers et permet de mettre en place la persistance de mon application.

Dans mon bundle « A » j’ai :

  • Mon registry : il permet de créer mon entityManager via mon fichier persistence.xml
  • Des classes annotées @Entity : elles définissent une première partie de mon modèle
  • Des DAOs
  • Des services métiers

Lire la suite du bllet »

Julien Cheron

jcheron

24 jan
2014

Mise en place de JPA/Hibernate dans un bundle OSGI-Equinox

Dans le cadre d’un projet, j’avais besoin de mettre en place un bundle OSGI (implémentation EQUINOX) qui utilise JPA / Hibernate.

Les versions de départs sont les suivantes :

  • OSGI Equinox org.eclipse.osgi_3.5.2
  • Hibernate : hibernate-4.2.6.Final
  • Hibernate envers : hibernate-envers-4.2.6.Final

Ici : l’utilisation hibernate-envers n’est pas obligatoire

Lire la suite du bllet »

Julien Cheron

jcheron

20 déc
2013

Ajouter un bouton « envoyer un article » dans buddypress

Quand on développe avec WordPress / Buddypress, il y a parfois des fonctionnalités qui ne sont pas natives et qui manquent.
De nombreux plugins permettent de partager des liens, des infos avec les membres, mais il n’existe pas (à ma connaissance) de module qui permet de partager du contenu interne à son site avec des membres du même site (de la communauté buddypress).

Il existe une fonction native qui permet de pré-remplir le nom d’un destinataire de message, elle se situe dans :
/plugins/buddypress/bp-messages/bp-messages-template.php

La fonction qui permet de remplir le contenu du message :

bp_messages_content_value()

Cette fonction expose un filter WordPress :

bp_get_messages_content_value()

Ce filtre permet tout simplement d’injecter des informations dans le message.
Mais le code ne prend en charge que les données en POST :

$content = '';
if ( !empty( $_POST['content'] ) )
	$content = $_POST['content'];
return apply_filters( 'bp_get_messages_content_value', $content );

Pour réaliser un simple bouton de partage d’article, nous n’avons peut-être pas besoin de faire un formulaire pour chaque article.
Nous allons donc étendre ce filtre avec la gestion des données en GET.
Dans notre fichier functions.php (ou autre suivant votre organisation de code) :

function add_message_content($content){
	if ( !empty( $_GET['content'] ) ) {
		return $content . $_GET['content'];
	}
}
add_filter( 'bp_get_messages_content_value', 'add_message_content' );

Et voilà, il ne reste plus qu’à ajouter un lien vers l’écran de composition de message de buddypress dans une boucle d’articles.
Dans un template d’archive par exemple :



   <p><a class="msg" href="<?php echo wp_nonce_url( bp_loggedin_user_domain() . bp_get_messages_slug() .
   '/compose/?r=' . bp_core_get_username( $user_id ). '&content=' . get_permalink() ); ?>">
   <?php echo __( 'Send'); ?></a></p>


Le paramètre content peut être un peu enrichi, mais il va falloir surveiller la longueur de la query string !
On peut bien sûr faire de même avec le champ « subject » qui a lui aussi un filtre wordpress.

Alain Boudard

aboudard