Cordova/Phonegap et jQuery Mobile

Connaissances de HTML, de CSS et de JavaScript

Maîtriser le développement d'interfaces web pour applications mobiles à l'aide de Cordova en conjonction avec jQuery mobile.

Introduction

Présentation et historique phonegap/cordova
Différence entre phonegap et cordova
Les plateformes supportées
Technologies de développement (HTML5, CSS3, JS)

Atelier: Installer l'environnement cordova

Application

Créer un projet Cordova
Organisation des dossiers cordova
Ajouter une plateforme au projet

Atelier: Créer & tester un projet Cordova

Les API Cordova

Accéder aux contacts
Utiliser la géolocalisation
Utiliser l'accélérometre
Accéder à la Camera
Lire et écrire dans un fichier
Utiliser les boites de dialogue (Alert, Confirm, Prompt)
Tester la connexion
Utiliser le vibreur

Atelier: Tester plusieurs plugins

Les Evènements

Détecter le chargement de l'application (onDeviceReady)
Détecter le passage au premier et arrière plan (onResume, onPause)
Gestion du touché (touchEnd, touchStart)

Atelier: Utiliser les différents évènements

Les Hooks

Liste des hooks existant
Utilité des hooks
Associer un script à un hook

Atelier: Tester un hook

Stocker les données

API Restful
LocalStorage & SessionStorage
Web Storage HTML5
Api FileSystem
Plugin SQLite

Les bonnes pratiques

Utiliser les SPA (Single Page Application)
Améliorer les performances
Click vs Touch
Animations (CSS vs JS)
Tester le status de la connexion
Gérer la sécurité avec les CSP (Content Security Policy)

Introduction à jQuery Mobile

Développement d'applications web mobiles
Panorama des frameworks web disponibles:jQTouch, jQuery Mobile, Sencha Touch, Dojo Mobile,...
jQuery Mobile: présentation, composantes
jQTouch vs jQuery mobile
Présentation HTML 5 / CSS 3 / Ajax
Paramétrage d'un projet jQuery Mobile
Rappels de jQuery

Atelier pratique: Mise en place de l'environnement de développement: bibliothèques, serveur web et organisation du projet

Composants jQuery Mobiles

Pages/Fenêtres: structure, navigation, superposition, boîtes de dialogue
Barres d'outils et de navigation: mise en place, positionnements
Boutons: types, décoration et groupage
Formulaires: structure, détail des composants, soumission et plugin methods
Listes: construction (simples/imbriquées), actions, filtrage, décoration
Présentation des thèmes

Atelier pratique: Multiples applications détaillant la construction de pages avec utilisation de formulaires

API JavaScript jQuery Mobile

Configuration du framework
Détail des évènements: Touch, Orientation Change, Scroll, animations,...
Panorama des méthode de l'objet $.mobile
Création dynamique de composants
Appels AJAX

Atelier pratique: Utilisation de la bibliothèque JavaScript de jQuery Mobile, insertion dynamique d'éléments et appels AJAX

Concepts avancés

Création de composants jQuery Mobile
Persistance des données: base de données, session,...
Géolocalisation, intégration Google Maps, GPS,...
présentation de PhoneGap

Atelier pratique: Création de composants jQuery mobiles

Méthodologie basée sur l'Active Learning : 75% de pratique minimum. Chaque point théorique est systématiquement suivi d'exemples et exercices.

Contrôle continu

Attestation de fin de stage mentionnant le résultat des acquis