Vous devez activer le JavaScript pour la visualiser. Le meilleur du web 10 Le meilleur du web 17 Le meilleur du web Dans MovieListPage , nous avons directement initialisé notre liste en utilisant des valeurs fixes, mais ce n’est pas la meilleure chose à faire. Dans Ionic, on utilise plutôt une pile de navigation navigation stack , ce qui implique de mettre des vues dans la pile push et de les enlever pop comme décrit sur le schéma suivant:. Ce dossier contient plusieurs sous-dossiers:. Merci infiniment pour ces templates. Pour plus d’informations sur les composants Ionic, je vous invite à lire la doc qui est assez bien faite et possède pas mal d’exemples.

Nous avons appris à utiliser Ionic CLI pour la création de pages, la création de providers , le build , le lancement de l’appli… Nous avons passé en revue le principe de navigation utilisé dans Ionic, l’utilité des lifecycle events , et pour finir nous avons appris à utiliser les fonctionnalités de stockage d’Ionic. Gaétan Weltzer , comme toujours en fait. As-tu un beau template pour un site web de wedding planer please? Pour cela, nous allons nous baser sur la doc. Titanium Xamarin Et Ionic dans tout ça?

Vous maîtrisez les technos du Web et souhaitez développer une application mobile? Ionic est fait pour vous. Il s’appuie sur Angular pour la partie web et sur Cordova pour la partie native. Dans ce tutoriel, nous allons apprendre les bases de l’utilisation d’Ionic. Vous trouverez sur Github tout le code présenté dans ce tutoriel. Version PDF Version hors-ligne. Pour lancer l’application, il suffit de se mettre dans le dossier et de lancer la commande ionic serve. Chrome DevTools fournit un outil nous permettant de simuler la taille des écrans sur mobile, ce qui est bien pratique pour tester notre application:.

La démarche étant assez fastidieuse et dépassant le cadre de ce tutoriel, vous trouverez toutes les informations nécessaires ici. Une fois le SDK installé et votre téléphone branché en USB, voici les démarches à suivre pour lancer l’application sur ce dernier:. Vous pouvez aussi créer des appareils virtuels grâce à l’ AVD Manager et émuler l’application avec la commande ionic cordova emulate android. Au moment où j’écris ces lignes, un nouvel outil est sorti, Ionic DevAppqui permet de lancer et de déboguer l’application sans avoir à installer des SDK complémentaires.

Ionic se base sur les componentsce qui veut dire que chaque page est vue comme un composant individuel avec son propre habillage et comportement. Cela facilite la maintenabilité du projet vu que tout le code se trouve au niveau du composant. À la racine de notre projet, nous avons des fichiers de configuration dont les plus importants sont:. Le code du projet vit ici.

C’est ici que nous allons créer des pages et des services. Ce dossier contient plusieurs sous-dossiers:. Contient les ressources pour les plateformes Android et iOS, notamment les images utilisées pour le splash screen et les icônes. Maintenant que tout est installé et que la structure de projet d’Ionic n’a plus aucun secret pour nous, nous pouvons commencer à créer nos premières pages.

Notre application contiendra notre home page qui affichera nos films favoris, une page pour afficher la liste des films et une autre page pour le détail du film image, description, note, trailer …. On peut choisir nos films préférés à partir de la liste et stocker le tout dans une base de données locale.

On aura le résultat final suivant:. Ionic CLI nous permet de générer nos pages avec la commande ionic g page page-name. Si vous avez déjà utilisé Angular CLI, vous remarquerez que la commande est assez similaire.

Créer une appli mobile en JS avec Ionic | SUPINFO, École Supérieure d’Informatique

Pour plus d’informations sur les possibilités de génération de fichiers, je vous invite à lire la doc d’Ionic CLI. Nous allons donc générer nos fichiers pour chaque page:.

Pour chaque page, nous aurons quatre fichiers: Après cela il faut déclarer les modules dans le tableau des imports de app. Maintenant que nous avons créé nos pages, il faut leur mettre du contenu et naviguer vers ces pages. Mais avant cela il faut que je vous parle du système de navigation d’Ionic. Pour naviguer entre les vues dans Angular 4, on utilise un système de routage. Dans Ionic, on utilise plutôt une pile de navigation navigation stackce qui implique de mettre des vues dans la pile push et de les enlever pop comme décrit sur le schéma suivant:.

Ici on est sur la root page et l’on souhaite naviguer vers la Page 1: Si l’on souhaite revenir en arrière, on pop la page de la stack et c’est la root page qui sera affichée. La navigation se fait avec le NavController dont les trois méthodes principales sont:.

Il est souvent nécessaire d’exécuter des tâches au chargement de la page rafraîchissement du contenu, etc. C’est là qu’entrent en jeu les lifecycle events. Les lifecycle eventscomme leur nom l’indique, sont des événements nous informant de l’état d’une page Ionic durant tout son cycle de vie, de sa création à sa destruction. Certains ne sont lancés qu’une seule fois tandis que d’autres sont lancés à chaque fois que la page concernée est active.

Première chose à faire: Dans notre cas, il s’agit de MyMoviesPage:. Pour plus d’informations sur les composants Ionic, je vous invite à lire la doc qui est assez bien faite et possède pas mal d’exemples.

MyMoviesPage sera la page de démarrage. De là on peut soit accéder au détail d’un film favori en naviguant vers MovieDetailPagesoit afficher la liste des films dans MovieListPage et ensuite voir le détail d’un film. Dans notre templatelors du clic sur le bouton, nous faisons appel à la méthode findMovie. Implémentons cette méthode dans MyMoviesPage:.

On est donc redirigé vers cette page, et un bouton de retour y est automatiquement ajouté:. Maintenant, il nous faut ajouter du contenu dans la page Movie List:.

Créons la variable movies dans movie-liste. Personnellement, j’aime bien typer mes variables.

Templates Ionic & psd Gratuit de cuisineen utilisant material design

Du coup, j’ai créé une interface IMovie en me basant sur la réponse JSON, en utilisant l’outil en ligne json2ts qui simplifie la tâche. Vous avez dû remarquer la fonction goToDetail movie: Nous allons donc temllate et voir comment récupérer des données de la stack de navigation. Nous pouvons passer des paramètres supplémentaires au NavController en plus de ceux de la page. Dans notre cas, nous allons lui passer notre objet movie:.

On définit la valeur de la variable movie ionicc du lifecycle event ionViewDidLoad:. Dans MovieListPagenous avons directement initialisé notre liste en utilisant templlate valeurs fixes, mais ce n’est pas la meilleure chose à faire.

Afin de respecter le SRP Single Gratuitt Principlenous allons déporter ces appels dans une autre classe et créer ce qu’Ionic appelle un providerà rapprocher d’un service dans Angular.

Ionic CLI nous permet de générer des providers assez simplement grâce à la commande ionic g provider movie-api. Je vous templaate de suivre pas à pas la déclaration du module http. Je passe directement à l’implémentation du provider:. Une fois la méthode getMovies créée, nous allons l’appeler dans MovieListPage et supprimer l’initialisation de notre variable movies:.

Nous avons bien évidemment utilisé le lifecycle event ionViewDidLoad pour initialiser notre variable movies à la création de la page. Vous devriez maintenant avoir une liste de films bien plus fournie que précédemment. Le but est de choisir des films favoris à partir de la page de détail, et de les afficher sur la page de démarrage. Commençons par modifier movie-detail.

C’est une fonction qui permet d’inverser le booléen.

Ionic 3 – Créez votre application mobile

Maintenant, le but est de stocker le choix de l’utilisateur. Pour cela nous allons utiliser Ionic Storage. Storage utilise une variété de moteurs de stockage sous-jacents, en choisissant le meilleur disponible en fonction de la plateforme. Lorsqu’il est exécuté dans un contexte d’application native, Storage priorise l’utilisation de SQLite si et seulement si le plugin est présent dans l’application, car il s’agit d’une base de données stable et qui ne sera pas vidée en cas d’espace disque insuffisant sur le device.

Pour cela, ttemplate allons nous baser grayuit la doc. Nous allons installer le plugin SQLite: Ensuite nous allons ajouter IonicStorageModule. Maintenant que l’installation est finie, nous allons créer un provider pour y centraliser toutes les opérations de CRUD.

Sur le même principe que pour movie-api. Tout d’abord, nous injectons dans vratuit constructeur le Storage qui nous permettra de stocker, récupérer et supprimer des données. Pour plus d’informations sur les méthodes et l’utilisation de Storageje vous conseille de lire la doc qui est assez détaillée.

Maintenant que notre provider est prêt à gérer des données, utilisons-le. Il nous faut bien évidemment lui injecter Grqtuit. La première chose que l’on fait lors du chargement de la page est d’appeler this.

Cette méthode vérifie si l’élément se trouve en base ou pas. Si c’est le cas, cela veut dire que c’est un film de la liste des favoris de l’utilisateur et donc on fixe la valeur de this. Pour ce qui est de la persistance des données, on fait simplement appel à this. La question à se poser est: Dans notre cas, on souhaite mettre à jour la liste des films favoris à chaque fois que l’on entre dans la page, on utilisera alors ionViewWillEnter.

Il ne reste plus qu’à mettre à jour le template my-movies. J’ai utilisé ion-list pour afficher la liste des films, et voilà:. Dans ce tutoriel, nous avons développé une application Ionic de bout en bout.

Nous avons appris à utiliser Ionic CLI pour la création de pages, la création de providersle ionnicle lancement de l’appli… Nous avons passé en revue le principe de navigation utilisé dans Ionic, l’utilité des lifecycle eventset pour finir nous avons appris à utiliser les fonctionnalités de stockage d’Ionic. Nous n’avons vu qu’une petite partie des possibilités de ce Framework. Je vous laisse aller plus loin, notamment en ajoutant une SearchBardes Alertsdes Toasts et bien plus encore.

Pour rappel, le code lié à ce tutoriel est disponible dans son intégralité sur Github. Vous avez aimé ce tutoriel? Alors partagez-le en cliquant sur les boutons suivants: Aucune reproduction, même partielle, ne peut être faite de ce site ni de l’ensemble de son contenu: Installation et mise en route du projet I-A. Création du projet II.