Démarrage de l'application DuckCoin

Création du projet

Comme nous l'avons vu, il est possible de créer une application mobile à partir d'un dépôt git. C'est ce que nous allons faire pour l'application DuckCoin.

Ouvrez donc votre terminal et saisissez les commandes suivantes :

$ ionic start duckcoin https://github.com/charlesen/duckcoin-starter

Démarrez ensuite l'application avec la commande serve :

$ cd duckcoin
$ ionic serve -lc

Ajoutons ensuite les plateformes Android et iOS à notre projet comme ceci :

$ ionic cordova platform add android
$ ionic cordova platform add ios

Struction du projet

Faisons un peu le tour de l'anatomie d'un projet type sous Ionic.

config.xml

Ce fichier est utilisé pour gérer toute la configuration de la partie native de l'application. C'est ici par exemple que vous rajouterez les autorisations nécessaires pour l'utilisation de la Camera dans votre application. Chaque plugin ajouté à votre application sera rajouté automatiquement à ce fichier.

C'est aussi dans ce fichier que vous devriez renseigner le numéro de version de votre application, utile dans l'étape de publication sur les stores (Google ou Apple Store par exemple)

<?xml version='1.0' encoding='utf-8'?>
<widget id="io.ionic.starter" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>monAppli</name>
    <description>Une application de test</description>
    <author email="[email protected]" href="http://ionicframework.com/">Charles EDOU NZE</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:*" />
    <preference name="ScrollEnabled" value="false" />
    <preference name="android-minSdkVersion" value="19" />
    ...

ionic.config.json

Ce fichier contient des informations de base sur votre application (nom de l'application, App ID...), et est utilisé notamment pour uploader votre application sur le cloud Ionic.

package.json

C'est le fichier de configuration de Node. A la création d'un projet, Ionic lance automatiquement la commande npm install, qui va installer un certain nombre de paquets en arrière-plan et stockés dans le dossier node_modules. C'est grâce à ce fichier package.json que npm sait quel paquet installé dans le projet

./platforms

Ce dossier contient les versions "natives" de l'application. Un dossier a été ajouté pour chaque plateforme cible. Pour afficher la liste des plateformes actuellement supportées, il suffit de faire :

$ ionic cordova platform list

> cordova platform ls
Installed platforms:
  android 7.0.0
  ios 4.5.4
Available platforms: 
  browser ~5.0.1
  ios ~4.5.4
  osx ~4.0.1
  windows ~5.0.0
  www ^3.12.0

./plugins

Le dossier contient tous les plugins Cordova utilisés par l'application. Pour rappel, un plugin un conteneur faisant appel à des fonctions natives (voir repertoire platforms/[NOM_PLATEFORME]/CordovaLib) à partir d'un code JavaScript.

./resources

Ce dossier contient les différentes icônes de l'application et le splashscreen (image au chargement de l'application). La commande ionic cordova resources permet la génération des icônes pour différents types de format d'écran.

$ ionic cordova resources
✔ Collecting resource configuration and source images - done!
✔ Filtering out image resources that do not need regeneration - done!
✔ Uploading source images to prepare for transformations - done!
✔ Generating platform resources: 50 / 50 complete - done!
✔ Modifying config.xml to add new image resources - done!


$ git status
Sur la branche master
Modifications qui ne seront pas validées :
  (utilisez "git add <fichier>..." pour mettre à jour ce qui sera validé)
  (utilisez "git checkout -- <fichier>..." pour annuler les modifications dans la copie de travail)

    modifié :         resources/android/icon/drawable-hdpi-icon.png
    modifié :         resources/android/icon/drawable-ldpi-icon.png
    modifié :         resources/android/icon/drawable-mdpi-icon.png
    modifié :         resources/android/icon/drawable-xhdpi-icon.png
    modifié :         resources/android/icon/drawable-xxhdpi-icon.png
    modifié :         resources/android/icon/drawable-xxxhdpi-icon.png
    modifié :         resources/android/splash/drawable-land-hdpi-screen.png
    modifié :         resources/android/splash/drawable-land-ldpi-screen.png
    modifié :         resources/android/splash/drawable-land-mdpi-screen.png
    modifié :         resources/android/splash/drawable-land-xhdpi-screen.png
    modifié :         resources/android/splash/drawable-land-xxhdpi-screen.png
    modifié :         resources/android/splash/drawable-land-xxxhdpi-screen.png
    modifié :         resources/android/splash/drawable-port-hdpi-screen.png
    modifié :         resources/android/splash/drawable-port-ldpi-screen.png
    modifié :         resources/android/splash/drawable-port-mdpi-screen.png
    modifié :         resources/android/splash/drawable-port-xhdpi-screen.png
    modifié :         resources/android/splash/drawable-port-xxhdpi-screen.png
    modifié :         resources/android/splash/drawable-port-xxxhdpi-screen.png
    modifié :         resources/ios/icon/icon-1024.png
    modifié :         resources/ios/icon/icon-40.png
    modifié :         resources/ios/icon/[email protected]
    modifié :         resources/ios/icon/[email protected]
    modifié :         resources/ios/icon/icon-50.png
    modifié :         resources/ios/icon/[email protected]
    modifié :         resources/ios/icon/icon-60.png
    modifié :         resources/ios/icon/[email protected]
    modifié :         resources/ios/icon/[email protected]
    modifié :         resources/ios/icon/icon-72.png
    modifié :         resources/ios/icon/[email protected]
    modifié :         resources/ios/icon/icon-76.png
    modifié :         resources/ios/icon/[email protected]
    modifié :         resources/ios/icon/[email protected]
    modifié :         resources/ios/icon/icon-small.png
    modifié :         resources/ios/icon/[email protected]
    modifié :         resources/ios/icon/[email protected]
    modifié :         resources/ios/icon/icon.png
    modifié :         resources/ios/icon/[email protected]
    modifié :         resources/ios/splash/[email protected]~iphone.png
    modifié :         resources/ios/splash/Default-667h.png
    modifié :         resources/ios/splash/Default-736h.png
    modifié :         resources/ios/splash/Default-Landscape-736h.png
    modifié :         resources/ios/splash/[email protected]~ipad.png
    modifié :         resources/ios/splash/[email protected]~ipadpro.png
    modifié :         resources/ios/splash/Default-Landscape~ipad.png
    modifié :         resources/ios/splash/[email protected]~ipad.png
    modifié :         resources/ios/splash/[email protected]~ipadpro.png
    modifié :         resources/ios/splash/Default-Portrait~ipad.png
    modifié :         resources/ios/splash/[email protected]~iphone.png
    modifié :         resources/ios/splash/[email protected]~universal~anyany.png
    modifié :         resources/ios/splash/Default~iphone.png

./src/

C'est à l'intérieur que l'on retrouve le code de l'application à proprement. Lorsque l'on voudra rajouter de nouveaux écrans, de la logique métier,...c'est ici que cela se passera.

On retrouve du code écrit en TypeScript (nous en reparlerons en détails au chapitre 6) dont l'extension de fichiers est .ts.

On retrouve aussi du html, du css,...

Écran Mobile = 1 Fichier .ts + 1 Fichier .html + 1 Fichier .scss

le fichier src/app/app.module.ts est le point d'entrée métier de notre application.

@NgModule({
  declarations: [MyApp, ContactPage, HomePage],
  imports: [BrowserModule, IonicModule.forRoot(MyApp)],
  bootstrap: [IonicApp],
  entryComponents: [MyApp, ContactPage, HomePage],
  providers: []
})
export class AppModule {}

C'est dans ce fichier que l'on décide quelle composant (ici MyApp) sera le composant principal. On expliquera ces notions de composants dans le chapitre 8.

Dans le chapitre suivant, nous allons apprendre à customiser notre application pour qu'elle soit un peu plus à notre image.Mais en attendant, exerçons-vous un peu.

./src/index.html

C'est l'entrée principale du projet. Il faut se rappeler qu'une application Hybride utilise la technologie WebView du téléphone qui se comporte alors comme un mini-navigateur à l'intérieur duquel on peut afficher un site web, qui est votre projet.

A l'intérieur de ce fichier, Ionic va aller chercher le tag <ion-app> à l'intérieur duquel vos différents écrans seront chargés.

<ion-app></ion-app>

On retrouve également du code JavaScript, généré par Ionic et qu'il ne sera pas nécessaire de modifier :

<!-- Ionic's root component and where the app will load -->
<ion-app></ion-app>

<!-- The polyfills js is generated during the build process -->
<script src="build/polyfills.js"></script>

<!-- The vendor js is generated during the build process
     It contains all of the dependencies in node_modules -->
<script src="build/vendor.js"></script>

<!-- The main bundle js is generated during the build process -->
<script src="build/main.js"></script>

tsconfig.json et tslint.json

Ces fichiers sont utilisé par TypeScript et décrivre notamment la manière dont celui-ci doit être compilé. Vous n'aurez pas nécessairement de les configurer vous-même, les valeurs par défaut étant suffisantes.

./www

Ce dossier, qui est auto-généré, contient la version web de votre application mobile. C'est grâce à ce dossier que vous pouvez visualiser l'application depuis un navigateur.