Scribd Logo
Importer

Bienvenue sur Scribd !

  • 183 vues

    Génération Mobile App IONIC

    Transféré par

    Mouhamadou Ndiaye
    Le document décrit le processus de génération d'applications mobiles avec Ionic et les frameworks Apache Cordova et Capacitor. Il explique les étapes d'initialisation d'un projet avec Capacitor ainsi que la génération de code natif pour Android et iOS.

    Droits d'auteur :

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

    Génération Mobile App IONIC

    Transféré par

    Mouhamadou Ndiaye
    183 vues4 pages
    Le document décrit le processus de génération d'applications mobiles avec Ionic et les frameworks Apache Cordova et Capacitor. Il explique les étapes d'initialisation d'un projet avec Capacitor ainsi que la génération de code natif pour Android et iOS.

    Titre original

    Génération mobile app IONIC

    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é ?

    Le document décrit le processus de génération d'applications mobiles avec Ionic et les frameworks Apache Cordova et Capacitor. Il explique les étapes d'initialisation d'un projet avec Capacitor ainsi que la génération de code natif pour Android et iOS.

    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
    183 vues4 pages

    Génération Mobile App IONIC

    Transféré par

    Mouhamadou Ndiaye
    Le document décrit le processus de génération d'applications mobiles avec Ionic et les frameworks Apache Cordova et Capacitor. Il explique les étapes d'initialisation d'un projet avec Capacitor ainsi que la génération de code natif pour Android et iOS.

    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 4

    Génération des applications mobiles

    Les applications développées avec Ionic peuvent être déployées sur trois plateformes
    différentes : plateforme web, plateforme mobile et desktop.

    Initialement quand nous développons avec Ionic, nous réalisons une application web.
    Une application web, exécutée sur un device mobile a besoin d’accéder aux
    fonctionnalités natives, de même que de passer à la dernière étape de développement,
    la génération du code natif pour les mobiles. Pour cela, Ionic utilise principalement
    deux Framework : Apache Cordova ou Capacitor.

    Apache Cordova
    Jusqu’à la version 3 d’Ionic, c’était Apache Cordova qui était utilisé. Le fonctionnement
    d’Apache Cordova est très simple et se fait via l’utilisation de web view qui sont des
    conteneurs. Pour chaque plateforme (IOS, Android, Windows PHONE), Cordova
    dispose d’un web view spécifique (Android web view, UIWebView) qui va contenir le
    code HTML/CSS et JavaScript compilé par Cordova. L’accès aux fonctionnalités
    natives se fait à l’aide de plugin JavaScript

    Critiqué au début pour ses problèmes de performances et de bugs constatés dans


    certaines API, Apache Cordova à travers ses versions récentes a pu se parfaire et
    permettre aux développeurs de se doter d’un vrai cadre de travail pour rapprocher les
    applications hybrides de celles natives.

    Capacitor
    Parallèlement à Cordova, les développeurs ont eu un alternatif, Capacitor, à partir de
    la version 4 d’Ionic. Réalisé par l’équipe de développement d’IONIC, Capacitor, permet
    en plus de la génération d’application mobile, de proposer une version PWA
    (Progressive Web App).

    Au lieu de masquer l’environnement natif via un CLI comme peut le faire Cordova,
    Capacitor assume en quelque sorte et se repose sur les environnements natifs.

    Capacitor ne prend en charge que certaines versions des plateformes cibles. Pour IOS,
    il prend en charge les dernières versions d’IOS à partir d’IOS 10. Pour Android à partir
    2

    de l’API 21 c’est-à-dire Android 5.0 (Lollipop). Du coté des navigateurs, tous les
    navigateurs modernes pourront afficher les applications avec Capacitor.

    Tout comme avec Cordova, avec Capacitor, l’application est enveloppée dans un
    conteneur, WebView servant à afficher l’application. Un connecteur est défini dans
    l’application faisant le lien avec le code natif. De cette façon, les fonctionnalités
    disponibles nativement pourront être utilisées dans l’application web exécutée dans le
    web view

    Si aujourd’hui, Ionic est cité parmi les Framework de développement mobile c’est
    grâce en partie à Cordova et Capacitor.

    Prérequis
    Pour utiliser capacitor, nous avons besoin d’une version de Node JS supérieure à 8.6.0
    et de NPM supérieure à 5.6.0 installée.

    Pour la génération sur les différentes plateformes :

    IOS
    Pour la génération des applications IOS avec Capacitor, on aura besoin d’un ordinateur
    Mac avec Xcode 10 ou plus installé. Xcode 10 ne peut être installé que sur une version
    de Mac OS 10.13.4 ou plus.

    Android
    Pour l’exécution sur Android, il nous faudra :

     Installer le JDK8 de Java


     Installer Android SDK avec Android studio. Android studio n’est pas obligatoire
    car l’application pourra être compilé et exécuté avec le Android Cli

    Initialisation de capacitor
    L’installation de capacitor peut se faire de deux manières :

     Installer dans un projet Ionic existant


     Créer un nouveau projet avec capacitor

    INITIATION A IONIC | ESP-DIC3-I.MBENGUE


    3

    Installation capacitor
    Dans le cadre de notre TP, nous allons choisir la première méthode et installer
    Capacitor dans notre projet. Pour ce faire, nous utiliserons la commande suivante :

    npm install --save @capacitor/core @capacitor/cli

    Initialisation
    Pour initialiser capacitor avec les informations du projet avec la commande : npx cap
    init

    Cette commande nous demandera de renseigner le nom du projet ainsi que identifiant
    pour le package dans lequel le code natif sera encapsulé.

    Une fois l’initialisation de capacitor effectué, on pourra générer l’application dans la


    plateforme de notre souhait.

    Exécution sur Android


    Avant de générer l’application Android, il nous faudra compiler au moins une fois le
    projet.

    ionic build

    Ceci va créer un dossier www qui va contenir le code compilé de l’application. C’est ce
    dossier qui sera utilisé à chaque fois qu’il s’agira de faire un déploiement.

    Pour générer la version Android de l’application, on utilise la commande :

    npx cap add android

    INITIATION A IONIC | ESP-DIC3-I.MBENGUE


    4

    Ceci va créer un dossier Android à la racine de notre projet qui pourra être ouvert avec
    Android studio pour la génération et la signature d’APK grâce à la commande

    npx cap open android

    Génération IOS
    Les mêmes opérations devront être faites pour la génération de l’application IOS.

    Synchronisation du code source


    A chaque fois qu’une modification est faite dans l’application (dossier src), cette
    dernière devra être compilée (avec ionic build) et les changements du dossier www
    devront être répercutés dans les codes natifs des différentes plateformes générées par
    Capacitor.

    La commande npx cap copy permet de faire la synchronisation ou mise des


    applications natives.

    DOCUMENTATION
    https://www.joshmorony.com/adding-icons-splash-screens-launch-images-to-
    capacitor-projects/

    https://capacitor.ionicframework.com/docs/getting-started/with-ionic

    INITIATION A IONIC | ESP-DIC3-I.MBENGUE

    Vous aimerez peut-être aussi