Chp5 - Développement iOS

Chp6 : Développement iOSCycle de Vie, Composants Principaux, Comportement…

Conception et Développement d’Applications MobilesGL4 (Opt ion Mobi le) - 2016

Dr. L i l ia SFAXIw w w.l i l iasfaxi .w ix.co m/ l i l iasfaxi

Sl id e 1

PLAN

1. Environnement de Développement iOS2. Architecture de l’Environnement iOS3. IHM Guidelines

4. Architecture d’une Application iOS5. Cycle de Vie d’une Application

Dr. L i l ia SFAXI w w w.l i l iasfaxi .w ix.co m/ l i l iasfaxi

Sl id e 2

Chp5 : Développement iOS

ENVIRONNEMENT DE DÉVELOPPEMENT IOSChp5 : Développement iOS


Sl id e 3

1. Environnement de Développement iOS

2. Architecture iOS

3. IHM Guidelines

4. Architecture d’une Application

5. Cycle de V ie d’une Application

iOS

• Système d’exploitation présent sur les appareils iPhone, iPadet iPod touch

• Gère le matériel de l’appareil et fournit les technologies nécessaires pour implémenter des applications natives

• Est accompagné d’un ensemble d’applications • Phone, Mail, Safari…

• Fournit des services systèmes standard pour l’utilisateur


Sl id e 4

Environnement de Développement iOS

iOS SDK

• Contient les outils et interfaces nécessaires pour développer, installer, exécuter et tester les applications natives créées pour un appareil iOS

• Les applications natives sont construites en utilisant • Des frameworks iOS

• Un langage de programmation (Objective-C, et plus récemment Swift)

• Un environnement de développement Apple • MacOSX: SE Apple

• Xcode: IDE de Apple


Sl id e 5


En quelques mots, iOS…

• Utilise une architecture en couches

• Offre des frameworks pour manipuler les interfaces système• Répertoire contenant une bibliothèque partagée dynamique et les

ressources nécessaires pour la supporter (images, applications helpers, fichiers headers…)

• Offre la bibliothèque du développeur• À utiliser sans modération: http://developer.apple.com/iphone


Sl id e 6


Distribution des Versions (Mars 2016)

• 79% des appareils utilisent iOS 9.


Sl id e 7


https://developer.apple.com/support/appstore/

ARCHITECTURE IOSChp5 : Développement iOS


Sl id e 8


2. Architecture iOS

3. IHM Guidelines



Architecture en Couches


Sl id e 9

Architecture iOS

Services et Technologies

Fondamentales

Services et Technologies

Sophistiquées

Architecture en Couches (1/4)


Sl id e 10

Architecture iOS

Cocoa Touch• Définit:

• L ’ apparence de l’application• L ’ infrastructure et support pour les technologies clef

• Contient les caractéristiques clés pour construire des applications iOS, par ex:• Handoff: extension de la UX entre les appareils• AirDrop: partage de documents entre appareils proches• Storyboards: permet de créer vos interfaces et les visualiser au même endroit• Notifications push: alerter les utilisateurs des informations

• Autres frameworks• GameKit: support pour le Game Center• Address Book UI: Interface standard de création et édition des contacts du téléphone• EventKit: contrôleurs pour manipuler les évènements du calendrier



Sl id e 11

Architecture iOS

Media• Contient les technologies graphiques, audio et vidéo pour implémenter les expériences multimédia



Sl id e 12

Architecture iOSCore Services• Services systèmes fondamentaux pour les applications

• Services Peer-to-peer: P2P via Bluetooth• iCloud: services de stockage sur le cloud apple• Protection de données: encryption• SQLite, In-App Purchase, Support XML…

• Frameworks:• Core Foundation et Foundation Frameworks: types de base que toutes les applications utilisent• Accounts: Accès SSO pour les comptes utilisateurs• Address Book: Accès à la base de données des contacts de l’utilisateur• Core Telephony Framework, Core Media Framework…



Sl id e 13

Architecture iOS

Core OS• Caractérisitiques bas niveau pour construire les technologies iOS• Frameworks:

• Core Bluetooth: interaction avec les accessoires bluetooth basse énergie• External Accessory: support pour communiquer avec les accessoires matériels attachés à un appareil iOS• Local Authentication: permet d’utiliser TouchID pour authentifier l’utilisateur• System (Kernel), Security, support 64-bit…

IHM GUIDELINESChp5 : Développement iOS


Sl id e 14


2. Architecture iOS

3. IHM Guidelines



Concepts de Base pour Conception IHM iOS

• Déférence• La UI doit aider à comprendre et interagir avec le

contenu, pas à l’envahir

• Clarté• Le texte doit être lisible, les icônes précises et claires,

les ornements subtils

• Profondeur• Mouvements réalistes et couches visibles


Sl id e 15

IHM Guidelines


• Déférence• Prendre avantage de tout l’écran

• Reconsidérer le réalisme• Éviter les gradients, ombres…

• Laisser le focus sur le contenu• Utiliser des éléments translucides

• Laisser deviner le contenu derrière


Sl id e 16

IHM Guidelines





• Laisser deviner le contenu derrière


Sl id e 17

IHM Guidelines





• Laisser deviner le contenu derr ière


Sl id e 18

IHM Guidelines


• Clarté• Laisser beaucoup d’espace négatif

(Espace autours et entre les éléments d’une image)• Rendre le contenu plus perceptible et

compréhensible

• Laisser la couleur simplifier l’UI• Utiliser une couleur pour souligner

les éléments importants• Assurer la lisibilité en utilisant les

polices système• Polices iOS ajustent leur espacement

au conteneur• Utiliser les boutons sans bordure


Sl id e 19

IHM Guidelines




compréhensible

• Laisser la couleur simplifier l’UI• Utiliser une couleur pour souligner les

é léments importants

• Assurer la lisibilité en utilisant les polices système• Polices iOS ajustent leur espacement



Sl id e 20

IHM Guidelines




compréhensible






Sl id e 21

IHM Guidelines



Sl id e 22

IHM Guidelines



compréhensible






• Profondeur• Affichage du contenu sous forme de

couches distinctes• Montrent la hiérarchie et relation

entre les objets

• Afficher les listes sous forme de couches superposées• Avoir une visibil ité sur tous les

éléments

• Utiliser des transitions pour montrer la hiérarchie


Sl id e 23

IHM Guidelines


• Profondeur• Affichage du contenu sous forme de

couches distinctes• Montrent la hiérarchie et relation

entre les objets

• Afficher les listes sous forme de couches superposées• Avoir une visibil ité sur tous les

éléments

• Utiliser des transitions pour montrer la hiérarchie


Sl id e 24

IHM Guidelines


• Profondeur• Utiliser des transitions pour montrer la hiérarchie


Sl id e 25

IHM Guidelines

Anatomie d’une Application

Utilisation de UIKit Framework pour définir les composants de base de l’application


Sl id e 26

IHM Guidelines

Anatomie d’une Application

• Quatre catégories de composants graphiques• Barres

• Informations contextuelles pour indiquer l’emplacement de l’application, permettre la navigation et initier des actions

• Content Views• Vues portant un contenu spécifique à l’application, et qui permettent certa ins

comportements tels que le défilement, l’ insertion, le réarrangement…

• Contrôles• Éléments graphiques réalisant des actions ou affichant une information

• Vues temporaires• Apparaissent brièvement pour donner aux utilisateurs une information

importante ou additionnelle


Sl id e 27

IHM Guidelines

ARCHITECTURE D’UNE APPLICATIONChp5 : Développement iOS


Sl id e 28


2. Architecture iOS

3. IHM Guidelines



Patrons de Conception

• MVC (?)

• Target-Action

• Delegation


Sl id e 29

Architecture d’une Application

La Vue

• Permet à l’utilisateur d’interagir avec l’application de la manière la plus simple possible

• Scene : Écran de l’application

• Utilisation des storyboards pour la conception et l’implémentation de l’interface dans un environnement graphique


Sl id e 30


Hiérarchie des Vues

Catégorie de Vue Objectif Exemples

Contenu Afficher un type particulier de contenu Image, étiquette de texte

Collection Afficher des collections ou groupes de vues Table, Collection

Contrôles Réaliser des actions ou afficher des informations

Bouton, Slider, Switch

Barres Naviguer, ou réaliser des actions Toolbar, Nav Bar, Tab Bar

Entrées Recevoir un texte à partir de l’utilisateur Textview, barre de recherche

Conteneurs Sert de conteneur pour d’autres vues Vue, scroll view

Modales Interrompt le flux régulier de l’application pour permettre à l’utilisateur de faire une action

Alerte, action sheet


Sl id e 31


Hiérarchie des Vues (Exemple)


Sl id e 32


Window

Navigation Controller (Sous-classe de ViewController) View

Navigation Bar(dessinée par le

Navigation Controller)

Slider(Sous-classe de View)

Voir Exemple :TODOList-ObjC - 1

Les Contrôleurs

• iOS est basé sur la programmation évènementielle• Le flux de l’application est déterminé par des évènements:

• Évènements Système

• Évènements Utilisateur

• La réponse de l’application à une action de l’utilisateur est reflétée par l’ interface

• C’est l’utilisateur qui doit avoir le contrôle, pas le développeur!

• La logique de gestion des évènements est définie dans le ViewController• Un ViewController pour chaque

ContentView (Scene)


Sl id e 33


Les Contrôleurs : Rôles

• Coordination du flux d’information entre le modèle et les vues• Gestion du cycle de vie des ContentViews• Gestion des changements d’orientation de l’appareil

• Réponse aux interactions utilisateur• Implémentation des transition d’un type de contenu à un autre

• Pour connecter entre le storyboard et le code, ils utilisent:• Actions

• Outlets

• Contrôles• Contrôleurs de Navigation

• Segues (Enchaînements)


Sl id e 34


Actions

• Action:• Un bout de code lié à un évènement qui peut survenir dans votre application

• Quand l’ évènement a lieu, le code est exécuté

• Une action peut :• Manipuler une donnée

• Modifier l’ interface util isateur

• Déclencher un traitement

• Pour définir une action, i l faut créer une méthode avec un type de retour IBAction et un paramètre sender• Sender: représente l ’objet responsable du déclenchement de l ’action

• IBAction: mot clef spécial, indiquant que la méthode est une action, appelée à partir d’un élément de l ’ Interface Builder (IB)


Sl id e 35


Outlets et Contrôles

• Outlet• Permet de référencer les objets d’une interface à partir du code source• Crée une propriété représentant cet objet dans le fichier V iewController cible• La propriété est de type IBOutlet

• Mot clef indiq uant q ue cette propriété est connectée à un élément du Interface Bu i lder

• Contrôle• Objet graphique avec lequel un utilisateur peut interagir

• bouton, s lider, switch

• Création d’un évènement de contrôle quand un utilisateur interagir avec un contrôle, fa isant partie d’une de ces catégories:• Toucher et glisser • Edition • Changement de va leur


Sl id e 36


Contrôleurs de Navigation

• View Controller particulier, permettant de gérer les transitions entre les différentes Scenes de votre application

• Va créer une pile (LIFO) des différents ViewControllers entre lesquels il navigue, appelée : Pile de Navigation• Le premier élément de la pile (scene qui a déclenché la navigation), s’appelle

Root View Controller ( il n’est jamais enlevé de la pile)• Les autres View Controllers peuvent être ajoutés ou supprimés de la pile, selon

la navigation de l’utilisateur

• Un contrôleur de Navigation présente également un contenu propre à lui, en particulier la Barre de Navigation• Vue en haut de la scene, fournissant le contexte de navigation• Montre l’emplacement de l’utilisateur dans la pile de navigation• Définit un bouton Back par défaut, permettant de revenir au dernier élément de

la pile• Peut contenir d’autres boutons, à conf igurer à votre guise


Sl id e 37


Segue

• Un Segue (ou enchaînement) représente une transition entre deux ViewController: la source et la destination


Sl id e 38


Segue

• Plusieurs types de Segues:• Show

• Fait appel à un nouveau contenu à empiler, au dessus du VC courant

• Show Detail• Soit empile un nouveau contenu, soit remplace le VC courant dans la pile (selon

le layout utilisé)

• Present Modally• Appelle une vue fille , qui cache la vue courante, pour permettre à l’utilisateur de

réa liser une action particulière

• Popover Presentation• Appelle une vue ancrée à la vue courante, qui disparaît dès qu’on clique a illeurs

• Unwind• Permet de naviguer vers une vue précédente dans la pile, pas nécessairement

• Custom• Crée une transition personnalisée


Sl id e 39



Types de View Controllers

• Content View Controller• Gestion du contenu

• Créé en écrivant une sous-classe de UIViewController

• Permet de :• Peupler la vue avec des données • Répondre aux évènements utilisateur


Sl id e 40



• Container View Controller• Arrangent le contenu d’autres View Controllers, ses f ils• Peut être un parent d’autres contrôleurs, et un f ils d’un autre container

• Créatio n d’une hiérarchie

• Un conteneur• Fo urnit sa pro pre API po ur gérer ses fi ls

• Déc ide si ses fi ls co mmuniquent o u so nt rel iés, et quels types de relatio ns i ls o nt• Peut gérer la h iérarchie des vues

• Peut impo ser des co ntraintes de co nceptio n spéc ifiques à ses fi ls

• Plusieurs sous-types:• Navigatio n Co ntro l ler

• Tab Bar Co ntro l ler• Split View Co ntro l ler

• Po po ver Co ntro l ler• Page View Co ntro l ler


Sl id e 41



• Container View Controller• Navigation Controller


Sl id e 42



• Container View Controller• Tab Bar Controller


Sl id e 43



• Container View Controller• Split View Controller


Sl id e 44



• Container View Controller• Popover Controller


Sl id e 45



• Container View Controller• Page View Controller


Sl id e 46


Modèle

• Représente une structure de données et (optionnellement) une logique métier pour la consistance de ces données

• Utilisation du Framework Foundation pour représenter les types manipulés par l’application• Deux catégories de types de données

• Value Classes: types basiques (NSString, NSNumber, NSDate…)

• Collection Classes: types composés (NSArray, NSSet et NSDictionary)


Sl id e 47



CYCLE DE VIE D’UNE APPLICATIONChp5 : Développement iOS


Sl id e 48


2. Architecture iOS

3. IHM Guidelines



Point d’Entrée d’une Application

• Comme toute application en C : la fonction main• Fonction prédéfinie, créée automatiquement par xCode, et à ne pas modifier

• Permet de rendre le contrôle au framework UIKit grâce à la fonction UIApplicationMain, qui permet de : • Créer les objets principaux de l’application• Charger la UI de l’application à partir du storyboard

• Appeler votre code pour une installation initiale• Lancer le cycle d’exécution de l’application


Sl id e 49

Cycle de Vie d’une Application

Structure d’une Application


Sl id e 50




Sl id e 51


UIApplication: • Faciliter l’interaction entre le

système et les autres objets de l’application

• Gère les évènements• Transmet les transitions et

évènements à l’Application Delegate



Sl id e 52


Application Delegate : • Au cœur de votre code • Le seul objet garanti de se trouver dans

toutes les applications• Travaille avec UIApplication pour gérer:

• L’initialisation de l’application• Les états transitions• Les évènements de haut niveau



Sl id e 53


Objets Data Model• Sauvegardent le contenu de votre

application (base de données + objets associés)

Objet Document• Sous-classes de UIDocument• Permet de charger les données, se trouvant

dans plusieurs documents, in-memory, pour permettre leur manipulation sans que l’application ne soit ANR



Sl id e 54


Objets View Controller• Étend la classe UIViewController• Gestion de la présentation du contenu de

votre application à l’écran• Un VC gère une view et ses sous-vues• Utilisent le framework UIKit (entre autres)

pour définir des VC particuliers (tabBar, image picker, navigation…)



Sl id e 55


UIWIndow• Permet de coordonner la présentation d’une ou plusieurs vues

sur la page• La plupart des applications ont un seul Window, présentant le

contenu dans l’écran principal, mais certaines en définissent un additionnel pour un affichage sur un écran externe

• Pour passer d’une vue à une autre, un contrôleur est utilisé. Un window n’est jamais remplacé



Sl id e 56


Vues et Contrôles• Représentation visuelle du contenu• UIKit fournit des vues standards pour représenter plusieurs

types de contenusLayer Objects• Incorporent des couches de Core Animation: infrastructure

d’animation graphique

États d’Exécution d’une Application


Sl id e 57




Sl id e 58


L’ application n’ a pas été lancée ou était en exécution et a été terminée par le système



Sl id e 59


L’ application est en exécution en avant-plan, mais ne reçoit pas d’évènements. Elle peut cependant être entrain d’exécuter un autre codeEn général, c’est un état transitoire



Sl id e 60


L’ application est en exécution en avant-plan, et reçoit des évènements. Mode normal pour les applications en avant-plan



Sl id e 61


L’ application est en arrière-plan, et exécute du code. En général, état transitoire avant la suspensionMais, certaines applications entrent directement dans cet état au lieu de inactive, si elles veulent exécuter du code en arrière plan au démarrage



Sl id e 62


L’ application est en arrière-plan, mais n’ exécute pas de code. L’ application reste en mémoireLe système fait passer les applications à cet état automatiquement, sans les notifierSi le système a problème de mémoire, il peut purger des applications suspendues sans les notifier pour laisser de l’espace aux application en premier plan



Sl id e 63


didFinishLaunchingWithOptions

applicationWillResignActive

applicationDidBecomeActive

applicationDidEnterBackgroundapplicationWillEnterForeground

applicationWillTerminate

Voir Exemple :AppLifeCycle

Références

• Tutorial Getting Started: https://developer.apple.com/library/ios/referencelibrary/GettingStarted/RoadMapiOS/index.html#//apple_ref/doc/uid/ TP40011343-CH2-SW1

• IHM:https://developer.apple.com/library/ios/documentation/UserExperience/Conceptu

al/MobileHIG/index.html#//apple_ref/doc/uid/ TP40006556-CH66-SW1

• Cycle de vie de l’Applicationhttps://developer.apple.com /library/ios/documentation /iPhone/Conceptual/iPhoneOSProgrammingGuide/ TheAppLifeCycle/ TheAppLifeCycle .html#//apple_ref/doc/uid/ TP40007072-CH2-SW1

• Architecture iOShttps://developer.apple.com/library/ios/documentation/Miscellaneous/Conceptual/iPhoneOSTechOverview/Introduction/Introduction.html


Sl id e 64

Site du Développeur Apple: developer.apple.com

Technology

Chp5 - Développement iOS