Développer une application IOS simple avec Xcode

Pour ce tutoriel, je vais partir du principe que vous avez sous la main une application web utilisant un thème responsive. Ce n’est bien sur pas une obligation mais il est très fortement conseillé pour le confort des utilisateurs de votre future application.

Ce tutoriel va vous apprendre à créer l’application d’un site web très rapidement, afin de pousser votre apprentissage, nous vous conseillons d’acheter le cours suivant : Créez des applications pour Iphone, Ipad et Ipod touch. La seule condition requise pour ce tutoriel est bien entendu Xcode.

1 – Création du projet

Pour commencer ouvrez Xcode et cliquez sur « Create a new Xcode project » comme le montre la figure suivante.

Capture-d’écran-2012-11-12-à-14.26.01 - copie

Choisissez ensuite « Single View Application ».

Capture-d’écran-2012-11-12-à-14.26.49 - copie

Vous devriez ensuite arriver sur la page suivante sur laquelle vous devez indiquer les informations relatives à votre application en prenant le soin de choisir « Iphone » dans la liste déroulante et de garder coché les checkbox.

Capture-d’écran-2012-11-12-à-14.28.29 - copie

Choisissez ensuite le répertoire dans lequel vous souhaitez enregistrer votre projet, et le tour est joué.

2 – Un peu de code maintenant !

Vous avez maintenant dans la partie gauche de votre Xcode, tout le contenu de votre projet. Ouvrez le fichier « ViewController.h » et complétez-le de façon à ce qu’il ressemble à la figure suivante.

Capture-d’écran-2012-11-12-à-15.11.44 - copie

Ouvrez ensuite le fichier « ViewController.m » et complétez le comme ceci en remplaçant l’URL par celle de votre site web.

Capture-d’écran-2012-11-12-à-15.19.37 - copie

Et voilà c’est aussi simple que ça !

3 – Glisser, déposer

Il est maintenant temps de voir à quoi va ressembler l’application. Ouvrez le fichier « MainStoryboard.storyboard ».

Vous voilà maintenant face à une interface qui ressemble à celle d’un Iphone. Tout en bas à droite, cliquez sur l’icône en forme de cube afin de faire apparaitre les objets que notre application va utiliser.

Capture-d’écran-2012-11-12-à-15.31.20 - copie

Il ne vous reste plus qu’à déposer l’objet « Web View » sur l’Iphone ainsi que « Navigation Bar » et d’y ajouter des boutons avec l’objet « Bar Button Item ». Placez en quatre et double-cliquez sur les deux boutons de gauche, afin de modifier leur nom et nommer les « Back » et « Next ».

Maintenant modifiez l’apparence des deux autres boutons en cliquant dessus, puis sur l’icône « Show the Attributes inspector ». Choisissez « refresh » pour le premier et « stop » pour le second dans la liste déroulante « indentifier ».

Capture-d’écran-2012-11-12-à-15.47.05 - copie

Vous pouvez aussi placer l’objet « Flexible Space Bar Buton Item » pour séparer les boutons, afin d’améliorer le confort dans la barre de navigation. Voilà ce que vous obtenez :

Capture-d’écran-2012-11-12-à-15.50.45 - copie

La vue et l’interface ont été créées, il ne vous reste plus qu’à lier tout cela en cliquant sur votre « UIWebView » et d’aller sur la petite icône représentant une flèche en haut à droite.

Joignez votre vue (grumpyerBlogWebView dans mon exemple) à « UIWebView » sur l’iphone et faites de même avec « goBack », « goForward », « reload », et « stopLoading » vers les boutons concernés.

Si vous avez suivi chacune des étapes précédentes vous devriez avoir ça :
Capture-d’écran-2012-11-12-à-16.00.14 - copie

Et voilà votre application est prête à être utilisée ! Pour vous en assurer, vous devez cliquer sur le bouton « Run » en haut à Gauche de votre Xcode afin de tester l’application.

Capture-d’écran-2012-11-12-à-16.06.55 - copie

Tout devrait normalement fonctionner, il ne vous reste plus qu’a proposer votre application sur l’app store en suivant le tutoriel de Michel Martin ici, mais je penses qu’avec une application aussi simpliste Apple ne vous la valide pas car trop proche de l’expérience apportée par le navigateur de l’Iphone !

J’espère que ce tutoriel vous a plu et qu’il a été compris par tous. Pour toutes questions n’hésitez pas à nous en faire part via notre petit formulaire de contact dans le footer.