<\/p>\n
\u00c9tape\u00a01\u00a0: Id\u00e9ation de l’application<\/h2>\n
Au d\u00e9part, il faut avoir une id\u00e9e. Mais une bonne id\u00e9e… Il y a beaucoup d\u2019applications sur les \u00ab App Store \u00bb de ce monde et faire une application qui existe d\u00e9j\u00e0 est presque toujours inutile. Pour notre projet, chez Analystik, nous avons discut\u00e9 et choisi une application permettant de comparer les frais li\u00e9s \u00e0 la possession d\u2019une voiture \u00e0 essence versus ceux li\u00e9s \u00e0 une voiture \u00e9lectrique.<\/p>\n
Nous avions besoin d\u2019un serveur qui accepte des appels Rest, d\u2019une une base de donn\u00e9es, pour choisir les marques d\u2019automobiles. L\u2019application est vraiment simple et le serveur aussi, l\u2019objectif \u00e9tant plus de prouver notre savoir-faire en Intelligence d\u2019Affaires derri\u00e8re l\u2019application.Cependant, si vous vous cr\u00e9ez un serveur ou si vous vous connectez \u00e0 un autre serveur. Apple met l\u2019accent sur la s\u00e9curit\u00e9. Dans iOS10, il faut faire des changements dans le fichier \u00ab\u00a0info.plist\u00a0\u00bb pour acc\u00e9der \u00e0 un serveur HTTP.<\/p>\n
\u00c9tape\u00a02\u00a0: Faire un prototype (GUI)<\/h2>\n
Avant m\u00eame de commencer d\u00e9signer l\u2019application avec un outil de \u00ab\u00a0mockups\u00a0\u00bb, il est int\u00e9ressant de faire quelques maquettes \u00e0 la main tr\u00e8s rapidement pour tester la logique de notre d\u00e9roulement de l\u2019application. On peut d\u00e9j\u00e0 commencer \u00e0 mettre un style, un look et \u00e9laborer le story-board \u00e0 partir de notre id\u00e9e. Ces sketchs doivent \u00eatre rapides entre 30 secondes et 2 minutes. Lorsque l\u2019on est satisfait, on passe \u00e0 l\u2019ordinateur.<\/p>\n
\u00c9tape\u00a03\u00a0: Cr\u00e9er l\u2019interface<\/h2>\n
Une fois les requis d\u00e9finis et le design conceptuel termin\u00e9, c\u2019est le temps de cr\u00e9er l\u2019interface. Personnellement, j\u2019utilise Sketch3<\/a>, mais vous pouvez aussi utiliser Adobe XD<\/a>, mais je vous d\u00e9conseille Photoshop ou Illustrator, car ce sera plus long d\u2019exporter les images.<\/p>\n Dans les applications iOS, on mentionne des images 1x, 2x ou 3x. Depuis l\u2019iPhone 4, la qualit\u00e9 des \u00e9crans s\u2019est am\u00e9lior\u00e9e. Pour ne pas avoir des images floues, il faut avoir des images haute-r\u00e9solution. Les \u00ab x \u00bb sont utilis\u00e9s pour classifier les images. 1 x \u00e9gale une r\u00e9solution de 72 dpi, 2x 144 dpi et 3x 326 dpi. Vous n\u2019avez pas \u00e0 retenir les dpi mais que la r\u00e9solution 2x sera 2 fois plus grande que 1x et que 3x sera 3 fois plus grande. D\u2019o\u00f9 l\u2019avantage d\u2019utiliser des images vectorielles.<\/p>\n Sketch \u00e0 l\u2019avantage de poss\u00e9der des \u00ab plug-ins \u00bb tel que \u00ab constraint<\/a> \u00bb; pour cr\u00e9er rapidement d\u2019autres versions de notre design. \u00ab Aeiconizer<\/a> \u00bb pour copier et faire les diff\u00e9rentes dimensions pour les ic\u00f4nes. Il est aussi possible d\u2019exporter les images vectorielles en 1x, 2x et 3x de fa\u00e7on native dans le logiciel.<\/p>\n Je commence par l\u2019ic\u00f4ne. J\u2019ins\u00e8re un \u00ab\u00a0artboard\u00a0\u00bb de 1024px par\u00a01024px et je dessine l\u2019ic\u00f4ne, en vectorielle (recommand\u00e9), \u00e0 l\u2019int\u00e9rieur. Par la suite, je roule \u00ab\u00a0Aeiconizer\u00a0\u00bb et il me g\u00e9n\u00e8re toutes les tailles pour les ic\u00f4nes\u00a01x, 2x, 3x pour iPhone\u00a04, 5, 6, iPad, iTunes, etc.<\/p>\n Xcode fonctionne avec un story-board (ou plusieurs) pour le d\u00e9roulement de votre application. Comme la n\u00f4tre se devait d\u2019\u00eatre simple et rapide, nous avons seulement fait une grandeur, mais habituellement il faut faire toutes les grandeurs que l\u2019on veut supporter, et aussi le \u00ab\u00a0splashscreen\u00a0\u00bb. N\u2019oubliez pas aussi qu\u2019il doit fonctionner dans le format paysage.<\/p>\n Habituellement, le iPhone SE serait le plus petit format.<\/p>\n Tout d\u2019abord, je cr\u00e9e un nouveau document avec le gabarit \u00ab\u00a0iOS UI design\u00a0\u00bb (File new from template -> iOs ui design). Il y a \u00e9norm\u00e9ment de symboles d\u2019inclus et on peut d\u00e9j\u00e0 les apercevoir dans l\u2019\u00e9cran.<\/p>\n J\u2019ins\u00e8re un \u00ab\u00a0artboard\u00a0\u00bb de la taille d\u2019un t\u00e9l\u00e9phone avec le menu de droite et je fais nos diff\u00e9rents designs.<\/p>\n On peut ins\u00e9rer des symboles qui sont des \u00e9l\u00e9ments par d\u00e9faut dans Xcode, donc pas besoin de les exporter. Notez bien que les marges par d\u00e9faut sont de 20px dans Xcode. Vous pouvez cependant d\u00e9cider de les ignorer.<\/p>\n Une fois que mon design est cr\u00e9\u00e9, j\u2019exporte les images de fa\u00e7on individuelle (oublier les fonts et les symboles) en 1x, 2x et 3x. Je clique sur \u00ab\u00a0make exportable\u00a0\u00bb et sur le \u00ab\u00a0+\u00a0\u00bb pour ajouter des tailles.\u00a0Le format\u00a0PNG fera l\u2019affaire, mais assurez-vous que le layer que vous exportez (ou groupe de layers)\u00a0poss\u00e8de(nt) un nom facilement identifiable par la suite.<\/p>\n Si vous voulez en apprendre plus sur Sketch, et tout ses fonctions regarder LevelUpTuts<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"Les x<\/h3>\n
Ic\u00f4ne de l’application<\/h3>\n
![\"Choisir](\"http:\/\/www.analystik.ca\/blogue\/wp-content\/uploads\/2016\/06\/mac-icon.png\"){kind=icon}
<\/a><\/p>\n![\"une](\"http:\/\/www.analystik.ca\/blogue\/wp-content\/uploads\/2016\/06\/icon-series-300x181.png\"){kind=icon}
Il suffit de s\u00e9lectionner toutes les ic\u00f4nes, de cliquer sur \u00ab\u00a0make exportable\u00a0\u00bb dans le coin inf\u00e9rieur droit et de tous les exporter en 1 x.<\/p>\n![\"make](\"http:\/\/www.analystik.ca\/blogue\/wp-content\/uploads\/2016\/06\/make-exportable.png\")
Puisqu\u2019il y a les diff\u00e9rentes tailles\u00a02x et 3x de cr\u00e9\u00e9es, il est inutile de g\u00e9n\u00e9rer d\u2019autre version que le 1x. Tout est d\u00e9j\u00e0 l\u00e0!<\/p>\n![\"exportation](\"http:\/\/www.analystik.ca\/blogue\/wp-content\/uploads\/2016\/06\/export1x.png\")
<\/a>\nLe story-board<\/h3>\n
![\"s\u00e9rie](\"http:\/\/www.analystik.ca\/blogue\/wp-content\/uploads\/2016\/06\/series-se-300x123.png\")
<\/a>\n![\"cr\u00e9er](\"http:\/\/www.analystik.ca\/blogue\/wp-content\/uploads\/2016\/06\/iostemplate-300x124.png\")
<\/a>\n![\"iOS](\"http:\/\/www.analystik.ca\/blogue\/wp-content\/uploads\/2016\/06\/ui-design-sketch-300x212.png\")
<\/a>\n![\"iPhone6](\"http:\/\/www.analystik.ca\/blogue\/wp-content\/uploads\/2016\/06\/iphone6blank.png\")
<\/a>\n![\"s\u00e9lection](\"http:\/\/www.analystik.ca\/blogue\/wp-content\/uploads\/2016\/06\/symbol-select-295x300.png\")
<\/a>\n![\"exportation](\"http:\/\/www.analystik.ca\/blogue\/wp-content\/uploads\/2016\/06\/export-setting.png\")
<\/a>\n