Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd Logo
Importer

Bienvenue sur Scribd !

  • 119 vues

    0600 Tutoriel Ionic Framework

    Transféré par

    Eugene Bokea
    Ce document présente le framework Ionic qui permet de créer des applications mobiles hybrides. Il décrit les avantages et inconvénients d'Ionic, les dépendances nécessaires comme AngularJS et Cordova, ainsi que les étapes d'installation, de création de projet et de déploiement sur différentes plateformes.

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd

    0600 Tutoriel Ionic Framework

    Transféré par

    Eugene Bokea
    119 vues6 pages
    Ce document présente le framework Ionic qui permet de créer des applications mobiles hybrides. Il décrit les avantages et inconvénients d'Ionic, les dépendances nécessaires comme AngularJS et Cordova, ainsi que les étapes d'installation, de création de projet et de déploiement sur différentes plateformes.

    Titre original

    0600-tutoriel-ionic-framework

    Copyright

    © © All Rights Reserved

    Formats disponibles

    PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Ce document présente le framework Ionic qui permet de créer des applications mobiles hybrides. Il décrit les avantages et inconvénients d'Ionic, les dépendances nécessaires comme AngularJS et Cordova, ainsi que les étapes d'installation, de création de projet et de déploiement sur différentes plateformes.

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Télécharger au format pdf ou txt
    119 vues6 pages

    0600 Tutoriel Ionic Framework

    Transféré par

    Eugene Bokea
    Ce document présente le framework Ionic qui permet de créer des applications mobiles hybrides. Il décrit les avantages et inconvénients d'Ionic, les dépendances nécessaires comme AngularJS et Cordova, ainsi que les étapes d'installation, de création de projet et de déploiement sur différentes plateformes.

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Télécharger au format pdf ou txt
    Vous êtes sur la page 1sur 6

    INGÉNIEURS EN SCIENCES INFORMATIQUES

    ADAPTATION DES INTERFACES A L’ENVIRONNEMENT

    Tutoriel Ionic
    framework

    Tutoriel et présentation du framework IONIC : technologie permettant la


    réalisation d’applications mobiles hybrides.

    Auteur : Enseignants :

    Salah BENNOUR (SI5-IHM) Anne-Marie DERY

    Christian BREL
    SOMMAIRE
    1 Introduction ................................................................................................................. 3
    1.1 Qu’est‐ce que IONIC framework ? ............................................................................... 3
    1.2 Avantages ........................................................................................................................... 3
    1.3 Inconvénient ..................................................................................................................... 4

    2 Dépendances ................................................................................................................ 4

    3 Installation .................................................................................................................... 5
    3.1 Node JS ................................................................................................................................. 5
    3.2 Apache Cordova ................................................................................................................ 5
    3.3 Ionic ...................................................................................................................................... 5
    3.4 Android SDK ...................................................................................................................... 5
    3.5 Emulateur ........................................................................................................................... 6

    4 Créer un projet ............................................................................................................ 7


    4.1 Blank .................................................................................................................................... 7
    4.2 SideMenu ............................................................................................................................ 7
    4.3 Tabs ...................................................................................................................................... 7

    5 Plateformes et déploiement.................................................................................... 8
    5.1 Android ............................................................................................................................... 8
    5.2 IOS ......................................................................................................................................... 8
    5.3 Web ....................................................................................................................................... 8

    6 Architecture MVC ........................................................................................................ 9


    6.1 Modèle ................................................................................................................................. 9
    6.2 Contrôleur .......................................................................................................................... 9
    6.3 Vue ........................................................................................................................................ 9
    6.4 Routes ................................................................................................................................10

    7 Accès aux fonctionnalités natif ........................................................................... 11


    7.1 ngCordova ........................................................................................................................11
    7.2 Camera et librairies d’images ....................................................................................11
    7.3 Autres plugins .................................................................................................................12

    8 Adapter l’interface aux différents écrans ........................................................ 13


    8.1 Responsive .......................................................................................................................13
    8.2 Media queries..................................................................................................................13
    8.3 Visibilité du menu latéral ...........................................................................................14

    9 Bibliographie ............................................................................................................ 15

    2
    1 Introduction

    1.1 Qu’est‐ce que IONIC framework ?


    Ionic est un framework de développement qui permet de créer des applications
    hybrides en HTML5, CSS, Javascript.

    Il est basé sur des frameworks/technologies qui ont fait leurs preuves telles que
    AngularJS et Apache Cordova.

    Comment Ionic utlise AngularJS et Apache Cordova ?

    Ionic est développé avec AngularJS, il est utilisé pour l’implémentation de la partie
    applicative web (backend). Apache Cordova permet, quant à lui, la construction des
    applications natives. C’est un pont de développement qui permet d’encapsuler du
    code client Web (ici Ionic/AngularJS) dans une application native telle que Android,
    IOS ou encore Windows Phone. Il permet par ailleurs d’avoir certains accès aux
    fonctionnalités natives des appareils tel que la caméra ou l’accéléromètre.

    1.2 Avantages

    Le Ionic Framework dispose de plusieurs avantages :

    - Le cross-plateforme. A partir d’un socle de développement pouvoir déployé


    (en une seule ligne de commande) une application sur plusieurs
    environnements (IOS, Android, Windows Phone). Cela permet de réduire les
    couts et délais de développement pour proposer plusieurs applications
    natives pour les différents systèmes d’exploitation mobile.
    - Il est basé sur Apache Cordova et AngularJS qui disposent d’une grande
    communauté et par conséquence de nombreux plugins de développement.
    - En quelques lignes de commande (trois) il est possible de créer une
    application multiplateforme.
    - Les documentations des technologies AngularJS et Apache Cordova sont
    complètes.
    - Le Framework s’appuie sur AngularJS, gage de stabilité puisque le
    Framework est maintenant largement utilisé et surtout développé par Google.
    - Le déploiement de l’application vers un appareil mobile connecté se fait en
    une ligne de code (agréable pour les tests).
    - La prise en main des technologies est relativement rapide, même pour des
    développeurs ayant peu d’expérience avec les technologies Web.

    3
    1.3 Inconvénient
    L’appréhension de l’architecture MVC (Modèle Vue Controller) proposé par
    AngularJS et qui est la structure de l’application, peut-être un inconvénient pour les
    développeurs peu à l’aise avec celle-ci.

    2 Dépendances
    Comme cité précédemment Ionic intègre des frameworks/technologies. Voici la liste
    des principales :

    Gulp qui est un outil destiné à l’organisation et l’exécution des


    tâches composant un build. Il est utilisé pour l'automatisation
    des compilations.

    Apache Cordova développé par Fondation Apache est utilisé


    pour la construction des applications natives.

    AngularJS, développé par Google, gère la structure de


    l'application.

    Sass qui est langage de génération dynamique de feuilles de


    style est utilisé pour la gestion de thème.

    4
    3 Installation

    3.1 Node JS
    Comme cité précédemment, Ionic s’appui sur la plateforme Node JS. Il est donc
    indispensable de l’installer si vous ne l’avez pas encore.

    Vous trouverez, sur le lien suivant, le site officiel ou vous pouvez installer Node JS :

    https://nodejs.org/en/download/

    Remarque : Sous Windows la commande npm ne fonctionnera pas sans les


    variables d’environnements de système JAVA_HOME, ANDROID_HOME et NPM.

    Sous Unix, les variables d’environnement JAVA_HOME et ANDROID_HOME sont


    nécessaires.

    3.2 Apache Cordova


    Exécuter la suivante commande pour installer Apache Cordova. Si vous l’avez déjà
    passez cette étape :

    $ npm install ‐g cordova

    3.3 Ionic
    Installez maintenant Ionic avec cette ligne de commande :

    $ npm install ‐g ionic

    3.4 Android SDK


    Pour développer une application pour appareils Android il est indispensable de
    disposer des outils Android tel que le SDK Android. Si l’on souhaite cibler
    l’application pour d’autres systèmes d’exploitations, il est là aussi indispensable de
    disposer du SDK de la plateforme visée. Ceux-ci serviront à la compilation et à la
    construction de l’application.

    5
    3.5 Emulateur
    L’utilisation d’un émulateur pour tester l’application lors de la phase de
    développement est une option viable. En effet, utiliser les différents terminaux
    virtuels proposés par un émulateur pour tester, par exemple, son adaptation aux
    différents écrans est recommandé.

    L’émulateur Genymotion est une solution viable (https://www.genymotion.com/).

    Une alternative est de lancer l’application sur un serveur web local (localhost) et
    utiliser les outils de visualisation du navigateur pour simuler un appareil précis.

    Vous aimerez peut-être aussi