Projet EI4-AGI. Application Android. Corentin LAURENT / Bilal EL BAHRI / Benjamin DEMONET

Transcription

1 Projet EI4-AGI Application Android Corentin LAURENT / Bilal EL BAHRI / Benjamin DEMONET

2 Table des matières I - Planète-ISTIA, Android edition... 3 A) Planète-ISTIA, le site des étudiants... 3 B) Fonctionnalités de l application... 3 C) Le développement Android... 4 Le SDK Android... 4 Plugins de connexion SDK Android IDE Eclipse... 5 II Fonctionnalités et spécificités de l application... 9 A) L interface graphique :... 9 Présentation générale... 9 Technicité B) Communication avec la base de données du site Planète-ISTIA : Web Service 12 C) Base de données SQLite La classe bddsqlite Les classes de manipulation des données La classe bddadaptateur D) Connexion Script PHP connexion La classe Connexion L activité ConnexionActivity Le multitâche III Bilan du projet A) Difficultés rencontrées Manque de temps Difficultés liées au langage Débogage B) Améliorations et fonctionnalités futures C) Apports personnels

3 I - Planète-ISTIA, Android Edition A) Planète-ISTIA, le site des étudiants Planète-ISTIA est non seulement le site du BDE et du BDS mais c est aussi un espace de discussion entre futurs, ex et actuels étudiants, un site utile (emplois du temps, informations) et un site de détente (bande dessinée, interview, album photo). Il a été réalisé à la manière d un blog avec des articles en page d accueil. De cette manière on transite l information venant du BDE et du BDS. De plus les étudiants peuvent lire un certain nombre d articles en rapport avec l informatique, la vie étudiante, les évènements de l école... Le forum est un élément essentiel du site. Il permet non seulement aux étudiants de réagir aux articles, mais il permet surtout aux étudiants de communiquer entre eux. Le site propose un espace membre aux étudiants qui le souhaitent. Ils doivent pour cela s inscrire sur le site en choisissant un login et un mot de passe. Certaines fonctionnalités du site comme le commentaire des news, l envoi de messages sur le forum, l espace d entraînement, le sondage, sont réservés aux utilisateurs inscrits. Planète ISTIA a été développé sur la base d un système de gestion de contenu, Joomla. Tout ce qui constitue le site est stocké dans une base de données : les articles, les images, les utilisateurs, les commentaires, Plusieurs tables sont générées automatiquement lors du développement du site et elles sont toutes en relation. B) Fonctionnalités de l application Le site Planète-ISTIA ayant des ne trop nombreuses fonctionnalités, nous avons décidé d en implémenter que quelques unes dans l application afin de ne pas dépasser le temps imparti qui nous étais donné. Nous avons donc choisi de coder 3 fonctionnalités : - Connexion/Identification : Sur le site les utilisateurs du forum ont tous besoin de s identifier sur le site afin de pouvoir participer, donc nous réutilisons cette connexion dans l application. Au lancement de l application, l utilisateur devra s identifier à l aide de son login et de son mot de passe obtenu lors de son inscription sur Planète-ISTIA. 3

4 - Lecture des news : La seconde fonctionnalité que nous avons retenue est la lecture des news. En effet sur le site, régulièrement des articles sont postés en première page du site, il sera donc possible de pouvoir les lire sur l application Android Planète- ISTIA. - Commentaires : Et enfin nous offrons la possibilité aux utilisateurs de pouvoir lire et commenter ces news. C) Le développement Android Le développement d applications, sous le système pour Smartphone Android, peut être réalisé dans le langage objet Java, complété par une importante librairie spécifique au développement mobile. Pour l interface de développement, nous allons vous expliquer pourquoi nous avons choisi d utiliser Eclipse. Il est toutefois possible d utiliser d autres IDE (environnement de développement logiciel) tel que Netbeans. Le SDK Android Pour le développement mobile, Google met à disposition une boîte à outil de développement permettant d émuler un Smartphone sous Android, directement sur son ordinateur, grâce à la machine virtuelle «Dalvik». Ce dispositif permet de gagner du temps, en compilant directement l application sur un l interface fictive. Ainsi, on peut percevoir le rendu final. Android SDK disponible à cette adresse : Il existe à ce jour, 7 plateformes différentes du système Android, allant de la version 1.5 à la 3.0 récemment mise en ligne. Contrairement à des systèmes d exploitation mobiles comme iphone, où tous les téléphones et autres appareils sont mis à jour en même temps, les versions plus anciennes d Android sont toujours susceptibles d obtenir une version compatible de chaque application (bien qu aujourd hui, la 1.5 soit un peu laissée à l abandon). Il est donc possible, grâce aux différentes plateformes du SDK, de vérifier la compatibilité de notre développement avec celles-ci. 4

5 Figure 1 Android SDK 2.1 Plugins de connexion SDK Android IDE Eclipse Pour faire le lien entre l IDE et le SDK Android, il existe des plugins qui intègrent tout le développement d une application au sein d un seul logiciel. Sous l IDE Eclipse, le plugin est assez complet et permet d effectuer les différentes étapes de la réalisation d une application : Intégration des librairies spécifiques Android nécessite d intégrer les librairies spécifiques au développement mobile, afin de pouvoir pleinement utiliser les fonctionnalités du système (matériel, interface graphique). Ces librairies servent à implémenter les caractéristiques du développement pour ce système : - Les classes peuvent représenter des activités, lorsqu elles dérivent de la classe «Activity» c'est-à-dire des parties de programmes, complètements autonomes qui peuvent s appeler et transmettre des informations entre elles. - Sous Android, l interface utilisateur d une application est gérée par des fichiers XML qui définissent la structure graphique générale d une activité, ou bien d un élément complexe, contenant par exemple une liste de souséléments. - Les permissions et déclarations des activités sont obligatoirement inscrites dans un fichier que l on retrouve dans chaque projet d application : l AndroidManifest.xml. Celui-ci doit être rempli sous peine de ne pas pouvoir accéder aux périphériques du téléphone (webcam, internet) aux différents 5

6 éléments utilisateur (contact, messages, mails), ou bien tout simplement ne pas pouvoir lancer une activité. - Le système Android fonctionne sur le principe des Threads. Ce sont des tâches qui peuvent être lancée de façon synchrone ou asynchrone et ainsi rendre plus rapide une application. Mais attention, les threads réservent souvent quelques surprises, car leur fonctionnement est très pointilleux (pour des raisons de sécurité 1 ) et il est important de bien comprendre leur fonctionnement avant de les utiliser, au risque qu absolument rien ne fonctionne. - Un certain nombre de «Packages» sont mis à la disposition du développeur afin qu il puisse programmer rapidement des applications efficaces documentation à cette adresse : Intégration d outils indispensables Pour tout développeur, un outil reste indispensable lorsque l on veut trouver la cause de problèmes d exécution du code : le debugger. L outil de base, fourni avec l IDE Eclipse est totalement fonctionnel, mais dès lors qu on essaye de trouver les sources des problèmes, le debugger se fige et ne fournit pas assez d information sur l exception pour espérer la résoudre. Un plugin vient ajouter une description accrue des incidents d exécution d applications Android : le «Dalvik Debug Monitor Server» ou DDMS. Ce moniteur d exceptions présente de façon efficace, toutes les exécutions effectuées sur le téléphone. Toutefois, il n est pas facile de localiser la source du problème. Cette outil fournit aussi des fonctionnalités intéressantes comme la capture d écran à tout moment ou encore la navigation de fichiers et dossiers du téléphone. 1 S il était possible de lancer des Threads fonctionnant en parallèle de notre application, sans aucune sécurité, alors il serait très facile de voler des informations à l utilisateur à son insu. C est pourquoi, un Thread principal gère l affichage de l interface utilisateur, et les autres Threads ne peuvent que dialoguer avec lui, par des avertissements spécifiques, pour toute modification. 6

7 Figure 2 DDMS : au centre le log de l'exécution Développement des XML d interface utilisateur Comme dit précédemment, les interfaces utilisateurs sont définies dans des fichiers XML spécifiques, qui contiennent des éléments tels que des TextView, affichant de simples textes, des WebView, capable de charger du contenu web, des boutons, zones de texte etc Afin de faciliter ce développement, une auto-complétion peut être implantée dans l IDE Eclipse grâce aux plugins Android. Ensuite, pour pouvoir visualiser rapidement et sans avoir besoin de compiler systématiquement sur la machine virtuelle, un plugin permet d afficher instantanément le rendu final de chaque XML. Figure 3 Visualiser les interfaces utilisateur (XML) 7

8 Au final, Eclipse devient incontournable, mais comme dit précédemment, il est possible d utiliser d autre IDE comme Netbeans, avec son plugin disponible à cette adresse : 8

9 II Fonctionnalités et spécificités de l application A) L interface graphique : Présentation générale Lors du lancement de l application, l utilisateur arrive sur la page d accueil où on lui demande de patienter pendant le chargement de l application qui débouche ensuite directement sur la page de connexion. L utilisateur doit alors s identifier en rentrant le login et le mot de passe qui lui sert à se connecter sur le site Planète-ISTIA. Si le login et/ou le mot de passe n est pas correct l application lui signalera et l invitera à recommencer. 9

10 Une fois l identification réussie, l utilisateur arrive sur l onglet «news», qui lance le chargement depuis internet des news et qui les affiche sous forme de liste. L utilisateur peut alors choisir la news qui l intéresse et cliquer dessus pour l ouvrir dans une nouvelle page. Il peut également commenter celle-ci. Il existe un autre onglet nommé «forum» qui n est pas actif pour le moment. Nous voulions afficher dans cet onglet le forum de Planète-ISTIA mais nous n en avons pas eu le temps. 10

11 Technicité Chaque «page» est construite graphiquement grâce un fichier XML. C est dans ce fichier XML que l on déclare les différents boutons, labels et autres champs de texte qui composeront l interface de la page. Ce fichier se trouve dans le dossier «layout» de l arborescence du projet. On peut construire ce fichier directement en tapant le code XML soit grâce à l outil graphique du plug-in Android en déplaçant les différents items sur l écran simulé. Chaque «page» de l application est appelée «Activity» ou «Activité». Ces activités sont des classes JAVA comme les autres à la différence près que qu elle nécessite une interface graphique. Chaque activité a donc son propre «layout» (fichier XML) que l on doit lier lors de l appel de cette activité. Chaque activité possède une méthode «oncreate()» qui se lance dès sa création. C est donc dans cette méthode que l on lie le fichier XML correspondant grâce à la méthode «setcontentview()» à qui on passe en paramètre le «layout» correspondant. 11

12 B) Communication avec la base de données du site Planète-ISTIA : Web Service Le système Android ne permet pas nativement de communiquer avec une base de données distante située sur Internet. Or toutes les données que l on souhaite afficher dans l application se trouvent sur Internet. Il nous a donc fallu contourner le problème en créant un «web service» parallèlement au développement de notre application. Ci-dessous un petit schéma explicatif : Comme la communication entre l application Android et la base de données du site est impossible, Android n autorisant pas nativement cette communication, nous avons du créer nos propres pages PHP que l on a déposé sur le serveur où est hébergé le site Planète-ISTIA. Ce sont ces pages PHP qui communiquent avec la base données et ce sont ces pages que l on interroge avec l application. Ces scripts PHP servent d intermédiaire entre l application et la base de données. C est ce principe que l on appelle «Web Service». 12

13 Nous avons donc du créer 3 pages PHP : - Connexion.php Cette page s occupe de vérifier le login et le mot de passe de l utilisateur et donc d autoriser ou non la connexion à l application. - News.php Elle permet de d interroger la base de données afin de récupérer toutes le news et de les transmettre à l application. - Commentaires.php Ce script permet de récupérer dans la base de données les commentaires correspondant à la news cliquée par l utilisateur. Pour le moment, il ne récupère que les commentaires, il ne permet pas d écrire les commentaires de l utilisateur dans la base de données. C) Base de données SQLite Le fonctionnement de notre application requière la manipulation de certaines données au niveau de plusieurs activités. Il a donc fallu gérer leur stockage et leur manipulation sur un support. Android offre cette possibilité grâce à SQLite, un support de bases de données relationnelles très léger. Une base de données SQLite a la particularité de s exécuter sans serveur. Chaque base de données créée est réservée à l application qui en est l origine, c est-à-dire qu il n y a que cette application qui peut y accéder. Il faudra utiliser un fournisseur de contenu pour partager des données d une base de données à d autres applications. Cependant la création d une base de données sur mobile nécessite une attention particulière, en effet les tables et les requêtes doivent rester simples. De plus, le volume des données stockées doit rester raisonnable et les requêtes ne doivent pas être trop fréquentes. En effet nous ne sommes pas sur des serveurs hyper puissants mais sur des appareils mobiles avec un espace de stockage, de mémoire vive et de puissance assez limité. 13

14 La classe bddsqlite Le SDK Android offre une classe d assistance, SQLiteOpenHelper, permettant la gestion de la création de base de données ainsi que la gestion des versions. Nous avons donc dérivé cette classe avec notre classe bddsqlite afin de personnaliser les méthodes pour notre application. Méthode de création de la base de données public void oncreate(sqlitedatabase db) { // TODO Auto-generated method stub db.execsql(requete_creation_tabarticle); db.execsql(requete_creation_tabuser); db.execsql(requete_creation_tabcomment); } Si on essaye d ouvrir une base de données qui n existe pas en utilisant la classe bddsqlite, cette méthode est appelée. C est ici que les tables sont créées. Dans notre base, nous avons créé trois tables : une pour les articles, une pour l utilisateur qui s est connecté à l application et enfin une pour les commentaires. Seule la table TabUser est actuellement utilisée pour stocker l identifiant de l utilisateur ainsi que son id dans la base de données du site internet. Les tables TabArticles et TabComment ne sont pas encore utilisées dans l application. Nous les avons créées pour stocker les articles, ou commentaires, en entier plus certaines caractéristiques (date, titre, ), cependant il faudra revoir la structure de ces tables quand on commencera à les utiliser dans l application et donc les adapter à l utilisation que l on en fera. Voici la requête de création de la table TabUser : private static final String REQUETE_CREATION_TabUser="CREATE TABLE " + TABLE_USER + "(" + COLONNE_ID_USER + " INTEGER PRIMARY KEY AUTOINCREMENT, " + COLONNE_USERNAME + " TEXT NOT NULL, " + COLONNE_ID_BDD + " INTEGER NOT NULL);"; On a bien sûr défini auparavant toutes les caractéristiques de la table User (nom de la table et des champs) : private static final String TABLE_USER="table_user"; private static final String COLONNE_ID_USER="id"; private static final String COLONNE_USERNAME="username"; private static final String COLONNE_ID_BDD="id_bdd"; 14

15 Méthode de mise à jour de la base de données public void onupgrade(sqlitedatabase db, int oldversion, int newversion) { // TODO Auto-generated method stub db.execsql("drop TABLE " + TABLE_PLANETE_ISTIA + ";"); db.execsql("drop TABLE " + TABLE_USER + ";"); db.execsql("drop TABLE " + TABLE_COMMENT + ";"); oncreate(db); } Cette méthode est appelée lorsque la version de la base de données change. On supprime dans cette méthode toutes les tables, puis on appelle la méthode oncreate pour recréer les tables. Ainsi au changement de version, les id repartent à 0. Enfin pour terminer avec la présentation de cette classe, il reste le constructeur qui prend en paramètres le contexte, le nom de la base de données, un objet de la classe CursorFactory (que l on met toujours à null) et la version. Il appelle le constructeur de la classe SQLiteOpenHelper qui prend les mêmes paramètres. public bddsqlite(context context, String nom, CursorFactory cursorfactory, int version) { super(context, nom, cursorfactory, version); } Grâce à cette classe d aide, le SDK nous facilite l ouverture, la création et la mise à jour d une base de données. Nous allons voir maintenant comment nous accédons aux données stockées dans la base de données SQLite et comment nous les manipulons. Les classes de manipulation des données Pour chaque table, nous avons créé une classe typée pour nous faciliter la manipulation des données. Chaque champ de la table correspond à un attribut de la classe. De plus nous avons défini un ensemble de getters et de setters ainsi qu une méthode tostring pour afficher l objet avec tous ses attributs. Prenons l exemple de la table User car il s agit de la seule table que l on exploite pour le moment dans notre application. Dans cette table, il y a l ID qui correspond à un entier et qui s auto-incrémente, l username qui correspond à une chaine de caractères représentant l identifiant de l utilisateur et enfin l ID de l utilisateur sur la base de données du site qui est un entier. Nous avons donc créé une classe User possédant trois 15

16 attributs privés qui correspondent à ces trois champs et possédant le même type. private int id; private String name; private int id_pi; Ainsi pour manipuler chaque ligne d une table, on pourra définir un objet correspondant à la table et attribuer aux attributs de cet objet la valeur du champ correspondant du résultat de la requête émise. C est la classe bddadaptateur qui émettra les requêtes et qui fera le lien entre la base de données et la couche métier par le passage d une ligne de résultat de requête à un objet. La classe bddadaptateur Dans cette classe nous avons défini un ensemble de méthodes qui nous permette d ouvrir ou de fermer la base de données, d effectuer des requêtes, d ajouter, de supprimer ou bien de mettre à jour des données. Cette classe possède deux attributs, un objet de la classe SQLiteDatabase c est-à-dire une instance de notre base de donnée et un objet de la classe bddsqlite que l on a défini plus haut et qui permet l accès, la création et la mise à jour de notre base de données. private SQLiteDatabase mabasedonnees; private bddsqlite basehelper; Dans le constructeur, on instancie la classe bddsqlite : public bddadaptateur(context ctx) { basehelper = new bddsqlite(ctx, BASE_NOM, null, BASE_VERSION); } Ainsi on va pouvoir récupérer en mode lecture ou bien lecture/écriture une instance de notre base de donnée grâce aux méthodes getreadabledatabase ou getwritabledatabase de la classe SQLiteOpenHelper que notre classe bddsqlite a hérité. On définit une méthode d ouverture de la base qui va nous permettre de mettre dans la variable mabasedonnees, l instance de la base de données et ainsi permettre les différentes manipulations. public void open() { mabasedonnees = basehelper.getwritabledatabase(); } Pour chaque table, nous avons défini une méthode qui assure l insertion d un élément dans la table, une méthode pour la suppression d un élément et deux méthodes pour la récupération d un élément. 16

17 Lorsqu un utilisateur se connecte en entrant son identifiant et son mot de passe, on insère dans la table User son identifiant et son id qu il possède dans la base de données sur le serveur. Ainsi on a défini une méthode qui prend en entré un objet User. Dans un objet de type ContentValues, on associe à chaque champ de la table, la valeur d un attribut de l objet User. Enfin on insère dans la table la nouvelle ligne avec les valeurs des attributs de l objet User. public long insertuser(user user) { ContentValues valeurs = new ContentValues(); valeurs.put(colonne_username, user.getname()); valeurs.put(colonne_id_bdd, user.getid_pi()); return mabasedonnees.insert(table_user, null, valeurs); } La table User ne doit contenir qu une seule ligne au maximum car elle correspond à l utilisateur qui s est identifié et connecté au site. Ainsi pour savoir si l utilisateur est connecté, on exécute une requête de type select afin de vérifier si la table User est vide ou non. Si elle l est, l utilisateur n est pas connecté. public User getuser() { String requete = "SELECT * FROM table_user"; Cursor c = mabasedonnees.rawquery(requete, new String[0]); return cursortouser(c); Pour exécuter une requête select dans la base de données, on utilise la méthode rawquery de la classe SQLiteDatabase. Cette méthode prend deux paramètres : une chaine de caractères correspondant à la requête de type preparedstatement avec des «?» à la place des valeurs, un tableau de String correspondant aux paramètres de la requête. Dans notre cas il n y a qu une seule ligne dans la table donc on sélectionne tout, le second paramètre est un tableau vide. La méthode rawquery renvoit un objet de type Cursor qui correspond aux lignes de résultat de la requête. On a défini une méthode interne qui permet de convertir un objet de type Cursor en objet de type User. private User cursortouser(cursor c) { } if (c.getcount() == 0) return new User(); c.movetofirst(); User user = new User(); user.setid(c.getint(num_colonne_id_user)); user.setname(c.getstring(num_colonne_username)); user.setid_pi(c.getint(num_colonne_id_bdd)); c.close(); return user; 17

18 Cette méthode privée renvoie un objet de type User. Elle prend en entrée un objet Cursor, le résultat de la requête. Si la requête n a rien donné, dans ce cas la méthode renvoie un User «vide». Sinon, on crée un User, puis on lui rajoute les éléments du résultat obtenu colonne par colonne grâce à la méthode getint (ou getstring, getdouble, ) de l objet Cursor qui prend en paramètre le numéro de la colonne correspondante dans la table User. private static final String COLONNE_ID_USER = "id"; private static final int NUM_COLONNE_ID_USER = 0; private static final String COLONNE_USERNAME = "username"; private static final int NUM_COLONNE_USERNAME = 1; private static final String COLONNE_ID_BDD = "id_bdd"; private static final int NUM_COLONNE_ID_BDD = 2; A la fin on ferme le Cursor puis on retourne l objet user avec les données de la table. Quand l utilisateur souhaite se déconnecter, on le supprime de la table User grâce à la méthode suivante : public int removeuser() { return mabasedonnees.delete(table_user, null, null); } En mettant les deux derniers paramètres à null, on supprime tout dans la table User. Enfin après chaque utilisation de la base de données, il ne faut pas oublier de la fermer avec la méthode suivante : public void close() { mabasedonnees.close(); } D) Connexion La connexion est un élément essentiel de l application. En effet, elle doit limiter l accès aux fonctionnalités du site réservées qu aux seuls inscrits. Pour commenter les news ou bien pour poster des messages sur le forum, il faut avoir un compte. Chaque utilisateur enregistré sur le site possède un login et un mot de passe qui sont stockés dans la table jos_users de la base de données du site internet. Lorsqu un utilisateur s identifiera, il faudra interroger la base de données de planete-istia et vérifier que l identifiant ainsi que le mot de passe saisis s y trouvent bien. Si c est le cas, on stockera le login de l utilisateur dans la table user de SQLite ainsi que son id dans la table jos_users car il sera utile pour l envoi de commentaires. 18

19 Script PHP connexion2 Pour interroger la base de données avec la table jos_users, nous avons dû écrire un script PHP. Ce script, placé au niveau du serveur contenant le site, reçoit deux paramètres, le login et le mot de passe. Il envoie une requête de sélection du mot de passe et de l id, sur la table jos_users, pour un utilisateur ayant le même login que celui saisi au niveau de l application. Si la requête renvoie une réponse, on vérifie que le mot de passe saisi correspond bien au mot de passe envoyé. Si tout est bon, on affiche «id_dans la base : 2», si le mot de passe ne correspond pas, on affiche «0 :1» enfin si c est le login qui est erroné, on affiche «0 :0». Ces caractères affichés seront exploités dans l application. Nous avons utilisé PDO (PHP Data Objects), une interface pour SGBD orientée objet qui permet la gestion d exceptions. Tout d abord la connexion : $pdo_options[pdo::attr_errmode] = PDO::ERRMODE_EXCEPTION; $bdd = new PDO('mysql:host=db2599.1and1.fr;dbname=db ', 'dbo ', 'android49'); Une connexion revient à créer un objet PDO avec comme paramètres d entré : le chemin vers le serveur, le nom de la base de données, un nom d utilisateur et le mot de passe. S il y a une erreur au niveau de l un des paramètres saisis, le script affiche toute la ligne d erreur et donc le mot de passe inclus ce qui n est pas souhaitable. Cependant il est possible de capturer l erreur de saisi et de gérer l exception dans un «try catch», ainsi on évite les risques. catch (Exception $e){ die('erreur : '. $e->getmessage());} La requête : Lorsque la connexion est bien établie, nous allons pouvoir envoyer des requêtes avec les paramètres envoyés à la page PHP récupérés dans des variables : $mdp= $_REQUEST['mdp']; $user= $_REQUEST['user']; $bdd->query('set CHARACTER SET utf8'); $reponse = $bdd->query('select password, id FROM jos_users WHERE username ="'.$user.'"'); 19

20 Cryptage du mot de passe: Le CMS joomla a la particularité de crypter les mots de passe contenu dans la base de données dans un type de cryptage md5. Mot de passe crypté dans la base de données Ce mot de passe est de la forme : mot de passe crypté : clé de cryptage générée aléatoirement Pour comparer le mot de passe saisi au mot de passe retourné par le résultat de la requête, il faut le crypter en md5 en récupérant la clé de cryptage du mot de passe crypté. $password=$donnees['password']; //on récupère le mot de passe du résultat de la requête $part = explode(":",$password); //on sépare la clé de cryptage du mot de passe crypté $salt = $part[1]; //on récupère la clé $encrypted_password = md5($mdp. $salt).":".$salt; //on crypte le mot de passe envoyé par l appli La classe Connexion C est cette classe qui communique avec la page connexion2.php sur le serveur. Son constructeur prend en paramètres le login et le mot de passe saisis ainsi que le contexte. On crée tout d abord un objet de la classe HttPost, afin d envoyer les données à la page php selon la méthode POST. Cet objet prend à sa création l url de la page php en paramètre. //On créé une liste qui contient les paramètres à envoyer List<NameValuePair> namevaluepairs = new ArrayList<NameValuePair>(); namevaluepairs.add(new BasicNameValuePair("user", login)); namevaluepairs.add(new BasicNameValuePair("mdp", password)); UrlEncodedFormEntity formentity = new UrlEncodedFormEntity(nameValuePairs); httppost.setentity(formentity); 20

21 Après avoir créé l objet HttPost auquel on ajoute la liste des paramètres, on exécute la requête http puis on récupère le résultat, c est-à-dire ce qui est affiché par la page connexion2.php. HttpResponse response = httpclient.execute(httppost); reader = new BufferedReader(new InputStreamReader(response.getEntity().getContent(), "iso "), 8); String s = reader.readline(); En fonction des paramètres envoyés on récupérer une chaine de caractère du type : integer :integer Le premier entier correspond à l id de l utilisateur dans la base de données retourné si le login et le mot de passe sont corrects. Le deuxième entier sera égal à 0 si l identifiant renvoyé est incorrect, 1 si le mot de passe est erroné ou 2 si l utilisateur est bien enregistré dans la base. On récupère cette valeur : String[] requete = s.split(":"); phprep = Integer.parseInt(requete[1].trim()); Si les login et mot de passe sont bons, on ouvre la base de données SQLite, on crée un utilisateur avec comme paramètres le login saisi et l id retourné par la page php, on vide la table User puis on insère le nouvel utilisateur. Enfin on ferme la base de données puis on affiche un message de bienvenue dans un toast. if (phprep == 2) { bddadaptateur pibdd = new bddadaptateur(ctx); // ouverture de la bdd pour ecrire dedans pibdd.open(); int id = Integer.parseInt(requete[0].trim()); User user = new User(login, id); pibdd.removeuser(); pibdd.insertuser(user); pibdd.close(); Toast.makeText(ctx,"Bienvenue " + user.getname() + " sur planeteistia!", Toast.LENGTH_LONG).show(); } Si le mot de passé renvoyé est erroné, on affiche un message d erreur dans un toast. else if (phprep == 1) {Toast.makeText(ctx, "Mot de passe erroné", Toast.LENGTH_LONG).show();} 21

22 Si c est l identifiant qui est mauvais, on affiche le toast: else {Toast.makeText(ctx, "Identifiant erroné", Toast.LENGTH_LONG).show(); } L activité ConnexionActivity Il s agit de l activité à l origine de la page de connexion. Lorsque l utilisateur rentre son login et son mot de passe, il appuie sur le bouton ok. Le contenu des champs de saisie est récupéré puis il est envoyé en paramètre au constructeur d un objet de type Connexion. Si la connexion s est bien faite, un toast de bienvenue apparait et un objet User est inséré dans la table du SQLite. Après la création de l objet connexion, l appui sur le bouton doit lancer l activité qui charge la liste des News. Cependant elle doit se faire que si l utilisateur est connecté. On crée donc un objet de type bddadaptateur afin d ouvrir la base de donnée, on récupère l objet User dans la table User et on vérifie que l user renvoyé n est pas vide. En effet cela voudrait dire que l utilisateur n est pas connecté, il n a donc pas le droit de lire les news. bddadaptateur pibdd= new bddadaptateur(connexionactivity.this); pibdd.open(); User user= pibdd.getuser(); if(user.getname()!=null){ pibdd.removeuser(); Intent edit = new Intent(ConnexionActivity.this, TabSample.class); startactivity(edit); finish(); } E) Affichage des news L application devait-être capable d afficher de façon personnalisée les news disponibles sur le site internet. Comme énoncé précédemment, nous avons opté pour un accès via un script PHP, disponible à cette adresse : ou les paramètres X et Y sont les paramètres du «LIMIT» de la requête SQL. Le paramètre selected vaut 1, pour ne récupérer que le titre et le texte d introduction, et 2 pour récupérer la news en entière. Celui-ci permet d afficher plus rapidement la liste des news sur le téléphone. Le script renvoie les news sélectionnées au format JSON, qui est un format XML très léger. 22

23 Script select.php Les objets JSON sont très pratiques car ils sont très bien intégrés dans les librairies JAVA spécifiques à Android : il existe l objet JSONObject sur lequel on peut appliquer des méthodes de traitement. Au final, dans les activités, il suffit d utiliser les Objets HttpClient, HttpPost, HttpResponse afin de télécharger le JSON depuis le script PHP. 23

24 L interface utilisateur La première activité qui est présentée dans la partie News est celle qui affiche une liste des news disponibles sur le site internet : Activité PIGetNews Présentation d une news 1 2 Fichier d interface utilisateur : affichageitem.xml 1. Title : c est le titre de l article, il est afficher dans un TextView, objet qui permet d attribuer un fond, une taille et une police personnalisée 2. Introtext : le un texte d au maximum 150 caractères, qui correspond au début de l article. Toujours affiché dans un TextView, le fond est complémentaire de celui du title. A l aide d une ListView, on peut afficher une liste d élements de ce type. ListView personnalisée pour les news 1 Fichiers d interfaces utilisateur : pigetnews.xml, newsfooter.xml 2 1. Listnews : Un objet ListView est un élément très particulier de l interface utilisateur. Il se compose d une liste d éléments tels que les Textview. 2. plusb : Ce bouton, ajouter en pied de la ListView (footer), permet à l utilisateur de demander d afficher des news plus anciennes. 24

25 Il est donc possible de mettre à jour dynamiquement une Listview, nous verrons comment plus loin dans le rapport. Lorsque l on clique sur une news, une autre activité démarre. Celle-ci est chargée d afficher l intégralité de la news : Activité PIShowNews Webview : un objet intéressant 1 Fichiers d interfaces utilisateur : pishownews.xml 2 1. LinearLayout : une barre de navigation composée de deux boutons permet de condenser l interface utilisateur. Le bouton précédent ferme l activité, pour pouvoir retourner à la précédente (PIGetNews). 2. Webview : Objet intéressant qui permet de charger du code HTML dans le bon format. Les polices du texte sont respectées, ainsi que leur style (gras, paragraphe ). On peut aussi charger les images, en donnant à cette objet l adresse de base du site internet (ce nous verrons plus loin en détail). Le webview fournit aussi un certain nombre de paramètres comme le zoom et la mise en page du contenu. Lorsque l on clique sur le bouton commenter, on lance une nouvelle activité chargée de récupérer les commentaires correspondant à un article spécifique : Activité PIComments. Cette activité communique avec le script PHP disponible à cette page : où ID est l ID de la news que l utilisateur vient de visionner. 25

26 ListView personnalisée pour les commentaires 1 2 Fichiers d interfaces utilisateur : commentitem.xml picomments.xml commentsfooter.xml 3 1. LinearLayout : toujours la barre de navigation, composée d un bouton précèdent. 2. ListCom : c est une listview affichant les commentaires récupérés depuis le serveur de planete-istia. On affiche le nom d utilisateur et la date à laquelle il a posté ce commentaire dans un TextView, son commentaire dans un autre. 3. edittext1 : Objet EditText, ajouté au footer de la ListCom, permettant à l utilisateur d écrire son commentaire avant de l envoyer sur le serveur. Les XML sont donc très pratiques pour définir les différents aspects de l application. Il a fallu ensuite, implémenter ces interfaces dans le programme afin de leur donner leur fonction finale. 26

27 Liaisons Interfaces Activités Dans chaque activité, des XML sont implémentés. On peut alors récupérer les éléments qui le composent et leur attribuer un rôle dans l application. Liaison simple On commence par définir les types d objets que nous allons lier, de façon globale dans la classe TypeD objet NomDeL objet; Dans la méthode «oncreate» de chaque Activité, on commence par définir le XML à lier à l activité : setcontentview(r.layout.pigetnews); La commande pour une Lier un objet XML simple, tel qu un Button ou un TextView est alors la suivante : NomDeL objet = (TypeD objet) findviewbyid(r.id.nomdel élementxml); Notre élément XML est maintenant lié à notre activité. Liaison des Objets plus complexes ListView Pour l objet ListView, il y a plus de détails à paramétrer. On commence, comme les objets simples, par définir la ListView en global dans la classe : ListView malistview; Toujours comme un objet simple, dans la méthode «oncreate» on la récupère depuis le XML : malistview = (ListView) findviewbyid(r.id.listnews); Mais ce qui change c est qu il va falloir définir un «Adapter». Un Adapter est un Objet capable d organiser les données et de les placer dans une ListView, ou d autres objets. 27

28 On lie donc cet objet à la ListView, tout d abord en le déclarant comme global. On définit aussi un Array contenant des tableaux associatifs (Hashmap, de type Clé - valeur) : SimpleAdapter monadapter = null; ArrayList<HashMap<String, String>> listeelements = new ArrayList<HashMap<String, String>>(); On le définit, afin de pouvoir lui donner des informations à ranger. On doit lui donner monadapter = new SimpleAdapter(this.getBaseContext(), listeelements, R.layout.affichageitem, new String[] { "title", "introtext" }, new int[] {R.id.title, R.id.introtext }); Entre temps, si l on désire mettre un footer dans la listview (Comme le bouton «plus»de l activité PIGetNews) alors il faut créer une View, et l attribuer au footer de la ListView : View footerview = getlayoutinflater().inflate(r.layout.newsfooter, null); malistview.addfooterview(footerview); Enfin, on attribue l Adapter à la ListView malistview.setadapter(mschedule); WebView Pour la WebView, on commence par la déclarer dans la méthode «oncreate» de la classe WebView webview = (WebView) findviewbyid(r.id.webview); On peut définir quelques paramètres comme la possibilité de zoomer, et l affichage des boutons de contrôle du zoom, pratiques pour l utilisateur. webview.getsettings().setsupportzoom(true); webview.getsettings().setbuiltinzoomcontrols(true); Une fois que les données sont téléchargées, on peut les passer en paramètres de la webview, ainsi que l encodage, le mime type et l adresse de base du site internet webview.loaddatawithbaseurl(" introtext + fulltext, mimetype,encodage," 28

29 Liaisons entre Activités Nous allons vous expliquer comment nous avons réalisé les connexions entre les applications, et comment nous passons d une à une autre. Les Intent Pour passer d une activité à une autre, il faut définir un objet Intent, qui permet de définir la class à appeler ensuite Intent intent = new Intent(ActivitéEnCours.this, ActivitéAIntenter.class); Enfin, il suffit de lancer l Intent, avec un numéro de thread en paramètre startactivityforresult(intent, 2); Mais comment faire si l on désire transmettre des paramètres à la nouvelle activité? Les Objets Bundle Ces Objets permettent de transmettre n importe quels types d informations à la nouvelle activité intentée. Pour l utiliser il faut tout d abord le déclarer Bundle objetbunble = new Bundle(); Ensuite, il suffit de lui ajouter des éléments à transmettre objetbunble.putint("idnews", id); objetbunble.putstring("title", title); On peut ensuite donner cet objet à l objet Intent intent.putextras(objetbunble); 29

30 L objet Intent combiné au Bundle nous a permis de connecter nos activités entre elles comme le schéma ci-dessous le montre. Schéma des Activités de l application Intent : Objet Bundle contenant le N de la news sélectionnée dans la ListView «ListNews». Intent : Objet Bundle contenant l ID de la news visualisée, afin d obtenir ses commentaires. Le multitâche Pour développer une application fonctionnelle rapide et agréable à utiliser, il est important qu elle soit rapide, et qu elle ne bloque pas. Dans notre application, lorsque nous chargeons du contenu venant du résultat de l exécution des scripts PHP sur le serveur, il arrive que la connexion ne soit pas assez efficace pour que le chargement soit rapide. Parfois même, on avait l impression que l application était plantée. Pire encore, après un long moment, le gestionnaire d activités d Android (Activity manager), trouvant notre application trop longuet, nous forçait à la clôturer. Mais comment faire pour, à la fois charger et afficher à l écran l action en cours de traitement. En clair : comment réaliser deux tâches à la fois, une en interface et l autre en tâche de fond? La réponse, les threads. En effet il est possible de développer son application en multitâches, c'est-à-dire en faisant fonctionner, de façon synchrone ou asynchrone, plusieurs tâches en même temps. Ainsi, nous avons pu ajouter un objet «ProgressDialog» à l interface, montrant à l utilisateur qu une action de chargement des news était en cours. L application paraît plus active, et l utilisateur est rassuré! 30

31 On affiche un objet ProgressDialog, on utilise un objet porteur de messages «mhandler» créant un dialogue entre le tread principal (l interface) et le thread de chargement des news. On peut aussi utiliser un traitement asynchrone «AsyncTask», composé de trois méthodes : une s exécutant avant, une autre pendant, et une dernière après l exécution du thread principal. 31

32 III Bilan du projet A) Difficultés rencontrées Manque de temps Pendant les premières séances de projet, nous sommes partis sur le développement d une autre application Android. Il s agissait d afficher les horaires précis des bus de la COTRA par le parçage d une page web contenant les données de géolocalisation des bus. Nous avons dû abandonner le projet car une application proposant le même service existe déjà. Nous sommes donc repartis à zéro, nous avons établi un nouveau cahier des charges, commencé de nouvelles recherches Difficultés liées au langage Bien que la programmation JAVA pour Android soit très adaptée à un développement rapide d applications, elle reste quand même délicate et ne manque pas de pièges pour lesquels nous avons passé beaucoup de temps. Interfaces graphiques Comme énoncé précédemment, un plugin Android permet de visualiser immédiatement les fichiers XML d interface utilisateur. Et c est là sa seule utilité! Car lorsqu on commence à l utiliser comme éditeur graphique de fichiers XML, on s aperçoit des grandes limites de ce plugin : le code ainsi créé est illisible et complètement mélangé. Le rendu final est d ailleurs inutilisable dès lors qu on commence à réaliser une interface un peu complexe. Le système d interfaces par fichiers XML n est, quant à lui, pas tout à fait au point. Nous avons eu beaucoup de mal à obtenir le rendu désiré. Un outil permet de transformer n importe quelle image en image extensible. Malgré cela, le rendu est parfois un peu pixellisé. Les Threads Lorsque nous nous sommes lancés dans la création de threads, nous avons été confrontés à de nombreuses difficultés liées à la sécurité. Il y a une règle à respecter, sans laquelle rien ne peut fonctionner : il y a un thread principal, capable de modifier l interface graphique, les autres doivent communiquer avec lui afin de la modifier. Or, dans notre thread de chargement des news, nous devions notifier à chaque fois la ListView que le contenu de son adapter avait changé. Impossible de le faire dans le thread de chargement puisque celui-ci n est pas le principal. Il a donc fallu trouver un moyen de contourner ce problème, qui nous a pris du temps. 32

33 Débogage Afin de nous organiser, nous nous sommes répartis les différentes tâches. Chacun a développé des classes de son coté puis nous avons rassemblé tous les éléments. Cela a donné lieu à de nombreux bugs du a des différences dans les noms de variables, un encodage de caractères différents selon les plateformes de développement (Mac, Linux, Windows). B) Améliorations et fonctionnalités futures Dans le futur, de nouvelles fonctionnalités pourront être ajoutées à l application. Nous avons imaginé par exemple la possibilité de configurer son réveil en fonction de l heure à laquelle l étudiant commence les cours (par le parçage de l emploi du temps sur planète-istia) et de paramètres que l utilisateur devra rentrer (temps de préparation, temps de déplacement). La partie concernant le forum est prête à être implémenté, un onglet dédié est même déjà opérationnel. Voici ce qu il faudra modifier dans le code existant avant de le compléter avec de nouvelles fonctionnalités Les scripts PHP Dans les scripts PHP, nous avons travaillé par partie. Nous avons créé un script PHP par fonction. Ainsi, nous avons le fichier select.php, qui nous retourne les news du site, le fichier commentaire.php qui nous renvoie les commentaires spécifique d une news et le script connexion.php qui permet de vérifier l existence d un utilisateur dans la base de données. Il faut maintenant tout réunir en un seul fichier, et faire appel à des fonctions, ce qui sera plus propre. Classe de Connexion aux scripts PHP Travaillant au départ pour construire, avant tout, quelque chose de fonctionnel, nous n avons pas totalement pensé à utiliser la programmation objet du JAVA. Ainsi, nous n avons pas pensé à réaliser une classe fournissant des objets de connexion aux scripts. Nous avons inclus directement le code de connexion utilisant des objets HttpClient, HttpPost et HttpResponse dans les classes PIGetNews et PIComments. Il faudra donc réaliser une classe dotée d un constructeur spécifique prenant en compte les paramètres de connexion (id de news, mot de passe et login de l utilisateur) 33

34 SQLlite Vers la fin du projet, nous avons réussi à implémenter SQLite dans notre application. Nous n avons donc pas eu le temps de l utiliser comme nous le désirions. Nous pensions l utiliser pour stocker le mot de passe et login de l utilisateur, les news et les commentaires. Ainsi, l application sera beaucoup plus rapide et ne chargera plus le contenu en permanence depuis le serveur. Tout est prêt, il ne reste plus qu à le coder. C) Apports personnels Ce projet mené sur plusieurs moi à trois nous a permis de pratiquer encore un peu plus le travail en équipe et toute l organisation nécessaire qui en découle. Android est le système d exploitation pour mobile des cinq dernières années qui a connu un succès fulgurant. De plus en plus de constructeurs et d utilisateurs l ont adopté. Le développement Android a donc de longs jours devant lui et les développeurs qui l ont pratiqué sont très recherchés. Ça a été pour nous une bonne occasion de nous familiariser avec la structure d une application Android, l outil de développement, la résolution des erreurs souvent commises. Ce projet nous a beaucoup intéressé et pour certains d entre nous il a suscité l envie de travailler dans le développement mobile. 34

35 Bibliographie Android : Développer des applications mobiles pour les Google Phones [Broché] Florent Garin Dunod L'art du développement Androïd Mark Murphy, Arnaud Farine Pearson Programmation Android : De la conception au déploiement avec le SDK Google Android 2 Damien Guignard, Julien Chable, Emmanuel Roblès, Nicolas Sorel, Vanessa Conchodo Eyrolles Webographie Site internet de tutoriels spécialement conçus pour Android et iphone. Agrégations de liens vers des tutoriels intéressants. Forum mobile complet, contentant beaucoup des solutions aux problèmes de développement d applications Android. Documentation Android complète. Tutoriel PHP complet, avec gestion des objets PDO de connexion aux bases de données. Se connecter à une base MySQL en utilisant une page php et le format JSON Forum répondant au problème de cryptage des mots de passe de Joomla Tutoriel sur l installation d onglets dans une application Android 35

36 Le projet visait à produire une application Android du site internet des étudiants de l ISTIA, Planète-istia. Sur ce site internet, il est possible de consulter des news récentes du Bureau des étudiants, plus généralement de l école, mais aussi d autres sujets tels que l informatique ou toute autre technologie. De plus, un forum y est implanté, permettant aux étudiants de communiquer entre eux. L application devait être capable de fournir les news de façon personnalisée, avec la possibilité de commenter, de consulter les photos des albums, ainsi que les derniers posts du forum. La création d applications sous Android requière d utiliser le langage Objet JAVA, combiné à un kit de développement (SDK Android) dans lequel on trouve des outils indispensables. L application que nous avons créée communique avec la base de données de notre site internet, par le biais de scripts PHP, formant un web service. Dans ce rapport, vous pourrez remarquer que nous avons manqué de temps, mais il est d ores et déjà possible de se connecter au site, consulter les news, et de visionner les commentaires. Mots clef : Android, développement mobile, JAVA, SDK, planète istia, web service PHP The project is based on the development of the Planete-istia application for mobile devices working on android operating system. Planete-istia is the ISTIA student website on which students can read some news about the school, computer science and student life in Angers Furthermore there is a popular forum allowing the students to communicate. The Planete-istia application will let the students have the latest updates, news, pictures, article comments and forum posts. Android application development requires programming using JAVA plus a software development kit (SDK) which gives tools to the android development. To comment articles and to add posts on the forum, the user has to be logged on the website. So it was important to manage the connection between the website and the application. The application communicates with website s server through PHP scripts. It sends request to the PHP script and the SQL command selects or upgrades data directly into the website database. An important part of the project was the development of these PHP scripts. Unfortunately we missed time to finish our application. We developed the graphical interface, the connection to the website and the news section with the possibility to read and comment the news. Keywords: Android, mobile development, JAVA, SDK, planete istia, PHP web service 36