Applications Mobiles - Centrale Lyon

Introduction non -technique à la création d'applications mobiles. Présentation des différents rôles :
- UI (User Interface, Charte Graphique, Résolutions, Icônes vectorielles)
- UX (User experience, Ergonomie, Hamburger Menu)
- Développeur (Webservices, JSON, XML, Codes Erreur HTTP, Swift)
- Chef de Projet (Méthode Agile, Scrum, Kanban, JIRA, TRAC, iOS & apps update rate)
- Démo live-coding : Xcode, Interface Builder, AutoLayout, Storyboards, Debugging, Instruments

Transcript

1. APPLIS MOBILES Processus de Création & Développement MDSI - 23 février 2015
2. PRÉSENTATION Dimitri Dupuis-Latour
 Ingénieur iOS @dupuislatour
 dupuislatour@me.com 2007  2015 2013 2003
3. PROJETS Xcode iPhone SDK GDF DolceVita CFM Kiosk MyPMU MyLittleParis Equidia …
4. Equidia
5. Thermostat Dolce Vita
6. ET VOUS ?
7. SOMMAIRE 1. User Interface (UI)
 — Charte Graphique — Génération Images — Multi-Résolutions — 2. User Experience (UX)
 — UI ≠ UX — Notions d'ergonomie — Mockups & Wireframes — 3. Développement
 — iOS, Android, Web et Back — Webservices — 4. Chef de Projet (CDP)
 — Méthodologie Agile — Présentation d'outils (JIRA, Trac, BuildBots) — 5. Communication & Marketing
 — Processus Soumission — SEO & Optimisation Mots clés — 6. Coding Time
 — Xcode — Interface Builder — Instruments — 7. Questionnaire
8. UI User Interface
9. CHARTE GRAPHIQUE
10. CHARTE GRAPHIQUE blog.capitainetrain.com
12. CHARTE GRAPHIQUE
13. CHARTE GRAPHIQUE • Spécifications Design
 Logo, Polices, Couleurs, icônes, sons, tonalité… • Traduction de la personnalité de la marque • Homogénéisation
 Retrouver le même univers sur le web, l'iPhone, Android
14. MULTI RÉSOLUTIONS
15. http://www.paintcodeapp.com/news
16. Pour chaque icône, fournir 3 images Retina Retina HD Normal 
17. Pour Android: 5 images ! iOS ✅ n/a ✅ ✅ n/a Android ✅ ✅ ✅ ✅ ✅ New ! New !
18. Record Recording… recorded: Today, 7:00pm Enregistrement #1 recorded: Today, 7:00pm Enregistrement #1 2x 3x 1x 1x 2x 3x Explosion des images à générer… 1x 2x 3x
19. Poids de l'app à télécharger • Temps de téléchargement • ‘Limite’ de 100 Mo si on est pas en Wi-Fi
20. Approche traditionelle : Downscaling 3x mic@3x.png 2x mic@2x.png 1x mic@1x.png
21. Problème de l'alignement des pixels sur la grille (antialiasing) @3x @1x flou @1x net @1x custom
22. Vectoriel Solution
23. FontAwesome : Set of 479 Icons
24. Utilisable partout • App iOS (framework FontAwesomeKit/Core) • App Android (framework Iconify) • Site Web (@font-face / WebFonts) • Dans une présentation keynote/PPT (comme celle-ci)
 => Pour vos mockups ! • 479 icônes / 86 Ko !!
25. Exemples d'utilisation Nom Prénom Lyon 5ème ⋆ ⋆ ⋆ ⋆ ⋆ 4,5
26. Google Material Design Font http://google.github.io/material-design-icons/
27. thenounproject.com Google image, pour les icônes
28. Créer une police d'icônes: icomoon.io Uploader icônes perso Ajouter icônes standard Générer
30. UX User Experience
31. ? UI vs. UX Recherche d'un Meilleur Design @PimVerlaan
32. UI vs. UX Recherche d'un Meilleur Design @PimVerlaan
33. UI vs. UX Recherche d'un Meilleur Design
34. UX IS NOT UI UX IS NOT UI What does UX actually mean? The various UX roles that a person can fulfill are plentiful. Some are whole jobs, some whole careers; others are tactical roles we all move in and out of. What so many UX designers would like you to remember is that UX is not just UI design. Field research Face to face interviewing Creation of user tests Gathering and organizing statistics Creating personas Product design Feature writing Requirement writing Graphic arts Interaction design Information architecture Usability Prototyping Interface layout Interface design Visual design Taxonomy creation Terminology creation Copywriting Presenting and speaking Working tightly with programmers Brainstorm coordination Design culture evangelism Field research Face to face interviewing Creation of user tests Gathering and organizing statistics Creating personas Product design Feature writing Requirement writing Graphic arts Interaction design Information architecture Usability Prototyping Interface layout Interface design Visual design Taxonomy creation Terminology creation Copywriting Presenting and speaking Working tightly with programmers Brainstorm coordination Design culture evangelism HOW UX WANTS TO BE SEEN HOW UX IS TYPICALLY SEEN “UX is the intangible design of a strategy that brings us to a solution.” uxisnotui.com
35. • Qui est la cible visée ? • Public technophile (derniers iPhones et derniers iOS ?) • Public moins technophile, (iOS6, iPhone 3G…) • Retour d'expérience Equidia, MyLittleParis • Mode Offline: utilisation en offline (M°, avion) ou connexion wifi/3G requise ? • Retour d'expérience RATP • Contexte d'utilisation de l'app ? • Dans la rue, recherche rapide d'information, à une main ? • Chez soi, consultation de contenu, à 2 mains ? Avant de concevoir un écran Posez-vous les bonnes questions
36. Prise en main d'un smartphone 49% 36% 15% One Handed Cradled Two handed 40% Interaction avec le téléphone sans même utiliser le clavier ni l'écran Etude de Steven Hoober, Février 2013, www.uxmatters.com
37. Prise en main d'un smartphone Réalisation d'une Heat Map Etude de Steven Hoober, Février 2013, www.uxmatters.com
38. NON AUX HAMBURGERS MENUS
40. HAMBURGER MENUS • Dur à atteindre • Nombres de clics doublés • Navigation Fail: Ne permet pas de savoir où on est • Tendance à devenir un Fourre-tout (Prefs, CGU…) • Facebook, Twitter, AirBnB: Ils l'avaient, ils l'ont abandonné. Apple ne l'a jamais eu • N'est pas un composant natif du SDK
41. HAMBURGER MENUS • L'avis d'Apple lors de la dernière WWDC
 http://blog.manbolo.com/2014/06/30/apple-on-hamburger-menus • Retour d'expérience: l'app RedBooth
 https://redbooth.com/blog/hamburger-menu-iphone-app TABS … …
42. AUTRE GRAND PRINCIPE DE L'ERGONOMIE…
43. UNE PIÈCE, UNE FONCTION
44. UN ÉCRAN, UNE FONCTION
45. "A SCREENFUL OF CONTENT" • Un écran reste petit • Ne pas se laisser piéger lors de la conception des écrans iPhone sur un écran d'ordinateur, toujours tester le rendu sur device • Charge cognitive
46. Dev Android, iOS, Web,Back,
47. Android, iOS, Web, Back,   WebService
48. Exemple de WebService JSON/REST Equidia - Liste des émissions disponibles en replay
49. Exemple de WebService XML/SOAP GDF - Etat du thermostat
50. CARACTÉRISTIQUES D'UN BON WEBSERVICE • JSON vs. XML • REST vs. SOAP • URLs versionnées (http://api.myapp.com/v1/users) • Utilisation verbes HTTP: GET, POST, PUT, DELETE • Utilisation erreurs HTTP
51. ERREURS HTTP * `2xx` en cas de succès: * `200` - OK * `201` - Created * `204` - No Content * `4xx` en cas d'erreur du client (paramètre manquant ou invalide): * `400` - Bad Request * `401` - Unauthorized * `403` - Forbidden * `404` – Not Found * `5xx` en cas d'erreur du serveur: * `500` - Internal Server Error * `503` - Service Unavailable
52. HTTP STATUS CATS
60. SWIFT
63. CDP Chef de Projet
64. MÉTHODES AGILES • SCRUM • KANBAN • XP: Extreme Programming
65. Outil: JIRA www.iossupportmatrix.com
66. Outil: TRAC www.iossupportmatrix.com http://trac.webkit.org
67. AUTRES OUTILS • iTunes Connect • Google Developer console • Google Analytics
68. Version Cible Pour quelles versions d'OS et d'appareil développer ?
69. Taux d'adoption iOS Des nouvelles versions rapidement adoptées 150/149 1GB A7 M 4 128MB 6 M 4 1 128MB 6 M 4 1 128MB 6 M 4 1 128MB 6 M 4 1 256MB 7 M 4 2 256MB 7 M 4 2 256MB 7 M 4 2 A4 512MB 7 M 4 2 A4 256MB 7 M 4 2 A4 512MB 7 M 4 2 A5 512MB 7 M 4 2 A5 1GB 7 M 4 2 A5X 512MB 7 M 4 2 A5 512MB 7 M 4 2 A5 1GB 7 M 4 2 A6 1GB 7 M 4 2 A6X 1GB 7 M 4 2 A6 1GB 8 M 4 2 A7 1GB 8 M 4 2 A7 1GB 8 M 4 2 A7 [new] iPad March 2012 iPod touch September 2007 iPhone 3G July 2008 iPod touch (2nd gen) September 2008 iPhone 3GS June 2009 iPod touch (3rd gen) September 2009 iPad April 2010 iPad 2 March 2011 iPhone 4S October 2011 iPhone 5 September 2012 iPhone 5c September 2013 iPhone 5s September 2013 iPad Air October 2013 iPad mini 2 October 2013 iPhone 4 June 2010 iPad October 2012 iPad mini October 2012 iPod touch (5th gen) September 2012 iPod touch (4th gen) September 2010 iPhone June 2007 ARMv6 ARMv7 ARMv7s ARM64 Key Device Compatibility Do not support Full support Earliest release Latest release Chip generation / Device memory Geek Bench rating Single Core/Multi Core * Geekbench v2 scores only Accelerometer Bluetooth LE GPS (Cellular iPad only) Microphone Still Camera Retina Display ARM Version Camera Flash Gyroscope OpenGL ES Version Telephony Lightning Port M7/M8 Coprocessor Front Facing Camera Location Services Peer-to-Peer Video Camera TouchID Auto-Focus Camera Game Kit Magnetometer SMS Wifi Apple Pay  iOS Support Matrix Autumn 2014 Edition - v3.1.2 http://iossupportmatrix.com @isupportmatrix English iPhone OS 1.0 iPhone SDK 2.0 iPhone SDK 3.0 iPhone SDK 4.0 iOS 5 iOS 6 iOS 7 Model ID iOS 8 1GB 8 M 4 2 A8 iPhone 6 September 2014 1GB 8 M 4 2 A8 iPhone 6 Plus September 2014 2GB 8 M 4 2 A8X iPad Air 2 October 2014 1GB 8 M 4 2 A7 iPad mini 3 October 2014 iPhone5,1 iPhone5,2 iPad3,4 iPad2,5 iPad2,6 iPod5,1 iPad3,1 iPad3,2 iPod4,1 iPhone3,1 iPad1,1 iPod3,1 iPhone2,1 iPod2,1 iPhone1,2 iPod1,1 iPhone1,1 iPhone4,1 iPhone5,3 iPhone5,4 iPhone6,1 iPhone6,2 iPad4,1 iPad4,2 iPad4,4 iPad4,5 iPad2,1 iPad2,4 iPhone7,2 iPhone7,1 iPad5,3 iPad5,4 iPad4,7 iPad4,8 iPad4,9 136* 135* 136* 188* 150/149 278* 454* 209/209 7.1.2 206/206 8.1 8.1 8.1 8.1 8.1 8.1 8.1 8.1 8.1 8.1 8.1 262/495 215/406 260/493 215/410 260/491 712/1278 773/1408 698/1249 1363/2456 1304/2528 1418/2568 8.1 1610/2880 8.1 1596/2854 8.1 1794/4441 8.1 1418/2568 7.0 7.0 7.0 7.0 4.2.1 6.1.6 6.1.6 4.2.1 4.2.1 2.1.1 2.0 1.0 1.1 3.1.3 3.1.3 3.0 5.1.1 4.3.5 6.0 4.3.5 5.0 5.1.1 3.1.1 6.0 4.0 4.2.6 4.2.1 6.0 6.0 iPad SDK 3.2 5.1 (GSM) (CDMA)     www.iossupportmatrix.com
70. Taux d'adoption iOS Des nouvelles versions iOS rapidement adoptées 15 Sept 2013 Sortie iOS 7 iOS 7 iOS 8 iOS 6 15 Sept 2014 Sortie iOS 8 source: mixpanel.com/trends
71. Taux d'adoption iOS Des nouvelles versions iOS rapidement adoptées source: @_nb (développeur Capitaine Train)
72. Mise à jour des Apps Des nouvelles versions d'Apps rapidement adoptées source: @_nb (développeur Capitaine Train) Cycle 6 semaines (Méthode Agile: Kanban)
73. Quelle version d'iOS supporter ? sometimes, More is Less • Coordonnez votre sortie et celle d'iOS (Délais AppStore) • Ne développer que pour 1 ou 2 versions de l'OS (N & N-1) • Avantage du premier arrivant (PassBook, Widgets, Apple Watch) • Mise en avant des early adopters par Apple, blogs, presse… • Evitez 'technical debt' • "Le futur est plus grand que le passé"
74. Coding Time Let's Code !
80. DEMO EXEMPLE 1: EQUIDIA EXEMPLE 2: RÉCRÉER UNE APP DE CHAT
81. DÉMO XCODE: RÉCAPITULATIF • Xcode • Interface Builder • Instruments • iOS Simulateurs • Prototypage avec Storyboards • Objective-C / Swift
82. RÉSUMÉ 1. User Interface (UI)
 — Charte Graphique — Génération Images — Multi-Résolutions — 2. User Experience (UX)
 — UI ≠ UX — Notions d'ergonomie — Mockups & Wireframes — 3. Développement
 — iOS — Android — Web — Back — Webservices — 4. Chef de Projet (CDP)
 — Méthodologie Agile — Présentation d'outils (JIRA, Trac, BuildBots) — 5. Communication & Marketing
 — Processus Soumission — SEO & Optimisation Mots clés — 6. Coding Time
 — Xcode — Interface Builder — Instruments — 7. Questionnaire
83. Questionnaire