Avant-propos

http://bit.ly/jmb-apsio

promo2016
Figure 1. La promo 2016/2017
promo2017
Figure 2. La promo 2017/2018

:-(

Spécial COVID-19…​

covid2020 1
covid2020 2

Désolé…​

  • …​ pour l'anglais (really?)

  • …​ de ne pas être un spécialiste d’Android

  • …​ que ce cours arrive avant que vous sachiez développer en Android/Mobile (majorité)

  • …​ pour le distanciel (quoi que…​)

1. Content

  • Brainstorming & organization

  • Internet search & site web building

  • UML & Modeling for Mobile Applications

  • Case study

2. Organisation prévue

Module de 21h (14 créneaux de 1,5h):

  • 3 créneaux semaine 41

    • [1] Intro & Brainstorming (07/10)

    • [2] Travail de groupe (07/10)

    • [3] Première maquette du site Web (07/10)

  • 3 créneaux semaine 42

    • [4] UML rappel et concepts importants (13/10)

    • [5] Reverse ingéniérie d’une application Android (13/10)

    • [6] Gestion de projet spécifique, UML (13/10)

  • 8 créneaux 2ème période

    • [7-9] Mise en oeuvre sur une étude de cas (??)

    • [10-11] Modélisation : projet perso (binôme) (??)

    • [12] Modélisation : projet perso (binôme) (??)

    • [13] Présentation publique de votre appli perso (binôme) (??)

    • [14] QCM exam final (??)

3. Let’s start Brainstorming

whiteboard2015
Figure 3. Résultat 2015/2016
Technos2016
Figure 4. Résultat 2016/2017 (merci Nathan Coustenoble pour la prise de note)
brainstorm2017
Figure 5. Résultat 2017/2018

Résultats du brainstorming 2019/2020 TBD…​ :

Répartition des technos connues (depuis 2015) :

4. Wrap-up

Par petits groupes :

  • [1] Préparation du site web

  • [2] Liste des concepts UML connus et utiles

  • [3] Outils et langages de description d’écrans

  • [4] Plateformes de développement Android

  • [5] Différences iOS /Android

  • […​] Résultats du brainstorm

Les numéros ne représentent pas un ordre d’importance!

4.1. Plans B …​

  • Spécificités des applications mobiles

  • Modélisation des interfaces

  • Modélisation de l’architecture

  • Modélisation du comportement

  • Agilité et applications mobiles

4.2. [1] Site web des fiches

Je fais parti de ce groupe!

4.3. [2] Concepts UML connus

  • 1. Recensement des concepts connus

    • diagrammes

    • concepts dans ces diagrammes

    • méthodes (RUP, OpenUP, Agile)

    • ⇒ Google Sheet ?

  • 2. Pour le Mobile Modeling

    • brainstorming

4.4. [3] Outils et langages de description d’écrans

  • Type SNI (Schéma de Navigation des Interfaces)

  • Dessin / Générationd de code

  • Focus sur les Open Sources of course

  • …​

4.5. [4] Plateformes de développement Android

  • Avis objectifs (chiffrés)

  • Aspects historiques

  • Focus sur les Open Sources of course

  • …​

4.6. [5] Différences /

  • Niveau modélisation

  • Concepts

  • Cycle de développement

  • …​

4.7. Consignes

Pour chaque groupe (sauf [1]) :

  • Exprimer le problème

  • Rechercher les solutions existantes

  • Brainstormer sur la meilleure solution

  • La formaliser un minimum

  • Remplir un poster sous la forme d’une fiche (cf. point suivant)

  • Merger sa branche

4.8. Fiche

  • Titre

    • Motivations & problems (shortly)

    • Current approaches

    • Proposed approach

    • Example

4.9. Résultats

En 2015/2016 nous avons eu deux équipes chargées du site web :

Pour 2016/2017 :

En 2017/2018 :

En 2019/2020 :

4.10. C’est parti!!

https://docs.google.com/spreadsheets/d/1LRaiHSqqxB8LithvgLm12TSxTnb6iG5bInCoD-nxEnQ/edit?usp=sharing

https://classroom.github.com/g/BFz7WHiJ

Discord B-219 [detail]#Sujets de PTUT

5. Exemple complet de démarche "ad hoc" autour d’UML

Nous allons aborder une étude de cas tirée du livre de Pascal Roques.

prfc

Pour un aperçu du livre, cf. http://www.editions-eyrolles.com/Chapitres/9782212110708/chap01.pdf.

5.1. Le cahier des charges

Il s’agit de développer un service de vente en ligne (http://jeBouquine.com).

Depuis l’écriture du livre un vrai site de vente utilise cette URL!

5.2. Des besoins au code

(c) Pascal Roques
Figure 6. Le gap à combler (image tirée de [Roques2007a])

5.3. Raffinement des besoins

(c) Pascal Roques
Figure 7. Raffinement des besoins (image tirée de [Roques2007a])

5.4. Près du code

(c) Pascal Roques
Figure 8. Près du code (image tirée de [Roques2007a])

5.5. Comment trouver les classes ?

(c) Pascal Roques
Figure 9. Comment trouver les classes ? (image tirée de [Roques2007a])

5.6. Comment trouver les interactions ?

(c) Pascal Roques
Figure 10. Comment trouver les interactions ? (image tirée de [Roques2007a])

5.7. Liens entre diagrammes

(c) Pascal Roques
Figure 11. Liens entre diagrammes (image tirée de [Roques2007a])

5.8. Démarche complète

(c) Pascal Roques
Figure 12. Démarche complète (image tirée de [Roques2007a])

6. Diagrammatic models

6.1. UML Use Case Diagram

Exemple de Diagramme d’UC
Figure 13. Exemple de Diagramme d’UC

6.2. SysML Requirements Diagram

Exemple de Diagramme d’Exigence SysML
Figure 14. Exemple de Diagramme d’Exigence SysML

6.3. Sketch and drawings (Maquettes)

Dessin complexe
Figure 15. Un exemple de "mockup" réalisé avec l’outil balsamiq
L’IUT de Blagnac a une licence éducation qui vous permet d’utiliser gratuitement Balsamiq : https://iutblagnac.mybalsamiq.com.
L’IUT de Nice a une licence éducation qui vous permet d’utiliser gratuitement l’outil Axure.

6.4. UML Class Diagram

Exemple de Diagramme de classe
Figure 16. Exemple de Diagramme de classe

6.5. SNI: Schéma de Navigation d’Interface

Exemple de SNI
Figure 17. Exemple de SNI
Il existe un plug-in Eclipse pour SNI: http://sourceforge.net/projects/visual-sni/
Lien UC / SNI
Figure 18. Lien UC / SNI

6.6. UML State Machines

Diagramme d’états
Figure 19. Un Diagramme d’états

6.7. UML Sequence Diagram

Diagramme de Séquence
Figure 20. Un Diagramme de Séquence

6.8. UML Component Diagram

Diagramme de Composant
Figure 21. Un Diagramme de Composant
Source: http://www.uml-diagrams.org/deployment-diagrams.html

6.9. SysML Block Definition Diagram

Exemple de Diagramme de BDD SysML
Figure 22. Exemple de Diagramme de BDD SysML

6.10. SysML Internal Block Definition Diagram

Exemple de Diagramme d’IBD SysML
Figure 23. Exemple de Diagramme d’IBD SysML

6.11. UML deployment diagram

Deployement
Figure 24. Example of application deployment to Android (see [uml-diagrams])
Source: http://www.uml-diagrams.org/deployment-diagrams.html

7. Process examples

7.1. One example

  • 1) Identify the app users

  • 2) Identify the main functionalities

  • 3) Analyzing and expanding each functionality

Source: http://www.javacodegeeks.com/2013/07/android-uml-design-an-app-part-1.html

7.2. Agile for Mobile Application Development

7.2.1. Example 1

Some restrictions with mobile application development are:

  • Mobile has restrictions: size of the apps, …​

  • Application should be downloadable very fast

  • Update applications quickly and smoothly

  • Error free and fast

  • Seamlessly interact with backend server as needed

Taken from http://www.infoq.com/news/2014/10/agile-mobile-application

7.2.2. Example 2

Challenges presented by developing mobile apps:

  • Short life cycles

  • Short development cycles

  • Limited hardware

  • Frequently changing user demands

  • Must be easily updateable

  • Must download quickly

See: http://sourcebits.com/app-development-design-blog/what-is-agile-development-for-mobile-apps/

7.2.3. Example 3

An “Agile with Discipline” approach for mobile app development

agile with discipline model
Figure 25. IBM approach for mobile app development (see [IBM])
Taken from [IBM]

7.2.4. Example 4

Multi-target User Interface design & Generation using MDE

Veldhuis
Figure 26. (Taken from [Veldhuis2013])]
Taken from [Veldhuis2013]

8. Reverse Engineering tools

9. Android Application Architecture

9.1. Content

  • Big picture

  • Concepts

  • Android Studio

  • Brainstorm on Android MetaModel

  • Thoughts for your process

  1. Pour ne pas perdre du temps, commencez à lancer l’installation d’Android Studio si ce n’est déjà fait sur vos machines en téléchargeant au choix depuis :

  2. La dernière version d’Android Studio au moment de rédiger ce support est la 4.1 mais ce support de cours utilise les éléments (menus, captures d’écran, etc.) de la version 4.0.2.

9.2. Big Picture

A unique aspect of the Android system design is that any app can start another app’s component.
— Android Developers Fundamentals

9.2.1. Build

Build
Figure 27. Build of an Android app

9.2.2. Running

Running
Figure 28. Running of an Android app

9.2.3. Overall Organization

Organization
Figure 29. Basic organization of an Android app

9.2.4. Interactions

Interactions
Figure 30. Basic interactions between users and apps

9.2.5. Set of libraries, resources, etc.

Overview
Figure 31. Complex organization of concepts

9.2.6. Messages

Try to avoid "Hello JMB!":

Bad: using string "hard coded"
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    ...
    <TextView android:text="Hello JMB!" android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</RelativeLayout>
AVD launching3
Figure 32. Rendu du Layout

Use "@string/message" instead:

Bad: using string "hard coded"
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    ...
    <TextView android:text="@string/message" android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</RelativeLayout>
String.xml
<resources>
    <string name="app_name">My First App</string>
    <string name="action_settings">Settings</string>
    <string name="message">Hello JMB!</string>
</resources>
AVD launching3
Figure 33. Rendu du Layout identique

9.2.7. content_main.xml

content_main.xml is a kind of Layout.

content_main.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    ...
    <TextView android:text="@string/message" android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</RelativeLayout>

9.2.8. Views

A Layout contains components (buttons, etc.) ⇒ Views

View structure
Figure 34. content_main.xml

9.2.9. Intent

Activities communicate through Intent.

In the same app:

Intent
Figure 35. Intent in an app

Or between apps:

Intent b/w apps
Figure 36. Intent between apps

9.3. Android Studio in a minute

9.3.1. Install

welcome

9.3.2. Create a new Android Studio project

start

9.3.3. Select a Project Template

new1

9.3.4. Configure the project

new2

9.3.5. First app created!

AVD launching2

9.3.6. Detail of an activity

activity xml

9.3.7. Android Virtual Device Manager

AVD config

9.3.8. AVD Selection and Configuration

AVD config2

9.3.9. AVD Launching

AVD launching2
AVD launching3

9.3.10. Navigation Editor

AndroidStudioNavigationEditor

9.4. Android metamodel

Android Concepts
Figure 37. Concepts Android

Check the Android fundamentals, enrich the list of important concepts and organize them.

9.5. Organizing you app

  • List of Activities

    • Top Activities

    • Category activities

    • Detail/edit

  • Navigation through the activities

  • App structure

  • Process:

    • define class, resources (images, …​), strings

    • top-level / layout

    • loop for each activity

activities
Figure 38. Organizing activities

9.6. Subtilities not covered

  • Manifest.xml

  • Fragments

  • Screen-specific resources

  • Librairies, themes, styles, etc.

  • Database connection

  • Services

  • Material specifics, ART

  • Distribution and commercial aspects

10. Etude de cas 2020 : Original Quiz Player

10.1. Cahier des charges

Original Quiz Player (OQP) est un projet collaboratif de développement devant permettre simplement :

  • Pour un concepteur de quiz (Quiz) :

    • décrire les questions du quiz et les réponses associées

    • décrire les paramètres supplémentaires

  • Pour un joueur (celui répond au quiz) :

    • jouer seul ou contre les autres joueurs

    • manipuler une interface individuelle de suivie (scores, progressions, …​)

En tant que spécialiste de la modélisation d’applications mobiles, vous aurez la charge de la modélisation des interfaces de l’application.

Voici quelques caractéristiques et besoins clients (en vrac, mais numérotée pour référence) :

  1. Le logiciel doit permettre à une personne de décrire les questions et les réponses associées (type, niveau, mots-clés, …​)

  2. Le logiciel doit permettre à une personne de décrire les paramètres d’un quiz (questions mélangées, choisies au hazard, …​)

  3. Le logiciel doit permettre à une personne de répondre à un quiz

  4. Le logiciel doit permettre à plusieurs personnes de jouer ensemble à un même quiz

Voici quelques options que vous pourrez considérer (en vrac, mais numérotée pour références) :

  1. Le logiciel doit permettre à une personne d’importer/exporter les questions selon plusieurs formats standards (GIFT, Aiken, …​)

  2. Le logiciel doit permettre à une personne d’importer/exporter des quiz existants

  3. Le logiciel doit permettre de sauvegarder puis de reprendre

Quelques commentaires :

  • Comme "Minimal Viable Product" on pourra imaginer le cas d’un logiciel qui affiche les questions une par une, saisie les réponses et affiche le score final. On pourra commencer par une question, puis par un fichier d’entrée (type CSV) de questions, puis améliorer au fur et à mesure.

  • On se limitera aux quiz sans images ou suppléments, dans un premier temps (uniquement du texte).

10.2. Questions

  1. Réalisez un diagramme des cas d’utilisation de cette application.

    uc
    Figure 39. Exemple 2015/2016 (Ballades VTT)

  2. Réalisez un diagramme de domaine (diagramme des classes métiers) de cette application.

    dc2
    Figure 40. Exemple 2015/2016 (Ballades VTT)

  3. Réalisez un diagramme (de votre choix) pour représenter les écrans (et leur enchainement) de votre application.

    balsamiq
    Figure 41. Exemple 2015/2016 d’une maquette en Balsamiq (Ballades VTT)
Un écran est composé d’éléments structurels. Il peut donc être représenté avec un diagramme de classe.

Les enchainements d’écrans peuvent être décrits comme des comportements. On peut utiliser :

enchainement
Figure 42. Une correction possible - Exemple 2016/2017 (SLAT Parapente)
enchainement slat
Figure 43. Une correction possible - Autre exemple 2016/2017 (SLAT Parapente)

10.3. Outils

10.4. Résultats attendus

  • .zip avec figures, modèles .uml, code, etc.

10.5. Evaluation

Rappelons les conseils habituels :

  • clarté des diagrammes et des choix (explicites) de conception ou d’interprétation réalisés

  • cohérence entre les diagrammes

L’évaluation portera principalement sur les critères suivants :

Table 1. Critères
Critère Type de critère Poids approximatif

Diagramme des UC

Correction, pertinence

10%

Diagramme des Classes Domaine

Correction, pertinence

10%

Maquettes utilisateur / Écrans

Correction, pertinence

20%

Diagrammes d’enchainement d’écran

Correction, pertinence

20%

Cohérence inter-modèles (Maquettes/DSS, UC/DSS/DS/DCP)

Correction, pertinence

15%

Communication/Présentations

subjectif :-)

15%

Clarté – Présentation du Dossier

subjectif :-)

10%

Vous pouvez insérer une section "auto-évaluation" dans votre rapport, qui reprend cette grille et vous permet de vous auto-évaluer.

Appendix A: Full Android MetaModel

Taken from: https://github.com/markoudev/modeling

Activity

activity

Behavior

behavior

Entity

entity

Fragment

fragment

Layout

layout

Menu

menu

Resources

resources

View

view

ViewBehavior

viewbehavior

Appendix B: References and useful links

References

  • [] Ana Gram. Raisonner pour programmer. Dunod, 1986.

  • [] Jim Highsmith and Martin Fowler. The agile manifesto. Software Development Magazine, 9(8) :29–30, 2001.

  • [[[1030005]]] Kieran Conboy and Brian Fitzgerald. Toward a conceptual framework of agile methods : a study of agility in different disciplines. In WISER ’04 : Proceedings of the 2004 ACM workshop on Interdisciplinary software engineering research, pages 37–44, New York, NY, USA, 2004. ACM.

  • [] Les Cahiers du Programmeur, UML2, Pascal Roques 3ème Edition, Eyrolles, 2007.

  • [] UML 2 par la pratique, Pascal Roques 6ème Edition, Eyrolles, 2007.

  • [] UML pour les développeurs, Xavier Blanc, Eyrolles, 2006.

  • [] Le projet d’urbanisation du S.I., C. Longépé, 3ème édition, Dunod, 2006.

  • [] Management des SI, M. & P. Gillet, Dunod, 2008.

  • [] Modélisation objet avec UML. Pierre-Alain Muller & Nathalie Gaetner, Eyrolles, 2003.

  • [] http://fr.wikipedia.org/wiki/Unified_Process

  • [] http://developer.android.com/guide/components/fundamentals.html

Links

Glossary

Ressources

The following definitions are only informative. You can find usefull other sources here:
ATL

_ATLAS Transformation Language

DRY

Don’t Repeat Yourself

EMF

_Eclipse Modeling Framework

IHM

Interface Homme-Machine

MCF

Modèle Conceptuel des Flux

MCT

Modèle Conceptuel des Traitements

MOA/MOE

Maîtrise d’ouvrage (MOA) Maîtrise d’oeuvre (MOE)

MOF

Modèle Organisationnel des Flux

MOT

Modèle Organisationnel des Traitements

OMG

Object Management Group

PPN

Programme Pédagogique National

SEF

Schéma d'Enchaînement des Fenêtres

SEP

Schéma d'Enchaînement des Pages

SI

Système d'Information

SNI

Schéma de Navigation d'Interfaces

SO

Système Organisationnel

SysML

System Modeling Language ™

TRL

Technology Readiness Level

URL

Universal Ressource Locator

About…​

This web site has been developped by JMB using the following (open and free) tools: