I have joined Anti-IF Campaign

1ere partie génération d'une Single page web app HTML5 webstorage, offline et Angularjs

1ere partie génération d'une Single page web app HTML5 webstorage, offline avec Angularjs
Aujourd'hui, je vous propose de générer avec Telosys Tools 2.0.3 (nouvelle version !) une application HTML5 complète utilisant le local storage et appcache offline basée sur :
  • Angularjs 1.0.5
  • jQuery 1.9.1
  • Bootstrap Twitter 2.3.0
  • Modernizr 2.6.2
  • Toastr 1.1.5
Cette "Single-page application" est full cliente, il n'y a pas de partie serveur.





Procédure de génération
Elle s'appuie sur les éléments suivants :
  • eclipse 3.6+
  • maven 3.x.x+ et un archétype du central repository OU un starterkit sans maven pour les réfractaires
  • le plugin Telosys Tools 2.0.3 récupérable depuis l'Eclipse Marketplace (telosys-tools)
  • un bon vieux Tomcat 6+ (comme il n'y a pas de java, Apache Http Server ou autre est aussi une possibilité)
  • un vrai navigateur supportant le Html5 pour tester (chrome ou firefox)

Voici les étapes :
  1. Installez ou mettez à jour le plugin Telosys pour Eclipse : Eclipse Marketplace > Telosys tools  : telosys-tools
    Ce plugin nous permettra de générer l'ensemble des pages et fichier javascript pour chaque entité (table) de notre base de données
  2. Depuis Eclipse, créez un nouveau projet Maven en utilisant notre archétype (pour les non maven, voir en fin de tableau)
    Clic droit / menu fichier > new > new project > new maven project
    Choisissez l'archétype "angularHtml5offline-starterkit" en filtrant sur "org.telosys"
    Renseignez les informations nécessaires avec par exemple les valeurs suivantes :
    • 'groupId': : org.test
    • 'artifactId': : html5OfflineAngularjs
    • 'version': 1.0-SNAPSHOT: :
    • 'package': org.test: :
    Vous devrez peut être définir le catalogue des archétypes du repository central.
    Pour cela il faudra ajouter le remote Catalog suivant : archetype-catalog
    Si vous ne le trouvez pas dans le catalog maven, il est disponible ici : sonatype repo
    Pour ceux qui ne souhaitent pas utiliser maven, vous pouvez créer depuis eclipse un nouveau dynamic web project
    puis télécharger le starterkit ci-dessous et l'importer dans votre dynamic web project (clic droit sur le projet > import > archive file)
    starter kit pour les non maven : starterkit sans maven

  3. Sous Eclipse, double-cliquez dans ce nouveau projet sur le fichier :
    TelosysTools/repos/DerbyTelosysBookStore.dbrep

    Le plugin Telosys devrait alors prendre la main et vous présenter une fenêtre de génération et de gestion des entités
  4. Ouvrez onglet "Bulk generation" (en bas de la fenêtre) et sélectionnez toutes les entités et toutes les targets, puis lancer la génération à l'aide du bouton "Generate"
    Confirmez l'opération pour lancer la génération, un message de confirmation devrait vous indiquer 75 fichiers crées
  5. Toutes les fichiers javascript et pages ont étés générées dans le répertoire /src/main/webapp/
    Voici la structure cible pour un projet maven :
  6. Ajoutez le projet dans les webapp de Tomcat (à créer si aucun serveur n'est déclaré)
  7. Démarrez Tomcat
  8. Faites les tests suivant :
    • Ouvrez l'url de l'application : http://localhost:8080/html5OfflineAngularjs/
    • Arrêtez tomcat
    • Attendez quelques secondes et constatez que l'application a bien détecté que le serveur n'est plus disponible (offline indiqué en haut)
    • Entrez dans la page de gestion des Author et ajoutez en un
    • Fermer votre navigateur ou l'onglet de l'application
    • Ouvrez de nouveau l'application : http://localhost:8080/html5OfflineAngularjs/
    • Entrez de nouveau dans la page de gestion des Author et constater que ca fonctionne et que l'auteur que vous avez crée existe toujours
  9. Enjoy

Dans la 2ème partie nous étudierons la structure de cette application pour en comprendre le fonctionnement.

A bientôt.



Liens utiles :
Le site de Telosys : http://www.telosys.org/
La doc : https://sites.google.com/site/telosystools/
Les sources : https://code.google.com/p/telosys-tools
L'update site : http://marketplace.eclipse.org/content/telosys-tools
Le site google code : https://code.google.com/p/telosys-tools/
L'archétype maven angularHtml5offline-starterkit dans le central repository :
Le starterkit SANS maven : starterkit sans maven
Le code source de l'archétype maven : https://github.com/asicfr/angularHtml5offline-starterkit
Angular : http://angularjs.org/
Jquery : http://jquery.com/
Bootstrap : http://twitter.github.com/bootstrap/
Modernizr : http://modernizr.com
Toastr : https://github.com/CodeSeven/toastr
Html5 app cache : https://developer.mozilla.org/fr/docs/Utiliser_Application_Cache
Local storage : http://www.w3schools.com/html/html5_webstorage.asp
Monitoring offline : http://ednortonengineeringsociety.blogspot.fr/2010/10/detecting-offline-status-in-html-5.html
App cache sous firefox : about:cache (browser.cache.memory.enable doit être à true)
App cache sous chrome : chrome://appcache-internals/
CRUD : http://fr.wikipedia.org/wiki/CRUD

Aucun commentaire:

Enregistrer un commentaire