TD-1 : Squelette de l'application

Dans cette séance de travaux dirigés nous allons mettre en place les interfaces de la version Android d'une application Bipper permettant la communication entre les cuisiniers d'un restaurant et leurs serveurs.  Les serveurs recoivent les commandes des clients et les chefs les préparent, puis les serveurs viennent les récupérer les commandes quand elles sont prêtes. L'application que nous allons développer doit permettre aux serveurs de saisir les commandes des clients depuis leur smartphone ou tablettes Android et les envoyer automatiquement en cuisine.  D'un autre côté les restaurateurs seront alertés quand les commandes sont en attentes.  A la fin de la préparation de la commande, le cuisinier pourra notifier le serveur (celui l'ayant recue du client) pour qu'il vienne le récupérer.    

Differents modules à développer 

1. Serveurs d'un restaurant 
   
   1. Inscription des serveurs 
   2. Connexion à l'application 
   3. Listing des menus + saise de commandes 
   4. Visualisation des commandes
   5. Reception de notifications des cuisiniers
2. Cuisiniers d'un restaurant
   1. Visualisation de commandes 
   2. Reception de notifications des serveurs
   3. Notifier qu'une comande est prête

Dans ce TP, nous allons créer les interfaces d'enregistrement et de connexion. 

Formez des binomes et utilisez un gestionnaire de versionning pour gérer vos sources. 

Etape 0 : Créer un dépot sur bitbucket 

Etape 1 :Créer une application Android 

Créez un nouveau projet dans Android Studio

• Dans le menu de demarrage, choisir 'Start a new Android Studio Project' 

• Dans l'écran qui suit, definir le nom et le package de l'application, puis next

• L'ecran suivant vous invite à choisir les terminaux cibles et la version d'Android minimum pour executer votre application, on veut que l'application tourne sur tablet et smartphone; choisir la version la plus récente que vous avez, puis next 

• Selectionner une activité à générer, elle jouera le role d'activité principale pour l'instant, vous pourrez le changer à tout moment dans le manifest. Choisir un "blank activity" puis next 

• Donnez un nom à votre activité puis finish.  Remarquez la convention de nommage qui veut que toutes vos activités aient le suffixe Activity, le nom du layout et du menu sont proposés par rapport au nom de l'activité.  Vous etes encouragés à respecter cette convention pour une meilleur lisibilité de votre application. 

Etape 2 :Menu de l'application 

Modifiez le layout qui a été généré à la création de l'application pour qu'il ressemble à l'ecran ci-après. Sur cette figure, nous avons : une image (ImageView), deux champs de texte (TextView) et deux boutons (Button).   

Etape 3 - Ecran d'enregistrement

Dans l'arborescence du projet (dossier java), faire bouton droit sur le package > new > Activity > Blank Activity.  Dans ll'ecran qui suit, donner un nom à l'activité (RegisterActivity), garder le nom du layout proposé.  Choisir un parent hiérarchique pour cette nouvelle activity, cliquer sur le bouton avec les ... et selectionnez MainActivity.  Le 'Hierarchical parent' permet de définir la navigation dans l'application, automatiquement android ajoutera un bonton back dans cette activité, ce bouton renverra sur le parent que vous avez selectionné.

Editer le layout pour qu'elle ressemble à l'ecran ci-après.  Les informations demandées sont* :

• Nom  (texte libre) 
• Prénom (Texte libre) 
• Sexe (une valeur entre Masculin et Féminin) 
• Téléphone (8 chiffres ) 
• Email (Format email obligatoire) 
• Mot de passe (texte libre)
• Confirmation mot de passe (identique à mot de passe)

 * Tous les champs sont obligatoires 

Etape 4 - Ecran de connexion

Inspirez vous de l'étape 3 pour créer une interface identique à celle de la figure ci-après. Au lieu de choisir 'blank Activity', choisir Login Activity puis adaptez le Layout qui a été généré pour vo

Etape-5 : Menu de l'application 

Le menu de l'application est la page qui s'affiche après que l'utilisateur s'est authentifié, pour l'instant nous afficherons un message comme sur la figure, nous l'améliorerons au prochain TP.  Inspirez-vous de l'étape 5 pour créer l'activité.  

Etape-6 : Test 

Vous pouvez executer votre projet sur un émulateur ou sur un téléphone. Let's cross the fingers :)

Etape-7 : Connexion des interfaces 

N'oubliez pas d'ajouter vos activités dans le Manifest.

Dans cette étape, nous allons connecter les différents ecrans que nous venons de construire.  Si vous vous souvenez bien, le tout premier ecran sera celui qui s'affiche au lancement de l'application.  Le bouton d'enregistrement doit nous rediriger vers l'activity Register et le bouton de connexion vers l'activity Login.

Pour cela, nous aurons besoin d'ecouter l'évenement click sur chacun de ces boutons afin d'etre notifié par le systeme quand l'utilisateur clicksur un bouton.  On va pour cela modifier la classe MainActivity. 

• Implementez l'interface View.OnClickListener, cette interface va vous obliger à implémenter la méthode onClick; cette methode sera appeleé à chaque fois que l'utilisateur clique sur un bouton.
• Modifiez la méthode pour lancer l'activité correspondante au bouton qui a déclenché l'évenement.  Pour cela, on aura besoin d'identifier le bouton.  Remarquez que cette méthode a une instance de la vue qui a déclenché l'évènement, dans ce cas on va jouer avec l'identifiant de la vue. 

@Override
public void onClick(View view) {
    switch (view.getId()){
        case R.id.register:
            startActivity(new Intent(MainActivity.this, RegisterActivity.class));
            break; 
        
        case R.id.login:
            startActivity(new Intent(MainActivity.this, LoginActivity.class));
            break; 
    }
}

• Abonnez les boutons à l'activité. Dans la méthode onCreate de l'activité, récupérez les instances des boutons et utilisez leur méthode onClickListener pour leur anoncer que c'est la classe courante qui gérera les evenements click 

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    Button register = (Button)findViewById(R.id.register);
    Button login = (Button)findViewById(R.id.login);
    register.setOnClickListener(this);
    login.setOnClickListener(this);
}

De même, on veut qu'après avoir cliqué sur le bonton register de l'activity 'RegisterActivity' que le formulaire soit validé; si le formulaire est valide redirigez l'utilisateur vers l'ecran de Login sinon on reste sur la page en affichant un message d'erreur.  

L'ecran Login Activity doit rediriger l'utilisateur vers le menu de l'application (Etape 4).  

Fin du TP 1