Cours 2016 Peter Bardu

Palo Altours
Cours 2016 Peter Bardu
Mon Parcours
2010 - Ingénieur en informatique à Polytech Tours.
2013 - Validation Formateur CEFIM Tours
2015 - Validation Formateur CCI Indre
2016 - Validation Formateur Orsys
2016 - Validation Formateur M2I
Cours 2016 Peter Bardu
Expériences
● Beijing, Chine - 2009, Beijing Institute of Technologies.
● New York, Etats-Unis - 2010, ClickOVA.
● Paris - 2011, Prixing.
● Tours - 2012 - 2013, Laboratoire Informatique de Tours.
● A mon compte depuis 2012 :
○ Création d’applications
○ Formation Entreprise
Cours 2016 Peter Bardu
ClickOVA, New York (2010)
Environnement : Start-up en plein coeur de NY.
Boss : Olivier Attia.
Travail réalisé : Reprise des applications iPhone, Android,
Symbian, J2ME, Blackberry et Windows Phone.
Application réalisant la sauvegarde automatique
Expérience : +++
Cours 2016 Peter Bardu
ClickOVA, New York (2010)
Cours 2016 Peter Bardu
Prixing, Paris (2011)
Environnement : Start-up Parisienne, Silicon Sentier.
Boss : Eric Larchevêque.
Travail réalisé : Application Android, site web.
Application comparateur de prix, promotions, cartes de
fidélité, listes de course.
Expérience : +++
Cours 2016 Peter Bardu
Prixing, Paris (2011)
Cours 2016 Peter Bardu
Mon compte (2012-…)
Environnement : Partout, tout le temps...
Boss : Moi-même
Travail réalisé : Applications Android pour enfants.
Cris d’animaux, Puzzles, Apprendre les Maths…
Expérience : +++
Cours 2016 Peter Bardu
Mon compte (2012-…)
Cours 2016 Peter Bardu
Android
Cours 2016 Peter Bardu
10
Définition
Android est un système d'exploitation mobile basé sur le
noyau linux et développé par Google.
Il est destiné aux smartphones, tablettes, Google TV,
Google Auto...
Cours 2016 Peter Bardu
11
Spécificités d’Android
Cours 2016 Peter Bardu
12
Spécificités d’Android
Android se veut :
● Open Source
● Gratuit
● Facile à développer
● Facile à vendre
● Flexible
Cours 2016 Peter Bardu
13
Les versions Android
Cours 2016 Peter Bardu
14
Les versions android
Noms de desserts depuis le début.
Première version stable en avril 2009 : Cupcake 1.5
Septembre 2009 : Donut 1.6
Octobre 2009 : Eclair 2.0 - 2.1
Evolution très rapide.
Cours 2016 Peter Bardu
15
Etape :
Créer une application
Cours 2016 Peter Bardu
16
Créer une application
Les étapes :
1. Avoir l’idée, répondre à un besoin
2. Définir les écrans, la navigation
3. Coder
4. Tester
5. Publier
Cours 2016 Peter Bardu
17
Etape n°1 - Avoir l’idée
Cours 2016 Peter Bardu
18
L’idée
Répondre à un besoin :
● Divertissement,
● information,
● social,
● utile…
Formaliser l’idée, combiner plusieurs idées, faire quelque
chose qui existe déjà ou innover.
Cours 2016 Peter Bardu
19
Etape n°2 - Les écrans, la navigation
Cours 2016 Peter Bardu
20
Interface utilisateur
Dispositif de dialog homme-machine.
C’est grâce à cette interface qui vous interagissez avec
l’application.
Obtenir une identité visuelle, faciliter l’apprentissage,
améliorer la satisfaction de l’utilisateur.
User Frendly, Look and Feel…
Cours 2016 Peter Bardu
21
Pensez vos interfaces
Se concentrer sur l’utilisateur.
● Quelle tranche d’âge ?
● Quelle utilisation va-t-il en faire ? Pro, jeu de 2 min ?
● Quelle sorte d’appareil ?
● Où et quand utiliser l’application ? Canapé ?
Testez les applications sur des vrais utilisateurs.
Vous ne réalisez pas forcément l’application pour vous.
Cours 2016 Peter Bardu
22
Pensez vos interfaces
Une page doit souvent avoir un but principale :
● Faire une action.
● Afficher du contenu.
Ce but doit être immédiatement visible et disponible.
L’utilisateur est généralement “task-driven”.
Cours 2016 Peter Bardu
23
Pensez vos interfaces
Vous utilisez vos yeux et vos doigts !
Choses à éviter :
● Les interfaces trop touffues.
● Les éléments cliquables trop petits.
● Les élément cliquables trop tassés.
Cours 2016 Peter Bardu
24
Imaginez vos interfaces
Prenez une feuille et
un crayon.
Cours 2016 Peter Bardu
25
Navigation
Définissez une
navigation logique
Cours 2016 Peter Bardu
26
Etape n°3 - Programmer
Cours 2016 Peter Bardu
27
Android Studio
Cours 2016 Peter Bardu
28
Structure d’un projet Android
app/
manifests/
AndroidManifest.xml
java/
MainActivity.java
res/
drawable/
layout/
activity_main.xml
menu/
menu_main.xml
mipmap/
ic_launcher.png
values/
dimens.xml
strings.xml
styles.xml
Cours 2016 Peter Bardu
A la racine 3 dossiers :
● manifests : configuration,
● java : le code source,
● res : les ressources.
29
Le dossier src/
Dossier source, contenant tous les fichiers JAVA qui
constituent le programme de l’application.
Ici c’est le code.
Notion de Package : com.votrenom.android.firstapp
Signature unique de votre application.
Cours 2016 Peter Bardu
30
Le dossier res/
On retrouve les ressources du projet :
- Images,
- Sons,
- Mises en pages,
- Styles,
- Constantes : chaînes de caractères, dimensions…
Cours 2016 Peter Bardu
31
Etape n°4 - Tester
Cours 2016 Peter Bardu
32
Lancement
Compilation du projet : build
Installation du fichier APK :Android application Package
Choix du terminal.
Cours 2016 Peter Bardu
33
Emulateur
AVD Manager
(Android Virtual Device)
permet de configurer
un emulateur.
Cours 2016 Peter Bardu
34
Emulateur
Un Nexus 5
Cours 2016 Peter Bardu
35
Etape n°5 - Publier
Cours 2016 Peter Bardu
36
Google developer
Inscription avec une adresse gmail.
Licence à vie pour 25$
Publication illimité d’application.
Cours 2016 Peter Bardu
37
Console développeur
Cours 2016 Peter Bardu
38
Statistiques
Cours 2016 Peter Bardu
39
Ergonomie
Cours 2016 Peter Bardu
40
Le Material Design
Cours 2016 Peter Bardu
41
Cours 2016 Peter Bardu
42
Gestion des densités
et tailles d’écran différentes
Cours 2016 Peter Bardu
43
Les dimensions
Les diverses unités :
● Pixels (px)
● Pouces (in)
● Millimètres (mm)
● Points (pt) = 1/72 pouce
● Pixel à densité indépendante (dp)
● Pixel à taille indépendante (sp) relatif à la taille des
polices de caractères
Cours 2016 Peter Bardu
44
Notion de “dp”
“Density-independant Pixel”
Une unité de mesure permettant de créer des dimensions
indépendamment de la densité de pixels de l’écran.
1 dp = 1 pixel pour un écran de 160 dpi
Cours 2016 Peter Bardu
45
Notion de “dp”
Exemple avec trois mobiles :
● Nexus 4 : Taille de 4.7 pouces et résolution de 320 dpi
(1280x768 px).
● Nexus 5 : Taille de 4.95 pouces et résolution de 445 dpi
(1920x1080 px).
● Nexus 6 : Taille de 5.96 pouces et résolution de 493 dpi
(2560x1440 px).
Cours 2016 Peter Bardu
46
Notion de “dp”
Cours 2016 Peter Bardu
47
Exemple
Informations
Nexus 4
Nexus 5
Nexus 6
Dots Per Inch (dpi)
320
445
493
Catégorie d’écran
XHDPI
XXHDPI
XXXHDPI
Nombre de pixels horizontale
768px
1080px
1440px
2.4 inches
2.43 inches
2.92 inches
Taille physique horizontale
dp = px / (dpi / 160)
Conclusion horizontale
Density-independantPixel
Cours 2016 Peter Bardu
Nexus 4
Nexus 5
Nexus 6
384dp
388dp
468dp
48
Utilisation
App bar height: 56dp
App bar left and right padding: 16dp
App bar icon top, bottom, left padding: 16dp
App bar title left padding: 72dp
App bar title bottom padding: 20dp
Cours 2016 Peter Bardu
Utilisation
Cours 2016 Peter Bardu
Utilisation
Cours 2016 Peter Bardu