• 20 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

course.header.alt.is_video

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 28/11/2019

Structurez un projet Ionic

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

La structure d'un projet Ionic diffère de celle d'un projet Angular pour le web.  C'est tout à fait normal, car ici, vous créez une application mobile — ces applications n'ont ni la même structure, ni les mêmes fonctionnalités qu'une application web traditionnelle.  Avant de commencer à coder, je vous propose une visite guidée de la structure d'un projet Ionic.

L'arborescence

Pour expliquer l'arborescence d'un projet Ionic, j'ai choisi de vous montrer un projet ayant déjà été configuré pour le déploiement. Ainsi, vous en comprendrez le fonctionnement avant de commencer.

Comme pour un projet Angular, par exemple, vous avez un dossier  node_modules  qui comporte tous les modules Angular, Ionic et Cordova installés par le CLI, ainsi que tous les modules que vous pourrez installer pour compléter votre application. Rien de bien surprenant ici.

Vous avez le dossier  platforms  , créé par le CLI au moment de l'ajout d'une plateforme cible pour votre application.  Ce dossier contient la majorité des ressources nécessaires au build final de votre application pour les plateformes différentes comme iOS et Android (les deux plateformes que vous verrez dans ce cours).

Ensuite, le dossier  plugins  contient les plugins Cordova qui permettent, par exemple, d'accéder aux fonctions natives des appareils, comme l'appareil photo ou la géolocalisation.  Il contient également le plugin qui permet d'exécuter votre application Angular sur mobile.

Le dossier  resources  contient les images correspondant à l'icône et au splash screen de votre application.  Le dossier  www  est également géré par le CLI pour la création des packages finaux pour votre application.

D'une façon générale, vous aurez très rarement à toucher aux dossiers ci-dessus, car ils sont générés et gérés par le CLI d'Ionic.  Le dossier qui vous concernera pour la création de votre application est le dossier  src  .

Le dossier src

Voici le dossier  src  de l'application que vous avez créé avec le CLI.

Comme dans un projet Angular, vous avez un dossier  app  avec un component, un module, un template, et une feuille de style. Mais comme vous le verrez dans ce chapitre, ce ne sera pas votre dossier de travail principal.

Le dossier  assets  contiendra les assets statiques de votre application, comme des images, par exemple.  Le dossier  theme , comme son nom l'indique, permet de modifier le thème de votre application.  Vous aborderez ces sujets plus tard dans ce cours.

Vous avez également un dossier  pages , qui contiendra toutes les pages de votre application.

Mais qu'est-ce qu'une page ?  C'est comme une page web ?  Un component ?

Pages, components et navigation

Ouvrez  app.component.html  , qui n'a qu'une ligne :

<ion-nav [root]="rootPage"></ion-nav>

Dans une application Angular habituelle, on s'attendrait à trouver des components ou un template qui correspondraient à ce que l'on voit dans le navigateur en exécutant ng serve, mais la structure d'une application Ionic est légèrement différente.  En effet, le template qui correspond à ce que vous voyez est  home.html  , dans le dossier   pages/home  :

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  The world is your oyster.
  <p>
    If you get lost, the <a href="http://ionicframework.com/docs/v2">docs</a> will be your guide.
  </p>
</ion-content>

Vous y trouvez plusieurs balises  ion-  qui seront expliquées dans les cours suivants : pour l'instant, le plus important est de comprendre le concept d'une page.  Une page est un component qui prend tout l'écran de l'appareil et auquel on accède par la navigation. Comme dans une application web, vos pages contiendront d'autres components.

Au lieu de fonctionner avec le Router d'Angular, la navigation d'une application Ionic correspond à un stack de pages sur lequel on  push  les pages que l'on souhaite visualiser.  La page visible à l'écran correspond à la dernière ayant été ajoutée au stack.  Pour revenir en arrière, on  pop  la dernière page ajoutée, dévoilant l'avant-dernière, etc.

Toute la navigation d'une application Ionic commence avec la  rootPage  .  Cette page, définie dans  app.component.ts  et intégrée dans  app.html  , sera la page de base pour toute votre application : la première page du stack de navigation.

export class MyApp {
  rootPage:any = HomePage;

Pour l'instant, vous allez garder  HomePage  en  rootPage .  Plus tard dans ce cours, vous apprendrez à utiliser ce système pour intégrer une navigation par tabs.

Exemple de certificat de réussite
Exemple de certificat de réussite