On continue l'aventure GAE Endpoint et SEO

Voila depuis quelques temps que mon application de compteur en ligne est en production en version Alpha. Bien entendu personne ne l'utilise, même par mégarde. Du coup je me dit qu'un petit effort de SEO, optimisation pour les moteurs de recherche, s'impose.

Pour cela 2 axes possibles :

• Plus de contenus
• Une URL plus parlante

Pour le 1er axe, c'est possible en réalisant des pages de documentation pour l'utilisation de l'application, c'est prévu mais il faut du temps. Par contre modifier l'URL du site pour que cela soit plus efficace semble assez rapide. L'URL compte beaucoup pour les moteurs d'indexation, car c'est un champ limité en taille, obligatoire et potentiellement compliqué à modifier, très engageant : achat de domaine, mise à jour DNS, redirection du site...

Pour mon cas je ne vais pas investir dans un domaine, mais j'en ai déjà un capverszero.fr, du coup je vais faire un sous domaine bien parlant : https://onlinetallycounter.capverszero.fr

Alors avec Google Cloud Endpoint c'est le parcours du combattant...

Première étape enregistrer le nouveau domaine, au travers de la console Google AppEngine, montrer patte blanche et prouver que vous êtes bien propriétaire du domaine. J'ai opté pour la validation au travers de l'ajout d'une directive DNS. Une fois ceci passé Google donne la directive DNS à ajouter pour redirigé le sous domaine vers l'application GAE. 

Il faut bien noter que chaque mise à jour du DNS prend un certain temps... plusieurs heures... donc faut pas être pressé.

Et là stupeur les Cloud Endpoints ne supportent pas les custom domain... oui c'était une petite note dans la documentation... Heureusement la page HTML est bien accessible sur le nouveau domaine mais les services ne sont pas disponibles sur ce domaine. Argh !!! 

Donc il faut se lancer dans la modification du code de l'application pour utiliser CORS (Cross-Origin Resource Sharing). Ça marche dans les nouveaux navigateurs, ça signifie tout simplement qu'il faut appeler les services REST de Google Cloud Endpoints sur l'adresse contingit.appspot.com, en dur, et ça marche ouf.

Et maintenant il faut mettre à jour le référencement de mon site dans les outils Google (Webmaster Tools et Analytics), et là il demande qu'une redirection HTTP 301 soit mise en place pour valider que c'est bien une migration de site. Et là impossible de réaliser cette redirection côté serveur : je n'ai qu'une page statique... Je me lance sur une redirection par balise meta... c'est pas classe mais il parait que ça peu marcher. Mais la blague c'est que je n'ai qu'une page et c'est physiquement la même au 2 adresses donc tout cela semble compromis je risque d'être redirigé indéfiniment. J'ai bien fait le test en mettant une seconde page mais cela ne m'a pas permis de valider la migration du site dans l'outil google... du coup c'est comme s'il y avait 2 sites...

Enfin je m'arrête ici et j'attends de voir si je monte un peu dans le ranking google, à suivre...

Counting IT version Alpha

Voila c'est fait... un peu de développement pour un peu de résultat. Un petit site qui n'a pas encore une grande utilité mais qui sait... avec quelques fonctionnalités de plus y a moyen ou pas que cela intéresse un peu de monde. Enfin l'objectif c'est de tester des nouvelles technologies :

Pour le frontal :

• React Material
• Design Lite
• Google Web Starter Kit

J'ai parlé de tout cela dans un précédent billet.

Pour la partie serveur :

• Google Application Engine (GAE) avec le développement d'un Endpoint.
• OAuth de google, oui il faudra un compte google pour accéder à l'application
• Le Datastore de Google avec Objectify

Et tout l'écosystème qui en dérive, stockage des données, authentification OAuth2, API management... et la console de google developer.

La bonne nouvelle c'est que cela marche assez facilement après quelques mises au point avec les outils et l'environnement de développement qui mock l'utilisateur, il faut donc prévoir un horrible code pour gérer cela :

     if (user.getEmail().equalsIgnoreCase( "example@example.com" ))

Oui en mode développement on a pas accès au vrai profile de l'utilisateur.

Sinon je n'ai presque rien à dire... le client javascript du GAE Endpoint est généré à la volé par les API google donc pas de soucis particulier pour générer des requêtes, tout est masqué en fait : 

     gapi.client.countingit.countersAPI.count({'counterId':12345,'countTime':date }).execute(

      function(resp) {

          if (!resp.code) {

              this.setState({data:resp.result});

          }

          else{

              console.error(resp, status, err.toString());

          }

        });

Et c'est assez simple à intégrer avec le fonctionnement de React. Le petit détail est de s'assurer que les API google client sont bien chargées et cela prend du temps avant de tenter des requêtes au serveur.

Bref beaucoup plus de souci entre MDL et React côté interface que côté serveur et appels de services REST.

Voila la bête : https://onlinetallycounter.capverszero.fr

Développer un Frontal Web : Google Web Starter Kit & Material Design Lite & React

Parlons un peu de développement Web histoire de se changer les idées car dernièrement dans mes derniers projets professionnels je n'ai pas trop tâté du Web. Je suis côté cœur de SI : services métier, médiation, stockage des données... Mais de temps en temps il faut bien se replonger dans le développement Web car c'est un monde qui bouge beaucoup... et un peu trop vite, c'est quasiment impossible d'être à jour, le temps de réaliser un projet et déjà de nouvelles normes, de nouveaux frameworks... Personnellement j'ai raté pas mal d'étapes et c'est temps mieux, je me suis arrêté à Ext-JS (maintenant Sancha, quand c'était gratuit...) et à JQuery, JQueryUI. Bon tout ça existe toujours mais ils ont moins le vent en poupe. Et du coup j'ai sauté la période Bootstrap / AngularJS (qui va surement se relancer avec la version 2) et qui restent à la pointe et s'améliorent.

Donc je m'attaque au développement Web avec Material Design Lite (porté par les standard de Google) mixé avec React (le framework de Facebook), oui les deux mastodontes d'internet, pourquoi s'en priver c'est gratuit. Et je ne me lance pas dans un développement complexe qui pourrait nécessiter un Backbone.js mais à terme pourquoi pas c'est l’intérêt de React : ça ne ferme pas les portes. Et puis pour cadre tout ça le Google Web Starter Kit.

Material Design Lite

Commençons pas présenter MDL qui implémente le Material Design de Google, c'est très léger : du CSS et un javascript. Cela donne un cadre pour réaliser une interface web, c'est très pratique pour les ingénieurs comme moi qui sont très loin d'être des web designer, ici, on a qu'a choisir la couleur (oui c'est assez restrictif mais ça évite de faire un site qui pique les yeux), un template (ou pas) et les composants. Après ce framework n'est pas très complet aujourd'hui et il manque pas mal de composants, j'attend la version suivante !

React JS

React JS c'est un framework de génération de DOM HTML utilisant le syntaxe JSX qui permet d'écrire cela simplement. React promet simplicité et performance.

Bon c'est pas si simple car on perd les bases du déroulement de la page html et de son chargement. Bref il faut utiliser des astuces pour réaliser lancer les petits scripts nécessaires à MDL pour décorer les composants.

Google Web Starter Kit

Peut de développement dans ce kit, juste le packaging d'outils basés sur node.js pour avoir un platforme de développement web qui est vraiment efficace. On peut modifier le gulpfile.js pour prendre en charge le JSX avec Babel et le tour est joué.

Conclusion

Ces outils marchent PRESQUE ensemble out-of-the-box. C'est React (normal c'est l’intrus) qui fou la grouille.

Voila la solution pour MDL avec React :

var Header = React.createClass({

  componentDidUpdate: function() {

      // Décore tous les composant avec 'mdl-js-* class

      componentHandler.upgradeDom();

  },

Sans oublier l’utilisation d'un require(../material.min.js) pour être sur d'avoir la méthode accessible que browserify gérera...

Et pour le Web Starter Kit une petite modification du gulpfile.js pour prendre en compte JSX (mais je pense que dans la prochaine version ce sera inclus) : 

gulp.task('scripts', function () {

  return gulp.src('app/scripts/monApp.jsx')

  .pipe(babel())

  .pipe(browserify())

  .pipe(gulp.dest('app/scripts/'));

});

[...] 

// Build production files, the default task

gulp.task('default', ['clean'], function (cb) {

  runSequence('styles', ['scripts', 'jshint', 'html', 'images', 'fonts', 'copy'], cb);

});

Mise à jour 02/11/2015 :

Bon quelques soucis j'ai l'impression que le componentHandler.upgradeDom(); fait sauter les événements enregistrés par React... du coup j'ai ajouté react-native-listener. Je ne sais pas si c'est LA solution mais ça marche...

Mise à jour 05/11/2015 :

Pour le même problème que précédemment une solution est d'enregistrer l’événement à la suite :

componentHandler.upgradeDom();  

document.getElementById('myButton').addEventListener("click", this.props.handleClick);

Mise à jour 01/01/2016 :

Suite à la mise à jour de material design lite à la version v1.0.6 je n'ai pas plus besoin de react-native-listener pour la plupart des événements. Cela s'améliore de jour en jour.