Votre partenaire formation 100% digital

PhoneGap – Cordova

Développez un site internet en jQuery mobile et portez-le sur mobile avec PhoneGap

  • Formateur(s)

    Eric SARRION
  • Référence

    PGC01

  • Durée

    3 jours (21h)

  • Prix unitaire HT

    1650 €

Prochaines sessions

Sur demande

Description

PhoneGap est un framework de développement mobile, qui permet de convertir un site internet reposant uniquement sur des langages standards non natifs, comme HTML5, CSS3 et JavaScript, en application dite hybride. Celle-ci devient non seulement compatible avec les principales plateformes mobiles comme iOS iPhone, Android, Windows Phone mais peut accéder aux API natives de ces OS mobiles.
Cette formation pratique sur PhoneGap /Cordova, couplée avec le framemework jQuery Mobile, vise à acquérir les compétences nécessaires au développement de sites et applications mobiles compatibles avec les principales plateformes mobiles du marché

Objectifs pédagogiques

  • Comprendre les apports et limites du framework PhoneGap Cordova
  • Appréhender l’apport d’un framework mobile JavaScript comme jQuery Mobile
  • Utiliser le moteur de conversion natif PhoneGap Cordova

Public cible

Développeurs, Chefs de projets

Pré-requis

Connaissance de JavaScript, jQuery, Html et CSS

Modalités d’évaluation

L’évaluation des acquis se fait tout au long de la session au travers d’ateliers de mise en pratique des notions et concepts abordés pendant la formation

Méthodes pédagogiques

50 % Théorie / 50 % Pratique

Programme de la formation

Introduction au développement mobile

  • Historique et évolution
  • Les réseaux et infrastructures
  • Les nouveaux usages
  • Scénarii de mise en œuvre
  • Utilisation de jQuery Mobile pour réaliser des applications mobile Web

Les fondamentaux de jQuery

  • Concepts
  • Les méthodes utilitaires
  • Les sélecteurs
  • Les DOM
  • Gestion des événements

Installation de jQuery Mobile

  • Installation de jQuery Mobile
  • Attributs HTML utilisés par jQuery Mobile

Gestion des fenêtres avec jQuery Mobile

  • Une première fenêtre
  • Passer d’une fenêtre à l’autre
  • Utiliser les transitions entre les fenêtres
  • Fenêtres superposées
  • Utiliser les thèmes CSS

Gestion des listes

  • Une liste simple
  • Une liste contenant des liens
  • Une liste numérotée contenant des liens
  • Insérer des séparateurs dans les listes
  • Rechercher dans une liste
  • Afficher un compteur dans un élément de liste
  • Inclure une image dans les éléments de liste
  • Personnaliser les listes
  • Utiliser les thèmes CSS

Gestion des boutons avec jQuery Mobile

  • Définir un bouton
  • Associer une icône à un bouton
  • Définir la largeur du bouton
  • Juxtaposer les boutons verticalement
  • Juxtaposer les boutons horizontalement
  • Personnaliser les boutons
  • Utiliser les thèmes CSS

Gestion des données sous forme de tables

  • Un tableau sur plusieurs colonnes
  • Plusieurs lignes dans le tableau
  • Insérer des boutons dans les tableaux
  • Personnaliser les tableaux
  • Utiliser les thèmes CSS

Les éléments de formulaires

Champs de saisie
Listes de sélection
Cases à cocher
Boutons radio
Interrupteurs
Sliders
Utiliser les thèmes CSS

Les barres d’outils

  • Barres d’outils « header » et « footer »
  • Barres d’outils de type fixe
  • Gérer les fenêtres en mode fullscreen
  • Utiliser les barres de navigation
  • Utiliser les thèmes CSS

Conventions de jQuery Mobile

  • Initialisation de jQuery Mobile
  • Options de configuration
  • Utilisation des namespaces
  • Evénements virtuels

Introduction au projet PhoneGap

  • Présentation du concept et principes de mise en œuvre
  • Les spécificités des plateformes supportées : Android, iOS, Windows Phone
  • Présentation de l’architecture des applications par plateforme
  • Installation de PhoneGap avec Android et IOS

Travaux pratiques :

Création d’un projet PhoneGap

Mise en oeuvre de PhoneGap

  • Les principes de mise en œuvre
  • Accès aux dispositifs hardware natifs : accéléromètre, GPS, magnéto, appareil photo et vidéo, etc.
  • Utilisation des services natifs : carnet d’adresse, SMS, mail, photo, etc.
  • Création d’un plugin PhoneGap
  • Développement avec les SDK d’Android et d’IOS
  • Optimiser la gestion des tests
  • Les aspects administratifs

Travaux pratiques

Portage d’un site web vers le mobile

  • Gérer les limites imposées par les navigateurs des plateformes mobiles
  • Principales étapes et clefs de la mise au point d’une application Web Mobile
  • Déployer dans les stores App Store et Market place
  • Travaux pratiques

Travaux pratiques

Réalisation d’une application complète pour mobile avec jQuery Mobile et PhoneGap. Les environnements Google Android et IOS Apple seront utilisés