Android App Programming 2017-2018
Lab 3: Using web services

In this lab, you will learn how to interact with existing web APIs in an Android app.

• The proxy's address is proxy.iut-orsay.fr and its port number is 3128.


• If ou get the error "Installed Build Tools Revision 31.0.0 is corrupted", go into the file Grardle Scripts > Build.gradle (module) and change 31 and replace it by 30 in the following 3 places: compileSdkVersion, buildToolsVersion, targetSdkVersion.

1. Internet Chuck Norris Database

Create an app with an activity containing a TextView and a button. On each press of the button, fetch a new random Chuck Norris fact from the Internet Chuck Norris Database (ICNDB)'s web API and display it in the TextView.

• Make sure your Emulator or device has an internet connection (see class slides on troubleshooting).

• Allow your App to connect to the internet. Add the following inside your Manifest.xml

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

• Use the Retrofit 2 library to do the HTTP request. For that, you'll have to add the lines to the dependencies section in you app's build.grade (Module) file.

  implementation 'com.squareup.retrofit2:retrofit:2.4.0'
  implementation 'com.squareup.retrofit2:converter-gson:2.4.0'
  

  We will use it in combination with GSON to parse the JSON response as we did in the class example.

• Look at the format of the ICNDB API - look at the tab that describes it, especially how to get a random joke.

Create all the classes you need to read a post from it. As the API (format JSON) has several levels, you need to create a class for each one of the levels. Consider having a class Post (with a type, value) and a class Value (with an id and a joke). Crete "get" methods.

• Create an Interface to help Retrofit @GET the posts using the format of the Post class you defined.

• In your main activity setup Retrofit to read a random post/joke from the ICNDB. Make sure to use "https://" in the url.

• Everytime the button is clicked add a callback function to read a random post.

2. Chuck Norris Memes

Extend your app by embedding each Chuck Norris fact into an image from memegen.link.

For that, you'll first fetch a fact from ICNDB. Then, you'll select a template from memegen.link, in which you then embed the ICNDB fact. After receiving the link to the image from memegen.link, you display it inside an ImageView (you can find it in your activity_main.xml views - it is under Common View in the Design of the layout).

You can use the image library Picasso. Load it in your dependencies by adding the line

implementation ‘com.squareup.picasso:picasso:2.5.2’ 

Then in your code load the image using the following command

 Picasso.with(link to your main activity).load(an image url).into(an ImageView);

Here's an example of such an image:

back to the course web site

L'objectif est d'apprendre comment interagir avec les APIs web existantes dans une application Android.

• L'adresse du proxy est proxy.iut-orsay.fr et numéro de port est 3128.


• Si vous avez l'erreur "Installed Build Tools Revision 31.0.0 is corrupted", c'est un problème avec les build-tools les plus récents. Pour l'instant nous allons utiliser une version des outils plus vielle : allez dans le fichier Grardle Scripts > Build.gradle (module) et changez 31 et remplacez-le par 30 aux 3 endroits suivants : compileSdkVersion, buildToolsVersion, targetSdkVersion. Nous ferons cela à partir de maintenant dans tous nos projets.

1. Internet Chuck Norris Database

Créez une application avec une activité contenant un TextView et un bouton. À chaque pression sur le bouton, récupérez un nouveau "joke" aléatoire lié à Chuck Norris à partir de la base de données Web Internet Chuck Norris Database (ICNDB) et l'afficher dans le TextView.

• Assurez-vous que votre émulateur ou votre appareil est connecté à Internet (voir les diapositives du cours sur le troubleshooting).

• Autorisez votre application à se connecter à l'Internet. Ajoutez ceci dans votre Manifest.xml

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

• Utilisez la bibliothèque Retrofit 2 pour effectuer la requête HTTP. Pour cela, vous devrez ajouter ces lignes à la section dependencies dans le fichier build.grade (Module) de votre application.

  implementation 'com.squareup.retrofit2:retrofit:2.4.0'
  implementation 'com.squareup.retrofit2:converter-gson:2.4.0'
  

  Nous l'utiliserons en combinaison avec GSON pour analyser la réponse JSON comme nous l'avons fait dans l'exemple de classe.

• Regardez le format de l'API ICNDB - regardez l'onglet qui le décrit, notamment comment obtenir une blague (joke) aléatoire (random).

Créez toutes les classes dont vous avez besoin pour lire un message à partir de l'API. Comme l'API (format JSON) a plusieurs niveaux, vous devez créer une classe pour chacun de ces niveaux. Pensez à avoir une classe Post (avec un type, une valeur) et une classe Value (avec un id et une joke). Créez des méthodes "get".

• Créez une interface pour aider Retrofit @GET les posts en utilisant le format de la classe Post que vous avez définie.

• Dans votre activité principale, configurez Retrofit pour lire un joke aléatoire de l'ICNDB. Assurez-vous d'utiliser "https://" dans l'url.

• Chaque fois que le bouton est cliqué, ajoutez une fonction de Callback pour lire un joke aléatoire.

2. Chuck Norris Memes

Étendez votre application en intégrant chaque joke de Chuck Norris dans une image à partir de memegen.link.

Pour cela, vous allez d'abord récupérer un joke de ICNDB. Ensuite, vous sélectionnez un "template" dans memegen.link, dans lequel vous intégrez le joke de ICNDB. Après avoir reçu le lien vers l'image de memegen.link, vous l'affichez dans un ImageView (vous pouvez le trouver dans vos Views activity_main.xml - c'est une Common View dans le Design de votre layout).

Vous pouvez utiliser la lib d'images Picasso. Chargez-la dans vos dépendances en ajoutant la ligne

implementation'com.squareup.picasso:picasso:2.5.2' 

Puis dans votre code, chargez l'image en utilisant la commande suivante :

 Picasso.with(liens vers votre activité principale).load(an image url).into(an ImageView);

Voici un exemple :

back to the course web site