• 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

Entraînez-vous à créer une application basique

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

À vous de jouer

Vous allez créer une application basique qui contiendra la liste de vos livres et de vos CD. Cette liste montrera quels livres et CD vous avez prêtés. Pour l'instant, ne précisez pas à qui le livre est prêté : cela fera partie de la prochaine activité. ;)  

Votre application devra comporter les fonctionnalités suivantes :

  • Vous utiliserez des tabs pour passer de la page Livres à la page CD.

  • Toucher un livre ou un CD de la liste ouvrira un modal permettant, à l'aide de deux boutons, de prêter ou de rendre l'élément.  

  • Dans les pages de liste, les éléments prêtés auront une couleur de fond différente afin de les rendre plus visibles.

  • Vous intégrerez également un menu latéral permettant d'accéder à une page de réglages (qui comportera simplement un titre et un texte placeholder).

Voici la structure que votre application devra présenter :

  • Vous aurez les pages suivantes : TabsPage, BookListPage, CdListPage, LendBookPage, LendCdPage, SettingsPage.

  • Les pages de liste passeront les informations nécessaires à la page de prêt correspondante.

  • Les pages de prêt auront un bouton pour prêter l'élément, un autre pour le rendre. Ces boutons seront activés ou désactivés selon l'état actuel de l'élément. Par exemple : si le livre choisi est prêté, seul le bouton "rendre" sera actif et vice versa.

  • Vous aurez un service qui centralise les données des livres ET des CD (créez deux array séparés, codés en dur, contenant plusieurs éléments), ainsi qu'une seule méthode pour prêter/rendre un élément.

  • Le menu latéral sera accessible depuis les pages de liste et la page de réglages.

Vérifiez bien que vous avez les éléments suivants :

  • le serveur de développement se lance avec ionic serve après un npm install ;

  • soit chaque page se trouve dans son propre dossier, soit elles sont regroupées de manière logique ;

  • le boilerplate généré par le CLI est supprimé et il n'y a pas de code "en trop" (injections non utilisées par exemple) ;

  • les components et directives employés sont adéquats (<ion-list> et *ngFor par exemple). L'interpolation est utilisée pour afficher correctement les données ;

  • le NavController est utilisé correctement ;

  • il n'y a qu'une seule instance du service, permettant le partage de données entre les pages ;

  • les <ion-tabs> et <ion-tab> sont utilisés correctement. La page racine du projet est la TabsPage ;

  • le menu est implémenté correctement et se ferme correctement quand on clique sur un bouton ;

  • le ModalController est utilisé correctement pour créer, afficher et fermer les Modal.

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