Javascript pour la création d’application mobile

Voici un ensemble de savoir-faire essentiel pour le développement d’application mobile… Dans ce cours nous n’utiliserons pas de bibliothèque pour coder les fonctionnalités.

La notion de vue

La vue en architecture MVC (Model View Controller) permet d’afficher tout le contenu de l’écran. Elle contient :

• des éléments DOM statiques (balise HTML et texte)
• des données chargées dynamiquement ( via json)

Pour panacher des valeurs dynamiques (variable) et le contenu statique, vous pouvez exploiter les modèles de libellés qui peuvent intégrer les expressions :

`modele de libellés`

Il suffit d’entourer la chaîne avec des apostrophes graves ` `.

Afficher une variable

Utiliser la syntaxe  ${ } pour l’affichage d’une variable :

let nb = 2;
alert(`la variable nb vaut : ${nb}`);

Afficher une expression

Vous pouvez intégrer une expression dans les modèles de libellés

let nb = 2;
alert(`la variable nb additionnée de 3 vaut : ${nb + 3}`); // affichera 5

Vous pouvez même faire appel à une fonction :

let nb = 2;
function calcul() {
  return 6;
}
alert(`la variable nb vaut : ${nb + calcul()}`); // affichera 8

Création d’une vue

En mixant le HTML avec des valeurs dynamiques vous pouvez coder une vue :

document.write(`<ul> ${chaine} <ul>` );

Simplifier les fonctions avec les fonctions fléchées

Une fonction fléchée est caractérisée par une syntaxe plus courte et par l’absence du this.

Elle est construite sur la syntaxe globale suivante : argument => instruction. Elles sont très utiles pour retourner le résultat d’un traitement effectué sur l’argument.

Un exemple de fonction fléchée avec un seul argument :

let calcul = x => x+1;
alert( calcul(2) ); // affiche 3

équivalent à :

let calcul = function(x){ return x+1; }
alert( calcul(2) ); // affiche 3

Le traitement effectué est le rajout de 1 à l’argument passé à la fonction. Un autre exemple avec deux arguments. Il faut utiliser des parenthèses ( ) pour déclarer les arguments :

let calcul = (x,y) => x*y+1;
alert( calcul(2,10) ); // affiche 21

Si le corps de la fonction contient plusieurs instructions il faut faire usage des accolades { }. Dans ce cas vous devez utiliser le return pour retourner la valeur.

let calcul = (x,y) => {
  let resultat = x*y+1;
  return resultat + 10 ;
}
alert( calcul(2,10) ); // affiche 31

Exécuter dynamiquement une fonction

Il est parfois intéressant d’exécuter une fonction sur un ensemble d’objet (tableau DOM, par exemple). Javascript propose la méthode forEach().

let tab = ["chat","chien","chiot"];
let chaine = "";
tab.forEach(element => {
  chaine += element + "s\n" }
);
alert(chaine);
/* affichera 
"chats",
"chiens"
"chiots"
*/

Remarquez l’utilisation de la fonction fléchée vue plus haut.

Si vous voulez recréer un nouveau tableau à partir d’un tableau existant, pensez à utiliser la méthode map().

let tab = ["chat","chien","chiot"];
let pluriels = tab.map(element =>  element + "s" );
alert(pluriels);

Cette méthode est très utile pour reformater un tableau de donnée (json) en tableau DOM pour ensuite créer la vue :

// données
let user1 = { prenom : "dany", age : 30, taille : 170 } 
let user2 = { prenom : "roby", age : 40, taille : 180 }
let list = [user1,user2];

// tableau d'éléments HTML vide let tab = []; // préparation de la vue à partir de chaque objet ($obj) du tableau list[]
tab = list.map(obj => `<li data-age="${obj.age}"> ${obj.prenom}</li>` );

// affichage de la vue
let chaine=""; chaine = tab.join(""); document.write(`<ul> ${chaine} <ul>` );

Mettre en place un système de routage

L’idée est de pouvoir changer L’URL et le contenu d’une page sans la recharger.. c’est le principe d’une SPA (simple page application).

Deux solutions s’offrent à nous,

1- générer des URLs de type hash avec # :

http://cc-ng-z.azurewebsites.net/#/session/new

Voir l’exemple en ligne.

2- modifier l’historique de navigation avec l’API History grâce à sa méthode pushState()

let url = contact.html
history.pushState(null, null, url);

En écrivant ceci nous changeons L’URL de la page qui devient /contact.html. 

Il est préférable de ne pas dépendre de l’historique de navigation pour améliorer l’expérience utilisateur. En effet en appuyant sur le bouton actualiser de votre navigateur sur une URL modifiée avec l’API History, ce dernier vous répond que la page n’existe pas. Ceci peut être gênant si vous voulez partager la page sur le net.

Fonctionnement du routage

Nous allons charger les information de Dany et modifier l’URL (#/dany) en cliquant sur un lien  HTML :

<a href="" id="daniel" data-ref="dany"> Dany </a>

Nous annulons la redirection dans le gestionnaire d’événement :

let dany = document.getElementById('daniel');
dany.addEventListener('click', function(e){
   e.preventDefault();
})

Nous récupérons la référence :

let dany = document.getElementById('daniel');
dany.addEventListener('click', function(e){
   e.preventDefault();
   // référence
   var data = e.target.getAttribute('data-ref');
})

Nous appelons le modèle :

let modele = {
  userDetail : function(user){
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "https://domaine.ext/user/", false);
    xhr.onload = function(){
      recup = JSON.parse(xhr.response);
      view.userDetail(recup.results[user]);
    };
    xhr.send();
  },
  /* autres modèles... */

On effectue une requête Ajax  qui retourne un objet JSON. On appelle ensuite la vue qui affiche les informations d’un utilisateur (ici Dany) :

let view = { 
  userDetail: function(data){
    $("info").innerHTML = ` <h2>${data.name.first}</h2><img src="${data.picture.large}" /><p>Email : ${data.email}</p><p>Ville : ${data.location.city}</p><p>Sexe : ${data.gender}</p><p>Phone : ${data.phone}</p>`;
  },
  /* autres vues... */

Nous modifions l’URL :

window.location.href = window.location.href.replace(/#(.*)$/, '') + '#' + data;

A voir:

• http://krasimirtsonev.com/blog/article/A-modern-JavaScript-router-in-100-lines-history-api-pushState-hash-url
• https://css-tricks.com/using-the-html5-history-api/