Auteur LARDOUX Guillaume Contact Année 2014 DEVELOPPEMENT MOBILE AVEC CORDOVA

Transcription

1 Auteur LARDOUX Guillaume Contact Année 2014 DEVELOPPEMENT MOBILE AVEC CORDOVA

2 Sommaire 1. Introduction 2. Installation 3. Fonctionnement 4. Développement 5. Démonstration 2

3 1. Introduction C'est Quoi? Cordova est un framework permettant de construire des applications pour des systèmes embarqués Smartphone, Tablette, Montre etc. Sa particularité est qu'il offre la possibilité de programmer ses propres applications de la même manière que le «Front» d'un Site Internet, c'est-à-dire avec la triple association HTML/CSS/JS! Pourquoi? Il s'agit d'une excellente passerelle pour les développeurs souhaitant s'initier à la création d'applications mobiles sans avoir à étudier d'autres langages comme le JAVA, l'objective C ou le C#, respectivement utilisés sur Android/BlackBerry, iphone et Windows Phone. Possibilités? Cordova offre autant de possibilité qu'un langage natif grâce à ses API, si ce n'est qu'il sera dépendant d'un Web Service pour la mise en place de certaines actions. La raison est que les langages HTML/CSS/JS n'ont pas été conçu à la base pour interagir avec du matériel de ce type, mais pour interagir avec les navigateurs web, leur but reste l'affichage formaté de données. Quand? Cordova n'est pas la réponse ultime à tous les problèmes de développement mobile, il faudra parfois programmer dans le langage natif de l'appareil cible pour avoir accès à des fonctionnalités non encore intégrées à Cordova. Mais il faut tout de même comprendre que ce framework résoudra un nombre conséquent de problèmes grâce à l'utilisation de plugins. Vous avez une procédure de choix stratégique à la page suivante, pour vous permettre de comprendre comment choisir entre un développement natif, hybride via Cordova, ou web pour votre application mobile. 3

4 Source : 4

5 2. Installation Théorie? La procédure d'installation est facile sur le papier, tout le monde parle de «apt-get install» suivi du joli «npm install» sauf qu'en fonction des systèmes il faut installer un nombre affolant de dépendance, ajouter des PPA, changer des permissions... on ne suivra donc pas la documentation officielle, ni même aucune documentation! On va cependant s'en inspirer pour définir un modèle d'installation standard, qui fonctionnera partout. NodeJS NPM Cordova Voici le schéma d'installation ; Cordova repose sur NPM Node Package Manager qui lui-même repose sur NodeJS. Pratique? Passer 'root' Se placer dans /root Télécharger NodeJS Extraire l'archive Se placer dans le dossier Compiler pour sa plateforme Se placer dans /root Télécharger NPM Se placer dans le dossier Compiler pour sa plateforme Installer Cordova Installer le générateur d'icône Test de version su root cd /root wget tar xzvf node-v tar.gz cd node-v /configure && make && make install cd /root git clone cd npm./configure && make && make install npm install -g cordova npm install -g cordova-gen-icon cordova --version Si vous suivez cette procédure, il n'y aura normalement pas de problème sous Linux, si il y'en a cela pourrait venir de vos versions de GCC ou de MAKE. Le 32 bits étant de plus rétro-compatible, cela ne devrait pas poser de souci sur les OS 64 bits. Je ne garantie cependant pas que cette procédure fonctionne sur Mac. 5

6 3. Fonctionnement Documentation? Prenez toujours pour référence la documentation de la version sur laquelle vous travaillez, à savoir celle de Commandes? Version de Cordova Créer un projet Ajouter un plugin Ajouter une plateforme Android Lister les plateformes disponibles Compiler le projet cordova version cordova create Nom_Dossier Nom_ID Nom_Projet cordova plugin add cordova platform add android cordova plateform list cordova build Arborescence?. platforms Contient la build pour chaque plateforme android Build Android ant-build Contient la build compilée assets Contient les fichiers du projet www Contient le code du projet plugins Contient les plugins ajoutés au projet www Répertoire de travail contenant le code du projet Pour votre projet, il faudra absolument définir un fichier «index.html» en tant que point d'entré d'application, comme pour un site Internet. Un message «File Not Found» apparaîtra lors de l'exécution sur l appareil si ce n'est pas le cas. 6

7 Déploiement? Généralement il suffit de récupérer le fichier généré par Cordova APK, XAP, BAR etc. et le glisser sur la carte SD de l'appareil cible. Il suffira ensuite d'aller chercher le fichier avec l'appareil, le sélectionner et se laisser guider pour finalement lancer l'installation. Il faudra peut-être activer l'installation de programme non signé. Notez également que pour Android, à défaut d'un vrai fichier APK, les fichiers «unaligned *.apk» sont fonctionnels pour les tests, il s agit juste d un fichier intermédiaire. 7

8 4. Développement Concept? Concevoir une application mobile avec Cordova peut vite devenir compliqué du fait de l'architecture même de cette application. Il ne s'agit plus de SQL, de PHP ou de Python, ni même de Framework annexe comme Symfony, mais de HTML, de CSS et de Javascript. Votre architecture logicielle devra être complètement repensée pour s'adapter à ce nouveau modèle. Un téléphone reste un téléphone, il n y a pas de liaison directe en fibre optique, les forfaits sont limités en terme de débit, sans parler que la vitesse de téléchargement variera en production à cause du déplacement des utilisateurs. Vous allez devoir construire une application aussi légère que possible tout en allant à l'essentiel. Il faudra utilisez des Web Service pour obtenir des informations ou effectuer des actions lourdes afin de ménager l'appareil, comme générer un PDF par exemple. Comment? Cordova repose sur des langages normalement conçu pour le développement web. Donc, dans les grandes lignes, vous écrirez votre application comme un Site Internet. Outils? L'application devra être ergonomique tout en affichant son contenu de façon identique sur chaque appareil, et il existe une librairie dédiée à ce problème : jquerymobile. Vous allez aussi devoir effectuer des tests d'affichage, vérifier chaque erreur Javascript et CSS. Utilisez simplement votre navigateur préféré pour cela, comme Google Chrome, Opera ou Firefox. 8

9 Certains projets seront plus volumineux que d'autres, et devront avoir une capacité de maintenance facilité. Vous devrez alors exploiter toute la force des «Design Pattern» afin d avoir un code aussi clair et organisé que possible. Backbone.js apporte une réponse architectural en proposant une découpe MVC (Modèle - Vue - Contrôleur) ; il dépend explicitement de underscore.js, vous devrez donc l'ajouter si vous souhaitez l'exploiter. Il se peut également que vous ayez envie de générer des formulaires de manière automatisée, comme c'est souvent le cas avec les CMS, ce qui vous sera possible par l utilisation de Backbone-forms. 9

10 5. Démonstration Nous allons construire une application purement démonstrative grâce à Cordova dans le but de découvrir ce Framework. L'objectif sera de faire un simple programme dans lequel on pourra naviguer dans plusieurs «fenêtres». Techniquement, cela correspond à une navigation entre plusieurs DIV, et pour ce faire nous utiliserons jquerymobile. On commence par créer et configurer notre projet avec Cordova : Créer le projet Ajouter la plateforme Android Générer une icône personnalisée cordova create my_first_app toto my_first_app cordova platform add android cordova-gen-icon L arborescence de notre projet ressemblera à ceci :. img logo.png Icône du programme jquerymobile Répertoire de jquerymobile index.html Le code de notre projet Voici ci-dessous le code HTML de notre première application : <html> <head> <meta charset="utf-8" /> <meta name="format-detection" content="telephone=no" /> <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" /> <link rel="stylesheet" href="jquerymobile/jquery.mobile min.css"> <script src="jquerymobile/jquery min.js"></script> <script src="jquerymobile/jquery.mobile min.js"></script> </head> <body> <div data-role="page" id="one"> <div data-role="header"> <h1><center>application Cordova</center></h1> <div data-role="content"> 10

11 Fenêtre 1 <a href="#two" data-role="button"> Suivant </a> <div data-role="footer" data-position="fixed"> <h1><center>un Footer? =)</center></h1> <div data-role="page" id="two"> <div data-role="header"> <h1>application Cordova</h1> <a href="#" data-role="button" data-rel="back" data-icon="back"> Retour </a> <div data-role="content"> Fenêtre 2 <div data-role="footer" data-position="fixed"> <h1><center>un Footer? =)</center></h1> <script type="text/javascript" src="cordova.js"></script> </body> </html> Compilez ensuite le projet avec la commande «cordova build», récupérez le fichier APK comme expliqué plus haut et installez l'application sur l'appareil. L'icône de base est un mouton blanc cubique, mais vous pouvez facilement en changer avec la commande «cordova-gen-icon» si vous modifiez au préalable le fichier «logo.png». 11