Notice: Undefined offset: 1 in H:\root\home\emalayamm-001\www\analystik\blogue\wp-content\plugins\wp-links\wp-links.php on line 175

Notice: Undefined offset: 1 in H:\root\home\emalayamm-001\www\analystik\blogue\wp-content\plugins\wp-links\wp-links.php on line 175

Notice: Undefined variable: style in H:\root\home\emalayamm-001\www\analystik\blogue\wp-content\plugins\wp-links\wp-links.php on line 149

Notice: Undefined variable: wplinks_image in H:\root\home\emalayamm-001\www\analystik\blogue\wp-content\plugins\wp-links\wp-links.php on line 149

Notice: Undefined offset: 1 in H:\root\home\emalayamm-001\www\analystik\blogue\wp-content\plugins\wp-links\wp-links.php on line 175

Notice: Undefined offset: 1 in H:\root\home\emalayamm-001\www\analystik\blogue\wp-content\plugins\wp-links\wp-links.php on line 175

Notice: Undefined variable: style in H:\root\home\emalayamm-001\www\analystik\blogue\wp-content\plugins\wp-links\wp-links.php on line 149

Notice: Undefined variable: wplinks_image in H:\root\home\emalayamm-001\www\analystik\blogue\wp-content\plugins\wp-links\wp-links.php on line 149

Notice: Undefined offset: 1 in H:\root\home\emalayamm-001\www\analystik\blogue\wp-content\plugins\wp-links\wp-links.php on line 175

Notice: Undefined offset: 1 in H:\root\home\emalayamm-001\www\analystik\blogue\wp-content\plugins\wp-links\wp-links.php on line 175

Notice: Undefined variable: style in H:\root\home\emalayamm-001\www\analystik\blogue\wp-content\plugins\wp-links\wp-links.php on line 149

Notice: Undefined variable: wplinks_image in H:\root\home\emalayamm-001\www\analystik\blogue\wp-content\plugins\wp-links\wp-links.php on line 149

Notice: Undefined offset: 1 in H:\root\home\emalayamm-001\www\analystik\blogue\wp-content\plugins\wp-links\wp-links.php on line 175

Notice: Undefined offset: 1 in H:\root\home\emalayamm-001\www\analystik\blogue\wp-content\plugins\wp-links\wp-links.php on line 175

Notice: Undefined variable: style in H:\root\home\emalayamm-001\www\analystik\blogue\wp-content\plugins\wp-links\wp-links.php on line 149

Notice: Undefined variable: wplinks_image in H:\root\home\emalayamm-001\www\analystik\blogue\wp-content\plugins\wp-links\wp-links.php on line 149

Notice: Undefined offset: 1 in H:\root\home\emalayamm-001\www\analystik\blogue\wp-content\plugins\wp-links\wp-links.php on line 175

Notice: Undefined offset: 1 in H:\root\home\emalayamm-001\www\analystik\blogue\wp-content\plugins\wp-links\wp-links.php on line 175

Notice: Undefined variable: style in H:\root\home\emalayamm-001\www\analystik\blogue\wp-content\plugins\wp-links\wp-links.php on line 149

Notice: Undefined variable: wplinks_image in H:\root\home\emalayamm-001\www\analystik\blogue\wp-content\plugins\wp-links\wp-links.php on line 149

Notice: Undefined offset: 1 in H:\root\home\emalayamm-001\www\analystik\blogue\wp-content\plugins\wp-links\wp-links.php on line 175

Notice: Undefined offset: 1 in H:\root\home\emalayamm-001\www\analystik\blogue\wp-content\plugins\wp-links\wp-links.php on line 175

Notice: Undefined variable: style in H:\root\home\emalayamm-001\www\analystik\blogue\wp-content\plugins\wp-links\wp-links.php on line 149

Notice: Undefined variable: wplinks_image in H:\root\home\emalayamm-001\www\analystik\blogue\wp-content\plugins\wp-links\wp-links.php on line 149

Notice: Undefined offset: 1 in H:\root\home\emalayamm-001\www\analystik\blogue\wp-content\plugins\wp-links\wp-links.php on line 175

Notice: Undefined offset: 1 in H:\root\home\emalayamm-001\www\analystik\blogue\wp-content\plugins\wp-links\wp-links.php on line 175

Notice: Undefined variable: style in H:\root\home\emalayamm-001\www\analystik\blogue\wp-content\plugins\wp-links\wp-links.php on line 149

Notice: Undefined variable: wplinks_image in H:\root\home\emalayamm-001\www\analystik\blogue\wp-content\plugins\wp-links\wp-links.php on line 149
Comment bâtir une application iOS 10 pour iPhone | DÉVELOPPEMENT LOGICIEL… À VOTRE MESURE MOBILE - WEB - WINDOWS
X

Comment bâtir une application iOS 10 pour iPhone

Partie 1 – Le design avant Xcode

Chez Analystik, nous avons fait une étude de cas pour créer une application iPhone avec l’environnement de développement Xcode. En cherchant sur le Web, nous avons été incapables de trouver un bon tutoriel expliquant le processus étape par étape. Nous avons donc, décider de le créer pour vous; le voici! Cette première partie se concentre sur les premières étapes qui ne sont pas encore dans Xcode, ce sont donc les mêmes étapes, que ce soit pour iPhone, Android ou même Windows à quelques différences près au niveau de l’exportation des fichiers.

Étape 1 : Idéation de l’application

Au départ, il faut avoir une idée. Mais une bonne idée… Il y a beaucoup d’applications sur les « App Store » de ce monde et faire une application qui existe déjà est presque toujours inutile. Pour notre projet, chez Analystik, nous avons discuté et choisi une application permettant de comparer les frais liés à la possession d’une voiture à essence versus ceux liés à une voiture électrique.

Nous avions besoin d’un serveur qui accepte des appels Rest, d’une une base de données, pour choisir les marques d’automobiles. L’application est vraiment simple et le serveur aussi, l’objectif étant plus de prouver notre savoir-faire en Intelligence d’Affaires derrière l’application.Cependant, si vous vous créez un serveur ou si vous vous connectez à un autre serveur. Apple met l’accent sur la sécurité. Dans iOS10, il faut faire des changements dans le fichier « info.plist » pour accéder à un serveur HTTP.

Étape 2 : Faire un prototype (GUI)

Avant même de commencer désigner l’application avec un outil de « mockups », il est intéressant de faire quelques maquettes à la main très rapidement pour tester la logique de notre déroulement de l’application. On peut déjà commencer à mettre un style, un look et élaborer le story-board à partir de notre idée. Ces sketchs doivent être rapides entre 30 secondes et 2 minutes. Lorsque l’on est satisfait, on passe à l’ordinateur.

Étape 3 : Créer l’interface

Une fois les requis définis et le design conceptuel terminé, c’est le temps de créer l’interface. Personnellement, j’utilise Sketch3, mais vous pouvez aussi utiliser Adobe XD, mais je vous déconseille Photoshop ou Illustrator, car ce sera plus long d’exporter les images.

Les x

Dans les applications iOS, on mentionne des images 1x, 2x ou 3x. Depuis l’iPhone 4, la qualité des écrans s’est améliorée. Pour ne pas avoir des images floues, il faut avoir des images haute-résolution. Les « x » sont utilisés pour classifier les images. 1 x égale une résolution de 72 dpi, 2x 144 dpi et 3x 326 dpi. Vous n’avez pas à retenir les dpi mais que la résolution 2x sera 2 fois plus grande que 1x et que 3x sera 3 fois plus grande. D’où l’avantage d’utiliser des images vectorielles.

Sketch à l’avantage de posséder des « plug-ins » tel que « constraint »; pour créer rapidement d’autres versions de notre design. « Aeiconizer » pour copier et faire les différentes dimensions pour les icônes. Il est aussi possible d’exporter les images vectorielles en 1x, 2x et 3x de façon native dans le logiciel.

Icône de l’application

Je commence par l’icône. J’insère un « artboard » de 1024px par 1024px et je dessine l’icône, en vectorielle (recommandé), à l’intérieur.

Par la suite, je roule « Aeiconizer » et il me génère toutes les tailles pour les icônes 1x, 2x, 3x pour iPhone 4, 5, 6, iPad, iTunes, etc.

Il suffit de sélectionner toutes les icônes, de cliquer sur « make exportable » dans le coin inférieur droit et de tous les exporter en 1 x.

Puisqu’il y a les différentes tailles 2x et 3x de créées, il est inutile de générer d’autre version que le 1x. Tout est déjà là!

Le story-board

Xcode fonctionne avec un story-board (ou plusieurs) pour le déroulement de votre application. Comme la nôtre se devait d’être simple et rapide, nous avons seulement fait une grandeur, mais habituellement il faut faire toutes les grandeurs que l’on veut supporter, et aussi le « splashscreen ». N’oubliez pas aussi qu’il doit fonctionner dans le format paysage.

Habituellement, le iPhone SE serait le plus petit format.

Tout d’abord, je crée un nouveau document avec le gabarit « iOS UI design » (File new from template -> iOs ui design). Il y a énormément de symboles d’inclus et on peut déjà les apercevoir dans l’écran.

J’insère un « artboard » de la taille d’un téléphone avec le menu de droite et je fais nos différents designs.

On peut insérer des symboles qui sont des éléments par défaut dans Xcode, donc pas besoin de les exporter. Notez bien que les marges par défaut sont de 20px dans Xcode. Vous pouvez cependant décider de les ignorer.

Une fois que mon design est créé, j’exporte les images de façon individuelle (oublier les fonts et les symboles) en 1x, 2x et 3x. Je clique sur « make exportable » et sur le « + » pour ajouter des tailles. Le format PNG fera l’affaire, mais assurez-vous que le layer que vous exportez (ou groupe de layers) possède(nt) un nom facilement identifiable par la suite.

Si vous voulez en apprendre plus sur Sketch, et tout ses fonctions regarder LevelUpTuts.

Articles connexes