> ## Documentation Index
> Fetch the complete documentation index at: https://translations.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
> Implémentation Android de l’API pour le scénario d’architecture Mobile + API
# Implémentation de l’application mobile Android (applications mobiles + API)
Ce document fait partie du scénario d’architecture Mobile + API et explique comment implémenter l’application mobile sur Android. Veuillez consulter le scénario pour en savoir plus sur la solution mise en œuvre.
## Étape 1. Configurer l’application
### Projet d’exemple
Téléchargez un projet d’exemple propre à ce tutoriel pour bien démarrer.
[Télécharger](./timesheets-mobile_android.zip)
[Créer un fork sur GitHub](https://github.com/auth0-samples/auth0-pnp-exampleco-timesheets/tree/master/timesheets-mobile/android)
Configuration requise
* Android Studio 2.3
* SDK Android 25
* Émulateur - Nexus 5X - Android 6.0
Afficher la configuration requise
### Configurer les dépendances
Pour cette implémentation, nous utiliserons les dépendances suivantes dans le fichier `build.gradle` de l’application :
* [Auth0.Android](https://github.com/auth0/Auth0.Android) : ce package permet d’intégrer Auth0 afin d’authentifier les utilisateurs.
* [OkHttp](http://square.github.io/okhttp/) : ce package fournit un client HTTP pour effectuer des requêtes vers l’API Node.JS.
* [JWTDecode.Android](https://github.com/auth0/JWTDecode.Android) : ce package facilitera le décodage des JWTs.
* AppCompat : ce package nous permet d’utiliser le widget Toolbar pour la navigation dans les activités.
```groovy lines theme={null}
dependencies {
compile 'com.squareup.okhttp:okhttp:2.7.5'
compile 'com.auth0.android:auth0:1.10.0'
compile 'com.auth0.android:jwtdecode:1.1.1'
compile 'com.android.support:appcompat-v7:25.3.1'
testCompile 'junit:junit:4.12'
}
```
### Mettre à jour le manifeste
Ouvrez le fichier `AndroidManifest.xml` de l’application et ajoutez l’autorisation d’accès à Internet :
```xml lines theme={null}
```
Nous mettrons aussi à jour les paramètres de l’application pour utiliser le widget Toolbar :
```xml lines theme={null}
```
### Définir les valeurs de configuration
Définissez votre ID client, votre domaine Auth0 et l’URL de l’API dans la ressource `strings.xml` située dans `/res/values/strings.xml` :
```xml lines theme={null}
ExampleCo TimesheetsLog in......http://10.0.2.2:8080/timesheets
```
Pour cette implémentation, créez des répertoires pour les activités, les modèles et les utilitaires dans le package de l’application.
* `activities/` : ce package contiendra `LoginActivity.java`, `TimeSheetActivity.java`, `FormActivity.java` et `UserActivity.java`.
* `models/` : ce package contiendra les modèles de données `TimeSheet.java` et `User.java`.
* `utils/` : ce package contiendra `UserProfileManager.java`, `TimeSheetAdapter.java` et `ImageTask.java`
## Étape 2. Autoriser l’utilisateur
### Mettre à jour le fichier manifeste
Ouvrez le fichier `AndroidManifest.xml` de l’application et ajoutez l’activité `LoginActivity` :
```xml lines theme={null}
```
### Créer l’activité de connexion
`LoginActivity` gérera l’autorisation de l’utilisateur et sera le premier écran affiché aux utilisateurs. Nous allons créer une méthode `login()` pour initialiser un `WebAuthProvider` et démarrer l’authentification. Assurez-vous de fournir le scheme, l’audience et le scope appropriés au `WebAuthProvider`. Pour cette implémentation, nous utiliserons :
* **scheme** : `demo`
* **audience** : `https://api.exampleco.com/timesheet`s (l’API Node.JS)
* **response\_type** : `code`
* **scope** : `create:timesheets read:timesheets openid profile email offline_access`. Ces scopes nous permettront d’effectuer des requêtes `POST` et `GET` vers l’API Node.JS, ainsi que de récupérer le profil de l’utilisateur et un Jeton d’actualisation.
```java lines theme={null}
private void login() {
Auth0 auth0 = new Auth0(getString(R.string.auth0_client_id), getString(R.string.auth0_domain));
auth0.setOIDCConformant(true);
WebAuthProvider.init(auth0)
.withScheme("demo")
.withAudience("https://api.exampleco.com/timesheets")
.withResponseType(ResponseType.CODE)
.withScope("create:timesheets read:timesheets openid profile email offline_access")
.start(
// ...
);
}
```
Dans la méthode `login()`, une fois l’authentification réussie, nous redirigerons l’utilisateur vers `TimeSheetActivity`.
```java lines expandable theme={null}
package com.auth0.samples.activities;
import android.app.Activity;
import android.app.Dialog;
import android.content.Intent;
import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;
import com.auth0.android.Auth0;
import com.auth0.android.authentication.AuthenticationException;
import com.auth0.android.jwt.JWT;
import com.auth0.android.provider.AuthCallback;
import com.auth0.android.provider.ResponseType;
import com.auth0.android.provider.WebAuthProvider;
import com.auth0.android.result.Credentials;
import com.auth0.samples.R;
import com.auth0.samples.models.User;
import com.auth0.samples.utils.CredentialsManager;
import com.auth0.samples.utils.UserProfileManager;
public class LoginActivity extends Activity {
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.login_activity);
Button loginWithTokenButton = (Button) findViewById(R.id.loginButton);
loginWithTokenButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
login();
}
});
}
@Override
protected void onNewIntent(Intent intent) {
if (WebAuthProvider.resume(intent)) {
return;
}
super.onNewIntent(intent);
}
private void login() {
Auth0 auth0 = new Auth0(getString(R.string.auth0_client_id), getString(R.string.auth0_domain));
auth0.setOIDCConformant(true);
WebAuthProvider.init(auth0)
.withScheme("demo")
.withAudience("https://api.exampleco.com/timesheets")
.withResponseType(ResponseType.CODE)
.withScope("create:timesheets read:timesheets openid profile email")
.start(LoginActivity.this, new AuthCallback() {
@Override
public void onFailure(@NonNull final Dialog dialog) {
runOnUiThread(new Runnable() {
@Override
public void run() {
dialog.show();
}
});
}
@Override
public void onFailure(final AuthenticationException exception) {
runOnUiThread(new Runnable() {
@Override
public void run() {
Toast.makeText(LoginActivity.this, "Error: " + exception.getMessage(), Toast.LENGTH_SHORT).show();
}
});
}
@Override
public void onSuccess(@NonNull final Credentials credentials) {
runOnUiThread(new Runnable() {
@Override
public void run() {
Toast.makeText(LoginActivity.this, "Log In - Success", Toast.LENGTH_SHORT).show();
}
});
startActivity(new Intent(LoginActivity.this, TimeSheetActivity.class));
}
});
}
}
```
### Stocker les identifiants
Pour stocker les identifiants reçus après la connexion, nous utiliserons le `CredentialsManager` de la bibliothèque Auth0.Android et [SharedPreferences](https://developer.android.com/reference/android/content/SharedPreferences.html) pour les stocker.
Avant d’initialiser le `WebAuthProvider` dans la méthode `login()`, nous pouvons créer le `CredentialsManager`. En passant un `AuthenticationAPIClient` au `CredentialsManager`, celui-ci peut actualiser les Jetons d’accès s’ils sont expirés.
```java lines theme={null}
private void login() {
Auth0 auth0 = new Auth0(getString(R.string.auth0_client_id), getString(R.string.auth0_domain));
auth0.setOIDCConformant(true);
AuthenticationAPIClient authAPIClient = new AuthenticationAPIClient(auth0);
SharedPreferencesStorage sharedPrefStorage = new SharedPreferencesStorage(this);
final CredentialsManager credentialsManager = new CredentialsManager(authAPIClient, sharedPrefStorage);
WebAuthProvider.init(auth0)
// ...
}
```
Mettez maintenant à jour la méthode `login()` pour que les identifiants soient stockés par le `CredentialsManager` après une authentification réussie.
```java lines theme={null}
// ...
@Override
public void onSuccess(@NonNull final Credentials credentials) {
runOnUiThread(new Runnable() {
@Override
public void run() {
Toast.makeText(LoginActivity.this, "Log In - Success", Toast.LENGTH_SHORT).show();
}
});
credentialsManager.saveCredentials(credentials);
startActivity(new Intent(LoginActivity.this, TimeSheetActivity.class));
// ...
}
```
## Étape 3. Récupérer le profil de l’utilisateur
### Créer le modèle utilisateur
Créez un modèle utilisateur simple qui sera utilisé par `UserProfileManager` et `UserActivity`.
```java lines theme={null}
package com.auth0.samples.models;
public class User {
private String email;
private String name;
private String pictureURL;
public User(String email, String name, String pictureURL) {
this.email = email;
this.name = name;
this.pictureURL = pictureURL;
}
public String getEmail() {
return email;
}
public String getName() {
return name;
}
public String getPictureURL() {
return pictureURL;
}
}
```
### Stocker le profil de l’utilisateur
Pour gérer le stockage des renseignements du profil de l’utilisateur, nous allons créer une classe de gestion `UserProfileManager`. Le `UserProfileManager` utilisera [SharedPreferences](https://developer.android.com/reference/android/content/SharedPreferences.html) pour stocker les données.
```java lines expandable theme={null}
package com.auth0.samples.utils;
import android.content.Context;
import android.content.SharedPreferences;
import com.auth0.android.result.UserProfile;
import com.auth0.samples.models.User;
public class UserProfileManager {
private static final String PREFERENCES_NAME = "auth0_user_profile";
private static final String EMAIL = "email";
private static final String NAME = "name";
private static final String PICTURE_URL = "picture_url";
public static void saveUserInfo(Context context, User userInfo) {
SharedPreferences sp = context.getSharedPreferences(
PREFERENCES_NAME, Context.MODE_PRIVATE);
sp.edit()
.putString(EMAIL, userInfo.getEmail())
.putString(NAME, userInfo.getName())
.putString(PICTURE_URL, userInfo.getPictureURL())
.apply();
}
public static User getUserInfo(Context context) {
SharedPreferences sp = context.getSharedPreferences(
PREFERENCES_NAME, Context.MODE_PRIVATE);
return new User(
sp.getString(EMAIL, null),
sp.getString(NAME, null),
sp.getString(PICTURE_URL, null)
);
}
public static void deleteUserInfo(Context context) {
SharedPreferences sp = context.getSharedPreferences(
PREFERENCES_NAME, Context.MODE_PRIVATE);
sp.edit()
.putString(EMAIL, null)
.putString(NAME, null)
.putString(PICTURE_URL, null)
.apply();
}
}
```
Ensuite, mettez à jour la méthode `login()` dans `LoginActivity` pour récupérer le ID Token et extraire le profil de l’utilisateur du jeton à l’aide de la bibliothèque JWTDecode.Android. Stockez ensuite le profil de l’utilisateur avec `UserProfileManager`.
```java lines theme={null}
// ...
@Override
public void onSuccess(@NonNull final Credentials credentials) {
runOnUiThread(new Runnable() {
@Override
public void run() {
Toast.makeText(LoginActivity.this, "Log In - Success", Toast.LENGTH_SHORT).show();
}
});
credentialsManager.saveCredentials(credentials);
JWT jwt = new JWT(credentials.getIdToken());
User user = new User(
jwt.getClaim("email").asString(),
jwt.getClaim("name").asString(),
jwt.getClaim("picture").asString()
);
UserProfileManager.saveUserInfo(LoginActivity.this, user);
startActivity(new Intent(LoginActivity.this, TimeSheetActivity.class));
}
// ...
```
## Étape 4. Afficher des éléments de l’interface de façon conditionnelle en fonction du scope
Pour déterminer si un utilisateur a les autorisations requises pour effectuer certaines actions, nous pouvons examiner le `scope` qui lui a été accordé pendant le processus d’authentification. Le `scope` contient une chaîne regroupant tous les scopes accordés à un utilisateur. Pour déterminer si un scope précis a été accordé, il suffit donc de vérifier si la chaîne de scopes contient la sous-chaîne correspondant à ce scope.
### Stocker les scopes
D’abord, nous pouvons mettre à jour la classe `User` pour y stocker les scopes accordés, puis fournir une méthode utilitaire, `hasScope()`, qui peut servir à déterminer si les scopes accordés incluent un scope particulier :
```java lines expandable theme={null}
public class User {
private String email;
private String name;
private String pictureURL;
private String grantedScope;
public User(String email, String name, String pictureURL, String grantedScope) {
this.email = email;
this.name = name;
this.pictureURL = pictureURL;
this.grantedScope = grantedScope;
}
public String getEmail() {
return email;
}
public String getGrantedScope() {
return grantedScope;
}
public String getName() {
return name;
}
public String getPictureURL() {
return pictureURL;
}
public Boolean hasScope(String scope) {
return grantedScope.contains(scope);
}
}
```
N’oubliez pas non plus de mettre à jour le `UserProfileManager` afin d’y stocker le champ supplémentaire :
```java lines expandable theme={null}
public class UserProfileManager {
private static final String PREFERENCES_NAME = "auth0_user_profile";
private static final String EMAIL = "email";
private static final String NAME = "name";
private static final String PICTURE_URL = "picture_url";
private static final String SCOPE = "scope";
public static void saveUserInfo(Context context, User userInfo) {
SharedPreferences sp = context.getSharedPreferences(
PREFERENCES_NAME, Context.MODE_PRIVATE);
sp.edit()
.putString(EMAIL, userInfo.getEmail())
.putString(NAME, userInfo.getName())
.putString(PICTURE_URL, userInfo.getPictureURL())
.putString(SCOPE, userInfo.getGrantedScope())
.apply();
}
public static User getUserInfo(Context context) {
SharedPreferences sp = context.getSharedPreferences(
PREFERENCES_NAME, Context.MODE_PRIVATE);
return new User(
sp.getString(EMAIL, null),
sp.getString(NAME, null),
sp.getString(PICTURE_URL, null),
sp.getString(SCOPE, null)
);
}
public static void deleteUserInfo(Context context) {
SharedPreferences sp = context.getSharedPreferences(
PREFERENCES_NAME, Context.MODE_PRIVATE);
sp.edit()
.putString(EMAIL, null)
.putString(NAME, null)
.putString(PICTURE_URL, null)
.putString(SCOPE, null)
.apply();
}
}
```
Ensuite, mettez à jour le `LoginActivity` pour transmettre le `scope` afin qu’il soit stocké dans l’objet `User` :
```java lines theme={null}
// ...
@Override
public void onSuccess(@NonNull final Credentials credentials) {
runOnUiThread(new Runnable() {
@Override
public void run() {
Toast.makeText(LoginActivity.this, "Log In - Success", Toast.LENGTH_SHORT).show();
}
});
credentialsManager.saveCredentials(credentials);
JWT jwt = new JWT(credentials.getIdToken());
String scopes = credentials.getScope();
User user = new User(
jwt.getClaim("email").asString(),
jwt.getClaim("name").asString(),
jwt.getClaim("picture").asString(),
credentials.getScope()
);
UserProfileManager.saveUserInfo(LoginActivity.this, user);
startActivity(new Intent(LoginActivity.this, TimeSheetActivity.class));
}
// ...
```
### Afficher le menu d’approbation en fonction du scope
Nous pouvons maintenant afficher certains éléments de l’interface utilisateur selon qu’un utilisateur s’est vu accorder un scope particulier. Par exemple, nous avons un élément du menu d’approbation qui ne devrait être visible que pour les utilisateurs ayant obtenu le scope `approve:timesheets`.
Ci-dessous, vous pouvez voir le code de la classe `BaseActivity` qui vérifie si un utilisateur possède le scope `approve:timesheets` et, en conséquence, définit la visibilité de l’élément de menu qui affiche l’activité d’approbation :
```java lines theme={null}
// ...
@Override
public boolean onCreateOptionsMenu(Menu menu) {
Boolean canApprove = UserProfileManager.getUserInfo(this).hasScope("approve:timesheets");
MenuInflater inflater = getMenuInflater();
inflater.inflate(R.menu.actions, menu);
MenuItem item = menu.findItem(R.id.action_approve);
item.setVisible(canApprove);
return super.onCreateOptionsMenu(menu);
}
// ...
```
## Étape 5. Appeler l’API
### Mettre à jour le manifeste
Ouvrez le fichier `AndroidManifest.xml` de l’application et ajoutez `TimeSheetActivity` :
```xml wrap lines theme={null}
```
### Créer les mises en page de l’activité Timesheets
Créez ensuite `timesheet_activity.xml`, la mise en page de `TimeSheetsActivity` :
```xml lines theme={null}
```
Le widget `ListView` contiendra des entrées individuelles représentées par la mise en page `item_entry.xml` :
```xml lines expandable theme={null}
```
Et pour la navigation de la Toolbar de `TimeSheetActivity`, nous allons créer la ressource de menu `timesheet_action_menu.xml` (`/res/menu/`) :
```xml lines theme={null}
```
### Créer le modèle Timesheet
Créez un modèle pour travailler avec les données de feuille de temps dans nos vues :
```java lines expandable theme={null}
package com.auth0.samples.models;
import java.util.Date;
/**
* Créé par ej le 7/9/17.
*/
public class TimeSheet {
private String userID;
private String projectName;
private String date;
private double hours;
private int ID;
public TimeSheet(String gUserID, String gProjectName, String gDate, double gHours, int gID) {
this.userID = gUserID;
this.projectName = gProjectName;
this.date = gDate;
this.hours = gHours;
this.ID = gID;
}
public String getUserID() {
return userID;
}
public String getProjectName() {
return projectName;
}
public String getDateString() {
return date;
}
public double getHours() {
return hours;
}
public int getID() {
return ID;
}
}
```
### Créer l’adaptateur de feuille de temps
Le `TimeSheetAdapter` est une classe utilitaire qui prend un tableau d’entrées de feuille de temps et les associe au `ListView` de `TimeSheetActivity`.
```java lines expandable theme={null}
package com.auth0.samples.utils;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.TextView;
import com.auth0.samples.R;
import com.auth0.samples.models.TimeSheet;
import java.util.ArrayList;
public class TimeSheetAdapter extends ArrayAdapter {
public TimeSheetAdapter(Context context, ArrayList timesheets) {
super(context, 0, timesheets);
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
TimeSheet timesheet = getItem(position);
if (convertView == null) {
convertView = LayoutInflater.from(getContext()).inflate(R.layout.item_entry, parent, false);
}
TextView tvUserID = (TextView) convertView.findViewById(R.id.tvUserID);
TextView tvDate = (TextView) convertView.findViewById(R.id.tvDate);
TextView tvProjectName = (TextView) convertView.findViewById(R.id.tvProjectName);
TextView tvHours = (TextView) convertView.findViewById(R.id.tvHours);
tvUserID.setText(timesheet.getUserID());
tvDate.setText(timesheet.getDateString());
tvProjectName.setText(timesheet.getProjectName());
tvHours.setText(Double.toString(timesheet.getHours()));
return convertView;
}
}
```
### Créer l’activité Timesheet
La `TimeSheetActivity` affiche les entrées de feuille de temps de l’utilisateur connecté, stockées sur le serveur.
* `@string/api_url` est défini sur `http://10.0.2.2:8080/timesheets` afin que l’émulateur Android puisse se connecter à l’API Node.js exécutée sur `http://localhost:8080`.
* La méthode `callAPI()` récupère les feuilles de temps à partir de l’API Node.js.
* La méthode `processResults()` prend la réponse JSON de `callAPI()` et la convertit en objets `TimeSheet`.
* Les méthodes `onCreateOptionsMenu(`) et `onOptionsItemSelected(`) gèrent la navigation du widget Toolbar.
```java lines expandable theme={null}
package com.auth0.samples.activities;
import android.content.Intent;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.util.Log;
import android.view.Menu;
import android.view.MenuInflater;
import android.view.MenuItem;
import android.widget.ListView;
import android.widget.Toast;
import com.auth0.android.Auth0;
import com.auth0.android.authentication.AuthenticationAPIClient;
import com.auth0.android.authentication.storage.CredentialsManager;
import com.auth0.android.authentication.storage.CredentialsManagerException;
import com.auth0.android.authentication.storage.SharedPreferencesStorage;
import com.auth0.android.callback.BaseCallback;
import com.auth0.android.result.Credentials;
import com.auth0.samples.R;
import com.auth0.samples.utils.TimeSheetAdapter;
import com.auth0.samples.models.TimeSheet;
import com.squareup.okhttp.Callback;
import com.squareup.okhttp.OkHttpClient;
import com.squareup.okhttp.Request;
import com.squareup.okhttp.Response;
import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;
import java.io.IOException;
import java.util.ArrayList;
public class TimeSheetActivity extends AppCompatActivity {
private ArrayList timesheets = new ArrayList<>();
private String accessToken;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.timesheet_activity);
Toolbar navToolbar = (Toolbar) findViewById(R.id.navToolbar);
setSupportActionBar(navToolbar);
Auth0 auth0 = new Auth0(getString(R.string.auth0_client_id), getString(R.string.auth0_domain));
auth0.setOIDCConformant(true);
AuthenticationAPIClient authAPIClient = new AuthenticationAPIClient(auth0);
SharedPreferencesStorage sharedPrefStorage = new SharedPreferencesStorage(this);
CredentialsManager credentialsManager = new CredentialsManager(authAPIClient, sharedPrefStorage);
credentialsManager.getCredentials(new BaseCallback() {
@Override
public void onSuccess(Credentials payload) {
accessToken = payload.getAccessToken();
callAPI();
}
@Override
public void onFailure(CredentialsManagerException error) {
Toast.makeText(TimeSheetActivity.this, "Error: " + error.getMessage(), Toast.LENGTH_SHORT).show();
}
});
}
private void callAPI() {
final Request.Builder reqBuilder = new Request.Builder()
.get()
.url(getString(R.string.api_url))
.addHeader("Authorization", "Bearer " + accessToken);
OkHttpClient client = new OkHttpClient();
Request request = reqBuilder.build();
client.newCall(request).enqueue(new Callback() {
@Override
public void onFailure(Request request, IOException e) {
Log.e("API", "Error: ", e);
runOnUiThread(new Runnable() {
@Override
public void run() {
Toast.makeText(TimeSheetActivity.this, "An error occurred", Toast.LENGTH_SHORT).show();
}
});
}
@Override
public void onResponse(final Response response) throws IOException {
timesheets = processResults(response);
final TimeSheetAdapter adapter = new TimeSheetAdapter(TimeSheetActivity.this, timesheets);
runOnUiThread(new Runnable() {
@Override
public void run() {
if (response.isSuccessful()) {
ListView listView = (ListView) findViewById(R.id.timesheetList);
listView.setAdapter(adapter);
adapter.addAll(timesheets);
} else {
Toast.makeText(TimeSheetActivity.this, "API call failed.", Toast.LENGTH_SHORT).show();
}
}
});
}
});
}
private ArrayList processResults (Response response) {
ArrayList timesheets = new ArrayList<>();
try {
String jsonData = response.body().string();
if (response.isSuccessful()) {
JSONArray timesheetJSONArray = new JSONArray(jsonData);
for (int i = 0; i < timesheetJSONArray.length(); i++) {
JSONObject timesheetJSON = timesheetJSONArray.getJSONObject(i);
String userID = timesheetJSON.getString("user_id");
String projectName = timesheetJSON.getString("project");
String dateStr = timesheetJSON.getString("date");
Double hours = timesheetJSON.getDouble("hours");
int id = timesheetJSON.getInt("id");
TimeSheet timesheet = new TimeSheet(userID, projectName, dateStr, hours, id);
timesheets.add(timesheet);
}
}
} catch (IOException e) {
e.printStackTrace();
} catch (JSONException e) {
e.printStackTrace();
}
return timesheets;
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
MenuInflater inflater = getMenuInflater();
inflater.inflate(R.menu.timesheet_action_menu, menu);
return super.onCreateOptionsMenu(menu);
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case R.id.action_new:
startActivity(new Intent(TimeSheetActivity.this, FormActivity.class));
break;
case R.id.action_profile:
startActivity(new Intent(TimeSheetActivity.this, UserActivity.class));
break;
default:
return super.onOptionsItemSelected(item);
}
return true;
}
}
```
## Étape 6. Afficher le profil de l’utilisateur
Pour afficher le profil de l’utilisateur connecté, nous allons créer `UserActivity`, la mise en page correspondante `user_activity.xml`, ainsi que `user_action_menu.xml` pour la navigation dans la Toolbar. La vue affichera le nom, le courriel et la photo de profil de l’utilisateur.
### Mettre à jour le manifeste
Ouvrez le fichier `AndroidManifest.xml` de l’application et ajoutez `UserActivity` :
```xml wrap lines theme={null}
```
#### Créer les mises en page de l’activité utilisateur
Créez ensuite `user_activity.xml`, la mise en page de `UserActivity`, avec un `ImageView` pour la photo de profil et des `TextViews` pour le nom et le courriel de l’utilisateur.
```xml lines expandable theme={null}
```
Et créez le `user_actions_menu.xml` pour la Toolbar de `UserActivity` :
```xml lines theme={null}
```
### Charger la photo de profil à partir de l’URL
Pour charger la photo de profil de l’utilisateur à partir de l’URL, créez une tâche qui hérite de `AsyncTask` et s’exécute en arrière-plan.
```java lines expandable theme={null}
package com.auth0.samples.utils;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.os.AsyncTask;
import android.util.Log;
import android.widget.ImageView;
import java.io.InputStream;
import java.net.URL;
public class ImageTask extends AsyncTask {
private ImageView bmImage;
public ImageTask(ImageView bmImage) {
this.bmImage = bmImage;
}
protected Bitmap doInBackground(String... urls) {
String urldisplay = urls[0];
Bitmap mIcon11 = null;
try {
InputStream in = new URL(urldisplay).openStream();
mIcon11 = BitmapFactory.decodeStream(in);
} catch (Exception e) {
Log.e("Error", e.getMessage());
e.printStackTrace();
}
return mIcon11;
}
protected void onPostExecute(Bitmap result) {
bmImage.setImageBitmap(result);
}
}
```
### Créer l’activité utilisateur
Dans la méthode `onCreate()`, nous allons récupérer les informations de l’utilisateur depuis `UserProfileManager` et renseigner les valeurs dans la vue. Comme précédemment, les méthodes `onCreateOptionsMenu()` et `onOptionsItemSelected()` assurent la fonctionnalité de navigation du widget Toolbar.
```java lines expandable theme={null}
package com.auth0.samples.activities;
import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuInflater;
import android.view.MenuItem;
import android.widget.ImageView;
import android.widget.TextView;
import com.auth0.samples.R;
import com.auth0.samples.utils.ImageTask;
import com.auth0.samples.utils.UserProfileManager;
public class UserActivity extends AppCompatActivity {
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.user_activity);
Toolbar navToolbar = (Toolbar) findViewById(R.id.navToolbar);
setSupportActionBar(navToolbar);
TextView tvName = (TextView) findViewById(R.id.tvName);
TextView tvEmail = (TextView) findViewById(R.id.tvEmail);
tvName.setText(UserProfileManager.getUserInfo(this).getName());
tvEmail.setText(UserProfileManager.getUserInfo(this).getEmail());
new ImageTask((ImageView) findViewById(R.id.ivPicture))
.execute(UserProfileManager.getUserInfo(this).getPictureURL());
UserProfileManager.getUserInfo(this).getName();
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Charger les éléments de menu pour la barre d'action
MenuInflater inflater = getMenuInflater();
inflater.inflate(R.menu.user_action_menu, menu);
return super.onCreateOptionsMenu(menu);
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case R.id.action_new:
startActivity(new Intent(UserActivity.this, FormActivity.class));
break;
case R.id.action_view:
startActivity(new Intent(UserActivity.this, TimeSheetActivity.class));
break;
default:
// Si nous arrivons ici, l'action de l'utilisateur n'a pas été reconnue.
// Déléguer à la superclasse pour la traiter.
return super.onOptionsItemSelected(item);
}
return true;
}
}
```
## Étape 7. Formulaire pour créer de nouvelles feuilles de temps
Créez ensuite le `FormActivity` et la mise en page pour permettre la création de nouvelles entrées de feuille de temps.
### Mettre à jour le manifeste
Ouvrez le fichier `AndroidManifest.xml` de l’application et ajoutez-y `FormActivity` :
```xml wrap lines theme={null}
```
### Créer les mises en page de l’activité du formulaire
Créez la mise en page `form_activity.xml` avec des champs `EditText` pour le nom du projet et le nombre d’heures travaillées, ainsi qu’un `DatePicker` pour la date de travail.
```xml lines expandable theme={null}
```
Et créez le `form_actions_menu.xml` pour la Toolbar de `FormActivity` :
```xml lines theme={null}
```
### Créer l’activité du formulaire
* `@string/api_url` est défini sur `http://10.0.2.2:8080/timesheets` afin que l’émulateur Android puisse se connecter à l’API Node.JS exécutée sur `http://localhost:8080`.
* La méthode `onCreate()` initialise le formulaire et recueille les données saisies pour la méthode `postAPI()` lorsque le bouton d’envoi est activé.
* La méthode `postAPI()` envoie à l’API Node.JS, au format JSON, les données saisies récupérées du formulaire.
* La méthode `clearForm()` efface les champs du formulaire.
* Les méthodes `onCreateOptionsMenu()` et `onOptionsItemSelected()` gèrent la navigation du widget Toolbar.
```java lines expandable theme={null}
package com.auth0.samples.activities;
import android.content.Intent;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.util.Log;
import android.view.Menu;
import android.view.MenuInflater;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.DatePicker;
import android.widget.EditText;
import android.widget.Toast;
import com.auth0.android.Auth0;
import com.auth0.android.authentication.AuthenticationAPIClient;
import com.auth0.android.authentication.storage.CredentialsManager;
import com.auth0.android.authentication.storage.CredentialsManagerException;
import com.auth0.android.authentication.storage.SharedPreferencesStorage;
import com.auth0.android.callback.BaseCallback;
import com.auth0.android.result.Credentials;
import com.auth0.samples.R;
import com.squareup.okhttp.Callback;
import com.squareup.okhttp.MediaType;
import com.squareup.okhttp.OkHttpClient;
import com.squareup.okhttp.Request;
import com.squareup.okhttp.RequestBody;
import com.squareup.okhttp.Response;
import org.json.JSONException;
import org.json.JSONObject;
import java.io.IOException;
import java.util.Calendar;
import java.util.Date;
public class FormActivity extends AppCompatActivity {
private static final MediaType MEDIA_TYPE_JSON = MediaType.parse("application/json; charset=utf-8");
private String accessToken;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.form_activity);
Toolbar navToolbar = (Toolbar) findViewById(R.id.navToolbar);
setSupportActionBar(navToolbar);
Auth0 auth0 = new Auth0(getString(R.string.auth0_client_id), getString(R.string.auth0_domain));
auth0.setOIDCConformant(true);
AuthenticationAPIClient authAPIClient = new AuthenticationAPIClient(auth0);
SharedPreferencesStorage sharedPrefStorage = new SharedPreferencesStorage(this);
CredentialsManager credentialsManager = new CredentialsManager(authAPIClient, sharedPrefStorage);
credentialsManager.getCredentials(new BaseCallback() {
@Override
public void onSuccess(Credentials payload) {
accessToken = payload.getAccessToken();
}
@Override
public void onFailure(CredentialsManagerException error) {
Toast.makeText(FormActivity.this, "Error: " + error.getMessage(), Toast.LENGTH_SHORT).show();
}
});
Button submitTimeSheetButton = (Button) findViewById(R.id.submitTimeSheetButton);
final EditText editProjectName = (EditText) findViewById(R.id.editProjectName);
final EditText editHours = (EditText) findViewById(R.id.editHours);
final DatePicker datePicker = (DatePicker) findViewById(R.id.datePicker);
submitTimeSheetButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
int day = datePicker.getDayOfMonth();
int month = datePicker.getMonth();
int year = datePicker.getYear();
Calendar calendar = Calendar.getInstance();
calendar.set(year, month, day);
postAPI(
editProjectName.getText().toString(),
calendar.getTime(),
editHours.getText().toString()
);
}
});
}
private void postAPI(String projectName, Date date, String hours) {
JSONObject postBody = new JSONObject();
try {
postBody.put("project", projectName);
} catch (JSONException e) {
e.printStackTrace();
}
try {
postBody.put("date", date);
} catch (JSONException e) {
e.printStackTrace();
}
try {
postBody.put("hours", hours);
} catch (JSONException e) {
e.printStackTrace();
}
String postStr = postBody.toString();
final Request.Builder reqBuilder = new Request.Builder()
.post(RequestBody.create(MEDIA_TYPE_JSON, postStr))
.url(getString(R.string.api_url))
.addHeader("Authorization", "Bearer " + accessToken);
OkHttpClient client = new OkHttpClient();
Request request = reqBuilder.build();
client.newCall(request).enqueue(new Callback() {
@Override
public void onFailure(Request request, IOException e) {
Log.e("API", "Error: ", e);
runOnUiThread(new Runnable() {
@Override
public void run() {
Toast.makeText(FormActivity.this, "An error occurred", Toast.LENGTH_SHORT).show();
}
});
}
@Override
public void onResponse(final Response response) throws IOException {
final String resBody = response.body().string();
runOnUiThread(new Runnable() {
@Override
public void run() {
if (response.isSuccessful()) {
clearForm((ViewGroup) findViewById(R.id.mainForm));
Intent intent = new Intent(FormActivity.this, TimeSheetActivity.class);
FormActivity.this.startActivity(intent);
} else {
Toast.makeText(FormActivity.this, "Timesheet creation failed.", Toast.LENGTH_SHORT).show();
}
}
});
}
});
}
private void clearForm(ViewGroup group) {
for (int i = 0, count = group.getChildCount(); i < count; ++i) {
View view = group.getChildAt(i);
if (view instanceof EditText) {
((EditText)view).setText("");
}
if(view instanceof ViewGroup && (((ViewGroup)view).getChildCount() > 0))
clearForm((ViewGroup)view);
}
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
MenuInflater inflater = getMenuInflater();
inflater.inflate(R.menu.form_action_menu, menu);
return super.onCreateOptionsMenu(menu);
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case R.id.action_view:
startActivity(new Intent(FormActivity.this, TimeSheetActivity.class));
break;
case R.id.action_profile:
startActivity(new Intent(FormActivity.this, UserActivity.class));
break;
default:
return super.onOptionsItemSelected(item);
}
return true;
}
}
```
## Tester l’application
Avant de continuer, assurez-vous d’avoir [implémenté l’API Node.JS](/fr-CA/docs/get-started/architecture-scenarios/mobile-api/api-implementation-nodejs).
1. Démarrez l’API en accédant à son répertoire dans votre terminal, puis en exécutant la commande `node server`.
2. Ouvrez l’application mobile dans Android Studio et cliquez sur le bouton **Run**.
3. Sélectionnez l’appareil virtuel Nexus 5X API 23.
4. Une fois l’application mobile chargée dans l’émulateur, vous pouvez vous connecter, puis créer et afficher des entrées de feuille de temps à partir de l’API Node.JS en cours d’exécution.
C’est tout ! Vous avez terminé !