DÉVELOPPEMENT DE LOGICIELS D’ENTREPRISES IICOURS 02

PLAN▸ Introduction à iOS

▸ Introduction à Xcode

▸ Introduction à la conception d’interfaces avec Xcode

▸ Recipeasy

▸ Exercices

Introduction à iOS

PLATEFORME APPLE▸ Offre un écosystème logiciel et matériel complet

▸ Et outils de développements performants

PROGRAMME DE DÉVELOPPEUR APPLE▸ Bien que Xcode soit gratuit, publier les applications sur le App Store requiert

un abonnement annuel au programme de développeur Apple

▸ On peut tester le développement iOS gratuitement en utilisant seulement un compte Apple gratuit(appleid)

▸ Un abonnement complet coûte 130$ annuellement

▸ Programme pour les entreprise à 400$ annuellement permet de distribuer les applications via son propre serveur, sans passer par le App Store

▸ https://developer.apple.com/programs/

CRÉER UN COMPTE DÉVELOPPEUR GRATUIT▸ https://developer.apple.com/account/

▸ Si vous ne possédez pas déjà un compte appleid, créez le maintenant: “Create Apple ID”

▸ Sinon, saisissez vos informations de connexion

▸ Suivez les étapes à l’écran

▸ Votre compte appleid sera utilisé avec Xcode pour tester vos applications sur un appareil physique

RESSOURCES DE L’ÉCOSYSTÈME

https://developer.apple.com/develop/

TECHNOLOGIE IOSiOS

InteractionsUIKit, Événements tactiles

Multimédia Traitement images, Audio, Vidéo, Animations, 2D, 3D

Expose les fonctionnalités du systèmeRéseau, Fichiers, SQLite, Threads, GPS

Noyau UnixFonctionnalités primaire du système d’exploitation Sécurité, Alimentation, Sockets

ARCHITECTURE IOS - MVC▸ Model-View-Controller

▸ UIApplication: Gère l’application

▸ App Delegate: Point de contact d’iOS avec notre application

▸ View Controller: Défini le comportement de l’application,reçoit les événements

▸ View: Défini les éléments visuels etanimations

▸ Model: Données, persistance et règles du domaine

https://developer.apple.com/library/content/documentation/iPhone/Conceptual/iPhoneOSProgrammingGuide/TheAppLifeCycle/TheAppLifeCycle.html

ARCHITECTURE IOS - MVC

https://developer.apple.com/library/content/documentation/General/Conceptual/DevPedia-CocoaCore/MVC.html

Objets du domaine: .swift

Sous-classes de UIViewController: .swift

UIView et sous-classes, en code ou WYSIWYG;code: .swiftvisuel: .storyboard, .xib

CYCLE DE VIE▸ Cycle de vie de l’application

▸ Not running: Non existante

▸ Inactive: État de transition, peut exécuter du code, mais ne reçoit pas d’événements

▸ Active: En exécution au premier-plan, visible

▸ Background: Exécution en arrière-plan, invisible

▸ Suspended: Exécution suspendue, conservée en mémoire, peut être terminée(→ not running)

https://developer.apple.com/library/content/documentation/iPhone/Conceptual/iPhoneOSProgrammingGuide/StrategiesforHandlingAppStateTransitions/StrategiesforHandlingAppStateTransitions.html

CYCLE DE VIE▸ Méthodes du cycle de vie de l’application

1. application:willFinishLaunchingWithOptions:

2. application:didFinishLaunchingWithOptions:

3. applicationDidBecomeActive:

4. applicationWillResignActive:

5. applicationDidEnterBackground:

6. applicationWillEnterForeground:

Exemples:https://developer.apple.com/library/content/documentation/iPhone/Conceptual/iPhoneOSProgrammingGuide/StrategiesforHandlingAppStateTransitions/StrategiesforHandlingAppStateTransitions.html

1

23

4

5

6

CYCLE DE VIE AVANCÉ

http://stackoverflow.com/questions/6519847/what-is-the-life-cycle-of-an-iphone-application

CYCLE DE VIE DUVIEW CONTROLLER▸ viewDidLoad: initialisation

▸ viewWillAppear

▸ viewDidAppear

▸ viewWillDisappear

▸ viewDidDisappear

▸ viewDidUnload

INTRODUCTION À XCODE ET IOS▸ Apple - Introduction à iOS

▸ https://developer.apple.com/library/content/referencelibrary/GettingStarted/DevelopiOSAppsSwift/BuildABasicUI.html#//apple_ref/doc/uid/TP40015214-CH5-SW1

▸ Stanford - CS193P

▸ https://itunes.apple.com/ca/course/developing-ios-11-apps-with-swift/id1309275316

▸ https://www.youtube.com/watch?v=TZL5AmwuwlA&list=PL3d_SFOiG7_8ofjyKzX6Nl1wZehbdiZC_

Xcode

XCODE

XCODE▸ Modèles de projet

XCODE▸ Configuration du nouveau projet

XCODE▸ Interface

XCODE▸ Démarrer l’application

▸ Choix de l’environnement d’exécution: simulateur ou appareil

▸ Status

▸ Mode d’édition

▸ Contrôle des panneaux

XCODE▸ Hiérarchie des fichiers du projet

▸ Recherche dans le projet ou certains fichiers

▸ Erreurs et avertissements

XCODE▸ Fichiers

▸ Fichier de configuration du projet, .xcodeproj

▸ Sous-dossiers(physique) ou groupe(logique)

▸ AppDelegate, point d’entrée de l’application

▸ ViewController, sous-classe de UIViewController

▸ Main, Fichier d’interface principal de l’app, .storyboard

▸ Assets, ressources visuelles(images) de l’application

▸ LaunchScreen, fichier d’interface du splash screen

▸ Info.plist, propriétés de l’application(manifest)

XCODE▸ Configuration pour compiler sur un appareil

▸ Sans appleid on peut tester uniquement dans le simulateur

▸ Po u r t e s t e r s u r u n appareil, il faut saisir son appleid dans Team

▸ PA S B E S O I N D ’ U N ABONNEMENT PAYANT

XCODE▸ Exécuter l’application

▸ On peut sélectionner l’environnement d’exécution: un simulateur ou un appareil à partir du bouton de la barre d’outils

▸ Il est possible d’en créer d’autres pour tester différents environnements: téléphone, tablette, montre, tv

ARCHITECTURE IOS EN PRATIQUE▸ Model-View-Controller

https://developer.apple.com/library/content/documentation/General/Conceptual/DevPedia-CocoaCore/MVC.html

Objets du domaine: .swift

Sous-classes de UIViewController: .swift

UIView et sous-classes, en code ou WYSIWYG;code: .swiftvisuel: .storyboard, .xib

XCODE▸ Fichier du contrôleur

XCODE▸ Fichier d’interface,

storyboard

▸ Hiérarchie de vues

▸ Plan de travail

▸ Inspecteur de propriétés

▸ Banque de composants

XCODE▸ Fichier d’interface,

storyboard

▸ Inspecteur de propriétés ▸ Point d’entrée d’interface

▸ Inspecteur d’identité ▸ Association entre la vue et

le code

RESSOURCES GRAPHIQUES▸ Assets.xcassets regroupe les différentes

ressources de l’application

▸ Les ressources sont affichées sous forme de liste et peuvent être organisées via une hiérarchies de groupes

▸ On peut créer une multitude de types de ressources, selon la plateforme visée: https://developer.apple.com/library/content/documentation/Xcode/Reference/xcode_ref-Asset_Catalog_Format/AssetTypes.html#//apple_ref/doc/uid/TP40015170-CH30-SW1

ICÔNE D’APPLICATION▸ On assigne la ressource AppIcon dans le manifest via le fichier de configuration

du projet

IMAGE▸ On doit donner un nom à notre image qu’on utilisera ensuite au besoin dans le

code ou l’éditeur d’interface(inspecteur de propriétés)

DEBUGGER ET BREAKPOINTS▸ Xcode possède un débogueur et un mécanisme de points d’arrêt(breakpoints)

Conception UI

CONCEPTION UI▸ La majorité de la conception visuel des applications est faites à l’aide de

l’éditeur WYSIWYG de Xcode: Interface Builder

▸ Selon le besoin, il est également possible de construire l’interface par programmation

▸ iOS utilise un mécanisme de contraintes nommé Auto Layout permettant à l’interface de s’adapter au contenu ET au contenant(taille et orientation de l’écran)

▸ On édite les fichiers .xib et .storyboard avec Interface Builder

AUTO LAYOUT▸ 2 types de changement provoquent un ajustement des contraintes

▸ Externe: Rotation, Split View, Lancement de l’app

▸ Interne: Modification du contenu d’une vue, changement de langue

▸ Auto Layout calcule un ensemble d’équations mathématiques dont les paramètres dictent la position et la taille des éléments

AUTO LAYOUT - CONTRAINTES▸ Une contrainte permet de définir une équation, qui, lorsque combinée

judicieusement à d’autres, permet d’obtenir un arrangement visuel complet

▸ Une contrainte définit une relation entre les 2 attributs d’éléments visuels(d’éléments différents ou du même), ainsi que certains paramètre affectant celle-ci

AUTO LAYOUT - CONTRAINTES▸ Plusieurs attributs peuvent être configurés à l’aide des contraintes

▸ NotAnAttribute? Si un seul item est utilisé ou qu’on assigne une constante

AUTO LAYOUT - CONTRAINTES▸ Pour qu’une interface soit valide, elle doit permettre de calculer la taille ET la

position(verticale et horizontale) de chaque vue de sa hiérarchie. ▸ Sinon, on dit que l’interface est ambiguë.

Gauche + Largeur Gauche + Droite Gauche + CentréeExemple 1, contraintes horizontales seulement Exemple 2, complet

AUTO LAYOUT DANS INTERFACE BUILDER▸ Bien qu’on puisse créer les contraintes dans le code, il souvent plus simple de le

faire visuellement via Interface Builder

▸ On commence par positionner grossièrement les éléments sur le plan de travail

▸ Puis, on crée les contraintes une à une entre les éléments jusqu’à ce que notre interface ne soit plus ambiguë(ctrl-click/clic-droit ou outils de contrainte)

▸ On crée les contraintes avec le plus proche voisin de chaque vue

▸ Évitez de donner une taille fixe pour favoriser une interface adaptative

▸ Utilisez les indicateurs Top Layout et Bottom Layout

AUTO LAYOUT DANS INTERFACE BUILDER - TRAITS▸ On peut adapter l’interface selon certains traits (caractéristiques) de l’écran:

▸ Contraintes(ajout, suppression)

▸ Vues(ajout, suppression)

▸ Polices

▸ Couleurs

TRAITS - VISUALISATION

TRAITS - PERSONNNALISATION

Compact width seulement

Compact height seulement

Compact height ET

compact width

BARRE D’OUTILS▸ Recalculer les contraintes

▸ Envelopper dans une StackView

▸ Contraintes d’alignement

▸ Contraintes de positionnement

▸ Résoudre les problèmes Auto Layout

DÉMO! ! w: C

Any

RESSOURCES▸ Contraintes

https://developer.apple.com/library/content/documentation/UserExperience/Conceptual/AutolayoutPG/AnatomyofaConstraint.html#//apple_ref/doc/uid/TP40010853-CH9-SW1

▸ Auto Layouthttps://www.raywenderlich.com/64392/video-tutorial-beginning-auto-layout https://developer.apple.com/library/content/documentation/UserExperience/Conceptual/AutolayoutPG/WorkingwithConstraintsinInterfaceBuidler.html#//apple_ref/doc/uid/TP40010853-CH10-SW1

▸ Gestion des traits https://medium.com/@craiggrummitt/size-classes-in-interface-builder-in-xcode-8-74f20a541195#.x7hp343xx

DOCUMENTATION D’APPLE▸ Portail des développeurs Apple —> Recherche en haut à droite

https://developer.apple.com/ https://developer.apple.com/develop/ https://developer.apple.com/library/content/navigation/

▸ Technologies iOS https://developer.apple.com/library/content/documentation/Miscellaneous/Conceptual/iPhoneOSTechOverview/Introduction/Introduction.html#//apple_ref/doc/uid/TP40007898

▸ Architecture iOShttps://developer.apple.com/library/content/documentation/iPhone/Conceptual/iPhoneOSProgrammingGuide/Introduction/Introduction.html#//apple_ref/doc/uid/TP40007072

RESSOURCES▸ MVC

https://developer.apple.com/library/content/documentation/General/Conceptual/DevPedia-CocoaCore/MVC.html

▸ Cycle de vie et architecture https://developer.apple.com/library/content/documentation/iPhone/Conceptual/iPhoneOSProgrammingGuide/TheAppLifeCycle/TheAppLifeCycle.html

DOCUMENTATION D’APPLE▸ Documentation Auto Layout

https://developer.apple.com/library/content/documentation/UserExperience/Conceptual/AutolayoutPG/index.html#//apple_ref/doc/uid/TP40010853

▸ Guide des standards d’interface pour iOShttps://developer.apple.com/ios/human-interface-guidelines/overview/design-principles/

Recipeasy

RECIPEASY▸ Recipeasy est une application permettant de sauvegarder des recettes qui évoluera au fil de

nos apprentissages.

▸ Vous expérimenterez les concepts avec les exercices, puis vous les appliquerez dans Recipeasy

▸ Utilisez BitBucket individuellement pour développer Recipeasy

Exercices

EXERCICE 1‣ Créez un nouveau projet Xcode: Single view application

▸ Supprimez le fichier ViewController.swift

▸ Supprimer l’objet viewController dans le storyboard

▸ Créez les fichiers et éléments nécessaires pour afficher un log des méthodes du cycle de vie(application et contrôleur) iOS

▸ Surchargez les méthodes du cycle de vie

▸ N’oubliez pas de lier le contrôleur et sa représentation dans le storyboard!

▸ Explication https://youtu.be/ofvCm7_efn0

EXERCICE 2▸ Créez un icône d’application personnalisé et intégrez le à votre projet Xcode

▸ Explication https://youtu.be/0VFlR7mmduY

EXERCICE 3▸ Créez une interface selon le modèle ci-dessous ▸ Carré jaune: 50% width ▸ Ajuster à 50% height si h:C

▸ Inverser l’orientation des éléments bleu et rouge selon les trait

▸ w:R h:R variations: w: C h: C

▸ Explication https://youtu.be/FPAqsROqqxc

EXERCICE 4▸ Programmez un écran de profil

selon le modèle suivant

▸ NavigationController

▸ Personnalisation descouleurs

▸ Écran adaptatif

▸ Explicationhttps://youtu.be/QHDmeUdQXkY

Any

h: C Ajuster le ratio de l’image

EXERCICE 4 w: R et h: R Réorganiser la mise en page

EXERCICE 4▸ Ce qui produit une interface adaptative!

RECIPEASY▸ Créez les interfaces de Recipeasy

▸ Utilisez un storyboard distinct pour l’écran de connexion et d’inscription