Développez votre première application pour iOS

Ah, les dossiers ! Si vous n'avez jamais jailbreaké votre iDevice, vous n'avez peut-être jamais vu de dossier.

"Les applis doivent être de bons citoyens"
- Documentation d'Apple

Autrement dit, les applis iOS doivent placer leurs fichiers correctement, à la bonne place.

Le système de fichiers d'iOS fonctionne avec des sandbox. Une sandbox est en fait un moyen de protéger votre appli grâce à des privilèges d'accès. Votre appli pourra accéder sans problème aux fichiers de sa sandbox mais pas forcément aux fichiers des sandbox des autres applis.

"Chaque appli est une île"
- Documentation d'Apple

Vous vous en doutez, il existe des exceptions : pour accéder à la musique, aux contacts, etc.

Bonne question. Peut-être avez-vous déjà remarqué sur votre Mac les dossiers ".app". Sinon, allez tout de suite dans votre dossier "Applications" : chaque item est un dossier (appelé "paquet"). À l'installation, il contient déjà toutes les ressources de votre appli (comme les images par exemple). On ne peut pas écrire directement dans ce dossier. En revanche, il contient 3 autres dossiers accessibles en lecture/écriture :

• Documents : censé contenir des fichiers à montrer à l'utilisateur ;

• Library : censé contenir des fichiers accessibles mais à ne pas montrer à l'utilisateur ;

• tmp : contient des fichiers temporaires. Le système nettoie régulièrement ce dossier lorsque l'appli n'est pas en train de tourner. Les fichiers contenus dans ce dossier ne seront pas sauvegardés sur iTunes par l'appareil.

Bien entendu, vous êtes libres de créer d'autres sous-dossiers pour faciliter votre hiérarchisation.

Swift fournit déjà un gestionnaire bien pratique : NSFileManager. Cette classe permet d'accéder au système de fichiers et d'y effectuer des changements. 

Je vous propose d'ajouter un système de gestion de CVs à votre app pour découvrir tout ça en pratique.

Ajoutez des onglets à votre app avec des Tab bar controller

On va en profiter pour apprendre à utiliser le UITabBarController.

À l'image du UINavigationController, il permet de naviguer entre les controllers mais de manière encore plus simple. Vous en avez sûrement déjà vu :

Créez tout de suite deux nouveaux controller qui héritent de UIViewController :

• clic droit > New File… > Swift File > VisualiserCV.swift

import UIKit
class VisualiserCV: UIViewController {
}

• clic droit > New File… > Swift File > ModifierCV.swift

import UIKit
class ModifierCV : UIViewController {
}

Importez dans votre projet ces deux imageset  (voircv et editcv) issus de Material Design (un design créé par Google, voir le site des icônes Material Design). Appelez l'œil "voircv" et le stylo "editcv". (pour les télécharger, cliquez simplement sur "PNGS" en bas à droite de la page)

 Allez dans le storyboard,

• Recherchez "tab…", glissez-déposez un tab bar controller.

• Supprimez les deux controller générés automatiquement.

• Glissez déposez deux UIViewController.

• Donnez-leur leurs classes respectives "VisualiserCV" et "ModifierCV".

• En maintenant ctrl enfoncée, cliquez sur le tab bar controller et relâchez sur ModifierCV, choisissez "relationship segue" > "view controllers" ; idem pour VisualiserCV.

Dans le controller VisualiserCV, un élément est apparu en bas :

Sélectionnez-le, rendez-vous dans Attributes Inspector et choisissez l'image "voircv" et le titre "Visualiser". Faites la même chose avec ModifierCV.

Notre Tab Bar Controller est prêt !

Ajoutez un bouton sur la page d'accueil "Gérer mon CV" et créez une segue entre le bouton et le tab bar controller : maintenez ctrl enfoncée, cliquez sur le bouton et relâchez le clic sur le tab bar controller, choisissez "show" dans le menu.

Dans ModifierCV :

• Ajoutez simplement un bouton en bas de l'écran, donnez-lui des contraintes pour le centrer et l'aligner en bas.

• Ajoutez un UITextView qui occupera le reste de l'écran.

• Créez les variables correspondantes :

@IBOutlet var bEnregistrer : UIButton!
@IBOutlet var tvCV : UITextView!

• Liez les variables aux vues du storyboard.

• Créez l'action enregistrer(sender : UIButton) à lier au storyboard au clic du bouton.

Enregistrez des fichiers dans votre app (Data -> Fichiers)

Dans la méthode enregistrer, on va récupérer le chemin du dossier "Documents" de notre sandbox :

// Retourne la liste des dossiers dans /Documents
let dirPaths = NSSearchPathForDirectoriesInDomains(.DocumentDirectory, .UserDomainMask, true)
//On récupère le premier dossier, donc Documents
let docsDir = dirPaths[0]

On crée une constante pour le nom de notre fichier :

let adresseDuCV = "cv.txt"

On crée une instance du File Manager dont je vous ai parlé tout à l'heure :

let filemgr = NSFileManager.defaultManager()

On récupère le texte entré :

let text = tvCV.text

On crée l'URL de notre fichier :

let path = NSURL(string: docsDir)!.URLByAppendingPathComponent(adresseDuCV)

Enfin, on crée le fichier et, s'il existe déjà, on l'écrase :

filemgr.createFileAtPath(
    path.absoluteString,
    contents: text.dataUsingEncoding(NSUTF8StringEncoding),
    attributes: nil)

Ici, on a converti la variable text (de type String) en NSData. En effet, le paramètre "content" de cette méthode peut prendre n'importe quel type de données. On peut donc enregistrer n'importe quel fichier grâce à cette méthode (image, son, video, pdf, excel, etc.).

À l'inverse, on peut instancier une variable de type NSData à partir d'un fichier avec :

NSData(contentsOfURL: path)

Visualisez les fichiers (Visualiser <- WebView <- Data)

Pour la partie visualisation, pour vous simplifier la vie, vous pouvez tout simplement visualiser le fichier dans une WebView en utilisant :

wvMain.loadData(NSData(contentsOfURL: path)!, MIMEType: "text/plain", textEncodingName: "UTF-8", baseURL: path)

ou encore plus simplement avec une NSURLRequest que vous avez vue dans la partie 3 :

let urlRequest = NSURLRequest(URL: path)
wvMain.loadRequest(urlRequest)

Tout simplement parce qu'elle peut charger des tas de types de fichiers.

Petit plus graphique : l'élévation

À la place d'ajouter une bordure à votre TextView pour qu'on la voie, je vous propose de simuler une élévation. Il s'agit tout simplement de lui donner une ombre, ce qui donnerait ceci : 

Pour cela on utilise le calque (ou layer). Dans un premier temps, on permet au calque d'aller au-delà de la vue avec :

tvCV.layer.masksToBounds = false

On donne le rayon sur lequel l'ombre va s'appliquer :

tvCV.layer.shadowRadius = 3

On indique le décalage par rapport à la vue : si vous laissez 0, 0, votre ombre sera de tous les côtés.

tvCV.layer.shadowOffset = CGSizeMake(0, 0)

Et enfin, on indique l'opacité de l'ombre comprise entre 0 (entièrement transparent) et 1 (entièrement opaque) :

tvCV.layer.shadowOpacity = 0.6

Il vous suffit d'écrire ces quatre ‌lignes dans la méthode viewDidLoad de la classe ModifierCV.

Il y a d'autres manières de faire. Jusqu'à présent, nos éléments visuels étaient bien séparés. Soit dans le storyboard, soit dans des fichiers Swift à part. Vous allez me dire que dans le storyboard, on n'entend pas parler de Shadow. C'est vrai, et ça rend la chose très peu pratique d'ailleurs. Mais sachez que vous pouvez ajouter des attributs dans le storyboard même si ceux si n'apparaissent pas dans "attributes inspector" ().

Allez dans le storyboard, et sélectionnez le UITextView. Allez dans "Identity inspector" ().

En-dessous de la partie "Identity", vous pouvez voir une partie appelée "User Defined Runtime Attributes". C'est là qu'on va pouvoir ajouter les attributs qu'on veut ! Par exemple, supprimez les quatre lignes de "ModifierCV.swift" et à la place, dans le storyboard ajoutez ces mêmes attributs :

Vous trouverez d'autres outils très pratiques dans les chapitres suivants, comme l'utilisation du debugger, des paramètres, les ressources visuelles, la traduction de votre appli, l'utilisation de Git, …