L’idée est simple de Cordova : compiler une coquille utilisant un module « webview » qui encapsule du code web dans un navigateur très allégé.
En utilisant du HTML, css, et JavaScript, il est possible de créer des applications pour les téléphones Apple, Android, et Windows.
Ionic est un framework de développement cross-platform qui permet de réaliser des applications mobile pour Android et iOS en utilisant des fonctions natives. Il est basé sur Cordova / NodeJS et Angular.
Tutoriels CORDOVA :
https://www.toptal.com/mobile/developing-mobile-applications-with-apache-cordova
https://www.tutorialspoint.com/cordova/index.htm
https://imikado.developpez.com/tutoriels/androidCordova/ma-premier-application/
https://cordova.apache.org/docs/fr/latest/guide/cli/
TUTORIELS IONIC :
IONIC Sous UBUNTU 20 : https://tecadmin.net/install-ionic-on-ubuntu-20-04/
https://blogs.infinitesquare.com/posts/web/qu-est-ce-que-c-est-ionic
Installation CORDOVA :
https://cordova.apache.org/docs/fr/latest/guide/cli/
Installez NodeJS, GIT et Android Studio
Modifiez la variable path (https://stackoverflow.com/questions/26356359/error-android-home-is-not-set-and-android-command-not-in-your-path-you-must)
ANDROID_HOME = C:\Users\xxx\AppData\Local\Android\Sdk
puis dans le shell nodejs :
Allez dans le répertoire où vous conservez votre code source et exécutez une commande comme suit :
$ cordova create rephello com.example.hello HelloWorld
Il peut prendre un certain temps pour la commande pour terminer, alors soyez patient. L’exécution de la commande avec le -d option affiche des informations sur ses progrès.
Le premier argument rephello spécifie un répertoire à générer pour votre projet. Ce répertoire ne devrait pas déjà exister, Cordova le créera pour vous.
Le deuxième argument com.example.hello met à votre projet avec un identificateur de domaine inverse-style.
Le troisième argument HelloWorld fournit le titre d’affichage de l’application.
Puis entrez :
cordova platform add androiddans le répertoire créé pour ajouter la platforme android
Éventuellement ajoutez un ou plusieurs plugin, par exemple :
cordova plugin add cordova-sms-pluginPour retirer un plugin :
cordova plugin remove cordova-plugin-consoleModifiez le fichier www\index.html pour entrer votre code…
enfin cordova run –emulator pour construire le projet
ou cordova run pour lancer le projet sur un téléphone connecté via USB
Référence : https://www.tutorialspoint.com/cordova/cordova_first_application.htm
PlugIn : https://cordova.apache.org/plugins/
Hello : https://github.com/don/cordova-plugin-hello
SERVICE :
1°) Create a service : https://www.npmjs.com/package/cordova-js-service
cordova plugin add cordova-js-service
2°) Background service : https://www.npmjs.com/package/cordova-plugin-background-service
cordova plugin add cordova-plugin-background-mode3°) Ajoutez dans « config.xml »
<plugin name= »cordova-plugin-whitelist » spec= »1″ />
<preference name= »js-service » value= »backservice.js » />
<access origin= »* » />
4°) Placez le fichier backservice.js à côté du fichier index.html
5°) Test : https://app.box.com/s/e5uy0qqy1wyievkdx76jcpe8qkb52suo
Read incoming SMS :
https://www.npmjs.com/package/cordova-plugin-sms-receive
https://wiki.appstudio.dev/Using_the_PhoneGap_API:_SMS-Receive
Send SMS : https://github.com/cordova-sms/cordova-sms-plugin
https://github.com/cfjedimaster/Cordova-Examples/tree/master/smscomposer
Start App on Boot : https://stackoverflow.com/questions/44079280/how-i-can-launch-my-app-in-startup-device-with-cordova
https://github.com/ToniKorin/cordova-plugin-autostart
Battery :
cordova plugin add cordova-plugin-battery-statushttps://www.tutorialspoint.com/cordova/cordova_battery_status.htm
Réseaux (présence) : https://github.com/apache/cordova-plugin-network-information
https://stackoverflow.com/questions/38720493/how-to-check-internet-connection-on-a-cordova-app
Pour ajouter des boutons (exemple) : https://www.tutorialspoint.com/cordova/cordova_device.htm
Envoi de mails : https://github.com/raguilera82/send-mail-cordova-plugin
SqlLite : cordova plugin add cordova-sqlite-storage puis
https://www.npmjs.com/package/cordova-sqlite-storage#sample
https://codesundar.com/cordova-sqlite-storage/
https://cordova.apache.org/docs/fr/latest/cordova/storage/database/database.html
Ecouter les appels :
https://github.com/rehy/cordova-plugin-calltrap
Exemple : https://www.raymondcamden.com/2014/12/11/cordova-example-sending-sms-messages
http://www.nikola-breznjak.com/blog/javascript/create-android-cordova-plugin-showing-toast-popups/
Test notification : https://github.com/katzer/cordova-plugin-local-notifications
Traduction et localisation :
https://github.com/apache/cordova-plugin-globalization
Bluetooth :
https://don.github.io/slides/2014-04-07-apachecon-bluetooth/#/14
https://github.com/don/BluetoothSerial
Exemple avec adresse MAC = « 20:13:06:13:37:46 »;
https://github.com/bcsphere/bluetooth
Créer son plugin :
http://loic.knuchel.org/blog/2015/03/20/creer-un-plugin-cordova/
User Interface :
Une application CORDOVA doit suivre le design SPA (Single Page Application).
SPA est une application qui fonctionne sur le client et qui, au chargement, embarque toutes les ressaources nécessaires (HTML, CSS, and JavaScript) et qui met à jour la page principale à l’aide d’appels AJAX.
Une librairie souvent employée sous CORDOVA est AngularJS
https://angular.io/guide/quickstart
https://mobileui.github.io/#getting-started
npm install -g mobileui
cordova create rephello com.example.hello HelloWorld
cd rephello
mobileui install template cordova-blank mobileui install header
Puis, dans le fichier index.html ajoutez :
<div class="header purple"> <button class="left icon ion-navicon" name="button"></button> <h1>Application title</h1> </div>
Pour voir le résultat dans le navigateur :
mobileui preview <=> http://localhost:8080/
Sous Android :
cordova platform add android
cordova runPour utiliser Angular :
mobileui install template cordova-angular1
https://onsen.io/v2/guide/hybrid/cordova.html#cordova
Présentation du résultat d’une API dans un navigateur : https://medium.com/@alexdimango/an-apache-cordova-with-api-fetch-and-bootstrap-in-five-minutes-64b248b30940
Pour modifier l’orientation de l’écran et le mode plein écran
Modifier le fichier config.xml et ajouter dans le paragraphe android
<platform name= »android »>
<preference name= »Orientation » value= »sensorLandscape » />
<preference name= »Fullscreen » value= »true » />
</platform>
https://cordova.apache.org/docs/fr/latest/config_ref/
et le plugin https://www.npmjs.com/package/cordova-plugin-fullscreen
Publication :
https://codeburst.io/publish-a-cordova-generated-android-app-to-the-google-play-store-c7ae51cccdd5
Références :
https://info.exsquared.com/ex-squared-blog/building-a-cordova-android-application-from-scratch
https://imikado.developpez.com/tutoriels/androidCordova/ma-premier-application/
https://www.toptal.com/mobile/developing-mobile-applications-with-apache-cordova
AndroLogiciels 