1. Apache Cordova
Apache Cordova (ou plus anciennement PhoneGap) est un framework open source développé par la Fondation Apache qui permet de créer des applications pour différentes plateformes (Android, Firefox OS, iOS, Windows 8 …) en HTML, CSS et JavaScript.
Liste des fonctionnalités disponibles pour les plateformes Android et iOS :
Les applications qui en résultent sont couramment appelées hybrides, ce qui signifie qu’elles ne sont ni vraiment natives, ni purement basées sur les langages HTML, CSS et JavaScript.
Lien : https://cordova.apache.org/
1.1. Installation
Cordova fournit une interface en ligne de commande (CLI). Celle-ci nécessite l’environnement Node.js
.
Node.js est un environnement d’exécution JavaScript multiplateforme conçu pour exécuter du code JavaScript côté serveur. Il est généralement utilisé pour créer des applications back-end, mais il est également populaire en tant que solution full-stack et front-end. npm
est le gestionnaire de packages par défaut pour Node.js.
L’outil nvm
(Node Version Manager) permet d’installer plusieurs versions de Node.js sur la même machine. Pour les développeurs, c’est la méthode conseillée.
Installation de la dernière version LTS de Node.js
et npm
à l’aide de nvm
:
-
Sous Ubuntu 20.04 :
$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash % Total % Received % Xferd Average Speed Time Time Time Current Dload Upload Total Spent Left Speed 100 13527 100 13527 0 0 57561 0 --:--:-- --:--:-- --:--:-- 57561 => Downloading nvm from git to '/home/tvaira/.nvm' => Clonage dans '/home/tvaira/.nvm'... remote: Enumerating objects: 290, done. remote: Counting objects: 100% (290/290), done. remote: Compressing objects: 100% (257/257), done. remote: Total 290 (delta 34), reused 111 (delta 20), pack-reused 0 Réception d'objets: 100% (290/290), 163.37 Kio | 217.00 Kio/s, fait. Résolution des deltas: 100% (34/34), fait. => Compressing and cleaning up git repository => Appending nvm source string to /home/tvaira/.bashrc => Appending bash_completion source string to /home/tvaira/.bashrc => Close and reopen your terminal to start using nvm or run the following to use it now: $ source $HOME/.bashrc $ nvm --version 0.35.3 $ nvm install --lts Installing latest LTS version. Downloading and installing node v14.15.4... Downloading https://nodejs.org/dist/v14.15.4/node-v14.15.4-linux-x64.tar.xz... ############################################################################################################################ 100,0% Computing checksum with sha256sum Checksums matched! Now using node v14.15.4 (npm v6.14.10) Creating default alias: default -> lts/* (-> v14.15.4) $ nvm ls > v14.15.4 system default -> lts/* (-> v14.15.4) node -> stable (-> v14.15.4) (default) stable -> 14.15 (-> v14.15.4) (default) iojs -> N/A (default) unstable -> N/A (default) lts/* -> lts/fermium (-> v14.15.4) lts/argon -> v4.9.1 (-> N/A) lts/boron -> v6.17.1 (-> N/A) lts/carbon -> v8.17.0 (-> N/A) lts/dubnium -> v10.23.1 (-> N/A) lts/erbium -> v12.20.1 (-> N/A) lts/fermium -> v14.15.4 $ node --version v14.15.4 $ npm --version 6.14.10
-
sous macOS :
$ cd ~ $ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh | bash $ vim ~/.zshrc export NVM_DIR="$HOME/.nvm" [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm $ source ~/.zshrc $ nvm install --lts
Installation de Cordova :
$ npm install -g cordova $ cordova --version 10.0.0
Ensuite, il faut préparer les dépendances nécessaires pour les plateformes supplémentaires comme Android et/ou iOS.
Liens :
1.2. Cordova pour Android
Cordova pour Android nécessite le SDK Android. Pour cela, il est possible de l’installer directement ou par Android Studio.
Android Studio est un environnement de développement pour développer des applications Android. Il est basé sur IntelliJ.
Android est un système d’exploitation mobile basé sur le noyau Linux et développé actuellement par Google.
Les différents kits de développement sont :
-
l’Android NDK (Android Native Development Kit) est une API du système d’exploitation Android permettant de développer directement dans le langage C/C++ du matériel cible, par opposition au Android SDK qui est une abstraction en bytecode Java, indépendante du matériel.
-
l’Android SDK est un ensemble complet d’outils de développement (pour Linux, MAC OS ou Windows). Il inclut un débogueur, des bibliothèques logicielles, un émulateur basé sur QEMU, de la documentation, des exemples de code et des tutoriaux.
L'ADB (Android Debug Bridge) est un outil inclus dans le package Android SDK. Il se compose d’un programme client et d’un programme serveur communicant entre eux et qui permet :
-
la copie de fichier ;
-
l’accès à la console Android ;
-
la sauvegarde de la mémoire ROM ;
-
l’installation de logiciel.
Ces outils sont disponibles aussi bien sous GNU/Linux que sous Windows et Mac OS. Les applications Android étant exécutées par une machine virtuelle, il n’y a pas d’avantages particuliers à développer sur un système plutôt qu’un autre (même si une machine Mac pourra développer pour iOS et Android ce qui ne sera pas le cas pour des machines GNU/Linux ou Windows pour iOS !) … |
1.2.1. Installation Android 4.1 (Ubuntu 20.04)
Il sera probablement nécessaire d’installer :
-
Java JDK (version 8)
-
Android (API 22) platform SDK
-
Android SDK Build-tools 19.1.0 ou supérieur
1.2.2. Java SDK
$ sudo apt install openjdk-8-jdk $ sudo update-alternatives --config java $ sudo update-alternatives --config javac $ javac -version javac 1.8.0_275 $ export JAVA_HOME=/usr/lib/jvm/java-8-openjdk-amd64
1.2.3. Cordova CLI
Pour l’utiliser avec Cordova en ligne de commande (CLI), il faut inclure les répertoires des outils Android dans la variable d’environnement PATH
et définir ANDROID_HOME
.
L’idéal est de modifier le fichier ~/.bashrc
:
$ vim ~/.bashrc export ANDROID_HOME=$HOME/Android/Sdk export ANDROID_SDK_ROOT=$HOME/Android/Sdk export PATH=${PATH}:$HOME/Android/Sdk/platform-tools:$HOME/Android/Sdk/tools export JAVA_HOME=/usr/lib/jvm/java-8-openjdk-amd64
Pour les machines Mac, il faudra utiliser maintenant |
Puis de le recharger :
$ source ~/.bashrc
La fabrication d’une application Android nécessite maintenant Gradle. Il faut le télécharger et l’installer (https://gradle.org/) ou utiliser celui déjà présent dans $ ls -l $HOME/.gradle/wrapper/dists/ $ ls -l $HOME/.gradle/wrapper/dists/gradle-6.5-bin/ $ export PATH=$PATH:$HOME/.gradle/wrapper/dists/gradle-6.5-bin/xxxxxxxxxxxxx/gradle-6.5/bin |
1.3. Cordova pour iOS
→ Installation de XCode : https://apps.apple.com/fr/app/xcode/id497799835?mt=12
→ Installation des outils de déploiement iOS :
$ npm install -g ios-sim $ sudo xcode-select -switch /Applications/Xcode.app/Contents/Developer $ npm install -g ios-deploy
2. Test : premier projet
$ cordova create hello com.example.hello HelloWorld Creating a new cordova project. $ cd hello/
2.1. Android
$ cordova platform add android Using cordova-fetch for cordova-android@^9.0.0 Adding android project... Creating Cordova project for the Android platform: Path: platforms/android Package: com.example.hello Name: HelloWorld Activity: MainActivity Android target: android-29 Subproject Path: CordovaLib Subproject Path: app Android project created with cordova-android@9.0.0 Discovered plugin "cordova-plugin-whitelist". Adding it to the project Installing "cordova-plugin-whitelist" for android Adding cordova-plugin-whitelist to package.json $ cordova prepare
La commande |
Les informations sur le projet :
$ cordova info Cordova Packages: cli: 10.0.0 common: 4.0.2 create: 3.0.0 lib: 10.0.0 common: 4.0.2 fetch: 3.0.0 serve: 4.0.0 Project Installed Platforms: android: 9.0.0 Project Installed Plugins: cordova-plugin-whitelist: 1.3.4 Environment: OS: Ubuntu 20.04.1 LTS (linux 5.8.0-38-generic) x64 Node: v14.15.4 npm: 6.14.10 ...
-
Version debug :
$ cordova build android --debug ... BUILD SUCCESSFUL in 1m 31s 40 actionable tasks: 40 executed Built the following apk(s): /home/iris/hello/platforms/android/app/build/outputs/apk/debug/app-debug.apk $ cordova run android --list Available android devices: d95f698401ba0ee8 Available android virtual devices: Pixel_3a_API_30_x86 $ cordova run android --device ... BUILD SUCCESSFUL in 2s 40 actionable tasks: 40 up-to-date Built the following apk(s): /home/iris/hello/platforms/android/app/build/outputs/apk/debug/app-debug.apk Checking Java JDK and Android SDK versions ANDROID_SDK_ROOT=/home/iris/Android/Sdk (recommended setting) ANDROID_HOME=/home/iris/Android/Sdk (DEPRECATED) Using Android SDK: /home/iris/Android/Sdk Using apk: /home/iris/hello/platforms/android/app/build/outputs/apk/debug/app-debug.apk Package name: com.example.hello LAUNCH SUCCESS
-
Version release :
$ keytool -genkey -v -keystore HelloWorld.keystore -alias hello -validity 20000 $ keytool -list -keystore HelloWorld.keystore -storepass zg3pa04f -v Type de fichier de clés : PKCS12 Fournisseur de fichier de clés : SUN Votre fichier de clés d'accès contient 1 entrée Nom d'alias : hello Date de création : 17 janv. 2021 Type d'entrée : PrivateKeyEntry Longueur de chaîne du certificat : 1 Certificat[1]: Propriétaire : CN=vaira thierry, OU=lasalle, O=btssn, L=avignon, ST=vaucluse, C=fr Emetteur : CN=vaira thierry, OU=lasalle, O=btssn, L=avignon, ST=vaucluse, C=fr Numéro de série : 3a0b326 Valide du Sun Jan 17 13:29:24 CET 2021 au Mon Oct 21 14:29:24 CEST 2075 Empreintes du certificat : SHA 1: 98:5C:85:E0:82:D4:26:4D:98:20:F7:D4:59:D6:EB:26:52:81:EE:4B SHA 256: AD:49:79:98:0D:34:59:5F:E5:73:3C:D1:08:DC:DD:6D:EF:CC:CB:4C:E1:6F:B2:63:87:67:F3:C8:22:8D:B8:28 Nom de l'algorithme de signature : SHA256withDSA Algorithme de clé publique du sujet : Clé DSA 2048 bits Version : 3 Extensions : #1: ObjectId: 2.5.29.14 Criticality=false SubjectKeyIdentifier [ KeyIdentifier [ 0000: F2 B0 FB EC 27 41 1F 92 5B AB 0B A5 CB 4B E2 3A ....'A..[....K.: 0010: 19 0C D6 03 .... ] ] ******************************************* *******************************************
Il faut desinstaller le paquet précédent de la tablette. |
$ cordova run android --release -- --keystore=./HelloWorld.keystore --storeType=jks --storePassword=xxxxxxx --alias=hello --password=password ... BUILD SUCCESSFUL in 1s 47 actionable tasks: 1 executed, 46 up-to-date Built the following apk(s): /home/iris/hello/platforms/android/app/build/outputs/apk/release/app-release.apk Checking Java JDK and Android SDK versions ANDROID_SDK_ROOT=/home/iris/Android/Sdk (recommended setting) ANDROID_HOME=/home/iris/Android/Sdk (DEPRECATED) Using Android SDK: /home/iris/Android/Sdk No target specified, deploying to device 'd95f698401ba0ee8'. Using apk: /home/iris/hello/platforms/android/app/build/outputs/apk/release/app-release.apk Package name: com.example.hello LAUNCH SUCCESS
Pour finir, il est possible d’importer le projet dans Android Studio :
2.2. iOS
$ cordova platform add ios Using cordova-fetch for cordova-ios@^6.1.0 Adding ios project... Creating Cordova project for the iOS platform: Path: platforms/ios Package: com.example.hello Name: HelloWorld iOS project created with cordova-ios@6.1.1 Discovered plugin "cordova-plugin-whitelist". Adding it to the project Installing "cordova-plugin-whitelist" for ios Adding cordova-plugin-whitelist to package.json $ cordova prepare
La commande |
Les informations sur le projet :
$ cordova info Cordova Packages: cli: 10.0.0 common: 4.0.2 create: 3.0.0 lib: 10.0.0 common: 4.0.2 fetch: 3.0.0 serve: 4.0.0 Project Installed Platforms: ios: 6.1.1 Project Installed Plugins: cordova-plugin-whitelist: 1.3.4 Environment: OS: macOS 11.1 (20C69) (darwin 20.2.0) x64 Node: v14.15.4 npm: 6.14.10 ios Environment: xcodebuild: Xcode 12.3 Build version 12C33 ...
On va modifier l' id
du projet :
$ vim config.xml <?xml version='1.0' encoding='utf-8'?> <widget id="com.lasalle.hello" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0"> <name>HelloWorld</name> <description> A sample Apache Cordova application that responds to the deviceready event. </description> <author email="dev@cordova.apache.org" href="http://cordova.io"> Apache Cordova Team </author> <content src="index.html" /> <access origin="*" /> <allow-intent href="http://*/*" /> <allow-intent href="https://*/*" /> <allow-intent href="tel:*" /> <allow-intent href="sms:*" /> <allow-intent href="mailto:*" /> <allow-intent href="geo:*" /> <platform name="android"> <allow-intent href="market:*" /> </platform> <platform name="ios"> <allow-intent href="itms:*" /> <allow-intent href="itms-apps:*" /> </platform> </widget>
Il faut ensuite ouvrir le projet platforms/ios/HelloWorld.xcodeproj
dans XCode pour faire les réglages du compte du développeur Apple.
Aller dans XCode
→ Preferences
→ Accounts
:
Puis faire les réglages du projet :
Il est possible de fabriquer et lancer l’application sur l’iPhone depuis XCode :
Ou avec Cordova depuis la ligne de commande :
$ cordova run ios --device
Il faut autoriser l’application à s’exécuter sur l’iPhone : |
3. Les plugins
Un plugin Cordova est une API qui fournit une interface JavaScript aux composants natifs de la plateforme. Ils permettront à l’application d’utiliser les fonctionnalités natives de l’appareil.
Liste des fonctionnalités par plateforme : https://cordova.apache.org/docs/fr/latest/guide/support/index.html
Les plugins : https://cordova.apache.org/plugins/
$ cordova plugin list cordova-plugin-whitelist 1.3.4 "Whitelist"
La commande |
4. Voir aussi
-
Personnalisation des icônes et écran de démarrage (splash) : https://cordova.apache.org/docs/fr/latest/config_ref/images.html
La version PDF de ce document : cordova.pdf.