Retour : Page Principale > sommaire applications botanique > CEL Widgets > CEL mobile
comme le préconise jQuery Mobile pour enregistrer les évènements comme 'click' ou 'pageshow'. Pour une raison que j'ignore, cela amène à exécuter plusieurs fois les fonctions données, surtout sur iOS.
Préférer
Petit outil pour vérifier le contenu du fichier manifest http://manifesto.ericdelabar.com/.
Penser à bien vérifier l'existence des fichiers externes et qu'ils correspondent à ceux réellement utilisés.
http://arty.name/localstorage.html donne le nombre de caractères max pour un navigateur.
En javascript, appeler la fonction
pour connaître le nombre d'espace utilisé. Il n'existe pas de fonctions permettant de connaître rapidement l'espace disponible.
Le local storage est initialisé par le code suivant :
La sauvegarde et la récupération des observations se fait de la façon suivante, avec une clef de type chaîne de caractères :
Pour pallier au manque d'espace, les base64 sont sauvegardées en webSQL, base de données relationnelle et asynchrone. L'affichage des miniatures est géré par le code du CEL avec les canvas HTML5.
L'initialisation de la base se fait de la manière suivante :
où nom_court est une chaîne de caractères non accentués et sans espace et taille_maximale un entier multiple de 1024*1024 (exprimée en Mo).
Les requêtes SQL se font dans des transactions de la forme :
Pour utiliser des paramètres dans les requêtes SQL, procéder comme suit :
Le code de changement de version de la base est
Ex.: db.changeVersion("1.0", "1.1");
La recherche se fait à chaque frappe sur le clavier avec un système de délai minimum entre deux frappes.
Aide pour les développeurs mobiles
ATTENTION (2017-07-19) - la situation peut avoir changé depuis que ces informations ont été écrites
Evènements
Ne pas utiliser
document.on('pageinit', function(){}); ou document.on('mobileinit', function(){});
Préférer
document.ready(function(){});
Mise en cache
En théorie, la plus petite taille de cache sur les smartphones est celle de l'iPhone 3GS qui, en théorie, atteint 10 Mo. La pratique n'est pas loin de la théorie : taille maximale testée et supportée = 9.6 Mo.Petit outil pour vérifier le contenu du fichier manifest http://manifesto.ericdelabar.com/.
Penser à bien vérifier l'existence des fichiers externes et qu'ils correspondent à ceux réellement utilisés.
ATTENTION à bien respecter l'ordre d'écriture du manifest (recommendations de Safari) :
CACHE MANIFEST # version 1.0.0 # à chaque modification dans un des fichiers mis en cache, penser à changer le numéro de version... #liste des fichiers principaux (css ou js) #on peut également tout lister après CACHE: NETWORK: #obligatoire ! #liste des fichiers à ne jamais mettre en cache (à toujours utiliser en ligne) ou * CACHE: #liste des fichiers à mettre en cache #fichiers secondaires (images, librairies, etc...) FALLBACK: #facultatif
ATTENTION ! Pour la reconnaissance du manifest sur certains navigateurs, il faut rajouter les lignes suivantes dans le fichier .htaccess en fonction de l'extension donnée (.appcache comme ici ou .manifest pour les puristes)
AddType text/cache-manifest .appcache # Cache settings for the manifest file <IfModule mod_expires.c> Header set cache-control: public ExpiresActive on # Prevent receiving a cached manifest ExpiresByType text/cache-manifest "access plus 0 seconds" </IfModule>
Sauvegarde des observations
Les données liées à une observation sont stockées localement en JSON suivant les fonctionnalités du local storage proposés par HTML5. C'est une base de données indexée très rapide d'accès. La taille de celle-ci est calculée en fonction du nombre de caractères qu'elle contient, index et valeurs. La plus petite taille observée sur smartphones est celle de l'iphone 3GS sur Safari qui peut stocker 2.6 Mo mais pas 2.7 Mo (maximum observé : 2 621 940 o).ATTENTION : chaque navigateur a une taille limite à respecter !!!
http://arty.name/localstorage.html donne le nombre de caractères max pour un navigateur.
En javascript, appeler la fonction
alert('space used:'+JSON.stringify(window.localStorage).length);
Le local storage est initialisé par le code suivant :
var bdd = window.localStorage;
//sauvegarde var observations = JSON.stringify(json); bdd.setItem(clef, observations); //récupération var observations = JSON.parse(bdd.getItem(clef));
Attention ! Pour l'indexation, toutes les clefs liées à une observation commencent par obs suivi de l'identifiant numérique de manière à éviter de récupérer les autres données comme le compte utilisateur lors du parcours du contenu de la base.
Photographies
Le local storage peut stocker 2.6 Mo sur iPhone mais pas 2.7 Mo (maximum observé : 2 621 940 o) => limite grandement l'ajout de photos prises avec l'appareil photo (une obs. pèse environ 320 o).Pour pallier au manque d'espace, les base64 sont sauvegardées en webSQL, base de données relationnelle et asynchrone. L'affichage des miniatures est géré par le code du CEL avec les canvas HTML5.
L'initialisation de la base se fait de la manière suivante :
var db = window.openDatabase(<nom_court>, <numéro_version>, <nom_complet>, <taille_maximale);
Les requêtes SQL se font dans des transactions de la forme :
db.transaction(
function(tx) {
tx.executeSql('SELECT * FROM IMG', [], function(tx, results) {
var taille = results.rows.length + 1;
for (var i = 0; i < taille; i++) {
console.log(results.rows.item(i);
}
}, function(error) {
console.log('Transaction error', error);
});
},
function(error) {
console.log('DB | Error processing SQL: ' + error.code, error);
},
function() {
console.log('DB | SQL success');
});
Pour utiliser des paramètres dans les requêtes SQL, procéder comme suit :
var sql = "[...] WHERE id = ?"; équivaut à var sql = "[...] WHERE id = :id" dans
tx.executeSql(sql, [id]);
//exemple
tx.executeSql('INSERT INTO IMG'
+ ' (id, parent, nom, base64, num, miniature)'
+ ' VALUES (:taille, ?, :nom_photo, ?, ?, :miniature)',
[taille, photo.parent, photo.nom, photo.base64, photo.num, miniature]);
Attention ! Provoque des erreurs si le nombre de paramètres donnés dans le tableau est différent du nombre de valeurs externes (? ou :<valeur>) donné dans la requête.
Le code de changement de version de la base est
db.changeVersion(<version_courante>, <nouvelle_version>);
Attention, le changement de version de la base de données pose problème à Chrome et Phonegap ; autant que possible, ne pas y toucher.
Auto-complétion des noms latins
Le dictionnaire des noms est stocké dans le cache (bdtfx.js) au format JSON de la forme
var BDTFX = {
"Aaronsohnia pubescens-101873" : {
"num_nom" : 101873,
"nom_sci" : "Aaronsohnia pubescens",
"auteur" : "(Desf.) K.Bremer & Humphries",
"annee" : 1993
},
[...]
La recherche se fait à chaque frappe sur le clavier avec un système de délai minimum entre deux frappes.