Applications Android - cours 13 : Connectivité et services Web

Université Constantine 2
Dr. CHAOUCHE A.-C.
Faculté des nouvelles technologies
ahmed.chaouche@univ-constantine2.dz
– Cours 13 –
Chapitre 9 : Connectivité et services Web
(Bonus)
Développement d’applications mobiles
2018/2019. Semestre 1

Université Constantine 2
Etudiants concernés
Faculté/Institut Département Niveau Spécialité
2018/2019. Semestre 1
Dr. CHAOUCHE A.-C.
Faculté des nouvelles technologies
ahmed.chaouche@univ-constantine2.dz
Développement d’applications mobiles
Licence 3 Technologies de l’information (TI)Nouvelles technologies IFA
Licence 3 Science de l’informatique (SCI)Nouvelles technologies IFA
– Cours 13 –
Chapitre 9 : Connectivité et services Web
(Bonus)

Université Constantine 2 3
Prérequis
Maîtrise de la programmation Android
Maîtrise des langages PHP et SQL
Objectifs du cours
Comprendre la programmation réseau et Web
Création d'un service Web connecté à une BD MySQL
Elaborer une communication avec un serveur Web sous Android
Résumé
© Dr. Chaouche A.-C.

Architecture Clients-Serveur
@IP: 192.168.0.X
@Port: Y
Ali SaraMohammed

Adressages IP
AliMohammed

Ports
192.168.0.X
Ali

La communication entre un appareil Android et un serveur, à travers :
Sockets
Bibliothèques Remote Procedural Call (RPC)
Services Web
Communication sous Android

Comment ?
PHP récupère les données à partir d'une BD MySQL, qui seront par la suite
encodées au format JSON et envoyées au client Android
L'App Android récupère les données, les parse et les exploite dans l'App
Utilisation des services Web sous Android
App Android Serveur Web
(Apache)
Serveur MySQL

Côté serveur
1. Préparer les projets
2. Lancer les serveurs Apache et MySQL (XAMPP)
3. Créer une BD via un client MySQL
4. Se connecter à la BD via un script PHP
5. Retourner des données au format JSON
Côté client
1. Préparer le projet Android
2. Vérifier l’accès à internet
3. Récupérer les données distantes sous Android
4. Parser les données JSON pour constituer les objets Java
5. Envoyer des données au serveur distant
Étapes de l'utilisation des services Web sous Android

Projet Web en php
Dossier : "C:xampphtdocselearning_server"
Fichier php : getModules.php
Base de données MySQL
DB : elearning_db
Tables : module, week, et course
Serveur-1. Préparer les projets

1. Installer Xampp v3.2.2
Choisir le chemin dans la racine : "C:xampp"
2. Lancer XAMPP Control Panel
Lancer le serveur Apache (web)
Lancer le serveur MySQL
Serveur-2. Lancer les serveurs Apache et MySQL sous Xampp

1. Utiliser un client MySQL
Exemples : PhpMyAdmin, HeidiSQL
2. Créer une nouvelle session :
Host : "localhost"
Port : 3306
Utilisateur : "root"
Mot de passe : ""
3. Créer la BD : elearning_db
4. Créer les tables : module, week, et course
module : id(INT), accronym(VARCHAR), name(VARCHAR),
description(VARCHAR), credit(INT)
week : ...
Course : ...
Serveur-3. Créer une BD via un client MySQL

Serveur-4. Se connecter à la BD via un script PHP
/elearning_server/getModules.php
<?php
$db_host="localhost"; $db_uid="root"; $db_pass=""; $db_name="elearning_db";
$db_con = mysqli_connect($db_host, $db_uid, $db_pass, $db_name);
$sql = "SELECT * FROM module";
$result = mysqli_query($db_con, $sql);
while($row = mysqli_fetch_assoc($result)) $output[] = $row;
mysqli_close($db_con);
header('Content-Type: application/json');
print(json_encode($output));
http_response_code(200);
?>
Dans le dossier : C:xampphtdocselearning_server

JSON : JavaScript Object Notation
Objets : commencent et se terminent par {}
Attributs d'objet : sous forme d’un dictionnaire (clé/valeur séparés by ‘:‘). Les
attributs sont séparés par des virgules ‘, ‘
Tableaux : contiennent un ensemble d’objets et commencent et se terminent
par []. Les objets sont séparés par des virgules ‘, ‘
Valeurs : peuvent être des strings, des numériques, des objets, des tableaux,
true, false ou null.
Strings : sont englobes par "" et contiennent des caractères Unicode, incluant
les caractère d'échappement (par exemple, le saut de ligne n)
Serveur-5. Retourner des données au format JSON
[
{
id: "1",
accronym: "DAM",
name: "Développement d’applications mobiles",
...
weeks : [ ... ]
}, ...
]

Lancer dans le navigateur :
http://[server]/elearning_server/getModules.php
Sous Chrome, l'extension JSONView permet
de mieux afficher le format JSON
TP5a : Accéder au serveur via le navigateur

Côté serveur
1. Préparer les projets
2. Lancer les serveurs Apache et MySQL (XAMPP)
3. Créer une BD via un client MySQL
4. Se connecter à la BD via un script PHP
5. Retourner des données au format JSON
Côté client
1. Préparer le projet Android
2. Vérifier l’accès à internet
3. Récupérer les données distantes sous Android
4. Parser les données JSON pour constituer les objets Java
5. Envoyer des données au serveur distant

Ajouter la permission :
Préparer l'URL : http://server/elearning_server/getModules.php
Client-1. Préparer le projet Android
/manifests/AndroidManifest.xml
<uses-permission android:name="android.permission.INTERNET"/>
...
/java/MainActivity.java
String urlString = "http://server/elearning_server/getModules.php";
...

Client-2. Vérifier l’accès à internet (Facultatif)
public static boolean checkConnection(Context ctx) {
ConnectivityManager connectivityManager = (ConnectivityManager)
ctx.getSystemService(Context.CONNECTIVITY_SERVICE);
NetworkInfo networkInfo = connectivityManager.getActiveNetworkInfo();
if (networkInfo == null || !networkInfo.isConnected() ||
(networkInfo.getType() != ConnectivityManager.TYPE_WIFI &&
networkInfo.getType() != ConnectivityManager.TYPE_MOBILE)) {
// No internet connection
return false;
} else
return true;
}

2 modes :
1. En mode synchrone
(l'IHM est bloquée en attendant la réponse)
2. En mode asynchrone
(la requête est exécutée en arrière plan)
En mode asynchrone :
Android SDK : android.os.AsyncTask
Doc : https://developer.android.com/reference/android/os/AsyncTask.html
Bibliothèque externe : com.koushikdutta.ion.Ion
Doc : https://github.com/koush/ion
Client-3. Récupérer les données distantes sous Android
App Android Serveur Web
(Apache)

Bibliothèque : com.koushikdutta.ion:ion:2.1.9
Méthode 1 :
Project Structure > Modules > app
> Onglet Depenendencies
Méthode 2 :
Dans un script Gradle
Client-3.a. Importer la bibliothèque Ion
/Gradle Scripts/build.gradle (Module: app)
...
dependencies {
implementation fileTree(dir: 'libs', include: ['*.jar'])
implementation 'com.koushikdutta.ion:ion:2.1.9'
}

Client-3.b. Afficher un ProgressDialog
ProgressDialog pDialog;
public void getRemoteModules() {
pDialog = new ProgressDialog(this);
pDialog.setMessage("Getting list of modules...");
pDialog.setIndeterminate(true);
pDialog.setCancelable(false);
pDialog.show();
...
}

Client-3.c. Récupérer un String
...
Ion.with(this)
.load(urlString)
.asString()
.setCallback(new FutureCallback<String>() {
@Override
public void onCompleted(Exception e, String result) {
pDialog.dismiss();
if(result == null)
Log.d(TAG, "No response from the server!!!");
else {
// Traitement de result
}
}
});
}

Client-3.d. Récupérer la réponse HTTP complète
...
Ion.with(this)
.load(urlString)
.asString()
.withResponse()
.setCallback(new FutureCallback<Response<String>>() {
@Override
public void onCompleted(Exception e, Response<String> response){
...
if(response != null){
Log.d(TAG, "Http code: " + response.getHeaders().code());
Log.d(TAG, "Result: " + response.getResult());
}
...
}
});
}

Client-4.a. Préparer le modèle de données
/java/Module.java
public class Module {
int id; ...
List<Week> weeks;
}
/java/Week.java
public class Week {
int id; ...
List<Course> courses;
}
/java/Course.java
public class Course {
int id; ...
}

Bibliothèque : com.google.code.gson:gson:2.8.0
Méthode 1 :
Project Structure > Modules > app
> Onglet Depenendencies
Méthode 2 :
Dans un script Gradle
Client-4.b. Importer la bibliothèque Gson
/Gradle Scripts/build.gradle (Module: app)
...
dependencies {
implementation fileTree(dir: 'libs', include: ['*.jar'])
implementation 'com.google.code.gson:gson:2.8.0'
}

Client-4.3. Parser la réponse Json
/java/Module.java
public static Module getModuleFromJson(String json){
Gson gson = new Gson();
Module module = gson.fromJson(json, Module.class);
return module;
}
public static List<Module> getListOfModulesFromJson(String json){
Gson gson = new Gson();
Type type = new TypeToken<List<Module>>(){}.getType();
List<Module> modules = gson.fromJson(json, type);
return modules;
}

1. Préparer l'URL
2. Récupérer la liste des modules depuis le serveur (en utilisant Ion)
3. Parser la liste des modules (en utilisant Gson)
TP5b : Récupérer les données distantes
String urlString = "http://server/eleanring_server/getModules.php";
Ion.with(this).load(urlString) ... .setCallback(...);
List<Module> modules = Module.getListOfModulesFromJson(json);

Client-5. Envoyer des données au serveur (en GET)
...
Ion.with(this)
.load(urlString)
.asString()
.withResponse()
.setCallback(new FutureCallback<Response<String>>() {
@Override
public void onCompleted(Exception e, Response<String> response){
...
}
});
...
urlString = "http://[server]/elearning_server/addModule.php?...";

1. Préparer l'URL
2. Envoyer la requête au serveur (en utilisant Ion)
3. Vérifier le bon traitement de la requête
TP5c : Envoyer des données au serveur
String urlString = "http://[server]/elearning_server/" +
"addModule.php?key=X&id=Y&...";
Ion.with(this).load(urlString) ... .setCallback(...);
...
if(response.getHeaders().code() == 200) { ... }
...

Raccourcis utiles sous Android Studio
File > Settings > Onglet Keymap > Keymaps : Netbeans
+ + C : Commenter/Décommenter les lignes sélectionnées
+ + ↓/↑ : Dupliquer la ligne courante
+ + ↓/↑ : Déplacer la ligne courante vers le bas ou vers le haut
+ : Rechercher des fichiers dans le projet
+ R : (Refactoring) Modifier le code (Classe, variable, méthode, …)
+ : Générer du code (Constructeurs, Getters, Setters, …)
+ (ou ): Naviguer vers la déclaration/l'utilisation de la classe, méthode, ...
+ ←/→ : Revenir/Avancer à une ligne du code éditée
+ + F : Formater/Réorganiser le code source
+ + : Expande/Collapse
+ + + : Expande/Collapse all { }
(maintenu) + : Sélection de colonne

Snippets (macros) sous Android Studio
File > Settings > Editor > Live Template
fbc: findViewById(R.id.$resId$);
Toast: Toast.makeText($context$, "$text$", Toast.LENGTH_SHORT).show();
const: private static final int $name$ = $value$;
logi: Log.i(TAG, "$METHOD_NAME$: $content$");
fori: for(int $INDEX$ = 0; $INDEX$ < $LIMIT$; $INDEX$++) {}
psvm: public static void main(String[] args){ $END$ }
TR: try ($ELEMENT_TYPE$ $VAR$ = $SELECTION$) { $END$ }
...

Documents sont accessibles :
Plateforme e-learning de l’université Constantine 2
Lien : http://elearning.univ-constantine2.dz/
Documents et Rendus

Applications Android - cours 13 : Connectivité et services Web

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à Applications Android - cours 13 : Connectivité et services Web

Similaire à Applications Android - cours 13 : Connectivité et services Web (20)

Dernier

Dernier (14)

Applications Android - cours 13 : Connectivité et services Web