Ionic 3 est un framework de développement d’application mobile, en gros vous n’avez pas besoin de connaitre le Java pour développer une application Android, vous n’avez pas besoin de connaitre le Swift ou Objective-C pour développer une application IOS. Vous avez seulement besoin de connaitre le Javascript (le Typescript pour Ionic 3). Ionic 3 peut se baser sur Angular 2+ comme framework.
Un projet Ionic 3 , c’est beaucoup de réglage, de syntaxe avec annotation, vous codez dans des stubs tout fait. Il faut connaitre l’écosystème de plugins, qui est à la base de fonctionnalités natives. Une application Ionic a l’avantage de vous faire coder une seule fois et créer deux application mobile pour les plateformes Android et IOS, via la compilation avec Android Studio et XCode.
Comme vous codez des applications qui sont destinées à être mises sur les store, vous devez connaitre les déploiements vers ces deux plateforme, perso j’ai trouvé celle de IOS laborieuse.
Contenu
Bootstrappez votre application Ionic 3
Installation de NodeJs et NPM
Ces deux logiciels sont à la base de développement avec les framework Javascript, ces sont surtout des outils pour automatiser des tâches de build. Téléchargez d’abord NodeJS, de préférence une version LTS, dont la maintenance est assurée.
Installation via NPM de Ionic et Cordova
Créez vous un répertoire pour votre projet et allez dedans, et faites la commande :
#Mac Linux sudo npm install -g ionic sudo npm install -g cordova #syntaxe alternative sudo npm install -g ionic cordova
Je me suis posé beaucoup de questions quand à la possibilité de ne pas installer en global pour un projet, pour l’instant j’ai suivi la méthode préconisée par le site officiel de Ionic.
Pourquoi Cordova?
A la base c’est le projet Cordova qui permettait de développer des application mobile cross-platform, mais le look and feel n’était pas assez natif, et peut être manquait de tooling, donc le projet Ionic est un wrapper sur Cordova, et permet en gros d’avoir un look plus natif, mais pas que.
Mise à jour de Cordova
Parce que tout va très dans le monde de l’informatique, il vous faut parfois mettre à jour Cordova, pour ce faire effacez d’abord votre répertoire Android ou IOS, car Cordova fait le lien entre la plateforme et votre code Javascript
cordova platform update android
Créer l’application Ionic
Maintenant que tout les scripts sont installés, nous allons créer une application Ionic
# ionic-angular == ionic 3 ! ionic start ibeacon blank --type=ionic-angular # allez dans le répertoire de l'application ionic serve
Un répertoire ibeacon sera créé, c’est celui de votre projet, un répertoire node_modules sera créé, et contiendra toutes les librairies nécessaires à votre projet. Ce répertoire peut vite est volumineux, il ne faut pas le versionner sous Git. Un fichier packages.json sera généré, ce fichier consigne les librairies qui sont installées via NPM. Il faut le versionner, car il permet de reconstituer le répertoire node_modules sur un autre poste si besoin est.
blank est le template de votre projet, il existe d’autres template : sidemenu avec une barre latérale, tabs avec 3 onglets, super avec 14 designs de page, tutorial pour commencer à apprendre avec Ionic 3.
Cette commande va lancer l’application dans votre navigateur par défaut sur le port 8100 à l’adresse http://localhost:8100
Le fait que ce soit sur le port 8100 fait que Ionic ne va pas interférer si vous avez un serveur Apache ou Nginx sur le port 80 par exemple.
Structure d’un projet Ionic 3
La structure se base sur celle de Cordova, nous voyons qu’il y a un répertoire principal /src, il y a souvent le tryptique fichier ts/fichier scss/template html.
/src
/app
app.module.ts
app.html
app.scss
main.ts
app.component.ts
/pages
/assets
/theme
/www
/assets
/build
index.html
manifest.json
service-worker.js
Le fichier à la racine du répertoire index.html est le point d’entrée de l’application. Vous pouvez comparer avec le index.html de /www/index.html, ils sont quasi identiques.
Le répertoire www contient les fichiers compilés, que vous allez déployer, en effet les fichiers qui sont dans le répertoire src sont uniquement utilisé en développement, et servent à compiler l’application finale.
Le répertoire /src a plusieurs répertoires importants, /app contient le root module de l’application, qui est en fait un wrapper pour charger le reste des modules, app.module.ts est le premier module à être chargé.
Le répertoire /app
Ce répertoire est très important car il contient le root module qui va appeler les modules restants. Le fichier main.ts est le fichier dans lequel vous allez mettre votre code propre, votre code métier, il y a le tryptique app.* où * est scss,html,ts. Il y a le composant app.component.ts, le code de ce script crée une classe qui est chargée dans le fichier app.module.ts.
Le contenu de app.module.ts contient le code suivant :
@NgModule({
declarations: [MyApp, HelloIonicPage, ItemDetailsPage, ListPage],
imports: [BrowserModule, IonicModule.forRoot(MyApp)],
bootstrap: [IonicApp],
entryComponents: [MyApp, HelloIonicPage, ItemDetailsPage, ListPage],
providers: [StatusBar, SplashScreen, {provide: ErrorHandler, useClass: IonicErrorHandler}]
})
export class AppModule {}
Toute application contient un élément racine, qui va piloter l’application et charger le reste des modules. Les composants à charger sont à l’attribut entryComponent (dans Ionic, tout est à base de composants). « MyApp » est le nom de la classe (du composant) définit dans le fichier app.component.ts .
Le fichier app.html a un élément <ion-nav> dont un des attributs est [root]="rootPage",
Le répertoire /pages
Il contient les différentes « pages » ou vues de l’application. Chaque page est constituée du tryptique ts/html/scss.
Le répertoire /assets
Il contient les images, icônes, des éléments de la vue.
Cette action est vraiment la plus facile, il suffit de lancer la commande :
ionic serve
Votre application se lancera sur votre navigateur par défaut sur le port 8100 sur l’adresse http://localhost:8100
Lancer l’application dans un émulateur
Pour ce faire il vous faut installer sur Windows Android Studio, et notez que sur Windows vous ne pouvez pas émuler un Iphone. Pour MacOs il est possible de lancer l’émulateur IOS et Android, avec l’aide respectivement de XCode et Android Studio.
Lancer avec un émulateur smartphone
Vous devez disposer de Android Studio, Java 8, et Gradle à installer séparément avec Homebrew
brew install gradle
Paramétrage pour l’environnement Android Studio. Il faut setter les variables d’environnement, voir cette page.
export ANDROID_SDK_ROOT=$HOME/Library/Android/sdk # avdmanager, sdkmanager export PATH=$PATH:$ANDROID_SDK_ROOT/tools/bin # adb, logcat export PATH=$PATH:$ANDROID_SDK_ROOT/platform-tools # emulator export PATH=$PATH:$ANDROID_SDK_ROOT/emulator export PATH=$PATH:$ANDROID_SDK_ROOT/build-tools #gradle home setting, mettre le chemin de gradle que vous avez installé avec Homebrew (brew info gradle pour connaitre le chemin) export GRADLE_HOME=/usr/local/Cellar/gradle/5.6.3 export PATH=$PATH:$GRADLE_HOME/bin
Installer (et enlever) les plateformes IOS et Android
Pour convertir le code Javascript en Java ou Swift, il faut d’abord installer les plateformes. Exécutez ces instructions en sudo :
ionic cordova platform add ios ionic cordova platform add android #pour enlever ionic cordova platform rm ios !! Vous aurez sans doute en phase de build un erreur de droit d'accès, c'est parce que vous avez dû créé la plateforme avec un sudo, dans ce cas changez le owner du répertoire plateform $ chown -R moi:moi platform
Sur Mac Os j’ai eu le problème suivant: les répertoire /platforms appartiennent à root, il a fallu faire un sudo chown -R monuser: /platforms pour changer le propriétaire de l’arborescence.
Lancez votre application sur un smartphone physique
Lancez votre application Ionic sur IOS
Vous devez disposer de XCode, la première chose à faire est de disposer d’un Apple ID ou d’un compte développeur Apple (cette procédure est plus compliquée), c’est un identifiant d’un compte sur apple.com. Ensuite la chose importante est de créer un provisioning profile en utilisant l’Apple ID. Qu’est ce qu’un provisioning profile?
Source
A provisioning profile is a collection of digital entities that uniquely ties developers and devices to an authorized iPhone Development Team and enables a device to be used for testing. A Development Provisioning Profile must be installed on each device on which you wish to run your application code. Each Development Provisioning Profile will contain a set of iPhone Development Certificates, Unique Device Identifiers and an App ID. Devices specified within the provisioning profile can be used for testing only by those individuals whose iPhone Development Certificates are included in the profile. A single device can contain multiple provisioning profiles.
Un provisioning profile est un ensemble d’identifiant qui lie de façon unique un device à une équipe de développeur, permettant en phase de développement de tester l’application. Ce profile (Vous le téléchargez depuis votre compte sur appe.com) doit être installé sur chaque device. un device peut contenir plusieurs provisioning profile. Avec ce dernier vous choisissez quel device peut lancer l’application et quels service votre application peut utiliser.
Provisioning is the process of preparing and configuring an app to launch on devices and to use app services. During development, you choose which devices can run your app and which app services your app can access. A provisioning profile is downloaded from your developer account and embedded in the app bundle, and the entire bundle is code-signed. The embedded provisioning profile is installed on the device before the app is launched. If the information in the provisioning profile doesn’t match certain criteria, your app won’t launch. You indirectly configure a development provisioning profile by choosing options in Xcode
Source
Bon ce n’est pas tout de faire une application, encore faut-il la déployer sur un smartphone ! là est vraiment la valeur ajoutée de Cordova et Ionic, faire une application native sans connaitre Java ou Swift.
Lancez votre application Ionic sur un smartphone Android
ionic cordova run android --device
si vous avez une erreur installez
sudo npm i -g native-run
Il se peut que votre Mac n’arrive pas à détecter votre téléphone Android, dans ce cas vérifiez bien que vous êtes en mode développeur (lien ici) et que le débogage USB est activé, branchez le câble USB à votre smartphone, ensuite dans Android Studio, allez scanner les devices dans le volet gradle (screenshot ici) en haut à droite de Android Studio. Lors de la connexion de votre smartphone Android via le port USB, n’oubliez de sélectionner « Transfert de fichier », car il faudra y mettre des fichiers.
Si le device ne s’affiche vérifiez les points suivants : smartphone en mode développeur, activer le mode débogage, ensuite allez sur « Run » du menu, « Select device », puis sur la popup « Troubleshoot » vous aurez cet écran :
Faites un « rescan device ».
Vidéo sur le déploiement sur Android en seconde partie (vidéo en anglais)
Le grand final déploiement dans les stores !
La majorité des applications doivent être sur les stores, pour profiter de leur audience. Sauf certaines applications confidentielles ou B2B, le reste vous avez tout intérêt à installer sur les stores Appstore pour IOS et Google Play pour Android.
Vidéo sur le déploiement sur l’Appstore, de la génération du CSR jusqu’à l’upload de l’application et paramétrage sur Itunes Connect
Erreur Fréquemment rencontrée lorsque vous démarrez en local une application ionic :
ERROR: Component xyz is not part of any NgModule or the module has not been imported into your module
Vous avez oublié de déclarer ce composant dans le fichier app.module.ts sous l’annotation @NgModule.
@NgModule({
declarations: [ // déclarer le composant ici
MyApp,
...
HomePage,
MentionsPage
],
...
})