PROJET IONIC 3 : description rapide des éléments

Le dossier d’une application ionic 3 se décompose ainsi :

Dossier hooks/

Pour ajouter des scripts de compilation en utilisant Cordova

Niveau avancé de développement. Il est très probable que tu n’ais jamais à utiliser ça.

Dossier node_modules/

Toutes les dépendances du projet

Dès qu’on utilise la commande « npm install », ça installe dans ce dossier

Dossier platforms/

Contient les plateformes de compilation possible.

Quand on installe une plateforme avec la commande « ionic platform add android », ça installe la plateforme dans ce dossier.

Dossier plugins/

Contient les différents plugins qu’on peut installer dans l’application.

La commande d’installation est :

ionic plugin add _____

Dossier resources/

Contient les icones et le spashscreen de l’application

Dossier src

Tous les codes sources de l’application

app/

Tous les modules principaux

pages/

Toutes les pages, par exemple home

themes/

Le CSS

assets/

Les icones

Dossier www/

Contient l’application compilée.

Notamment main.js qui sera exécuté en premier.

Consulter un site en Flash depuis un terminal Android

Contre toute attente, on PEUT tout à fait afficher une animation Flash SWF ou un site web en Flash sur un terminal Android, comme une tablette ou un téléphone. C’est juste un peu de manipulations, mais rien de méchant.

  1. Installer Dolphin Browser, disponible dans Google Play Store
  2. Lancer Dolphin Browser sur le terminal Android
  3. Aller sur l’icone « dauphin », puis « Settings » pour activer le Dolphin Jetpack
  4. Plus bas dans « Settings » toujours, activer « Flash Player »
  5. Vous pouvez maintenant afficher un site web en flash ou votre propre animation !

A noter que Dolphin Browser permet également du fullscreen.

Cordova et ionic : les commandes de base

En ligne de commande, utiliser « cordova » ou « ionic » revient au même. Si on utilise les outils ionic, il est préférable d’utiliser la commande « ionic ».

Plugins

Lister les plugins

cordova plugin

Supprimer un plugin

cordova plugin remove le.nom.du.plugin

Ajouter un plugin

En local :

cordova plugin add ../../Le/Chemin/relatif/du/plugin

Ajouter un plugin distant :

cordova plugin add phonegap-plugin-barcodescanner

ou

cordova plugin add https://github.com/phonegap/phonegap-plugin-barcodescanner.git

Compiler

Environnement de test du navigateur internet, pour tester seulement le visuel

cordova serve

Environnement de production avec un terminal mobile (Android par exemple) :

cordova run android

 

Ajouter un environnement de production

cordova platform add android

 

 

Cordova : affiche « Error loading page »

Si lors de la commande

cordova run android

on obtient « Error loading page » sur le mobile, c’est qu’il y a eu un problème à la compilation du code, dans la partie www.

SOLUTION 1

Vérifier que ça fonctionne bien avec

cordova serve

SOLUTION 2

Ecouter les logs pendant l’exécution, dans une nouvelle console, avec

adb logcat

adb : les commandes

adb sert à gérer les appareils mobiles connectés au PC en USB : liste et logs.

adb s’utilise en ligne de commande.


Lister des appareils mobiles connectés en USB

adb devices

 

Reset la liste des appareils mobiles connectés en USB

adb kill-server
adb devices

 

Affiche en direct les logs de l’appareil connecté si 1 seul

adb logcat