{"id":10689,"date":"2016-04-23T19:13:41","date_gmt":"2016-04-23T17:13:41","guid":{"rendered":"http:\/\/flaven.fr\/?p=10689"},"modified":"2016-04-27T11:57:34","modified_gmt":"2016-04-27T09:57:34","slug":"ionicframework-angular-cordova-decouvrir-ionicframework-pour-creer-une-application-ios","status":"publish","type":"post","link":"https:\/\/flaven.fr\/2016\/04\/ionicframework-angular-cordova-decouvrir-ionicframework-pour-creer-une-application-ios\/","title":{"rendered":"Ionicframework, Angular, Cordova – D\u00e9couvrir ionicframework pour cr\u00e9er une application iOS"},"content":{"rendered":"

Si vous cr\u00e9ez des applications mobiles sous Android, iOS, Windows, vous avez n\u00e9cessairement d\u00fb entendre parler du projet Cordova connu aussi sous le nom de PhoneGap. L’objectif affich\u00e9 de ionicframework est de r\u00e9sorber en un framework la difficult\u00e9 \u00e0 developer pour chaque plate-forme sp\u00e9cifique. En un mot, adopter c’est d\u00e9j\u00e0 s’imposer !
\nVoil\u00e0 donc ce que propose ni plus ni moins Ionicframework \u00e0 l’aide d’Angular et de Cordova adresser grosso modo toutes les plates-formes et donc tous les usages pour cr\u00e9er des applications dans les meilleures conditions possibles de d\u00e9veloppement. Ce ph\u00e9nom\u00e8ne est \u00e0 suivre comme en son temps on devait suivre pour PHP l’\u00e9mergence des frameworks. Voil\u00e0 pour le contexte.<\/p>\n

Plus concr\u00e8tement, au regard de l’h\u00e9t\u00e9rog\u00e9n\u00e9it\u00e9 des environnement mobiles, c’est le r\u00eave du “product owner”, “scrum master” et de l’\u00e9quipe d\u00e9veloppement que de g\u00e9rer un m\u00eame “socle” de code pour adresser toutes les environnements donc toutes les audiences et les usages.<\/p>\n

Pour m\u00e9moire, un petit article de ce blog sur PhoneGap, HTML5, JavaScript, jQuery Mobile \u2013 Introduction au framework PhoneGap<\/a><\/p>\n

La magie Ionic<\/h4>\n

Avant de plonger dans le concret, histoire de savoir qui fait quoi et de comprendre le plus simplement possible le fonctionnement technique.<\/p>\n

    \n<\/ol>\n
  1. Ionicframework: P\u00e9tri au HTML et \u00e0 la CSS. C’est qui s’affiche sur les \u00e9crans de l’ app. Un conseil, laisser Ionic choisir lui m\u00eame la version d’Angular.<\/li>\n
  2. Angular : Toute l’intelligence de l’app est en Javascript et con\u00e7u \u00e0 l’aide d’angular.<\/li>\n
  3. Cordova : C’est la couche syst\u00e8me qui assure la liaison avec les syst\u00e8mes natifs (iOS, Android, Windows)<\/li>\n

    Le b\u00e9n\u00e9fice attendu en terme de d\u00e9veloppement et donc en terme financier. C’est un bon d\u00e9veloppeur qui connait la javascript ou \u00e9ventuellement un des environnements natifs peut se d\u00e9brouiller pour adresser les 3 environnements du march\u00e9 sur la m\u00eame technologie. Ce qui peut faire un gain substantiel de temps et d’argent en terme de d\u00e9veloppement et de satisfaction client.<\/p>\n

    La toute premi\u00e8re chose \u00e0 faire est d’installer node.js si ce n’est d\u00e9j\u00e0 fait sans oublier de mettre \u00e0 jour le runtime de Node.<\/p>\n

    Ensuite vous pouvez installer ionic et gulp comme ce qui indiqu\u00e9 sur la page d’installation de ionicframework.com<\/a><\/p>\n

    npm install -g cordova ionic gulp<\/pre>\n
    Pour information, Gulp est un \u00e9quivalent de Grunt. C’est un compiler utilis\u00e9 par Ionic pour faire du sass.<\/p>\n
    Vous lancez ensuite la cr\u00e9ation de votre application.La notre se nomme myAppMadeWithIonic<\/b><\/p>\n
    ionic start myAppMadeWithIonic tabs<\/pre>\n
    Vous vous rendez dans le r\u00e9pertoire de votre application myAppMadeWithIonic<\/b><\/p>\n
    cd myAppMadeWithIonic\/<\/pre>\n
    Pour \u00e9viter des probl\u00e8mes de droit, vous aurez sans doute \u00e0 passer les commandes suivantes au besoin :<\/p>\n
    sudo chown yourusername \/Users\/yourusername\/.config\/configstore\/update-notifier-cordova.json<\/pre>\n
    sudo chown yourusername \/Users\/yourusername\/.config\/configstore\/bower-github.json<\/pre>\n
    sudo chown yourusername \/Users\/yourusername\/path\/myAppMadeWithIonic\/www\/css\/ionic.app.min.css<\/pre>\n
    Pour \u00e9viter l’absence ou l’obsolescence, vous aurez sans doute \u00e0 passer les commandes suivantes au besoin :<\/p>\n
    sudo npm update<\/pre>\n
    sudo npm install<\/pre>\n
    sudo ionic setup sass<\/pre>\n
    Voil\u00e0 la s\u00e9quence de commandes pour cr\u00e9er votre application une fois dans le bon r\u00e9pertoire<\/b><\/p>\n
    ionic platform add ios<\/pre>\n
    ionic build ios<\/pre>\n
    ionic emulate ios<\/pre>\n
    Voil\u00e0 la s\u00e9quence de commandes pour modifier la css de votre application, toujours dans le bon r\u00e9pertoire<\/b><\/p>\n
    gulp sass<\/pre>\n
    ionic build ios<\/pre>\n
    ionic emulate ios<\/pre>\n
    On va mettre en rouge, l’element de css nomm\u00e9
    \nbar-stable<\/code> dans le fichier tabs.html<\/p>\n
    On ajoute cette ligne dans ionic.app.scss et on “rebuild”, en gros on refait pour chaque modification CSS, on refait la compilation. <\/p>\n
    $stable:#ff0000;<\/pre>\n
    Puis on relance la compilation avec la transformation en sass avec l’aide de gulp. <\/p>\n
    gulp sass<\/pre>\n
    ionic build ios<\/pre>\n
    ionic emulate ios<\/pre>\n
    \r\n\t    <!-- <link href=\"lib\/ionic\/css\/ionic.css\" rel=\"stylesheet\">\r\n\t    <link href=\"css\/style.css\" rel=\"stylesheet\"> -->\r\n\t\t<link href=\"css\/ionic.app.css\" rel=\"stylesheet\">\r\n\t    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above -->\r\n<\/pre>\n
    La commande pour cr\u00e9er l’application<\/b>
    \n\"Ionicframework,<\/p>\n
    Le premier \u00e9cran de notre application dans l’\u00e9mulateur \u00e0 savoir le fichier index.html<\/b>
    \n\"Ionicframework,<\/p>\n
    La commande gulp sass<\/code> pour d\u00e9foncer la feuille de style<\/b>
    \n\"Ionicframework,<\/p>\n
    Notre \u00e9l\u00e9ment en rouge $stable:#ff0000;<\/code><\/b>
    \n\"Ionicframework,<\/p>\n
    Un slide s\u00e9rieux sur l’architecture de Ionic<\/b>
    \n\"Ionicframework,<\/p>\n
    Source : Case study: integrating azure with google app engine avec le slide 11 qui explique la fonctionnement Ionic\/Cordova. http:\/\/fr.slideshare.net\/MiguelScotter\/case-study-integrating-azure-with-google-app-engine<\/a><\/i><\/p>\n
    Des commandes qui vous seront sans doute utiles.<\/p>\n
    brew update<\/pre>\n
    brew upgrade node<\/pre>\n
    npm install -g npm<\/pre>\n
    npm install -g ios-sim<\/pre>\n
    npm install -g ios-deploy<\/pre>\n
    En savoir plus<\/h2>\n