Support de formation sur le développement Mobile Android Avec jQuery


Télécharger Support de formation sur le développement Mobile Android Avec jQuery

★★★★★★★★★★3.5 étoiles sur 5 basé sur 1 votes.
Votez ce document:

Télécharger aussi :


Développement Mobile Avec jQuery Mobile

 

Dr. Christelle Scharff @scharffc

 


 
 
 
 

Les téléphones

 

Les systèmes d'exploitation mobiles

?   Blackberry OS

?   Blackberry OS 10

?   Android

?   iOS

?   Windows Phone

?   Symbian OS

?   Asha (Nokia)

?   Series 40 (Nokia)

?   Bada (Samsung)

?   Tizen (Linux)

?   etc

Les technologies mobiles

?     SMS

?     MMS

?     Bluetooth

?     QR codes (Quick Response)

?     NFC (Near Field Communication)

?     Applications natives (Java ME, Java for Android, C, C++,

Objective C, C#, Python …)

?     Sites web mobiles (CSS, HTML, JavaScript, HTML5 …)

?     Applications Web (CSS, HTML, JavaScript, HTML5…)

?     IVR (Interactive Voice Response)

?     USIM (carte SIM programmables)

?     USSD (e.g., #123#) ? etc

                                                                                                                                                                                                                                                                                                                         

Les utilisateurs : un marché mondial et diversifié

 

 , 2011

Développement mobile

 

Cycle de développement

 

App - Angry Birds

 

App - iButterfly

?

 

App - Wham City Lights

?

 

Mobile pour le développement social

 
 

Magasins d’applications (App stores)

   

Développer une application mobile

   

Les modèles d'affaire

App mobile

Expérience mobile

Le future du développement mobile

 

Développement Mobile Avec jQuery Mobile

 

Dr. Christelle Scharff @scharffc

 


 

Comparaison : Application native / Application web mobile

?   Application native

?   Utilise le langage natif du système d’exploitation (Java, Objective-C, C++ )

                      ?    Un accès aux dernières fonctionnalités matérielles (photo, NFC

)

?   Les kits de développement sont fournis par les fabricants de la plate-forme

                      ?   Les apps sont mises dans les magasins d’apps

?   Les mises à jour sont téléchargées par l'utilisateur a partir des magasins d’apps

?   Application web mobile

?   Developpées avec les technologies web (HTML, CSS et JavaScript)

                      ?   Permet le développement multiplateforme

?   Nécessite l’utilisation d’un logiciel (comme Apache Cordova) pour transformer l’application en application hybride executable sur différentes plateformes

Comparaison : Application native / Application web mobile

 

Comparaison : Application native / Application web mobile

 

Expérience utilisateur

Intégration mobile

Cout / temps

Native

+++

+++

-

Web

++

++

+++


 

Qu'est-ce que HTML5 ?

?     HTML5 est partout et sur ?toutes les plateformes ?     Ordinateurs, téléphones, téléviseurs

?     HTML5 est optimisé pour les mobiles

?     Téléphones et tablettes

?     HTML5 est ouvert

?     HTML est déjà connu par beaucoup de gens

                      ?      Bientôt un standard du W3C (World Wide Web Consortium)

?     HTML5 résout des problèmes récurrents en développement web

?     Réseaux, contacts, en ligne / hors ligne, saisie, vidéos et capacités de géolocalisation, taille des composants d’ interface utilisateur adéquate

?     HTML5 est flexible

?     Contenu (HTML)

                      ?   Style (CSS)

                      ?   Logique (JavaScript)

Navigateurs mobiles

?     Différents types de navigation (curseur, mise en évidence de la zone sélectionnée, tactiles)

?     Différents types de zooms

?     Zoom de base (taille de police uniquement)

? Zoom intelligent (images et taille de police ensemble)

?     “Reflow engine”

?     Fusion des colonnes en une seule colonne déroulante

?     Expérience multi-page

?     Combien de pages peuvent être ouvertes en même temps ?

?     Moteur WebKit

?     Moteur libre de rendu HTML, CSS et JavaScript pour les navigateurs Web

? Utilisé par la plupart des navigateurs actuels (Android, iOS )

Navigateurs mobiles

?   Navigateurs préinstallés par défaut

?   Safari sur iOS

                      ?   Internet Explorer Mobile sur Windows Phone 8

                      ?   Android Browser sur Android

?   Navigateurs qui peuvent être installés par l’utilisateur

?   Chrome pour Android - Lancé en Février 2012 (maintenant préinstallé)

?

                      ?                      Firefox Mobile - Apparu en 2011

?   Opera - téléchargeable pour la plupart des plates-formes, version intégrale

?   Opera Mini - navigateur proxy qui prend en charge des vidéos, Ajax, offline/online    http://www.opera.

com/developer/tools/mini/

 

 


 
 

Navigateurs mobiles - Statistiques

?

 

Navigateurs mobiles - Statistiques

?

 

Boite à outils

?     Editeur

?    Notepad++ ou editeur plus puissant

?     Navigateurs

?    Navigateur Google Chrome

?   Emulateur Opera mobile pour simuler différents téléphones et tablettes

                 ?   Navigateurs mobiles sur votre téléphone

?     Java

?   

?     Transfert de fichiers

?    Filezilla (ou équivalent)

?     Ressources (livres, urls etc)

?     Cordova 2.5.0

?     Application Android

?    Android SDK (contient Eclipse) ? Autres applications

Développement Mobile Avec jQuery Mobile

 

Dr. Christelle Scharff @scharffc

 


 

HTML

?     HTML = Hyper Text Markup Language

?     Langage basé sur les balises et rendu par un navigateur


?     Fichiers avec l'extension html

?     est le fichier d'entrée dans un site Web

?     Squelette d'une page HTML

   <html>

   

Ouvrir la balise

      <head>

       <title>

        …

       </title>

   

Fermer la balise

      </head>

      <body>

       …

      </body>

</html>

HTML – cheat sheet

Balises

<p> … </p> - paragraphe

<em> … </em> - italique

<b> … </b> - En gras <h1> … </h1> - niveau de

titre

(de 1 à 6)

<img src …> - image

<a> … </a> - lien

<br /> - ligne blanche

<ul> - liste

  <li> … </li>

  <li> … </li>

</ul>

<div> … </div>



 
 

CSS

?     CSS = Cascading Style Sheets

Interne

?     Utilisé pour la présentation visuelle d'un document HTML (couleur, taille, agencement, opacité etc) ?  Fichiers avec l'extension .css ? CSS intégré :

Fichier externe



? <style type="text/css"> body {color:red;}

</style> ?  CSS externe :

? <link rel="stylesheet" href=“" type=" text/css">

?     Composé de plusieurs règles qui sont appliquées sur des sélecteurs. Les règles attribuent des valeurs aux propriétés

<h1 classExemple : ="loud">Hi!</h1>

<p id="low">How are you?</p>

<ul>

  <li class="loud">Pizza</li>

  <li>Soda</li>

</ul>

Class:

.loud {font-style: bold;}

Id:

#low{font-style:italic;}

(ids are unique)       CSS – cheat sheet

?

 


 

JavaScript

?     JavaScript est un langage de script qui permet de rendre les pages plus interactives pour les utilisateurs

?     Exemples:

?     Validation des formulaires     JavaScript – cheat sheet

                             ?   Afficher et masquer des éléments 

                             ?   Interactions avec les bases de données

                             ?   Animations

Inline

?     Fichiers avec .js comme extension ? JavaScript intégré :

?     <script type="text/javascript" charset="utf-8"

External file

</script>

?     JavaScript externe :

?     <script type="text/javascript" src="" ></script>

Exemple

<script type="text/javascript" charset="utf-

8"> function showAlert(){ alert("Hello");

}

</script>

<button type="button“ onclick="showAlert()"> Click me!

</button>

Développement Mobile Avec jQuery Mobile

 

Dr. Christelle Scharff @scharffc

 


 

Qu'est-ce que jQuery mobile?

?   

?    Librairie JavaScript pour aider les concepteurs et les développeurs à créer des expériences web mobiles plus facilement

?    Créer des expériences utilisateurs unifiées sur toutes les plate-formes populaires (Android, iOS, BlackBerry )

?    Basé sur HTML5 et un mécanisme de thèmes avancé

?    Code léger profitant des caractéristiques détectées dans le navigateur (amélioration progressive)

?    Des plugins sont disponibles (cartes et flux RSS)

?    Le code peut être emballé dans une application native avec des logiciels tels que Apache Cordova

?    Parrainage d'Adobe, Mozilla Corporation, RIM, Nokia, dotMobi etc

 

Compatibilité des navigateurs

?    Notes

 

?    Compatibilité

 

Exemples d’utilisation de JQuery Mobile

 

Widgets jQuery Mobile

   

Page de base en jQuery Mobile

Viewport

CSS

JavaScript

           <!DOCTYPE html>                 (en local)

<html>

<head>

     <title>Sample0 - Skeleton</title>

      <meta name="viewport" content="width=device-width, initial-scale=1">

     <link rel="stylesheet" href="" />

     <script src=""></script>

<script src=""></script>

</head>

 

Header

 
 

Content

 

Footer

<body>

     <div data-role="page">

<div data-role="header">

<h1>Header</h1>

</div>

<div data-role="content">

<p>Body</p>

</div>

<div data-role="footer">

<h5>Footer</h5>

</div>      </div>

</body>

</html>

Page de base en jQuery Mobile

Viewport

CSS

JavaScript

           <!DOCTYPE html>                    (en local)

<html>

<head>

     <title>Sample0 - Skeleton</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href=".

css" />

<script src=""></script>

<script src=""></script>

</head>

 

Header

 
 

Content

 

Footer

<body>

     <div data-role="page">

<div data-role="header">

    <h1>Header</h1>

</div>

<div data-role="content">

    <p>Body</p>

</div>

<div data-role="footer">

    <h5>Footer</h5>

</div>

     </div>

</body>

</html>


 

                                                                                      Roles - data-role   

?     Les balises peuvent avoir des rôles (data-role)

?     Les data-roles ajoutent de la sémantique aux éléments

?     Ce sont des contrats implicites entre la plateforme et les développeurs

?     data-role sont page, header, content, footer, navbar, button, controlgroup, collapsible, collapsible-set, fieldcontain, listview, dialog, slider, nojs

?    

Attributs - data-*

?     Chaque widget ou composant de l’interface dispose d’ attributs

?     Les attributs sont introduits par data-* et ils permettent  d'initialiser et configurer les widgets

?    

?     Exemple : Button

<a href="#" data-role="button"> Click me! </a>     


 

Boutons avec une icône

 <a href="#" data-role="button" data-icon="

 
 

Les listes avec ListView

<ul data-role="listview">

<li><a href="#">NYC</a></li>

<li><a href="#">Boston</a></li>

<li><a href="#">San Francisco</a></li>

</ul>

 

Les listes avec ListView

<ul data-role="listview" data-inset="true" datafilter="true">

<li><a href="#">NYC</a></li>

<li><a href="#">Boston</a></li>

<li><a href="#">San Francisco</a></li>

</ul>

 
 

Thèmes

?     Introduit avec l'attribut data-theme et les lettres a, b, c

?     Les thèmes sont personnalisés en utilisant ThemeRoller ?

 
 

Multiples pages

 

Aller à une page particulière :

 

Navigation

<a href="">Here</a>

<a href="" data-rel="dialog">Here</a>

<a href="" data-role="button">Here</a>

<a href="" data-transition="flip">Here</a>

 
 

Barre de navigation

?     Une barre de navigation peut contenir 1 à 5 onglets

?     Elle est placée dans l'en-tête ou le pied de page

?     Elle est définie en utilisant le data-role navbar et une liste non ordonnée(<ul> … </ul>)

 

?     Pour identifier l’onglet actif, on utilise class= "uibtn-active ui-state-persist"

?     data-id permet de fixer la barre de navigation en dehors d'une transition et créer une barre de navigation persistante


 

Collapsibles

?    Les collapsibles sont définis en utilisant le data-role collapsible

?    Ils sont composés d'un en-tête (utilisant h1 à h6) et puis du code HTML introduit avec p

?data-collapsed permet de définir l'état du collapsible lors de la fermeture (true) ou de l'ouverture (false)



 

Accordéons

? Un accordéon est créé en regroupant une série de collapsibles

 
 

Formulaires

?    Les formulaires sont introduits par une balise form avec des attributs action et method

   <form action="" method="post or get">

<input type="submit" name="mysubmit" value= “Submit" />

</form>

?    Les formulaires sont composés de différents éléments d'interface utilisateur introduits par des labels

 

Formulaires

?    Tous les éléments d'interface utilisateur d'un formulaire sont contenus dans un fieldset afin de présenter les éléments commodément sur ?l'écran

  <fieldset>

</fieldset>

?    Pour améliorer la présentation d’un formulaire, chaque paire (label, composant de l'interface) doit être dans une balise div avec un data-role appelée fieldcontain

 

Formulaires

?     Le type de texte à saisir dans un formulaire peut être :

? text, password, email, tel, url, search, number, date, datetime, time, datetime-local, month, week

?     Pour exiger une valeur, on utilise l’attribut required

?     Pour fournir une valeur par défaut, on utilise l'attribut placeholder

   
 

Emails, SMS et appels téléphoniques

 
 

Ajout de JavaScript dans une page

?    Ajout du code JavaScript après chargement du DOM

(Document Object Model)

 

?    Pour la gestion des événements

 

$(‘#selector’).bind(‘event’,myData, functionName)

Ajout de JavaScript dans une page

Suppression d’un élément d’une liste avec JavaScript

 
 

Cartes - Configuration

?    Pour l'utilisation des cartes en jQuery Mobile, nous avons besoin d’un plugin :

? Plugin Google Maps v3 pour JQuery et JQuery Mobile http://code.

?    En tête du document HTML on ajoute les scripts nécessaires

 

Cartes - Chargement et marqueurs

   
 

                                                                                            Apache Cordova     

?    Version libre de PhoneGap (Adobe)

?    Plate-forme HTML5 qui permet de développer des applications hybrides avec les technologies web, d’ obtenir l'accès aux API, et de publier dans les magasins d’apps (app stores)

?    Peut être combiné avec différentes plateformes mobiles telles que jQuery Mobile, Sensa Touch ou Dojo mobile

?    Les apps sont emballées en applications en utilisant les SDK des plateformes ciblées (iOS, Android,

Blackberry, Windows Phone )

Apache Cordova

?    Application hybride dans l’émulateur Android

 

Boite à outils

?     Editeur

?     Notepad++ ou editeur plus puissant

?     Navigateurs

?     Navigateur Google Chrome

?   Emulateur Opera mobile pour simuler différents téléphones et tablettes

                             ?   Navigateurs mobiles sur votre téléphone

?     Java

?    

?     Transfert de fichiers

?     Filezilla (ou équivalent)

?     Ressources (livres, urls etc)

?     Cordova 2.5.0

?     Application Android

?     Android SDK (contient Eclipse) ?  Autres applications


 

Adobe PhoneGap Build

? Service cloud pour la création d’applications multiplateformes

?

                                                                                                                                                                 


 


 

Conclusion

?    Avoir une bonne boîte à outils

?    Connaître les langages HTML, CSS et surtout Javascript (jQuery et AJAX)

?    Connaître la librairie jQuery Mobile et tout son développement à travers :

?l’importation des librairies requises (.js) et des fichiers (.

css)

?la structure d’une page jQuery Mobile

?les modèles de navigation

?les différents widgets et plugins

?la gestion des évènements

?les besoins de validations par des tests

Conclusion

? Pour du développement hybride :

?Choisir la bonne version de Apache Cordova et connaître ses spécificités

?Ne pas être étonné des différences dans le code entre les différentes plateformes


 

Références

? http://www.developer.nokia.

com/Community/Wiki/JQueryMobile_for_Windows_Phone

 
 
 

Création d’un projet sous Eclipse

?    Dans Eclipse, ouvrir le menu “File” > “New” > “Android Application Project”, donner le nom de l’application, le nom du projet, et les infos sur le SDK etc

 

Création d’un projet sous Eclipse

?    Cliquer sur “Next>” pour configurer les paramètres de votre projet comme l’emplacement du workspace etc

 

Création d’un projet sous Eclipse

?    Cliquer sur “Next>” pour configurer les paramètres de l’ icône de démarrage de votre application

 

Création d’un projet sous Eclipse

?    Cliquer sur “Next>” pour donner le nom de l’activité principale ainsi que celui du layout de votre application

 

de Apache Cordova

?    Créer deux répertoires dans votre projet :

? /libs

? /assets/www

de Apache Cordova

?    Copier dans /assets/www

?    Copier dans /libs

?    Copier le répertoire /xml dans /res

de Apache Cordova

? Ajouter la librairie au chemin de compilation du projet Android. Cliquer (droit) sur > “Build Path” > “Add to Build Path”

 

Configuration du projet pour l’utilisation de Apache Cordova

?  Modifier le fichier principal du projet qui se trouve dans le répertoire /src d’Eclipse

?  Ajouter import org.apache.cordova.*

?  Changer Activity en DroidGap

?  Remplacer la ligne contenant la fonction setContentView()par super.loadUrl(“file: ”)

Configuration du projet pour l’utilisation de Apache Cordova

 

Configuration du fichier

?     Clic droit sur “” > “Open with…”>”Text Editor”

?     Ajouter entre les tags <uses-sdk…./> et <application…./> les tailles d’écran prises en charge par l’application :

? <supports-screens android:largeScreens=”true” android:normalScreens=”true” android:smallScreens=”true” android:resizeable=”true” android:anyDensity=”true”/>

Configuration du fichier

?     Ajouter les permissions nécessaires pour l’ application

?     Exemples de permissions :

?  <uses-permission android:name=”android.permission.VIBRATE” />

? <uses-permission android:name=”android.permission.INTERNET” />

? <uses-permission android:name=”android.permission. RECEIVE_SMS”/>

? <uses-permission android:name=”android.permission. RECORD_AUDIO”/>

? <uses-permission android:name=”android.permission. ACCESS_NETWORK_STATE”/>

?     Pour les changements d’orientation, ajouter :

?  android:configChanges=”orientation|keyboardHidden” dans

<activity>

Exemple - Configuration du fichier

 

Exemple - Hello World

? Créer et ouvrir le fichier dans /assets/www avec le code suivant :

<!DOCTYPE HTML>

<html>

<head>

<title>Cordova</title>

<script type=”text/javascript” src=”cordova-2.5.0. js”></script>

</head>

<body>

<h1>Hello World</h1>

</body>

</html>

Exemple - Hello World

 

Exemple - Hello World

 



20