Nom & Prénom :

Examen Développement Mobile 16 Juin 2021

NB : Aucun document n'est autorisé

I- QCM Cocher la ou les bonnes réponses (4pts)

Une App Mobile Flutter est un ensemble de : Une App Mobile React Native est un ensemble de :

o Activity o Activity
o Component o Component
o Widget o Widget
o Resources o Resources
o Configuration Files o Configuration Files

Une App Mobile Android est un ensemble de : Quelle est la principale différence entre une
application native et une application cross-platform ?
o Activity o Une application native est développée
o Component une seule fois et en un seul langage,
o Widget alors qu'une application cross-platform
o Resources est développée une fois pour chaque
Configuration Files plateforme (iOS / Android)
o Une application native est développée
une fois pour chaque plateforme (iOS /
Android), alors qu'une application cross-
platform est développée une seule fois et
en un seul langage.

II- Partie Analyse (8pts)

1/8
 Nom & Prénom :

Examen Développement Mobile 16 Juin 2021

NB : Aucun document n'est autorisé

II-1 Analyser le programme suivant et dire ce qu’ils affichent comme résultats (2pts) :

@override
class Home extends StatefulWidget { Widget build(BuildContext context) {
@override return Scaffold(
_HomeState createState() => _HomeState(); appBar: AppBar(
} title: Text('Map COVID-19
Tracker'),
class _HomeState extends State<Home> { ),
body: GoogleMap(
GoogleMapController mapController; markers: _createMarker(),
final LatLng _center = const LatLng(45.521563, - circles: _circles,
122.677433); onMapCreated: _onMapCreated,
void _onMapCreated(GoogleMapController initialCameraPosition:
controller) { CameraPosition(
mapController = controller; target: _center,
} zoom: 14.0
),
Set<Marker> _createMarker(){ ),
return <Marker>[ );
Marker( }
markerId: MarkerId('home'), }
position: LatLng(45.521563, -122.677433),
icon: BitmapDescriptor.defaultMarker,
infoWindow: InfoWindow(title: 'Current
Location')
)
].toSet();
}

Set<Circle> _circles = Set.from([Circle(

circleId: CircleId('Infection'),
center: LatLng(45.521563, -122.677433),
radius: 450,
strokeColor: Colors.pinkAccent
)]);

2/8
 Nom & Prénom :

Examen Développement Mobile 16 Juin 2021

NB : Aucun document n'est autorisé

II-2 Analyser le programme suivant et dire ce qu’ils affichent comme résultats (2pts) :

class FilmItem extends React.Component { content_container: {

render() { flex: 1,
return ( margin: 5
<View style={styles.main_container}> },
<Image header_container: {
style={styles.image} flex: 3,
source={{uri: getImageFromApi(film.poster_path)}} flexDirection: 'row'
/> },
<View style={styles.content_container}> title_text: {
<View style={styles.header_container}> fontWeight: 'bold',
<Text fontSize: 20,
style={styles.title_text}>{film.title}</Text> flex: 1,
<Text flexWrap: 'wrap',
style={styles.vote_text}>{film.vote_average}</Text> paddingRight: 5
</View> },
<View vote_text: {
style={styles.description_container}> fontWeight: 'bold',
<Text style={styles.description_text} fontSize: 26,
numberOfLines={6}>{film.overview}</Text> color: '#666666'
</View> },
<View style={styles.date_container}> description_container: {
<Text style={styles.date_text}>Sorti le flex: 7
{film.release_date}</Text> },
</View> description_text: {
</View> fontStyle: 'italic',
</View> color: '#666666'
)}} },
const styles = StyleSheet.create({ date_container: {
main_container: { flex: 1
height: 190, },
flexDirection: 'row' date_text: {
}, textAlign: 'right',
image: { fontSize: 14
width: 120, }
height: 180, })
margin: 5,
backgroundColor: 'gray'
},

3/8
 Nom & Prénom :

Examen Développement Mobile 16 Juin 2021

NB : Aucun document n'est autorisé

II-3 Analyser le programme suivant et dire ce qu’ils affichent comme résultats (2pts) :

<?xml version="1.0" encoding="utf-8"?> <LinearLayout

<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/and android:layout_width="match_parent"
roid"
xmlns:app="http://schemas.android.com/apk/res- android:layout_height="wrap_content"
auto"
xmlns:tools="http://schemas.android.com/tools" android:orientation="horizontal">
android:layout_width="match_parent" <Button
android:layout_height="match_parent" android:layout_width="0dp"
tools:context=".Score"
android:orientation="vertical" android:layout_height="wrap_content"
android:layout_margin="25dp" android:layout_weight="1"
> android:text="Logout"
<ImageView android:id="@+id/bLogout"/>
android:layout_width="match_parent" <Button
android:layout_height="wrap_content" android:layout_width="0dp"
android:src="@drawable/logoo"/>
<TextView android:layout_height="wrap_content"
android:layout_width="wrap_content" android:layout_weight="1"
android:layout_height="wrap_content" android:text="Try again"
android:text="Votre score est :" android:id="@+id/bTry"/>
android:textSize="25dp" </LinearLayout>
android:textStyle="bold" </LinearLayout>
android:layout_gravity="center"/>

<com.github.lzyzsd.circleprogress.DonutProgress
android:id="@+id/donut_progress"
android:layout_width="275dp"
android:layout_height="285dp"
android:layout_marginLeft="50dp"
app:donut_progress="30" />

4/8
 Nom & Prénom :

Examen Développement Mobile 16 Juin 2021

NB : Aucun document n'est autorisé

II-4 Analyser le programme suivant et dire ce qu’ils affichent comme résultats (2pts) :

public class Score extends AppCompatActivity Toast.makeText(getApplicationContext(),

{ "Merci de votre Participation !",
Button bLogout, bTry; Toast.LENGTH_SHORT).show();
DonutProgress donut_progress; finish();
int score = 4; }
});
@Override bTry.setOnClickListener(new
protected void onCreate(Bundle View.OnClickListener() {
savedInstanceState) { @Override
super.onCreate(savedInstanceState); public void onClick(View v)
{
setContentView(R.layout.activity_score); startActivity(new
donut_progress=(DonutProgress) Intent(Score.this,Quiz1.class));
findViewById(R.id.donut_progress); }
bLogout=(Button) });
findViewById(R.id.bLogout);
bTry=(Button) }
findViewById(R.id.bTry);
Intent intent=getIntent();
score=intent.getIntExtra("score",0) ;

donut_progress.setDonut_progress((100*score/5
)+"");
bLogout.setOnClickListener(new
View.OnClickListener() {
@Override
public void onClick(View v) {

5/8
 Nom & Prénom :

Examen Développement Mobile 16 Juin 2021

NB : Aucun document n'est autorisé

III- Problème (8pts)

On souhaite concevoir et réaliser une Application mobile Smart-Bus scolaire permettant
d’assurer le suivi en temps réel des bus scolaires sur GoogleMaps en utilisant une
technologie de votre choix.

1. Proposer un diagramme de cas d’utilisation de cette Application

2. Proposer un diagramme de navigation résumant la totalité des ‘screens’ de cette
Application
3. Proposer un diagramme de classe
4. Justifier le choix des technologies front-end et Back-end
5. Donner le code de cette Application

Bonne chance !

6/8
 Nom & Prénom :

Examen Développement Mobile 16 Juin 2021

NB : Aucun document n'est autorisé

Certification React Native(1/2)

NB : Cette partie est optionnelle, elle est réservée uniquement aux étudiants concernés par
le dépôt de leurs certificats React Native.

• Question 1

Le module Platform de React Native permet de connaître :

Attention, plusieurs réponses sont possibles.

o la taille du smartphone de l'utilisateur

o la plateforme (iOS / Android) de l'utilisateur
o le modèle du smartphone de l'utilisateur
o la version de l'OS de l'utilisateur
• Question 2

Si je souhaite jouer deux animations en même temps, je vais utiliser :

o Animated.Sequence
o Animated.Parallel

• Question 3

J'ai inspecté un élément graphique dans ma vue, j'ai ouvert Chrome Developer
Tools et je souhaite obtenir des informations sur cet élément graphique. Dans
la console de Chrome Developer Tools, je dois saisir :
o $this
o $r
o this
o r

• Question 4

En informatique, comment appelle-t-on l'action de réinjecter des données

sauvegardées dans un objet ?

o La réhydratation
o La persistance
o Le data-binding

7/8
 Nom & Prénom :

Examen Développement Mobile 16 Juin 2021

NB : Aucun document n'est autorisé

Certification React Native (2/2)
NB : Cette partie est optionnelle, elle est réservée uniquement aux étudiants concernés par
le dépôt de leurs certificats React Native

• Question 5

Le component React Native View possède une prop onPress. Vrai ou faux ?
o Vrai
o Faux

• Question 6

Les 3 cycles de vie d'un component sont mounting, unmounting, et ?

o creating
o displaying
o updating
o deleting
• Question 7

Dans le cycle de vie mounting, la méthode componentDidMount est-elle appelée

avant ou après le rendu ( render ) d'un component ?
o Avant
o Après
• Question 8

Avec Redux, une action possède obligatoirement un type et une valeur. Vrai
ou faux ?

o Vrai
o Faux

8/8