1 Laboratoire - TIM-Magazine (projet 1)

Transcription

1 1 Laboratoire - TIM-Magazine (projet 1) Objectif général Programmer une application ios qui offre à l utilisateur la possibilité d habiller sa photo à partir de maquettes de magazines et de pouvoir publier le résultat sur les réseaux sociaux facebook et twitter Éléments couverts 1. Élaboration d une interface utilisateur 2. Chargement et suppression de scènes par programmation 3. Capture de la scène vers une image 4. Enregistrement d une image dans l album photo 5. Ajout et utilisation du framework social 6. Configuration d un compte twitter et facebook sous ios 7. Publication, par programmation, de messages sur twitter et facebook 8. Programmation d événements 9. Utilisation de la POO Note: Le texte en rouge indique une tâche à réaliser en laboratoire.

2 1.1 Étape 1 Réalisation des maquettes Il faut créer un nouveau projet de type Single View pour le ipad. Ne pas choisir l option Storyboard. Placer une photo de vous sur la scène principale du projet. Nous viendrons y superposer une maquette de magazine à une étape ultérieure du projet. Au bas de l écran, il faut placer deux boutons personnalisés qui serviront à publier nos pages sur les réseaux sociaux.

3 Vous devez avoir une scène par maquette. Pour créer une nouvelle scène, il suffit d ajouter au projet, un nouveau fichier de type View : Note : Les scènes seront ultérieurement chargées par programmation.

4 Pendant l étape d élaboration des maquettes, il est recommandé de fixer la couleur de la scène à noir. Cela va permettre de distinguer le texte blanc. Nous changerons le fond de noir à transparent : clear color à l étape de chargement des interfaces.

5 1.1.1 Conception de la page couverture numéro 1: Note: La flèche rouge indique une zone de saisie de texte

6 1.1.2 Conception de la page couverture numéro 2:

7 1.1.3 Conception de la page couverture numéro 3:

8 1.1.4 Conception de la page couverture numéro 4: Réalisez une page couverture de votre choix. 1.2 Chargement de la maquette 1 par programmation Pour charger une scène par programmation, il suffit d utiliser la méthode loadnibnamed de la classe NSBundle. La classe NSBundle offre des méthodes qui permettent de manipuler les fichiers de l application. Par exemple, - (void)viewdidload { [super viewdidload]; UIView * ecranmagazine; // Chargement d une page à partir d un fichier NIB ecranmagazine = [[[NSBundle mainbundle] loadnibnamed:@"magazine01" owner:self options:nil] objectatindex:0]; } // Ajouter la nouvelle View à la scène principale [self.view addsubview: ecranmagazine]; Il ne faut oublier de renseigner la couleur d arrière-plan de la maquette en transparence sinon les objets de la scène principale seront masqués par le nouvel objet. Remarquez aussi que les boutons (facebook et twitter) ne reçoivent plus les évènements de l utilisateur car ils sont derrière la maquette du magazine. La solution à ce problème est d insérer la maquette au lieu de l ajouter à la scène. [self.view insertsubview:pagecourante atindex:[self.view.subviews count]-2]; L expression self.view.subviews count]-2 permet de pointer avant les deux derniers objets de la scène.

9 Note: Une solution élégante serait de placer tous les boutons dans une View et de placer cette dernière à la fin de la liste des objets de la scène. Nous pourrions alors utiliser la syntaxe suivante pour insérer la maquette avant la palette des boutons : [self.view insertsubview:pagecourante atindex:[self.view.subviews count]-1]; Résultat sur le simulateur: Vérifiez que les boutons twitter et fb sont accessibles.

10 1.3 Passer d une maquette à l autre version menu boutons Notre application possède quatre (4) maquettes de magazine. La maquette numéro 01 est insérée automatiquement au chargement de l app. Ajoutons un objet UISegmentedControl dans notre panneau de bouton. Puis, renseignons le nombre de segments ainsi que les titres. Il faut maintenant définir une action de l objet vers le controleur de la scène fichier viewcontroller.h

11 Plaçons une trace dans la méthode changermagazine pour confirmer qu il y a effectivement appel suite à une sélection. - (IBAction)changerMagazine:(id)sender { // À faire en classe: Modifier la signature du sender NSLog(@"changerMagazine: la sélection vaut %d:", ((UISegmentedControl*) sender).selectedsegmentindex); }

12 De façon empirique, nous constatons que l objet UISegmentedControl retourne une valeur entre 0 et nbéléments-1. Il ne reste plus qu à programmer une structure logique qui insérera la couverture magazine correspondant à la sélection de l utilisateur. Note : Pour enlever un objet de la scène il faut utiliser la syntaxe suivante : [ecranmagazine removefromsuperview]; Note : L utilisation de cette méthode, dans le cas où un l objet n est pas dans une scène, ne provoque pas de plantage de l application. Voici comment définir une variable globale à notre classe ViewController () { UIView * ecranmagazine; } À faire par l étudiant en laboratoire Programmer le chargement de la maquette de magazine correspondant au choix de l utilisateur. Il est important de normaliser le code. Pas de structures lourdes dans votre code. Ne pas utiliser l instruction if ou switch. Il est possible de réaliser la tâche avec un maximum de 4 lignes de code :

13 - (IBAction)changerMagazine:(id)sender { // 1 - Retirer le magazine courant de la scène // 2 - Construire une chaine de caractères qui décrit le nom du fichier // 3 - Charger le magazine à partir d un nom d un fichier NIB } // 4 - Ajouter le magazine à la scène principale

14 1.3.2 Résultat final :

15 1.4 Utilisation des réseaux sociaux Notre application est presque terminée. Il reste à capturer l écran et à l envoyer vers les réseaux facebook et twitter. 1.5 Capture de l écran Avant de pouvoir soumettre la couverture d un de nos magazines, il va falloir faire une capture de la scène vers une instance de la classe UIImage. Définissons des liens d action entre les boutons FB + twitter et notre contrôleur :

16 Ajoutons le code suivant dans le fichier d implémentation du contrôleur de la scène: // Pour avoir accès à.layer #import ViewController () { UIView * ecranmagazine; UIImage * _imagefinale; // Pour stocker une copie de la scène sous forme d image -(void) sauvegarder{ // Description : méthode servant à capturer l écran et au besoin, // en faire une sauvegarde dans l album photos. // 1 - Préparer un contexte de dessin à partir de la taille de la scène UIGraphicsBeginImageContext(self.view.bounds.size); // 2 Dessiner à partir du claque par défaut de la scène [self.view.layer renderincontext:uigraphicsgetcurrentcontext()]; // 3 Stocker le résultat dans notre objet local _imagefinale = UIGraphicsGetImageFromCurrentImageContext(); // 5 Fermer le contexte de dessin UIGraphicsEndImageContext();

17 // 6 Facultatif - Stocker une copie de la capture d écran dans l album photos UIImageWriteToSavedPhotosAlbum(_imageFinale, nil, nil, nil ); } Testons l application : Passons d un magazine à l autre et appuyons sur les boutons FB + twitter Simulons une utilisation du bouton du ipad ce qui va nous permettre d avoir accès à l album photos :

18 Choisissons l application photos : Succès, nos captures d écrans sont effectivement dans l album photos du ipad!

19 Il ne reste plus qu à poster le résultat sur notre réseau social préféré Poster sur le réseau social «twitter» Il est très facile de poster un commentaire soit sur facebook ou twitter. Ces deux réseaux sont directement intégrés dans le système ios. Pour ce faire il suffit d ajouter le framework à notre projet ainsi que quelques lignes de code. Note: Il est important d inscrire les informations de nos comptes facebook et twitter à même les préférences de ios. Il n est pas possible de fournir ses informations à même notre application. Configuration d un réseau social sous ipad :

20 Ajoutons la librairie social à notre projet : Ajoutons le code suivant au contrôleur de la scène. // Pour avoir accès aux classes des réseaux sociaux // Attention, il faut aussi ajouter le framework 'Social.framework'

21 #import <Social/Social.h> - (IBAction)posterSurTwitter:(id)sender { NSLog(@"posterSurTwitter"); [self sauvegarder]; // Les étapes pour utiliser twitter // 1 - Tester si le service et les informations de connexion sont dispo if ([SLComposeViewController isavailableforservicetype:slservicetypetwitter]) { // 2 - Créer un feuille pour le 'post' SLComposeViewController *tweetsheet = [SLComposeViewController composeviewcontrollerforservicetype:slservicetypetwitter]; } // 3 - Composer le message [tweetsheet setinitialtext:@"tim.magazine - via labo app ios, Production sur support #CSTJ"]; // 4 - Ajouter une image - facultatif [tweetsheet addimage:_imagefinale]; // Notre capture d'écran... // 5 - Ajouter un lien - facultatif // [tweetsheet addurl:[nsurl URLWithString:@" // 6 - Présenter la fenêtre de confirmation à l'utilisateur [self presentviewcontroller: tweetsheet animated: YES completion: nil]; } // if twitter disponible... Testons l application et le bouton twitter :

22 Encore une fois, succès! Il ne reste plus qu à confirmer en personnalisant le texte et en appuyant sur le bouton send. Vérifions notre compte twitter :

23 Résultat final :

24 1.5.2 Poster sur le réseau social facebook La technique est presque qu identique qu avec twitter Voici un extrait du code requis : if([slcomposeviewcontroller isavailableforservicetype:slservicetypefacebook]) { SLComposeViewController *controller = [SLComposeViewController composeviewcontrollerforservicetype:slservicetypefacebook]; [controller setinitialtext:@"le texte à poster "]; // [controller addurl:[nsurl URLWithString:@" // au besoin // [controller addimage: uneimage]; // au besoin [self presentviewcontroller:controller animated:yes completion:nil]; } À faire par l étudiant en laboratoire 1. Programmer l application pour qu il soit possible de poster le résultat d une page magazine vers le réseau facebook. 2. Masquer la palette de boutons avant la capture de l écran et la réafficher après.